This library contains React components that can be reused across web applications. None of these components manage state. State is managed in each web application.
You can explore all components by launching the catalog:
yarn start
and open your browser at http://localhost:4000/. You can also explore the catalog online: https://unstats.github.io/components/.
This package is currently not being published to NPM. You can install it directly from GitHub. Go to releases page and look up the link to tarball unstats-component-vX.Y.Z.tgz of the latest release and run
yarn add <link_to_tarball>
Testing is done with with Jest using react-testing-library. Run
yarn test
to execute all tests. In order to run a single test file, e.g. for debugging, you need to provide a pattern that matches the test file:
yarn test <pattern>
For instance
yarn test Dropdown
runs src/Dropdown/Dropdown.test.jsx. In order to run only specific tests within a test file, you can use
test.only from Jest's API.
There are two things you might want to debug: components displayed in the styleguide and tests. For each scenario you need to be able to place debugger statements in your code.
Debugging components is the same as debugging any other JavaScript code running in the browser. Set your breakpoints as needed in the component source code. Then open Chrome DevTools and switch to the Sources tab. The styleguide is configured to create sourcemaps that Chrome picks up to map between the actually running transpiled ES5 code and original ES2015 source code for a seamless debugging experience.
Tests run outside the browser with Node. After placing debugger statement in a test file, run
yarn run test:debug <pattern>
to start a debugging session. You can then attach a debugger to the running test with one of these two methods:
- In Chrome launch a tab at
chrome://inspectclick on inspect. - In Visual Studio Code launch the
test:debuglaunch configuration defined in folder.vscode.