ui-mathilde-web 0.9.5 → 0.10.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.
- package/README.md +261 -5
- package/dist/style.css +1 -1
- package/dist/ui-mathilde-web.d.ts +41 -0
- package/dist/ui-mathilde-web.js +14929 -14618
- package/dist/ui-mathilde-web.umd.cjs +68 -68
- package/package.json +10 -2
package/README.md
CHANGED
|
@@ -1,6 +1,262 @@
|
|
|
1
|
-
#
|
|
2
|
-
# UI Mathilde Web
|
|
3
|
-
# Author: Mathilde DEV
|
|
1
|
+
# 🎨 UI Mathilde Web
|
|
4
2
|
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
> **Librería de componentes React basada en Atomic Design**
|
|
4
|
+
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
[](https://storybook.js.org/)
|
|
7
|
+
[](https://reactjs.org/)
|
|
8
|
+
[](https://tailwindcss.com/)
|
|
9
|
+
|
|
10
|
+
**Autor:** Mathilde DEV
|
|
11
|
+
**Versión:** 0.9.5
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 📋 Tabla de Contenidos
|
|
16
|
+
|
|
17
|
+
- [Acerca del Proyecto](#-acerca-del-proyecto)
|
|
18
|
+
- [Tecnologías](#-tecnologías)
|
|
19
|
+
- [Instalación](#-instalación)
|
|
20
|
+
- [Scripts Disponibles](#-scripts-disponibles)
|
|
21
|
+
- [Arquitectura](#-arquitectura)
|
|
22
|
+
- [Documentación](#-documentación)
|
|
23
|
+
- [Para Nuevos Desarrolladores](#-para-nuevos-desarrolladores)
|
|
24
|
+
- [Changelog](#-changelog)
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## 🎯 Acerca del Proyecto
|
|
29
|
+
|
|
30
|
+
UI Mathilde Web es una librería de componentes React diseñada siguiendo el patrón **Atomic Design**, proporcionando componentes reutilizables, escalables y bien documentados.
|
|
31
|
+
|
|
32
|
+
### Estadísticas
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
📊 Total de Componentes: 242
|
|
36
|
+
├─ Átomos: 5
|
|
37
|
+
├─ Moléculas: 46
|
|
38
|
+
├─ Organismos: 33
|
|
39
|
+
└─ Templates: 2
|
|
40
|
+
|
|
41
|
+
📈 Métricas de Calidad:
|
|
42
|
+
├─ TypeScript: 98%
|
|
43
|
+
├─ Storybook: 14%
|
|
44
|
+
└─ Tests: 0%
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## 🛠️ Tecnologías
|
|
50
|
+
|
|
51
|
+
- ⚛️ **React 18** - Librería UI
|
|
52
|
+
- 📘 **TypeScript** - Tipado estático
|
|
53
|
+
- 🎨 **Tailwind CSS** - Framework de estilos
|
|
54
|
+
- 📚 **Storybook** - Documentación de componentes
|
|
55
|
+
- 🌸 **Flowbite React** - Base de componentes
|
|
56
|
+
- ⚡ **Vite** - Build tool
|
|
57
|
+
- 🏗️ **Atomic Design** - Patrón arquitectónico
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## 📦 Instalación
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
# Instalar dependencias
|
|
65
|
+
npm install
|
|
66
|
+
|
|
67
|
+
# Instalar la librería en otro proyecto
|
|
68
|
+
npm install ui-mathilde-web
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Uso en tu proyecto
|
|
72
|
+
|
|
73
|
+
```typescript
|
|
74
|
+
import { Button, InputForm, Card } from 'ui-mathilde-web';
|
|
75
|
+
import 'ui-mathilde-web/dist/style.css';
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
return (
|
|
79
|
+
<div>
|
|
80
|
+
<Button onClick={() => alert('¡Hola!')}>
|
|
81
|
+
Click me
|
|
82
|
+
</Button>
|
|
83
|
+
<Card title="Mi Card">
|
|
84
|
+
Contenido del card
|
|
85
|
+
</Card>
|
|
86
|
+
</div>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## 🚀 Scripts Disponibles
|
|
94
|
+
|
|
95
|
+
### Desarrollo
|
|
96
|
+
|
|
97
|
+
```bash
|
|
98
|
+
npm run dev # Inicia Vite dev server
|
|
99
|
+
npm run storybook # Inicia Storybook en puerto 6006
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Build
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
npm run build # Compila la librería para producción
|
|
106
|
+
npm run build-storybook # Compila Storybook estático
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Calidad de Código
|
|
110
|
+
|
|
111
|
+
```bash
|
|
112
|
+
npm run lint # Ejecuta ESLint
|
|
113
|
+
npm run lint:fix # Corrige errores automáticamente
|
|
114
|
+
npm run format # Formatea código con Prettier
|
|
115
|
+
npm run typecheck # Verifica tipos TypeScript
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Documentación (Nuevo ✨)
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
npm run docs:generate # Genera documentación automática
|
|
122
|
+
npm run docs:watch # Modo watch - regenera al detectar cambios
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Validación de Arquitectura (Nuevo ✨)
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
npm run validate:arch # Valida cumplimiento de Atomic Design
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## 🏗️ Arquitectura
|
|
134
|
+
|
|
135
|
+
Este proyecto implementa **estrictamente** el patrón Atomic Design:
|
|
136
|
+
|
|
137
|
+
```
|
|
138
|
+
src/components/
|
|
139
|
+
├── atoms/ 🔹 Elementos básicos indivisibles
|
|
140
|
+
│ ├── button/
|
|
141
|
+
│ ├── icon/
|
|
142
|
+
│ └── image/
|
|
143
|
+
│
|
|
144
|
+
├── molecules/ 🔸 Combinación de átomos
|
|
145
|
+
│ ├── inputForm/
|
|
146
|
+
│ ├── checkbox/
|
|
147
|
+
│ └── dropdown/
|
|
148
|
+
│
|
|
149
|
+
├── organisms/ 🔷 Secciones complejas
|
|
150
|
+
│ ├── card/
|
|
151
|
+
│ ├── table/
|
|
152
|
+
│ ├── modal/
|
|
153
|
+
│ └── queryBuilder/
|
|
154
|
+
│
|
|
155
|
+
└── templates/ 🔶 Layouts de página
|
|
156
|
+
└── layoutOutside/
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Reglas de Dependencias
|
|
160
|
+
|
|
161
|
+
```
|
|
162
|
+
Templates → puede importar: organisms, molecules, atoms
|
|
163
|
+
Organisms → puede importar: molecules, atoms
|
|
164
|
+
Molecules → puede importar: atoms
|
|
165
|
+
Atoms → NO importa componentes del proyecto
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
**Documentación completa:** [docs/ARCHITECTURE.md](./docs/ARCHITECTURE.md)
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
## 📚 Documentación
|
|
173
|
+
|
|
174
|
+
### Documentación Generada Automáticamente
|
|
175
|
+
|
|
176
|
+
El proyecto incluye un **sistema de documentación automática** que genera:
|
|
177
|
+
|
|
178
|
+
1. **[COMPONENTS.md](./docs/COMPONENTS.md)** - Inventario completo de componentes
|
|
179
|
+
2. **[QUALITY_REPORT.md](./docs/QUALITY_REPORT.md)** - Reporte de calidad del código
|
|
180
|
+
3. **[ARCHITECTURE.md](./docs/ARCHITECTURE.md)** - Documentación de arquitectura
|
|
181
|
+
4. **[ONBOARDING.md](./docs/ONBOARDING.md)** - Guía para nuevos desarrolladores
|
|
182
|
+
|
|
183
|
+
### Regenerar Documentación
|
|
184
|
+
|
|
185
|
+
```bash
|
|
186
|
+
# Generar una vez
|
|
187
|
+
npm run docs:generate
|
|
188
|
+
|
|
189
|
+
# Modo watch (se regenera automáticamente)
|
|
190
|
+
npm run docs:watch
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### Storybook
|
|
194
|
+
|
|
195
|
+
```bash
|
|
196
|
+
npm run storybook
|
|
197
|
+
# Abre http://localhost:6006
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
---
|
|
201
|
+
|
|
202
|
+
## 👥 Para Nuevos Desarrolladores
|
|
203
|
+
|
|
204
|
+
### Quick Start
|
|
205
|
+
|
|
206
|
+
1. **Lee la guía de onboarding:** [docs/ONBOARDING.md](./docs/ONBOARDING.md)
|
|
207
|
+
2. **Revisa la arquitectura:** [docs/ARCHITECTURE.md](./docs/ARCHITECTURE.md)
|
|
208
|
+
3. **Explora componentes existentes:** `npm run storybook`
|
|
209
|
+
4. **Genera documentación actualizada:** `npm run docs:generate`
|
|
210
|
+
|
|
211
|
+
### Antes de Crear un Componente
|
|
212
|
+
|
|
213
|
+
Ejecuta el validador de arquitectura para entender las reglas:
|
|
214
|
+
|
|
215
|
+
```bash
|
|
216
|
+
npm run validate:arch
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Checklist Antes de Commit
|
|
220
|
+
|
|
221
|
+
- [ ] ¿Tiene archivo `.types.tsx`? (si es molecule u organism)
|
|
222
|
+
- [ ] ¿Tiene archivo `.stories.tsx`?
|
|
223
|
+
- [ ] ¿Está exportado en `src/main.ts`?
|
|
224
|
+
- [ ] ¿Pasa `npm run lint`?
|
|
225
|
+
- [ ] ¿Pasa `npm run typecheck`?
|
|
226
|
+
- [ ] ¿Pasa `npm run validate:arch`?
|
|
227
|
+
|
|
228
|
+
---
|
|
229
|
+
|
|
230
|
+
## 📝 Changelog
|
|
231
|
+
|
|
232
|
+
### v0.9.5 (Actual)
|
|
233
|
+
- ✨ **[NUEVO]** Sistema de documentación automática
|
|
234
|
+
- ✨ **[NUEVO]** Validador de arquitectura Atomic Design
|
|
235
|
+
- ✨ **[NUEVO]** Guía de onboarding para nuevos desarrolladores
|
|
236
|
+
- ✨ **[NUEVO]** Reglas de Cursor para enforced architecture
|
|
237
|
+
- 🔧 Agregado componente QueryBuilder con drag & drop
|
|
238
|
+
- 📚 Documentación completa generada automáticamente
|
|
239
|
+
|
|
240
|
+
### v0.0.1
|
|
241
|
+
- 🎉 Componentes iniciales
|
|
242
|
+
- ⚛️ Setup React + TypeScript + Vite
|
|
243
|
+
|
|
244
|
+
---
|
|
245
|
+
|
|
246
|
+
## 📄 Licencia
|
|
247
|
+
|
|
248
|
+
Este proyecto es privado y pertenece a Mathilde DEV.
|
|
249
|
+
|
|
250
|
+
---
|
|
251
|
+
|
|
252
|
+
## 🔗 Enlaces Útiles
|
|
253
|
+
|
|
254
|
+
- [Documentación de Arquitectura](./docs/ARCHITECTURE.md)
|
|
255
|
+
- [Guía de Onboarding](./docs/ONBOARDING.md)
|
|
256
|
+
- [Inventario de Componentes](./docs/COMPONENTS.md)
|
|
257
|
+
- [Reporte de Calidad](./docs/QUALITY_REPORT.md)
|
|
258
|
+
- [Reglas de Cursor](./.cursor/rules/architecture.md)
|
|
259
|
+
|
|
260
|
+
---
|
|
261
|
+
|
|
262
|
+
**Desarrollado con ❤️ por Mathilde DEV**
|