1 | # d4sd-components
|
2 |
|
3 | This is the component library for [D4SD](https://d4sd.org/)
|
4 |
|
5 | It is an extension of Ant Design, so all non-overided components remain purely Ant Design components
|
6 |
|
7 | To see/test our components, go to master branch and run `npm run storybook`
|
8 |
|
9 | ## How to publish components library
|
10 |
|
11 | First, make your components in the `components` folder
|
12 |
|
13 | Then, in `index.tsx` in the root folder, add a
|
14 | ```js
|
15 | export { YourComponent } from "./components/YourComponent";
|
16 | ```
|
17 | before the `export * from "antd"`
|
18 |
|
19 | Then, running
|
20 | ```bash
|
21 | npm run storybook
|
22 | ```
|
23 | Will load the current code and show your components in `stories` on a locally hosted website that will eventually automatically open.
|
24 |
|
25 |
|
26 | Then run the following to **prepare/build** the component library for publishing
|
27 |
|
28 | ```bash
|
29 | npm run build
|
30 | ```
|
31 |
|
32 | This essentially removes the old package and then runs webpack to pack our code into a library.
|
33 |
|
34 | This will eventually open a website displaying the contents of the package just built and its size, you can quit this process anytime. The package contents should contain `index.js` and `main.css`.
|
35 |
|
36 | After running the build, make sure to **commit** all changes and push them to the remote (GitHub) and then **update the package version**
|
37 |
|
38 | ```bash
|
39 | npm version patch
|
40 | ```
|
41 |
|
42 | Then we finally **publish** the library with
|
43 |
|
44 | ```bash
|
45 | npm publish
|
46 | ```
|
47 |
|
48 | Once published, make sure to run
|
49 | ```bash
|
50 | npm install @d4sd/components
|
51 | ```
|
52 |
|
53 | in whichever repository is using our components to update it.
|
54 |
|
55 | ## Development Workflow / Tips
|
56 |
|
57 | The master branch should **always** be in sync with what is published. E.g, if you ran `npm run build`, the built package is the same as what is being hosted on npm.
|
58 |
|
59 | With this in mind, make changes by branching off of master and test those changes using `npm run storybook`. Commit/push those changes to your branch and merge your branch into `master` once it is ready. After each merge, **make sure** to follow the publishing steps above.
|
60 |
|