# ☢ react-components ☢

### Debugging tests

In VSCode add this configuration:

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug CRA Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
      "runtimeArgs": ["--inspect-brk", "test"],
      "args": ["--runInBand", "--no-cache", "--env=jsdom"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}
```

JetBrains IDE:

In the Jest run/debug configuration specify the path to the `revlout-react-scripts`
package in the Jest package field and add --env=jsdom to the Jest options field.

## Commands

To develop components run

```bash
npm run sg
```

To test

```bash
npm run test
# For watch mode
npm run test:watch
# For tests with coverage info
npm run test:coverage
```

To publish your lib run (which also will run a build process)

```bash
npm run release
```

## More details

As an example in boilerplate there is a `normalize.css` imported to styleguidist.
Landing page is empty styled with `styled-components`.

There is also stylelint with
`styled-components` preprocessor for linting styles in them. And hence
no stylelinting of plain CSS.

All your components should be in `src/components` folder, so it will be visible
by styleguidist and so they will be bundled to the `lib` for future publishing.

There is CRA (revolut-react-scripts) underneath, so you can use all its goodness to write your landing page
and also for testing your components library, collect test coverage on them etc.
All setup this way so they will run only on `src/components` and will ignore all other
folders which are not related to components library.

Readme for your lib lay down in `LIBRARY.md` and will automatically be attached to
the newly released version of the lib.

## More on release process

Basically when you run `npm run release`
It will run prettier, all linters, then all tests, and after all will bundle
ignoring `test.js` your components. After that it will generate `package.json` for
`lib` folder so handy `name/Button` imports will be possible. Then he will run `npm publish`
on that newly created `package.json` and publish on Github Pages updated docs of
your components.

All you need to do is to change package name in `scripts/copyBuildFiles.js` on line 52.
Version of the components lib will be derived from root `package.json`