@npm.tangocode/tc_ui_components/config/dev/README.md

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

# React Building Blocks

## For Development

To launch project on port 3000:

```
$ npm install
$ npm run build
$ npm start
```

## For Testing

1.  To run tests run `npm run test:watch`

2.  Snapshots are created from DOM output of some tests, these will change with any changes to the UI

    *   This will cause tests to fail, if the change is acceptable hit `u` to update the snapshot.

3.  The testing library `react-testing-library` is opinionated for good testing practices.

    *   In particular to use select inputs on forms we must use labels with htmlFor attribute with the ID of the input to control by using the `getByLabelText` method from RTL.
    *   While opinionated this will lead to best practices in creating forms for accesibility.
    *   If selecting other DOM elements in test put a `data-testId` attribute on the element and select with the `getByTestId` method from RTL.

4.  Use `Enzyme` for testing state changes only.

    *   Shallow rendering does not actually create a deep render of components, so it is not recommended to test UI or snapshots with shallow rendering.
    *   Use RTL to test UI interactions as it is a much more accurate representation of what the production environment will be.

5.  General note about snapshots.

    *   Use them carefully as they can create a 1k line file diff easily.
    *   Best practice is to take snapshots of the lower level components, not at a high component level like `app.tsx`

## For Library Publishing

1.  Move `package.json`, `webpack.config.js`, `tsconfig.json`, `README.md` to `configs/dev` folder
2.  Move `package.json`, `tsconfig.json`, `README.md` in `configs/lib` folder to root
3.  Run `sh config/scripts/documentationMerge.sh`
4.  Run: `npm install`
5.  Run: `npm run build`
6.  After that 1 new folder will appear in the project: `lib`
7.  Bump the version in `package.json` by 1 number
8.  Copy `README.md`, `LICENSE`, `.npmignore`, and `package.json` into lib folder
9.  cd into lib folder and run `npm publish`

> Don't forget to move the files back (step 1 and 2) before interacting with git. The lib files should be in `configs/lib` folder. The dev files should be in root.

## For Documentation

*   Run `npx styleguidist server` to start a style guide dev server (Documentation).
*   Run `npx styleguidist build` to build a static version.