# FloWMS React Component Library

This repository contains the FloWMS React component library.

[Contribute](https://bitbucket.org/lavalogic/flowms-react-components/src/master/)

[View Storybook Docs](https://storybook.flowms.io/)

---

## 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.

```sh
$ npm install
```

### Develop

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

```sh
$ 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:

```sh
$ NAME=MyNewComponent npm run scaffold
```

OR

```sh
$ 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.

```sh
$ 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:

```sh
$ 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 |