Smores React

smores-react is a collection of React components that conform to Marshmallow's Design System - "S'mores".

Install

$ yarn add @mrshmllw/smores-react
# OR
$ npm install @mrshmllw/smores-react

Making changes

When making changes and creating PR's we use semantic-releases which make use of conventional-commits.

So to ensure our CHANGELOG.md is updated automatically and gets the changes we have made, we just need to name our PR's following this convention (casing matters): e.g

1. patch - fix(OPTIONAL bugfix-reference): some bugfix
2. minor - feat(OPTIONAL feature-reference): some feature
3. major - BREAKING CHANGE: some breaking change

Release

Only the following branches are supported for release:

• main
• feature/*
• chore/*
• fix/*

Preview

Before releasing, you may want to see the changes that will be included in the next version deployed on NPM, you can do so by:

1. Goto our github workflows
2. Click Preview Bump and Publish
3. Press Run workflow and select the main branch.
4. Wait for the Generate preview CHANGELOG.md and look at the results!

Releasing & Publishing

When you're happy with your changes, you can release & publish your changes to NPM in one fell swoop by:

1. Goto our github workflows
2. Click Bump and Publish
3. Press Run workflow and select the main branch.
4. Wait for release!

Note: this workflow will fail if the package version is already on the latest, so you dont have to worry about deploying the same changes multiple times.

Pre-Releases

Not too different to your usual workflow!

1. Checkout a new branch with the prefix (feature|chore|fix)/<your-branch-name> e.g. feature/awesome-new-feature
2. Open a PR and create your changes as normal using semantic-commits!
3. Goto our github workflows
4. Click Bump and Publish or Preview Bump and Publish
5. Press Run workflow and select <your-full-branch-name> branch.
6. Wait for release!
7. This can be done multiple times and it will increment your pre-release package version!
8. When you're happy with the changes, simply squash and merge the PR and release main!

Tokens

The MARSHMALLOW_CI_PAT has been created from the internal @marshmallow-ci GH account, it is due to expire on 27th November 2024 so will need regenerating once it does.

Running Smores in dev mode

To run Smores in dev mode follow the below instructions on installing and using Yalc to link up your project repo with Smores.

Install yalc on a global level by running

npm i yalc -g

This only needs to be installed once.

To run Smores in dev mode :

1. Make desired changes in Smores repo
2. On your Smores branch run

yalc publish

This will copy all the files that should be published into a remote NPM registry

In your project repo (not Smores e.g customer portal/sign up flow etc) run

yalc add @mrshmllw/smores-react

this will copy the current version from the store to your project’s .yalc folder and inject a file: .yalc/@mrshmllw/smores-react dependency into package.json

Every time you make changes in Smores and you wan’t to see it in local

run

yalc publish —private

In your project folder to see your Smores changes run the below to see the changes

yalc update

When you’ve finished deving run the below in your project folder to remove all packages linked

yalc remove --all

List of Components

• Accordion
• ActionDropdown
• Banner
• Box
• BrandCard
• Button
• Card
• CheckBox
• CheckBoxGroup
• Chip
• Datepicker
• Divider
• Dropdown
• Emoji
• Icon
• IconStrict
• IconWrapper
• LabelledText
• Link
• Loader
• Logo
• Modal
• NumberInput
• Pagination
• RadioButton
• RadioGroup
• RichText
• RichTextEditor
• Row
• SearchInput
• Snackbar
• SupportMessage
• Table
• Tag
• Text
• Textarea
• TextDateOfBirthInput
• TextInput
• Toggle
• Tooltip

Usage

import React from 'react';
import {Text, Button} from '@mrshmllw/smores-react';

const App = () => (
  <>
    <Text>Hey you</Text>
    <Button
      onClick={() => console.log('thanks for clicking :)')}
    >
      Click me!
    </Button>
  </>
);

License

MIT © Marshmallow