@nd-storybook/storybook 0.4.1 → 0.4.2
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/README.md +42 -17
- package/dist/index.cjs.js +45 -45
- package/dist/index.es.js +6432 -6476
- package/package.json +9 -3
package/README.md
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
# Company Design System
|
|
2
2
|
|
|
3
|
-
This repository contains the design system for our company, built with
|
|
3
|
+
This repository contains the design system for our company, built with React, Tailwind CSS, and Storybook.
|
|
4
|
+
|
|
5
|
+
> This project uses **yarn**. Running `npm install` will rewrite `yarn.lock` and is blocked by a preinstall check.
|
|
4
6
|
|
|
5
7
|
## Getting Started
|
|
6
8
|
|
|
7
9
|
### Installation
|
|
8
10
|
|
|
9
11
|
```bash
|
|
10
|
-
|
|
12
|
+
yarn install
|
|
11
13
|
```
|
|
12
14
|
|
|
13
15
|
### Updating tokens
|
|
@@ -25,13 +27,13 @@ npm install
|
|
|
25
27
|
To run the development server:
|
|
26
28
|
|
|
27
29
|
```bash
|
|
28
|
-
|
|
30
|
+
yarn dev
|
|
29
31
|
```
|
|
30
32
|
|
|
31
33
|
To run Storybook:
|
|
32
34
|
|
|
33
35
|
```bash
|
|
34
|
-
|
|
36
|
+
yarn storybook
|
|
35
37
|
```
|
|
36
38
|
|
|
37
39
|
### Building
|
|
@@ -39,25 +41,43 @@ npm run storybook
|
|
|
39
41
|
To build the library:
|
|
40
42
|
|
|
41
43
|
```bash
|
|
42
|
-
|
|
44
|
+
yarn build
|
|
43
45
|
```
|
|
44
46
|
|
|
45
47
|
To build Storybook:
|
|
46
48
|
|
|
47
49
|
```bash
|
|
48
|
-
|
|
50
|
+
yarn build-storybook
|
|
49
51
|
```
|
|
50
52
|
|
|
51
|
-
|
|
53
|
+
To preview a production build:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
yarn preview
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Icons
|
|
60
|
+
|
|
61
|
+
Icons live in `src/atoms/basicAtoms/Icon/icons/`, split into `fill/` and `outline/` variants, and are registered in `list.ts` under the key `<name>-<variant>`.
|
|
62
|
+
|
|
63
|
+
Keep icon SVGs as vectors — never export them as an embedded bitmap. Use `currentColor` for fills and strokes so icons follow the `color` prop, with brand icons that must keep their own colours (such as `google`) as the exception.
|
|
52
64
|
|
|
53
|
-
|
|
65
|
+
After adding or changing an icon, run:
|
|
54
66
|
|
|
55
|
-
|
|
56
|
-
-
|
|
67
|
+
```bash
|
|
68
|
+
yarn optimize-svg
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
This runs svgo over the whole set. It also runs automatically as part of `yarn build`, and it is idempotent, so running it twice changes nothing.
|
|
72
|
+
|
|
73
|
+
## Components
|
|
74
|
+
|
|
75
|
+
Components are organised by atomic design level, each with its own directory containing the component and its Storybook stories:
|
|
57
76
|
|
|
58
|
-
|
|
59
|
-
-
|
|
60
|
-
-
|
|
77
|
+
- `src/atoms/` — `actionAtoms`, `basicAtoms`, `displayAtoms`
|
|
78
|
+
- `src/molecules/`
|
|
79
|
+
- `src/organisms/`
|
|
80
|
+
- `src/pages/`
|
|
61
81
|
|
|
62
82
|
## Customization
|
|
63
83
|
|
|
@@ -65,7 +85,12 @@ The design system uses Tailwind CSS for styling. You can customize the design to
|
|
|
65
85
|
|
|
66
86
|
## Adding New Components
|
|
67
87
|
|
|
68
|
-
1. Create a new directory in `src/
|
|
69
|
-
2. Add your
|
|
70
|
-
3. Create a Storybook stories file
|
|
71
|
-
4. Export the component
|
|
88
|
+
1. Create a new directory in the appropriate layer, e.g. `src/molecules/formMolecules/MyComponent/`
|
|
89
|
+
2. Add your component file, e.g. `MyComponent.tsx`
|
|
90
|
+
3. Create a Storybook stories file alongside it, e.g. `MyComponent.stories.tsx`
|
|
91
|
+
4. Export the component and its props type from `src/index.ts`:
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
export * from '@molecules/formMolecules/MyComponent/MyComponent';
|
|
95
|
+
export type { MyComponentProps } from './molecules/formMolecules/MyComponent/MyComponent';
|
|
96
|
+
```
|