@goliapkg/gds 0.9.10 → 1.0.1

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 (5) hide show
  1. package/README.md +90 -42
  2. package/dist/l4-molecules/pin-input.d.ts +2 -2
  3. package/dist/l4-molecules/pin-input.d.ts.map +1 -1
  4. package/dist/l4-molecules-DXTNnybm.js.map +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -1,39 +1,24 @@
1
1
  # @goliapkg/gds
2
2
 
3
- **GOLIA Design System** — enterprise-grade React UI component library built by [GOLIA](https://github.com/goliajp).
3
+ **GOLIA Design System** — production-grade React UI component library built by [GOLIA](https://github.com/goliajp).
4
4
 
5
- Powering all GOLIA React web applications with a unified, AI-friendly component system.
5
+ 370+ components across 8 architectural layers, from design tokens to full-page patterns.
6
6
 
7
7
  ## Features
8
8
 
9
- - **370+ components** across 8 architectural layers (tokens → patterns)
10
- - **AI-native** — semantic `data-*` attributes, typed props, machine-readable documentation. AI agents can learn the system from types and playground demos alone
11
- - **Contextual depth** — components auto-scale spacing, radius, shadow, and typography based on nesting depth. Zero configuration
12
- - **Glass material** — frosted translucency as a first-class material system with `glass` prop
13
- - **Motion system** — spring physics animation vocabulary with `motion` prop
9
+ - **370+ components** across 8 layers (tokens → primitives → atoms → molecules → organisms → charts → patterns)
10
+ - **Strict layer architecture** — dependency constraints enforced by ESLint, anti-corruption wrappers for all external deps
11
+ - **93% branch coverage** — 393 test files, 3400+ test cases, all layers above 90%
12
+ - **AI-native** — semantic `data-component`/`data-variant`/`data-state` attributes, typed props, machine-readable docs
13
+ - **Contextual depth** — components auto-scale spacing, radius, shadow, typography based on nesting depth
14
+ - **Glass material** — frosted translucency as first-class material system via `glass` prop
15
+ - **Motion system** — spring physics animation vocabulary via `motion` prop
14
16
  - **Dark-native** — designed for dark mode first, light mode derived
15
- - **Keyboard-first** — every action reachable by keyboard, visible focus indicators everywhere
17
+ - **Keyboard-first** — every interactive element has keyboard support, visible focus indicators, focus trapping in overlays
16
18
  - **5-axis theming** — density, elevation, glass, motion, shape — all controllable at runtime via Jotai atoms
17
- - **Gesture support** — drag, swipe, pinch-zoom, long-press, pull-to-refresh built into the token layer
19
+ - **Tree-shakeable** — per-layer subpath exports, ESM-only, `sideEffects: false`
18
20
 
19
- ## Architecture
20
-
21
- ```
22
- src/
23
- ├── l0-tokens/ design tokens: color math, sizing, radius, shadow, glass, motion, gestures
24
- ├── l1-systems/ theme engine (Jotai), 5-axis dimensional state
25
- ├── l2-primitives/ ~30 stateless visual blocks (Button, Input, Badge...)
26
- ├── l3-atoms/ ~60 simple composed elements (Avatar, Checkbox, Tooltip...)
27
- ├── l4-molecules/ ~70 multi-part components (Card, Dialog, Tabs, Select...)
28
- ├── l5-organisms/ ~60 complex features (DataTable, Calendar, Kanban...)
29
- ├── l6-charts/ 31 Recharts-based visualizations (Bar, Line, Heatmap, Sankey...)
30
- ├── l7-patterns/ ~55 page-level layouts (Dashboard, Admin, Settings...)
31
- └── utils/ anti-corruption layer (cx, a11y, dom, types)
32
- ```
33
-
34
- Each layer has **strict dependency constraints** enforced by ESLint — higher layers import from lower layers, never the reverse.
35
-
36
- ## Quick Start
21
+ ## Install
37
22
 
38
23
  ```bash
39
24
  bun add @goliapkg/gds
@@ -57,6 +42,56 @@ function App() {
57
42
  }
58
43
  ```
59
44
 
45
+ ## Subpath Imports
46
+
47
+ Import only what you need for optimal bundle size:
48
+
49
+ ```tsx
50
+ // full library (re-exports everything)
51
+ import { Button, Dialog, DataTable } from '@goliapkg/gds'
52
+
53
+ // per-layer imports (tree-shaking friendly)
54
+ import { Button, Input } from '@goliapkg/gds/primitives'
55
+ import { Avatar, Switch } from '@goliapkg/gds/atoms'
56
+ import { Card, Dialog, Tabs } from '@goliapkg/gds/molecules'
57
+ import { DataTable, Calendar } from '@goliapkg/gds/organisms'
58
+ import { BarChart, LineChart } from '@goliapkg/gds/charts'
59
+ import { AdminLayout, Hero } from '@goliapkg/gds/patterns'
60
+ import { cx, focusCls, renderPortal } from '@goliapkg/gds/utils'
61
+ ```
62
+
63
+ ## Architecture
64
+
65
+ ```
66
+ src/
67
+ ├── l0-tokens/ design tokens: color math, sizing, radius, shadow, glass, motion, gestures
68
+ ├── l1-systems/ theme engine (Jotai atoms), 5-axis dimensional state
69
+ ├── l2-primitives/ 31 stateless visual blocks (Button, Input, Badge, Spinner...)
70
+ ├── l3-atoms/ 71 simple composed elements (Avatar, Checkbox, Tooltip, Rating...)
71
+ ├── l4-molecules/ 109 multi-part components (Card, Dialog, Tabs, Select, ColorPicker...)
72
+ ├── l5-organisms/ 73 complex features (DataTable, Calendar, Kanban, CommandPalette...)
73
+ ├── l6-charts/ 31 Recharts-based visualizations (Bar, Line, Heatmap, Sankey...)
74
+ ├── l7-patterns/ 55 page-level layouts (Dashboard, Admin, Hero, LoginForm...)
75
+ └── utils/ anti-corruption layer (cx, a11y, dom, types, motion, glass, portal)
76
+ ```
77
+
78
+ ### Layer Dependency Rules
79
+
80
+ Each layer has strict import constraints enforced by ESLint:
81
+
82
+ | Layer | Can Import From | External Deps |
83
+ |-------|----------------|---------------|
84
+ | L0 tokens | — | tailwindcss |
85
+ | L1 systems | L0 | react, jotai |
86
+ | L2 primitives | L0, L1, utils | react, cva |
87
+ | L3 atoms | L0–L2, utils | + lucide-react |
88
+ | L4 molecules | L0–L3, utils | + lucide-react |
89
+ | L5 organisms | L0–L4, utils | + lucide-react |
90
+ | L6 charts | L0, utils | recharts |
91
+ | L7 patterns | L0–L5, utils | react |
92
+
93
+ Anti-corruption wrappers: `cx()` for clsx+tailwind-merge, `VariantProps` for CVA types, `renderPortal()` for react-dom. Direct imports of these packages are blocked by ESLint.
94
+
60
95
  ## Development
61
96
 
62
97
  ```bash
@@ -64,37 +99,50 @@ git clone git@github.com:goliajp/gds.git
64
99
  cd gds
65
100
  bun install
66
101
  bun dev # dev-center at localhost:5175
67
- bun test # run tests
68
- bun run test:coverage # coverage report (80% threshold)
102
+ bun test # run vitest
103
+ bun run test:coverage # coverage report (93%+ branches)
69
104
  bun run check # test + typecheck + lint
105
+ bun run build # build library
70
106
  ```
71
107
 
108
+ ## Quality
109
+
110
+ | Metric | Value |
111
+ |--------|-------|
112
+ | Test files | 393 |
113
+ | Test cases | 3,400+ |
114
+ | Branch coverage | 93%+ |
115
+ | Line coverage | 97%+ |
116
+ | TypeScript | strict, zero `any` |
117
+ | a11y | focus trap, keyboard nav, ARIA roles |
118
+ | SSR safe | all browser APIs guarded |
119
+
72
120
  ## For AI Agents
73
121
 
74
122
  GDS is designed to be learned and applied by AI. Key entry points:
75
123
 
76
124
  | What you need | Where to look |
77
125
  |---------------|---------------|
78
- | All exported components & types | `src/index.ts` |
79
- | Component API patterns | `src/l3-atoms/button/button.tsx` (canonical example) |
80
- | Design tokens & CSS variables | `src/l0-tokens/` |
81
- | Layer dependency rules | `src/l0-tokens/deps.ts` |
82
- | Design principles | `.claude/rules/gds-philosophy.md` |
83
- | Coding standards | `.claude/rules/gds-lib.md` |
84
- | Live examples | `dev-center/src/items/` (150+ demos) |
126
+ | All exports | `src/index.ts` |
127
+ | Component pattern | any `src/l3-atoms/*.tsx` (canonical) |
128
+ | Design tokens | `src/l0-tokens/` |
129
+ | Layer rules | `src/l0-tokens/deps.ts` |
130
+ | Philosophy | `.claude/rules/gds-philosophy.md` |
131
+ | Standards | `.claude/rules/gds-lib.md` |
132
+ | Live demos | `dev-center/src/items/` (150+ demos) |
85
133
 
86
- Every component follows the same pattern: **CVA variants → typed Props → forwardRef → cx() class merging**. Learn one, apply to all.
134
+ Every component: **CVA variants → typed Props → forwardRef → cx() → focusCls → data-component**. Learn one, apply to all.
87
135
 
88
136
  ## Tech Stack
89
137
 
90
- - **React 19** + **TypeScript 5** (strict mode)
138
+ - **React 19** + **TypeScript** (strict)
91
139
  - **Tailwind CSS 4** with semantic design tokens
92
- - **CVA** (class-variance-authority) for variant management
140
+ - **CVA** for variant management
93
141
  - **Jotai** for theme state
94
- - **Recharts 3** for data visualization
142
+ - **Recharts 3** for charts
95
143
  - **Lucide** for icons
96
- - **Vite 8** for dev server and build
97
- - **Vitest 4** for testing (happy-dom, 80% coverage threshold)
144
+ - **Vite 8** for build
145
+ - **Vitest** for testing
98
146
 
99
147
  ## License
100
148
 
package/dist/l4-molecules/pin-input.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- type PinInputProps = React.HTMLAttributes<HTMLDivElement> & {
1
+ type PinInputProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
2
2
  disabled?: boolean;
3
3
  error?: boolean;
4
4
  length?: number;
@@ -8,7 +8,7 @@ type PinInputProps = React.HTMLAttributes<HTMLDivElement> & {
8
8
  onComplete?: (value: string) => void;
9
9
  value?: string;
10
10
  };
11
- export declare const PinInput: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
11
+ export declare const PinInput: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange"> & {
12
12
  disabled?: boolean;
13
13
  error?: boolean;
14
14
  length?: number;
package/dist/l4-molecules/pin-input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pin-input.d.ts","sourceRoot":"","sources":["../../src/l4-molecules/pin-input.tsx"],"names":[],"mappings":"AAOA,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,QAAQ;eAVR,OAAO;YACV,OAAO;aACN,MAAM;WACR,OAAO;cACJ,OAAO;eACN,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;iBACrB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;YAC5B,MAAM;kDA4Mf,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,CAAA"}
1
+ {"version":3,"file":"pin-input.d.ts","sourceRoot":"","sources":["../../src/l4-molecules/pin-input.tsx"],"names":[],"mappings":"AAOA,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,QAAQ;eAVR,OAAO;YACV,OAAO;aACN,MAAM;WACR,OAAO;cACJ,OAAO;eACN,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;iBACrB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;YAC5B,MAAM;kDA4Mf,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,CAAA"}