react-minolith 0.0.17 → 0.0.19
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 +116 -1
- package/dist/assets/Minolith.css +1 -1
- package/dist/assets/MinolithCssVariableStylesProvider.css +1 -1
- package/dist/assets/Textarea.css +1 -1
- package/dist/common/literalTypes/BorderWidth.d.ts +1 -1
- package/dist/common/literalTypes/BorderWidth.d.ts.map +1 -1
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/Input.js +38 -24
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/InputProps.d.ts +3 -1
- package/dist/components/Input/InputProps.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.js +40 -26
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/layouts/Columns/Columns.d.ts.map +1 -1
- package/dist/layouts/Columns/Columns.js +165 -89
- package/dist/layouts/Columns/Columns.js.map +1 -1
- package/dist/layouts/Columns/ColumnsProps.d.ts +25 -25
- package/dist/layouts/Columns/ColumnsProps.d.ts.map +1 -1
- package/dist/layouts/Container/Container.d.ts.map +1 -1
- package/dist/layouts/Container/Container.js +110 -34
- package/dist/layouts/Container/Container.js.map +1 -1
- package/dist/layouts/Container/ContainerProps.d.ts +24 -24
- package/dist/layouts/Container/ContainerProps.d.ts.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1 +1,116 @@
|
|
|
1
|
-
# react-minolith
|
|
1
|
+
# react-minolith
|
|
2
|
+
|
|
3
|
+
[](https://github.com/minominolyly/react-minolith/blob/main/LICENSE)
|
|
4
|
+
[](https://www.npmjs.com/package/react-minolith)
|
|
5
|
+
[](https://www.npmjs.com/package/react-minolith)
|
|
6
|
+
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
react-minolith is an open-source react wrapper for [minolith](https://github.com/minominolyly/minolith).
|
|
10
|
+
|
|
11
|
+
## ⚠️Heed
|
|
12
|
+
|
|
13
|
+
react-minolith is still alpha.
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```shell
|
|
18
|
+
npm install react-minolith
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Getting Started
|
|
22
|
+
|
|
23
|
+
After installation, you can import any react-minolith component and start playing around.
|
|
24
|
+
|
|
25
|
+
For example…
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import {
|
|
29
|
+
Button,
|
|
30
|
+
ColorScheme,
|
|
31
|
+
Container,
|
|
32
|
+
Footer,
|
|
33
|
+
Hamburger,
|
|
34
|
+
Header,
|
|
35
|
+
Heading,
|
|
36
|
+
Main,
|
|
37
|
+
MinolithStatic,
|
|
38
|
+
Nav,
|
|
39
|
+
NavAccordion,
|
|
40
|
+
NavBrand,
|
|
41
|
+
NavBrandCenter,
|
|
42
|
+
NavBrandLeft,
|
|
43
|
+
NavBrandRight,
|
|
44
|
+
NavMenu,
|
|
45
|
+
NavMenuItem,
|
|
46
|
+
Section,
|
|
47
|
+
} from "react-minolith";
|
|
48
|
+
import { useState } from "react";
|
|
49
|
+
|
|
50
|
+
export default function HelloWorldPage() {
|
|
51
|
+
const [colorScheme, setColorScheme] = useState<ColorScheme>("light");
|
|
52
|
+
const [isActive, setIsActive] = useState<boolean>(false);
|
|
53
|
+
return (
|
|
54
|
+
<MinolithStatic colorScheme={colorScheme}>
|
|
55
|
+
<Header>
|
|
56
|
+
<Nav>
|
|
57
|
+
<NavAccordion>
|
|
58
|
+
<NavBrand>
|
|
59
|
+
<NavBrandLeft>
|
|
60
|
+
<Hamburger
|
|
61
|
+
isActive={isActive}
|
|
62
|
+
aria-label="menu"
|
|
63
|
+
aria-expanded="false"
|
|
64
|
+
data-target="navbar-menu"
|
|
65
|
+
onClick={() => {
|
|
66
|
+
setIsActive(!isActive);
|
|
67
|
+
}}
|
|
68
|
+
/>
|
|
69
|
+
</NavBrandLeft>
|
|
70
|
+
<NavBrandCenter>{"Hello world"}</NavBrandCenter>
|
|
71
|
+
<NavBrandRight>
|
|
72
|
+
<Button
|
|
73
|
+
spacing={{ margin: 1 }}
|
|
74
|
+
colorName={colorScheme === "light" ? "orange" : "blue"}
|
|
75
|
+
onClick={() =>
|
|
76
|
+
setColorScheme(colorScheme === "light" ? "dark" : "light")
|
|
77
|
+
}
|
|
78
|
+
>
|
|
79
|
+
{colorScheme}
|
|
80
|
+
</Button>
|
|
81
|
+
</NavBrandRight>
|
|
82
|
+
</NavBrand>
|
|
83
|
+
<NavMenu isActive={isActive}>
|
|
84
|
+
<NavMenuItem as="a" href="/about/">
|
|
85
|
+
{"About"}
|
|
86
|
+
</NavMenuItem>
|
|
87
|
+
<NavMenuItem as="a" href="/products/">
|
|
88
|
+
{"Products"}
|
|
89
|
+
</NavMenuItem>
|
|
90
|
+
<NavMenuItem as="a" href="/contact/">
|
|
91
|
+
{"Contact"}
|
|
92
|
+
</NavMenuItem>
|
|
93
|
+
</NavMenu>
|
|
94
|
+
</NavAccordion>
|
|
95
|
+
</Nav>
|
|
96
|
+
</Header>
|
|
97
|
+
<Main>
|
|
98
|
+
<Container>
|
|
99
|
+
<Section spacing={{ padding: { y: 1 } }}>
|
|
100
|
+
<Heading level={1}>{"Hello world"}</Heading>
|
|
101
|
+
</Section>
|
|
102
|
+
</Container>
|
|
103
|
+
</Main>
|
|
104
|
+
<Footer>
|
|
105
|
+
<Container>{"©anonymous"}</Container>
|
|
106
|
+
</Footer>
|
|
107
|
+
</MinolithStatic>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
check out [Storybook](https://minominolyly.github.io/react-minolith/) for more details.
|
|
113
|
+
|
|
114
|
+
## License
|
|
115
|
+
|
|
116
|
+
This project is licensed under the terms of the [MIT license](https://github.com/minominolyly/react-minolith/blob/main/LICENSE).
|