@caseparts-org/caseblocks 0.0.3 → 0.0.5
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 +8 -59
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,62 +1,16 @@
|
|
|
1
|
-
#
|
|
1
|
+
# CaseBlocks
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The official React component library for Case Parts.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/@caseparts-org/caseblocks)
|
|
6
|
+
[](https://www.caseparts.com/caseblocks)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
2. `npm run build` to build component library.
|
|
9
|
-
|
|
10
|
-
## Local Development
|
|
11
|
-
|
|
12
|
-
### Storybook
|
|
13
|
-
|
|
14
|
-
Use Storybook to view components in an interactive environment when building them.
|
|
15
|
-
|
|
16
|
-
```
|
|
17
|
-
npm run storybook
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
### Link to this library locally
|
|
21
|
-
|
|
22
|
-
This library can be linked from another project, to see local changes to the component libary in a real app.
|
|
23
|
-
|
|
24
|
-
There are two ways to link locally. In both cases, a symlink is created between the consuming project and _the build artifacts_ of this component library. When making changes in this library, you'll need to run `npm run build` in order for the consuming project to obtain the changes.
|
|
25
|
-
|
|
26
|
-
1. Install this library via file path.
|
|
27
|
-
|
|
28
|
-
In the consuming project, install using the relative path to this project, for example:
|
|
29
|
-
|
|
30
|
-
```
|
|
31
|
-
npm install ../CaseBlocks
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
In the consumer project, you should see a dependency added in the `package.json` like this:
|
|
8
|
+
## Installation
|
|
35
9
|
|
|
10
|
+
```bash
|
|
11
|
+
npm install case-blocks
|
|
12
|
+
yarn add case-blocks
|
|
36
13
|
```
|
|
37
|
-
"dependencies": {
|
|
38
|
-
"case-blocks": "file:../CaseBlocks",
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
1. `npm link`.
|
|
42
|
-
|
|
43
|
-
This method requires two steps: adding this library to a registry of linkable projects, and then linking to this library from the consuming project.
|
|
44
|
-
|
|
45
|
-
In this folder, register this library for linking:
|
|
46
|
-
|
|
47
|
-
```
|
|
48
|
-
npm link
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
Then in the consuming project, link to this project:
|
|
52
|
-
|
|
53
|
-
```
|
|
54
|
-
npm link case-blocks
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
This will not affect the consuming project's `package.json` file.
|
|
58
|
-
|
|
59
|
-
If you wish to unlink the consuming project from this library, use `npm unlink case-blocks`.
|
|
60
14
|
|
|
61
15
|
## Using Design Tokens
|
|
62
16
|
|
|
@@ -90,8 +44,3 @@ button {
|
|
|
90
44
|
```
|
|
91
45
|
|
|
92
46
|
CSS IntelliSense: Use an extension like 'CSS Variable Autocomplete' for better IntelliSense and easier access to design tokens.
|
|
93
|
-
|
|
94
|
-
### Notes
|
|
95
|
-
|
|
96
|
-
- Ensure you run `npm run build` in this library to generate the `tokens.css` file in the `dist/styles` folder before using it in a consumer project.
|
|
97
|
-
- If linking this library locally, rebuild after making changes to ensure the latest tokens are available.
|