siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/POSProductCard/POSProductCard.stories.tsx

@@ -0,0 +1,642 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { POSProductCard } from './POSProductCard';
+
+/**
+ * POSProductCard es un componente de card especializado para sistemas de punto de venta (POS).
+ * Muestra información de producto con imagen, nombre, precio y botón de agregar.
+ *
+ * Diseñado para catálogos de productos y selección rápida en terminales POS.
+ *
+ * **Características principales:**
+ * - Soporte completo de dark mode pixel-perfect según Figma
+ * - Reutiliza el componente Button del sistema (con dark mode invertido)
+ * - Focus rings adaptativos para accesibilidad
+ * - 3 estados: enabled, active, disabled
+ *
+ * **Colores Dark Mode del Card (según Figma):**
+ * - Card enabled: fondo #18181b, texto #f4f4f5
+ * - Card active: fondo #112d57, texto #93d1fd
+ *
+ * **Colores Dark Mode del Botón (según Figma):**
+ * - Fondo: #bfe2fe (celeste claro, invertido)
+ * - Texto: #0e79fd (azul, invertido)
+ * - Borde: #93d1fd
+ *
+ * @see [Figma: POS Product Card](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336)
+ * @see src/components/Button - Componente Button reutilizado (con dark mode)
+ */
+const meta = {
+  title: 'Siesa UI Kit/POSProductCard',
+  component: POSProductCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Card de producto para sistemas POS. Muestra imagen, nombre, precio y botón de agregar con soporte completo de dark mode pixel-perfect. El botón reutiliza el componente Button del sistema.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    image: {
+      control: 'text',
+      description: 'URL de la imagen del producto',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    productName: {
+      control: 'text',
+      description: 'Nombre del producto',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    price: {
+      control: 'text',
+      description: 'Precio del producto formateado',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    buttonText: {
+      control: 'text',
+      description: 'Texto del botón de acción',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Agregar' },
+        category: 'Contenido',
+      },
+    },
+    active: {
+      control: 'boolean',
+      description: 'Estado activo/seleccionado del card',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si el card está deshabilitado',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    onAddClick: {
+      action: 'onAddClick',
+      description: 'Handler cuando se hace clic en el botón Agregar',
+      table: {
+        type: { summary: '(event: MouseEvent) => void' },
+        category: 'Eventos',
+      },
+    },
+    onCardClick: {
+      action: 'onCardClick',
+      description: 'Handler cuando se hace clic en el card',
+      table: {
+        type: { summary: '(event: MouseEvent) => void' },
+        category: 'Eventos',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Clases CSS adicionales',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+      },
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Label de accesibilidad',
+      table: {
+        type: { summary: 'string' },
+        category: 'Accesibilidad',
+      },
+    },
+  },
+} satisfies Meta<typeof POSProductCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Imagen de ejemplo (placeholder)
+const sampleImage = 'https://images.unsplash.com/photo-1592417817098-8fd3d9eb14a5?w=300&h=200&fit=crop';
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+    buttonText: 'Agregar',
+    active: false,
+    disabled: false,
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+export const TodosLosEstados: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Estado Enabled (Normal) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Estado Normal (Enabled)
+        </h3>
+        <div className="flex gap-4">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            onAddClick={() => console.log('Producto agregado')}
+          />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Estado por defecto con fondo blanco y texto negro
+        </p>
+      </div>
+
+      {/* Estado Activo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Estado Activo (Seleccionado)
+        </h3>
+        <div className="flex gap-4">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            active={true}
+            onAddClick={() => console.log('Producto agregado')}
+          />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Estado seleccionado con fondo azul claro y texto azul
+        </p>
+      </div>
+
+      {/* Estado Deshabilitado */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Estado Deshabilitado
+        </h3>
+        <div className="flex gap-4">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            disabled={true}
+          />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Estado deshabilitado con opacidad reducida
+        </p>
+      </div>
+
+      {/* 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>Uso recomendado:</strong>
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">enabled</code> - Estado normal del producto
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">active</code> - Producto seleccionado o agregado al carrito
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">disabled</code> - Producto no disponible
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. COMPARACIÓN LADO A LADO
+// ============================================
+export const ComparacionEstados: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Comparación de Estados
+      </h3>
+      <div className="flex gap-4 flex-wrap">
+        <div className="text-center">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+          />
+          <span className="text-xs text-gray-500 dark:text-gray-300 mt-2 block">Normal</span>
+        </div>
+        <div className="text-center">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            active={true}
+          />
+          <span className="text-xs text-gray-500 dark:text-gray-300 mt-2 block">Activo</span>
+        </div>
+        <div className="text-center">
+          <POSProductCard
+            image={sampleImage}
+            productName="Ensalada Caprese"
+            price="$ 40.000"
+            disabled={true}
+          />
+          <span className="text-xs text-gray-500 dark:text-gray-300 mt-2 block">Deshabilitado</span>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. GRID DE PRODUCTOS (EJEMPLO DE USO)
+// ============================================
+export const GridDeProductos: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => {
+    const productos = [
+      { id: 1, name: 'Ensalada Caprese', price: '$ 40.000', active: false },
+      { id: 2, name: 'Pizza Margherita', price: '$ 35.000', active: true },
+      { id: 3, name: 'Pasta Alfredo', price: '$ 28.000', active: false },
+      { id: 4, name: 'Tiramisú', price: '$ 15.000', active: false },
+      { id: 5, name: 'Producto Agotado', price: '$ 22.000', disabled: true },
+      { id: 6, name: 'Risotto', price: '$ 32.000', active: false },
+    ];
+
+    return (
+      <div className="p-6">
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Catálogo de Productos (Ejemplo de Grid)
+        </h3>
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+          {productos.map((producto) => (
+            <POSProductCard
+              key={producto.id}
+              image={sampleImage}
+              productName={producto.name}
+              price={producto.price}
+              active={producto.active}
+              disabled={producto.disabled}
+              onAddClick={() => console.log(`Agregado: ${producto.name}`)}
+            />
+          ))}
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+          Ejemplo de uso en un grid de catálogo de productos POS
+        </p>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 5. DIFERENTES PRECIOS
+// ============================================
+export const DiferentesPrecios: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Diferentes Formatos de Precio
+      </h3>
+      <div className="flex gap-4 flex-wrap">
+        <POSProductCard
+          image={sampleImage}
+          productName="Producto Económico"
+          price="$ 5.000"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Producto Medio"
+          price="$ 40.000"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Producto Premium"
+          price="$ 150.000"
+        />
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+        El componente se adapta a diferentes longitudes de precio
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. TEXTO PERSONALIZADO DEL BOTÓN
+// ============================================
+export const TextoPersonalizado: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Texto Personalizado del Botón
+      </h3>
+      <div className="flex gap-4 flex-wrap">
+        <POSProductCard
+          image={sampleImage}
+          productName="Ensalada Caprese"
+          price="$ 40.000"
+          buttonText="Agregar"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Pizza Especial"
+          price="$ 45.000"
+          buttonText="Pedir"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Combo Familiar"
+          price="$ 80.000"
+          buttonText="Seleccionar"
+        />
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+        El texto del botón se puede personalizar según el contexto
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. NOMBRES LARGOS
+// ============================================
+export const NombresLargos: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Nombres de Producto Largos
+      </h3>
+      <div className="flex gap-4 flex-wrap">
+        <POSProductCard
+          image={sampleImage}
+          productName="Ensalada"
+          price="$ 25.000"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Ensalada Caprese Especial"
+          price="$ 40.000"
+        />
+        <POSProductCard
+          image={sampleImage}
+          productName="Ensalada Mediterránea con Aceitunas y Queso Feta"
+          price="$ 45.000"
+        />
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+        El nombre del producto se adapta al espacio disponible
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 8. INTERACTIVIDAD
+// ============================================
+export const Interactividad: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Eventos de Interacción
+      </h3>
+      <div className="flex gap-4">
+        <POSProductCard
+          image={sampleImage}
+          productName="Producto Interactivo"
+          price="$ 40.000"
+          onCardClick={() => alert('Clic en el card')}
+          onAddClick={() => alert('Clic en el botón Agregar')}
+        />
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+        Haz clic en el card o en el botón para ver los eventos
+      </p>
+
+      {/* 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>Eventos disponibles:</strong>
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">onCardClick</code> - Se dispara al hacer clic en el card (no en el botón)
+          <br />• <code className="px-1 bg-white dark:bg-gray-700 rounded">onAddClick</code> - Se dispara al hacer clic en el botón "Agregar"
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 9. LIGHT VS DARK MODE
+// ============================================
+export const LightVsDarkMode: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Ensalada Caprese',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="flex gap-8 p-6">
+      {/* Light Mode */}
+      <div className="p-6 bg-white rounded-2xl border border-gray-200">
+        <h3 className="text-sm font-bold mb-4 text-gray-700">
+          Light Mode
+        </h3>
+        <div className="space-y-4">
+          <div className="text-center">
+            <POSProductCard
+              image={sampleImage}
+              productName="Nombre producto"
+              price="$ 40.000"
+            />
+            <span className="text-xs text-gray-500 mt-2 block">Enabled</span>
+            <span className="text-xs text-gray-400 block">Card: #fff, Texto: #18181b</span>
+          </div>
+          <div className="text-center">
+            <POSProductCard
+              image={sampleImage}
+              productName="Nombre producto"
+              price="$ 40.000"
+              active={true}
+            />
+            <span className="text-xs text-gray-500 mt-2 block">Active</span>
+            <span className="text-xs text-gray-400 block">Card: #dbeefe, Texto: #0e79fd</span>
+          </div>
+        </div>
+        <div className="mt-4 p-3 bg-gray-50 rounded text-xs text-gray-600">
+          <strong>Botón Light:</strong><br />
+          Fondo: #0e79fd (azul)<br />
+          Texto: #eff8ff (blanco)
+        </div>
+      </div>
+
+      {/* Dark Mode */}
+      <div className="dark p-6 bg-zinc-900 rounded-2xl">
+        <h3 className="text-sm font-bold mb-4 text-white">
+          Dark Mode
+        </h3>
+        <div className="space-y-4">
+          <div className="text-center">
+            <POSProductCard
+              image={sampleImage}
+              productName="Nombre producto"
+              price="$ 40.000"
+            />
+            <span className="text-xs text-gray-300 mt-2 block">Enabled</span>
+            <span className="text-xs text-gray-500 block">Card: #18181b, Texto: #f4f4f5</span>
+          </div>
+          <div className="text-center">
+            <POSProductCard
+              image={sampleImage}
+              productName="Nombre producto"
+              price="$ 40.000"
+              active={true}
+            />
+            <span className="text-xs text-gray-300 mt-2 block">Active</span>
+            <span className="text-xs text-gray-500 block">Card: #112d57, Texto: #93d1fd</span>
+          </div>
+        </div>
+        <div className="mt-4 p-3 bg-zinc-800 rounded text-xs text-gray-300">
+          <strong>Botón Dark (invertido):</strong><br />
+          Fondo: #bfe2fe (celeste claro)<br />
+          Texto: #0e79fd (azul)
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 10. ESPECIFICACIONES DE FIGMA
+// ============================================
+export const EspecificacionesFigma: Story = {
+  args: {
+    image: sampleImage,
+    productName: 'Nombre producto',
+    price: '$ 40.000',
+  },
+  render: () => (
+    <div className="p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Especificaciones de Diseño (Figma)
+      </h3>
+
+      {/* Card con anotaciones */}
+      <div className="flex gap-8 items-start">
+        <div className="relative">
+          <POSProductCard
+            image={sampleImage}
+            productName="Nombre producto"
+            price="$ 40.000"
+          />
+          {/* Anotación de tamaño */}
+          <div className="absolute -right-20 top-0 text-xs text-gray-500">
+            <div className="border-l border-dashed border-gray-400 h-full absolute left-0" />
+            <span className="ml-2">170px</span>
+          </div>
+        </div>
+
+        {/* Tabla de especificaciones */}
+        <div className="text-xs text-gray-600 dark:text-gray-300 space-y-2">
+          <h4 className="font-bold text-sm mb-3">Especificaciones:</h4>
+          <table className="border-collapse">
+            <tbody>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Tamaño:</td>
+                <td className="py-1">170 x 212px</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Padding:</td>
+                <td className="py-1">12px (p-3)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Gap:</td>
+                <td className="py-1">8px (gap-2)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Border Radius:</td>
+                <td className="py-1">8px (rounded-lg)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Imagen:</td>
+                <td className="py-1">146 x 88px</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Nombre:</td>
+                <td className="py-1">Label Small (14px Bold)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Precio:</td>
+                <td className="py-1">Heading Small (24px Bold, tracking-tighter)</td>
+              </tr>
+              <tr>
+                <td className="pr-4 py-1 font-medium">Botón:</td>
+                <td className="py-1">Button default size xs (reutilizado)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Link a Figma */}
+      <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>Referencia de diseño:</strong>{' '}
+          <a
+            href="https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 dark:text-blue-400 underline"
+          >
+            Figma: POS Product Card
+          </a>
+        </p>
+      </div>
+    </div>
+  ),
+};