onecart-ui 0.2.4 → 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.
Files changed (3) hide show
  1. package/README.md +241 -79
  2. package/dist/index.d.ts +1 -0
  3. package/package.json +4 -2
package/README.md CHANGED
@@ -14,7 +14,7 @@ npm install onecart-ui
14
14
 
15
15
  ```typescript
16
16
  // Import components
17
- import { Button, Typography } from 'onecart-ui';
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
- <Typography.Heading size="xl">
27
- <Home size="lg" style={{ marginRight: 8 }} />
28
- Welcome
29
- </Typography.Heading>
30
- <Typography.Body size="md">This is a web component</Typography.Body>
31
- <Button variant="primary" onClick={() => alert('Clicked!')}>
32
- <ShoppingCart size="sm" style={{ marginRight: 4 }} />
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
  }
@@ -41,7 +39,7 @@ function App() {
41
39
 
42
40
  ```typescript
43
41
  // Import mobile components
44
- import { Button, Typography } from 'onecart-ui/mobile';
42
+ import { Display, Heading, Body, Utility } from 'onecart-ui/mobile';
45
43
  // Import icons
46
44
  import { Home, Search, ShoppingCart, Menu } from 'onecart-ui/icons';
47
45
  // Import tokens
@@ -50,14 +48,13 @@ import { tokens } from 'onecart-ui/tokens';
50
48
  function App() {
51
49
  return (
52
50
  <View>
53
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
54
- <Home size="lg" color="#333" />
55
- <Typography.Heading size="xl">Welcome</Typography.Heading>
51
+ <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
52
+ <Home size={32} color="#2ecc71" />
53
+ <Heading size="xl">Welcome</Heading>
56
54
  </View>
57
- <Typography.Body size="md">This is a mobile component</Typography.Body>
58
- <Button variant="primary" onPress={() => alert('Pressed!')}>
59
- Press Me
60
- </Button>
55
+ <Body size="lg">This is a mobile component</Body>
56
+ <Display size="2xl">$49.99</Display>
57
+ <Utility variant="caption">All components working</Utility>
61
58
  </View>
62
59
  );
63
60
  }
@@ -89,22 +86,22 @@ function MyComponent() {
89
86
  return (
90
87
  <div>
91
88
  {/* Default size (24px) */}
92
- <Home />
89
+ <Home size={24} />
93
90
 
94
- {/* Different sizes */}
95
- <Search size="xs" /> {/* 16px */}
96
- <Search size="sm" /> {/* 20px */}
97
- <Search size="md" /> {/* 24px - default */}
98
- <Search size="lg" /> {/* 32px */}
99
- <Search size="xl" /> {/* 40px */}
100
- <Search size={48} /> {/* Custom size */}
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 */}
101
98
 
102
99
  {/* With color */}
103
- <ShoppingCart color="#FF5733" />
100
+ <ShoppingCart size={24} color="#FF5733" />
104
101
 
105
- {/* With className and style */}
102
+ {/* With className and style (web only) */}
106
103
  <Home
107
- size="lg"
104
+ size={32}
108
105
  color="blue"
109
106
  className="my-icon"
110
107
  style={{ marginRight: 8 }}
@@ -114,17 +111,178 @@ function MyComponent() {
114
111
  }
115
112
  ```
116
113
 
117
- **Available Icons**: 466+ icons including Home, Search, ShoppingCart, Menu, Close, Add, Remove, Edit, Delete, Notifications, Settings, and more. See [full icon list](./packages/icons/README.md).
118
-
119
114
  ## Components
120
115
 
121
- - **Button**: Primary, secondary, and tertiary variants for web and mobile
122
- - **Typography**: Body, Display, Heading, and Utility text components
123
- - Each with multiple size options
124
- - Platform-specific implementations (web/mobile)
125
- - **Icons**: 466+ SVG icons with customizable size and color
126
- - Sizes: xs (16px), sm (20px), md (24px), lg (32px), xl (40px), or custom
127
- - All icons support color customization
116
+ ### Typography Components
117
+
118
+ Typography components are available for both web and mobile platforms:
119
+
120
+ **Web (React):**
121
+ ```typescript
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';
128
+ ```
129
+
130
+ #### Display Component
131
+
132
+ - **Sizes**: `2xl`, `xl`
133
+ - **Usage**: Large hero text and prominent headings
134
+
135
+ ```typescript
136
+ <Display size="2xl">Large Display Text</Display>
137
+ <Display size="xl">Smaller Display</Display>
138
+ ```
139
+
140
+ #### Heading Component
141
+
142
+ - **Sizes**: `xl`, `lg`, `md`, `sm`, `xs`, `2xs`
143
+ - **Usage**: Section titles and semantic headings
144
+
145
+ ```typescript
146
+ <Heading size="xl">Extra Large Heading</Heading>
147
+ <Heading size="lg">Large Heading</Heading>
148
+ <Heading size="md">Medium Heading</Heading>
149
+ <Heading size="sm">Small Heading</Heading>
150
+ <Heading size="xs">Extra Small Heading</Heading>
151
+ <Heading size="2xs">Tiny Heading</Heading>
152
+ ```
153
+
154
+ #### Body Component
155
+
156
+ - **Sizes**: `xl`, `lg`, `md`, `sm`
157
+ - **Usage**: Paragraph text and content
158
+
159
+ ```typescript
160
+ <Body size="xl">Emphasized content text</Body>
161
+ <Body size="lg">Introduction text</Body>
162
+ <Body size="md">Standard paragraph text</Body>
163
+ <Body size="sm">Caption or secondary text</Body>
164
+ ```
165
+
166
+ #### Utility Component
167
+
168
+ - **Variants**: `button`, `link`, `caption`
169
+ - **Usage**: UI labels and metadata
170
+
171
+ ```typescript
172
+ <Utility variant="button">BUTTON TEXT</Utility>
173
+ <Utility variant="link">Link Text</Utility>
174
+ <Utility variant="caption">Caption text</Utility>
175
+ ```
176
+
177
+ ### Icons
178
+
179
+ ```typescript
180
+ import {
181
+ Home,
182
+ Search,
183
+ ShoppingCart,
184
+ Menu,
185
+ Notifications,
186
+ Add,
187
+ Remove,
188
+ } from "onecart-ui/icons";
189
+ ```
190
+
191
+ - **Sizes**: Numeric values (16, 20, 24, 28, 32, 40, 48, etc.)
192
+ - **Colors**: Any valid color string
193
+
194
+ ```typescript
195
+ <Home size={24} color="#2ecc71" />
196
+ <Search size={20} color="#3498db" />
197
+ <ShoppingCart size={32} color="#FF5733" />
198
+ ```
199
+
200
+ ## 📱 Complete Mobile Example
201
+
202
+ ```typescript
203
+ import React from 'react';
204
+ import { View, ScrollView, StyleSheet } from 'react-native';
205
+ import { Display, Heading, Body, Utility } from 'onecart-ui/mobile';
206
+ import { Home, ShoppingCart } from 'onecart-ui/icons';
207
+
208
+ function ProductCard() {
209
+ return (
210
+ <View style={styles.card}>
211
+ <View style={styles.header}>
212
+ <ShoppingCart size={32} color="#2ecc71" />
213
+ <Heading size="xl">Product Card</Heading>
214
+ </View>
215
+
216
+ <Display size="xl">$49.99</Display>
217
+ <Utility variant="caption">Free shipping</Utility>
218
+
219
+ <Body size="lg">Premium Wireless Headphones</Body>
220
+ <Body size="md">
221
+ Crystal-clear audio with active noise cancellation and 30-hour battery life.
222
+ </Body>
223
+ </View>
224
+ );
225
+ }
226
+
227
+ const styles = StyleSheet.create({
228
+ card: {
229
+ backgroundColor: 'white',
230
+ borderRadius: 12,
231
+ padding: 16,
232
+ },
233
+ header: {
234
+ flexDirection: 'row',
235
+ alignItems: 'center',
236
+ gap: 8,
237
+ },
238
+ });
239
+ ```
240
+
241
+ ## ⚙️ React Native Setup
242
+
243
+ ### Dependencies
244
+
245
+ ```json
246
+ {
247
+ "dependencies": {
248
+ "onecart-ui": "^0.2.4",
249
+ "react": "19.2.0",
250
+ "react-native": "0.83.1",
251
+ "react-native-svg": "^15.15.1"
252
+ }
253
+ }
254
+ ```
255
+
256
+ ### Installation
257
+
258
+ ```bash
259
+ npm install onecart-ui react-native-svg
260
+ ```
261
+
262
+ ### iOS Setup
263
+
264
+ ```bash
265
+ cd ios && pod install
266
+ ```
267
+
268
+ ### Metro Config
269
+
270
+ Add the following to `metro.config.js` to ensure proper React resolution:
271
+
272
+ ```javascript
273
+ const path = require("path");
274
+
275
+ const config = {
276
+ resolver: {
277
+ extraNodeModules: {
278
+ react: path.resolve(__dirname, "node_modules/react"),
279
+ "react-native": path.resolve(__dirname, "node_modules/react-native"),
280
+ },
281
+ },
282
+ };
283
+
284
+ module.exports = config;
285
+ ```
128
286
 
129
287
  ## Development
130
288
 
@@ -150,61 +308,69 @@ npm run generate-tokens
150
308
  onecart-ui/
151
309
  dist/ # Built components (web & mobile)
152
310
  tokens/ # Design tokens (CSS, JS)
311
+ icons/ # Icon components
153
312
  packages/
154
313
  tokens/ # Token source & generator
155
314
  components/ # Component source
315
+ icons/ # Icon source & generator
156
316
  apps/
157
317
  docs/ # Storybook documentation
158
318
  ```
159
319
 
160
- ### For Mobile Projects (React Native)
320
+ ## Development Workflow
161
321
 
162
- ```typescript
163
- // Import components from /mobile
164
- import { Button, Body, Display, Heading, Utility } from 'onecart-ui-components/mobile';
322
+ ### Building the Design System
323
+
324
+ ```bash
325
+ # Build all packages (optimized - uses cached SVGs)
326
+ npm run build
165
327
 
166
- // Import types
167
- import type { ButtonProps, BodyProps, DisplayProps, HeadingProps, UtilityProps } from 'onecart-ui-components/mobile';
328
+ # Build with watch mode for development
329
+ npm run dev
168
330
 
169
- // Usage
170
- function App() {
171
- return (
172
- <View>
173
- <Display size="2xl">Welcome to OneCart</Display>
174
- <Body size="lg">A cross-platform design system</Body>
175
- <Button
176
- label="Get Started"
177
- type="primary"
178
- size="large"
179
- onPress={() => console.log('Pressed!')}
180
- />
181
- </View>
182
- );
183
- }
331
+ # Build specific packages
332
+ cd packages/components && npm run build
333
+ cd packages/tokens && npm run build
334
+ cd packages/icons && npm run build
335
+ ```
336
+
337
+ **Note:** The build process is optimized to be fast. Icon SVG files are committed to the repository, so builds don't require Figma API access or downloading assets.
338
+
339
+ ### Syncing Icons from Figma
340
+
341
+ When icons are updated in Figma or new icons are added:
342
+
343
+ ```bash
344
+ # In packages/icons directory
345
+ cd packages/icons
346
+ npm run sync:icons
184
347
  ```
185
348
 
186
- ### Available Components
349
+ This will:
350
+
351
+ 1. Fetch the latest icons from Figma
352
+ 2. Download SVG files to `packages/icons/svg/`
353
+ 3. Generate React components for both web and React Native
354
+ 4. Update the icon metadata
187
355
 
188
- **Button**
356
+ **After syncing, commit the updated SVG files:**
189
357
 
190
- - Types: `primary`, `outline`, `ghost`, `destructive`
191
- - Sizes: `large`, `medium`, `small`
192
- - Supports icons, full width, and platform-specific handlers
358
+ ```bash
359
+ git add packages/icons/svg/ packages/icons/icons-metadata.json
360
+ git commit -m "chore: sync icons from Figma"
361
+ ```
193
362
 
194
- **Typography Components**
363
+ **Requirements for icon sync:**
195
364
 
196
- - **Body**: Text component with sizes `xl`, `lg`, `md`, `sm`
197
- - **Display**: Large heading with sizes `2xl`, `xl`
198
- - **Heading**: Semantic headings with sizes `xl`, `lg`, `md`, `sm`, `xs`, `2xs`
199
- - **Utility**: Utility text with variants `button`, `link`, `caption`
365
+ - `.env` file with `FIGMA_PERSONAL_ACCESS_TOKEN` and `FILE_ID`
366
+ - The Figma file must have an "Icon" page with icon components
200
367
 
201
- All typography components support:
368
+ ### Working with Design Tokens
202
369
 
203
- - `align`: Text alignment (`left`, `center`, `right`)
204
- - `color`: Custom color override
205
- - `truncate`: Single-line truncation with ellipsis
206
- - `lineClamp`: Multi-line clamping
207
- - `onClick` (web) / `onPress` (mobile): Click/press handlers
370
+ ```bash
371
+ # Sync tokens from Figma (requires Tokens Studio plugin)
372
+ npm run generate-tokens
373
+ ```
208
374
 
209
375
  ## Next Steps
210
376
 
@@ -225,7 +391,3 @@ The tokens pipeline supports pulling design tokens from a Figma file using `figm
225
391
  ```bash
226
392
  npm run generate-tokens
227
393
  ```
228
-
229
- 4. Generated JSON will appear under `packages/tokens/src/styles/tokens/` (if the engine outputs there). Currently only generation is configured; Style Dictionary build scripts were removed temporarily and can be reintroduced later.
230
-
231
- If sync fails, verify your PAT scopes and that the file ID matches the Figma URL segment after `/file/`.
package/dist/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from "./Button";
2
+ export * from "./Typography";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "onecart-ui",
3
- "version": "0.2.4",
3
+ "version": "0.2.6",
4
4
  "description": "OneCart UI: Cross-platform design tokens + React & React Native components",
5
5
  "keywords": [
6
6
  "react",
@@ -59,11 +59,13 @@
59
59
  "scripts": {
60
60
  "dev": "turbo run dev --parallel",
61
61
  "build": "turbo run build && npm run copy-dist",
62
- "copy-dist": "mkdir -p dist && cp -r packages/components/dist/* dist/ && mkdir -p tokens && cp -r packages/tokens/build/web/* tokens/ && mkdir -p icons && cp -r packages/icons/dist/* icons/",
62
+ "copy-dist": "mkdir -p dist && cp -r packages/components/dist/*.js* dist/ && cp -r packages/components/dist/src/*.d.ts dist/ 2>/dev/null || true && mkdir -p tokens && cp -r packages/tokens/build/web/* tokens/ && mkdir -p icons && cp -r packages/icons/dist/* icons/",
63
63
  "prepublishOnly": "npm run build",
64
64
  "lint": "turbo run lint",
65
65
  "test": "turbo run test",
66
66
  "generate-tokens": "npm --workspace @onecart-ui/tokens run generate-tokens",
67
+ "sync:icons": "npm --workspace onecart-ui-icons run sync:icons",
68
+ "check:icons": "npm --workspace onecart-ui-icons run check",
67
69
  "components:build": "npm --workspace @onecart-ui/components run build",
68
70
  "storybook": "npm --workspace @onecart-ui/docs run storybook",
69
71
  "storybook:build": "npm --workspace @onecart-ui/docs run build"