@cryptofi/core-ui 1.6.3 → 1.6.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 +28 -8
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +44 -44
package/README.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
InvestiFi's library of React components and UI utilities.
|
|
4
4
|
|
|
5
|
+
## Table of Contents
|
|
6
|
+
|
|
7
|
+
1. [Getting Started](#getting-started)
|
|
8
|
+
2. [Deployment Environments](#deployment-environments)
|
|
9
|
+
3. [How to: Add a Component](#how-to-add-a-component)
|
|
10
|
+
4. [How to: Style a Component](#how-to-style-a-component)
|
|
11
|
+
5. [How to: Add Icons](#how-to-add-icons)
|
|
12
|
+
6. [How to: Use Icons](#how-to-use-icons)
|
|
13
|
+
7. [How to: Use the Breakpoint Debugger](#how-to-use-the-breakpoint-debugger)
|
|
14
|
+
8. [How to: Use Unpublished Changes](#how-to-use-unpublished-changes)
|
|
15
|
+
9. [Tech Stack: Tooling](#tech-stack-tooling)
|
|
16
|
+
|
|
5
17
|
## Getting Started
|
|
6
18
|
|
|
7
19
|
1. Run `yarn` to install dependencies.
|
|
@@ -9,8 +21,8 @@ InvestiFi's library of React components and UI utilities.
|
|
|
9
21
|
|
|
10
22
|
## Deployment Environments
|
|
11
23
|
|
|
12
|
-
- Storybook is deployed to
|
|
13
|
-
- Refer to
|
|
24
|
+
- Storybook is deployed to Vercel when changes are merged into the `main` branch.
|
|
25
|
+
- Refer to Vercel project settings for more info.
|
|
14
26
|
- The Core UI library is available on NPM at https://www.npmjs.com/package/@cryptofi/core-ui.
|
|
15
27
|
- Refer to **PUBLISH.md** for publishing instructions.
|
|
16
28
|
|
|
@@ -53,15 +65,23 @@ Guidelines:
|
|
|
53
65
|
- Use Chakra's unitless [spacing](https://v2.chakra-ui.com/docs/styled-system/theme#spacing) values for spacing and positioning when possible
|
|
54
66
|
- Refer to documentation for the corresponding Chakra UI component when styling base components
|
|
55
67
|
|
|
56
|
-
## How to:
|
|
68
|
+
## How to: Add Icons
|
|
57
69
|
|
|
58
|
-
|
|
70
|
+
1. Export the SVG file(s) from Figma
|
|
71
|
+
2. Copy the SVG file(s) into the **/svg-icons** directory
|
|
72
|
+
3. Run the the command below to (re)generate React components from SVG files located in the **/svg-icons** directory.
|
|
59
73
|
|
|
60
|
-
```bash
|
|
61
|
-
yarn icons:gen
|
|
62
|
-
```
|
|
74
|
+
```bash
|
|
75
|
+
yarn icons:gen
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
4. Check in the resulting changes
|
|
63
79
|
|
|
64
|
-
|
|
80
|
+
Note that all existing icon components will be updated when generating icons due to logic in the process that ensures all SVGs have unique ID attributes.
|
|
81
|
+
|
|
82
|
+
When adding new icons, [SVGOMG](https://jakearchibald.github.io/svgomg/) can be used to optimize files and fix issues.
|
|
83
|
+
|
|
84
|
+
## How to: Use Icons
|
|
65
85
|
|
|
66
86
|
Following is an example of using an icon component in application code. Note that icons are named with the prefix `Icon` during generation and can be styled using Chakra style props.
|
|
67
87
|
|