@smart-coder-labs/apple-design-system 1.3.1 → 1.3.2
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 +190 -318
- package/dist/cli/commands/rollback.d.ts +2 -0
- package/dist/cli/commands/rollback.d.ts.map +1 -0
- package/dist/cli/commands/rollback.js +32 -0
- package/dist/cli/commands/rollback.js.map +1 -0
- package/dist/cli/commands/status.d.ts +2 -0
- package/dist/cli/commands/status.d.ts.map +1 -0
- package/dist/cli/commands/status.js +105 -0
- package/dist/cli/commands/status.js.map +1 -0
- package/dist/cli/index.js +13 -0
- package/dist/cli/index.js.map +1 -1
- package/dist/cli/utils/config.d.ts +7 -1
- package/dist/cli/utils/config.d.ts.map +1 -1
- package/dist/cli/utils/config.js +11 -1
- package/dist/cli/utils/config.js.map +1 -1
- package/dist/cli/utils/registry.d.ts +17 -0
- package/dist/cli/utils/registry.d.ts.map +1 -1
- package/dist/cli/utils/registry.js +59 -0
- package/dist/cli/utils/registry.js.map +1 -1
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1,30 +1,28 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Apple Creative Design System
|
|
2
2
|
|
|
3
3
|
<div align="center">
|
|
4
4
|
|
|
5
|
-
**
|
|
5
|
+
**A comprehensive design system inspired by macOS, iOS, and VisionOS**
|
|
6
6
|
|
|
7
|
-
*
|
|
8
|
-
<br>
|
|
9
|
-
*✨ Creado con Inteligencia Artificial ✨*
|
|
7
|
+
*Built with Framer Motion + Radix UI + Tailwind CSS*
|
|
10
8
|
|
|
11
9
|
[](https://www.typescriptlang.org/)
|
|
12
|
-
[](https://reactjs.org/)
|
|
13
11
|
[](https://www.framer.com/motion/)
|
|
14
|
-
[](https://tailwindcss.com/)
|
|
15
13
|
[](https://www.npmjs.com/package/@smart-coder-labs/apple-design-system)
|
|
16
14
|
|
|
17
|
-
[
|
|
18
|
-
[
|
|
19
|
-
[
|
|
20
|
-
[
|
|
21
|
-
[
|
|
15
|
+
[Installation](#installation) •
|
|
16
|
+
[CLI](#cli) •
|
|
17
|
+
[Components](#components) •
|
|
18
|
+
[Versioning](#component-versioning) •
|
|
19
|
+
[Storybook](https://smart-coder-labs.github.io/design-system/)
|
|
22
20
|
|
|
23
21
|
</div>
|
|
24
22
|
|
|
25
23
|
---
|
|
26
24
|
|
|
27
|
-
##
|
|
25
|
+
## Installation
|
|
28
26
|
|
|
29
27
|
```bash
|
|
30
28
|
npm install -D @smart-coder-labs/apple-design-system
|
|
@@ -32,33 +30,32 @@ npm install -D @smart-coder-labs/apple-design-system
|
|
|
32
30
|
|
|
33
31
|
---
|
|
34
32
|
|
|
35
|
-
##
|
|
33
|
+
## CLI
|
|
36
34
|
|
|
37
|
-
|
|
35
|
+
The design system ships with a CLI inspired by shadcn/ui — it copies component source code directly into your project instead of importing a black-box package. You own the code.
|
|
38
36
|
|
|
39
37
|
### `init`
|
|
40
38
|
|
|
41
|
-
|
|
39
|
+
Detects your framework automatically and sets up `design-system.json`.
|
|
42
40
|
|
|
43
41
|
```bash
|
|
44
42
|
npx @smart-coder-labs/apple-design-system init
|
|
45
43
|
```
|
|
46
44
|
|
|
47
45
|
```
|
|
48
|
-
|
|
46
|
+
Apple Design System — Initialization
|
|
49
47
|
|
|
50
48
|
Detected framework: Next.js (App Router — RSC enabled)
|
|
51
49
|
Is this correct? › Yes
|
|
52
50
|
|
|
53
|
-
Project root directory? › ./src
|
|
54
51
|
Where to install components? › ./src/components/ui
|
|
55
52
|
Global CSS file path? › ./src/index.css
|
|
56
53
|
Install required dependencies now? › Yes
|
|
57
54
|
```
|
|
58
55
|
|
|
59
|
-
**
|
|
56
|
+
**Supported frameworks:** Next.js (App Router and Pages Router), Vite, Astro, Remix / React Router.
|
|
60
57
|
|
|
61
|
-
|
|
58
|
+
Configuration is saved to `design-system.json`:
|
|
62
59
|
|
|
63
60
|
```json
|
|
64
61
|
{
|
|
@@ -70,408 +67,283 @@ La configuración se guarda en `design-system.json`:
|
|
|
70
67
|
}
|
|
71
68
|
```
|
|
72
69
|
|
|
73
|
-
> **`rsc: true`** — Next.js App Router.
|
|
74
|
-
> **`rsc: false`** — Vite, Astro, Remix,
|
|
70
|
+
> **`rsc: true`** — Next.js App Router. Components keep `'use client'`.
|
|
71
|
+
> **`rsc: false`** — Vite, Astro, Remix, Pages Router. `'use client'` is stripped automatically.
|
|
75
72
|
|
|
76
73
|
---
|
|
77
74
|
|
|
78
75
|
### `add`
|
|
79
76
|
|
|
80
|
-
|
|
77
|
+
Adds one or more components. Resolves inter-component dependencies automatically.
|
|
81
78
|
|
|
82
79
|
```bash
|
|
83
80
|
npx @smart-coder-labs/apple-design-system add Button Card
|
|
84
81
|
```
|
|
85
82
|
|
|
86
|
-
|
|
83
|
+
Running without arguments opens an interactive selector (install all or pick specific ones).
|
|
84
|
+
|
|
85
|
+
After install, `design-system.json` tracks each component with its version and full history:
|
|
86
|
+
|
|
87
|
+
```json
|
|
88
|
+
{
|
|
89
|
+
"components": {
|
|
90
|
+
"Button": {
|
|
91
|
+
"version": "1.1.0",
|
|
92
|
+
"status": "stable",
|
|
93
|
+
"type": "folder",
|
|
94
|
+
"installedAt": "2025-05-10T12:00:00.000Z",
|
|
95
|
+
"updatedAt": "2025-05-17T09:30:00.000Z",
|
|
96
|
+
"history": [
|
|
97
|
+
{ "version": "1.0.0", "action": "install", "date": "2025-05-10T12:00:00.000Z" },
|
|
98
|
+
{ "version": "1.1.0", "action": "update", "date": "2025-05-17T09:30:00.000Z" }
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
```
|
|
87
104
|
|
|
88
105
|
---
|
|
89
106
|
|
|
90
107
|
### `update`
|
|
91
108
|
|
|
92
|
-
|
|
109
|
+
Updates installed components to the latest version from the registry.
|
|
93
110
|
|
|
94
111
|
```bash
|
|
95
112
|
npx @smart-coder-labs/apple-design-system update
|
|
113
|
+
npx @smart-coder-labs/apple-design-system update Button Card
|
|
96
114
|
```
|
|
97
115
|
|
|
98
116
|
---
|
|
99
117
|
|
|
100
|
-
|
|
118
|
+
### `rollback`
|
|
101
119
|
|
|
102
|
-
|
|
103
|
-
- 🌓 **Dark Mode Completo** - Soporte automático para modo oscuro
|
|
104
|
-
- ⚡ **Animaciones Fluidas** - Springs suaves y transiciones elegantes con Framer Motion
|
|
105
|
-
- ♿ **Accesibilidad** - Componentes accesibles y semánticos
|
|
106
|
-
- 🎯 **TypeScript** - Completamente tipado
|
|
107
|
-
- 📱 **Responsive** - Diseñado para todos los dispositivos
|
|
108
|
-
- 🎭 **Personalizable** - Tokens configurables fácilmente
|
|
120
|
+
Rolls back a component to any previously published version. Uses the exact git SHA recorded in the registry — no manual tagging required.
|
|
109
121
|
|
|
110
|
-
|
|
122
|
+
```bash
|
|
123
|
+
npx @smart-coder-labs/apple-design-system rollback Button 1.0.0
|
|
124
|
+
```
|
|
111
125
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
### 🧩 Componentes
|
|
115
|
-
|
|
116
|
-
| Componente | Descripción | Tecnología |
|
|
117
|
-
|------------|-------------|------------|
|
|
118
|
-
| **Button** | Botones con animaciones suaves | Framer Motion |
|
|
119
|
-
| **Card** | Tarjetas con efectos glass | Framer Motion |
|
|
120
|
-
| **Input** | Inputs con focus elegante | Framer Motion |
|
|
121
|
-
| **Modal** | Modales con animación VisionOS | Framer Motion |
|
|
122
|
-
| **Dropdown** | Menús desplegables | Framer Motion |
|
|
123
|
-
| **Tooltip** | Tooltips pequeños y elegantes | Framer Motion |
|
|
124
|
-
| **Tabs** | Segmented control iOS/macOS | Framer Motion |
|
|
125
|
-
| **Switch** | Toggle iOS con spring | Framer Motion |
|
|
126
|
-
| **Badge** | Indicadores de estado | Framer Motion |
|
|
127
|
-
| **NumberInput** | Input numérico con controles | Framer Motion |
|
|
128
|
-
| **Select** | Select nativo estilizado | Framer Motion |
|
|
129
|
-
| **Checkbox** | Checkbox animado | Framer Motion |
|
|
130
|
-
| **Textarea** | Area de texto expandible | Framer Motion |
|
|
131
|
-
| **Label** | Etiquetas accesibles | HTML/CSS |
|
|
132
|
-
| **NavBar** | Navegación minimal | Framer Motion |
|
|
133
|
-
| **Calendar** | Calendario completo | React Day Picker |
|
|
134
|
-
| **DataGrid** | Tabla avanzada con filtros | TanStack Table |
|
|
135
|
-
| **Kanban** | Tablero Trello-like | Dnd Kit |
|
|
136
|
-
| **Sheet** | Panel lateral deslizante | Framer Motion |
|
|
137
|
-
| **Command** | Menú de comandos (CMD+K) | CMDK |
|
|
138
|
-
| **Popover** | Contenido flotante | Framer Motion |
|
|
139
|
-
| **Toast** | Notificaciones tostada | Sonner |
|
|
140
|
-
|
|
141
|
-
### 🎨 Tokens Completos
|
|
142
|
-
|
|
143
|
-
- ✅ Colores (light/dark)
|
|
144
|
-
- ✅ Tipografía
|
|
145
|
-
- ✅ Espaciado
|
|
146
|
-
- ✅ Border Radius
|
|
147
|
-
- ✅ Sombras
|
|
148
|
-
- ✅ Blur
|
|
149
|
-
- ✅ Animaciones
|
|
150
|
-
- ✅ Breakpoints
|
|
151
|
-
|
|
152
|
-
### 📚 Documentación Extensa
|
|
153
|
-
|
|
154
|
-
- ✅ README completo
|
|
155
|
-
- ✅ Guía de inicio rápido
|
|
156
|
-
- ✅ Decisiones de diseño explicadas
|
|
157
|
-
- ✅ 50+ ejemplos de código
|
|
158
|
-
- ✅ Estructura del proyecto
|
|
159
|
-
- ✅ Índice general
|
|
126
|
+
The CLI reads the version history from the registry, finds the git SHA for that version, and fetches the component files from that specific commit.
|
|
160
127
|
|
|
161
128
|
---
|
|
162
129
|
|
|
163
|
-
|
|
130
|
+
### `status`
|
|
164
131
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
Ejecuta el comando `init` para configurar automáticamente tu entorno:
|
|
132
|
+
Shows installed components, their versions, and whether they are outdated.
|
|
168
133
|
|
|
169
134
|
```bash
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
Esto descargará los estilos base a `styles/apple-ds.css` y configurará las utilidades necesarias.
|
|
174
|
-
|
|
175
|
-
### 2. Usar en tu proyecto
|
|
135
|
+
# Overview table for all tracked components
|
|
136
|
+
npx @smart-coder-labs/apple-design-system status
|
|
176
137
|
|
|
177
|
-
|
|
178
|
-
npx @smart-coder-labs/apple-design-system
|
|
138
|
+
# Full detail for one component
|
|
139
|
+
npx @smart-coder-labs/apple-design-system status Button
|
|
179
140
|
```
|
|
180
141
|
|
|
181
|
-
|
|
182
|
-
import { Button } from "@/components/ui/Button";
|
|
183
|
-
|
|
184
|
-
function App() {
|
|
185
|
-
return (
|
|
186
|
-
<Button variant="primary">Submit</Button>
|
|
187
|
-
);
|
|
188
|
-
}
|
|
142
|
+
**Table output:**
|
|
189
143
|
```
|
|
144
|
+
Registry version: 1.3.1
|
|
190
145
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
### Button
|
|
198
|
-
|
|
199
|
-
```tsx
|
|
200
|
-
<Button variant="primary" size="md">
|
|
201
|
-
Click me
|
|
202
|
-
</Button>
|
|
146
|
+
Component Installed Latest Status Outdated
|
|
147
|
+
────────────────────────────────────────────────────────────────────────────────────
|
|
148
|
+
Button 1.0.0 1.1.0 stable yes
|
|
149
|
+
Card 1.1.0 1.1.0 stable no
|
|
150
|
+
AnimatedCounter 1.0.0 1.0.0 beta no
|
|
203
151
|
```
|
|
204
152
|
|
|
205
|
-
**
|
|
206
|
-
**Tamaños:** `sm` | `md` | `lg`
|
|
207
|
-
**Estados:** `loading` | `disabled`
|
|
208
|
-
|
|
209
|
-
### Card
|
|
210
|
-
|
|
211
|
-
```tsx
|
|
212
|
-
<Card variant="glass" hoverable>
|
|
213
|
-
<CardHeader>
|
|
214
|
-
<CardTitle>Title</CardTitle>
|
|
215
|
-
</CardHeader>
|
|
216
|
-
<CardContent>Content</CardContent>
|
|
217
|
-
</Card>
|
|
153
|
+
**Detail output:**
|
|
218
154
|
```
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
<ModalTitle>Title</ModalTitle>
|
|
228
|
-
</ModalHeader>
|
|
229
|
-
<ModalContent>Content</ModalContent>
|
|
230
|
-
</Modal>
|
|
155
|
+
Button
|
|
156
|
+
Installed version : 1.0.0
|
|
157
|
+
Registry version : 1.1.0
|
|
158
|
+
Status : stable
|
|
159
|
+
Installed at : 2025-05-10T12:00:00.000Z
|
|
160
|
+
Last updated : 2025-05-10T12:00:00.000Z
|
|
161
|
+
History:
|
|
162
|
+
install v1.0.0 2025-05-10T12:00:00.000Z
|
|
231
163
|
```
|
|
232
164
|
|
|
233
|
-
**Animación VisionOS-like con backdrop blur**
|
|
234
|
-
|
|
235
|
-
**[📖 Ver todos los componentes →](./EXAMPLES.md)**
|
|
236
|
-
|
|
237
|
-
---
|
|
238
|
-
|
|
239
|
-
## 🎨 Demo
|
|
240
|
-
|
|
241
|
-
Explora nuestra demostración interactiva de Storybook con una Landing Page completa construida con nuestro Sistema de Diseño. Experimenta el cambio de modo oscuro, diseño responsivo y varios componentes de UI en acción.
|
|
242
|
-
|
|
243
|
-
**[🎬 Ver demo completa →](https://smart-coder-labs.github.io/design-system/?path=/story/pages-landing-page--business-landing)**
|
|
244
|
-
|
|
245
165
|
---
|
|
246
166
|
|
|
247
|
-
##
|
|
167
|
+
## Component Architecture
|
|
248
168
|
|
|
249
|
-
|
|
169
|
+
Each component lives in its own folder under `components/ui/`:
|
|
250
170
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
171
|
+
```
|
|
172
|
+
components/ui/
|
|
173
|
+
└── Button/
|
|
174
|
+
├── Button.tsx # Component implementation
|
|
175
|
+
├── Button.types.ts # TypeScript interfaces and types
|
|
176
|
+
├── Button.styles.ts # Tailwind variant definitions
|
|
177
|
+
├── index.ts # Barrel export
|
|
178
|
+
└── CHANGELOG.md # Per-component changelog
|
|
179
|
+
```
|
|
256
180
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
| **[EXAMPLES.md](./EXAMPLES.md)** | 📖 50+ ejemplos de código |
|
|
263
|
-
| **[DESIGN_DECISIONS.md](./DESIGN_DECISIONS.md)** | 🎨 Decisiones de diseño explicadas |
|
|
264
|
-
| **[PROJECT_STRUCTURE.md](./PROJECT_STRUCTURE.md)** | 📂 Estructura del proyecto |
|
|
265
|
-
| **[SUMMARY.md](./SUMMARY.md)** | 📊 Resumen ejecutivo |
|
|
181
|
+
This structure means:
|
|
182
|
+
- You import from `@/components/ui/Button` — clean, no deep paths
|
|
183
|
+
- Each file has a single responsibility
|
|
184
|
+
- Types are co-located and always up to date
|
|
185
|
+
- You can edit any piece without touching the others
|
|
266
186
|
|
|
267
187
|
---
|
|
268
188
|
|
|
269
|
-
##
|
|
189
|
+
## Component Versioning
|
|
270
190
|
|
|
271
|
-
|
|
272
|
-
- Espacio negativo amplio
|
|
273
|
-
- Elementos esenciales solamente
|
|
274
|
-
- Sin decoraciones innecesarias
|
|
191
|
+
Each component in the registry is versioned independently from the CLI package. A change to `Button` only bumps `Button`'s version — untouched components stay at their current version.
|
|
275
192
|
|
|
276
|
-
###
|
|
277
|
-
- Bordes suaves (12-20px)
|
|
278
|
-
- Sombras sutiles
|
|
279
|
-
- Transiciones fluidas (160-260ms)
|
|
193
|
+
### Registry schema
|
|
280
194
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
195
|
+
```json
|
|
196
|
+
{
|
|
197
|
+
"Button": {
|
|
198
|
+
"version": "1.1.0",
|
|
199
|
+
"status": "stable",
|
|
200
|
+
"added": "1.0.0",
|
|
201
|
+
"breakingChanges": [],
|
|
202
|
+
"history": [
|
|
203
|
+
{ "version": "1.0.0", "sha": "abc123f", "files": ["Button.tsx", "Button.types.ts", "Button.styles.ts", "index.ts"] },
|
|
204
|
+
{ "version": "1.1.0", "sha": "d9f3a12", "files": ["Button.tsx", "Button.types.ts", "Button.styles.ts", "index.ts"] }
|
|
205
|
+
],
|
|
206
|
+
"dependencies": ["framer-motion"],
|
|
207
|
+
"files": [...]
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
```
|
|
285
211
|
|
|
286
|
-
|
|
212
|
+
### Stability tags
|
|
287
213
|
|
|
288
|
-
|
|
214
|
+
| Status | Meaning |
|
|
215
|
+
|--------|---------|
|
|
216
|
+
| `stable` | Production-ready. Breaking changes are documented. |
|
|
217
|
+
| `beta` | Functional but API may have minor changes. |
|
|
218
|
+
| `experimental` | New feature under active development. |
|
|
289
219
|
|
|
290
|
-
|
|
220
|
+
### Automatic version bumps
|
|
291
221
|
|
|
292
|
-
|
|
293
|
-
import { Switch } from '@smart-coder-labs/apple-design-system';
|
|
222
|
+
The registry is updated automatically on every push to `main` via GitHub Actions. The bump type is derived from the commit message using [Conventional Commits](https://www.conventionalcommits.org/):
|
|
294
223
|
|
|
295
|
-
|
|
224
|
+
| Commit type | Bump |
|
|
225
|
+
|-------------|------|
|
|
226
|
+
| `fix:`, `chore:`, `refactor:` | patch — `1.0.0 → 1.0.1` |
|
|
227
|
+
| `feat:` | minor — `1.0.0 → 1.1.0` |
|
|
228
|
+
| `feat!:` or `BREAKING CHANGE` in body | major — `1.0.0 → 2.0.0` |
|
|
296
229
|
|
|
297
|
-
|
|
298
|
-
document.documentElement.classList.toggle('dark', darkMode);
|
|
299
|
-
}, [darkMode]);
|
|
300
|
-
|
|
301
|
-
<Switch
|
|
302
|
-
checked={darkMode}
|
|
303
|
-
onCheckedChange={setDarkMode}
|
|
304
|
-
label="Dark Mode"
|
|
305
|
-
/>
|
|
306
|
-
```
|
|
230
|
+
Only components whose files changed in that commit are bumped.
|
|
307
231
|
|
|
308
232
|
---
|
|
309
233
|
|
|
310
|
-
##
|
|
234
|
+
## Quick Start
|
|
311
235
|
|
|
312
|
-
|
|
236
|
+
```bash
|
|
237
|
+
# 1. Initialize your project
|
|
238
|
+
npx @smart-coder-labs/apple-design-system init
|
|
313
239
|
|
|
314
|
-
|
|
315
|
-
|
|
240
|
+
# 2. Add components
|
|
241
|
+
npx @smart-coder-labs/apple-design-system add Button Card Modal
|
|
316
242
|
|
|
317
|
-
|
|
318
|
-
...tokens,
|
|
319
|
-
colors: {
|
|
320
|
-
...tokens.colors,
|
|
321
|
-
light: {
|
|
322
|
-
...tokens.colors.light,
|
|
323
|
-
accent: {
|
|
324
|
-
blue: '#0066CC', // Tu color
|
|
325
|
-
},
|
|
326
|
-
},
|
|
327
|
-
},
|
|
328
|
-
};
|
|
243
|
+
# 3. Use them
|
|
329
244
|
```
|
|
330
245
|
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
## 📊 Estadísticas
|
|
246
|
+
```tsx
|
|
247
|
+
import { Button } from "@/components/ui/Button";
|
|
248
|
+
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
|
336
249
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
250
|
+
function App() {
|
|
251
|
+
return (
|
|
252
|
+
<Card variant="glass" hoverable>
|
|
253
|
+
<CardHeader>Getting started</CardHeader>
|
|
254
|
+
<CardContent>
|
|
255
|
+
<Button variant="primary">Click me</Button>
|
|
256
|
+
</CardContent>
|
|
257
|
+
</Card>
|
|
258
|
+
);
|
|
259
|
+
}
|
|
343
260
|
```
|
|
344
261
|
|
|
345
262
|
---
|
|
346
263
|
|
|
347
|
-
##
|
|
264
|
+
## Components
|
|
348
265
|
|
|
349
|
-
|
|
350
|
-
- **TypeScript** 5+ - Type Safety
|
|
351
|
-
- **Framer Motion** 12+ - Animaciones
|
|
352
|
-
- **Tailwind CSS** 4+ - Estilos
|
|
353
|
-
- **PostCSS** - Procesamiento CSS
|
|
266
|
+
214 components across all UI categories. A few highlights:
|
|
354
267
|
|
|
355
|
-
|
|
268
|
+
| Component | Description | Notes |
|
|
269
|
+
|-----------|-------------|-------|
|
|
270
|
+
| **Button** | Animated buttons | 4 variants, loading state |
|
|
271
|
+
| **Card** | Glass and elevated cards | Compound component |
|
|
272
|
+
| **Modal** | VisionOS-style dialogs | Backdrop blur, spring animation |
|
|
273
|
+
| **DataGrid** | Advanced table with filters | TanStack Table |
|
|
274
|
+
| **Command** | CMD+K command palette | CMDK |
|
|
275
|
+
| **Kanban** | Drag-and-drop board | Dnd Kit |
|
|
276
|
+
| **Calendar** | Full calendar | React Day Picker |
|
|
277
|
+
| **SearchInput** | Search with dropdown | Compound component |
|
|
278
|
+
| **Tabs** | iOS segmented control | Framer Motion |
|
|
279
|
+
| **Switch** | iOS toggle with spring | Framer Motion |
|
|
356
280
|
|
|
357
|
-
|
|
281
|
+
All 214 components are documented in Storybook with interactive examples.
|
|
358
282
|
|
|
359
|
-
|
|
360
|
-
✅ Navegación por teclado
|
|
361
|
-
✅ Focus visible
|
|
362
|
-
✅ ARIA labels
|
|
363
|
-
✅ Touch targets 40x40px
|
|
364
|
-
✅ Screen reader friendly
|
|
283
|
+
**[View all components in Storybook →](https://smart-coder-labs.github.io/design-system/)**
|
|
365
284
|
|
|
366
285
|
---
|
|
367
286
|
|
|
368
|
-
##
|
|
369
|
-
|
|
370
|
-
Todos los componentes son responsive por defecto.
|
|
287
|
+
## Tailwind Setup
|
|
371
288
|
|
|
372
|
-
|
|
373
|
-
- `sm`: 640px
|
|
374
|
-
- `md`: 768px
|
|
375
|
-
- `lg`: 1024px
|
|
376
|
-
- `xl`: 1280px
|
|
377
|
-
- `2xl`: 1536px
|
|
289
|
+
The package exports a Tailwind preset that must be included in consuming projects:
|
|
378
290
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
291
|
+
```js
|
|
292
|
+
// tailwind.config.js
|
|
293
|
+
import preset from '@smart-coder-labs/apple-design-system/tailwind.preset';
|
|
382
294
|
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
-
|
|
388
|
-
|
|
295
|
+
export default {
|
|
296
|
+
presets: [preset],
|
|
297
|
+
content: [
|
|
298
|
+
'./src/**/*.{js,ts,jsx,tsx}',
|
|
299
|
+
'./node_modules/@smart-coder-labs/apple-design-system/dist/**/*.js',
|
|
300
|
+
],
|
|
301
|
+
};
|
|
302
|
+
```
|
|
389
303
|
|
|
390
304
|
---
|
|
391
305
|
|
|
392
|
-
##
|
|
306
|
+
## Dark Mode
|
|
393
307
|
|
|
394
|
-
```
|
|
395
|
-
|
|
396
|
-
├── 📄 Documentación (7 archivos)
|
|
397
|
-
├── 🎨 Configuración (tokens, tailwind, globals)
|
|
398
|
-
├── 🧩 Componentes (10 componentes)
|
|
399
|
-
├── 📦 Package.json
|
|
400
|
-
└── 🎬 DemoPage.tsx
|
|
401
|
-
```
|
|
402
|
-
|
|
403
|
-
**[📂 Ver estructura completa →](./PROJECT_STRUCTURE.md)**
|
|
308
|
+
```tsx
|
|
309
|
+
const [dark, setDark] = useState(false);
|
|
404
310
|
|
|
405
|
-
|
|
311
|
+
useEffect(() => {
|
|
312
|
+
document.documentElement.classList.toggle('dark', dark);
|
|
313
|
+
}, [dark]);
|
|
406
314
|
|
|
407
|
-
|
|
315
|
+
<Switch checked={dark} onCheckedChange={setDark} label="Dark Mode" />
|
|
316
|
+
```
|
|
408
317
|
|
|
409
|
-
|
|
410
|
-
2. **[🚀 Instalación rápida](./QUICKSTART.md)** - 5 minutos
|
|
411
|
-
3. **[📖 Copia ejemplos](./EXAMPLES.md)** - Código listo
|
|
412
|
-
4. **[🎨 Personaliza](./README.md)** - Hazlo tuyo
|
|
413
|
-
5. **[🎬 Ve la demo](./DemoPage.tsx)** - Inspiración
|
|
318
|
+
All components adapt automatically via Tailwind's `dark:` classes and design tokens.
|
|
414
319
|
|
|
415
320
|
---
|
|
416
321
|
|
|
417
|
-
##
|
|
418
|
-
|
|
419
|
-
Este design system está inspirado en:
|
|
322
|
+
## Accessibility
|
|
420
323
|
|
|
421
|
-
-
|
|
422
|
-
-
|
|
423
|
-
-
|
|
424
|
-
-
|
|
324
|
+
- WCAG 2.1 AA
|
|
325
|
+
- Full keyboard navigation
|
|
326
|
+
- Visible focus indicators
|
|
327
|
+
- ARIA labels throughout
|
|
328
|
+
- Touch targets 40×40px minimum
|
|
329
|
+
- Built on Radix UI primitives
|
|
425
330
|
|
|
426
331
|
---
|
|
427
332
|
|
|
428
|
-
##
|
|
333
|
+
## Migration
|
|
429
334
|
|
|
430
|
-
###
|
|
335
|
+
### From v1.0.2 or earlier
|
|
431
336
|
|
|
432
|
-
|
|
337
|
+
From **v1.0.3**, the Tailwind preset is required. Update your config as shown in [Tailwind Setup](#tailwind-setup) and reinstall:
|
|
433
338
|
|
|
434
339
|
```bash
|
|
435
340
|
npm install -D @smart-coder-labs/apple-design-system@latest
|
|
436
341
|
```
|
|
437
342
|
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
```javascript
|
|
441
|
-
import preset from '@smart-coder-labs/apple-design-system/tailwind.preset';
|
|
442
|
-
|
|
443
|
-
export default {
|
|
444
|
-
presets: [preset],
|
|
445
|
-
content: [
|
|
446
|
-
'./src/**/*.{js,ts,jsx,tsx}',
|
|
447
|
-
'./node_modules/@smart-coder-labs/apple-design-system/**/*.{js,ts,jsx,tsx}',
|
|
448
|
-
],
|
|
449
|
-
};
|
|
450
|
-
```
|
|
451
|
-
|
|
452
|
-
**[📖 Ver guía completa de migración →](./MIGRATION.md)**
|
|
343
|
+
**[Full migration guide →](./MIGRATION.md)**
|
|
453
344
|
|
|
454
345
|
---
|
|
455
346
|
|
|
456
|
-
##
|
|
347
|
+
## License
|
|
457
348
|
|
|
458
349
|
MIT © 2025
|
|
459
|
-
|
|
460
|
-
---
|
|
461
|
-
|
|
462
|
-
## 🙏 Agradecimientos
|
|
463
|
-
|
|
464
|
-
Construido con:
|
|
465
|
-
- [Framer Motion](https://www.framer.com/motion/)
|
|
466
|
-
- [Tailwind CSS](https://tailwindcss.com/)
|
|
467
|
-
- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
|
|
468
|
-
|
|
469
|
-
---
|
|
470
|
-
|
|
471
|
-
<div align="center">
|
|
472
|
-
|
|
473
|
-
**Hecho con ❤️ e IA inspirado en Apple**
|
|
474
|
-
|
|
475
|
-
[⬆ Volver arriba](#-apple-creative-design-system)
|
|
476
|
-
|
|
477
|
-
</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rollback.d.ts","sourceRoot":"","sources":["../../../cli/commands/rollback.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ,GAAU,WAAW,MAAM,EAAE,SAAS,MAAM,kBA2BhE,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.rollback = void 0;
|
|
7
|
+
const path_1 = __importDefault(require("path"));
|
|
8
|
+
const fs_extra_1 = __importDefault(require("fs-extra"));
|
|
9
|
+
const chalk_1 = __importDefault(require("chalk"));
|
|
10
|
+
const ora_1 = __importDefault(require("ora"));
|
|
11
|
+
const registry_1 = require("../utils/registry");
|
|
12
|
+
const config_1 = require("../utils/config");
|
|
13
|
+
const rollback = async (component, version) => {
|
|
14
|
+
const config = await (0, config_1.loadConfig)();
|
|
15
|
+
const spinner = (0, ora_1.default)(`Fetching component ${component}@${version}...`).start();
|
|
16
|
+
const files = await (0, registry_1.getComponentFilesAtVersion)(component, version);
|
|
17
|
+
if (!files) {
|
|
18
|
+
spinner.fail(`Version ${version} of ${component} not found. Make sure that version exists as a git tag (v${version}).`);
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const componentDir = path_1.default.resolve(process.cwd(), config.componentsDir, component);
|
|
22
|
+
await fs_extra_1.default.ensureDir(componentDir);
|
|
23
|
+
for (const file of files) {
|
|
24
|
+
const content = config.rsc ? file.content : (0, config_1.stripUseClient)(file.content);
|
|
25
|
+
await fs_extra_1.default.writeFile(path_1.default.join(componentDir, file.name), content);
|
|
26
|
+
}
|
|
27
|
+
await (0, config_1.recordInstall)(config, component, version, "folder", "rollback");
|
|
28
|
+
await (0, config_1.saveConfig)(config);
|
|
29
|
+
spinner.succeed(chalk_1.default.green(`Rolled back ${component} to v${version}`));
|
|
30
|
+
};
|
|
31
|
+
exports.rollback = rollback;
|
|
32
|
+
//# sourceMappingURL=rollback.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rollback.js","sourceRoot":"","sources":["../../../cli/commands/rollback.ts"],"names":[],"mappings":";;;;;;AAAA,gDAAwB;AACxB,wDAA0B;AAC1B,kDAA0B;AAC1B,8CAAsB;AACtB,gDAA+D;AAC/D,4CAAwF;AAEjF,MAAM,QAAQ,GAAG,KAAK,EAAE,SAAiB,EAAE,OAAe,EAAE,EAAE;IACnE,MAAM,MAAM,GAAG,MAAM,IAAA,mBAAU,GAAE,CAAC;IAClC,MAAM,OAAO,GAAG,IAAA,aAAG,EAAC,sBAAsB,SAAS,IAAI,OAAO,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;IAE7E,MAAM,KAAK,GAAG,MAAM,IAAA,qCAA0B,EAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAEnE,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CACV,WAAW,OAAO,OAAO,SAAS,4DAA4D,OAAO,IAAI,CAC1G,CAAC;QACF,OAAO;IACT,CAAC;IAED,MAAM,YAAY,GAAG,cAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;IAClF,MAAM,kBAAE,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAEjC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAA,uBAAc,EAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACzE,MAAM,kBAAE,CAAC,SAAS,CAAC,cAAI,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC;IAED,MAAM,IAAA,sBAAa,EAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;IACtE,MAAM,IAAA,mBAAU,EAAC,MAAM,CAAC,CAAC;IAEzB,OAAO,CAAC,OAAO,CACb,eAAK,CAAC,KAAK,CAAC,eAAe,SAAS,QAAQ,OAAO,EAAE,CAAC,CACvD,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,QAAQ,YA2BnB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../cli/commands/status.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,GAAU,YAAY,MAAM,kBAqG9C,CAAC"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.status = void 0;
|
|
7
|
+
const chalk_1 = __importDefault(require("chalk"));
|
|
8
|
+
const config_1 = require("../utils/config");
|
|
9
|
+
const registry_1 = require("../utils/registry");
|
|
10
|
+
const status = async (component) => {
|
|
11
|
+
const config = await (0, config_1.loadConfig)();
|
|
12
|
+
const tracked = config.components;
|
|
13
|
+
if (Object.keys(tracked).length === 0) {
|
|
14
|
+
console.log(chalk_1.default.yellow("No components tracked in design-system.json."));
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if (component) {
|
|
18
|
+
// Single component detail view
|
|
19
|
+
const record = tracked[component];
|
|
20
|
+
if (!record) {
|
|
21
|
+
console.log(chalk_1.default.red(`Component '${component}' is not tracked in design-system.json.`));
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
const meta = await (0, registry_1.getComponentMeta)(component);
|
|
25
|
+
console.log();
|
|
26
|
+
console.log(chalk_1.default.bold(`${component}`));
|
|
27
|
+
console.log(` Installed version : ${chalk_1.default.cyan(record.version)}`);
|
|
28
|
+
console.log(` Registry version : ${meta ? chalk_1.default.cyan(meta.version) : chalk_1.default.gray("unknown")}`);
|
|
29
|
+
console.log(` Status : ${formatStatus(record.status)}`);
|
|
30
|
+
console.log(` Type : ${record.type}`);
|
|
31
|
+
console.log(` Installed at : ${record.installedAt}`);
|
|
32
|
+
console.log(` Last updated : ${record.updatedAt}`);
|
|
33
|
+
if (meta?.breakingChanges && meta.breakingChanges.length > 0) {
|
|
34
|
+
console.log(` Breaking changes :`);
|
|
35
|
+
for (const bc of meta.breakingChanges) {
|
|
36
|
+
console.log(` - ${chalk_1.default.yellow(bc)}`);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
if (record.history && record.history.length > 0) {
|
|
40
|
+
console.log(` History:`);
|
|
41
|
+
for (const entry of record.history) {
|
|
42
|
+
const actionColor = entry.action === "rollback"
|
|
43
|
+
? chalk_1.default.yellow
|
|
44
|
+
: entry.action === "install"
|
|
45
|
+
? chalk_1.default.green
|
|
46
|
+
: chalk_1.default.blue;
|
|
47
|
+
console.log(` ${actionColor(entry.action.padEnd(8))} v${entry.version} ${chalk_1.default.gray(entry.date)}`);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
console.log();
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
// Table view for all tracked components
|
|
54
|
+
const registryVersion = await (0, registry_1.getRegistryVersion)();
|
|
55
|
+
// Fetch registry meta for all components at once
|
|
56
|
+
const metaMap = new Map();
|
|
57
|
+
await Promise.all(Object.keys(tracked).map(async (name) => {
|
|
58
|
+
const meta = await (0, registry_1.getComponentMeta)(name);
|
|
59
|
+
metaMap.set(name, meta);
|
|
60
|
+
}));
|
|
61
|
+
console.log();
|
|
62
|
+
console.log(chalk_1.default.bold(`Registry version: ${chalk_1.default.cyan(registryVersion)}`));
|
|
63
|
+
console.log();
|
|
64
|
+
// Header
|
|
65
|
+
const nameW = 36;
|
|
66
|
+
const verW = 12;
|
|
67
|
+
const latestW = 12;
|
|
68
|
+
const statusW = 14;
|
|
69
|
+
const header = chalk_1.default.bold("Component".padEnd(nameW)) +
|
|
70
|
+
chalk_1.default.bold("Installed".padEnd(verW)) +
|
|
71
|
+
chalk_1.default.bold("Latest".padEnd(latestW)) +
|
|
72
|
+
chalk_1.default.bold("Status".padEnd(statusW)) +
|
|
73
|
+
chalk_1.default.bold("Outdated");
|
|
74
|
+
console.log(header);
|
|
75
|
+
console.log("─".repeat(nameW + verW + latestW + statusW + 8));
|
|
76
|
+
for (const [name, record] of Object.entries(tracked)) {
|
|
77
|
+
const meta = metaMap.get(name);
|
|
78
|
+
const registryVer = meta?.version ?? "unknown";
|
|
79
|
+
const isOutdated = registryVer !== "unknown" && record.version !== registryVer;
|
|
80
|
+
const outdatedLabel = isOutdated ? chalk_1.default.yellow("yes") : chalk_1.default.green("no");
|
|
81
|
+
const nameLabel = isOutdated ? chalk_1.default.yellow(name.padEnd(nameW)) : name.padEnd(nameW);
|
|
82
|
+
const row = nameLabel +
|
|
83
|
+
chalk_1.default.cyan(record.version.padEnd(verW)) +
|
|
84
|
+
chalk_1.default.cyan(registryVer.padEnd(latestW)) +
|
|
85
|
+
formatStatus(record.status).padEnd(statusW + 10) + // +10 for chalk escape codes
|
|
86
|
+
outdatedLabel;
|
|
87
|
+
console.log(row);
|
|
88
|
+
}
|
|
89
|
+
console.log();
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
exports.status = status;
|
|
93
|
+
function formatStatus(status) {
|
|
94
|
+
switch (status) {
|
|
95
|
+
case "stable":
|
|
96
|
+
return chalk_1.default.green(status);
|
|
97
|
+
case "beta":
|
|
98
|
+
return chalk_1.default.yellow(status);
|
|
99
|
+
case "experimental":
|
|
100
|
+
return chalk_1.default.red(status);
|
|
101
|
+
default:
|
|
102
|
+
return chalk_1.default.gray(status ?? "unknown");
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
//# sourceMappingURL=status.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"status.js","sourceRoot":"","sources":["../../../cli/commands/status.ts"],"names":[],"mappings":"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"}
|
package/dist/cli/index.js
CHANGED
|
@@ -6,6 +6,8 @@ const init_1 = require("./commands/init");
|
|
|
6
6
|
const add_1 = require("./commands/add");
|
|
7
7
|
const update_1 = require("./commands/update");
|
|
8
8
|
const update_components_1 = require("./commands/update-components");
|
|
9
|
+
const rollback_1 = require("./commands/rollback");
|
|
10
|
+
const status_1 = require("./commands/status");
|
|
9
11
|
const program = new commander_1.Command();
|
|
10
12
|
program
|
|
11
13
|
.name("apple-design-system")
|
|
@@ -29,5 +31,16 @@ program
|
|
|
29
31
|
.command("update-components")
|
|
30
32
|
.description("Interactively update components from the design system (with UI selection)")
|
|
31
33
|
.action(() => (0, update_components_1.updateComponents)());
|
|
34
|
+
program
|
|
35
|
+
.command("rollback")
|
|
36
|
+
.description("Roll back a component to a previous version")
|
|
37
|
+
.argument("<component>", "Component name")
|
|
38
|
+
.argument("<version>", "Target version (must exist as git tag v{version})")
|
|
39
|
+
.action((component, version) => (0, rollback_1.rollback)(component, version));
|
|
40
|
+
program
|
|
41
|
+
.command("status")
|
|
42
|
+
.description("Show installed component versions and their status")
|
|
43
|
+
.argument("[component]", "Component name (optional)")
|
|
44
|
+
.action((component) => (0, status_1.status)(component));
|
|
32
45
|
program.parse();
|
|
33
46
|
//# sourceMappingURL=index.js.map
|
package/dist/cli/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../cli/index.ts"],"names":[],"mappings":";;;AACA,yCAAoC;AACpC,0CAAuC;AACvC,wCAAqC;AACrC,8CAA2C;AAC3C,oEAAgE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../cli/index.ts"],"names":[],"mappings":";;;AACA,yCAAoC;AACpC,0CAAuC;AACvC,wCAAqC;AACrC,8CAA2C;AAC3C,oEAAgE;AAChE,kDAA+C;AAC/C,8CAA2C;AAE3C,MAAM,OAAO,GAAG,IAAI,mBAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,qBAAqB,CAAC;KAC3B,WAAW,CAAC,8DAA8D,CAAC;KAC3E,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,4CAA4C,CAAC;KACzD,MAAM,CAAC,WAAI,CAAC,CAAC;AAEhB,OAAO;KACJ,OAAO,CAAC,KAAK,CAAC;KACd,WAAW,CAAC,iCAAiC,CAAC;KAC9C,QAAQ,CAAC,iBAAiB,EAAE,uBAAuB,CAAC;KACpD,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,IAAA,SAAG,EAAC,UAAU,CAAC,CAAC,CAAC;AAE3C,OAAO;KACJ,OAAO,CAAC,QAAQ,CAAC;KACjB,WAAW,CAAC,mDAAmD,CAAC;KAChE,QAAQ,CAAC,iBAAiB,EAAE,0BAA0B,CAAC;KACvD,MAAM,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,IAAA,eAAM,EAAC,UAAU,CAAC,CAAC,CAAC;AAE9C,OAAO;KACJ,OAAO,CAAC,mBAAmB,CAAC;KAC5B,WAAW,CAAC,4EAA4E,CAAC;KACzF,MAAM,CAAC,GAAG,EAAE,CAAC,IAAA,oCAAgB,GAAE,CAAC,CAAC;AAEpC,OAAO;KACJ,OAAO,CAAC,UAAU,CAAC;KACnB,WAAW,CAAC,6CAA6C,CAAC;KAC1D,QAAQ,CAAC,aAAa,EAAE,gBAAgB,CAAC;KACzC,QAAQ,CAAC,WAAW,EAAE,mDAAmD,CAAC;KAC1E,MAAM,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE,CAAC,IAAA,mBAAQ,EAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAEhE,OAAO;KACJ,OAAO,CAAC,QAAQ,CAAC;KACjB,WAAW,CAAC,oDAAoD,CAAC;KACjE,QAAQ,CAAC,aAAa,EAAE,2BAA2B,CAAC;KACpD,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,IAAA,eAAM,EAAC,SAAS,CAAC,CAAC,CAAC;AAE5C,OAAO,CAAC,KAAK,EAAE,CAAC"}
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
export interface ComponentRecord {
|
|
2
2
|
version: string;
|
|
3
|
+
status: "stable" | "beta" | "experimental";
|
|
3
4
|
type: "folder" | "flat";
|
|
4
5
|
installedAt: string;
|
|
5
6
|
updatedAt: string;
|
|
7
|
+
history: Array<{
|
|
8
|
+
version: string;
|
|
9
|
+
action: "install" | "update" | "rollback";
|
|
10
|
+
date: string;
|
|
11
|
+
}>;
|
|
6
12
|
}
|
|
7
13
|
import type { Framework } from "./framework";
|
|
8
14
|
export interface DesignSystemConfig {
|
|
@@ -20,7 +26,7 @@ export declare function saveConfig(config: DesignSystemConfig): Promise<void>;
|
|
|
20
26
|
* Used for non-RSC projects (Vite, Astro, Remix, Next.js Pages Router).
|
|
21
27
|
*/
|
|
22
28
|
export declare function stripUseClient(content: string): string;
|
|
23
|
-
export declare function recordInstall(config: DesignSystemConfig, componentName: string, version: string, type: "folder" | "flat"): Promise<DesignSystemConfig>;
|
|
29
|
+
export declare function recordInstall(config: DesignSystemConfig, componentName: string, version: string, type: "folder" | "flat", action?: "install" | "update" | "rollback", status?: "stable" | "beta" | "experimental"): Promise<DesignSystemConfig>;
|
|
24
30
|
/**
|
|
25
31
|
* Detect installed components from disk.
|
|
26
32
|
* Supports both folder structure (ComponentName/) and flat files (ComponentName.tsx).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../cli/utils/config.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../cli/utils/config.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAC;IAC3C,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;QAC1C,IAAI,EAAE,MAAM,CAAC;KACd,CAAC,CAAC;CACJ;AAED,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,oEAAoE;IACpE,GAAG,EAAE,OAAO,CAAC;IACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;CAC7C;AAUD,wBAAsB,UAAU,IAAI,OAAO,CAAC,kBAAkB,CAAC,CAY9D;AAED,wBAAsB,UAAU,CAAC,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAE1E;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAItD;AAED,wBAAsB,aAAa,CACjC,MAAM,EAAE,kBAAkB,EAC1B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,QAAQ,GAAG,MAAM,EACvB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,EAC1C,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,GAC1C,OAAO,CAAC,kBAAkB,CAAC,CAwB7B;AAED;;;;GAIG;AACH,wBAAsB,yBAAyB,CAC7C,qBAAqB,EAAE,MAAM,EAC7B,mBAAmB,EAAE,MAAM,EAAE,EAC7B,MAAM,EAAE,kBAAkB,GACzB,OAAO,CAAC,MAAM,EAAE,CAAC,CA8BnB"}
|
package/dist/cli/utils/config.js
CHANGED
|
@@ -43,14 +43,24 @@ function stripUseClient(content) {
|
|
|
43
43
|
.replace(/^['"]use client['"];?\s*\n?/m, "")
|
|
44
44
|
.trimStart();
|
|
45
45
|
}
|
|
46
|
-
async function recordInstall(config, componentName, version, type) {
|
|
46
|
+
async function recordInstall(config, componentName, version, type, action, status) {
|
|
47
47
|
const now = new Date().toISOString();
|
|
48
48
|
const existing = config.components[componentName];
|
|
49
|
+
// Auto-detect action if not provided
|
|
50
|
+
const resolvedAction = action ?? (existing ? "update" : "install");
|
|
51
|
+
const resolvedStatus = status ?? existing?.status ?? "stable";
|
|
52
|
+
// Preserve existing history array or initialize it
|
|
53
|
+
const existingHistory = existing?.history ?? [];
|
|
49
54
|
config.components[componentName] = {
|
|
50
55
|
version,
|
|
56
|
+
status: resolvedStatus,
|
|
51
57
|
type,
|
|
52
58
|
installedAt: existing?.installedAt ?? now,
|
|
53
59
|
updatedAt: now,
|
|
60
|
+
history: [
|
|
61
|
+
...existingHistory,
|
|
62
|
+
{ version, action: resolvedAction, date: now },
|
|
63
|
+
],
|
|
54
64
|
};
|
|
55
65
|
return config;
|
|
56
66
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../cli/utils/config.ts"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../cli/utils/config.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,6 +4,23 @@ export declare function getComponentFiles(componentName: string): Promise<Array<
|
|
|
4
4
|
name: string;
|
|
5
5
|
content: string;
|
|
6
6
|
}> | null>;
|
|
7
|
+
/**
|
|
8
|
+
* Fetches a component's files at a specific historical version using the SHA
|
|
9
|
+
* stored in the component's registry history.
|
|
10
|
+
*
|
|
11
|
+
* Falls back to candidate file names if the history entry has no `files` list
|
|
12
|
+
* (for entries created before the files field was added to history).
|
|
13
|
+
*/
|
|
14
|
+
export declare function getComponentFilesAtVersion(componentName: string, version: string): Promise<Array<{
|
|
15
|
+
name: string;
|
|
16
|
+
content: string;
|
|
17
|
+
}> | null>;
|
|
18
|
+
export declare function getComponentMeta(componentName: string): Promise<{
|
|
19
|
+
version: string;
|
|
20
|
+
status: string;
|
|
21
|
+
added: string;
|
|
22
|
+
breakingChanges: string[];
|
|
23
|
+
} | null>;
|
|
7
24
|
export declare function getComponentDependencies(componentName: string): Promise<string[]>;
|
|
8
25
|
export declare function getGlobalCss(): Promise<string | null>;
|
|
9
26
|
//# sourceMappingURL=registry.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../cli/utils/registry.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../cli/utils/registry.ts"],"names":[],"mappings":"AA+DA,wBAAsB,kBAAkB,IAAI,OAAO,CAAC,MAAM,CAAC,CAG1D;AAED,wBAAsB,sBAAsB,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC,CAGhE;AAED,wBAAsB,iBAAiB,CACrC,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,IAAI,CAAC,CAuB1D;AAED;;;;;;GAMG;AACH,wBAAsB,0BAA0B,CAC9C,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,IAAI,CAAC,CAmC1D;AAED,wBAAsB,gBAAgB,CACpC,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,eAAe,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,IAAI,CAAC,CAY/F;AAED,wBAAsB,wBAAwB,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAIvF;AAED,wBAAsB,YAAY,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAW3D"}
|
|
@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.getRegistryVersion = getRegistryVersion;
|
|
4
4
|
exports.getAvailableComponents = getAvailableComponents;
|
|
5
5
|
exports.getComponentFiles = getComponentFiles;
|
|
6
|
+
exports.getComponentFilesAtVersion = getComponentFilesAtVersion;
|
|
7
|
+
exports.getComponentMeta = getComponentMeta;
|
|
6
8
|
exports.getComponentDependencies = getComponentDependencies;
|
|
7
9
|
exports.getGlobalCss = getGlobalCss;
|
|
8
10
|
// Fetches from a remote JSON registry on GitHub Raw.
|
|
@@ -25,6 +27,19 @@ async function fetchRegistry() {
|
|
|
25
27
|
return {};
|
|
26
28
|
}
|
|
27
29
|
}
|
|
30
|
+
const GITHUB_RAW_BASE = "https://raw.githubusercontent.com/smart-coder-labs/design-system";
|
|
31
|
+
async function fetchFileAtSha(sha, filePath) {
|
|
32
|
+
const url = `${GITHUB_RAW_BASE}/${sha}/${filePath}`;
|
|
33
|
+
try {
|
|
34
|
+
const res = await fetch(url);
|
|
35
|
+
if (!res.ok)
|
|
36
|
+
return null;
|
|
37
|
+
return await res.text();
|
|
38
|
+
}
|
|
39
|
+
catch {
|
|
40
|
+
return null;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
28
43
|
async function getRegistryVersion() {
|
|
29
44
|
const registry = await fetchRegistry();
|
|
30
45
|
return registry._version ?? "unknown";
|
|
@@ -54,6 +69,50 @@ async function getComponentFiles(componentName) {
|
|
|
54
69
|
return null;
|
|
55
70
|
}
|
|
56
71
|
}
|
|
72
|
+
/**
|
|
73
|
+
* Fetches a component's files at a specific historical version using the SHA
|
|
74
|
+
* stored in the component's registry history.
|
|
75
|
+
*
|
|
76
|
+
* Falls back to candidate file names if the history entry has no `files` list
|
|
77
|
+
* (for entries created before the files field was added to history).
|
|
78
|
+
*/
|
|
79
|
+
async function getComponentFilesAtVersion(componentName, version) {
|
|
80
|
+
const registry = await fetchRegistry();
|
|
81
|
+
const component = registry[componentName];
|
|
82
|
+
if (!component)
|
|
83
|
+
return null;
|
|
84
|
+
const historyEntry = (component.history ?? []).find((h) => h.version === version);
|
|
85
|
+
if (!historyEntry?.sha) {
|
|
86
|
+
console.error(`No SHA found for ${componentName}@${version}. ` +
|
|
87
|
+
`Available versions: ${(component.history ?? []).map((h) => h.version).join(", ") || "none"}`);
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
const { sha } = historyEntry;
|
|
91
|
+
// Use stored file names if available, otherwise fall back to known candidates
|
|
92
|
+
const fileNames = historyEntry.files && historyEntry.files.length > 0
|
|
93
|
+
? historyEntry.files
|
|
94
|
+
: [`${componentName}.tsx`, `${componentName}.types.ts`, `${componentName}.styles.ts`, "index.ts"];
|
|
95
|
+
const results = [];
|
|
96
|
+
await Promise.all(fileNames.map(async (fileName) => {
|
|
97
|
+
const content = await fetchFileAtSha(sha, `components/ui/${componentName}/${fileName}`);
|
|
98
|
+
if (content !== null) {
|
|
99
|
+
results.push({ name: fileName, content });
|
|
100
|
+
}
|
|
101
|
+
}));
|
|
102
|
+
return results.length > 0 ? results : null;
|
|
103
|
+
}
|
|
104
|
+
async function getComponentMeta(componentName) {
|
|
105
|
+
const registry = await fetchRegistry();
|
|
106
|
+
const component = registry[componentName];
|
|
107
|
+
if (!component)
|
|
108
|
+
return null;
|
|
109
|
+
return {
|
|
110
|
+
version: component.version ?? "unknown",
|
|
111
|
+
status: component.status ?? "stable",
|
|
112
|
+
added: component.added ?? "unknown",
|
|
113
|
+
breakingChanges: component.breakingChanges ?? [],
|
|
114
|
+
};
|
|
115
|
+
}
|
|
57
116
|
async function getComponentDependencies(componentName) {
|
|
58
117
|
const registry = await fetchRegistry();
|
|
59
118
|
const component = registry[componentName];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../cli/utils/registry.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../cli/utils/registry.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@smart-coder-labs/apple-design-system",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "Design system completo estilo Apple (macOS/iOS/VisionOS) con Framer Motion",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"apple-design-system",
|
|
@@ -53,7 +53,10 @@
|
|
|
53
53
|
"test:ui": "vitest --ui",
|
|
54
54
|
"build": "npm run clean && tsc -p tsconfig.build.json",
|
|
55
55
|
"cli": "npm run build && node dist/cli/index.js",
|
|
56
|
-
"build:registry": "
|
|
56
|
+
"build:registry": "tsx scripts/build-registry.ts",
|
|
57
|
+
"bump-versions": "tsx scripts/bump-component-versions.ts",
|
|
58
|
+
"add-versions-to-readmes": "tsx scripts/add-version-to-readmes.ts",
|
|
59
|
+
"generate-changelogs": "tsx scripts/generate-changelogs.ts",
|
|
57
60
|
"prepublishOnly": "npm run build",
|
|
58
61
|
"storybook": "storybook dev -p 6006",
|
|
59
62
|
"build-storybook": "storybook build"
|
|
@@ -104,6 +107,7 @@
|
|
|
104
107
|
"tailwind-merge": "^3.4.0",
|
|
105
108
|
"tailwindcss": "^4.1.18",
|
|
106
109
|
"ts-node": "^10.9.2",
|
|
110
|
+
"tsx": "^4.22.1",
|
|
107
111
|
"typescript": "^5.3.3",
|
|
108
112
|
"vitest": "^4.1.5",
|
|
109
113
|
"vitest-axe": "^0.1.0",
|