Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ci: improve lerna integration #641

Merged
merged 4 commits into from
Jul 3, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,7 @@ tmp/
.LSOverride
.idea
.vs

# Ignore package-lock.json / yarn.lock in dependencies
packages/**/package-lock.json
packages/**/yarn.lock
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
2 changes: 1 addition & 1 deletion azure-pipelines.yml
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ steps:
sonar.cfamily.build-wrapper-output.bypass=true
condition: and(succeeded(), eq(variables['System.PullRequest.IsFork'], 'False'))

- script: npm ci && npm run bootstrap
- script: npm ci
displayName: 'npm ci and bootstrap'

- script: npm test -- --coverage
Expand Down
Loading