siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSConvention/POSConvention.stories.tsx

@@ -1,235 +1,235 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { POSConvention } from './POSConvention';
-
-/**
- * Stories para POSConvention
- *
- * Componente de leyenda/convención para mostrar el estado de las mesas en el sistema POS.
- * Basado en especificaciones de Figma (node-id: 4418-40139).
- */
-const meta = {
-  title: 'Siesa UI Kit/POSConvention',
-  component: POSConvention,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Componente de leyenda para mostrar los estados de mesas en el sistema POS. Incluye 4 estados: Disponible (azul), Ocupada (naranja), Reservada (morado) y Fuera de Servicio (gris).',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    status: {
-      control: 'select',
-      options: ['available', 'occupied', 'reserved', 'outOfService'],
-      description: 'Estado de la convención a mostrar',
-      table: {
-        type: { summary: 'ConventionStatus' },
-        defaultValue: { summary: 'available' },
-        category: 'Contenido',
-      },
-    },
-    className: {
-      control: 'text',
-      description: 'Clases CSS adicionales para el contenedor',
-      table: {
-        type: { summary: 'string' },
-        category: 'Apariencia',
-      },
-    },
-  },
-} satisfies Meta<typeof POSConvention>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-/**
- * Playground interactivo para probar el componente con diferentes estados.
- */
-export const Playground: Story = {
-  args: {
-    status: 'available',
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-/**
- * Muestra todos los estados disponibles del componente POSConvention.
- */
-export const TodosLosEstados: Story = {
-  render: () => (
-    <div className="space-y-8 p-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estados de Mesas
-        </h3>
-        <div className="flex flex-col gap-4">
-          <div className="flex items-center gap-6">
-            <POSConvention status="available" />
-            <span className="text-xs text-content-secondary dark:text-content-secondary">
-              Mesa lista para recibir clientes
-            </span>
-          </div>
-          <div className="flex items-center gap-6">
-            <POSConvention status="occupied" />
-            <span className="text-xs text-content-secondary dark:text-content-secondary">
-              Mesa actualmente en uso
-            </span>
-          </div>
-          <div className="flex items-center gap-6">
-            <POSConvention status="reserved" />
-            <span className="text-xs text-content-secondary dark:text-content-secondary">
-              Mesa con reservación confirmada
-            </span>
-          </div>
-          <div className="flex items-center gap-6">
-            <POSConvention status="outOfService" />
-            <span className="text-xs text-content-secondary dark:text-content-secondary">
-              Mesa no disponible temporalmente
-            </span>
-          </div>
-        </div>
-      </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-gray-600 dark:text-gray-300">
-          <strong>💡 Consejo:</strong>
-          <br />• Usa este componente para crear leyendas en la vista de mesas del POS
-          <br />• Los colores son consistentes con el diseño de Figma
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. LEYENDA COMPLETA (COMO EN FIGMA)
-// ============================================
-/**
- * Leyenda completa con borde punteado como se muestra en Figma.
- */
-export const LeyendaCompleta: Story = {
-  render: () => (
-    <div className="space-y-8 p-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Leyenda de Convenciones (Figma)
-        </h3>
-
-        {/* Contenedor con borde punteado como en Figma */}
-        <div className="p-5 rounded-lg border-2 border-dashed border-primary-custom-300 dark:border-dark-border-custom inline-block">
-          <div className="flex flex-col gap-9">
-            <POSConvention status="available" />
-            <POSConvention status="occupied" />
-            <POSConvention status="reserved" />
-            <POSConvention status="outOfService" />
-          </div>
-        </div>
-      </div>
-
-      <p className="text-xs text-content-secondary dark:text-content-secondary">
-        Diseño exacto según especificaciones de Figma (node-id: 4418-40139)
-      </p>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. USO EN HORIZONTAL
-// ============================================
-/**
- * Ejemplo de uso horizontal para barras de estado o headers.
- */
-export const UsoHorizontal: Story = {
-  render: () => (
-    <div className="space-y-8 p-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Disposición Horizontal
-        </h3>
-
-        {/* Disposición horizontal con separadores */}
-        <div className="flex items-center gap-6 p-4 bg-white dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary">
-          <POSConvention status="available" />
-          <div className="w-px h-4 bg-border-primary dark:bg-dark-border-primary" />
-          <POSConvention status="occupied" />
-          <div className="w-px h-4 bg-border-primary dark:bg-dark-border-primary" />
-          <POSConvention status="reserved" />
-          <div className="w-px h-4 bg-border-primary dark:bg-dark-border-primary" />
-          <POSConvention status="outOfService" />
-        </div>
-      </div>
-
-      <p className="text-xs text-content-secondary dark:text-content-secondary">
-        Útil para barras de herramientas o encabezados de sección
-      </p>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. INTEGRACIÓN CON CONTADORES
-// ============================================
-/**
- * Ejemplo de integración con contadores de mesas.
- */
-export const ConContadores: Story = {
-  render: () => (
-    <div className="space-y-8 p-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Leyenda con Contadores
-        </h3>
-
-        <div className="flex flex-col gap-3 p-4 bg-white dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary">
-          <div className="flex items-center justify-between min-w-[200px]">
-            <POSConvention status="available" />
-            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
-              12
-            </span>
-          </div>
-          <div className="flex items-center justify-between">
-            <POSConvention status="occupied" />
-            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
-              8
-            </span>
-          </div>
-          <div className="flex items-center justify-between">
-            <POSConvention status="reserved" />
-            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
-              3
-            </span>
-          </div>
-          <div className="flex items-center justify-between">
-            <POSConvention status="outOfService" />
-            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
-              2
-            </span>
-          </div>
-
-          {/* Total */}
-          <div className="mt-2 pt-3 border-t border-border-primary dark:border-dark-border-primary flex items-center justify-between">
-            <span className="text-xs font-bold text-content-secondary dark:text-content-secondary">
-              Total de mesas
-            </span>
-            <span className="text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600">
-              25
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <p className="text-xs text-content-secondary dark:text-content-secondary">
-        Ejemplo de uso con contadores para panel de resumen
-      </p>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { POSConvention } from './POSConvention';
+
+/**
+ * Stories para POSConvention
+ *
+ * Componente de leyenda/convención para mostrar el estado de las mesas en el sistema POS.
+ * Basado en especificaciones de Figma (node-id: 4418-40139).
+ */
+const meta = {
+  title: 'Siesa UI Kit/POSConvention',
+  component: POSConvention,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente de leyenda para mostrar los estados de mesas en el sistema POS. Incluye 4 estados: Disponible (azul), Ocupada (naranja), Reservada (morado) y Fuera de Servicio (gris).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['available', 'occupied', 'reserved', 'outOfService'],
+      description: 'Estado de la convención a mostrar',
+      table: {
+        type: { summary: 'ConventionStatus' },
+        defaultValue: { summary: 'available' },
+        category: 'Contenido',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Clases CSS adicionales para el contenedor',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+      },
+    },
+  },
+} satisfies Meta<typeof POSConvention>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+/**
+ * Playground interactivo para probar el componente con diferentes estados.
+ */
+export const Playground: Story = {
+  args: {
+    status: 'available',
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+/**
+ * Muestra todos los estados disponibles del componente POSConvention.
+ */
+export const TodosLosEstados: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estados de Mesas
+        </h3>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-6">
+            <POSConvention status="available" />
+            <span className="text-xs text-content-secondary dark:text-content-secondary">
+              Mesa lista para recibir clientes
+            </span>
+          </div>
+          <div className="flex items-center gap-6">
+            <POSConvention status="occupied" />
+            <span className="text-xs text-content-secondary dark:text-content-secondary">
+              Mesa actualmente en uso
+            </span>
+          </div>
+          <div className="flex items-center gap-6">
+            <POSConvention status="reserved" />
+            <span className="text-xs text-content-secondary dark:text-content-secondary">
+              Mesa con reservación confirmada
+            </span>
+          </div>
+          <div className="flex items-center gap-6">
+            <POSConvention status="outOfService" />
+            <span className="text-xs text-content-secondary dark:text-content-secondary">
+              Mesa no disponible temporalmente
+            </span>
+          </div>
+        </div>
+      </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-gray-600 dark:text-gray-300">
+          <strong>💡 Consejo:</strong>
+          <br />• Usa este componente para crear leyendas en la vista de mesas del POS
+          <br />• Los colores son consistentes con el diseño de Figma
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. LEYENDA COMPLETA (COMO EN FIGMA)
+// ============================================
+/**
+ * Leyenda completa con borde punteado como se muestra en Figma.
+ */
+export const LeyendaCompleta: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Leyenda de Convenciones (Figma)
+        </h3>
+
+        {/* Contenedor con borde punteado como en Figma */}
+        <div className="p-5 rounded-lg border-2 border-dashed border-primary-custom-300 dark:border-dark-border-custom inline-block">
+          <div className="flex flex-col gap-9">
+            <POSConvention status="available" />
+            <POSConvention status="occupied" />
+            <POSConvention status="reserved" />
+            <POSConvention status="outOfService" />
+          </div>
+        </div>
+      </div>
+
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Diseño exacto según especificaciones de Figma (node-id: 4418-40139)
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. USO EN HORIZONTAL
+// ============================================
+/**
+ * Ejemplo de uso horizontal para barras de estado o headers.
+ */
+export const UsoHorizontal: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Disposición Horizontal
+        </h3>
+
+        {/* Disposición horizontal con separadores */}
+        <div className="flex items-center gap-6 p-4 bg-white dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary">
+          <POSConvention status="available" />
+          <div className="w-px h-4 bg-border-primary dark:bg-dark-border-primary" />
+          <POSConvention status="occupied" />
+          <div className="w-px h-4 bg-border-primary dark:bg-dark-border-primary" />
+          <POSConvention status="reserved" />
+          <div className="w-px h-4 bg-border-primary dark:bg-dark-border-primary" />
+          <POSConvention status="outOfService" />
+        </div>
+      </div>
+
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Útil para barras de herramientas o encabezados de sección
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. INTEGRACIÓN CON CONTADORES
+// ============================================
+/**
+ * Ejemplo de integración con contadores de mesas.
+ */
+export const ConContadores: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Leyenda con Contadores
+        </h3>
+
+        <div className="flex flex-col gap-3 p-4 bg-white dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary">
+          <div className="flex items-center justify-between min-w-[200px]">
+            <POSConvention status="available" />
+            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              12
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <POSConvention status="occupied" />
+            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              8
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <POSConvention status="reserved" />
+            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              3
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <POSConvention status="outOfService" />
+            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              2
+            </span>
+          </div>
+
+          {/* Total */}
+          <div className="mt-2 pt-3 border-t border-border-primary dark:border-dark-border-primary flex items-center justify-between">
+            <span className="text-xs font-bold text-content-secondary dark:text-content-secondary">
+              Total de mesas
+            </span>
+            <span className="text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600">
+              25
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Ejemplo de uso con contadores para panel de resumen
+      </p>
+    </div>
+  ),
+};