@meonode/ui 0.1.6 → 0.1.8
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 +15 -15
- package/dist/html.node.d.ts +322 -78
- package/dist/html.node.d.ts.map +1 -1
- package/dist/html.node.js +231 -52
- package/dist/json/css-properties.json +1 -692
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ A structured approach to component composition with built-in theming, prop separ
|
|
|
11
11
|
import { Component, Div, H1, Button } from '@meonode/ui';
|
|
12
12
|
|
|
13
13
|
const BlueButton = Component((props) =>
|
|
14
|
-
Button({
|
|
14
|
+
Button('Blue', {
|
|
15
15
|
padding: '12px 24px',
|
|
16
16
|
borderRadius: '8px',
|
|
17
17
|
backgroundColor: 'dodgerblue',
|
|
@@ -44,7 +44,7 @@ const App = Component(() =>
|
|
|
44
44
|
|
|
45
45
|
## Installation
|
|
46
46
|
|
|
47
|
-
```
|
|
47
|
+
```shell
|
|
48
48
|
npm install @meonode/ui react
|
|
49
49
|
# or
|
|
50
50
|
yarn add @meonode/ui react
|
|
@@ -56,7 +56,7 @@ yarn add @meonode/ui react
|
|
|
56
56
|
|
|
57
57
|
Create elements using the `Node` factory or pre-built components:
|
|
58
58
|
|
|
59
|
-
```
|
|
59
|
+
```ts
|
|
60
60
|
import { Node, Div, H1 } from '@meonode/ui';
|
|
61
61
|
|
|
62
62
|
// Using Node factory
|
|
@@ -79,7 +79,7 @@ const Header = () =>
|
|
|
79
79
|
|
|
80
80
|
Define and consume themes with dot-notation:
|
|
81
81
|
|
|
82
|
-
```
|
|
82
|
+
```ts
|
|
83
83
|
const theme = {
|
|
84
84
|
colors: {
|
|
85
85
|
primary: '#2196F3',
|
|
@@ -126,15 +126,16 @@ const ProfileCard = Component(({ user }) =>
|
|
|
126
126
|
);
|
|
127
127
|
```
|
|
128
128
|
|
|
129
|
+
|
|
129
130
|
## Key Features
|
|
130
131
|
|
|
131
|
-
| Feature
|
|
132
|
-
|
|
133
|
-
| **Smart Prop Merge**
|
|
134
|
-
| **Theme Resolution**
|
|
135
|
-
| **Type Safety**
|
|
136
|
-
| **HOC Support**
|
|
137
|
-
| **Dynamic Children**
|
|
132
|
+
| Feature | Description |
|
|
133
|
+
|----------------------|----------------------------------------------------------------------|
|
|
134
|
+
| **Smart Prop Merge** | CSS properties are automatically merged with style object |
|
|
135
|
+
| **Theme Resolution** | `theme.` references resolve through component hierarchy |
|
|
136
|
+
| **Type Safety** | Autocomplete for CSS properties and theme paths |
|
|
137
|
+
| **HOC Support** | Wrap existing components with `Component()` for seamless integration |
|
|
138
|
+
| **Dynamic Children** | Function-as-child pattern with automatic theme propagation |
|
|
138
139
|
|
|
139
140
|
## Advanced Usage
|
|
140
141
|
|
|
@@ -234,7 +235,7 @@ const DetailComponent = ({ info }: { info: string }) => {
|
|
|
234
235
|
|
|
235
236
|
### Material UI Integration
|
|
236
237
|
|
|
237
|
-
```
|
|
238
|
+
```shell
|
|
238
239
|
yarn add @meonode/mui @mui/material
|
|
239
240
|
```
|
|
240
241
|
|
|
@@ -257,10 +258,9 @@ const MuiLoginForm = Component(() =>
|
|
|
257
258
|
fullWidth: true,
|
|
258
259
|
margin: 'normal'
|
|
259
260
|
}),
|
|
260
|
-
Button({
|
|
261
|
+
Button('Sign In', {
|
|
261
262
|
variant: 'contained',
|
|
262
|
-
color: 'primary'
|
|
263
|
-
children: 'Sign In'
|
|
263
|
+
color: 'primary'
|
|
264
264
|
})
|
|
265
265
|
]
|
|
266
266
|
})
|