onecart-ui 0.1.0

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 (62) hide show
  1. package/README.md +186 -0
  2. package/dist/Button/Button.mobile.d.ts +4 -0
  3. package/dist/Button/Button.types.d.ts +43 -0
  4. package/dist/Button/Button.web.d.ts +4 -0
  5. package/dist/Button/buttonStyles.d.ts +12 -0
  6. package/dist/Button/index.d.ts +1 -0
  7. package/dist/Button/index.mobile.d.ts +1 -0
  8. package/dist/Typography/Body/index.d.ts +3 -0
  9. package/dist/Typography/Display/index.d.ts +3 -0
  10. package/dist/Typography/Heading/index.d.ts +3 -0
  11. package/dist/Typography/Utility/index.d.ts +3 -0
  12. package/dist/Typography/index.d.ts +4 -0
  13. package/dist/components/Button.d.ts +1 -0
  14. package/dist/components/Icon.d.ts +10 -0
  15. package/dist/components/index.d.ts +4 -0
  16. package/dist/index.d.ts +1 -0
  17. package/dist/index.js +2057 -0
  18. package/dist/index.js.map +1 -0
  19. package/dist/index.mobile.js +1803 -0
  20. package/dist/index.mobile.js.map +1 -0
  21. package/dist/mobile/index.d.ts +2 -0
  22. package/dist/src/Button/Button.mobile.d.ts +4 -0
  23. package/dist/src/Button/Button.types.d.ts +43 -0
  24. package/dist/src/Button/Button.web.d.ts +4 -0
  25. package/dist/src/Button/buttonStyles.d.ts +12 -0
  26. package/dist/src/Button/index.d.ts +2 -0
  27. package/dist/src/Button/index.mobile.d.ts +2 -0
  28. package/dist/src/Typography/Body/Body.mobile.d.ts +3 -0
  29. package/dist/src/Typography/Body/Body.web.d.ts +3 -0
  30. package/dist/src/Typography/Body/index.d.ts +1 -0
  31. package/dist/src/Typography/Body/index.mobile.d.ts +1 -0
  32. package/dist/src/Typography/Display/Display.mobile.d.ts +3 -0
  33. package/dist/src/Typography/Display/Display.web.d.ts +3 -0
  34. package/dist/src/Typography/Display/index.d.ts +1 -0
  35. package/dist/src/Typography/Display/index.mobile.d.ts +1 -0
  36. package/dist/src/Typography/Heading/Heading.mobile.d.ts +3 -0
  37. package/dist/src/Typography/Heading/Heading.web.d.ts +3 -0
  38. package/dist/src/Typography/Heading/index.d.ts +1 -0
  39. package/dist/src/Typography/Heading/index.mobile.d.ts +1 -0
  40. package/dist/src/Typography/Typography.types.d.ts +51 -0
  41. package/dist/src/Typography/Utility/Utility.mobile.d.ts +3 -0
  42. package/dist/src/Typography/Utility/Utility.web.d.ts +3 -0
  43. package/dist/src/Typography/Utility/index.d.ts +1 -0
  44. package/dist/src/Typography/Utility/index.mobile.d.ts +1 -0
  45. package/dist/src/Typography/index.d.ts +5 -0
  46. package/dist/src/Typography/index.mobile.d.ts +5 -0
  47. package/dist/src/components/Button.d.ts +1 -0
  48. package/dist/src/components/Icon.d.ts +10 -0
  49. package/dist/src/components/index.d.ts +4 -0
  50. package/dist/src/index.d.ts +2 -0
  51. package/dist/src/styles/tokens/typography.d.ts +138 -0
  52. package/dist/src/theme/ThemeProvider.d.ts +5 -0
  53. package/dist/src/tokens/design-tokens.d.ts +54 -0
  54. package/dist/styles/tokens/typography.d.ts +138 -0
  55. package/dist/theme/ThemeProvider.d.ts +5 -0
  56. package/dist/tokens/design-tokens.d.ts +54 -0
  57. package/dist/types/Button.d.ts +24 -0
  58. package/dist/types/Typography.d.ts +32 -0
  59. package/package.json +102 -0
  60. package/tokens/tokens.css +7 -0
  61. package/tokens/tokens.d.ts +2 -0
  62. package/tokens/tokens.js +3 -0
package/README.md ADDED
@@ -0,0 +1,186 @@
1
+ # OneCart UI
2
+
3
+ Cross-platform design system with React & React Native components and design tokens.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install onecart-ui
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ### For Web Projects (React)
14
+
15
+ ```typescript
16
+ // Import components
17
+ import { Button, Typography } from 'onecart-ui';
18
+ // Import tokens
19
+ import { tokens } from 'onecart-ui/tokens';
20
+
21
+ function App() {
22
+ return (
23
+ <div>
24
+ <Typography.Heading size="xl">Welcome</Typography.Heading>
25
+ <Typography.Body size="md">This is a web component</Typography.Body>
26
+ <Button variant="primary" onClick={() => alert('Clicked!')}>
27
+ Click Me
28
+ </Button>
29
+ </div>
30
+ );
31
+ }
32
+ ```
33
+
34
+ ### For Mobile Projects (React Native)
35
+
36
+ ```typescript
37
+ // Import mobile components
38
+ import { Button, Typography } from 'onecart-ui/mobile';
39
+ // Import tokens
40
+ import { tokens } from 'onecart-ui/tokens';
41
+
42
+ function App() {
43
+ return (
44
+ <View>
45
+ <Typography.Heading size="xl">Welcome</Typography.Heading>
46
+ <Typography.Body size="md">This is a mobile component</Typography.Body>
47
+ <Button variant="primary" onPress={() => alert('Pressed!')}>
48
+ Press Me
49
+ </Button>
50
+ </View>
51
+ );
52
+ }
53
+ ```
54
+
55
+ ### For Mobile Projects (React Native)
56
+
57
+ ```typescript
58
+ // Web tokens
59
+ import { tokens } from 'onecart-ui/tokens/web';
60
+
61
+ // Mobile tokens
62
+ import { tokens } from 'onecart-ui/tokens/mobile';
63
+
64
+ // Use tokens in your styles
65
+ const styles = {
66
+ color: tokens.NEUTRAL_80,
67
+ fontSize: tokens.BODY_MD_FONT_SIZE,
68
+ };
69
+ ```
70
+
71
+ ## Components
72
+
73
+ - **Button**: Primary, secondary, and tertiary variants for web and mobile
74
+ - **Typography**: Body, Display, Heading, and Utility text components
75
+ - Each with multiple size options
76
+ - Platform-specific implementations (web/mobile)
77
+
78
+ ## Development
79
+
80
+ This is a monorepo managed with npm workspaces and Turbo.
81
+
82
+ ```bash
83
+ # Install dependencies
84
+ npm install
85
+
86
+ # Build all packages
87
+ npm run build
88
+
89
+ # Run development mode
90
+ npm run dev
91
+
92
+ # Generate design tokens
93
+ npm run generate-tokens
94
+ ```
95
+
96
+ ## Package Structure
97
+
98
+ ```
99
+ onecart-ui/
100
+ dist/ # Built components (web & mobile)
101
+ tokens/ # Design tokens (CSS, JS)
102
+ packages/
103
+ tokens/ # Token source & generator
104
+ components/ # Component source
105
+ apps/
106
+ docs/ # Storybook documentation
107
+ ```
108
+ ```
109
+
110
+ ## License
111
+
112
+ MIT
113
+ ```
114
+
115
+ ### For Mobile Projects (React Native)
116
+
117
+ ```typescript
118
+ // Import components from /mobile
119
+ import { Button, Body, Display, Heading, Utility } from 'onecart-ui-components/mobile';
120
+
121
+ // Import types
122
+ import type { ButtonProps, BodyProps, DisplayProps, HeadingProps, UtilityProps } from 'onecart-ui-components/mobile';
123
+
124
+ // Usage
125
+ function App() {
126
+ return (
127
+ <View>
128
+ <Display size="2xl">Welcome to OneCart</Display>
129
+ <Body size="lg">A cross-platform design system</Body>
130
+ <Button
131
+ label="Get Started"
132
+ type="primary"
133
+ size="large"
134
+ onPress={() => console.log('Pressed!')}
135
+ />
136
+ </View>
137
+ );
138
+ }
139
+ ```
140
+
141
+ ### Available Components
142
+
143
+ **Button**
144
+
145
+ - Types: `primary`, `outline`, `ghost`, `destructive`
146
+ - Sizes: `large`, `medium`, `small`
147
+ - Supports icons, full width, and platform-specific handlers
148
+
149
+ **Typography Components**
150
+
151
+ - **Body**: Text component with sizes `xl`, `lg`, `md`, `sm`
152
+ - **Display**: Large heading with sizes `2xl`, `xl`
153
+ - **Heading**: Semantic headings with sizes `xl`, `lg`, `md`, `sm`, `xs`, `2xs`
154
+ - **Utility**: Utility text with variants `button`, `link`, `caption`
155
+
156
+ All typography components support:
157
+
158
+ - `align`: Text alignment (`left`, `center`, `right`)
159
+ - `color`: Custom color override
160
+ - `truncate`: Single-line truncation with ellipsis
161
+ - `lineClamp`: Multi-line clamping
162
+ - `onClick` (web) / `onPress` (mobile): Click/press handlers
163
+
164
+ ## Next Steps
165
+
166
+ See bottom of generated setup output for roadmap suggestions.
167
+
168
+ ## Token Sync (Figma / Tokens Studio)
169
+
170
+ The tokens pipeline supports pulling design tokens from a Figma file using `figma-token-engine`.
171
+
172
+ 1. Copy `.env.example` to `.env` at repo root.
173
+ 2. Fill in:
174
+
175
+ - `FIGMA_PERSONAL_ACCESS_TOKEN`
176
+ - `FIGMA_FILE_ID`
177
+
178
+ 3. Generate tokens:
179
+
180
+ ```bash
181
+ npm run generate-tokens
182
+ ```
183
+
184
+ 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.
185
+
186
+ If sync fails, verify your PAT scopes and that the file ID matches the Figma URL segment after `/file/`.
package/dist/Button/Button.mobile.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { ButtonProps } from "./Button.types";
3
+ export declare const Button: React.FC<ButtonProps>;
4
+ export default Button;
package/dist/Button/Button.types.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ export type ButtonType = "primary" | "outline" | "ghost" | "destructive";
2
+ export type ButtonSize = "large" | "small" | "medium";
3
+ export type ButtonState = "default" | "hover" | "active" | "disabled";
4
+ export interface ButtonProps {
5
+ /** Visible text label (also used as accessible name fallback). */
6
+ label: string;
7
+ /** Visual variant; defaults to `primary`. */
8
+ type?: ButtonType;
9
+ /** Size scale; defaults to `large`. */
10
+ size?: ButtonSize;
11
+ /** Disables interaction and applies disabled styling. */
12
+ disabled?: boolean;
13
+ /** Icon name rendered to the left of label (ignored if `icon` provided). */
14
+ leftIcon?: string;
15
+ /** Icon name rendered to the right of label (ignored if `icon` provided). */
16
+ rightIcon?: string;
17
+ /** Single icon (icon‑only button); when set, label text is visually hidden. */
18
+ icon?: string;
19
+ /** Stretches button to width:100%. */
20
+ fullWidth?: boolean;
21
+ /** Underlines text for `ghost` variant when not disabled (default true). */
22
+ ghostUnderline?: boolean;
23
+ /** Explicit accessible label (overrides fallback to `label`). */
24
+ accessibilityLabel?: string;
25
+ /** Test identifier (data-testid on web). */
26
+ testID?: string;
27
+ /** Additional CSS class name for web implementation only. */
28
+ className?: string;
29
+ /** Style override: React.CSSProperties (web) or RN style object (mobile). */
30
+ style?: React.CSSProperties | Record<string, unknown>;
31
+ /** Web click handler; executes alongside `onPress` if both supplied. */
32
+ onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
33
+ /** Platform‑agnostic press handler (used by mobile; also invoked on web clicks). */
34
+ onPress?: () => void;
35
+ /** Mouse enter hook (web only). */
36
+ onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
37
+ /** Mouse leave hook (web only). */
38
+ onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
39
+ /** Mouse down hook (web only). */
40
+ onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
41
+ /** Mouse up hook (web only). */
42
+ onMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;
43
+ }
package/dist/Button/Button.web.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { ButtonProps } from "./Button.types";
3
+ export declare const Button: React.FC<ButtonProps>;
4
+ export default Button;
package/dist/Button/buttonStyles.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { ButtonState, ButtonType, ButtonSize } from "./Button.types";
2
+ import type { ViewStyle, TextStyle } from "react-native";
3
+ export interface ComputedButtonStyles {
4
+ base: React.CSSProperties;
5
+ text: React.CSSProperties;
6
+ }
7
+ export declare const computeWebButtonStyles: (type: ButtonType, state: ButtonState, size: ButtonSize, isIconOnly: boolean, fullWidth: boolean, hasBothIcons: boolean, overrides?: Partial<React.CSSProperties>) => ComputedButtonStyles;
8
+ export interface MobileButtonStyles {
9
+ container: ViewStyle;
10
+ label: TextStyle;
11
+ }
12
+ export declare const computeMobileButtonStyles: (type: ButtonType, state: ButtonState, size: ButtonSize, overrides?: Partial<ViewStyle>) => MobileButtonStyles;
package/dist/Button/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Button.web";
package/dist/Button/index.mobile.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Button.mobile";
package/dist/Typography/Body/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ import { BodyProps } from "../../types/Typography";
3
+ export declare const Body: React.FC<BodyProps>;
package/dist/Typography/Display/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ import { DisplayProps } from "../../types/Typography";
3
+ export declare const Display: React.FC<DisplayProps>;
package/dist/Typography/Heading/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ import { HeadingProps } from "../../types/Typography";
3
+ export declare const Heading: React.FC<HeadingProps>;
package/dist/Typography/Utility/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ import { UtilityProps } from "../../types/Typography";
3
+ export declare const Utility: React.FC<UtilityProps>;
package/dist/Typography/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { Display } from "./Display";
2
+ export { Heading } from "./Heading";
3
+ export { Body } from "./Body";
4
+ export { Utility } from "./Utility";
package/dist/components/Button.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Button } from "../Button/Button.web";
package/dist/components/Icon.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ export interface IconDef {
3
+ name: string;
4
+ svg?: React.ReactNode;
5
+ }
6
+ export declare const icons: IconDef[];
7
+ export declare const Icon: React.FC<{
8
+ name: string;
9
+ size?: number;
10
+ }>;
package/dist/components/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export * from "./Button";
2
+ export * from "./Icon";
3
+ export type { IconDef } from "./Icon";
4
+ export { Body, Display, Heading, Utility } from "../Typography";
package/dist/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Button";