@aiready/components 0.1.26 → 0.1.30
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 +29 -228
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,246 +1,47 @@
|
|
|
1
1
|
# @aiready/components
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@aiready/components)
|
|
3
|
+
[](https://www.npmjs.com/package/@aiready/components)
|
|
4
4
|
|
|
5
5
|
Unified shared components library (UI, charts, hooks, utilities) for AIReady.
|
|
6
6
|
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
- 🎨 **UI Components**: Button, Card, Input, Label, Badge, Container, Grid, Stack, Separator (shadcn/ui based)
|
|
10
|
-
- 🗂️ **Form Components**: Select, Checkbox, RadioGroup, Switch, Textarea
|
|
11
|
-
- 📊 **D3 Charts**: ForceDirectedGraph with physics-based layout and interactive controls
|
|
12
|
-
- 🪝 **React Hooks**: `useDebounce`, `useD3`, `useForceSimulation`
|
|
13
|
-
- 🛠️ **Utilities**: `cn` (className merging), formatters, color schemes
|
|
14
|
-
- 🌙 **Dark Mode**: Built-in support via Tailwind CSS
|
|
15
|
-
- 🎯 **Tree-shakeable**: Granular exports for optimal bundle size
|
|
16
|
-
- 📦 **TypeScript**: Full type safety
|
|
17
|
-
|
|
18
|
-
## Installation
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
pnpm add @aiready/components
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## Usage
|
|
25
|
-
|
|
26
|
-
### Import Everything
|
|
27
|
-
|
|
28
|
-
```tsx
|
|
29
|
-
import { Button, Card, Input, Label, Badge } from '@aiready/components';
|
|
30
|
-
|
|
31
|
-
function App() {
|
|
32
|
-
return (
|
|
33
|
-
<Card>
|
|
34
|
-
<CardHeader>
|
|
35
|
-
<CardTitle>Welcome</CardTitle>
|
|
36
|
-
</CardHeader>
|
|
37
|
-
<CardContent>
|
|
38
|
-
<Label htmlFor="email">Email</Label>
|
|
39
|
-
<Input id="email" type="email" placeholder="you@example.com" />
|
|
40
|
-
</CardContent>
|
|
41
|
-
<CardFooter>
|
|
42
|
-
<Button>Submit</Button>
|
|
43
|
-
<Badge variant="secondary">New</Badge>
|
|
44
|
-
</CardFooter>
|
|
45
|
-
</Card>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Import Specific Components (Tree-shaking)
|
|
7
|
+
## 🏛️ Architecture
|
|
51
8
|
|
|
52
|
-
```tsx
|
|
53
|
-
import { Button } from '@aiready/components/button';
|
|
54
|
-
import { Card } from '@aiready/components/card';
|
|
55
9
|
```
|
|
10
|
+
🎯 USER
|
|
11
|
+
│
|
|
12
|
+
▼
|
|
13
|
+
🎛️ @aiready/cli (orchestrator)
|
|
14
|
+
│ │ │ │ │ │ │ │ │
|
|
15
|
+
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼
|
|
16
|
+
[PAT] [CTX] [CON] [AMP] [DEP] [DOC] [SIG] [AGT] [TST]
|
|
17
|
+
│ │ │ │ │ │ │ │ │
|
|
18
|
+
└─────┴─────┴─────┴─────┴─────┴─────┴─────┴─────┘
|
|
19
|
+
│
|
|
20
|
+
▼
|
|
21
|
+
🏢 @aiready/core
|
|
56
22
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<Button variant="destructive" size="sm">Delete</Button>
|
|
66
|
-
<Button variant="outline" size="lg">Outline</Button>
|
|
67
|
-
<Button variant="ghost">Ghost</Button>
|
|
68
|
-
<Button variant="link">Link</Button>
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
**Variants**: `default`, `destructive`, `outline`, `secondary`, `ghost`, `link`
|
|
72
|
-
**Sizes**: `default`, `sm`, `lg`, `icon`
|
|
73
|
-
|
|
74
|
-
### Card
|
|
75
|
-
|
|
76
|
-
```tsx
|
|
77
|
-
import {
|
|
78
|
-
Card,
|
|
79
|
-
CardHeader,
|
|
80
|
-
CardTitle,
|
|
81
|
-
CardDescription,
|
|
82
|
-
CardContent,
|
|
83
|
-
CardFooter
|
|
84
|
-
} from '@aiready/components/card';
|
|
85
|
-
|
|
86
|
-
<Card>
|
|
87
|
-
<CardHeader>
|
|
88
|
-
<CardTitle>Card Title</CardTitle>
|
|
89
|
-
<CardDescription>Card description here</CardDescription>
|
|
90
|
-
</CardHeader>
|
|
91
|
-
<CardContent>
|
|
92
|
-
<p>Card content</p>
|
|
93
|
-
</CardContent>
|
|
94
|
-
<CardFooter>
|
|
95
|
-
<Button>Action</Button>
|
|
96
|
-
</CardFooter>
|
|
97
|
-
</Card>
|
|
23
|
+
Legend:
|
|
24
|
+
PAT = pattern-detect CTX = context-analyzer
|
|
25
|
+
CON = consistency AMP = change-amplification
|
|
26
|
+
DEP = deps-health DOC = doc-drift
|
|
27
|
+
SIG = ai-signal-clarity AGT = agent-grounding
|
|
28
|
+
TST = testability
|
|
29
|
+
CMP = @aiready/components ★ (support package — shared UI library, not a scorer)
|
|
30
|
+
★ = YOU ARE HERE
|
|
98
31
|
```
|
|
99
32
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
```tsx
|
|
103
|
-
import { Input } from '@aiready/components/input';
|
|
104
|
-
|
|
105
|
-
<Input type="text" placeholder="Enter text..." />
|
|
106
|
-
<Input type="email" placeholder="Email..." />
|
|
107
|
-
<Input type="password" placeholder="Password..." />
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
### Label
|
|
111
|
-
|
|
112
|
-
```tsx
|
|
113
|
-
import { Label } from '@aiready/components/label';
|
|
114
|
-
|
|
115
|
-
<Label htmlFor="username">Username</Label>
|
|
116
|
-
<Input id="username" />
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### Badge
|
|
120
|
-
|
|
121
|
-
```tsx
|
|
122
|
-
import { Badge } from '@aiready/components/badge';
|
|
123
|
-
|
|
124
|
-
<Badge variant="default">Default</Badge>
|
|
125
|
-
<Badge variant="secondary">Secondary</Badge>
|
|
126
|
-
<Badge variant="destructive">Error</Badge>
|
|
127
|
-
<Badge variant="outline">Outline</Badge>
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
## Tailwind CSS Setup
|
|
131
|
-
|
|
132
|
-
This package requires Tailwind CSS. Add the package to your Tailwind config:
|
|
133
|
-
|
|
134
|
-
```js
|
|
135
|
-
// tailwind.config.js
|
|
136
|
-
export default {
|
|
137
|
-
content: [
|
|
138
|
-
'./src/**/*.{ts,tsx}',
|
|
139
|
-
'./node_modules/@aiready/components/**/*.{js,ts,jsx,tsx}',
|
|
140
|
-
],
|
|
141
|
-
theme: {
|
|
142
|
-
extend: {
|
|
143
|
-
// Use the shared config
|
|
144
|
-
},
|
|
145
|
-
},
|
|
146
|
-
plugins: [],
|
|
147
|
-
};
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
### CSS Variables
|
|
151
|
-
|
|
152
|
-
Add these CSS variables to your global styles:
|
|
153
|
-
|
|
154
|
-
```css
|
|
155
|
-
@layer base {
|
|
156
|
-
:root {
|
|
157
|
-
--background: 0 0% 100%;
|
|
158
|
-
--foreground: 222.2 84% 4.9%;
|
|
159
|
-
--card: 0 0% 100%;
|
|
160
|
-
--card-foreground: 222.2 84% 4.9%;
|
|
161
|
-
--primary: 222.2 47.4% 11.2%;
|
|
162
|
-
--primary-foreground: 210 40% 98%;
|
|
163
|
-
--secondary: 210 40% 96.1%;
|
|
164
|
-
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
165
|
-
--muted: 210 40% 96.1%;
|
|
166
|
-
--muted-foreground: 215.4 16.3% 46.9%;
|
|
167
|
-
--accent: 210 40% 96.1%;
|
|
168
|
-
--accent-foreground: 222.2 47.4% 11.2%;
|
|
169
|
-
--destructive: 0 84.2% 60.2%;
|
|
170
|
-
--destructive-foreground: 210 40% 98%;
|
|
171
|
-
--border: 214.3 31.8% 91.4%;
|
|
172
|
-
--input: 214.3 31.8% 91.4%;
|
|
173
|
-
--ring: 222.2 84% 4.9%;
|
|
174
|
-
--radius: 0.5rem;
|
|
175
|
-
}
|
|
33
|
+
## Features
|
|
176
34
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
--card: 222.2 84% 4.9%;
|
|
181
|
-
--card-foreground: 210 40% 98%;
|
|
182
|
-
--primary: 210 40% 98%;
|
|
183
|
-
--primary-foreground: 222.2 47.4% 11.2%;
|
|
184
|
-
--secondary: 217.2 32.6% 17.5%;
|
|
185
|
-
--secondary-foreground: 210 40% 98%;
|
|
186
|
-
--muted: 217.2 32.6% 17.5%;
|
|
187
|
-
--muted-foreground: 215 20.2% 65.1%;
|
|
188
|
-
--accent: 217.2 32.6% 17.5%;
|
|
189
|
-
--accent-foreground: 210 40% 98%;
|
|
190
|
-
--destructive: 0 62.8% 30.6%;
|
|
191
|
-
--destructive-foreground: 210 40% 98%;
|
|
192
|
-
--border: 217.2 32.6% 17.5%;
|
|
193
|
-
--input: 217.2 32.6% 17.5%;
|
|
194
|
-
--ring: 212.7 26.8% 83.9%;
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
```
|
|
35
|
+
- 🎨 **UI Components**: Button, Card, Input, Label, Badge, Container, Grid, Stack, Separator.
|
|
36
|
+
- 📊 **D3 Charts**: ForceDirectedGraph with physics-based layout.
|
|
37
|
+
- 🪝 **React Hooks**: `useDebounce`, `useD3`, `useForceSimulation`.
|
|
198
38
|
|
|
199
|
-
##
|
|
39
|
+
## Installation
|
|
200
40
|
|
|
201
41
|
```bash
|
|
202
|
-
|
|
203
|
-
pnpm install
|
|
204
|
-
|
|
205
|
-
# Build package
|
|
206
|
-
pnpm build
|
|
207
|
-
|
|
208
|
-
# Watch mode
|
|
209
|
-
pnpm dev
|
|
210
|
-
|
|
211
|
-
# Type check
|
|
212
|
-
pnpm typecheck
|
|
213
|
-
|
|
214
|
-
# Run tests
|
|
215
|
-
pnpm test
|
|
42
|
+
pnpm add @aiready/components
|
|
216
43
|
```
|
|
217
44
|
|
|
218
|
-
## Roadmap
|
|
219
|
-
|
|
220
|
-
### Phase 1: Foundation ✅ COMPLETE
|
|
221
|
-
- [x] Button, Card, Input, Label, Badge components
|
|
222
|
-
- [x] Tailwind configuration
|
|
223
|
-
- [x] TypeScript setup
|
|
224
|
-
- [x] Build system (tsup)
|
|
225
|
-
|
|
226
|
-
### Phase 2: Extended UI + Charts ✅ COMPLETE
|
|
227
|
-
- [x] Layout components (Container, Grid, Stack, Separator)
|
|
228
|
-
- [x] Form components (Select, Checkbox, RadioGroup, Switch, Textarea)
|
|
229
|
-
- [x] D3 Charts (ForceDirectedGraph with physics-based layout)
|
|
230
|
-
|
|
231
|
-
### Phase 3: Advanced Charts + Utilities ✅ COMPLETE
|
|
232
|
-
- [x] ForceDirectedGraph with interactive controls and dark/light mode
|
|
233
|
-
- [x] React hooks (`useD3`, `useDebounce`, `useForceSimulation`)
|
|
234
|
-
- [x] Utilities (`cn`, formatters, color schemes)
|
|
235
|
-
|
|
236
|
-
### Phase 4: Future (Planned)
|
|
237
|
-
- [ ] Additional D3 charts (LineChart, BarChart, HeatMap, TreeMap)
|
|
238
|
-
- [ ] Interactive components (Modal, Dropdown, Tabs, Tooltip)
|
|
239
|
-
|
|
240
45
|
## License
|
|
241
46
|
|
|
242
|
-
MIT
|
|
243
|
-
|
|
244
|
-
## Maintainer
|
|
245
|
-
|
|
246
|
-
Peng Cao (@caopengau)
|
|
47
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aiready/components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.30",
|
|
4
4
|
"description": "Unified shared components library (UI, charts, hooks, utilities) for AIReady",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"d3": "^7.9.0",
|
|
64
64
|
"d3-force": "^3.0.0",
|
|
65
65
|
"tailwind-merge": "^3.0.0",
|
|
66
|
-
"@aiready/core": "0.9.
|
|
66
|
+
"@aiready/core": "0.9.31"
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@testing-library/jest-dom": "^6.6.5",
|