ywana-core8 0.1.103 → 0.2.1

package/src/html/Radio.stories.jsx

@@ -0,0 +1,289 @@
+import React, { useState } from 'react'
+import { RadioButton, RadioGroup } from './radio.js'
+
+/**
+ * RadioButtons individuales
+ */
+export const IndividualRadioButtons = () => {
+  const [theme, setTheme] = useState('light')
+
+  const handleChange = (id, value) => {
+    setTheme(value)
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>RadioButtons Individuales</h3>
+      <div style={{
+        background: '#fff',
+        padding: '1.5rem',
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <p><strong>Tema de la aplicación:</strong></p>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <RadioButton 
+            id="theme-light"
+            name="theme"
+            label="Tema claro"
+            value="light"
+            checked={theme === 'light'}
+            onChange={handleChange}
+          />
+          <RadioButton 
+            id="theme-dark"
+            name="theme"
+            label="Tema oscuro"
+            value="dark"
+            checked={theme === 'dark'}
+            onChange={handleChange}
+          />
+          <RadioButton 
+            id="theme-auto"
+            name="theme"
+            label="Automático (según sistema)"
+            value="auto"
+            checked={theme === 'auto'}
+            onChange={handleChange}
+          />
+        </div>
+        <p style={{ marginTop: '1rem', color: '#666' }}>
+          Seleccionado: <strong>{theme}</strong>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * RadioGroups básicos
+ */
+export const BasicRadioGroups = () => {
+  const [settings, setSettings] = useState({
+    language: 'es',
+    notifications: 'email'
+  })
+
+  const handleChange = (id, value) => {
+    setSettings(prev => ({ ...prev, [id]: value }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>RadioGroups Básicos</h3>
+      
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div style={{
+          background: '#fff', 
+          padding: '1.5rem', 
+          borderRadius: '8px',
+          border: '1px solid #ddd'
+        }}>
+          <RadioGroup
+            id="language"
+            label="Idioma de la interfaz"
+            value={settings.language}
+            onChange={handleChange}
+            options={[
+              { id: 'es', label: 'Español', value: 'es' },
+              { id: 'en', label: 'English', value: 'en' },
+              { id: 'fr', label: 'Français', value: 'fr' },
+              { id: 'de', label: 'Deutsch', value: 'de' }
+            ]}
+          />
+        </div>
+
+        <div style={{
+          background: '#fff', 
+          padding: '1.5rem', 
+          borderRadius: '8px',
+          border: '1px solid #ddd'
+        }}>
+          <RadioGroup
+            id="notifications"
+            label="Método de notificaciones"
+            value={settings.notifications}
+            onChange={handleChange}
+            required={true}
+            options={[
+              { id: 'email', label: 'Email', value: 'email' },
+              { id: 'sms', label: 'SMS', value: 'sms' },
+              { id: 'push', label: 'Notificaciones push', value: 'push' },
+              { id: 'none', label: 'Sin notificaciones', value: 'none' }
+            ]}
+          />
+        </div>
+      </div>
+
+      <div style={{ marginTop: '1rem', padding: '1rem', background: '#f8f9fa', borderRadius: '4px' }}>
+        <strong>Estado actual:</strong>
+        <pre>{JSON.stringify(settings, null, 2)}</pre>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Estados especiales
+ */
+export const SpecialStates = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Estados Especiales</h3>
+    <div style={{
+      background: '#fff', 
+      padding: '1.5rem', 
+      borderRadius: '8px',
+      border: '1px solid #ddd'
+    }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem' }}>
+        {/* Disabled */}
+        <div>
+          <h4>RadioGroup Deshabilitado</h4>
+          <RadioGroup
+            id="disabled-example"
+            label="Configuración avanzada"
+            value="option1"
+            disabled={true}
+            options={[
+              { id: 'opt1', label: 'Opción 1', value: 'option1' },
+              { id: 'opt2', label: 'Opción 2', value: 'option2' }
+            ]}
+          />
+        </div>
+
+        {/* ReadOnly */}
+        <div>
+          <h4>RadioGroup Solo Lectura</h4>
+          <RadioGroup
+            id="readonly-example"
+            label="Configuración del sistema"
+            value="option2"
+            readOnly={true}
+            options={[
+              { id: 'opt1', label: 'Opción 1', value: 'option1' },
+              { id: 'opt2', label: 'Opción 2', value: 'option2' }
+            ]}
+          />
+        </div>
+
+        {/* Con Error */}
+        <div>
+          <h4>RadioGroup con Error</h4>
+          <RadioGroup
+            id="error-example"
+            label="Configuración requerida"
+            value=""
+            error="Debe seleccionar una opción"
+            options={[
+              { id: 'opt1', label: 'Opción 1', value: 'option1' },
+              { id: 'opt2', label: 'Opción 2', value: 'option2' }
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+/**
+ * Configuración compleja
+ */
+export const ComplexConfiguration = () => {
+  const [settings, setSettings] = useState({
+    privacy: 'friends',
+    size: 'medium'
+  })
+
+  const handleChange = (id, value) => {
+    setSettings(prev => ({ ...prev, [id]: value }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Configuración Compleja</h3>
+      <div style={{
+        background: '#fff', 
+        padding: '1.5rem', 
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '2rem' }}>
+          <RadioGroup
+            id="privacy"
+            label="Configuración de privacidad"
+            value={settings.privacy}
+            onChange={handleChange}
+            required={true}
+            options={[
+              { id: 'public', label: 'Público', value: 'public' },
+              { id: 'friends', label: 'Solo amigos', value: 'friends' },
+              { id: 'private', label: 'Privado', value: 'private' }
+            ]}
+          />
+
+          <RadioGroup
+            id="size"
+            label="Tamaño de la interfaz"
+            value={settings.size}
+            onChange={handleChange}
+            options={[
+              { id: 'small', label: 'Pequeño', value: 'small' },
+              { id: 'medium', label: 'Mediano', value: 'medium' },
+              { id: 'large', label: 'Grande', value: 'large' }
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Accesibilidad
+ */
+export const AccessibilityDemo = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Demostración de Accesibilidad</h3>
+    <div style={{
+      background: '#fff', 
+      padding: '1.5rem', 
+      borderRadius: '8px',
+      border: '1px solid #ddd'
+    }}>
+      <div style={{ marginBottom: '1rem', padding: '1rem', background: '#e3f2fd', borderRadius: '4px' }}>
+        <h4>Instrucciones de navegación:</h4>
+        <ol>
+          <li>Usa <kbd>Tab</kbd> para navegar entre grupos</li>
+          <li>Usa las flechas <kbd>↑</kbd> <kbd>↓</kbd> para navegar dentro de un grupo</li>
+          <li>Observa los indicadores de focus</li>
+          <li>Los lectores de pantalla anunciarán el estado y etiquetas</li>
+        </ol>
+      </div>
+      
+      <RadioGroup
+        id="accessibility-demo"
+        label="Demostración de accesibilidad"
+        value="option1"
+        onChange={() => {}}
+        options={[
+          { id: 'opt1', label: 'Primera opción accesible', value: 'option1' },
+          { id: 'opt2', label: 'Segunda opción accesible', value: 'option2' },
+          { id: 'opt3', label: 'Tercera opción accesible', value: 'option3' }
+        ]}
+      />
+    </div>
+  </div>
+)
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <IndividualRadioButtons />
+    <BasicRadioGroups />
+    <SpecialStates />
+    <ComplexConfiguration />
+    <AccessibilityDemo />
+  </div>
+)

package/src/html/StyleTest.stories.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+
+/**
+ * Test de estilos CSS
+ */
+export const StyleTest = () => (
+  <div style={{ padding: '20px' }}>
+    <h2>🎨 Test de Estilos CSS</h2>
+    
+    <div style={{ marginBottom: '20px' }}>
+      <h3>Botones HTML puros:</h3>
+      <button className="button">Botón Normal</button>
+      <button className="button button--primary">Botón Primary</button>
+      <button className="button button--secondary">Botón Secondary</button>
+    </div>
+
+    <div style={{ marginBottom: '20px' }}>
+      <h3>Checkbox HTML puro:</h3>
+      <label className="checkbox">
+        <input type="checkbox" className="checkbox__input" />
+        <span className="checkbox__checkmark"></span>
+        <span className="checkbox__label">Checkbox con estilos</span>
+      </label>
+    </div>
+
+    <div style={{ marginBottom: '20px' }}>
+      <h3>Iconos Material:</h3>
+      <i className="material-icons">home</i>
+      <i className="material-icons">settings</i>
+      <i className="material-icons">favorite</i>
+    </div>
+
+    <div style={{ marginBottom: '20px' }}>
+      <h3>Variables CSS:</h3>
+      <div style={{ 
+        background: 'var(--primary-color, #1976d2)', 
+        color: 'white', 
+        padding: '10px',
+        borderRadius: '4px'
+      }}>
+        Usando variable --primary-color
+      </div>
+    </div>
+
+    <div style={{ marginBottom: '20px' }}>
+      <h3>Clases de texto:</h3>
+      <p className="text">Texto normal</p>
+      <p className="text text--bold">Texto bold</p>
+      <p className="text text--muted">Texto muted</p>
+    </div>
+  </div>
+)
+
+/**
+ * Test de componentes con clases específicas
+ */
+export const ComponentClassTest = () => (
+  <div style={{ padding: '20px' }}>
+    <h2>🧩 Test de Clases de Componentes</h2>
+    
+    <div style={{ marginBottom: '20px' }}>
+      <h3>Estructura de botón:</h3>
+      <div className="button-container">
+        <button className="btn btn-primary">
+          <i className="material-icons">add</i>
+          Botón con icono
+        </button>
+      </div>
+    </div>
+
+    <div style={{ marginBottom: '20px' }}>
+      <h3>Estructura de checkbox:</h3>
+      <div className="form-group">
+        <div className="checkbox-wrapper">
+          <input type="checkbox" id="test-checkbox" />
+          <label htmlFor="test-checkbox">Checkbox estructurado</label>
+        </div>
+      </div>
+    </div>
+  </div>
+)

package/src/html/Switch.stories.jsx

@@ -0,0 +1,329 @@
+import React, { useState } from 'react'
+import { Switch } from './switch.js'
+
+/**
+ * Switches básicos
+ */
+export const BasicSwitches = () => {
+  const [settings, setSettings] = useState({
+    notifications: true,
+    darkMode: false,
+    autoSave: true
+  })
+
+  const handleChange = (id, checked) => {
+    setSettings(prev => ({ ...prev, [id]: checked }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Switches Básicos</h3>
+      
+      <div style={{ marginBottom: '2rem' }}>
+        <h4>Estados básicos:</h4>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '2rem', flexWrap: 'wrap' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <span>OFF:</span>
+            <Switch checked={false} onChange={() => {}} />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <span>ON:</span>
+            <Switch checked={true} onChange={() => {}} />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <span>Disabled:</span>
+            <Switch checked={true} disabled={true} onChange={() => {}} />
+          </div>
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <Switch
+          id="notifications"
+          label="Notificaciones push"
+          checked={settings.notifications}
+          onChange={handleChange}
+        />
+        <Switch
+          id="darkMode"
+          label="Modo oscuro"
+          checked={settings.darkMode}
+          onChange={handleChange}
+        />
+        <Switch
+          id="autoSave"
+          label="Guardado automático"
+          checked={settings.autoSave}
+          onChange={handleChange}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Switch con colores personalizados
+ */
+export const CustomColorSwitches = () => {
+  const [settings, setSettings] = useState({
+    analytics: true,
+    marketing: false,
+    location: true
+  })
+
+  const handleChange = (id, checked) => {
+    setSettings(prev => ({ ...prev, [id]: checked }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Switch con Colores Personalizados</h3>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <Switch
+          id="analytics"
+          label="Análisis de uso"
+          checked={settings.analytics}
+          onChange={handleChange}
+          onColor="#28a745"
+        />
+        <Switch
+          id="marketing"
+          label="Comunicaciones de marketing"
+          checked={settings.marketing}
+          onChange={handleChange}
+          onColor="#fd7e14"
+        />
+        <Switch
+          id="location"
+          label="Servicios de ubicación"
+          checked={settings.location}
+          onChange={handleChange}
+          onColor="#6f42c1"
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Tamaños y colores
+ */
+export const SwitchSizesAndColors = () => (
+  <div style={{ padding: '20px' }}>
+    <h3>Diferentes Tamaños</h3>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '2rem' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <span style={{ minWidth: '100px' }}>Small:</span>
+        <Switch 
+          id="size-small" 
+          size="small"
+          checked={true}
+          onChange={() => {}}
+        />
+        <Switch
+          id="size-small-2"
+          size="small"
+          checked={true}
+          onChange={() => {}}
+          onColor="#28a745"
+        />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <span style={{ minWidth: '100px' }}>Normal:</span>
+        <Switch
+          id="size-normal"
+          size="normal"
+          checked={true}
+          onChange={() => {}}
+        />
+        <Switch
+          id="size-normal-2"
+          size="normal"
+          checked={true}
+          onChange={() => {}}
+          onColor="#fd7e14"
+        />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <span style={{ minWidth: '100px' }}>Large:</span>
+        <Switch
+          id="size-large"
+          size="large"
+          checked={true}
+          onChange={() => {}}
+        />
+        <Switch
+          id="size-large-2"
+          size="large"
+          checked={true}
+          onChange={() => {}}
+          onColor="#6f42c1"
+        />
+      </div>
+    </div>
+
+    <h3>Colores Personalizados</h3>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <Switch
+        id="custom1"
+        label="Switch verde"
+        checked={true}
+        onColor="#28a745"
+        onChange={() => {}}
+      />
+      <Switch
+        id="custom2"
+        label="Switch naranja"
+        checked={true}
+        onColor="#fd7e14"
+        onChange={() => {}}
+      />
+      <Switch
+        id="custom3"
+        label="Switch púrpura"
+        checked={true}
+        onColor="#6f42c1"
+        onChange={() => {}}
+      />
+    </div>
+  </div>
+)
+
+/**
+ * Estados especiales
+ */
+export const SpecialStates = () => {
+  const [settings, setSettings] = useState({
+    notifications: false,
+    analytics: true
+  })
+
+  const [validationErrors, setValidationErrors] = useState({
+    notifications: 'Las notificaciones son requeridas',
+    analytics: null
+  })
+
+  const handleChange = (id, checked) => {
+    setSettings(prev => ({ ...prev, [id]: checked }))
+    // Limpiar error si se activa
+    if (checked && validationErrors[id]) {
+      setValidationErrors(prev => ({ ...prev, [id]: null }))
+    }
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Estados Especiales</h3>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <Switch 
+          id="disabled" 
+          label="Switch deshabilitado" 
+          checked={true}
+          disabled={true}
+          onChange={handleChange}
+        />
+        <Switch
+          id="readonly"
+          label="Switch solo lectura"
+          checked={true}
+          readOnly={true}
+          onChange={handleChange}
+        />
+        <Switch
+          id="error-switch"
+          label="Switch con error"
+          checked={settings.notifications}
+          error={validationErrors.notifications}
+          onChange={handleChange}
+        />
+        <Switch
+          id="error-switch2"
+          label="Switch con error personalizado"
+          checked={settings.analytics}
+          error={validationErrors.analytics}
+          onChange={handleChange}
+          onColor="#dc3545"
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Panel de configuración
+ */
+export const ConfigurationPanel = () => {
+  const [settings, setSettings] = useState({
+    wifi: true,
+    bluetooth: false,
+    notifications: true,
+    analytics: false
+  })
+
+  const handleChange = (id, checked) => {
+    setSettings(prev => ({ ...prev, [id]: checked }))
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h3>Panel de Configuración</h3>
+      <div style={{
+        background: '#fff',
+        padding: '1.5rem',
+        borderRadius: '8px',
+        border: '1px solid #ddd'
+      }}>
+        <h4>Conectividad</h4>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '1.5rem' }}>
+          <Switch
+            id="wifi"
+            label="Wi-Fi"
+            checked={settings.wifi}
+            onChange={handleChange}
+            ariaLabel="Activar o desactivar conexión Wi-Fi"
+            onColor="#28a745"
+          />
+          <Switch
+            id="bluetooth"
+            label="Bluetooth"
+            checked={settings.bluetooth}
+            onChange={handleChange}
+            ariaLabel="Activar o desactivar Bluetooth"
+            onColor="#17a2b8"
+          />
+        </div>
+
+        <h4>Privacidad</h4>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Switch
+            id="notifications"
+            label="Notificaciones"
+            checked={settings.notifications}
+            onChange={handleChange}
+            onColor="#ffc107"
+          />
+          <Switch
+            id="analytics"
+            label="Análisis de uso"
+            checked={settings.analytics}
+            onChange={handleChange}
+            onColor="#6f42c1"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Todos los ejemplos
+ */
+export const AllExamples = () => (
+  <div>
+    <BasicSwitches />
+    <CustomColorSwitches />
+    <SwitchSizesAndColors />
+    <SpecialStates />
+    <ConfigurationPanel />
+  </div>
+)