makeup-components v3.0.0

☢ react-components ☢

Debugging tests

In VSCode add this configuration:

{
  "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

npm run sg

To test

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)

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