siesa-ui-kit 1.0.2 → 1.0.3

package/src/components/POSProductSidebarItems/POSProductSidebarItems.stories.tsx

@@ -1,753 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState, useEffect } from 'react';
-import { POSProductSidebarItems } from './POSProductSidebarItems';
-
-/**
- * Componente de item de producto para sidebar de sistema POS.
- *
- * Basado en Figma node 4507-28013, muestra información del producto con:
- * - Badge de categoría (19 colores disponibles)
- * - Referencia del producto
- * - Precio total
- * - Descripción con items opcionales
- * - Control de cantidad integrado
- * - Botón de eliminar
- *
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013
- */
-const meta = {
-  title: 'Siesa UI Kit/POSProductSidebarItems',
-  component: POSProductSidebarItems,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `
-Componente pixel-perfect para mostrar productos en el sidebar de un sistema POS.
-
-## Características
-- **Badge de categoría**: 19 colores configurables con soporte dark mode
-- **Referencia**: Texto pequeño (10px) con la referencia del producto
-- **Precio**: Texto bold (12px) alineado a la derecha
-- **Descripción**: Sección opcional con fondo terciario y lista de items
-- **Cantidad**: Control integrado con el componente Quantity
-- **Eliminar**: Botón con icono de papelera y estados hover/focus
-
-## Dark Mode
-El componente tiene soporte completo para dark mode con colores adaptativos:
-- Textos: \`text-content-primary\` → \`dark:text-dark-content-primary\`
-- Description: \`bg-background-secondary\` → \`dark:bg-zinc-700\`
-- Delete: \`text-red-700\` → \`dark:text-red-500\`
-
-## Figma
-[Ver diseño en Figma](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013)
-        `,
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    categoryLabel: {
-      control: 'text',
-      description: 'Etiqueta de categoría del producto (ej: "Entradas", "Bebidas")',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    categoryColor: {
-      control: 'select',
-      options: ['lime', 'red', 'orange', 'amber', 'yellow', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'zinc', 'primary'],
-      description: 'Color del badge de categoría - 19 colores disponibles',
-      table: {
-        type: { summary: 'CategoryColor' },
-        defaultValue: { summary: 'lime' },
-        category: 'Apariencia',
-      },
-    },
-    productRef: {
-      control: 'text',
-      description: 'Referencia del producto (ej: "00147258369")',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    price: {
-      control: 'text',
-      description: 'Precio total del producto formateado (ej: "$ 40,000.00")',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    productName: {
-      control: 'text',
-      description: 'Nombre del producto (ej: "Hamburguesa clásica")',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    descriptionItems: {
-      control: 'object',
-      description: 'Lista de items de descripción con descripción y precio',
-      table: {
-        type: { summary: 'DescriptionItem[]' },
-        defaultValue: { summary: '[]' },
-        category: 'Contenido',
-      },
-    },
-    showDescription: {
-      control: 'boolean',
-      description: 'Muestra/oculta la sección de descripción',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-        category: 'Estado',
-      },
-    },
-    quantity: {
-      control: { type: 'number', min: 0, max: 100 },
-      description: 'Cantidad actual del producto',
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' },
-        category: 'Estado',
-      },
-    },
-    minQuantity: {
-      control: { type: 'number', min: 0, max: 100 },
-      description: 'Cantidad mínima permitida',
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' },
-        category: 'Estado',
-      },
-    },
-    maxQuantity: {
-      control: { type: 'number', min: 0, max: 1000 },
-      description: 'Cantidad máxima permitida (opcional)',
-      table: {
-        type: { summary: 'number' },
-        category: 'Estado',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el componente (opacity 50%, no interactivo)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    onQuantityChange: {
-      action: 'quantityChanged',
-      description: 'Callback cuando cambia la cantidad',
-      table: {
-        type: { summary: '(quantity: number) => void' },
-        category: 'Eventos',
-      },
-    },
-    onDelete: {
-      action: 'deleted',
-      description: 'Callback cuando se hace clic en eliminar',
-      table: {
-        type: { summary: '() => void' },
-        category: 'Eventos',
-      },
-    },
-  },
-} satisfies Meta<typeof POSProductSidebarItems>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    productName: 'Nombre producto',
-    descriptionItems: [
-      { description: 'Papas limón mediana', price: '$ 40,000.00' },
-      { description: 'Papas limón mediana', price: '$ 40,000.00' },
-    ],
-    showDescription: true,
-    quantity: 0,
-    disabled: false,
-  },
-  render: (args) => {
-    const [quantity, setQuantity] = useState(args.quantity ?? 0);
-
-    useEffect(() => {
-      setQuantity(args.quantity ?? 0);
-    }, [args.quantity]);
-
-    return (
-      <div className="w-[272px]">
-        <POSProductSidebarItems
-          {...args}
-          quantity={quantity}
-          onQuantityChange={(qty) => setQuantity(qty)}
-          onDelete={() => alert('Producto eliminado')}
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 2. CON DESCRIPCIÓN
-// ============================================
-export const ConDescripcion: Story = {
-  args: {
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    productName: 'Hamburguesa clásica',
-    descriptionItems: [
-      { description: 'Papas limón mediana', price: '$ 40,000.00' },
-      { description: 'Gaseosa 400ml', price: '$ 5,000.00' },
-    ],
-    showDescription: true,
-    quantity: 2,
-    disabled: false,
-  },
-  render: (args) => {
-    const [quantity, setQuantity] = useState(args.quantity ?? 0);
-
-    return (
-      <div className="w-[272px]">
-        <POSProductSidebarItems
-          {...args}
-          quantity={quantity}
-          onQuantityChange={(qty) => setQuantity(qty)}
-          onDelete={() => console.log('Eliminar')}
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 3. SIN DESCRIPCIÓN
-// ============================================
-export const SinDescripcion: Story = {
-  args: {
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    productName: 'Nombre producto',
-    descriptionItems: [],
-    showDescription: false,
-    quantity: 1,
-    disabled: false,
-  },
-  render: (args) => {
-    const [quantity, setQuantity] = useState(args.quantity ?? 0);
-
-    return (
-      <div className="w-[272px]">
-        <POSProductSidebarItems
-          {...args}
-          quantity={quantity}
-          onQuantityChange={(qty) => setQuantity(qty)}
-          onDelete={() => console.log('Eliminar')}
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 4. TODAS LAS CATEGORÍAS
-// ============================================
-export const TodasLasCategorias: Story = {
-  args: {
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    productName: 'Nombre producto',
-    descriptionItems: [],
-    showDescription: false,
-    quantity: 0,
-    disabled: false,
-  },
-  render: () => {
-    const categories = [
-      { label: 'Entradas', color: 'lime' as const },
-      { label: 'Bebidas', color: 'cyan' as const },
-      { label: 'Postres', color: 'pink' as const },
-      { label: 'Platos fuertes', color: 'orange' as const },
-      { label: 'Promociones', color: 'red' as const },
-      { label: 'Combos', color: 'blue' as const },
-    ];
-
-    return (
-      <div className="flex flex-col gap-6 p-4">
-        <h3 className="text-sm font-bold text-gray-700 dark:text-white">
-          Categorías Disponibles
-        </h3>
-        <div className="flex flex-col gap-4">
-          {categories.map((cat, index) => (
-            <div key={index} className="w-[272px]">
-              <POSProductSidebarItems
-                categoryLabel={cat.label}
-                categoryColor={cat.color}
-                productRef="00147258369"
-                price="$ 40,000.00"
-                productName="Nombre producto"
-                showDescription={false}
-                quantity={0}
-                onQuantityChange={() => {}}
-                onDelete={() => {}}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 5. ESTADOS
-// ============================================
-export const Estados: Story = {
-  args: {
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    productName: 'Nombre producto',
-    descriptionItems: [],
-    showDescription: false,
-    quantity: 0,
-    disabled: false,
-  },
-  render: () => (
-    <div className="flex flex-col gap-8 p-4">
-      {/* Normal */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Normal
-        </h3>
-        <div className="w-[272px]">
-          <POSProductSidebarItems
-            categoryLabel="Entradas"
-            categoryColor="lime"
-            productRef="00147258369"
-            price="$ 40,000.00"
-            productName="Hamburguesa clásica"
-            descriptionItems={[
-              { description: 'Papas limón mediana', price: '$ 40,000.00' },
-            ]}
-            showDescription={true}
-            quantity={2}
-            onQuantityChange={() => {}}
-            onDelete={() => {}}
-          />
-        </div>
-      </div>
-
-      {/* Deshabilitado */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Deshabilitado
-        </h3>
-        <div className="w-[272px]">
-          <POSProductSidebarItems
-            categoryLabel="Entradas"
-            categoryColor="lime"
-            productRef="00147258369"
-            price="$ 40,000.00"
-            productName="Hamburguesa clásica"
-            descriptionItems={[
-              { description: 'Papas limón mediana', price: '$ 40,000.00' },
-            ]}
-            showDescription={true}
-            quantity={2}
-            disabled={true}
-            onQuantityChange={() => {}}
-            onDelete={() => {}}
-          />
-        </div>
-      </div>
-
-      {/* Cantidad cero */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Cantidad Cero
-        </h3>
-        <div className="w-[272px]">
-          <POSProductSidebarItems
-            categoryLabel="Bebidas"
-            categoryColor="cyan"
-            productRef="00147258369"
-            price="$ 5,000.00"
-            productName="Gaseosa 400ml"
-            showDescription={false}
-            quantity={0}
-            onQuantityChange={() => {}}
-            onDelete={() => {}}
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. EJEMPLO DE USO EN SIDEBAR
-// ============================================
-export const EjemploEnSidebar: Story = {
-  args: {
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    productName: 'Nombre producto',
-    descriptionItems: [],
-    showDescription: false,
-    quantity: 0,
-    disabled: false,
-  },
-  render: () => {
-    const [items, setItems] = useState([
-      {
-        id: 1,
-        categoryLabel: 'Entradas',
-        categoryColor: 'lime' as const,
-        productRef: '00147258369',
-        price: '$ 80,000.00',
-        productName: 'Combo familiar',
-        descriptionItems: [
-          { description: 'Hamburguesa x2', price: '$ 50,000.00' },
-          { description: 'Papas grandes', price: '$ 15,000.00' },
-          { description: 'Bebidas x2', price: '$ 15,000.00' },
-        ],
-        showDescription: true,
-        quantity: 1,
-      },
-      {
-        id: 2,
-        categoryLabel: 'Bebidas',
-        categoryColor: 'cyan' as const,
-        productRef: '00258369147',
-        price: '$ 5,000.00',
-        productName: 'Gaseosa 400ml',
-        descriptionItems: [],
-        showDescription: false,
-        quantity: 2,
-      },
-      {
-        id: 3,
-        categoryLabel: 'Postres',
-        categoryColor: 'pink' as const,
-        productRef: '00369147258',
-        price: '$ 12,000.00',
-        productName: 'Helado de vainilla',
-        descriptionItems: [],
-        showDescription: false,
-        quantity: 1,
-      },
-    ]);
-
-    const handleQuantityChange = (id: number, newQuantity: number) => {
-      setItems(items.map(item =>
-        item.id === id ? { ...item, quantity: newQuantity } : item
-      ));
-    };
-
-    const handleDelete = (id: number) => {
-      setItems(items.filter(item => item.id !== id));
-    };
-
-    const total = items.reduce((sum, item) => {
-      const price = parseFloat(item.price.replace(/[^0-9.]/g, '').replace(',', ''));
-      return sum + (price * item.quantity);
-    }, 0);
-
-    return (
-      <div className="w-[304px] p-4 bg-white dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg">
-        <h2 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Orden actual
-        </h2>
-
-        <div className="flex flex-col gap-4">
-          {items.map((item) => (
-            <div key={item.id} className="border-b border-border-primary dark:border-dark-border-primary pb-4 last:border-b-0 last:pb-0">
-              <POSProductSidebarItems
-                {...item}
-                onQuantityChange={(qty) => handleQuantityChange(item.id, qty)}
-                onDelete={() => handleDelete(item.id)}
-              />
-            </div>
-          ))}
-        </div>
-
-        {items.length > 0 && (
-          <div className="mt-4 pt-4 border-t border-border-primary dark:border-dark-border-primary">
-            <div className="flex justify-between items-center">
-              <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
-                Total
-              </span>
-              <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
-                $ {total.toLocaleString('es-CO', { minimumFractionDigits: 2 })}
-              </span>
-            </div>
-          </div>
-        )}
-
-        {items.length === 0 && (
-          <p className="text-sm text-content-secondary dark:text-content-secondary text-center py-4">
-            No hay productos en la orden
-          </p>
-        )}
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 7. MÚLTIPLES ITEMS DE DESCRIPCIÓN
-// ============================================
-export const MultiplesDescripciones: Story = {
-  args: {
-    categoryLabel: 'Combos',
-    categoryColor: 'blue',
-    productRef: '00147258369',
-    price: '$ 120,000.00',
-    productName: 'Combo mega familiar',
-    descriptionItems: [
-      { description: 'Hamburguesa doble x4', price: '$ 80,000.00' },
-      { description: 'Papas familiares x2', price: '$ 20,000.00' },
-      { description: 'Gaseosa 1.5L x2', price: '$ 12,000.00' },
-      { description: 'Postre brownie x4', price: '$ 8,000.00' },
-    ],
-    showDescription: true,
-    quantity: 1,
-    disabled: false,
-  },
-  render: (args) => {
-    const [quantity, setQuantity] = useState(args.quantity ?? 0);
-
-    return (
-      <div className="w-[272px]">
-        <POSProductSidebarItems
-          {...args}
-          quantity={quantity}
-          onQuantityChange={(qty) => setQuantity(qty)}
-          onDelete={() => console.log('Eliminar')}
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 8. DARK MODE COMPARISON
-// ============================================
-/**
- * Comparación lado a lado del componente en Light y Dark mode.
- * Demuestra que todos los colores se adaptan correctamente.
- */
-export const DarkModeComparison: Story = {
-  args: {
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    productName: 'Nombre producto',
-    descriptionItems: [
-      { description: 'Papas limón mediana', price: '$ 40,000.00' },
-      { description: 'Papas limón mediana', price: '$ 40,000.00' },
-    ],
-    showDescription: true,
-    quantity: 2,
-    disabled: false,
-  },
-  render: (args) => {
-    const [lightQty, setLightQty] = useState(args.quantity ?? 0);
-    const [darkQty, setDarkQty] = useState(args.quantity ?? 0);
-
-    return (
-      <div className="flex gap-8 p-6">
-        {/* Light Mode */}
-        <div className="flex flex-col gap-4">
-          <h3 className="text-sm font-bold text-gray-700 text-center">Light Mode</h3>
-          <div className="w-[272px] p-4 bg-white border border-gray-200 rounded-lg">
-            <POSProductSidebarItems
-              {...args}
-              quantity={lightQty}
-              onQuantityChange={(qty) => setLightQty(qty)}
-              onDelete={() => console.log('Eliminar light')}
-            />
-          </div>
-        </div>
-
-        {/* Dark Mode */}
-        <div className="flex flex-col gap-4">
-          <h3 className="text-sm font-bold text-gray-700 text-center">Dark Mode</h3>
-          <div className="dark w-[272px] p-4 bg-zinc-900 border border-zinc-700 rounded-lg">
-            <POSProductSidebarItems
-              {...args}
-              quantity={darkQty}
-              onQuantityChange={(qty) => setDarkQty(qty)}
-              onDelete={() => console.log('Eliminar dark')}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 9. TODOS LOS COLORES DE BADGE (Dark Mode)
-// ============================================
-/**
- * Muestra todos los colores de badge disponibles en dark mode
- * para verificar que mantienen contraste adecuado.
- */
-export const BadgeColorsDarkMode: Story = {
-  args: {
-    categoryLabel: 'Test',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    productName: 'Nombre producto',
-    descriptionItems: [],
-    showDescription: false,
-    quantity: 0,
-    disabled: false,
-  },
-  render: () => {
-    const colors = [
-      'lime', 'red', 'orange', 'amber', 'yellow', 'green',
-      'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo',
-      'violet', 'purple', 'fuchsia', 'pink', 'rose', 'zinc', 'primary'
-    ] as const;
-
-    return (
-      <div className="flex gap-8 p-6">
-        {/* Light Mode */}
-        <div className="flex flex-col gap-3">
-          <h3 className="text-sm font-bold text-gray-700 text-center mb-2">Light Mode</h3>
-          <div className="grid grid-cols-2 gap-3 p-4 bg-white border border-gray-200 rounded-lg">
-            {colors.map((color) => (
-              <div key={`light-${color}`} className="w-[130px]">
-                <POSProductSidebarItems
-                  categoryLabel={color}
-                  categoryColor={color}
-                  productRef="REF123"
-                  price="$ 1,000"
-                  productName="Producto"
-                  showDescription={false}
-                  quantity={0}
-                  onQuantityChange={() => {}}
-                  onDelete={() => {}}
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Dark Mode */}
-        <div className="flex flex-col gap-3">
-          <h3 className="text-sm font-bold text-gray-700 text-center mb-2">Dark Mode</h3>
-          <div className="dark grid grid-cols-2 gap-3 p-4 bg-zinc-900 border border-zinc-700 rounded-lg">
-            {colors.map((color) => (
-              <div key={`dark-${color}`} className="w-[130px]">
-                <POSProductSidebarItems
-                  categoryLabel={color}
-                  categoryColor={color}
-                  productRef="REF123"
-                  price="$ 1,000"
-                  productName="Producto"
-                  showDescription={false}
-                  quantity={0}
-                  onQuantityChange={() => {}}
-                  onDelete={() => {}}
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 10. FOCUS STATES
-// ============================================
-/**
- * Demuestra los estados de focus en el botón de eliminar.
- * Use Tab para navegar y ver los focus rings adaptativos.
- */
-export const FocusStates: Story = {
-  args: {
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    productName: 'Hamburguesa clásica',
-    descriptionItems: [
-      { description: 'Papas limón mediana', price: '$ 20,000.00' },
-    ],
-    showDescription: true,
-    quantity: 1,
-    disabled: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Usa la tecla Tab para navegar entre los controles de cantidad y el botón eliminar. Observa los focus rings adaptativos en light y dark mode.',
-      },
-    },
-  },
-  render: (args) => {
-    const [lightQty, setLightQty] = useState(args.quantity ?? 0);
-    const [darkQty, setDarkQty] = useState(args.quantity ?? 0);
-
-    return (
-      <div className="flex gap-8 p-6">
-        {/* Light Mode */}
-        <div className="flex flex-col gap-4">
-          <h3 className="text-sm font-bold text-gray-700 text-center">Light Mode (Tab para focus)</h3>
-          <div className="w-[272px] p-4 bg-white border border-gray-200 rounded-lg">
-            <POSProductSidebarItems
-              {...args}
-              quantity={lightQty}
-              onQuantityChange={(qty) => setLightQty(qty)}
-              onDelete={() => alert('Eliminar (Light)')}
-            />
-          </div>
-        </div>
-
-        {/* Dark Mode */}
-        <div className="flex flex-col gap-4">
-          <h3 className="text-sm font-bold text-gray-700 text-center">Dark Mode (Tab para focus)</h3>
-          <div className="dark w-[272px] p-4 bg-zinc-900 border border-zinc-700 rounded-lg">
-            <POSProductSidebarItems
-              {...args}
-              quantity={darkQty}
-              onQuantityChange={(qty) => setDarkQty(qty)}
-              onDelete={() => alert('Eliminar (Dark)')}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};