@luscii-healthtech/web-ui 6.0.13 → 6.0.15

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.
Files changed (3) hide show
  1. package/README.md +30 -37
  2. package/dist/web-ui-tailwind.css +2460 -0
  3. package/package.json +5 -3
package/README.md CHANGED
@@ -1,23 +1,23 @@
1
1
  # web-ui
2
2
 
3
- The web-ui repository contains the web UI components for Luscii's front end projects. It is published to NPM for inclusion into our projects. It also uses storybook and is published to chromatic for easy review of changes.
3
+ The web-ui repository contains the UI components for Luscii's front-end projects. It is published to NPM for usage into our projects. It uses Storybook and is published to Chromatic for easy review of visual changes.
4
4
 
5
5
  ## Running locally
6
6
 
7
- If you want to run storybook locally you can use
7
+ If you want to run Storybook locally you can use:
8
8
 
9
9
  ```bash
10
10
  yarn install
11
- yarn storybook
11
+ yarn dev # runs a Tailwind watcher and Storybook
12
12
  ```
13
13
 
14
14
  ## Testing your production build
15
15
 
16
16
  Assuming the following setup:
17
17
 
18
- - The `web-ui` and `cVitals-Web` repositories are siblings are in the same folder
19
- - You have ran `yarn install` on `cVitals-Web`
20
- - You have ran `yarn build` on `web-ui`
18
+ - The `web-ui` and `cVitals-Web` repositories are siblings in the same folder.
19
+ - You ran `yarn install` in `cVitals-Web`.
20
+ - You ran `yarn build` in `web-ui`.
21
21
 
22
22
  Run the script below in your terminal, _in the parent folder of the repositories_.
23
23
 
@@ -31,64 +31,57 @@ Or use the shortcut:
31
31
  yarn test-copy-build
32
32
  ```
33
33
 
34
- When you run cVitals again, it should contain your latest updates in the component library. Use this to make sure your changes are solid before merging a pull request.
34
+ When you run cVitals again, it should contain your latest updates in the component library. Use this to make sure your changes are solid before opening a pull request.
35
35
 
36
36
  ## Contributing
37
37
 
38
- Make sure you understand our design system and follow its guidelines. They are document in storybook. We value consistency, simplicity and usability highly. Don't mess it up.
38
+ Make sure you understand our design system and follow its guidelines. They are documented in Storybook. We highly value consistency, simplicity and usability. Don't mess it up.
39
39
 
40
- If you want to add components, do so in
40
+ If you want to add components, do so in the `/src/components` directory.
41
41
 
42
- ```
43
- /src/components
44
- ```
45
-
46
- Please stay vigilant when adding components that we implement them consistently in our projects and that it is clear when and where they have to be used. We want to avoid a lot of components that are similar.
42
+ Please stay vigilant when adding components that we implement them consistently in our projects and that it is clear where and when they have to be used. We want to avoid a lot of components that are similar.
47
43
 
48
- When you create new components, you must add them to storybook as well. Stories go in
49
-
50
- ```
51
- /stories
52
- ```
44
+ When you create new components, you must add them to Storybook as well. Stories go in the `/stories` directory.
53
45
 
54
46
  ### Adding icons
55
47
 
56
- Add new icons by:
48
+ Add new icons by following these steps:
57
49
 
58
- - Add the svg file(s) in `src/components/Icons/icons`
59
- - Run `yarn icons`
50
+ - Add the svg file(s) in `src/components/Icons/icons`.
51
+ - Run `yarn icons`.
60
52
 
61
53
  The icons are optimized by SVGO and transformed into React components by [SVGR](https://react-svgr.com) which are placed in `src/components/Icons`.
62
54
 
63
55
  ## CI setup
64
56
 
65
- #### Branching
57
+ ### Branching
66
58
 
67
- The `main` branch is our default branch. When you contribute, branch from there and name your branch
59
+ The `main` branch is our default branch. When you contribute, branch from there and use the following branch naming convention:
68
60
 
69
61
  ```
70
- //Branch names convention (enforced)
62
+ // Branch naming convention (enforced)
71
63
 
72
- major/* //for a new design system or changes that effect our foundations (typography, color)
73
- minor/* //for new components and stories
74
- patch/* //for small improvements to existing components, stories
75
- bug/* //for bugs, fixes
64
+ major/* // For a new design system or changes that effect our foundations (e.g. typography, color).
65
+ minor/* // For new components and stories.
66
+ patch/* // For small improvements to existing components or stories.
67
+ bug/* // For bugs or fixes.
68
+ chore/* // For things related to development that don't impact the output for consumers and/or users.
76
69
  ```
77
70
 
78
71
  We have configured at lot of magic for your convenience.
79
72
 
80
- #### On every PR
73
+ ### On every PR
81
74
 
82
- 1. the module build, lint and tests are checked.
83
- 2. The storybook build is published to chromatic.
75
+ 1. The module build, lint and tests are checked.
76
+ 2. The Storybook build is published to Chromatic.
84
77
  3. Labels are added based on the branch name and PR size.
85
- 4. Branch names must follow the convention and are checked
78
+ 4. Branch names must follow the convention and are checked.
86
79
 
87
- #### On merge to main
80
+ ### On merge to main
88
81
 
89
- 1. Draft a github release
90
- 2. Version bump of the package
91
- 3. Publish new package to NPM
82
+ 1. Draft a GitHub release.
83
+ 2. Version bump of the package.
84
+ 3. Publish new package to NPM.
92
85
 
93
86
  ---
94
87