@worldresources/wri-design-systems 0.0.1
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 +130 -0
- package/dist/cjs/index.js +1286 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/esm/index.js +1286 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.ts +268 -0
- package/package.json +101 -0
package/README.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# wri-design-systems
|
|
2
|
+
|
|
3
|
+
WRI UI Library
|
|
4
|
+
|
|
5
|
+
## Requirements
|
|
6
|
+
|
|
7
|
+
Node: `20.16.0`
|
|
8
|
+
|
|
9
|
+
React: `18.3.1`
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
yarn add wri-design-systems
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
or
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
npm i wri-design-systems
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Other dependecies
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
yarn add @chakra-ui/react @emotion/react @emotion/styled
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
or
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
npm i @chakra-ui/react @emotion/react @emotion/styled
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Usage
|
|
36
|
+
|
|
37
|
+
### Create the Project Theme
|
|
38
|
+
|
|
39
|
+
With this custom theme you can change the color scheme according to your Project Theme
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
import { createSystem, defaultConfig } from '@chakra-ui/react'
|
|
43
|
+
|
|
44
|
+
export const system = createSystem(defaultConfig, {
|
|
45
|
+
theme: {
|
|
46
|
+
tokens: {
|
|
47
|
+
colors: {
|
|
48
|
+
neutral: {
|
|
49
|
+
300: { value: '#ff5252' },
|
|
50
|
+
500: { value: '#ff0000' },
|
|
51
|
+
},
|
|
52
|
+
primary: {
|
|
53
|
+
200: { value: '#93ff93' },
|
|
54
|
+
500: { value: '#d80a5d' },
|
|
55
|
+
600: { value: '#16b816' },
|
|
56
|
+
700: { value: '#006100' },
|
|
57
|
+
},
|
|
58
|
+
secondary: {
|
|
59
|
+
...
|
|
60
|
+
},
|
|
61
|
+
success: {
|
|
62
|
+
...
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
})
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Wrap ChakraProvider at the root of your app
|
|
71
|
+
|
|
72
|
+
```js
|
|
73
|
+
import React from 'react'
|
|
74
|
+
import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
|
|
75
|
+
import { system } from './lib/theme'
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
return (
|
|
79
|
+
{/* if you want to use the default WRI Theme colors */}
|
|
80
|
+
{/* <ChakraProvider value={defaultSystem}> */}
|
|
81
|
+
|
|
82
|
+
{/* if you want to use your custom system Theme colors */}
|
|
83
|
+
<ChakraProvider value={system}>
|
|
84
|
+
<TheRestOfYourApplication />
|
|
85
|
+
</ChakraProvider>
|
|
86
|
+
)
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Components
|
|
91
|
+
|
|
92
|
+
### General
|
|
93
|
+
|
|
94
|
+
- [Inline Message](https://github.com/wri/wri-design-systems/tree/main/src/components/InlineMessage)
|
|
95
|
+
- [Navigation Rail](https://github.com/wri/wri-design-systems/tree/main/src/components/NavigationRail)
|
|
96
|
+
- [Slider](https://github.com/wri/wri-design-systems/tree/main/src/components/Slider)
|
|
97
|
+
- [Tab Bar](https://github.com/wri/wri-design-systems/tree/main/src/components/TabBar)
|
|
98
|
+
- [Tag](https://github.com/wri/wri-design-systems/tree/main/src/components/Tag)
|
|
99
|
+
|
|
100
|
+
### Buttons
|
|
101
|
+
|
|
102
|
+
- [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/Button)
|
|
103
|
+
- [Close Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/CloseButton)
|
|
104
|
+
- [Icon Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/IconButton)
|
|
105
|
+
|
|
106
|
+
### Controls
|
|
107
|
+
|
|
108
|
+
- [Checkbox](https://github.com/wri/wri-design-systems/tree/main/src/components/Checkbox)
|
|
109
|
+
- [Radio Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Radio)
|
|
110
|
+
- [Switch](https://github.com/wri/wri-design-systems/tree/main/src/components/Switch)
|
|
111
|
+
|
|
112
|
+
### Inputs
|
|
113
|
+
|
|
114
|
+
- [Text Input](https://github.com/wri/wri-design-systems/tree/main/src/components/TextInput)
|
|
115
|
+
- [Text Area](https://github.com/wri/wri-design-systems/tree/main/src/components/Textarea)
|
|
116
|
+
|
|
117
|
+
### Layers
|
|
118
|
+
|
|
119
|
+
- [Layer Group](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerGroup)
|
|
120
|
+
- [Layer Item](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerItem)
|
|
121
|
+
- [Layer Panel](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerPanel)
|
|
122
|
+
- [Layer Sidebar](https://github.com/wri/wri-design-systems/tree/main/src/components/Layer/LayerSidebar)
|
|
123
|
+
|
|
124
|
+
### Legend
|
|
125
|
+
|
|
126
|
+
- [Layer Parameters](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LayerParameters)
|
|
127
|
+
- [Legend Item](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LegendItem)
|
|
128
|
+
- [Legend Panel](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/LegendPanel)
|
|
129
|
+
- [Qualitative Attributes](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/QualitativeLegend)
|
|
130
|
+
- [Scale Legend](https://github.com/wri/wri-design-systems/tree/main/src/components/Legend/ScaleLegend)
|