cleanplate 0.0.4 → 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 +84 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,16 +2,91 @@
|
|
|
2
2
|
|
|
3
3
|
CleanPlate - Headless React UI Framework
|
|
4
4
|
|
|
5
|
-
###
|
|
5
|
+
### Installation
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
```
|
|
8
|
+
npm install cleanplate
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Check all versions at [NPM](https://www.npmjs.com/package/cleanplate).
|
|
12
|
+
|
|
13
|
+
### Usage
|
|
14
|
+
|
|
15
|
+
All components can be consumed by `import` using their respective names from `cleanplate` package.
|
|
16
|
+
|
|
17
|
+
#### Button
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
import { Button } from "cleanplate";
|
|
21
|
+
|
|
22
|
+
<Button variant="primary" onClick={() => {}}>Save</Button>
|
|
23
|
+
<Button variant="secondary" onClick={() => {}}>Save</Button>
|
|
24
|
+
<Button variant="nude" onClick={() => {}}>Save</Button>
|
|
25
|
+
<Button variant="special" onClick={() => {}}>Save</Button>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
#### Typography
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
import { Typography } from "cleanplate";
|
|
32
|
+
|
|
33
|
+
<Typography variant="h1">Hello World!</Typography>
|
|
34
|
+
<Typography variant="h2">Hello World!</Typography>
|
|
35
|
+
<Typography variant="h3">Hello World!</Typography>
|
|
36
|
+
<Typography variant="h4">Hello World!</Typography>
|
|
37
|
+
<Typography variant="h5">Hello World!</Typography>
|
|
38
|
+
<Typography variant="h6">Hello World!</Typography>
|
|
39
|
+
<Typography variant="p">Hello World!</Typography>
|
|
40
|
+
<Typography variant="small">Hello World!</Typography>
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
#### Badge
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
import { Badge } from "cleanplate";
|
|
48
|
+
|
|
49
|
+
<Badge label="New" />
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
#### AppShell
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
import { AppShell } from "cleanplate";
|
|
56
|
+
|
|
57
|
+
<AppShell />
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
#### Form Controls
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
import { FormControl } from "cleanplate";
|
|
64
|
+
|
|
65
|
+
<FormControl.Input
|
|
66
|
+
name="email"
|
|
67
|
+
onChange={(e) => handleChange(e)}
|
|
68
|
+
value={values.email}
|
|
69
|
+
/>
|
|
70
|
+
|
|
71
|
+
<FormControl.TextArea
|
|
72
|
+
name="bio"
|
|
73
|
+
onChange={(e) => handleChange(e)}
|
|
74
|
+
value={values.bio}
|
|
75
|
+
/>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
#### Icon
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
import { Icon } from "cleanplate";
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
#### Modal
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
import { Modal } from "cleanplate";
|
|
88
|
+
```
|
|
14
89
|
|
|
15
90
|
### Documentation & Demo
|
|
16
91
|
|
|
17
|
-
Storybook playground is available at [https://cleanplate.sivadass.in](https://cleanplate.sivadass.in)
|
|
92
|
+
Storybook playground is available for all components at [https://cleanplate.sivadass.in](https://cleanplate.sivadass.in).
|