Skip to content

Commit

Permalink
docs: modify contributing to only use simple command
Browse files Browse the repository at this point in the history
  • Loading branch information
arnaudforaison authored and xballoy committed Jun 30, 2020
1 parent 298571e commit 9c46320
Showing 1 changed file with 65 additions and 50 deletions.
115 changes: 65 additions & 50 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,103 +1,118 @@
# 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:

```sh
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)
Expand Down

0 comments on commit 9c46320

Please sign in to comment.