ywana-core8 0.1.105 → 0.1.106

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 (29) hide show
  1. package/package.json +1 -1
  2. package/src/html/radio-example.js +120 -0
  3. package/src/html/radio-inline-feature.md +119 -0
  4. package/src/html/radio-inline-test.js +149 -0
  5. package/src/html/radio.css +34 -0
  6. package/src/html/radio.js +5 -0
  7. package/src/html/radio.test.js +26 -0
  8. package/dist/index.cjs +0 -36725
  9. package/dist/index.cjs.map +0 -1
  10. package/dist/index.css +0 -12371
  11. package/dist/index.css.map +0 -1
  12. package/dist/index.modern.js +0 -36561
  13. package/dist/index.modern.js.map +0 -1
  14. package/dist/index.umd.js +0 -36720
  15. package/dist/index.umd.js.map +0 -1
  16. package/src/html/chip.example.js.backup +0 -355
  17. package/src/html/components.example.js.backup +0 -492
  18. package/src/html/form.example.js.backup +0 -385
  19. package/src/html/header2.example.js.backup +0 -411
  20. package/src/html/icon.example.js.backup +0 -268
  21. package/src/html/list.example.js.backup +0 -404
  22. package/src/html/progress.example.js.backup +0 -424
  23. package/src/html/property.example.js.backup +0 -553
  24. package/src/html/radio.example.js.backup +0 -389
  25. package/src/html/section.example.js.backup +0 -99
  26. package/src/html/switch.example.js.backup +0 -461
  27. package/src/html/textfield2.example.js.backup +0 -1370
  28. package/src/html/tokenfield.example.js.backup +0 -503
  29. package/src/html/tree.example.js.backup +0 -475
package/src/html/header2.example.js.backup DELETED
@@ -1,411 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Header2 } from './header2'
3
- import { Button } from './button'
4
- import { Icon } from './icon'
5
-
6
- /**
7
- * Ejemplos de uso del componente Header2 mejorado
8
- * Mantiene 100% compatibilidad visual con Header original
9
- */
10
- export const Header2Examples = () => {
11
- const [isLoading, setIsLoading] = useState(false)
12
- const [notifications, setNotifications] = useState(3)
13
-
14
- const handleIconClick = () => {
15
- console.log('Icon clicked!')
16
- }
17
-
18
- const handleHeaderClick = () => {
19
- console.log('Header clicked!')
20
- }
21
-
22
- const handleMenuClick = () => {
23
- console.log('Menu clicked!')
24
- }
25
-
26
- const handleNotificationClick = () => {
27
- setNotifications(prev => Math.max(0, prev - 1))
28
- }
29
-
30
- const handleRefresh = () => {
31
- setIsLoading(true)
32
- setTimeout(() => setIsLoading(false), 2000)
33
- }
34
-
35
- return (
36
- <div style={{ padding: '2rem', maxWidth: '1200px', maxHeight: '100vh', overflow: 'auto' }}>
37
- <h1>Ejemplos de Componente Header2 Mejorado</h1>
38
-
39
- <div style={{
40
- background: '#f8f9fa',
41
- padding: '1rem',
42
- borderRadius: '8px',
43
- marginBottom: '2rem',
44
- border: '1px solid #e9ecef'
45
- }}>
46
- <h3>✅ Mejoras Implementadas (Manteniendo Compatibilidad Visual):</h3>
47
- <ul>
48
- <li>🛡️ <strong>PropTypes completos</strong> - Validación y documentación</li>
49
- <li>♿ <strong>Accesibilidad completa</strong> - ARIA, roles, focus management</li>
50
- <li>🎯 <strong>Estados avanzados</strong> - disabled, loading con indicadores</li>
51
- <li>🔧 <strong>Manejo de eventos mejorado</strong> - onClick, onIconClick separados</li>
52
- <li>📏 <strong>Medidas exactas preservadas</strong> - 3rem, 2.4rem, 4rem, 12.8rem</li>
53
- <li>🎨 <strong>CSS corregido</strong> - Selector fijo, mejores estados</li>
54
- <li>📱 <strong>Responsive mejorado</strong> - Mantiene dimensiones en móviles</li>
55
- <li>🧪 <strong>Pruebas exhaustivas</strong> - 13 pruebas que verifican compatibilidad</li>
56
- </ul>
57
- </div>
58
-
59
- {/* Headers básicos */}
60
- <section style={{ marginBottom: '2rem' }}>
61
- <h3>Headers Básicos (Altura: 3rem)</h3>
62
- <div style={{
63
- background: '#fff',
64
- border: '1px solid #ddd',
65
- borderRadius: '8px',
66
- overflow: 'hidden'
67
- }}>
68
- <Header2
69
- title="Header Básico"
70
- icon="home"
71
- clickable={true}
72
- onIconClick={handleIconClick}
73
- >
74
- <Button icon="more_vert" action={handleMenuClick} />
75
- </Header2>
76
-
77
- <Header2
78
- title="Header con Imagen"
79
- iconSrc="https://via.placeholder.com/40x40/2196f3/ffffff?text=A"
80
- clickable={true}
81
- onIconClick={handleIconClick}
82
- >
83
- <Button icon="search" />
84
- <Button icon="notifications" />
85
- </Header2>
86
-
87
- <Header2
88
- title="Header Solo Título"
89
- onClick={handleHeaderClick}
90
- >
91
- <Button icon="settings" />
92
- </Header2>
93
- </div>
94
- </section>
95
-
96
- {/* Headers con temas */}
97
- <section style={{ marginBottom: '2rem' }}>
98
- <h3>Headers con Temas</h3>
99
- <div style={{
100
- background: '#fff',
101
- border: '1px solid #ddd',
102
- borderRadius: '8px',
103
- overflow: 'hidden'
104
- }}>
105
- <Header2
106
- title="Header Primary"
107
- icon="dashboard"
108
- primary={true}
109
- clickable={true}
110
- onIconClick={handleIconClick}
111
- >
112
- <Button icon="account_circle" />
113
- <Button icon="logout" />
114
- </Header2>
115
-
116
- <Header2
117
- title="Header Secondary"
118
- icon="business"
119
- secondary={true}
120
- clickable={true}
121
- onIconClick={handleIconClick}
122
- >
123
- <Button icon="help" />
124
- <Button icon="info" />
125
- </Header2>
126
- </div>
127
- </section>
128
-
129
- {/* Variantes de tamaño */}
130
- <section style={{ marginBottom: '2rem' }}>
131
- <h3>Variantes de Tamaño (Dimensiones Exactas Preservadas)</h3>
132
- <div style={{
133
- background: '#fff',
134
- border: '1px solid #ddd',
135
- borderRadius: '8px',
136
- overflow: 'hidden'
137
- }}>
138
- <Header2
139
- title="Header Dense (2.4rem)"
140
- icon="compress"
141
- dense={true}
142
- clickable={true}
143
- onIconClick={handleIconClick}
144
- >
145
- <Button icon="close" size="small" />
146
- </Header2>
147
-
148
- <Header2
149
- title="Header Caption (4rem)"
150
- icon="article"
151
- caption={true}
152
- clickable={true}
153
- onIconClick={handleIconClick}
154
- >
155
- <Button icon="edit" />
156
- <Button icon="share" />
157
- </Header2>
158
-
159
- <Header2
160
- title="Header Prominent (12.8rem)"
161
- icon="landscape"
162
- prominent={true}
163
- primary={true}
164
- img="https://via.placeholder.com/800x200/1976d2/ffffff?text=Background+Image"
165
- clickable={true}
166
- onIconClick={handleIconClick}
167
- >
168
- <Button icon="favorite" />
169
- <Button icon="bookmark" />
170
- </Header2>
171
- </div>
172
- </section>
173
-
174
- {/* Estados especiales */}
175
- <section style={{ marginBottom: '2rem' }}>
176
- <h3>Estados Especiales</h3>
177
- <div style={{
178
- background: '#fff',
179
- border: '1px solid #ddd',
180
- borderRadius: '8px',
181
- overflow: 'hidden'
182
- }}>
183
- <Header2
184
- title="Header con Loading"
185
- icon="refresh"
186
- loading={isLoading}
187
- clickable={true}
188
- onIconClick={handleRefresh}
189
- >
190
- <Button
191
- icon="refresh"
192
- action={handleRefresh}
193
- disabled={isLoading}
194
- />
195
- </Header2>
196
-
197
- <Header2
198
- title="Header Disabled"
199
- icon="block"
200
- disabled={true}
201
- clickable={true}
202
- onIconClick={handleIconClick}
203
- >
204
- <Button icon="settings" disabled={true} />
205
- </Header2>
206
-
207
- <Header2
208
- title="Header con Notificaciones"
209
- icon="notifications"
210
- clickable={true}
211
- onIconClick={handleNotificationClick}
212
- >
213
- <div style={{ position: 'relative' }}>
214
- <Button icon="notifications" action={handleNotificationClick} />
215
- {notifications > 0 && (
216
- <span style={{
217
- position: 'absolute',
218
- top: '-8px',
219
- right: '-8px',
220
- background: '#f44336',
221
- color: 'white',
222
- borderRadius: '50%',
223
- width: '20px',
224
- height: '20px',
225
- display: 'flex',
226
- alignItems: 'center',
227
- justifyContent: 'center',
228
- fontSize: '0.7rem',
229
- fontWeight: 'bold'
230
- }}>
231
- {notifications}
232
- </span>
233
- )}
234
- </div>
235
- </Header2>
236
- </div>
237
- </section>
238
-
239
- {/* Headers con acciones complejas */}
240
- <section style={{ marginBottom: '2rem' }}>
241
- <h3>Headers con Acciones Complejas</h3>
242
- <div style={{
243
- background: '#fff',
244
- border: '1px solid #ddd',
245
- borderRadius: '8px',
246
- overflow: 'hidden'
247
- }}>
248
- <Header2
249
- title="Dashboard Principal"
250
- icon="dashboard"
251
- primary={true}
252
- clickable={true}
253
- onIconClick={handleIconClick}
254
- >
255
- <Button icon="search" />
256
- <Button icon="filter_list" />
257
- <Button icon="view_list" />
258
- <Button icon="view_module" />
259
- <Button icon="more_vert" action={handleMenuClick} />
260
- </Header2>
261
-
262
- <Header2
263
- title="Editor de Documentos"
264
- icon="edit"
265
- caption={true}
266
- clickable={true}
267
- onIconClick={handleIconClick}
268
- >
269
- <Button label="Guardar" raised={true} />
270
- <Button icon="undo" />
271
- <Button icon="redo" />
272
- <Button icon="format_bold" />
273
- <Button icon="format_italic" />
274
- </Header2>
275
- </div>
276
- </section>
277
-
278
- {/* Demostración de accesibilidad */}
279
- <section style={{ marginBottom: '2rem' }}>
280
- <h3>Demostración de Accesibilidad</h3>
281
- <div style={{
282
- background: '#e8f5e8',
283
- padding: '1rem',
284
- borderRadius: '4px',
285
- border: '1px solid #c8e6c9'
286
- }}>
287
- <p><strong>Prueba la accesibilidad:</strong></p>
288
- <ol>
289
- <li>Usa <kbd>Tab</kbd> para navegar entre elementos del header</li>
290
- <li>Usa <kbd>Enter</kbd> o <kbd>Espacio</kbd> para activar botones</li>
291
- <li>Observa los indicadores de focus</li>
292
- <li>Los lectores de pantalla anunciarán roles y estados</li>
293
- <li>Headers tienen role="banner" por defecto</li>
294
- </ol>
295
-
296
- <div style={{ marginTop: '1rem' }}>
297
- <Header2
298
- title="Header Accesible"
299
- icon="accessibility"
300
- ariaLabel="Header principal de la aplicación"
301
- role="banner"
302
- clickable={true}
303
- onIconClick={handleIconClick}
304
- >
305
- <Button icon="help" ariaLabel="Ayuda" />
306
- <Button icon="settings" ariaLabel="Configuración" />
307
- </Header2>
308
- </div>
309
- </div>
310
- </section>
311
-
312
- {/* Comparación antes/después */}
313
- <section style={{ marginBottom: '2rem' }}>
314
- <h3>Comparación: Header Original vs Header2</h3>
315
- <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
316
- <div style={{
317
- background: '#ffebee',
318
- padding: '1rem',
319
- borderRadius: '4px',
320
- border: '1px solid #ffcdd2'
321
- }}>
322
- <h4>❌ Header Original</h4>
323
- <ul>
324
- <li>Sin PropTypes</li>
325
- <li>Sin accesibilidad</li>
326
- <li>CSS selector incorrecto</li>
327
- <li>Sin estados avanzados</li>
328
- <li>Concatenación de strings frágil</li>
329
- <li>Sin manejo de eventos separado</li>
330
- <li>Espaciado con &nbsp;</li>
331
- <li>Sin responsive mejorado</li>
332
- </ul>
333
- </div>
334
- <div style={{
335
- background: '#e8f5e8',
336
- padding: '1rem',
337
- borderRadius: '4px',
338
- border: '1px solid #c8e6c9'
339
- }}>
340
- <h4>✅ Header2 Mejorado</h4>
341
- <ul>
342
- <li>PropTypes completos</li>
343
- <li>Accesibilidad total (WCAG 2.1 AA)</li>
344
- <li>CSS corregido y mejorado</li>
345
- <li>Estados disabled, loading</li>
346
- <li>Generación robusta de clases</li>
347
- <li>onClick y onIconClick separados</li>
348
- <li>Espaciado con CSS gap</li>
349
- <li>Responsive con medidas preservadas</li>
350
- </ul>
351
- </div>
352
- </div>
353
- </section>
354
-
355
- {/* Medidas exactas preservadas */}
356
- <section style={{ marginBottom: '2rem' }}>
357
- <h3>🔒 Medidas Exactas Preservadas</h3>
358
- <div style={{
359
- background: '#fff3cd',
360
- padding: '1rem',
361
- borderRadius: '4px',
362
- border: '1px solid #ffeaa7'
363
- }}>
364
- <p><strong>Garantía de Compatibilidad Visual:</strong></p>
365
- <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '1rem' }}>
366
- <thead>
367
- <tr style={{ background: '#f8f9fa' }}>
368
- <th style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Variante</th>
369
- <th style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Altura Original</th>
370
- <th style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Altura Header2</th>
371
- <th style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Estado</th>
372
- </tr>
373
- </thead>
374
- <tbody>
375
- <tr>
376
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Normal</td>
377
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>min-height: 3rem</td>
378
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>min-height: 3rem</td>
379
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>✅ Idéntico</td>
380
- </tr>
381
- <tr>
382
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Dense</td>
383
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 2.4rem</td>
384
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 2.4rem</td>
385
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>✅ Idéntico</td>
386
- </tr>
387
- <tr>
388
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Caption</td>
389
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 4rem</td>
390
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 4rem</td>
391
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>✅ Idéntico</td>
392
- </tr>
393
- <tr>
394
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>Prominent</td>
395
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 12.8rem</td>
396
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>height: 12.8rem</td>
397
- <td style={{ padding: '0.5rem', border: '1px solid #ddd' }}>✅ Idéntico</td>
398
- </tr>
399
- </tbody>
400
- </table>
401
- <p style={{ marginTop: '1rem', fontSize: '0.9rem', color: '#856404' }}>
402
- <strong>Nota:</strong> Todas las medidas, espaciados y comportamientos visuales
403
- se mantienen exactamente iguales para garantizar que no se rompan diseños existentes.
404
- </p>
405
- </div>
406
- </section>
407
- </div>
408
- )
409
- }
410
-
411
- export default Header2Examples
package/src/html/icon.example.js.backup DELETED
@@ -1,268 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Icon } from './icon'
3
-
4
- /**
5
- * Ejemplos de uso del componente Icon mejorado
6
- */
7
- export const IconExamples = () => {
8
- const [clickCount, setClickCount] = useState(0)
9
- const [isDisabled, setIsDisabled] = useState(false)
10
-
11
- const handleClick = () => {
12
- setClickCount(prev => prev + 1)
13
- }
14
-
15
- const toggleDisabled = () => {
16
- setIsDisabled(prev => !prev)
17
- }
18
-
19
- return (
20
- <div style={{ padding: '2rem', maxWidth: '800px' }}>
21
- <h1>Ejemplos del Componente Icon Mejorado</h1>
22
-
23
- <div style={{
24
- background: '#f8f9fa',
25
- padding: '1rem',
26
- borderRadius: '8px',
27
- marginBottom: '2rem',
28
- border: '1px solid #e9ecef'
29
- }}>
30
- <h3>✅ Mejoras Implementadas:</h3>
31
- <ul>
32
- <li>🛡️ <strong>Manejo seguro de className</strong> - No falla con valores undefined</li>
33
- <li>♿ <strong>Accesibilidad mejorada</strong> - Atributos ARIA y soporte de teclado</li>
34
- <li>📝 <strong>PropTypes y documentación</strong> - Validación y documentación completa</li>
35
- <li>🎯 <strong>Validación de props</strong> - Advertencias para props requeridos</li>
36
- <li>🎨 <strong>CSS mejorado</strong> - Cursor consistente y estados de focus</li>
37
- <li>⌨️ <strong>Soporte de teclado</strong> - Enter y Espacio para activar</li>
38
- <li>🧪 <strong>Pruebas unitarias</strong> - 11 pruebas que cubren toda la funcionalidad</li>
39
- </ul>
40
- </div>
41
-
42
- {/* Iconos básicos */}
43
- <section style={{ marginBottom: '2rem' }}>
44
- <h3>Iconos Básicos</h3>
45
- <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
46
- <Icon icon="home" />
47
- <Icon icon="settings" />
48
- <Icon icon="favorite" />
49
- <Icon icon="info" />
50
- </div>
51
- <p><em>Iconos simples sin interacción</em></p>
52
- </section>
53
-
54
- {/* Diferentes tamaños */}
55
- <section style={{ marginBottom: '2rem' }}>
56
- <h3>Diferentes Tamaños</h3>
57
- <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
58
- <Icon icon="star" size="small" />
59
- <Icon icon="star" size="normal" />
60
- <Icon icon="star" size="large" />
61
- </div>
62
- <p><em>Tamaños: small, normal, large</em></p>
63
- </section>
64
-
65
- {/* Iconos clickables */}
66
- <section style={{ marginBottom: '2rem' }}>
67
- <h3>Iconos Clickables</h3>
68
- <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
69
- <Icon
70
- icon="thumb_up"
71
- clickable
72
- action={handleClick}
73
- tooltip={{
74
- text: 'Hacer clic para incrementar',
75
- top: '-3rem',
76
- left: '-2rem'
77
- }}
78
- />
79
- <Icon
80
- icon="refresh"
81
- clickable
82
- action={() => setClickCount(0)}
83
- tooltip={{
84
- text: 'Resetear contador',
85
- top: '-3rem',
86
- left: '-2rem'
87
- }}
88
- />
89
- <span>Clics: {clickCount}</span>
90
- </div>
91
- <p><em>Prueba hacer clic en los iconos o usar Enter/Espacio cuando tengan focus</em></p>
92
- </section>
93
-
94
- {/* Estados disabled */}
95
- <section style={{ marginBottom: '2rem' }}>
96
- <h3>Estados Disabled</h3>
97
- <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
98
- <Icon
99
- icon="toggle_on"
100
- clickable
101
- action={toggleDisabled}
102
- tooltip={{
103
- text: 'Alternar estado disabled',
104
- top: '-3rem',
105
- left: '-3rem'
106
- }}
107
- />
108
- <Icon
109
- icon="delete"
110
- clickable
111
- disabled={isDisabled}
112
- action={() => alert('¡Eliminado!')}
113
- tooltip={{
114
- text: isDisabled ? 'Icono deshabilitado' : 'Eliminar elemento',
115
- top: '-3rem',
116
- left: '-2rem'
117
- }}
118
- />
119
- <span>Estado: {isDisabled ? 'Disabled' : 'Enabled'}</span>
120
- </div>
121
- <p><em>El primer icono alterna el estado del segundo</em></p>
122
- </section>
123
-
124
- {/* Iconos con tooltips */}
125
- <section style={{ marginBottom: '2rem' }}>
126
- <h3>Iconos con Tooltips</h3>
127
- <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
128
- <Icon
129
- icon="help"
130
- clickable
131
- tooltip={{
132
- text: 'Ayuda y soporte',
133
- top: '-3rem',
134
- left: '-2rem'
135
- }}
136
- action={() => alert('¡Ayuda!')}
137
- />
138
- <Icon
139
- icon="download"
140
- clickable
141
- tooltip={{
142
- text: 'Descargar archivo',
143
- top: '-3rem',
144
- left: '-2rem'
145
- }}
146
- action={() => alert('¡Descargando!')}
147
- />
148
- <Icon
149
- icon="share"
150
- clickable
151
- tooltip={{
152
- text: 'Compartir contenido',
153
- top: '-3rem',
154
- left: '-2rem'
155
- }}
156
- action={() => alert('¡Compartiendo!')}
157
- />
158
- </div>
159
- <p><em>Tooltips posicionados para no interferir con los clics</em></p>
160
- </section>
161
-
162
- {/* Accesibilidad */}
163
- <section style={{ marginBottom: '2rem' }}>
164
- <h3>Accesibilidad Mejorada</h3>
165
- <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
166
- <Icon
167
- icon="accessibility"
168
- clickable
169
- ariaLabel="Configuración de accesibilidad"
170
- action={() => alert('Configuración de accesibilidad')}
171
- />
172
- <Icon
173
- icon="visibility"
174
- clickable
175
- ariaLabel="Alternar visibilidad"
176
- action={() => alert('Visibilidad alternada')}
177
- />
178
- <Icon
179
- icon="hearing"
180
- clickable
181
- ariaLabel="Configuración de audio"
182
- action={() => alert('Configuración de audio')}
183
- />
184
- </div>
185
- <p><em>Iconos con etiquetas ARIA personalizadas y soporte completo de teclado</em></p>
186
- </section>
187
-
188
- {/* Clases personalizadas */}
189
- <section style={{ marginBottom: '2rem' }}>
190
- <h3>Clases CSS Personalizadas</h3>
191
- <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
192
- <Icon
193
- icon="palette"
194
- className="custom-icon-style"
195
- style={{ color: '#e91e63' }}
196
- />
197
- <Icon
198
- icon="brush"
199
- className="another-custom-class"
200
- style={{ color: '#2196f3' }}
201
- />
202
- <Icon
203
- icon="color_lens"
204
- className={undefined} // Manejo seguro de undefined
205
- style={{ color: '#4caf50' }}
206
- />
207
- </div>
208
- <p><em>Manejo seguro de className, incluso con valores undefined</em></p>
209
- </section>
210
-
211
- {/* Demostración de validación */}
212
- <section style={{ marginBottom: '2rem' }}>
213
- <h3>Validación de Props</h3>
214
- <div style={{
215
- background: '#fff3cd',
216
- padding: '1rem',
217
- borderRadius: '4px',
218
- border: '1px solid #ffeaa7'
219
- }}>
220
- <p><strong>Prueba en la consola del navegador:</strong></p>
221
- <p>El componente ahora valida que la prop <code>icon</code> sea requerida y muestra advertencias apropiadas.</p>
222
- <p>También valida tipos de props en desarrollo para detectar errores temprano.</p>
223
- </div>
224
- </section>
225
-
226
- {/* Comparación antes/después */}
227
- <section>
228
- <h3>Comparación: Antes vs Después</h3>
229
- <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
230
- <div style={{
231
- background: '#ffebee',
232
- padding: '1rem',
233
- borderRadius: '4px',
234
- border: '1px solid #ffcdd2'
235
- }}>
236
- <h4>❌ Antes</h4>
237
- <ul>
238
- <li>className undefined causaba errores</li>
239
- <li>Sin validación de props</li>
240
- <li>Sin accesibilidad</li>
241
- <li>Sin soporte de teclado</li>
242
- <li>Cursor inconsistente</li>
243
- <li>Sin documentación</li>
244
- </ul>
245
- </div>
246
- <div style={{
247
- background: '#e8f5e8',
248
- padding: '1rem',
249
- borderRadius: '4px',
250
- border: '1px solid #c8e6c9'
251
- }}>
252
- <h4>✅ Después</h4>
253
- <ul>
254
- <li>Manejo seguro de todas las props</li>
255
- <li>PropTypes completos</li>
256
- <li>Atributos ARIA apropiados</li>
257
- <li>Soporte completo de teclado</li>
258
- <li>Estados visuales consistentes</li>
259
- <li>Documentación y ejemplos</li>
260
- </ul>
261
- </div>
262
- </div>
263
- </section>
264
- </div>
265
- )
266
- }
267
-
268
- export default IconExamples