@redsift/icons 11.3.0-muiv5 → 11.3.1-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CONTRIBUTING.md +64 -40
- package/package.json +2 -2
package/CONTRIBUTING.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Contribute
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Setup
|
|
4
4
|
|
|
5
5
|
Make sure you have the following requirements installed: [node](https://nodejs.org/) (v16+) and [yarn](https://yarnpkg.com/en/) (v1.22.0+)
|
|
6
6
|
|
|
@@ -26,7 +26,7 @@ You can then run the storybook and browse to [http://localhost:9000](http://loca
|
|
|
26
26
|
yarn start:storybook
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
## Architecture
|
|
30
30
|
|
|
31
31
|
The Design System is following a monorepo architecture, providing multiple packages based on different use cases.
|
|
32
32
|
|
|
@@ -68,8 +68,6 @@ The Design System is following a monorepo architecture, providing multiple packa
|
|
|
68
68
|
|
|
69
69
|
Please make sure to work inside the correct package when making contribution.
|
|
70
70
|
|
|
71
|
-
### Shared code
|
|
72
|
-
|
|
73
71
|
If you need something inside more than one package, do not duplicate the code. Place it inside one package, export it from this package and import it inside the others.
|
|
74
72
|
|
|
75
73
|
For instance, `@redsift/dashboard` and `@redsift/charts` both have a `PieChart` component that both share the `PieChartVariant` type interface. `PieChartVariant` has been implemented inside `@redsift/charts` and is imported inside `@redsift/dashboard`.
|
|
@@ -102,9 +100,11 @@ When dependencies are required, we try not to import them entirely to optimise t
|
|
|
102
100
|
import * as d3 from 'd3';
|
|
103
101
|
|
|
104
102
|
// do
|
|
105
|
-
import { sum, scaleOrdinal } from 'd3';
|
|
103
|
+
import { sum as d3sum, scaleOrdinal as d3scaleOrdinal, ScaleOrdinal as d3ScaleOrdinal } from 'd3';
|
|
106
104
|
```
|
|
107
105
|
|
|
106
|
+
## Component
|
|
107
|
+
|
|
108
108
|
### Scaffolding
|
|
109
109
|
|
|
110
110
|
Each component should be in its own folder. If a subcomponent can be used as a standalone component, it should be in its own folder too. For instance, `CheckboxGroup` uses `Checkbox` but `Checkbox` can be used alone. In this case, `CheckboxGroup` and `Checkbox` both have their own folder. For `PieChart` and `PieChartSlice`, a `PieChartSlice` can not be used alone. It only exists inside a `PieChart` component. Therefore, both components are inside the same folder.
|
|
@@ -191,40 +191,6 @@ size?: PieChartSize;
|
|
|
191
191
|
|
|
192
192
|
To know how to define your API, to name and document your props, take a look at the existing components.
|
|
193
193
|
|
|
194
|
-
## Tests
|
|
195
|
-
|
|
196
|
-
We use [jest](https://jestjs.io/) for unit tests and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) for rendering and writing assertions. We also use [Storyshots](https://storybook.js.org/addons/@storybook/addon-storyshots) to automatically take a code snapshot of every story.
|
|
197
|
-
|
|
198
|
-
Please make sure you include tests with your pull requests. Our CI will run the tests on each PR. A minimum of 90% code coverage is required for statements, branches, functions and lines of every package. However, in practice, we try to reach a 100% code coverage.
|
|
199
|
-
|
|
200
|
-
We split the tests into 2 groups.
|
|
201
|
-
|
|
202
|
-
_Visual tests_
|
|
203
|
-
|
|
204
|
-
- A Storybook story should be written for each visual state that a component can be in (based on props).
|
|
205
|
-
|
|
206
|
-
_Unit tests_
|
|
207
|
-
|
|
208
|
-
- (Props) Anything that should be changed by a prop should be tested via react-testing-library.
|
|
209
|
-
- (Events) Anything that should trigger an event should be tested via react-testing-library.
|
|
210
|
-
|
|
211
|
-
You can run the tests with:
|
|
212
|
-
|
|
213
|
-
```bash
|
|
214
|
-
yarn test
|
|
215
|
-
```
|
|
216
|
-
|
|
217
|
-
Or for a specific package with:
|
|
218
|
-
|
|
219
|
-
```bash
|
|
220
|
-
yarn test:charts
|
|
221
|
-
yarn test:design-system
|
|
222
|
-
yarn test:dashboard
|
|
223
|
-
yarn test:table
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
Do not forget to update the snapshots with the `-u` option when you modify or create stories. However, you should **always** check the generated snapshots to see if they are correct. Do **not** blindly update the snapshots.
|
|
227
|
-
|
|
228
194
|
## Linting
|
|
229
195
|
|
|
230
196
|
The code is linted with [eslint](https://eslint.org/). You can run the linter with:
|
|
@@ -242,7 +208,7 @@ yarn lint:design-system
|
|
|
242
208
|
yarn lint:table
|
|
243
209
|
```
|
|
244
210
|
|
|
245
|
-
##
|
|
211
|
+
## Typing
|
|
246
212
|
|
|
247
213
|
The code is written in [TypeScript](https://www.typescriptlang.org/). The type checker will usually run in your editor, but also runs when you run:
|
|
248
214
|
|
|
@@ -329,6 +295,40 @@ Before implementing a component, try to see if there is a [pattern](https://www.
|
|
|
329
295
|
|
|
330
296
|
However, before using any ARIA, [read this disclaimer carefully](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/).
|
|
331
297
|
|
|
298
|
+
## Tests
|
|
299
|
+
|
|
300
|
+
We use [jest](https://jestjs.io/) for unit tests and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) for rendering and writing assertions. We also use [Storyshots](https://storybook.js.org/addons/@storybook/addon-storyshots) to automatically take a code snapshot of every story.
|
|
301
|
+
|
|
302
|
+
Please make sure you include tests with your pull requests. Our CI will run the tests on each PR. A minimum of 90% code coverage is required for statements, branches, functions and lines of every package. However, in practice, we try to reach a 100% code coverage.
|
|
303
|
+
|
|
304
|
+
We split the tests into 2 groups.
|
|
305
|
+
|
|
306
|
+
_Visual tests_
|
|
307
|
+
|
|
308
|
+
- A Storybook story should be written for each visual state that a component can be in (based on props).
|
|
309
|
+
|
|
310
|
+
_Unit tests_
|
|
311
|
+
|
|
312
|
+
- (Props) Anything that should be changed by a prop should be tested via react-testing-library.
|
|
313
|
+
- (Events) Anything that should trigger an event should be tested via react-testing-library.
|
|
314
|
+
|
|
315
|
+
You can run the tests with:
|
|
316
|
+
|
|
317
|
+
```bash
|
|
318
|
+
yarn test
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
Or for a specific package with:
|
|
322
|
+
|
|
323
|
+
```bash
|
|
324
|
+
yarn test:charts
|
|
325
|
+
yarn test:design-system
|
|
326
|
+
yarn test:dashboard
|
|
327
|
+
yarn test:table
|
|
328
|
+
```
|
|
329
|
+
|
|
330
|
+
Do not forget to update the snapshots with the `-u` option when you modify or create stories. However, you should **always** check the generated snapshots to see if they are correct. Do **not** blindly update the snapshots.
|
|
331
|
+
|
|
332
332
|
## Storybook
|
|
333
333
|
|
|
334
334
|
We use [Storybook](https://storybooks.js.org) for local development. Run the following command to start it:
|
|
@@ -413,3 +413,27 @@ yarn build:icons
|
|
|
413
413
|
yarn build:legacy
|
|
414
414
|
yarn build:table
|
|
415
415
|
```
|
|
416
|
+
|
|
417
|
+
## Publishing a release
|
|
418
|
+
|
|
419
|
+
### Stable release
|
|
420
|
+
|
|
421
|
+
1. Make sure you're on the release branch (ex: `release/vX.Y.Z`) and a PR is opened on Github
|
|
422
|
+
2. Login to NPM with an authorized account: `npm login`
|
|
423
|
+
3. Make sure your packages are up to date: `yarn`
|
|
424
|
+
4. Make sure the CI entirely passed on Github
|
|
425
|
+
5. (Optional) Make sure the build doesn't crash locally: `yarn build:design-system`
|
|
426
|
+
6. Publish the packages to NPM: `yarn release vX.Y.Z`
|
|
427
|
+
|
|
428
|
+
### Alpha release
|
|
429
|
+
|
|
430
|
+
If you need to test your contribution in a product before releasing -and you're not using `yarn link`, you can create an alpha release using the following process:
|
|
431
|
+
|
|
432
|
+
1. Create an alpha release branch (ex: `release/vX.Y.Z-alpha.N`) based on `release/vX.Y.Z`
|
|
433
|
+
2. Push it to remote (`git push origin release/vX.Y.Z-alpha.N`)
|
|
434
|
+
3. Login to NPM with an authorized account: `npm login`
|
|
435
|
+
4. Make sure your packages are up to date: `yarn`
|
|
436
|
+
5. (Optional) Make sure the build doesn't crash: `yarn build:design-system`
|
|
437
|
+
6. Publish the packages to NPM: `yarn release --dist-tag alpha vX.Y.Z-alpha.N`
|
|
438
|
+
|
|
439
|
+
After that if you need to make modification to your contribution, go back to `release/vX.Y.Z` and make the necessary modifications. Then remove the alpha release branch, and redo the process from step 1, incrementing `N` by 1.
|
package/package.json
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"prepublishOnly": "yarn build"
|
|
27
27
|
},
|
|
28
28
|
"types": "index.d.ts",
|
|
29
|
-
"version": "11.3.0
|
|
29
|
+
"version": "11.3.1-alpha.0",
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@mdi/js": "^7.1.96"
|
|
32
32
|
},
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"react": ">=17",
|
|
73
73
|
"react-dom": ">=17"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "5d8df901d54b5e7f4069f7500a976e190742014a"
|
|
76
76
|
}
|