siesa-ui-kit 1.0.3 → 1.0.5

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

@@ -0,0 +1,583 @@
+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>
+  ),
+};