onecart-ui 0.2.5 → 0.2.6
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 +27 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ npm install onecart-ui
|
|
|
14
14
|
|
|
15
15
|
```typescript
|
|
16
16
|
// Import components
|
|
17
|
-
import {
|
|
17
|
+
import { Display, Heading, Body, Utility } from 'onecart-ui';
|
|
18
18
|
// Import icons
|
|
19
19
|
import { Home, Search, ShoppingCart, Menu } from 'onecart-ui/icons';
|
|
20
20
|
// Import tokens
|
|
@@ -23,15 +23,13 @@ import { tokens } from 'onecart-ui/tokens';
|
|
|
23
23
|
function App() {
|
|
24
24
|
return (
|
|
25
25
|
<div>
|
|
26
|
-
<
|
|
27
|
-
<Home size="
|
|
28
|
-
Welcome
|
|
29
|
-
</
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
Click Me
|
|
34
|
-
</Button>
|
|
26
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
27
|
+
<Home size={32} color="#2ecc71" />
|
|
28
|
+
<Heading size="xl">Welcome</Heading>
|
|
29
|
+
</div>
|
|
30
|
+
<Body size="lg">This is a web component</Body>
|
|
31
|
+
<Display size="2xl">$49.99</Display>
|
|
32
|
+
<Utility variant="caption">All components working</Utility>
|
|
35
33
|
</div>
|
|
36
34
|
);
|
|
37
35
|
}
|
|
@@ -88,22 +86,22 @@ function MyComponent() {
|
|
|
88
86
|
return (
|
|
89
87
|
<div>
|
|
90
88
|
{/* Default size (24px) */}
|
|
91
|
-
<Home />
|
|
89
|
+
<Home size={24} />
|
|
92
90
|
|
|
93
|
-
{/* Different sizes */}
|
|
94
|
-
<Search size=
|
|
95
|
-
<Search size=
|
|
96
|
-
<Search size=
|
|
97
|
-
<Search size=
|
|
98
|
-
<Search size=
|
|
99
|
-
<Search size={48} />
|
|
91
|
+
{/* Different sizes - use numeric values */}
|
|
92
|
+
<Search size={16} /> {/* Small */}
|
|
93
|
+
<Search size={20} /> {/* Medium-small */}
|
|
94
|
+
<Search size={24} /> {/* Default */}
|
|
95
|
+
<Search size={32} /> {/* Large */}
|
|
96
|
+
<Search size={40} /> {/* Extra large */}
|
|
97
|
+
<Search size={48} /> {/* Custom size */}
|
|
100
98
|
|
|
101
99
|
{/* With color */}
|
|
102
|
-
<ShoppingCart color="#FF5733" />
|
|
100
|
+
<ShoppingCart size={24} color="#FF5733" />
|
|
103
101
|
|
|
104
|
-
{/* With className and style */}
|
|
102
|
+
{/* With className and style (web only) */}
|
|
105
103
|
<Home
|
|
106
|
-
size=
|
|
104
|
+
size={32}
|
|
107
105
|
color="blue"
|
|
108
106
|
className="my-icon"
|
|
109
107
|
style={{ marginRight: 8 }}
|
|
@@ -117,10 +115,16 @@ function MyComponent() {
|
|
|
117
115
|
|
|
118
116
|
### Typography Components
|
|
119
117
|
|
|
120
|
-
|
|
118
|
+
Typography components are available for both web and mobile platforms:
|
|
121
119
|
|
|
120
|
+
**Web (React):**
|
|
122
121
|
```typescript
|
|
123
|
-
import { Display, Heading, Body, Utility } from
|
|
122
|
+
import { Display, Heading, Body, Utility } from 'onecart-ui';
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
**Mobile (React Native):**
|
|
126
|
+
```typescript
|
|
127
|
+
import { Display, Heading, Body, Utility } from 'onecart-ui/mobile';
|
|
124
128
|
```
|
|
125
129
|
|
|
126
130
|
#### Display Component
|