Clone this repository. Run yarn to install all dependencies, then
yarn start
This project was bootstrapped with Create React App.
See its README for details here.
Prettier is an opinionated code formatter.
It is configured as a pre-commit hook, and the entire JS code is formatted by prettier on commit.
Install a prettier extension in your IDE and use the same configuration (see package.json) to format from your IDE.
flow is a JS type checker. Add:
// @flow
at the beginning of all JS files to enable type checking.
Install a flow extension in your IDE and make sure to add types when requested.
Refrain from using any, do not commit code with flow errors.
You can globally install flow-coverage-report to create a flow coverage report of the entire project. Your IDE should also be able to display the flow coverage of the currently opened file.
Storybook is used to develop and test components in isolation. Start it using:
yarn storybook
Create stories for all dumb components, with nominal and limit cases. For MyComponent.js, create an associated MyComponent.spec.js file, located next to it.
Use snapshotStoriesOf from './utils/snapshotStories' to declare your stories, and end them with a call to compareWithSnapshot() to automatically snapshot test all stories.
The configuration is pretty restricitive at the moment, and will be relaxed if needed. It is based on the airbnb plugin, with react and flowtype added.
A config for prettier is added to disable all prettier-handled formatting in the above rules.
Make sure your IDE enforces this configuration.
Test files have a .test.js extension. They should be located next to the main file they exercise.
Run all tests (by default only those affected by your ongoing changes since the last commit) using:
yarn test
Rely on snapshot testing (expect(myString).toMatchSnapshot()) to easily detect regressions.
To get a test code coverage report of the entire code base, run:
yarn coverage
Onboarding guide when starting from scratch
Add Checks and metrics on CI