siesa-ui-kit 1.0.1 → 1.0.2

package/src/components/Pagination/index.ts

@@ -0,0 +1,3 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps, PageButtonProps } from './Pagination.types';
+export { ArrowLeftIcon, ArrowRightIcon } from './icons';

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

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