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

Release

Before starting, make sure that CHANGELOG.md is updated according to keepachangelog.com with the latest release notes. If not, make a PR updating it before continuing.

1. Checkout a new branch from the main branch, update Changelog and bump the project version.

git checkout main
git pull
git checkout -b [branch_name]

2. Bump the version according to semver.org and create a PR

npm version [major | minor | patch] 

3. When merged, go the the main branch, pull and push the new tag to origin

git checkout main
git pull
git push origin --tags

Wait for the build to be successful (green tick in GitHub Actions workflow) before next step

4. Login and publish to NPM

npm login
> enter your username and password
> enter your email address
> complete two factor authentication
npm publish

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
• Box
• Button
• Card
• CheckBox
• CheckBoxGroup
• Datepicker
• Dropdown
• Emoji
• Icon
• IconWrapper
• LabelledText
• Loader
• Message (deprecated - use Support Message instead)
• Modal
• NumberInput
• RadioButton
• Row
• SearchInput
• SupportMessage
• Tag
• Text
• Textarea
• TextInput
• Toggle

Usage

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

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

License

MIT © Marshmallow