ywana-core8 0.1.86 → 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.
- 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/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,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
|