cemtrik-dependencies 1.0.256 → 1.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 (3) hide show
  1. package/README.md +301 -337
  2. package/dist/index.js +21 -16
  3. package/package.json +57 -57
package/README.md CHANGED
@@ -1,337 +1,301 @@
1
- # Cemtrik Dependencies
2
-
3
- Una biblioteca completa de componentes React diseñada para construir interfaces de usuario
4
- consistentes, accesibles y modernas en aplicaciones Cemtrik. Esta biblioteca sigue los principios de
5
- Atomic Design e incluye un espacio de trabajo Storybook completo para documentacion y exploracion de
6
- componentes.
7
-
8
- ## Que Hace Este Proyecto
9
-
10
- Cemtrik Dependencies es una **biblioteca de componentes UI React** que proporciona:
11
-
12
- - **Componentes React Reutilizables**: Una coleccion de mas de 28 componentes UI organizados
13
- siguiendo la metodologia Atomic Design
14
- - **Hooks React Personalizados**: 4 hooks potentes para gestion de formularios, manejo de modales
15
- y diseno responsivo
16
- - **Funciones de Utilidad**: Funciones auxiliares para operaciones comunes como validacion de
17
- correo electronico, agrupacion de datos y gestion de nombres de clases
18
- - **Documentacion Completa**: Espacio de trabajo Storybook interactivo con cambio de marca
19
- dinamico y documentacion completa de componentes
20
-
21
- La biblioteca esta construida para garantizar **consistencia**, **accesibilidad** (WCAG 2.1 AA) y
22
- **experiencia de desarrollador** en todas las aplicaciones Cemtrik.
23
-
24
- ---
25
-
26
- ## Caracteristicas y Modulos
27
-
28
- ### Componentes (Organizados por Atomic Design)
29
-
30
- #### Atomos (20 componentes)
31
-
32
- Bloques basicos de construccion de la UI:
33
-
34
- | Componente | Descripcion |
35
- | -------------------------------- | ------------------------------------------------------- |
36
- | `Alert` | Mensajes de retroalimentacion para acciones del usuario |
37
- | `Avatar` | Representacion de usuario con iniciales o imagenes |
38
- | `Bullets` | Indicadores de navegacion |
39
- | `ButtonSolid` | Botones primarios solidos |
40
- | `ButtonOutline` | Botones secundarios con contorno |
41
- | `ButtonPagination` | Botones de control de paginacion |
42
- | `Checkbox` | Controles de seleccion multiple |
43
- | `ConfirmationAbandoningCreation` | Dialogos de confirmacion |
44
- | `Divider` | Separadores visuales |
45
- | `GoBack` | Botones de navegacion hacia atras |
46
- | `Image` | Componente de imagen optimizado |
47
- | `Input` | Campos de entrada de texto |
48
- | `InputDropdown` | Campos de entrada desplegables |
49
- | `Select` | Selectores de opciones |
50
- | `SelectColor` | Selectores de color |
51
- | `Spinner` | Indicadores de carga |
52
- | `Switch` | Interruptores de alternancia |
53
- | `Textarea` | Entradas de texto de multiples lineas |
54
- | `Tooltip` | Ventanas emergentes informativas |
55
-
56
- #### Moleculas (6 componentes)
57
-
58
- Combinaciones complejas de atomos:
59
-
60
- | Componente | Descripcion |
61
- | ------------------- | -------------------------------- |
62
- | `CoverPhoto` | Componentes de imagen de portada |
63
- | `Dropdown` | Menus desplegables complejos |
64
- | `IconSelectPicker` | Interfaz de seleccion de iconos |
65
- | `Modal` | Ventanas de dialogo |
66
- | `Pagination` | Sistemas completos de paginacion |
67
- | `SketchColorPicker` | Seleccion avanzada de colores |
68
-
69
- #### Plantillas (1 componente)
70
-
71
- Estructuras a nivel de pagina:
72
-
73
- | Componente | Descripcion |
74
- | ----------- | -------------------------------- |
75
- | `Accordion` | Paneles de contenido colapsables |
76
-
77
- ### Hooks
78
-
79
- | Hook | Descripcion |
80
- | --------------------- | ----------------------------------------------- |
81
- | `useForm` | Gestion de estado de formularios con validacion |
82
- | `useCloseModal` | Manejar cierre de modales al hacer clic fuera |
83
- | `useMediaQuery` | Deteccion de puntos de ruptura responsivos |
84
- | `useWindowDimensions` | Seguimiento de cambios de tamano de ventana |
85
-
86
- ### Utilidades
87
-
88
- | Funcion | Descripcion |
89
- | ------------------------ | ------------------------------------------- |
90
- | `copyOptions` | Clonacion profunda de arrays de objetos |
91
- | `classNames` | Fusion condicional de clases CSS |
92
- | `validateEmail` | Validacion de formato de correo electronico |
93
- | `generateAvatarInitials` | Generar iniciales a partir de nombres |
94
- | `groupBy` | Agrupar elementos de array por clave |
95
- | `isPromise` | Verificar si un valor es una Promesa |
96
-
97
- ### Caracteristicas de Storybook
98
-
99
- - **4 Temas Dinamicos**: Cambiar entre marcas sin reconstruir
100
- - Cemtrik (corporativo)
101
- - Modo Oscuro
102
- - Naturaleza (tonos verdes)
103
- - Oceano (tonos azules)
104
- - **Documentacion en Espanol**: Toda la documentacion en espanol
105
- - **Accesibilidad**: Cumple con WCAG 2.1 AA
106
- - **Controles Interactivos**: Modificar props en tiempo real
107
- - **Descubrimiento de Componentes**: Deteccion automatica de nuevos componentes
108
-
109
- ---
110
-
111
- ## Arquitectura de Componentes
112
-
113
- La biblioteca esta organizada siguiendo los principios de Atomic Design:
114
-
115
- - **Atomos**: Componentes basicos como botones, entradas e iconos
116
- - **Moleculas**: Combinaciones de atomos como modales y dropdowns
117
- - **Plantillas**: Estructuras de pagina como acordeones
118
-
119
- Los componentes, hooks y utilidades se exportan desde el archivo principal `index.js` y estan
120
- documentados en el espacio de trabajo Storybook con temas dinamicos.
121
-
122
- ---
123
-
124
- ## Stack Tecnologico
125
-
126
- ### Tecnologias Principales
127
-
128
- | Categoria | Tecnologia | Version | Proposito |
129
- | --------------- | ------------ | ------- | --------------------------------- |
130
- | **Framework** | React | 18.2.0 | Biblioteca UI |
131
- | **Build Tool** | Vite | 5.4.0 | Desarrollo rapido y empaquetado |
132
- | **Estilos** | Tailwind CSS | Latest | CSS utility-first |
133
- | **Iconos** | Heroicons | 2.0.18 | Biblioteca de iconos SVG |
134
- | **Componentes** | Headless UI | 1.7.15 | Componentes accesibles sin estilo |
135
-
136
- ### Documentacion y Desarrollo
137
-
138
- | Tecnologia | Proposito |
139
- | -------------------- | -------------------------------------- |
140
- | **Storybook** | Documentacion y pruebas de componentes |
141
- | **Vite** (Storybook) | Sistema de construccion de Storybook |
142
- | **MDX** | Documentacion con JSX |
143
-
144
- ### Calidad de Codigo
145
-
146
- | Tecnologia | Proposito |
147
- | ------------------------- | ---------------------------------- |
148
- | **ESLint** | Linting de JavaScript/React |
149
- | **Prettier** | Formateo de codigo |
150
- | **Husky** | Git hooks |
151
- | **Commitlint** | Convenciones de mensajes de commit |
152
- | **Jest** | Pruebas unitarias |
153
- | **React Testing Library** | Pruebas de componentes |
154
-
155
- ### Gestion de Paquetes
156
-
157
- | Tecnologia | Proposito |
158
- | ---------- | --------------------------- |
159
- | **npm** | Gestion de paquetes |
160
- | **Babel** | Transpilacion de JavaScript |
161
-
162
- ---
163
-
164
- ## Instalacion
165
-
166
- ### Requisitos Previos
167
-
168
- - Node.js 16+
169
- - npm 8+ o yarn 1.22+
170
-
171
- ### Instalar como Dependencia
172
-
173
- ```bash
174
- npm install cemtrik-dependencies
175
- ```
176
-
177
- ### Dependencias de Pares
178
-
179
- Los siguientes paquetes deben estar instalados en tu proyecto:
180
-
181
- ```bash
182
- npm install react react-dom
183
- npm install @headlessui/react @heroicons/react classnames
184
- ```
185
-
186
- ### Configuracion de Desarrollo
187
-
188
- 1. **Clonar o navegar al repositorio:**
189
-
190
- ```bash
191
- cd cemtrik-dependencies
192
- ```
193
-
194
- 2. **Instalar dependencias:**
195
-
196
- ```bash
197
- npm install
198
- ```
199
-
200
- 3. **Iniciar servidor de desarrollo:**
201
-
202
- ```bash
203
- npm run dev
204
- ```
205
-
206
- 4. **Ejecutar pruebas:**
207
-
208
- ```bash
209
- npm test
210
- ```
211
-
212
- 5. **Ejecutar linter:**
213
-
214
- ```bash
215
- npm run lint
216
- ```
217
-
218
- 6. **Construir para produccion:**
219
-
220
- ```bash
221
- npm run build
222
- ```
223
-
224
- ### Configuracion de Storybook
225
-
226
- 1. **Instalar dependencias de Storybook:**
227
-
228
- ```bash
229
- cd storybook
230
- npm install
231
- ```
232
-
233
- 2. **Iniciar Storybook:**
234
-
235
- ```bash
236
- # Desde el directorio raiz
237
- npm run storybook
238
-
239
- # O desde el directorio storybook
240
- cd storybook && npm run storybook
241
- ```
242
-
243
- 3. **Abrir en navegador:**
244
-
245
- Navega a `http://localhost:6006`
246
-
247
- ---
248
-
249
- ## Inicio Rapido
250
-
251
- ### Usar Componentes
252
-
253
- ```jsx
254
- import { ButtonSolid, Input, useForm } from "cemtrik-dependencies";
255
-
256
- function MyForm() {
257
- const { handleSubmit, handleChange, model, messageError } = useForm();
258
-
259
- const onSubmit = (data) => {
260
- console.log("Form data:", data);
261
- };
262
-
263
- return (
264
- <form onSubmit={handleSubmit(onSubmit)}>
265
- <Input
266
- name="email"
267
- onChange={(e) => handleChange(e, setForm, form)}
268
- placeholder="Enter email"
269
- />
270
- {messageError.email && <span>{messageError.email}</span>}
271
-
272
- <ButtonSolid type="submit">Submit</ButtonSolid>
273
- </form>
274
- );
275
- }
276
- ```
277
-
278
- ### Usar Utilidades
279
-
280
- ```jsx
281
- import { validateEmail, classNames, groupBy } from "cemtric-dependencies";
282
-
283
- // Validacion de correo
284
- const isValid = validateEmail("user@example.com"); // true
285
-
286
- // Clases condicionales
287
- const buttonClass = classNames("btn", isPrimary && "btn-primary", isDisabled && "btn-disabled");
288
-
289
- // Agrupar elementos de array
290
- const grouped = groupBy({
291
- items: users,
292
- key: "department",
293
- });
294
- ```
295
-
296
- ---
297
-
298
- ## Scripts Disponibles
299
-
300
- | Script | Descripcion |
301
- | ---------------------------- | ----------------------------------------- |
302
- | `npm run dev` | Iniciar servidor de desarrollo Vite |
303
- | `npm run build` | Construir biblioteca para produccion |
304
- | `npm run preview` | Previsualizar construccion de produccion |
305
- | `npm test` | Ejecutar pruebas Jest |
306
- | `npm run coverage` | Ejecutar pruebas con reporte de cobertura |
307
- | `npm run lint` | Ejecutar ESLint |
308
- | `npm run format` | Formatear codigo con Prettier |
309
- | `npm run storybook` | Iniciar servidor de desarrollo Storybook |
310
- | `npm run build-storybook` | Construir Storybook para produccion |
311
- | `npm run storybook:generate` | Regenerar documentacion de Storybook |
312
-
313
- ---
314
-
315
- ## Licencia
316
-
317
- Copyright 2024 Cemtrik. Todos los derechos reservados.
318
-
319
- ---
320
-
321
- ## Contribuir
322
-
323
- 1. Asegurate de que tu codigo siga el estilo existente (ESLint + Prettier)
324
- 2. Escribe pruebas para nuevas caracteristicas
325
- 3. Actualiza la documentacion en Storybook
326
- 4. Sigue mensajes de commit convencionales
327
- 5. Ejecuta `npm run lint` antes de hacer commit
328
-
329
- ---
330
-
331
- ## Soporte
332
-
333
- Para preguntas o soporte:
334
-
335
- - Consulta la documentacion de Storybook en `http://localhost:6006`
336
- - Revisa las implementaciones de componentes existentes en `src/components/`
337
- - Consulta el resumen de implementacion en `storybook/RESUMEN_IMPLEMENTACION.md`
1
+ # Cemtrik Dependencies
2
+
3
+ A React component library for building consistent, accessible, modern UI in Cemtrik applications.
4
+ The library follows Atomic Design principles and includes a full Storybook workspace for
5
+ documentation and component exploration.
6
+
7
+ ## What This Project Provides
8
+
9
+ - **Reusable React Components**: 28+ UI components organized by Atomic Design
10
+ - **Custom React Hooks**: form, modal, and responsive helpers
11
+ - **Utility Functions**: helpers for email validation, grouping data, and class name handling
12
+ - **Complete Documentation**: interactive Storybook with dynamic brand themes
13
+
14
+ The library is built to support **consistency**, **accessibility** (WCAG 2.1 AA), and a strong
15
+ developer experience across Cemtrik applications.
16
+
17
+ ## Components and Modules
18
+
19
+ ### Atoms
20
+
21
+ - Alert
22
+ - Avatar
23
+ - Bullets
24
+ - ButtonSolid
25
+ - ButtonOutline
26
+ - ButtonPagination
27
+ - Checkbox
28
+ - ConfirmationAbandoningCreation
29
+ - Divider
30
+ - GoBack
31
+ - Image
32
+ - Input
33
+ - InputDropdown
34
+ - Select
35
+ - SelectColor
36
+ - Spinner
37
+ - Switch
38
+ - Textarea
39
+ - Tooltip
40
+
41
+ ### Molecules
42
+
43
+ - CoverPhoto
44
+ - Dropdown
45
+ - IconSelectPicker
46
+ - Modal
47
+ - Pagination
48
+ - SketchColorPicker
49
+ - FileUploadPreview
50
+ - UploadImage
51
+
52
+ ### Templates
53
+
54
+ - Accordion
55
+
56
+ ### Hooks
57
+
58
+ - `useForm`
59
+ - `useCloseModal`
60
+ - `useMediaQuery`
61
+ - `useWindowDimensions`
62
+
63
+ ### Utilities
64
+
65
+ - `copyOptions`
66
+ - `classNames`
67
+ - `validateEmail`
68
+ - `generateAvatarInitials`
69
+ - `groupBy`
70
+ - `isPromise`
71
+
72
+ ## Storybook Features
73
+
74
+ - 4 dynamic themes: Cemtrik, Dark Mode, Nature, and Ocean
75
+ - Documentation in English
76
+ - WCAG 2.1 AA accessibility goals
77
+ - Interactive controls for live prop editing
78
+ - Automatic discovery of new components
79
+
80
+ ## Architecture
81
+
82
+ The library is organized using Atomic Design:
83
+
84
+ - Atoms: basic building blocks such as buttons, inputs, and icons
85
+ - Molecules: composed components such as modals and dropdowns
86
+ - Templates: page-level structures such as accordions
87
+
88
+ All components, hooks, and utilities are exported from `src/index.js` and documented in Storybook.
89
+
90
+ ## Tech Stack
91
+
92
+ | Category | Technology | Version | Purpose |
93
+ | --- | --- | --- | --- |
94
+ | Framework | React | 18.2.0 | UI library |
95
+ | Build Tool | Vite | 5.4.0 | Development and bundling |
96
+ | Styling | Tailwind CSS | Latest | Utility-first CSS |
97
+ | Icons | Heroicons | 2.0.18 | SVG icon set |
98
+ | Headless UI | Headless UI | 1.7.15 | Accessible primitives |
99
+
100
+ ## Development Tooling
101
+
102
+ | Technology | Purpose |
103
+ | --- | --- |
104
+ | Storybook | Component documentation and exploration |
105
+ | Vite (Storybook) | Storybook build system |
106
+ | MDX | Documentation with JSX |
107
+
108
+ ## Code Quality
109
+
110
+ | Technology | Purpose |
111
+ | --- | --- |
112
+ | ESLint | JavaScript and React linting |
113
+ | Prettier | Code formatting |
114
+ | Husky | Git hooks |
115
+ | Commitlint | Commit message conventions |
116
+ | Jest | Unit tests |
117
+ | React Testing Library | Component tests |
118
+
119
+ ## Package Management
120
+
121
+ | Technology | Purpose |
122
+ | --- | --- |
123
+ | npm | Package management |
124
+ | Babel | JavaScript transpilation |
125
+
126
+ ## Installation
127
+
128
+ ### Requirements
129
+
130
+ - Node.js 16+
131
+ - npm 8+ or yarn 1.22+
132
+
133
+ ### Install as a Dependency
134
+
135
+ ```bash
136
+ npm install cemtrik-dependencies
137
+ ```
138
+
139
+ ### Peer Dependencies
140
+
141
+ Install these packages in your application:
142
+
143
+ ```bash
144
+ npm install react react-dom
145
+ npm install @headlessui/react @heroicons/react classnames
146
+ ```
147
+
148
+ ## Development Setup
149
+
150
+ 1. Clone or open the repository.
151
+ 2. Install dependencies.
152
+
153
+ ```bash
154
+ npm install
155
+ ```
156
+
157
+ 3. Start the app locally.
158
+
159
+ ```bash
160
+ npm run dev
161
+ ```
162
+
163
+ 4. Run tests.
164
+
165
+ ```bash
166
+ npm test
167
+ ```
168
+
169
+ 5. Run linting.
170
+
171
+ ```bash
172
+ npm run lint
173
+ ```
174
+
175
+ 6. Build for production.
176
+
177
+ ```bash
178
+ npm run build
179
+ ```
180
+
181
+ ## Storybook Setup
182
+
183
+ Storybook lives in the `storybook/` subproject.
184
+
185
+ 1. Install Storybook dependencies.
186
+
187
+ ```bash
188
+ cd storybook
189
+ npm install
190
+ ```
191
+
192
+ 2. Start Storybook.
193
+
194
+ ```bash
195
+ cd storybook
196
+ npm run storybook
197
+ ```
198
+
199
+ 3. Open `http://localhost:6006` in your browser.
200
+
201
+ ## Quick Start
202
+
203
+ ### Use Components
204
+
205
+ ```jsx
206
+ import { ButtonSolid, Input, useForm } from "cemtrik-dependencies";
207
+
208
+ function MyForm() {
209
+ const { handleSubmit, handleChange, model, messageError } = useForm();
210
+
211
+ const onSubmit = (data) => {
212
+ console.log("Form data:", data);
213
+ };
214
+
215
+ return (
216
+ <form onSubmit={handleSubmit(onSubmit)}>
217
+ <Input
218
+ name="email"
219
+ onChange={(e) => handleChange(e, setForm, form)}
220
+ placeholder="Enter email"
221
+ />
222
+ {messageError.email && <span>{messageError.email}</span>}
223
+
224
+ <ButtonSolid type="submit">Submit</ButtonSolid>
225
+ </form>
226
+ );
227
+ }
228
+ ```
229
+
230
+ ### Use Utilities
231
+
232
+ ```jsx
233
+ import { validateEmail, classNames, groupBy } from "cemtrik-dependencies";
234
+
235
+ // Email validation
236
+ const isValid = validateEmail("user@example.com"); // true
237
+
238
+ // Conditional class names
239
+ const buttonClass = classNames("btn", isPrimary && "btn-primary", isDisabled && "btn-disabled");
240
+
241
+ // Group array items
242
+ const grouped = groupBy({
243
+ items: users,
244
+ key: "department",
245
+ });
246
+ ```
247
+
248
+ ## Available Scripts
249
+
250
+ | Script | Description |
251
+ | --- | --- |
252
+ | `npm run dev` | Start the Vite development server |
253
+ | `npm run build` | Build the library for production |
254
+ | `npm run preview` | Preview the production build |
255
+ | `npm test` | Run Jest tests |
256
+ | `npm run coverage` | Run tests with coverage reporting |
257
+ | `npm run lint` | Run ESLint |
258
+ | `npm run format` | Format code with Prettier |
259
+
260
+ Storybook scripts live in `storybook/package.json`:
261
+
262
+ | Script | Description |
263
+ | --- | --- |
264
+ | `npm run storybook` | Start Storybook development mode |
265
+ | `npm run build` | Build Storybook for production |
266
+ | `npm run generate-docs` | Generate Storybook docs |
267
+ | `npm run deploy` | Deploy Storybook to Firebase hosting |
268
+
269
+ ## License
270
+
271
+ Copyright 2024 Cemtrik. All rights reserved.
272
+
273
+ ## Contributing
274
+
275
+ 1. Keep code aligned with the existing style (ESLint + Prettier).
276
+ 2. Write tests for new features.
277
+ 3. Update Storybook documentation.
278
+ 4. Use conventional commit messages.
279
+ 5. Run `npm run lint` before committing.
280
+
281
+ ## Pull Request Workflow
282
+
283
+ Use the `pr-workflow` skill when you need to propose changes through a formal review process.
284
+ It covers source code, skills, documentation, and configuration changes.
285
+
286
+ The workflow enforces:
287
+
288
+ - Work on the current branch instead of creating a new branch
289
+ - Use `CVP-XXXX` as the branch reference convention when needed
290
+ - Conventional Commits for every commit
291
+ - `gh`-based pull request creation right after push
292
+ - Secrets, credentials, and PII checks before commit
293
+ - Tests and coverage evidence for logic changes
294
+
295
+ ## Support
296
+
297
+ For questions or support:
298
+
299
+ - Check the Storybook documentation at `http://localhost:6006`
300
+ - Review existing component implementations in `src/components/`
301
+ - Review Storybook stories in `storybook/stories/`