siesa-ui-kit 1.0.2 → 1.0.3

package/src/components/Input/Input.stories.tsx

@@ -1,583 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Input } from './Input';
-import {
-  EnvelopeIcon,
-  QuestionMarkCircleIcon,
-  UserIcon,
-  LockClosedIcon,
-  MagnifyingGlassIcon,
-  EyeIcon,
-  XMarkIcon,
-  CheckIcon,
-  ExclamationCircleIcon,
-} from './icons';
-
-/**
- * Input - Componente de campo de entrada del sistema de diseño Siesa
- *
- * Sistema completo de inputs con soporte para:
- * - **Estados**: Default, Hover, Focus, Filled, Disabled
- * - **Validación**: Error states con mensajes
- * - **Iconos**: Soporte para iconos izquierdo y derecho
- * - **Accesibilidad**: Labels, helper text, y ARIA attributes
- * - **Dark mode**: Adaptación completa al tema oscuro
- */
-const meta = {
-  title: 'Siesa UI Kit/Input',
-  component: Input,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Campos de entrada interactivos con soporte para validación, iconos, y múltiples estados. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'gray', value: '#f3f4f6' },
-        { name: 'dark', value: '#1f2937' },
-      ],
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Etiqueta del campo de entrada',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    labelSecondary: {
-      control: 'text',
-      description: 'Texto secundario junto al label (opcional)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Texto de ayuda dentro del input',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    helperText: {
-      control: 'text',
-      description: 'Texto de ayuda debajo del input',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    error: {
-      control: 'boolean',
-      description: 'Indica si hay un error de validación',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Mensaje de error a mostrar (reemplaza helperText cuando error=true)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el input',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Si el input ocupa todo el ancho disponible',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Layout',
-      },
-    },
-    leftIcon: {
-      description: 'Icono a mostrar a la izquierda del texto',
-      table: {
-        type: { summary: 'ReactElement' },
-        category: 'Contenido',
-      },
-      control: false,
-    },
-    rightIcon: {
-      description: 'Icono a mostrar a la derecha del texto',
-      table: {
-        type: { summary: 'ReactElement' },
-        category: 'Contenido',
-      },
-      control: false,
-    },
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con todas las props del Input en tiempo real.
- * Cambia el texto, iconos, estados y más para ver cómo se comporta el componente.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    label: 'Email',
-    placeholder: 'tu@email.com',
-    helperText: 'Ingresa tu correo electrónico',
-    error: false,
-    disabled: false,
-    fullWidth: false,
-  },
-  render: (args) => {
-    return (
-      <Input
-        {...args}
-        leftIcon={<EnvelopeIcon />}
-        rightIcon={<QuestionMarkCircleIcon />}
-      />
-    );
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-
-/**
- * Todos los Estados
- *
- * Vista rápida de todos los estados del Input: default, hover, focus, filled, disabled.
- * También muestra los estados con y sin error.
- */
-export const AllStates: Story = {
-  name: 'Todos los Estados',
-  render: () => (
-    <div className="space-y-6">
-      {/* Estados Normales */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Estados Normales (Error=False)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Default"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Helper text"
-          />
-          <Input
-            label="Hover"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Hover sobre el input para ver el estado"
-          />
-          <Input
-            label="Focus"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Click en el input para ver focus"
-            autoFocus
-          />
-        </div>
-        <div className="flex flex-wrap gap-4 mt-4">
-          <Input
-            label="Filled"
-            defaultValue="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Input con valor"
-          />
-          <Input
-            label="Disabled"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<QuestionMarkCircleIcon />}
-            helperText="Input deshabilitado"
-            disabled
-          />
-        </div>
-      </div>
-
-      {/* Estados con Error */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Estados con Error (Error=True)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Error Default"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este campo es requerido"
-          />
-          <Input
-            label="Error Hover"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Formato de email inválido"
-          />
-          <Input
-            label="Error Focus"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este email ya está en uso"
-          />
-        </div>
-        <div className="flex flex-wrap gap-4 mt-4">
-          <Input
-            label="Error Filled"
-            defaultValue="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Valor no válido"
-          />
-          <Input
-            label="Error Disabled"
-            placeholder="Jane Doe"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Campo deshabilitado"
-            disabled
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON ICONOS
-// ============================================
-
-/**
- * Inputs con Iconos
- *
- * Ejemplos de inputs con diferentes combinaciones de iconos.
- * Los iconos ayudan a identificar rápidamente el tipo de campo.
- */
-export const WithIcons: Story = {
-  name: 'Botones con Iconos',
-  render: () => (
-    <div className="space-y-6">
-      {/* Icono Izquierdo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Icono a la Izquierda</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input label="Email" placeholder="tu@email.com" leftIcon={<EnvelopeIcon />} />
-          <Input label="Usuario" placeholder="nombre_usuario" leftIcon={<UserIcon />} />
-          <Input
-            label="Contraseña"
-            type="password"
-            placeholder="••••••••"
-            leftIcon={<LockClosedIcon />}
-          />
-          <Input label="Buscar" placeholder="Buscar..." leftIcon={<MagnifyingGlassIcon />} />
-        </div>
-      </div>
-
-      {/* Icono Derecho */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Icono a la Derecha</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input label="Campo" placeholder="Valor" rightIcon={<QuestionMarkCircleIcon />} />
-          <Input label="Email" placeholder="tu@email.com" rightIcon={<CheckIcon />} />
-          <Input label="Buscar" placeholder="Buscar..." rightIcon={<XMarkIcon />} />
-        </div>
-      </div>
-
-      {/* Ambos Lados */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Iconos en Ambos Lados</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Email"
-            placeholder="tu@email.com"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<CheckIcon />}
-            helperText="Email verificado"
-          />
-          <Input
-            label="Contraseña"
-            type="password"
-            placeholder="••••••••"
-            leftIcon={<LockClosedIcon />}
-            rightIcon={<EyeIcon />}
-            helperText="Mostrar contraseña"
-          />
-          <Input
-            label="Buscar"
-            placeholder="Buscar..."
-            leftIcon={<MagnifyingGlassIcon />}
-            rightIcon={<XMarkIcon />}
-            helperText="Limpiar búsqueda"
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. ESTADOS DE ERROR
-// ============================================
-
-/**
- * Estados de Error
- *
- * Ejemplos de inputs con diferentes tipos de errores de validación.
- * Útil para formularios y validación de datos.
- */
-export const EstadosDeError: Story = {
-  name: 'EstadosDeError',
-  render: () => (
-    <div className="space-y-6">
-      {/* Errores de Validación */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Errores de Validación</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Email"
-            placeholder="tu@email.com"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este campo es requerido"
-          />
-          <Input
-            label="Email"
-            defaultValue="correo-invalido"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Formato de email inválido"
-          />
-          <Input
-            label="Contraseña"
-            type="password"
-            defaultValue="123"
-            leftIcon={<LockClosedIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="La contraseña debe tener al menos 8 caracteres"
-          />
-        </div>
-      </div>
-
-      {/* Errores de Disponibilidad */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Errores de Disponibilidad</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Nombre de usuario"
-            defaultValue="admin"
-            leftIcon={<UserIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este nombre de usuario ya está en uso"
-          />
-          <Input
-            label="Email"
-            defaultValue="usuario@ejemplo.com"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<ExclamationCircleIcon />}
-            error
-            errorMessage="Este email ya está registrado"
-          />
-        </div>
-      </div>
-
-      {/* Con Helper Text */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Sin Error (Para Comparación)</h3>
-        <div className="flex flex-wrap gap-4">
-          <Input
-            label="Email"
-            placeholder="tu@email.com"
-            leftIcon={<EnvelopeIcon />}
-            rightIcon={<CheckIcon />}
-            helperText="Email disponible"
-          />
-          <Input
-            label="Contraseña"
-            type="password"
-            defaultValue="mi-password-seguro"
-            leftIcon={<LockClosedIcon />}
-            rightIcon={<CheckIcon />}
-            helperText="Contraseña segura"
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar los inputs en situaciones reales:
- * formularios, login, búsqueda, etc.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => (
-    <div className="space-y-6">
-      {/* Formulario de Login */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Formulario de Login</h3>
-        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-          <div className="space-y-4">
-            <Input
-              label="Email"
-              type="email"
-              placeholder="tu@email.com"
-              leftIcon={<EnvelopeIcon />}
-              fullWidth
-            />
-            <Input
-              label="Contraseña"
-              type="password"
-              placeholder="••••••••"
-              leftIcon={<LockClosedIcon />}
-              rightIcon={<EyeIcon />}
-              fullWidth
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Formulario de Registro */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Formulario de Registro</h3>
-        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-          <div className="space-y-4">
-            <Input
-              label="Nombre completo"
-              placeholder="Juan Pérez"
-              leftIcon={<UserIcon />}
-              helperText="Nombre y apellido"
-              fullWidth
-            />
-            <Input
-              label="Email"
-              type="email"
-              placeholder="tu@email.com"
-              leftIcon={<EnvelopeIcon />}
-              helperText="Usaremos este email para contactarte"
-              fullWidth
-            />
-            <Input
-              label="Contraseña"
-              type="password"
-              placeholder="••••••••"
-              leftIcon={<LockClosedIcon />}
-              helperText="Mínimo 8 caracteres"
-              fullWidth
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Barra de Búsqueda */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Barra de Búsqueda</h3>
-        <div className="max-w-md">
-          <Input
-            placeholder="Buscar productos, categorías..."
-            leftIcon={<MagnifyingGlassIcon />}
-            rightIcon={<XMarkIcon />}
-            fullWidth
-          />
-        </div>
-      </div>
-
-      {/* Formulario con Validación */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Formulario con Validación de Errores
-        </h3>
-        <div className="p-6 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg max-w-md">
-          <div className="space-y-4">
-            <Input
-              label="Email"
-              type="email"
-              defaultValue="correo-invalido"
-              leftIcon={<EnvelopeIcon />}
-              rightIcon={<ExclamationCircleIcon />}
-              error
-              errorMessage="Formato de email inválido"
-              fullWidth
-            />
-            <Input
-              label="Contraseña"
-              type="password"
-              defaultValue="123"
-              leftIcon={<LockClosedIcon />}
-              rightIcon={<ExclamationCircleIcon />}
-              error
-              errorMessage="La contraseña debe tener al menos 8 caracteres"
-              fullWidth
-            />
-            <Input
-              label="Confirmar contraseña"
-              type="password"
-              defaultValue="456"
-              leftIcon={<LockClosedIcon />}
-              rightIcon={<ExclamationCircleIcon />}
-              error
-              errorMessage="Las contraseñas no coinciden"
-              fullWidth
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Campo con Label Secundario */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">Con Label Secundario</h3>
-        <Input
-          label="About"
-          labelSecondary="Optional"
-          placeholder="Cuéntanos sobre ti"
-          leftIcon={<UserIcon />}
-          helperText="Máximo 200 caracteres"
-        />
-      </div>
-    </div>
-  ),
-};