ywana-core8 0.1.85 → 0.1.87

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 (19) hide show
  1. package/doc/package-lock.json +4 -4
  2. package/doc/package.json +3 -2
  3. package/doc/scripts/generate-examples.js +129 -0
  4. package/doc/src/App.js +6 -186
  5. package/doc/src/components/ExamplePage.js +57 -32
  6. package/doc/src/index.js +2 -0
  7. package/package.json +1 -1
  8. package/src/html/index.js +23 -1
  9. package/doc/craco.config.js +0 -31
  10. package/doc/generate-examples.cjs +0 -310
  11. package/doc/src/examples/button.example.js +0 -47
  12. package/doc/src/examples/input.example.js +0 -91
  13. package/src/html/accordion.example.js.backup +0 -390
  14. package/src/html/button.example.js.backup +0 -374
  15. package/src/html/checkbox.example.js.backup +0 -316
  16. package/src/html/demo-sidebar.html +0 -410
  17. package/src/html/table2.migration.md +0 -328
  18. package/src/html/test-resize.html +0 -279
  19. package/src/html/test-selection.html +0 -387
package/src/html/button.example.js.backup DELETED
@@ -1,374 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Button, ActionButton } from './button'
3
-
4
- /**
5
- * Ejemplos de uso de los componentes Button mejorados
6
- */
7
- export const ButtonExamples = () => {
8
- const [loading, setLoading] = useState(false)
9
- const [actionState, setActionState] = useState('normal')
10
- const [formData, setFormData] = useState({ name: '', email: '' })
11
-
12
- const handleSimpleClick = () => {
13
- alert('¡Botón clickeado!')
14
- }
15
-
16
- const handleAsyncAction = async () => {
17
- setLoading(true)
18
- try {
19
- // Simular operación asíncrona
20
- await new Promise(resolve => setTimeout(resolve, 2000))
21
- alert('¡Operación completada!')
22
- } catch (error) {
23
- alert('Error en la operación')
24
- } finally {
25
- setLoading(false)
26
- }
27
- }
28
-
29
- const handleFormSubmit = (event) => {
30
- event.preventDefault()
31
- alert(`Formulario enviado: ${JSON.stringify(formData)}`)
32
- }
33
-
34
- // Estados para ActionButton
35
- const actionStates = {
36
- normal: {
37
- icon: "cloud_upload",
38
- label: "Subir Archivo",
39
- action: async () => {
40
- console.log("Iniciando subida...")
41
- return "uploading"
42
- }
43
- },
44
- uploading: {
45
- icon: "rotate_right",
46
- label: "Subiendo...",
47
- autoexec: true,
48
- action: async () => {
49
- console.log("Subiendo archivo...")
50
- // Simular subida
51
- await new Promise(resolve => setTimeout(resolve, 3000))
52
- return "success"
53
- }
54
- },
55
- success: {
56
- icon: "check_circle",
57
- label: "Subida Completa",
58
- action: () => {
59
- return "normal"
60
- }
61
- },
62
- error: {
63
- icon: "error",
64
- label: "Error en Subida",
65
- action: () => {
66
- return "normal"
67
- }
68
- }
69
- }
70
-
71
- return (
72
- <div style={{ padding: '2rem', maxWidth: '1000px' }}>
73
- <h1>Ejemplos de Componentes Button Mejorados</h1>
74
-
75
- <div style={{
76
- background: '#f8f9fa',
77
- padding: '1rem',
78
- borderRadius: '8px',
79
- marginBottom: '2rem',
80
- border: '1px solid #e9ecef'
81
- }}>
82
- <h3>✅ Mejoras Implementadas:</h3>
83
- <ul>
84
- <li>🛡️ <strong>Validación de props</strong> - Advertencias para props incorrectas</li>
85
- <li>♿ <strong>Accesibilidad completa</strong> - ARIA, soporte de teclado, focus</li>
86
- <li>📝 <strong>PropTypes y documentación</strong> - Validación y documentación completa</li>
87
- <li>🎯 <strong>Estados avanzados</strong> - disabled, loading, error</li>
88
- <li>🎨 <strong>CSS mejorado</strong> - Estados visuales consistentes y responsivos</li>
89
- <li>⌨️ <strong>Soporte de teclado</strong> - Enter y Espacio para activar</li>
90
- <li>📏 <strong>Tamaños múltiples</strong> - small, normal, large</li>
91
- <li>🔧 <strong>Manejo de formularios</strong> - type="submit", form attributes</li>
92
- <li>🔄 <strong>ActionButton mejorado</strong> - Manejo robusto de estados</li>
93
- <li>🧪 <strong>Pruebas unitarias</strong> - 17 pruebas que cubren toda la funcionalidad</li>
94
- </ul>
95
- </div>
96
-
97
- {/* Botones básicos */}
98
- <section style={{ marginBottom: '2rem' }}>
99
- <h3>Botones Básicos</h3>
100
- <div style={{
101
- background: '#fff',
102
- padding: '1.5rem',
103
- borderRadius: '8px',
104
- border: '1px solid #ddd',
105
- display: 'flex',
106
- flexWrap: 'wrap',
107
- gap: '1rem'
108
- }}>
109
- <Button
110
- label="Normal"
111
- action={handleSimpleClick}
112
- />
113
- <Button
114
- label="Outlined"
115
- outlined={true}
116
- action={handleSimpleClick}
117
- />
118
- <Button
119
- label="Raised"
120
- raised={true}
121
- action={handleSimpleClick}
122
- />
123
- <Button
124
- label="Con Icono"
125
- icon="star"
126
- action={handleSimpleClick}
127
- />
128
- <Button
129
- icon="favorite"
130
- ariaLabel="Agregar a favoritos"
131
- action={handleSimpleClick}
132
- />
133
- </div>
134
- </section>
135
-
136
- {/* Diferentes tamaños */}
137
- <section style={{ marginBottom: '2rem' }}>
138
- <h3>Diferentes Tamaños</h3>
139
- <div style={{
140
- background: '#fff',
141
- padding: '1.5rem',
142
- borderRadius: '8px',
143
- border: '1px solid #ddd',
144
- display: 'flex',
145
- alignItems: 'center',
146
- flexWrap: 'wrap',
147
- gap: '1rem'
148
- }}>
149
- <Button
150
- label="Pequeño"
151
- size="small"
152
- action={handleSimpleClick}
153
- />
154
- <Button
155
- label="Normal"
156
- size="normal"
157
- action={handleSimpleClick}
158
- />
159
- <Button
160
- label="Grande"
161
- size="large"
162
- action={handleSimpleClick}
163
- />
164
- </div>
165
- </section>
166
-
167
- {/* Estados especiales */}
168
- <section style={{ marginBottom: '2rem' }}>
169
- <h3>Estados Especiales</h3>
170
- <div style={{
171
- background: '#fff',
172
- padding: '1.5rem',
173
- borderRadius: '8px',
174
- border: '1px solid #ddd',
175
- display: 'flex',
176
- flexWrap: 'wrap',
177
- gap: '1rem'
178
- }}>
179
- <Button
180
- label="Deshabilitado"
181
- disabled={true}
182
- action={handleSimpleClick}
183
- />
184
- <Button
185
- label={loading ? "Cargando..." : "Acción Async"}
186
- loading={loading}
187
- icon="download"
188
- action={handleAsyncAction}
189
- />
190
- <Button
191
- label="Solo Lectura"
192
- disabled={true}
193
- outlined={true}
194
- action={handleSimpleClick}
195
- />
196
- </div>
197
- </section>
198
-
199
- {/* Formulario */}
200
- <section style={{ marginBottom: '2rem' }}>
201
- <h3>Integración con Formularios</h3>
202
- <div style={{
203
- background: '#fff',
204
- padding: '1.5rem',
205
- borderRadius: '8px',
206
- border: '1px solid #ddd'
207
- }}>
208
- <form onSubmit={handleFormSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
209
- <div style={{ display: 'flex', gap: '1rem' }}>
210
- <input
211
- type="text"
212
- placeholder="Nombre"
213
- value={formData.name}
214
- onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
215
- style={{ padding: '0.5rem', borderRadius: '4px', border: '1px solid #ccc', flex: 1 }}
216
- />
217
- <input
218
- type="email"
219
- placeholder="Email"
220
- value={formData.email}
221
- onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
222
- style={{ padding: '0.5rem', borderRadius: '4px', border: '1px solid #ccc', flex: 1 }}
223
- />
224
- </div>
225
- <div style={{ display: 'flex', gap: '1rem' }}>
226
- <Button
227
- type="submit"
228
- label="Enviar Formulario"
229
- icon="send"
230
- raised={true}
231
- />
232
- <Button
233
- type="reset"
234
- label="Limpiar"
235
- outlined={true}
236
- action={() => setFormData({ name: '', email: '' })}
237
- />
238
- </div>
239
- </form>
240
- </div>
241
- </section>
242
-
243
- {/* ActionButton */}
244
- <section style={{ marginBottom: '2rem' }}>
245
- <h3>ActionButton - Estados Múltiples</h3>
246
- <div style={{
247
- background: '#fff',
248
- padding: '1.5rem',
249
- borderRadius: '8px',
250
- border: '1px solid #ddd'
251
- }}>
252
- <div style={{ marginBottom: '1rem' }}>
253
- <ActionButton
254
- states={actionStates}
255
- state={actionState}
256
- onStateChange={setActionState}
257
- raised={true}
258
- />
259
- </div>
260
- <p style={{ fontSize: '0.9rem', color: '#666' }}>
261
- <strong>Estado actual:</strong> {actionState}
262
- </p>
263
- <p style={{ fontSize: '0.8rem', color: '#888' }}>
264
- Este botón cambia automáticamente entre estados: normal → uploading → success
265
- </p>
266
- </div>
267
- </section>
268
-
269
- {/* Demostración de accesibilidad */}
270
- <section style={{ marginBottom: '2rem' }}>
271
- <h3>Demostración de Accesibilidad</h3>
272
- <div style={{
273
- background: '#e8f5e8',
274
- padding: '1rem',
275
- borderRadius: '4px',
276
- border: '1px solid #c8e6c9'
277
- }}>
278
- <p><strong>Prueba la accesibilidad:</strong></p>
279
- <ol>
280
- <li>Usa <kbd>Tab</kbd> para navegar entre botones</li>
281
- <li>Usa <kbd>Enter</kbd> o <kbd>Espacio</kbd> para activar botones</li>
282
- <li>Observa los indicadores de focus</li>
283
- <li>Los lectores de pantalla anunciarán el estado y etiquetas</li>
284
- </ol>
285
-
286
- <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
287
- <Button
288
- label="Botón Accesible 1"
289
- action={() => alert('Botón 1 activado')}
290
- />
291
- <Button
292
- icon="accessibility"
293
- ariaLabel="Configuración de accesibilidad"
294
- action={() => alert('Accesibilidad activada')}
295
- />
296
- <Button
297
- label="Botón Accesible 3"
298
- disabled={true}
299
- action={() => {}}
300
- />
301
- </div>
302
- </div>
303
- </section>
304
-
305
- {/* Comparación antes/después */}
306
- <section style={{ marginBottom: '2rem' }}>
307
- <h3>Comparación: Antes vs Después</h3>
308
- <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
309
- <div style={{
310
- background: '#ffebee',
311
- padding: '1rem',
312
- borderRadius: '4px',
313
- border: '1px solid #ffcdd2'
314
- }}>
315
- <h4>❌ Antes</h4>
316
- <ul>
317
- <li>Sin validación de props</li>
318
- <li>Sin accesibilidad</li>
319
- <li>Componente de prueba mezclado</li>
320
- <li>Prop progress no utilizada</li>
321
- <li>Sin estados de loading</li>
322
- <li>Sin tamaños múltiples</li>
323
- <li>Manejo limitado de eventos</li>
324
- <li>Sin soporte para formularios</li>
325
- </ul>
326
- </div>
327
- <div style={{
328
- background: '#e8f5e8',
329
- padding: '1rem',
330
- borderRadius: '4px',
331
- border: '1px solid #c8e6c9'
332
- }}>
333
- <h4>✅ Después</h4>
334
- <ul>
335
- <li>PropTypes completos</li>
336
- <li>Accesibilidad total</li>
337
- <li>Código limpio sin pruebas</li>
338
- <li>Props optimizadas y útiles</li>
339
- <li>Estados de loading integrados</li>
340
- <li>Tamaños small, normal, large</li>
341
- <li>Eventos completos (click, focus, blur, keydown)</li>
342
- <li>Soporte completo para formularios</li>
343
- </ul>
344
- </div>
345
- </div>
346
- </section>
347
-
348
- {/* Galería de botones */}
349
- <section>
350
- <h3>Galería de Botones</h3>
351
- <div style={{
352
- background: '#fff',
353
- padding: '1.5rem',
354
- borderRadius: '8px',
355
- border: '1px solid #ddd',
356
- display: 'grid',
357
- gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
358
- gap: '1rem'
359
- }}>
360
- <Button label="Guardar" icon="save" raised={true} action={() => alert('Guardado')} />
361
- <Button label="Cancelar" outlined={true} action={() => alert('Cancelado')} />
362
- <Button label="Eliminar" icon="delete" action={() => alert('Eliminado')} />
363
- <Button label="Editar" icon="edit" outlined={true} action={() => alert('Editando')} />
364
- <Button label="Compartir" icon="share" size="small" action={() => alert('Compartido')} />
365
- <Button label="Descargar" icon="download" size="large" raised={true} action={() => alert('Descargando')} />
366
- <Button icon="print" ariaLabel="Imprimir documento" action={() => alert('Imprimiendo')} />
367
- <Button icon="settings" ariaLabel="Configuración" outlined={true} action={() => alert('Configuración')} />
368
- </div>
369
- </section>
370
- </div>
371
- )
372
- }
373
-
374
- export default ButtonExamples