@cfx-dev/ui-components 0.0.24 → 0.0.26
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 +36 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,17 +1,39 @@
|
|
|
1
|
-
#
|
|
1
|
+
# UI Component Library
|
|
2
|
+
Include design system, utils and reusable components.
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
## Instalation
|
|
5
|
+
```console
|
|
6
|
+
yarn add @cfx-dev/ui-components
|
|
7
|
+
```
|
|
8
|
+
or
|
|
9
|
+
```console
|
|
10
|
+
npm install @cfx-dev/ui-components
|
|
11
|
+
```
|
|
4
12
|
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
|
|
13
|
+
## Usage
|
|
14
|
+
In your bundler config add this sass option to use ui utils in styles:
|
|
15
|
+
```javascript
|
|
16
|
+
additionalData: `@use "~@cfx-dev/ui-components/dist/styles-scss/ui" as ui;`,
|
|
17
|
+
```
|
|
18
|
+
```javascript
|
|
19
|
+
import '@cfx-dev/ui-components/dist/styles-scss/global.scss';
|
|
20
|
+
```
|
|
21
|
+
Import default themes or take a look inside how to make your own:
|
|
22
|
+
```javascript
|
|
23
|
+
import '@cfx-dev/ui-components/dist/styles-scss/themes.scss';
|
|
24
|
+
```
|
|
25
|
+
Add theme class name to body or root element
|
|
26
|
+
```javascript
|
|
27
|
+
<body className="cfxui-theme-dark">
|
|
28
|
+
```
|
|
29
|
+
For some components you will need to define this variables in your root stiles:
|
|
30
|
+
```css
|
|
31
|
+
html {
|
|
32
|
+
--width: 100vw;
|
|
33
|
+
--height: 100vh;
|
|
34
|
+
--quant: calc(1rem * 0.25);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
8
37
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
- Add folder `lib/components/{ComponentName}`
|
|
12
|
-
- Create a component file `{ComponentName}.tsx`
|
|
13
|
-
- Create a component styles if needed `{ComponentName}.module.scss`
|
|
14
|
-
- Expose youre component in `lib/main.ts`
|
|
15
|
-
|
|
16
|
-
## Release
|
|
17
|
-
Change version in `package.json` run `npm publish --access public`.
|
|
38
|
+
## License
|
|
39
|
+
This project is licensed under the MIT License.
|