siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSProductButton/POSProductButton.stories.tsx

@@ -1,318 +1,318 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { POSProductButton } from './POSProductButton';
-
-// Imagen de ejemplo (placeholder de Unsplash) 
-const exampleImage = 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=300&h=200&fit=crop';
-
-const meta = {
-  title: 'Siesa UI Kit/POSProductButton',
-  component: POSProductButton,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Botón especializado para sistemas POS que combina una imagen de producto con un label descriptivo. Diseñado para selección rápida de productos en interfaces de punto de venta.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    image: {
-      control: 'text',
-      description: 'URL de la imagen del producto',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    label: {
-      control: 'text',
-      description: 'Texto del producto (nombre o descripción)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    active: {
-      control: 'boolean',
-      description: 'Si el botón está en estado activo/seleccionado',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Si el botón está deshabilitado',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    onClick: {
-      action: 'clicked',
-      description: 'Handler para evento click',
-      table: {
-        type: { summary: '(event: MouseEvent<HTMLButtonElement>) => void' },
-        category: 'Comportamiento',
-      },
-    },
-    className: {
-      control: 'text',
-      description: 'Clases CSS adicionales',
-      table: {
-        type: { summary: 'string' },
-        category: 'Apariencia',
-      },
-    },
-    ariaLabel: {
-      control: 'text',
-      description: 'Label para accesibilidad (ARIA)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Accesibilidad',
-      },
-    },
-  },
-} satisfies Meta<typeof POSProductButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    image: exampleImage,
-    label: 'A la parrilla',
-    active: false,
-    disabled: false,
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-export const TodosLosEstados: Story = {
-  args: {
-    image: exampleImage,
-    label: 'A la parrilla',
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Estado Enabled (Normal) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Enabled (Normal)
-        </h3>
-        <div className="flex flex-wrap gap-3">
-          <POSProductButton
-            image={exampleImage}
-            label="A la parrilla"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Estado normal del botón, listo para ser clickeado
-        </p>
-      </div>
-
-      {/* Estado Actived (Seleccionado) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Actived (Seleccionado)
-        </h3>
-        <div className="flex flex-wrap gap-3">
-          <POSProductButton
-            image={exampleImage}
-            label="A la parrilla"
-            active={true}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Estado activo cuando el producto está seleccionado
-        </p>
-      </div>
-
-      {/* Estado Disabled (Deshabilitado) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Disabled (Deshabilitado)
-        </h3>
-        <div className="flex flex-wrap gap-3">
-          <POSProductButton
-            image={exampleImage}
-            label="A la parrilla"
-            disabled={true}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Estado deshabilitado con opacidad reducida
-        </p>
-      </div>
-
-      {/* Tips */}
-      <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-content-secondary dark:text-content-secondary">
-          <strong>💡 Consejos:</strong>
-          <br />• Usa el estado <code className="px-1 bg-white dark:bg-gray-700">active</code> para indicar el producto seleccionado
-          <br />• Usa el estado <code className="px-1 bg-white dark:bg-gray-700">disabled</code> para productos no disponibles
-          <br />• El botón tiene un aspect ratio de 158:80 para la imagen (según diseño de Figma)
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. EJEMPLOS DE USO
-// ============================================
-export const EjemplosDeUso: Story = {
-  args: {
-    image: exampleImage,
-    label: 'A la parrilla',
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Grid de productos */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Grid de Productos (Típico en POS)
-        </h3>
-        <div className="grid grid-cols-3 gap-4 max-w-xl">
-          <POSProductButton
-            image={exampleImage}
-            label="A la parrilla"
-            active={true}
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Al horno"
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Frito"
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Al vapor"
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Asado"
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Agotado"
-            disabled={true}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Configuración típica de 3 columnas para pantallas de punto de venta
-        </p>
-      </div>
-
-      {/* Lista horizontal */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Lista Horizontal (Categorías)
-        </h3>
-        <div className="flex gap-3 overflow-x-auto pb-2 max-w-2xl">
-          <POSProductButton
-            image={exampleImage}
-            label="Carnes"
-            active={true}
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Pescados"
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Vegetales"
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Postres"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Navegación horizontal para categorías de productos
-        </p>
-      </div>
-
-      {/* Con handlers */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Con Handlers de Click
-        </h3>
-        <div className="flex gap-3">
-          <POSProductButton
-            image={exampleImage}
-            label="Click aquí"
-            onClick={() => alert('Producto seleccionado: A la parrilla')}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Click en el botón para ver la acción
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. VARIACIONES DE CONTENIDO
-// ============================================
-export const VariacionesDeContenido: Story = {
-  args: {
-    image: exampleImage,
-    label: 'A la parrilla',
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Labels cortos */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Labels Cortos
-        </h3>
-        <div className="flex gap-3">
-          <POSProductButton
-            image={exampleImage}
-            label="Carne"
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Pollo"
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Pez"
-          />
-        </div>
-      </div>
-
-      {/* Labels largos */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Labels Largos
-        </h3>
-        <div className="flex gap-3">
-          <POSProductButton
-            image={exampleImage}
-            label="Parrillada de res con vegetales"
-          />
-          <POSProductButton
-            image={exampleImage}
-            label="Pescado a la plancha con limón"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Los labels largos se ajustan automáticamente
-        </p>
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { POSProductButton } from './POSProductButton';
+
+// Imagen de ejemplo (placeholder de Unsplash) 
+const exampleImage = 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=300&h=200&fit=crop';
+
+const meta = {
+  title: 'Siesa UI Kit/POSProductButton',
+  component: POSProductButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Botón especializado para sistemas POS que combina una imagen de producto con un label descriptivo. Diseñado para selección rápida de productos en interfaces de punto de venta.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    image: {
+      control: 'text',
+      description: 'URL de la imagen del producto',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Texto del producto (nombre o descripción)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    active: {
+      control: 'boolean',
+      description: 'Si el botón está en estado activo/seleccionado',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si el botón está deshabilitado',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Handler para evento click',
+      table: {
+        type: { summary: '(event: MouseEvent<HTMLButtonElement>) => void' },
+        category: 'Comportamiento',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Clases CSS adicionales',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+      },
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Label para accesibilidad (ARIA)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Accesibilidad',
+      },
+    },
+  },
+} satisfies Meta<typeof POSProductButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    image: exampleImage,
+    label: 'A la parrilla',
+    active: false,
+    disabled: false,
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+export const TodosLosEstados: Story = {
+  args: {
+    image: exampleImage,
+    label: 'A la parrilla',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Estado Enabled (Normal) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Enabled (Normal)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <POSProductButton
+            image={exampleImage}
+            label="A la parrilla"
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Estado normal del botón, listo para ser clickeado
+        </p>
+      </div>
+
+      {/* Estado Actived (Seleccionado) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Actived (Seleccionado)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <POSProductButton
+            image={exampleImage}
+            label="A la parrilla"
+            active={true}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Estado activo cuando el producto está seleccionado
+        </p>
+      </div>
+
+      {/* Estado Disabled (Deshabilitado) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Disabled (Deshabilitado)
+        </h3>
+        <div className="flex flex-wrap gap-3">
+          <POSProductButton
+            image={exampleImage}
+            label="A la parrilla"
+            disabled={true}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Estado deshabilitado con opacidad reducida
+        </p>
+      </div>
+
+      {/* Tips */}
+      <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-content-secondary dark:text-content-secondary">
+          <strong>💡 Consejos:</strong>
+          <br />• Usa el estado <code className="px-1 bg-white dark:bg-gray-700">active</code> para indicar el producto seleccionado
+          <br />• Usa el estado <code className="px-1 bg-white dark:bg-gray-700">disabled</code> para productos no disponibles
+          <br />• El botón tiene un aspect ratio de 158:80 para la imagen (según diseño de Figma)
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. EJEMPLOS DE USO
+// ============================================
+export const EjemplosDeUso: Story = {
+  args: {
+    image: exampleImage,
+    label: 'A la parrilla',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Grid de productos */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Grid de Productos (Típico en POS)
+        </h3>
+        <div className="grid grid-cols-3 gap-4 max-w-xl">
+          <POSProductButton
+            image={exampleImage}
+            label="A la parrilla"
+            active={true}
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Al horno"
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Frito"
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Al vapor"
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Asado"
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Agotado"
+            disabled={true}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Configuración típica de 3 columnas para pantallas de punto de venta
+        </p>
+      </div>
+
+      {/* Lista horizontal */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Lista Horizontal (Categorías)
+        </h3>
+        <div className="flex gap-3 overflow-x-auto pb-2 max-w-2xl">
+          <POSProductButton
+            image={exampleImage}
+            label="Carnes"
+            active={true}
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Pescados"
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Vegetales"
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Postres"
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Navegación horizontal para categorías de productos
+        </p>
+      </div>
+
+      {/* Con handlers */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Con Handlers de Click
+        </h3>
+        <div className="flex gap-3">
+          <POSProductButton
+            image={exampleImage}
+            label="Click aquí"
+            onClick={() => alert('Producto seleccionado: A la parrilla')}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Click en el botón para ver la acción
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. VARIACIONES DE CONTENIDO
+// ============================================
+export const VariacionesDeContenido: Story = {
+  args: {
+    image: exampleImage,
+    label: 'A la parrilla',
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Labels cortos */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Labels Cortos
+        </h3>
+        <div className="flex gap-3">
+          <POSProductButton
+            image={exampleImage}
+            label="Carne"
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Pollo"
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Pez"
+          />
+        </div>
+      </div>
+
+      {/* Labels largos */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Labels Largos
+        </h3>
+        <div className="flex gap-3">
+          <POSProductButton
+            image={exampleImage}
+            label="Parrillada de res con vegetales"
+          />
+          <POSProductButton
+            image={exampleImage}
+            label="Pescado a la plancha con limón"
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Los labels largos se ajustan automáticamente
+        </p>
+      </div>
+    </div>
+  ),
+};