siesa-ui-kit 1.0.3 → 1.0.4

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

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