diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f7ac00e1d..46b0b8410 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ # Contributing to @axa-fr/react-toolkit -First, ensure you have the [latest `npm`](https://docs.npmjs.com/). +First, ensure you have Node.js < 12 and the [latest `npm`](https://docs.npmjs.com/). To get started with the repository: @@ -8,96 +8,111 @@ To get started with the repository: git clone https://github.com/AxaGuilDEv/react-toolkit.git cd react-toolkit npm install -npm run bootstrap ``` -## Commands +A post-install action is thrown. This action first install dependencies with ```lerna bootstrap``` & then build all packages with a custom command gulp. -## How to run +At this point you are ready to contribute. -Demo of how the component is used. +## Additional installations -```sh -# [react] Develop with storybook -$ npm run storybook -# [react] Build the storybook website -$ npm run storybook:build +This repository contains some projects used to display, explain components built previously. + +* *examples/demo* : a project using some components & react-oidc library +* *storybook* : + * *design-system*: a design system web app rendering & exposing code to use components + * *storybook*: a storybook app to develop in isolated mode + * *styles*: part of design sytem & use as an explaination page of toolkit style -# [react] To edit component in live inside storybook, you have run js compilation in another bash process -$ npm run dev -# [react] To edit a single component in live inside storybook, you have run js compilation in another bash process -$ npx lerna exec --scope=@axa-fr/react-toolkit-table -- node ../../scripts/watch-js.js -# [CSS] Generate CSS for storybook (does not watch, you have to run it manually) -$ gulp all +If you want to use these projects, you must: + +```sh +cd examples/demo +npm i +``` -# [css] Develop html/css -$ npm run css -# [css] Build the html/css website -$ npm run css:build +```sh +cd storybook/design-system +npm i ``` -## How to run Demo Application +```sh +cd storybook/storybook +npm i +``` ```sh -# [react] Launch local demo app -$ npm start -# [react] Build local demo app -$ npm run demo:build +cd storybook/styles +npm i ``` -### Run Unit Tests +## How to work on a component + +Into a terminal, to start to develop a component you can run ```sh -$ npm test +npm run dev +``` -# watch for changes -$ npm test -- --watch +Or,if you want to run your component in watch mode, execting one of command below -# For a specific file (e.g., in packages/context/__tests__/command.test.js) -$ npm test -- --watch packages/action +```sh +# If your component is in js +npm run dev:js -- --scope=@axa-fr/react-toolkit-status +# If your component is in TypeScript +npm run dev:ts -- --scope=@axa-fr/react-toolkit-action ``` -By default, `npm test` also runs the linter. -You can skip this by calling `jest` directly: +*scope* refer to package name of your component you are working on. + +And then if you want to work on it, in isolation mode, you can run storybook ```sh -$ npx jest -$ npx jest --watch -$ npx jest --config jest.config.json -# etc +npm run storybook ``` -### Linting +After all this, if your development affect css, you can run ```sh -$ npm run lint +npx gulp all ``` -It's also a good idea to hook up your editor to an eslint plugin. +to regenerate css -To fix lint errors from the command line: +## Other usefull commands + +### Launch demo app ```sh -$ npm run lint -- --fix +npm start ``` -### Coverage +### Run unit tests + +```sh +npm test +``` -If you would like to check test coverage, run the coverage script, then open -`coverage/lcov-report/index.html` in your favorite browser. +By default, `npm test` also runs the linter. +You can skip this by calling `jest` directly: ```sh -$ npm test -- --coverage +$ npx jest +$ npx jest --watch +$ npx jest --config jest.config.json +# etc +``` -# OS X -$ open coverage/lcov-report/index.html +### Run coverage -# Linux -$ xdg-open coverage/lcov-report/index.html +```sh +npm test -- --coverage ``` + + ## Pull Request Please respect the following [PULL_REQUEST_TEMPLATE.md](./PULL_REQUEST_TEMPLATE.md)