siesa-ui-kit 1.0.5 → 1.0.7

package/src/components/Switch/Switch.stories.tsx

@@ -1,550 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Switch } from './Switch';
-import { useState, useEffect } from 'react';
-
-/**
- * Switch - Componente de switch del sistema de diseño Siesa
- *
- * Campo de activación/desactivación con soporte para múltiples estados
- * y opciones de etiquetado. Diseñado para mantener consistencia visual
- * y funcional en toda la aplicación.
- */
-const meta = {
-  title: 'Siesa UI Kit/Switch',
-  component: Switch,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Campos de activación/desactivación con soporte para múltiples estados y opciones de etiquetado.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Etiqueta del switch',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    description: {
-      control: 'text',
-      description: 'Descripción debajo del label',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    checked: {
-      control: 'boolean',
-      description: 'Si el switch está activado',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el switch',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    ariaLabel: {
-      control: 'text',
-      description: 'Label para accesibilidad (ARIA)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Accesibilidad',
-      },
-    },
-    labelPosition: {
-      control: 'radio',
-      options: ['leading', 'trailing'],
-      description: 'Posición del label respecto al switch',
-      table: {
-        type: { summary: "'leading' | 'trailing'" },
-        defaultValue: { summary: 'leading' },
-        category: 'Apariencia',
-      },
-    },
-  },
-} satisfies Meta<typeof Switch>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo - Usa los controles para experimentar con todas las props del Switch.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    label: 'Permitir inserción',
-    description: 'Permite que otros inserten los detalles de tu evento en su propio sitio.',
-    checked: false,
-    disabled: false,
-    labelPosition: 'leading',
-  },
-  render: (args) => {
-    const [checked, setChecked] = useState(args.checked);
-
-    // Sincronizar el estado local cuando cambian los args desde los controles
-    useEffect(() => {
-      setChecked(args.checked);
-    }, [args.checked]);
-
-    return (
-      <Switch
-        {...args}
-        checked={checked}
-        onChange={(e) => setChecked(e.target.checked)}
-      />
-    );
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-
-/**
- * Todos los Estados - Vista rápida de todos los estados del Switch.
- */
-export const TodosLosEstados: Story = {
-  name: 'Todos los Estados',
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Estados Apagado */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estados Apagado
-        </h3>
-        <div className="space-y-3">
-          <Switch label="Por Defecto" description="Switch en estado apagado por defecto" />
-          <Switch label="Hover" description="Pasa el mouse sobre el switch para ver el estado" />
-          <Switch label="Foco" description="Haz clic para enfocar (intenta presionar Tab)" />
-          <Switch label="Deshabilitado" description="Switch deshabilitado apagado" disabled />
-        </div>
-      </div>
-
-      {/* Estados Encendido */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estados Encendido
-        </h3>
-        <div className="space-y-3">
-          <Switch
-            label="Por Defecto"
-            description="Switch en estado encendido por defecto"
-            checked
-            onChange={() => {}}
-          />
-          <Switch
-            label="Hover"
-            description="Pasa el mouse sobre el switch para ver el estado"
-            checked
-            onChange={() => {}}
-          />
-          <Switch
-            label="Foco"
-            description="Haz clic para enfocar (intenta presionar Tab)"
-            checked
-            onChange={() => {}}
-          />
-          <Switch
-            label="Deshabilitado"
-            description="Switch deshabilitado encendido"
-            checked
-            disabled
-            onChange={() => {}}
-          />
-        </div>
-      </div>
-
-      {/* Tips */}
-      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-        <p className="text-xs text-content-secondary dark:text-content-secondary">
-          <strong className="text-content-primary dark:text-dark-content-primary">Consejo:</strong> Pasa el mouse sobre el switch o haz clic para ver los estados hover y focus.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. POSICIÓN DEL LABEL
-// ============================================
-
-/**
- * Posición del Label - El label puede estar a la izquierda (leading) o a la derecha (trailing) del switch.
- */
-export const PosicionDelLabel: Story = {
-  name: 'Posición del Label',
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Leading (Label a la izquierda) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Leading (Label a la Izquierda)
-        </h3>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mb-4">
-          El label se muestra a la izquierda y el switch a la derecha. Este es el valor por defecto.
-        </p>
-        <div className="space-y-3">
-          <Switch
-            label="Permitir inserción"
-            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-            labelPosition="leading"
-          />
-          <Switch
-            label="Permitir inserción"
-            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-            labelPosition="leading"
-            checked
-            onChange={() => {}}
-          />
-        </div>
-      </div>
-
-      {/* Trailing (Label a la derecha) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Trailing (Label a la Derecha)
-        </h3>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mb-4">
-          El switch se muestra a la izquierda y el label a la derecha.
-        </p>
-        <div className="space-y-3">
-          <Switch
-            label="Permitir inserción"
-            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-            labelPosition="trailing"
-          />
-          <Switch
-            label="Permitir inserción"
-            description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-            labelPosition="trailing"
-            checked
-            onChange={() => {}}
-          />
-        </div>
-      </div>
-
-      {/* Solo Label (sin descripción) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Solo Label (sin descripción)
-        </h3>
-        <div className="space-y-3">
-          <Switch label="Activar notificaciones" labelPosition="leading" />
-          <Switch label="Activar notificaciones" labelPosition="trailing" />
-        </div>
-      </div>
-
-      {/* Tips */}
-      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-        <p className="text-xs text-content-secondary dark:text-content-secondary">
-          <strong className="text-content-primary dark:text-dark-content-primary">Consejo:</strong> Usa <code className="px-1 bg-white dark:bg-gray-700 rounded">leading</code> para formularios estándar y <code className="px-1 bg-white dark:bg-gray-700 rounded">trailing</code> para listas de configuración donde el switch debe destacar primero.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CON Y SIN LABELS
-// ============================================
-
-/**
- * Con y Sin Etiquetas - Ejemplos de switches con diferentes combinaciones de label y description.
- */
-export const ConYSinEtiquetas: Story = {
-  name: 'Con y Sin Etiquetas',
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Sin Label ni Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Sin Etiqueta ni Descripción
-        </h3>
-        <Switch ariaLabel="Interruptor sin etiqueta" />
-      </div>
-
-      {/* Solo Label */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Solo Etiqueta
-        </h3>
-        <Switch label="Activar notificaciones" />
-      </div>
-
-      {/* Label + Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Etiqueta + Descripción
-        </h3>
-        <Switch
-          label="Permitir inserción"
-          description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-        />
-      </div>
-
-      {/* Label Largo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Con Texto Largo
-        </h3>
-        <Switch
-          label="Enviarme correos promocionales y actualizaciones"
-          description="Puedes darte de baja en cualquier momento. Nunca compartiremos tu correo electrónico con terceros ni lo usaremos para ningún otro propósito."
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. GRUPOS DE SWITCHES
-// ============================================
-
-/**
- * Grupos de Switches - Ejemplos de grupos de switches relacionados para diferentes configuraciones.
- */
-export const GruposDeSwitches: Story = {
-  name: 'Grupos de Switches',
-  render: () => {
-    const [settings, setSettings] = useState({
-      embedding: true,
-      comments: false,
-      analytics: true,
-    });
-
-    return (
-      <div className="space-y-8 p-6">
-        {/* Configuración de Evento */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Configuración de Evento
-          </h3>
-          <div className="space-y-3">
-            <Switch
-              label="Permitir inserción"
-              description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-              checked={settings.embedding}
-              onChange={(e) => setSettings({ ...settings, embedding: e.target.checked })}
-            />
-            <Switch
-              label="Activar comentarios"
-              description="Permite que los asistentes dejen comentarios y retroalimentación en tu evento."
-              checked={settings.comments}
-              onChange={(e) => setSettings({ ...settings, comments: e.target.checked })}
-            />
-            <Switch
-              label="Rastrear análisis"
-              description="Recopilar datos de uso anónimos para mejorar tu experiencia de evento."
-              checked={settings.analytics}
-              onChange={(e) => setSettings({ ...settings, analytics: e.target.checked })}
-            />
-          </div>
-        </div>
-
-        {/* Preferencias de Notificación */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Preferencias de Notificación
-          </h3>
-          <div className="space-y-3">
-            <Switch label="Notificaciones por correo" />
-            <Switch label="Notificaciones push" />
-            <Switch label="Notificaciones SMS" />
-            <Switch label="Notificaciones de escritorio" />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 6. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales - Ejemplos prácticos de cómo usar los switches en situaciones reales.
- */
-export const CasosDeUsoReales: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => {
-    const [accountSettings, setAccountSettings] = useState({
-      twoFactor: true,
-      emailNotifications: false,
-      publicProfile: true,
-    });
-
-    const [privacySettings, setPrivacySettings] = useState({
-      showEmail: false,
-      showPhone: false,
-      showActivity: true,
-    });
-
-    const [features, setFeatures] = useState({
-      darkMode: false,
-      autoSave: true,
-      spellCheck: true,
-    });
-
-    return (
-      <div className="space-y-8 p-6">
-        {/* Seguridad de la Cuenta */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Seguridad de la Cuenta
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
-              Configuración de Seguridad
-            </h4>
-            <div className="space-y-3">
-              <Switch
-                label="Autenticación de dos factores"
-                description="Agrega una capa extra de seguridad a tu cuenta"
-                checked={accountSettings.twoFactor}
-                onChange={(e) =>
-                  setAccountSettings({ ...accountSettings, twoFactor: e.target.checked })
-                }
-              />
-              <Switch
-                label="Notificaciones de inicio de sesión"
-                description="Recibe notificaciones cuando alguien inicie sesión en tu cuenta"
-                checked={accountSettings.emailNotifications}
-                onChange={(e) =>
-                  setAccountSettings({ ...accountSettings, emailNotifications: e.target.checked })
-                }
-              />
-              <Switch
-                label="Perfil público"
-                description="Haz que tu perfil sea visible para otros usuarios"
-                checked={accountSettings.publicProfile}
-                onChange={(e) =>
-                  setAccountSettings({ ...accountSettings, publicProfile: e.target.checked })
-                }
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Configuración de Privacidad */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Configuración de Privacidad
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
-              Qué pueden ver otros
-            </h4>
-            <div className="space-y-3">
-              <Switch
-                label="Mostrar dirección de correo"
-                description="Muestra tu correo en tu perfil público"
-                checked={privacySettings.showEmail}
-                onChange={(e) =>
-                  setPrivacySettings({ ...privacySettings, showEmail: e.target.checked })
-                }
-              />
-              <Switch
-                label="Mostrar número de teléfono"
-                description="Muestra tu número de teléfono en tu perfil público"
-                checked={privacySettings.showPhone}
-                onChange={(e) =>
-                  setPrivacySettings({ ...privacySettings, showPhone: e.target.checked })
-                }
-              />
-              <Switch
-                label="Mostrar estado de actividad"
-                description="Permite que otros vean cuando estás en línea"
-                checked={privacySettings.showActivity}
-                onChange={(e) =>
-                  setPrivacySettings({ ...privacySettings, showActivity: e.target.checked })
-                }
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Características del Editor */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Características del Editor
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
-              Preferencias del Editor
-            </h4>
-            <div className="space-y-3">
-              <Switch
-                label="Modo oscuro"
-                description="Usa el tema oscuro para el editor"
-                checked={features.darkMode}
-                onChange={(e) => setFeatures({ ...features, darkMode: e.target.checked })}
-              />
-              <Switch
-                label="Guardado automático"
-                description="Guarda tu trabajo automáticamente cada pocos segundos"
-                checked={features.autoSave}
-                onChange={(e) => setFeatures({ ...features, autoSave: e.target.checked })}
-              />
-              <Switch
-                label="Corrección ortográfica"
-                description="Verifica la ortografía mientras escribes"
-                checked={features.spellCheck}
-                onChange={(e) => setFeatures({ ...features, spellCheck: e.target.checked })}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Gestión de Eventos */}
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-            Gestión de Eventos
-          </h3>
-          <div className="p-6 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-            <h4 className="font-bold mb-4 text-base text-content-primary dark:text-dark-content-primary">
-              Opciones del Evento
-            </h4>
-            <div className="space-y-3">
-              <Switch
-                label="Permitir inserción"
-                description="Permite que otros inserten los detalles de tu evento en su propio sitio."
-              />
-              <Switch
-                label="Activar comentarios"
-                description="Permite que los asistentes dejen comentarios en la página de tu evento."
-              />
-              <Switch
-                label="Recopilar confirmaciones"
-                description="Permite que las personas confirmen su asistencia a tu evento."
-              />
-              <Switch
-                label="Enviar recordatorios"
-                description="Envía automáticamente correos de recordatorio antes del evento."
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};