siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/Quantity/Quantity.stories.tsx

@@ -1,457 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Quantity } from './Quantity';
-import { useState } from 'react';
-
-/**
- * Quantity - Componente de cantidad del sistema de diseño Siesa
- *
- * Sistema completo para seleccionar cantidades numéricas con soporte para:
- * - **Botones de incremento/decremento**: Plus y minus icons
- * - **Restricciones**: Valores mínimo y máximo
- * - **Label opcional**: Con link opcional a la derecha
- * - **Helper text**: Texto de ayuda opcional
- * - **Estado de error**: Validación visual
- * - **Estado deshabilitado**: Interacción bloqueada
- * - **Dark mode**: Adaptación completa al tema oscuro
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- */
-const meta = {
-  title: 'Siesa UI Kit/Quantity',
-  component: Quantity,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Componente para seleccionar cantidades numéricas con botones de incremento y decremento. Ideal para selección de productos, ajuste de parámetros numéricos, etc.',
-      },
-    },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'gray', value: '#f3f4f6' },
-        { name: 'dark', value: '#1f2937' },
-      ],
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    value: {
-      control: 'number',
-      description: 'Valor actual (controlado)',
-      table: {
-        type: { summary: 'number' },
-        category: 'State',
-      },
-    },
-    defaultValue: {
-      control: 'number',
-      description: 'Valor por defecto (no controlado)',
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' },
-        category: 'State',
-      },
-    },
-    min: {
-      control: 'number',
-      description: 'Valor mínimo permitido',
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' },
-        category: 'Validation',
-      },
-    },
-    max: {
-      control: 'number',
-      description: 'Valor máximo permitido',
-      table: {
-        type: { summary: 'number' },
-        category: 'Validation',
-      },
-    },
-    label: {
-      control: 'text',
-      description: 'Label opcional',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    linkText: {
-      control: 'text',
-      description: 'Texto del link opcional (aparece a la derecha del label)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    helperText: {
-      control: 'text',
-      description: 'Texto de ayuda opcional',
-      table: {
-        type: { summary: 'string' },
-        category: 'Content',
-      },
-    },
-    error: {
-      control: 'boolean',
-      description: 'Estado de error',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Estado deshabilitado',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'State',
-      },
-    },
-    onChange: {
-      action: 'changed',
-      description: 'Callback cuando el valor cambia',
-      table: {
-        type: { summary: '(value: number) => void' },
-        category: 'Events',
-      },
-    },
-    onLinkClick: {
-      action: 'link clicked',
-      description: 'Callback cuando se hace click en el link',
-      table: {
-        type: { summary: '() => void' },
-        category: 'Events',
-      },
-    },
-  },
-} satisfies Meta<typeof Quantity>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-
-/**
- * Playground Interactivo
- *
- * Usa los controles para experimentar con el Quantity en tiempo real.
- */
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    label: 'Cantidad',
-    defaultValue: 0,
-    min: 0,
-    max: 10,
-    helperText: 'Selecciona una cantidad entre 0 y 10',
-  },
-};
-
-// ============================================
-// 2. VARIANTES BÁSICAS
-// ============================================
-
-/**
- * Variantes Básicas
- *
- * Vista de las variantes básicas del Quantity según Figma.
- */
-export const VariantesBasicas: Story = {
-  name: 'Variantes Básicas',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Sin label */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Sin Label</h3>
-        <Quantity defaultValue={0} />
-      </div>
-
-      {/* Con label */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label</h3>
-        <Quantity label="Cantidad" defaultValue={5} />
-      </div>
-
-      {/* Con label y helper text */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label y Helper Text</h3>
-        <Quantity
-          label="Cantidad"
-          helperText="Selecciona la cantidad deseada"
-          defaultValue={3}
-        />
-      </div>
-
-      {/* Con label, helper text y link */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Label, Helper Text y Link</h3>
-        <Quantity
-          label="Cantidad"
-          linkText="Limpiar"
-          helperText="Selecciona la cantidad deseada"
-          defaultValue={8}
-          onLinkClick={() => console.log('Link clicked')}
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. ESTADOS
-// ============================================
-
-/**
- * Estados
- *
- * Vista de todos los estados posibles del Quantity.
- */
-export const Estados: Story = {
-  name: 'Estados',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Default (vacío) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Default (Vacío)</h3>
-        <Quantity label="Cantidad" defaultValue={0} helperText="Valor inicial en 0" />
-      </div>
-
-      {/* Filled (con valor) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Filled (Con Valor)</h3>
-        <Quantity label="Cantidad" defaultValue={5} helperText="Valor actual: 5" />
-      </div>
-
-      {/* Error */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Error</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={15}
-          max={10}
-          error
-          helperText="El valor no puede ser mayor a 10"
-        />
-      </div>
-
-      {/* Disabled */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Disabled</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={3}
-          disabled
-          helperText="Campo deshabilitado"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CON RESTRICCIONES MIN/MAX
-// ============================================
-
-/**
- * Con Restricciones Min/Max
- *
- * Ejemplos de Quantity con valores mínimo y máximo.
- */
-export const ConMinMax: Story = {
-  name: 'Con Min/Max',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Solo mínimo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Mínimo (min=0)</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={0}
-          min={0}
-          helperText="No puede ser menor a 0"
-        />
-      </div>
-
-      {/* Solo máximo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Solo Máximo (max=10)</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={10}
-          max={10}
-          helperText="No puede ser mayor a 10"
-        />
-      </div>
-
-      {/* Mínimo y máximo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Min y Max (1-5)</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={3}
-          min={1}
-          max={5}
-          helperText="Valor entre 1 y 5"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. INTERACTIVO (CONTROLADO)
-// ============================================
-
-/**
- * Interactivo (Controlado)
- *
- * Ejemplo de Quantity controlado con estado externo.
- */
-export const Controlado: Story = {
-  name: 'Controlado',
-  args: {
-    label: '',
-  },
-  render: () => {
-    const ControlledQuantity = () => {
-      const [value, setValue] = useState(0);
-
-      return (
-        <div className="space-y-4">
-          <Quantity
-            label="Cantidad de productos"
-            value={value}
-            onChange={setValue}
-            min={0}
-            max={10}
-            helperText={`Has seleccionado ${value} producto${value !== 1 ? 's' : ''}`}
-          />
-          <div className="flex gap-2">
-            <button
-              onClick={() => setValue(0)}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              Reset
-            </button>
-            <button
-              onClick={() => setValue(5)}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              Set to 5
-            </button>
-            <button
-              onClick={() => setValue(10)}
-              className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-white rounded text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-            >
-              Set to Max
-            </button>
-          </div>
-        </div>
-      );
-    };
-
-    return <ControlledQuantity />;
-  },
-};
-
-// ============================================
-// 6. CASOS DE USO REALES
-// ============================================
-
-/**
- * Casos de Uso Reales
- *
- * Ejemplos prácticos de cómo usar Quantity en situaciones reales.
- */
-export const UseCases: Story = {
-  name: 'Casos de Uso Reales',
-  args: {
-    label: '',
-  },
-  render: () => (
-    <div className="space-y-6">
-      {/* Carrito de compras */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Carrito de Compras</h3>
-        <Quantity
-          label="Cantidad"
-          linkText="Eliminar"
-          defaultValue={1}
-          min={1}
-          max={99}
-          helperText="Máximo 99 unidades por producto"
-          onLinkClick={() => console.log('Remove from cart')}
-        />
-      </div>
-
-      {/* Selector de personas */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Selector de Personas</h3>
-        <Quantity
-          label="Número de personas"
-          defaultValue={2}
-          min={1}
-          max={10}
-          helperText="Selecciona cuántas personas asistirán"
-        />
-      </div>
-
-      {/* Ajuste de parámetros */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Ajuste de Parámetros</h3>
-        <Quantity
-          label="Tiempo de espera (minutos)"
-          linkText="Restablecer"
-          defaultValue={5}
-          min={0}
-          max={60}
-          helperText="Configura el tiempo de espera en minutos"
-          onLinkClick={() => console.log('Reset to default')}
-        />
-      </div>
-
-      {/* Stock disponible */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Stock Disponible</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={3}
-          min={1}
-          max={5}
-          helperText="Solo quedan 5 unidades disponibles"
-        />
-      </div>
-
-      {/* Producto agotado */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Producto Agotado</h3>
-        <Quantity
-          label="Cantidad"
-          defaultValue={0}
-          disabled
-          helperText="Producto temporalmente agotado"
-        />
-      </div>
-    </div>
-  ),
-};