@onpe/ui 1.0.4 → 1.0.5

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 (2) hide show
  1. package/README.md +190 -21
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -15,7 +15,17 @@ Librería completa de componentes de interfaz de usuario para aplicaciones de la
15
15
 
16
16
  ```bash
17
17
  npm install @onpe/ui
18
- `` ` esolo logica verdad ?
18
+ ```
19
+
20
+ ## ⚠️ Importante sobre TailwindCSS
21
+
22
+ Esta librería **NO requiere** que instales TailwindCSS en tu proyecto. Los estilos ya están compilados y optimizados. Solo necesitas importar los estilos:
23
+
24
+ ```css
25
+ @import "@onpe/ui/styles";
26
+ ```
27
+
28
+ Si quieres extender los estilos con tus propias clases de TailwindCSS, entonces sí necesitarías instalar TailwindCSS en tu proyecto.
19
29
 
20
30
  ## 📖 Uso Básico
21
31
 
@@ -33,12 +43,8 @@ import { Button } from '@onpe/ui/components';
33
43
  function App() {
34
44
  return (
35
45
  <div>
36
- <Button variant="primary" size="md">
37
- Votar Ahora
38
- </Button>
39
- <Button variant="outline" size="lg">
40
- Ver Resultados
41
- </Button>
46
+ <Button color="primary" title="Votar Ahora" size="normal" />
47
+ <Button color="skyblue" title="Ver Resultados" size="large" />
42
48
  </div>
43
49
  );
44
50
  }
@@ -67,36 +73,152 @@ function App() {
67
73
 
68
74
  ### Button
69
75
 
76
+ Botón versátil con múltiples colores y tamaños.
77
+
70
78
  Botón versátil con múltiples variantes y tamaños.
71
79
 
72
80
  ```tsx
73
81
  import { Button } from '@onpe/ui/components';
74
82
 
75
- // Variantes
76
- <Button variant="primary">Primario</Button>
77
- <Button variant="secondary">Secundario</Button>
78
- <Button variant="outline">Outline</Button>
79
- <Button variant="ghost">Ghost</Button>
83
+ // Colores disponibles
84
+ <Button color="primary" title="Primario" />
85
+ <Button color="blue" title="Azul" />
86
+ <Button color="skyblue" title="Sky Blue" />
87
+ <Button color="green" title="Verde" />
88
+ <Button color="yellow" title="Amarillo" />
89
+ <Button color="red" title="Rojo" />
80
90
 
81
91
  // Tamaños
82
- <Button size="sm">Pequeño</Button>
83
- <Button size="md">Mediano</Button>
84
- <Button size="lg">Grande</Button>
92
+ <Button color="primary" title="Pequeño" size="small" />
93
+ <Button color="primary" title="Mediano" size="normal" />
94
+ <Button color="primary" title="Grande" size="large" />
85
95
 
86
96
  // Estados
87
- <Button loading>Cargando...</Button>
88
- <Button disabled>Deshabilitado</Button>
97
+ <Button color="primary" title="Deshabilitado" disabled />
89
98
  ```
90
99
 
91
100
  ### Props del Button
92
101
 
93
102
  | Prop | Tipo | Default | Descripción |
94
103
  |------|------|---------|-------------|
95
- | `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` | Estilo del botón |
96
- | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Tamaño del botón |
97
- | `loading` | `boolean` | `false` | Estado de carga |
104
+ | `color` | `'primary' \| 'blue' \| 'skyblue' \| 'skyblue-light' \| 'yellow' \| 'light-skyblue' \| 'gray' \| 'gray-light' \| 'gray-extra-light' \| 'red' \| 'dark-gray' \| 'green' \| 'yellow-light'` | `'primary'` | Color del botón |
105
+ | `title` | `string` | - | Texto del botón (requerido) |
106
+ | `size` | `'small' \| 'normal' \| 'large'` | `'normal'` | Tamaño del botón |
98
107
  | `disabled` | `boolean` | `false` | Estado deshabilitado |
99
- | `children` | `ReactNode` | - | Contenido del botón |
108
+ | `className` | `string` | - | Clases CSS adicionales |
109
+
110
+ ### Modal
111
+
112
+ Componente modal para mostrar contenido en overlay.
113
+
114
+ ```tsx
115
+ import { Modal } from '@onpe/ui/components';
116
+
117
+ function App() {
118
+ const [isOpen, setIsOpen] = useState(false);
119
+
120
+ return (
121
+ <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
122
+ <h2>Contenido del Modal</h2>
123
+ <p>Este es el contenido del modal.</p>
124
+ </Modal>
125
+ );
126
+ }
127
+ ```
128
+
129
+ ### Overlay
130
+
131
+ Componente overlay para superponer contenido.
132
+
133
+ ```tsx
134
+ import { Overlay } from '@onpe/ui/components';
135
+
136
+ function App() {
137
+ return (
138
+ <Overlay>
139
+ <div>Contenido superpuesto</div>
140
+ </Overlay>
141
+ );
142
+ }
143
+ ```
144
+
145
+ ### Portal
146
+
147
+ Componente portal para renderizar fuera del DOM padre.
148
+
149
+ ```tsx
150
+ import { Portal } from '@onpe/ui/components';
151
+
152
+ function App() {
153
+ return (
154
+ <Portal>
155
+ <div>Contenido renderizado en portal</div>
156
+ </Portal>
157
+ );
158
+ }
159
+ ```
160
+
161
+ ### Show
162
+
163
+ Componente condicional para mostrar/ocultar contenido.
164
+
165
+ ```tsx
166
+ import { Show } from '@onpe/ui/components';
167
+
168
+ function App() {
169
+ const [visible, setVisible] = useState(true);
170
+
171
+ return (
172
+ <Show when={visible}>
173
+ <div>Contenido visible</div>
174
+ </Show>
175
+ );
176
+ }
177
+ ```
178
+
179
+ ### ModalConfirm
180
+
181
+ Modal de confirmación para acciones importantes.
182
+
183
+ ```tsx
184
+ import { ModalConfirm } from '@onpe/ui/components';
185
+
186
+ function App() {
187
+ const [showConfirm, setShowConfirm] = useState(false);
188
+
189
+ return (
190
+ <ModalConfirm
191
+ isOpen={showConfirm}
192
+ onClose={() => setShowConfirm(false)}
193
+ onConfirm={() => {
194
+ // Acción a confirmar
195
+ setShowConfirm(false);
196
+ }}
197
+ title="Confirmar acción"
198
+ message="¿Estás seguro de realizar esta acción?"
199
+ />
200
+ );
201
+ }
202
+ ```
203
+
204
+ ### ModalLoading
205
+
206
+ Modal de carga para mostrar estados de procesamiento.
207
+
208
+ ```tsx
209
+ import { ModalLoading } from '@onpe/ui/components';
210
+
211
+ function App() {
212
+ const [loading, setLoading] = useState(false);
213
+
214
+ return (
215
+ <ModalLoading
216
+ isOpen={loading}
217
+ message="Procesando información..."
218
+ />
219
+ );
220
+ }
221
+ ```
100
222
 
101
223
  ## 🎯 Hooks Disponibles
102
224
 
@@ -145,6 +267,45 @@ function SettingsComponent() {
145
267
  }
146
268
  ```
147
269
 
270
+ ## 🎨 Iconos Disponibles
271
+
272
+ La librería incluye una colección completa de iconos organizados por categorías:
273
+
274
+ ### Iconos de Acciones
275
+ - Iconos para acciones comunes (editar, eliminar, guardar, etc.)
276
+
277
+ ### Iconos de Navegadores
278
+ - Iconos de navegadores web (Chrome, Firefox, Safari, Edge, etc.)
279
+
280
+ ### Iconos de Sistemas Operativos
281
+ - Iconos de sistemas operativos (Windows, macOS, Linux, etc.)
282
+
283
+ ### Iconos ONPE
284
+ - Iconos específicos de la institución ONPE
285
+
286
+ ### Logos
287
+ - Logotipos oficiales y marcas
288
+
289
+ ```tsx
290
+ import {
291
+ IconChrome,
292
+ IconFirefox,
293
+ IconSafari,
294
+ IconWindows,
295
+ IconMacOS
296
+ } from '@onpe/ui/icons';
297
+
298
+ function App() {
299
+ return (
300
+ <div>
301
+ <IconChrome className="w-6 h-6" />
302
+ <IconFirefox className="w-6 h-6" />
303
+ <IconSafari className="w-6 h-6" />
304
+ </div>
305
+ );
306
+ }
307
+ ```
308
+
148
309
  ## 🛠️ Utilidades
149
310
 
150
311
  ### formatDate
@@ -217,6 +378,13 @@ La librería incluye breakpoints personalizados para ONPE:
217
378
  .bg-gray-extra-light /* Fondo gris muy claro */
218
379
  ```
219
380
 
381
+ ## 📋 Versiones
382
+
383
+ - **v1.0.4** - Versión actual
384
+ - Compatible con React 16.8+
385
+ - TailwindCSS v4
386
+ - TypeScript 5.3+
387
+
220
388
  ## 🔧 Desarrollo
221
389
 
222
390
  ### Requisitos
@@ -258,6 +426,7 @@ MIT © ONPE - Oficina Nacional de Procesos Electorales
258
426
  - 🐛 Issues: [GitHub Issues](https://github.com/ricardosv46/onpe-ui/issues)
259
427
  - 📖 Documentación: [Storybook](https://onpe-ui-components.netlify.app)
260
428
  - 🔗 Repositorio: [GitHub](https://github.com/ricardosv46/onpe-ui)
429
+ - 📦 NPM: [@onpe/ui](https://www.npmjs.com/package/@onpe/ui)
261
430
 
262
431
  ---
263
432
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onpe/ui",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "type": "module",
5
5
  "description": "Librería completa de UI para ONPE - Componentes, Hooks, Utils y Librerías",
6
6
  "main": "dist/index.js",
@@ -85,6 +85,7 @@
85
85
  "@storybook/react": "^7.6.6",
86
86
  "@storybook/react-vite": "^7.6.6",
87
87
  "@storybook/testing-library": "^0.2.2",
88
+ "@tailwindcss/postcss": "^4.1.13",
88
89
  "@types/react": "^18.2.45",
89
90
  "@types/react-dom": "^18.2.18",
90
91
  "@typescript-eslint/eslint-plugin": "^6.14.0",
@@ -101,11 +102,10 @@
101
102
  "rollup-plugin-peer-deps-external": "^2.2.4",
102
103
  "rollup-plugin-postcss": "^4.0.2",
103
104
  "storybook": "^7.6.6",
105
+ "tailwindcss": "^4.1.13",
104
106
  "typescript": "^5.3.3"
105
107
  },
106
108
  "dependencies": {
107
- "@tailwindcss/postcss": "^4.1.13",
108
- "clsx": "^2.0.0",
109
- "tailwindcss": "^4.1.13"
109
+ "clsx": "^2.0.0"
110
110
  }
111
111
  }