ywana-core8 0.1.86 → 0.1.89
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/doc/package-lock.json +4 -4
- package/doc/package.json +1 -1
- package/doc/src/App.js +5 -16
- package/doc/src/components/ExamplePage.js +57 -32
- package/package.json +1 -1
- package/src/html/icon.example.js +1 -1
- package/src/html/index.js +23 -1
- package/doc/src/examples/button.example.js +0 -47
- package/doc/src/examples/input.example.js +0 -91
- package/doc/src/examples-config.js +0 -170
- package/src/html/accordion.example.js.backup +0 -390
- package/src/html/button.example.js.backup +0 -374
- package/src/html/checkbox.example.js.backup +0 -316
- package/src/html/demo-sidebar.html +0 -410
- package/src/html/table2.migration.md +0 -328
- package/src/html/test-resize.html +0 -279
- package/src/html/test-selection.html +0 -387
|
@@ -1,390 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
import { Accordion } from './accordion'
|
|
3
|
-
import { Icon } from './icon'
|
|
4
|
-
import { Button } from './button'
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Ejemplos de uso del componente Accordion mejorado
|
|
8
|
-
*/
|
|
9
|
-
export const AccordionExamples = () => {
|
|
10
|
-
const [isDisabled, setIsDisabled] = useState(false)
|
|
11
|
-
const [allowMultiple, setAllowMultiple] = useState(true)
|
|
12
|
-
const [animated, setAnimated] = useState(true)
|
|
13
|
-
|
|
14
|
-
const handleSectionCheck = (index, checked, sectionId, section) => {
|
|
15
|
-
console.log('Section checked:', { index, checked, sectionId, section })
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
const handleSectionToggle = (index, open, section) => {
|
|
19
|
-
console.log('Section toggled:', { index, open, section })
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
const handleSectionChange = (action, index, value, section) => {
|
|
23
|
-
console.log('Section changed:', { action, index, value, section })
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
// Datos de ejemplo
|
|
27
|
-
const basicSections = [
|
|
28
|
-
{
|
|
29
|
-
id: 'section-1',
|
|
30
|
-
title: 'Información Personal',
|
|
31
|
-
subtitle: 'Datos básicos del usuario',
|
|
32
|
-
icon: 'person',
|
|
33
|
-
checked: false,
|
|
34
|
-
open: true,
|
|
35
|
-
info: '3 campos',
|
|
36
|
-
children: (
|
|
37
|
-
<div style={{ padding: '1rem' }}>
|
|
38
|
-
<p>Contenido de información personal:</p>
|
|
39
|
-
<ul>
|
|
40
|
-
<li>Nombre completo</li>
|
|
41
|
-
<li>Email</li>
|
|
42
|
-
<li>Teléfono</li>
|
|
43
|
-
</ul>
|
|
44
|
-
</div>
|
|
45
|
-
)
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
id: 'section-2',
|
|
49
|
-
title: 'Configuración',
|
|
50
|
-
subtitle: 'Preferencias del sistema',
|
|
51
|
-
icon: 'settings',
|
|
52
|
-
checked: true,
|
|
53
|
-
open: false,
|
|
54
|
-
info: '5 opciones',
|
|
55
|
-
toolbar: (
|
|
56
|
-
<div style={{ display: 'flex', gap: '0.25rem' }}>
|
|
57
|
-
<Icon icon="edit" size="small" clickable />
|
|
58
|
-
<Icon icon="delete" size="small" clickable />
|
|
59
|
-
</div>
|
|
60
|
-
),
|
|
61
|
-
children: (
|
|
62
|
-
<div style={{ padding: '1rem' }}>
|
|
63
|
-
<p>Configuraciones disponibles:</p>
|
|
64
|
-
<ul>
|
|
65
|
-
<li>Tema oscuro/claro</li>
|
|
66
|
-
<li>Idioma</li>
|
|
67
|
-
<li>Notificaciones</li>
|
|
68
|
-
<li>Privacidad</li>
|
|
69
|
-
<li>Seguridad</li>
|
|
70
|
-
</ul>
|
|
71
|
-
</div>
|
|
72
|
-
)
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
id: 'section-3',
|
|
76
|
-
title: 'Documentos',
|
|
77
|
-
subtitle: 'Archivos y documentos',
|
|
78
|
-
icon: 'folder',
|
|
79
|
-
checked: false,
|
|
80
|
-
open: false,
|
|
81
|
-
info: '12 archivos',
|
|
82
|
-
toolbar: (
|
|
83
|
-
<div style={{ display: 'flex', gap: '0.25rem' }}>
|
|
84
|
-
<Icon icon="upload" size="small" clickable />
|
|
85
|
-
<Icon icon="download" size="small" clickable />
|
|
86
|
-
<Icon icon="share" size="small" clickable />
|
|
87
|
-
</div>
|
|
88
|
-
),
|
|
89
|
-
children: (
|
|
90
|
-
<div style={{ padding: '1rem' }}>
|
|
91
|
-
<p>Documentos recientes:</p>
|
|
92
|
-
<ul>
|
|
93
|
-
<li>Contrato_2024.pdf</li>
|
|
94
|
-
<li>Factura_001.pdf</li>
|
|
95
|
-
<li>Presupuesto_Q1.xlsx</li>
|
|
96
|
-
<li>Presentación.pptx</li>
|
|
97
|
-
</ul>
|
|
98
|
-
</div>
|
|
99
|
-
)
|
|
100
|
-
}
|
|
101
|
-
]
|
|
102
|
-
|
|
103
|
-
const advancedSections = [
|
|
104
|
-
{
|
|
105
|
-
id: 'advanced-1',
|
|
106
|
-
title: 'Sección con Estados Complejos',
|
|
107
|
-
subtitle: 'Demuestra diferentes estados',
|
|
108
|
-
icon: 'science',
|
|
109
|
-
checked: true,
|
|
110
|
-
open: true,
|
|
111
|
-
disabled: false,
|
|
112
|
-
info: 'Activa',
|
|
113
|
-
children: (
|
|
114
|
-
<div style={{ padding: '1rem' }}>
|
|
115
|
-
<p>Esta sección demuestra:</p>
|
|
116
|
-
<ul>
|
|
117
|
-
<li>✅ Estado checked activo</li>
|
|
118
|
-
<li>🔓 Estado open activo</li>
|
|
119
|
-
<li>⚡ Interacciones habilitadas</li>
|
|
120
|
-
<li>🎨 Animaciones activas</li>
|
|
121
|
-
</ul>
|
|
122
|
-
</div>
|
|
123
|
-
)
|
|
124
|
-
},
|
|
125
|
-
{
|
|
126
|
-
id: 'advanced-2',
|
|
127
|
-
title: 'Sección Deshabilitada',
|
|
128
|
-
subtitle: 'No se puede interactuar',
|
|
129
|
-
icon: 'block',
|
|
130
|
-
checked: false,
|
|
131
|
-
open: false,
|
|
132
|
-
disabled: true,
|
|
133
|
-
info: 'Bloqueada',
|
|
134
|
-
children: (
|
|
135
|
-
<div style={{ padding: '1rem' }}>
|
|
136
|
-
<p>Esta sección está deshabilitada y no permite interacciones.</p>
|
|
137
|
-
</div>
|
|
138
|
-
)
|
|
139
|
-
},
|
|
140
|
-
{
|
|
141
|
-
id: 'advanced-3',
|
|
142
|
-
title: 'Sección con Toolbar Complejo',
|
|
143
|
-
subtitle: 'Múltiples acciones disponibles',
|
|
144
|
-
icon: 'build',
|
|
145
|
-
checked: false,
|
|
146
|
-
open: false,
|
|
147
|
-
info: '8 acciones',
|
|
148
|
-
toolbar: (
|
|
149
|
-
<div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }}>
|
|
150
|
-
<Button icon="play_arrow" size="small" />
|
|
151
|
-
<Button icon="pause" size="small" />
|
|
152
|
-
<Button icon="stop" size="small" />
|
|
153
|
-
<span style={{ margin: '0 0.5rem', color: '#666' }}>|</span>
|
|
154
|
-
<Button icon="refresh" size="small" />
|
|
155
|
-
<Button icon="settings" size="small" />
|
|
156
|
-
</div>
|
|
157
|
-
),
|
|
158
|
-
children: (
|
|
159
|
-
<div style={{ padding: '1rem' }}>
|
|
160
|
-
<p>Sección con toolbar complejo que incluye:</p>
|
|
161
|
-
<ul>
|
|
162
|
-
<li>Controles de reproducción</li>
|
|
163
|
-
<li>Acciones de gestión</li>
|
|
164
|
-
<li>Separadores visuales</li>
|
|
165
|
-
<li>Estados interactivos</li>
|
|
166
|
-
</ul>
|
|
167
|
-
</div>
|
|
168
|
-
)
|
|
169
|
-
}
|
|
170
|
-
]
|
|
171
|
-
|
|
172
|
-
return (
|
|
173
|
-
<div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
|
|
174
|
-
<h1>Ejemplos de Componente Accordion Mejorado</h1>
|
|
175
|
-
|
|
176
|
-
<div style={{
|
|
177
|
-
background: '#f8f9fa',
|
|
178
|
-
padding: '1rem',
|
|
179
|
-
borderRadius: '8px',
|
|
180
|
-
marginBottom: '2rem',
|
|
181
|
-
border: '1px solid #e9ecef'
|
|
182
|
-
}}>
|
|
183
|
-
<h3>✅ Mejoras Implementadas:</h3>
|
|
184
|
-
<ul>
|
|
185
|
-
<li>🛡️ <strong>PropTypes completos</strong> - Validación y documentación detallada</li>
|
|
186
|
-
<li>♿ <strong>Accesibilidad completa</strong> - ARIA, navegación por teclado, focus management</li>
|
|
187
|
-
<li>🎯 <strong>Estados avanzados</strong> - disabled, animated, allowMultiple</li>
|
|
188
|
-
<li>🔧 <strong>Callbacks mejorados</strong> - onCheck, onToggle, onSectionChange</li>
|
|
189
|
-
<li>🎨 <strong>CSS mejorado</strong> - Animaciones, estados, responsive, dark mode</li>
|
|
190
|
-
<li>⚡ <strong>Optimización</strong> - useCallback, mejor manejo de eventos</li>
|
|
191
|
-
<li>🧪 <strong>Pruebas exhaustivas</strong> - 18 pruebas que cubren toda la funcionalidad</li>
|
|
192
|
-
</ul>
|
|
193
|
-
</div>
|
|
194
|
-
|
|
195
|
-
{/* Controles de demostración */}
|
|
196
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
197
|
-
<h3>Controles de Demostración</h3>
|
|
198
|
-
<div style={{
|
|
199
|
-
background: '#fff',
|
|
200
|
-
padding: '1rem',
|
|
201
|
-
borderRadius: '8px',
|
|
202
|
-
border: '1px solid #ddd',
|
|
203
|
-
display: 'flex',
|
|
204
|
-
gap: '1rem',
|
|
205
|
-
alignItems: 'center',
|
|
206
|
-
flexWrap: 'wrap'
|
|
207
|
-
}}>
|
|
208
|
-
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
209
|
-
<input
|
|
210
|
-
type="checkbox"
|
|
211
|
-
checked={isDisabled}
|
|
212
|
-
onChange={(e) => setIsDisabled(e.target.checked)}
|
|
213
|
-
/>
|
|
214
|
-
Disabled
|
|
215
|
-
</label>
|
|
216
|
-
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
217
|
-
<input
|
|
218
|
-
type="checkbox"
|
|
219
|
-
checked={allowMultiple}
|
|
220
|
-
onChange={(e) => setAllowMultiple(e.target.checked)}
|
|
221
|
-
/>
|
|
222
|
-
Allow Multiple Open
|
|
223
|
-
</label>
|
|
224
|
-
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
|
225
|
-
<input
|
|
226
|
-
type="checkbox"
|
|
227
|
-
checked={animated}
|
|
228
|
-
onChange={(e) => setAnimated(e.target.checked)}
|
|
229
|
-
/>
|
|
230
|
-
Animated
|
|
231
|
-
</label>
|
|
232
|
-
</div>
|
|
233
|
-
</section>
|
|
234
|
-
|
|
235
|
-
{/* Accordion básico */}
|
|
236
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
237
|
-
<h3>Accordion Básico</h3>
|
|
238
|
-
<div style={{
|
|
239
|
-
background: '#fff',
|
|
240
|
-
border: '1px solid #ddd',
|
|
241
|
-
borderRadius: '8px',
|
|
242
|
-
overflow: 'hidden'
|
|
243
|
-
}}>
|
|
244
|
-
<Accordion
|
|
245
|
-
sections={basicSections}
|
|
246
|
-
disabled={isDisabled}
|
|
247
|
-
allowMultiple={allowMultiple}
|
|
248
|
-
animated={animated}
|
|
249
|
-
ariaLabel="Accordion de configuración básica"
|
|
250
|
-
onCheck={handleSectionCheck}
|
|
251
|
-
onToggle={handleSectionToggle}
|
|
252
|
-
onSectionChange={handleSectionChange}
|
|
253
|
-
/>
|
|
254
|
-
</div>
|
|
255
|
-
</section>
|
|
256
|
-
|
|
257
|
-
{/* Accordion avanzado */}
|
|
258
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
259
|
-
<h3>Accordion con Estados Avanzados</h3>
|
|
260
|
-
<div style={{
|
|
261
|
-
background: '#fff',
|
|
262
|
-
border: '1px solid #ddd',
|
|
263
|
-
borderRadius: '8px',
|
|
264
|
-
overflow: 'hidden'
|
|
265
|
-
}}>
|
|
266
|
-
<Accordion
|
|
267
|
-
sections={advancedSections}
|
|
268
|
-
disabled={isDisabled}
|
|
269
|
-
allowMultiple={allowMultiple}
|
|
270
|
-
animated={animated}
|
|
271
|
-
ariaLabel="Accordion con estados avanzados"
|
|
272
|
-
onCheck={handleSectionCheck}
|
|
273
|
-
onToggle={handleSectionToggle}
|
|
274
|
-
onSectionChange={handleSectionChange}
|
|
275
|
-
/>
|
|
276
|
-
</div>
|
|
277
|
-
</section>
|
|
278
|
-
|
|
279
|
-
{/* Demostración de accesibilidad */}
|
|
280
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
281
|
-
<h3>Demostración de Accesibilidad</h3>
|
|
282
|
-
<div style={{
|
|
283
|
-
background: '#e8f5e8',
|
|
284
|
-
padding: '1rem',
|
|
285
|
-
borderRadius: '4px',
|
|
286
|
-
border: '1px solid #c8e6c9'
|
|
287
|
-
}}>
|
|
288
|
-
<p><strong>Prueba la accesibilidad:</strong></p>
|
|
289
|
-
<ol>
|
|
290
|
-
<li>Usa <kbd>Tab</kbd> para navegar entre headers de secciones</li>
|
|
291
|
-
<li>Usa <kbd>Enter</kbd> o <kbd>Espacio</kbd> para expandir/contraer secciones</li>
|
|
292
|
-
<li>Observa los indicadores de focus</li>
|
|
293
|
-
<li>Los lectores de pantalla anunciarán estados (expandido/contraído)</li>
|
|
294
|
-
<li>Cada sección tiene IDs únicos para navegación</li>
|
|
295
|
-
<li>Los toolbars tienen role="toolbar" para mejor navegación</li>
|
|
296
|
-
</ol>
|
|
297
|
-
</div>
|
|
298
|
-
</section>
|
|
299
|
-
|
|
300
|
-
{/* Comparación antes/después */}
|
|
301
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
302
|
-
<h3>Comparación: Accordion Original vs Mejorado</h3>
|
|
303
|
-
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
|
|
304
|
-
<div style={{
|
|
305
|
-
background: '#ffebee',
|
|
306
|
-
padding: '1rem',
|
|
307
|
-
borderRadius: '4px',
|
|
308
|
-
border: '1px solid #ffcdd2'
|
|
309
|
-
}}>
|
|
310
|
-
<h4>❌ Accordion Original</h4>
|
|
311
|
-
<ul>
|
|
312
|
-
<li>Sin PropTypes</li>
|
|
313
|
-
<li>Sin accesibilidad</li>
|
|
314
|
-
<li>Key usando index</li>
|
|
315
|
-
<li>Concatenación de strings frágil</li>
|
|
316
|
-
<li>Sin validación</li>
|
|
317
|
-
<li>Funciones no optimizadas</li>
|
|
318
|
-
<li>CSS básico sin estados</li>
|
|
319
|
-
<li>Sin animaciones</li>
|
|
320
|
-
<li>Renderizado condicional con strings</li>
|
|
321
|
-
</ul>
|
|
322
|
-
</div>
|
|
323
|
-
<div style={{
|
|
324
|
-
background: '#e8f5e8',
|
|
325
|
-
padding: '1rem',
|
|
326
|
-
borderRadius: '4px',
|
|
327
|
-
border: '1px solid #c8e6c9'
|
|
328
|
-
}}>
|
|
329
|
-
<h4>✅ Accordion Mejorado</h4>
|
|
330
|
-
<ul>
|
|
331
|
-
<li>PropTypes completos</li>
|
|
332
|
-
<li>Accesibilidad total (WCAG 2.1 AA)</li>
|
|
333
|
-
<li>Keys usando section.id</li>
|
|
334
|
-
<li>Generación robusta de clases</li>
|
|
335
|
-
<li>Validación de props</li>
|
|
336
|
-
<li>useCallback optimizado</li>
|
|
337
|
-
<li>CSS con estados y animaciones</li>
|
|
338
|
-
<li>Transiciones suaves</li>
|
|
339
|
-
<li>Renderizado condicional correcto</li>
|
|
340
|
-
</ul>
|
|
341
|
-
</div>
|
|
342
|
-
</div>
|
|
343
|
-
</section>
|
|
344
|
-
|
|
345
|
-
{/* Características técnicas */}
|
|
346
|
-
<section style={{ marginBottom: '2rem' }}>
|
|
347
|
-
<h3>Características Técnicas Implementadas</h3>
|
|
348
|
-
<div style={{
|
|
349
|
-
background: '#fff3cd',
|
|
350
|
-
padding: '1rem',
|
|
351
|
-
borderRadius: '4px',
|
|
352
|
-
border: '1px solid #ffeaa7'
|
|
353
|
-
}}>
|
|
354
|
-
<h4>🔧 Nuevas Props:</h4>
|
|
355
|
-
<ul>
|
|
356
|
-
<li><code>disabled</code> - Deshabilita todo el accordion</li>
|
|
357
|
-
<li><code>allowMultiple</code> - Permite múltiples secciones abiertas</li>
|
|
358
|
-
<li><code>animated</code> - Controla las animaciones</li>
|
|
359
|
-
<li><code>ariaLabel</code> - Etiqueta para accesibilidad</li>
|
|
360
|
-
<li><code>onToggle</code> - Callback específico para toggle</li>
|
|
361
|
-
<li><code>onSectionChange</code> - Callback unificado para cambios</li>
|
|
362
|
-
</ul>
|
|
363
|
-
|
|
364
|
-
<h4>♿ Accesibilidad:</h4>
|
|
365
|
-
<ul>
|
|
366
|
-
<li>ARIA completo (expanded, controls, labelledby, hidden)</li>
|
|
367
|
-
<li>Navegación por teclado (Enter, Space, Tab)</li>
|
|
368
|
-
<li>Focus management con indicadores visuales</li>
|
|
369
|
-
<li>IDs únicos para cada sección</li>
|
|
370
|
-
<li>Roles semánticos (button, region, toolbar)</li>
|
|
371
|
-
<li>Estados anunciados por lectores de pantalla</li>
|
|
372
|
-
</ul>
|
|
373
|
-
|
|
374
|
-
<h4>🎨 CSS Mejorado:</h4>
|
|
375
|
-
<ul>
|
|
376
|
-
<li>Animaciones suaves con CSS transitions</li>
|
|
377
|
-
<li>Estados hover, focus, disabled</li>
|
|
378
|
-
<li>Responsive design</li>
|
|
379
|
-
<li>Dark mode support</li>
|
|
380
|
-
<li>High contrast mode</li>
|
|
381
|
-
<li>Reduced motion support</li>
|
|
382
|
-
<li>Print styles</li>
|
|
383
|
-
</ul>
|
|
384
|
-
</div>
|
|
385
|
-
</section>
|
|
386
|
-
</div>
|
|
387
|
-
)
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
export default AccordionExamples
|