@cryptofi/core-ui 0.47.0 → 0.49.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/README.md +18 -18
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/types/index.d.ts +11 -10
- package/package.json +18 -17
package/README.md
CHANGED
|
@@ -2,17 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
InvestiFi's library of React components and UI utilities.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Getting Started
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
1. Run `yarn` to install dependencies.
|
|
8
|
+
2. Run `yarn dev` to launch Storybook.
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
yarn dev
|
|
11
|
-
```
|
|
10
|
+
## Deployment Environments
|
|
12
11
|
|
|
13
|
-
Storybook is
|
|
12
|
+
- Storybook is deployed to https://cryptofi-core-ui.vercel.app/ when changes are merged into the `main` branch.
|
|
13
|
+
- Refer to [Vercel project settings](https://vercel.com/investifi/cryptofi-core-ui) for more info.
|
|
14
|
+
- The Core UI library is available on NPM at https://www.npmjs.com/package/@cryptofi/core-ui.
|
|
15
|
+
- Refer to **PUBLISH.md** for publishing instructions.
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
## How to: Add a Component
|
|
16
18
|
|
|
17
19
|
1. Create a new directory in the **components** directory using the following structure. Note that a component can consist of only a React component file (tsx) or a theme files (ts) depending on how it is structured.
|
|
18
20
|
|
|
@@ -41,7 +43,7 @@ export { default as CfButton } from './Button/Button'
|
|
|
41
43
|
|
|
42
44
|
4. Add the component theme to the corresponding section of the **src/theme.ts** file under the `components` key.
|
|
43
45
|
|
|
44
|
-
|
|
46
|
+
## How to: Style a Component
|
|
45
47
|
|
|
46
48
|
The reusable components exported from this library generally use separate theme files to simplify implementation of variants, sizes, etc., but simple components can also be styled directly in the component file using Chakra [style props](https://chakra-ui.com/docs/styled-system/style-props).
|
|
47
49
|
|
|
@@ -51,7 +53,7 @@ Guidelines:
|
|
|
51
53
|
- Use Chakra's unitless [spacing](https://chakra-ui.com/docs/styled-system/theme#spacing) values for spacing and positioning when possible
|
|
52
54
|
- Refer to documentation for the corresponding Chakra UI component when styling base components
|
|
53
55
|
|
|
54
|
-
|
|
56
|
+
## How to: Use Icons
|
|
55
57
|
|
|
56
58
|
Run the command below to (re)generate React components from SVG files located in the **svg-icons** directory.
|
|
57
59
|
|
|
@@ -75,7 +77,11 @@ const SomeComponent = () => {
|
|
|
75
77
|
};
|
|
76
78
|
```
|
|
77
79
|
|
|
78
|
-
##
|
|
80
|
+
## How to: Use the Breakpoint Debugger
|
|
81
|
+
|
|
82
|
+
https://www.loom.com/share/c8326757734f424993f857bf7881b02e
|
|
83
|
+
|
|
84
|
+
## How to: Use Unpublished Changes
|
|
79
85
|
|
|
80
86
|
To use unpublished changes to this package in another local application, follow these steps:
|
|
81
87
|
|
|
@@ -85,14 +91,8 @@ To use unpublished changes to this package in another local application, follow
|
|
|
85
91
|
|
|
86
92
|
See [yalc docs](https://github.com/wclr/yalc) for more info.
|
|
87
93
|
|
|
88
|
-
## Tooling
|
|
94
|
+
## Tech Stack: Tooling
|
|
89
95
|
|
|
90
96
|
This project uses [Rollup](https://rollupjs.org/) to build an optimized JavaScript bundle, and consumers are expected to provide necessary peer dependencies for Chakra UI and React as outlined in this project's package.json.
|
|
91
97
|
|
|
92
|
-
Vite is used in conjunction with Storybook for local development.
|
|
93
|
-
|
|
94
|
-
Based on the following Vite / React template: https://github.com/The24thDS/vite-reactts18-chakra-jest-husky
|
|
95
|
-
|
|
96
|
-
## Publishing to NPM
|
|
97
|
-
|
|
98
|
-
Refer to PUBLISH.md for more info.
|
|
98
|
+
Vite is used in conjunction with Storybook for local development. Based on the following Vite / React template: https://github.com/The24thDS/vite-reactts18-chakra-jest-husky
|