FloWMS React Component Library

This repository contains the FloWMS React component library.

Contribute

View Storybook Docs

Release a version

For a new version to be pushed to npm, a tagged commit must be made to the master branch, so the bitbucket pipeline runs.

One-time setup

Ensure that you have your git config set to push tags by running the command:

git config --global push.followTags true

Release workflow

When you are happy with your work and ready to push to the origin repo, the first thing is to open package.json and increment the version number.

Note: Follow semvar practices, e.g vX.0.0 denotes a major (breaking) version, v0.X.0 is a minor (non-breaking) version and v0.0.X is a patch. See the package.json for the most recent version number.

Git workflow:

Start by committing your changes to git using your usual commands (or those shown here):

git add .
git commit -am "My commit"

Check to see if you need to pull in any other changes from the origin branch and, if needed, do so with the command:

git pull origin <branch>

With all the changes ready to be pushed, select the latest commit hash (either the merge or your own commit) and create a new version tag. This tag should be the same as the version shown in the package.json file:

Note: Follow semvar practices, e.g vX.0.0 denotes a major (breaking) version, v0.X.0 is a minor (non-breaking) version and v0.0.X is a patch. See the package.json for the most recent version number.

git tag -a <version> -m <message> <commit>
git tag -a 1.0.4 -m "Version 1.0.4" 4b4aa87

Once tagged, push the branch up to the origin branch:

git push origin <branch>

Initial Setup

Setup

Install all dependencies.

$ npm install

Develop

Bundles all components using Storybook, starts the dev server and watches for changes.

$ npm run dev

Adding Icons

When adding new icons to this repo, they must fit the following spec:

1. Icons should be SVGs.
2. Icons should have lowercase, hyphenated names your-icon.svg, as spaces in filenames may cause issues across browsers or operating systems.
3. Icons should not have an inline fill property, this can cause colours passed via CSS to appear incorrectly or not at all. Included in this repo is a handy CLI batch processing tool to help you with the above:
4. First, ensure you have put all your svg files in src/assets/icons/.
5. To process all icon files to adhere to the above spec, run npm run icon:files.
6. To generate a temporary file that has icon stories (to paste into Storybook) and generate TypeScript types, run npm run icon:stories. Copy your types into src/components/Icon/types and your stories in src/components/Icon/Icon.stories.mdx. Remember to delete the generated temp file too.

Scaffold

You can quickly scaffold a new component by running:

$ NAME=MyNewComponent npm run scaffold

OR

$ NAME=MyNewComponent npm run scaffold:stateful

This will create a new stateless (functional) or stateful (using hooks) component folder with all the required files and some example variants. This is the best way of ensuring a new component complies with our coding standards and naming conventions.

Build

Bundles everything using webpack and outputs to /dist/ ready to be republished to npm.

$ npm run build

Run individual tasks:

| Command | Description | | -----------------------------|------------------------------------| | $ npm run build:components | Build just the components | | $ npm run build:docs | Build just storybook documentation |

Testing

Run all tests:

$ npm run test

Run individual tests:

| Command | Description | | --------------------------|---------------------------------------------| | $ npm run test:cypress | Run automated browser tests | | $ npm run test:unit | Run component unit tests | | $ npm run test:coverage | Run coverage tests and send coverage report |