meticulous-ui 1.0.10 → 1.0.12
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 +50 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,14 +20,22 @@ yarn add meticulous-ui
|
|
|
20
20
|
|
|
21
21
|
```jsx
|
|
22
22
|
import { useState } from 'react';
|
|
23
|
+
|
|
23
24
|
import Pagination from 'meticulous-ui/components/Pagination';
|
|
25
|
+
import ChevronLeft from 'meticulous-ui/components/Icons/ChevronLeft';
|
|
26
|
+
import Ripple from 'meticulous-ui/components/Ripple';
|
|
27
|
+
import blue from 'meticulous-ui/colors/blue';
|
|
28
|
+
import capFirstLetter from 'meticulous-ui/utils/capFirstLetter';
|
|
24
29
|
|
|
25
30
|
function App() {
|
|
26
31
|
const [pageNumber, setPageNumber] = useState(1);
|
|
27
32
|
|
|
28
33
|
return (
|
|
29
34
|
<div>
|
|
30
|
-
<h2>
|
|
35
|
+
<h2>{capFirstLetter('example with pagination')}</h2> // returns: Example with pagination
|
|
36
|
+
<Ripple rippleColor={shades['m50']}>
|
|
37
|
+
<ChevronLeft size={10} color={blue.m400} onClick={setPrevPage} />
|
|
38
|
+
</Ripple>
|
|
31
39
|
<Pagination totalPages={10} pageNumber={pageNumber} setPageNumber={setPageNumber} />
|
|
32
40
|
</div>
|
|
33
41
|
);
|
|
@@ -45,6 +53,47 @@ export default App;
|
|
|
45
53
|
| `ChevronLeft` | Left navigation icon |
|
|
46
54
|
| `ChevronRight` | Right navigation icon |
|
|
47
55
|
|
|
56
|
+
## 📦 Tokens
|
|
57
|
+
|
|
58
|
+
| Types | Description |
|
|
59
|
+
| -------- | ------------------------------- |
|
|
60
|
+
| `Colors` | At least 10 shades of 23 colors |
|
|
61
|
+
|
|
62
|
+
| Colors | Shades |
|
|
63
|
+
| ------------ | --------------------------------------------------------------------------------- |
|
|
64
|
+
| `amber` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
65
|
+
| `black` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
66
|
+
| `blue` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
67
|
+
| `blueGray` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
68
|
+
| `brown` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
69
|
+
| `cider` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
70
|
+
| `cyan` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
71
|
+
| `deepOrange` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
72
|
+
| `deepPurple` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
73
|
+
| `green` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
74
|
+
| `grey` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900 |
|
|
75
|
+
| `indigo` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
76
|
+
| `lightBlue` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
77
|
+
| `lightGreen` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
78
|
+
| `lime` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
79
|
+
| `orange` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
80
|
+
| `pink` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
81
|
+
| `purple` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
82
|
+
| `red` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
83
|
+
| `teal` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
84
|
+
| `violet` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
85
|
+
| `white` | #FFFFFF |
|
|
86
|
+
| `yellow` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
|
|
87
|
+
|
|
88
|
+
## 📦 Utils
|
|
89
|
+
|
|
90
|
+
| Functions | Description |
|
|
91
|
+
| ----------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
92
|
+
| `capFirstLetter` | Takes a string and returns with first letter capitalised |
|
|
93
|
+
| `compose` | Performs right-to-left function composition using transforming function |
|
|
94
|
+
| `hasEqualProps` | Takes two args: Component’s previous props & its new props; returns true if all-non functional props are equal |
|
|
95
|
+
| `isNonEmptyArray` | Takes an array & returns true if is not empty |
|
|
96
|
+
|
|
48
97
|
## Demo
|
|
49
98
|
|
|
50
99
|
<a href="https://xe3110.github.io/meticulous-ui/" target="_blank">https://xe3110.github.io/meticulous-ui/</a>
|