siesa-ui-kit 1.0.3 → 1.0.4

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,705 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from './Select';
+import { useState } from 'react';
+
+const meta = {
+  title: 'Siesa UI Kit/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente Select personalizado con menú desplegable para seleccionar opciones de una lista. Incluye navegación por teclado, click outside y dark mode completo.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      control: 'object',
+      description: 'Array de opciones disponibles para seleccionar',
+    },
+    value: {
+      control: 'text',
+      description: 'Valor seleccionado actual (controlado)',
+    },
+    defaultValue: {
+      control: 'text',
+      description: 'Valor inicial por defecto (no controlado)',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto del placeholder cuando no hay selección',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si el select está deshabilitado',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Si el select muestra un error',
+    },
+    label: {
+      control: 'text',
+      description: 'Label del select',
+    },
+    description: {
+      control: 'text',
+      description: 'Texto descriptivo que aparece debajo del label (antes del trigger)',
+    },
+    showLabel: {
+      control: 'boolean',
+      description: 'Muestra el label',
+    },
+    showDescription: {
+      control: 'boolean',
+      description: 'Muestra la descripción',
+    },
+    menuHeader: {
+      control: 'text',
+      description: 'Header opcional al inicio del menú',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Si el select ocupa el ancho completo',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Si el campo es requerido',
+    },
+    menuPosition: {
+      control: 'select',
+      options: ['top', 'bottom'],
+      description: 'Posición del menú desplegable',
+    },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// Opciones de ejemplo
+// ============================================
+const fruitOptions = [
+  { value: 'apple', label: 'Manzana' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cereza' },
+  { value: 'date', label: 'Dátil' },
+  { value: 'elderberry', label: 'Saúco' },
+  { value: 'fig', label: 'Higo' },
+];
+
+const countryOptions = [
+  { value: 'us', label: 'Estados Unidos' },
+  { value: 'uk', label: 'Reino Unido' },
+  { value: 'ca', label: 'Canadá' },
+  { value: 'au', label: 'Australia' },
+  { value: 'de', label: 'Alemania' },
+  { value: 'fr', label: 'Francia' },
+  { value: 'jp', label: 'Japón' },
+  { value: 'cn', label: 'China' },
+];
+
+const statusOptions = [
+  { value: 'active', label: 'Activo' },
+  { value: 'pending', label: 'Pendiente' },
+  { value: 'inactive', label: 'Inactivo', disabled: true },
+  { value: 'archived', label: 'Archivado' },
+];
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  name: 'Playground',
+  args: { options: [] },
+  render: () => {
+    const [value, setValue] = useState<string | number>('');
+
+    return (
+      <div className="w-[400px]">
+        <Select
+          options={fruitOptions}
+          value={value}
+          onChange={setValue}
+          placeholder="Selecciona una fruta"
+          label="Label"
+          description="Esto será visible para los clientes en el proyecto."
+          menuHeader="Encabezado ..."
+        />
+
+        <div className="mt-4 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-gray-600 dark:text-gray-300">
+            <strong>Valor seleccionado:</strong> {value || '(ninguno)'}
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 2. ESTADOS BÁSICOS
+// ============================================
+export const EstadosBasicos: Story = {
+  name: 'Estados Básicos',
+  args: { options: [] },
+  render: () => {
+    const [value1, setValue1] = useState<string | number>('');
+    const [value2, setValue2] = useState<string | number>('banana');
+
+    return (
+      <div className="space-y-8 p-6 w-[500px]">
+        {/* Default sin selección */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Sin selección (Placeholder)
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value1}
+            onChange={setValue1}
+            placeholder="Selecciona una fruta"
+            label="Fruta"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Muestra el marcador de posición cuando no hay valor seleccionado
+          </p>
+        </div>
+
+        {/* Con valor seleccionado */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Con valor seleccionado
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value2}
+            onChange={setValue2}
+            placeholder="Selecciona una fruta"
+            label="Fruta"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Muestra la etiqueta de la opción seleccionada
+          </p>
+        </div>
+
+        {/* Hover y Focus */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Estados Interactivos
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value1}
+            onChange={setValue1}
+            placeholder="Pasa el mouse o haz click para ver estados"
+            label="Fruta"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            • Hover: Border más claro (#f9f9f9)
+            <br />• Focus: Border azul de 2px (#329cff)
+            <br />• Click: Abre menú con opciones
+          </p>
+        </div>
+
+        {/* Disabled */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Deshabilitado
+          </h3>
+          <Select
+            options={fruitOptions}
+            value="apple"
+            disabled
+            placeholder="Selecciona una fruta"
+            label="Fruta (Deshabilitada)"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Estado deshabilitado con opacidad reducida
+          </p>
+        </div>
+
+        {/* Error */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Error
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value1}
+            onChange={setValue1}
+            error
+            description="Por favor selecciona una fruta"
+            placeholder="Selecciona una fruta"
+            label="Fruta (Requerido)"
+            required
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Estado de error con mensaje de validación
+          </p>
+        </div>
+
+        {/* Caja de consejos */}
+        <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-gray-600 dark:text-gray-300">
+            <strong>💡 Guía de Estados:</strong>
+            <br />• <strong>Default</strong>: Border estándar con placeholder gris
+            <br />• <strong>Hover</strong>: Border más claro para indicar interactividad
+            <br />• <strong>Focus</strong>: Border azul grueso (2px) para accesibilidad
+            <br />• <strong>Selected</strong>: Muestra el label de la opción seleccionada
+            <br />• <strong>Disabled</strong>: Opacidad 50% sin interactividad
+            <br />• <strong>Error</strong>: Border rojo con mensaje de error
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 3. CON HELPER TEXT
+// ============================================
+export const ConTextoDeAyuda: Story = {
+  name: 'Con Texto de Ayuda',
+  args: { options: [] },
+  render: () => {
+    const [value1, setValue1] = useState<string | number>('');
+    const [value2, setValue2] = useState<string | number>('');
+
+    return (
+      <div className="space-y-8 p-6 w-[500px]">
+        {/* Con helper text */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Con texto de ayuda
+          </h3>
+          <Select
+            options={countryOptions}
+            value={value1}
+            onChange={setValue1}
+            placeholder="Selecciona un país"
+            label="País"
+            description="Selecciona tu país de residencia"
+          />
+        </div>
+
+        {/* Con error message */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Con mensaje de error
+          </h3>
+          <Select
+            options={countryOptions}
+            value={value2}
+            onChange={setValue2}
+            placeholder="Selecciona un país"
+            label="País"
+            error
+            description="El país es requerido"
+            required
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 4. OPCIONES DESHABILITADAS
+// ============================================
+export const OpcionesDeshabilitadas: Story = {
+  name: 'Opciones Deshabilitadas',
+  args: { options: [] },
+  render: () => {
+    const [value, setValue] = useState<string | number>('');
+
+    return (
+      <div className="p-6 w-[400px]">
+        <Select
+          options={statusOptions}
+          value={value}
+          onChange={setValue}
+          placeholder="Selecciona un estado"
+          label="Estado"
+          description="Nota: El estado Inactivo está deshabilitado"
+        />
+
+        <div className="mt-4 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-gray-600 dark:text-gray-300">
+            <strong>💡 Tip:</strong> Algunas opciones pueden estar deshabilitadas y no se pueden seleccionar
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 5. FULL WIDTH
+// ============================================
+export const AnchoCompleto: Story = {
+  name: 'Ancho Completo',
+  args: { options: [] },
+  render: () => {
+    const [value, setValue] = useState<string | number>('');
+
+    return (
+      <div className="p-6 w-full max-w-2xl">
+        <Select
+          options={countryOptions}
+          value={value}
+          onChange={setValue}
+          placeholder="Selecciona un país"
+          label="País"
+          description="El select de ancho completo se adapta al contenedor"
+          fullWidth
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 6. FORMULARIO COMPLETO
+// ============================================
+export const EjemploDeFormulario: Story = {
+  name: 'Ejemplo de Formulario',
+  args: { options: [] },
+  render: () => {
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [country, setCountry] = useState<string | number>('');
+    const [status, setStatus] = useState<string | number>('');
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      console.log({ firstName, lastName, country, status });
+      alert(`Form submitted!\nCountry: ${country}\nStatus: ${status}`);
+    };
+
+    return (
+      <div className="p-6 max-w-md">
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <h2 className="text-2xl font-bold text-gray-700 dark:text-white mb-6">
+            Información de Usuario
+          </h2>
+
+          {/* Text inputs */}
+          <div className="space-y-2">
+            <label className="block text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              Nombre <span className="text-error-content">*</span>
+            </label>
+            <input
+              type="text"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              className="w-full px-3 py-2 border border-border-primary dark:border-dark-border-primary bg-bg-primary dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-custom-400 dark:focus:ring-dark-border-custom"
+              placeholder="Juan"
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="block text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              Apellido <span className="text-error-content">*</span>
+            </label>
+            <input
+              type="text"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              className="w-full px-3 py-2 border border-border-primary dark:border-dark-border-primary bg-bg-primary dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-custom-400 dark:focus:ring-dark-border-custom"
+              placeholder="Pérez"
+              required
+            />
+          </div>
+
+          {/* Select fields */}
+          <Select
+            options={countryOptions}
+            value={country}
+            onChange={setCountry}
+            placeholder="Selecciona un país"
+            label="País"
+            description="Selecciona tu país de residencia"
+            required
+            fullWidth
+          />
+
+          <Select
+            options={statusOptions}
+            value={status}
+            onChange={setStatus}
+            placeholder="Selecciona un estado"
+            label="Estado de la Cuenta"
+            description="Selecciona el estado actual de tu cuenta"
+            required
+            fullWidth
+          />
+
+          <button
+            type="submit"
+            className="w-full px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-primary-inverse-content dark:text-dark-content-inverse rounded-md font-bold text-sm hover:bg-primary-custom-500 dark:hover:bg-dark-bg-inverse/90 transition-all"
+          >
+            Enviar
+          </button>
+        </form>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 7. MENU POSITION
+// ============================================
+export const PosicionDelMenu: Story = {
+  name: 'Posición del Menú',
+  args: { options: [] },
+  render: () => {
+    const [value1, setValue1] = useState<string | number>('');
+    const [value2, setValue2] = useState<string | number>('');
+
+    return (
+      <div className="space-y-32 p-6 w-[500px]">
+        {/* Bottom (default) */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Menu abre hacia abajo (default)
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value1}
+            onChange={setValue1}
+            placeholder="Selecciona una fruta"
+            label="Fruta"
+            menuPosition="bottom"
+          />
+        </div>
+
+        {/* Top */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Menu abre hacia arriba
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value2}
+            onChange={setValue2}
+            placeholder="Selecciona una fruta"
+            label="Fruta"
+            menuPosition="top"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            Útil cuando el select está cerca del borde inferior de la pantalla
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 8. CASOS DE USO
+// ============================================
+
+/**
+ * Casos de Uso Reales
+ *
+ * Ejemplos prácticos de cómo usar los selects en situaciones reales:
+ * formularios, filtros, configuración, etc.
+ */
+export const UseCases: Story = {
+  name: 'Casos de Uso Reales',
+  args: { options: [] },
+  render: () => {
+    const [country, setCountry] = useState<string | number>('');
+    const [language, setLanguage] = useState<string | number>('');
+    const [category, setCategory] = useState<string | number>('');
+    const [status, setStatus] = useState<string | number>('');
+    const [priority, setPriority] = useState<string | number>('');
+    const [timezone, setTimezone] = useState<string | number>('');
+
+    return (
+      <div className="space-y-6">
+        {/* Formulario de Preferencias */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Preferencias de Usuario</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">
+              <Select
+                options={countryOptions}
+                value={country}
+                onChange={setCountry}
+                placeholder="Selecciona un país"
+                label="País"
+                description="Selecciona tu país de residencia"
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'en', label: 'English' },
+                  { value: 'es', label: 'Español' },
+                  { value: 'fr', label: 'Français' },
+                  { value: 'de', label: 'Deutsch' },
+                ]}
+                value={language}
+                onChange={setLanguage}
+                placeholder="Selecciona un idioma"
+                label="Idioma"
+                description="Elige tu idioma preferido"
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'utc-5', label: 'UTC-5 (Eastern Time)' },
+                  { value: 'utc-6', label: 'UTC-6 (Central Time)' },
+                  { value: 'utc-7', label: 'UTC-7 (Mountain Time)' },
+                  { value: 'utc-8', label: 'UTC-8 (Pacific Time)' },
+                ]}
+                value={timezone}
+                onChange={setTimezone}
+                placeholder="Selecciona zona horaria"
+                label="Zona Horaria"
+                description="Tu zona horaria local"
+                fullWidth
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Filtros de Búsqueda */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Filtros de Búsqueda</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">
+              <Select
+                options={[
+                  { value: 'all', label: 'Todas las Categorías' },
+                  { value: 'electronics', label: 'Electrónica' },
+                  { value: 'clothing', label: 'Ropa' },
+                  { value: 'books', label: 'Libros' },
+                  { value: 'home', label: 'Hogar y Jardín' },
+                ]}
+                value={category}
+                onChange={setCategory}
+                placeholder="Todas las Categorías"
+                label="Categoría"
+                fullWidth
+              />
+              <Select
+                options={statusOptions}
+                value={status}
+                onChange={setStatus}
+                placeholder="Selecciona un estado"
+                label="Estado"
+                description="Filtrar por estado del elemento"
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'low', label: 'Baja' },
+                  { value: 'medium', label: 'Media' },
+                  { value: 'high', label: 'Alta' },
+                  { value: 'urgent', label: 'Urgente' },
+                ]}
+                value={priority}
+                onChange={setPriority}
+                placeholder="Cualquier prioridad"
+                label="Prioridad"
+                fullWidth
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Formulario de Contacto */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Formulario de Contacto</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">
+              <Select
+                options={[
+                  { value: 'general', label: 'Consulta General' },
+                  { value: 'support', label: 'Soporte Técnico' },
+                  { value: 'sales', label: 'Ventas' },
+                  { value: 'billing', label: 'Facturación' },
+                ]}
+                value={category}
+                onChange={setCategory}
+                placeholder="Selecciona un tema"
+                label="Asunto"
+                description="¿Cómo podemos ayudarte?"
+                required
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'low', label: 'Baja - Pregunta general' },
+                  { value: 'medium', label: 'Media - Necesito asistencia' },
+                  { value: 'high', label: 'Alta - Problema urgente' },
+                ]}
+                value={priority}
+                onChange={setPriority}
+                placeholder="Selecciona prioridad"
+                label="Prioridad"
+                description="¿Qué tan urgente es tu solicitud?"
+                fullWidth
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Formulario con Validación */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            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">
+              <Select
+                options={countryOptions}
+                value=""
+                onChange={() => {}}
+                placeholder="Selecciona un país"
+                label="País"
+                error
+                description="El país es requerido"
+                required
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'card', label: 'Tarjeta de Crédito' },
+                  { value: 'paypal', label: 'PayPal' },
+                  { value: 'bank', label: 'Transferencia Bancaria' },
+                ]}
+                value=""
+                onChange={() => {}}
+                placeholder="Selecciona método de pago"
+                label="Método de Pago"
+                error
+                description="Por favor selecciona un método de pago"
+                required
+                fullWidth
+              />
+              <Select
+                options={[
+                  { value: 'subscribe', label: 'Suscribirse al boletín' },
+                  { value: 'unsubscribe', label: 'Cancelar suscripción' },
+                ]}
+                value={status}
+                onChange={setStatus}
+                placeholder="Selecciona preferencia"
+                label="Preferencia de Boletín"
+                description="Este campo es opcional"
+                fullWidth
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};