siesa-ui-kit 1.0.2 → 1.0.4

package/src/views/TableLayoutView/TableLayoutView.stories.tsx

@@ -1,235 +1,235 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TableLayoutView } from './TableLayoutView';
-import type { Location, TableItem } from './TableLayoutView.types';
-
-const meta = {
-  title: 'Siesa UI Kit/Views/TableLayoutView',
-  component: TableLayoutView,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Vista completa de administración de mesas para restaurantes (POS). Incluye lista de salones, grid de mesas con estados visuales, y panel de asignación de personas.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof TableLayoutView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ===== DATOS DE PRUEBA =====
-const sampleLocations: Location[] = [
-  {
-    id: '1',
-    name: 'Antejardín',
-    status: 'available',
-    capacity: { current: 1, total: 8 },
-  },
-  {
-    id: '2',
-    name: 'Terraza',
-    status: 'occupied', // occupied es para Location, busy para TableItem
-    capacity: { current: 8, total: 8 },
-  },
-  {
-    id: '3',
-    name: 'Bar',
-    status: 'outOfService',
-    capacity: { current: 0, total: 8 },
-  },
-  {
-    id: '4',
-    name: 'Salón 1',
-    status: 'available',
-    capacity: { current: 1, total: 8 },
-  },
-  {
-    id: '5',
-    name: 'Salón 2',
-    status: 'available',
-    capacity: { current: 3, total: 8 },
-  },
-];
-
-const sampleTables: TableItem[] = [
-  // Fila 1 - Las mesas se organizan automáticamente en grid con gap uniforme
-  { tableNumber: '01', status: 'available', shape: 'square', chairs: 8, isActive: true },
-  { tableNumber: '02', status: 'available', shape: 'circle', chairs: 2 },
-  { tableNumber: '03', status: 'available', shape: 'circle', chairs: 4 },
-  { tableNumber: '04', status: 'available', shape: 'oval', chairs: 6 },
-  // Fila 2
-  { tableNumber: '05', status: 'available', shape: 'square', chairs: 4 },
-  { tableNumber: '06', status: 'busy', shape: 'circle', chairs: 2 },
-  { tableNumber: '07', status: 'available', shape: 'rectangle', chairs: 8 },
-  { tableNumber: '08', status: 'reserved', shape: 'circle', chairs: 4 },
-];
-
-const sampleUserInfo = {
-  avatar: 'https://i.pravatar.cc/150?img=12',
-  name: 'Jhonnatan Diaz',
-  role: 'Administrador',
-};
-
-// ============================================
-// 1. VISTA COMPLETA (Con panel de personas)
-// ============================================
-export const VistaCompleta: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <TableLayoutView
-        locations={sampleLocations}
-        activeLocationId="1"
-        tables={sampleTables}
-        tablesTitle="Mesas de Antejardín"
-        showPeopleCountPanel={true}
-        selectedTable={{
-          locationName: 'Antejardín',
-          tableName: 'Mesa 1',
-        }}
-        userInfo={sampleUserInfo}
-        onLocationSelect={(id) => console.log('Ubicación seleccionada:', id)}
-        onTableSelect={(table) => console.log('Mesa seleccionada:', table)}
-        onCreateTables={() => console.log('Crear mesas')}
-        onMergeTables={() => console.log('Unir mesas')}
-        onSplitTables={() => console.log('Separar mesas')}
-        onPeopleCountSelect={(count) => console.log('Personas:', count)}
-        onAssignTable={() => console.log('Asignar mesa')}
-        onTransferTable={() => console.log('Transferir mesa')}
-        onSetCutlery={() => console.log('Configurar cubiertos')}
-        onClosePeoplePanel={() => console.log('Cerrar panel')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 2. VISTA SIN PANEL DE PERSONAS
-// ============================================
-export const SinPanelDePersonas: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <TableLayoutView
-        locations={sampleLocations}
-        activeLocationId="1"
-        tables={sampleTables}
-        tablesTitle="Mesas de Antejardín"
-        showPeopleCountPanel={false}
-        userInfo={sampleUserInfo}
-        onLocationSelect={(id) => console.log('Ubicación seleccionada:', id)}
-        onTableSelect={(table) => console.log('Mesa seleccionada:', table)}
-        onCreateTables={() => console.log('Crear mesas')}
-        onMergeTables={() => console.log('Unir mesas')}
-        onSplitTables={() => console.log('Separar mesas')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 3. ESTADO DE CARGA
-// ============================================
-export const EstadoDeCarga: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <TableLayoutView
-        locations={[]}
-        tables={[]}
-        isLoading={true}
-        userInfo={sampleUserInfo}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 4. ESTADO DE ERROR
-// ============================================
-export const EstadoDeError: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <TableLayoutView
-        locations={sampleLocations}
-        activeLocationId="1"
-        tables={[]}
-        errorMessage="Error al cargar las mesas. Por favor, intenta nuevamente."
-        userInfo={sampleUserInfo}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 5. SIN MESAS DISPONIBLES
-// ============================================
-export const SinMesasDisponibles: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <TableLayoutView
-        locations={sampleLocations}
-        activeLocationId="1"
-        tables={[]}
-        tablesTitle="Mesas de Bar"
-        userInfo={sampleUserInfo}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 6. TODAS LAS MESAS OCUPADAS
-// ============================================
-export const TodasLasMesasOcupadas: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <TableLayoutView
-        locations={[
-          {
-            id: '2',
-            name: 'Terraza',
-            status: 'occupied',
-            capacity: { current: 8, total: 8 },
-          },
-        ]}
-        activeLocationId="2"
-        tables={sampleTables.map((table) => ({ ...table, status: 'busy' as const }))}
-        tablesTitle="Mesas de Terraza"
-        showPeopleCountPanel={false}
-        userInfo={sampleUserInfo}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 7. MESAS CON MÚLTIPLES ESTADOS
-// ============================================
-export const MesasConMultiplesEstados: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <TableLayoutView
-        locations={sampleLocations}
-        activeLocationId="1"
-        tables={[
-          { tableNumber: '01', status: 'available', shape: 'square', chairs: 8 },
-          { tableNumber: '02', status: 'available', shape: 'circle', chairs: 2 },
-          { tableNumber: '03', status: 'available', shape: 'circle', chairs: 4 },
-          { tableNumber: '04', status: 'available', shape: 'oval', chairs: 6 },
-          { tableNumber: '05', status: 'available', shape: 'rectangle', chairs: 8 },
-          { tableNumber: '06', status: 'busy', shape: 'square', chairs: 4 },
-          { tableNumber: '07', status: 'busy', shape: 'circle', chairs: 2 },
-          { tableNumber: '08', status: 'reserved', shape: 'circle', chairs: 4 },
-          { tableNumber: '09', status: 'reserved', shape: 'square', chairs: 8 },
-          { tableNumber: '10', status: 'available', shape: 'circle', chairs: 6 },
-          { tableNumber: '11', status: 'available', shape: 'square', chairs: 4 },
-          { tableNumber: '12', status: 'busy', shape: 'oval', chairs: 6 },
-        ]}
-        tablesTitle="Mesas de Antejardín"
-        showPeopleCountPanel={false}
-        userInfo={sampleUserInfo}
-      />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { TableLayoutView } from './TableLayoutView';
+import type { Location, TableItem } from './TableLayoutView.types';
+
+const meta = {
+  title: 'Siesa UI Kit/Views/TableLayoutView',
+  component: TableLayoutView,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Vista completa de administración de mesas para restaurantes (POS). Incluye lista de salones, grid de mesas con estados visuales, y panel de asignación de personas.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TableLayoutView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ===== DATOS DE PRUEBA =====
+const sampleLocations: Location[] = [
+  {
+    id: '1',
+    name: 'Antejardín',
+    status: 'available',
+    capacity: { current: 1, total: 8 },
+  },
+  {
+    id: '2',
+    name: 'Terraza',
+    status: 'occupied', // occupied es para Location, busy para TableItem
+    capacity: { current: 8, total: 8 },
+  },
+  {
+    id: '3',
+    name: 'Bar',
+    status: 'outOfService',
+    capacity: { current: 0, total: 8 },
+  },
+  {
+    id: '4',
+    name: 'Salón 1',
+    status: 'available',
+    capacity: { current: 1, total: 8 },
+  },
+  {
+    id: '5',
+    name: 'Salón 2',
+    status: 'available',
+    capacity: { current: 3, total: 8 },
+  },
+];
+
+const sampleTables: TableItem[] = [
+  // Fila 1 - Las mesas se organizan automáticamente en grid con gap uniforme
+  { tableNumber: '01', status: 'available', shape: 'square', chairs: 8, isActive: true },
+  { tableNumber: '02', status: 'available', shape: 'circle', chairs: 2 },
+  { tableNumber: '03', status: 'available', shape: 'circle', chairs: 4 },
+  { tableNumber: '04', status: 'available', shape: 'oval', chairs: 6 },
+  // Fila 2
+  { tableNumber: '05', status: 'available', shape: 'square', chairs: 4 },
+  { tableNumber: '06', status: 'busy', shape: 'circle', chairs: 2 },
+  { tableNumber: '07', status: 'available', shape: 'rectangle', chairs: 8 },
+  { tableNumber: '08', status: 'reserved', shape: 'circle', chairs: 4 },
+];
+
+const sampleUserInfo = {
+  avatar: 'https://i.pravatar.cc/150?img=12',
+  name: 'Jhonnatan Diaz',
+  role: 'Administrador',
+};
+
+// ============================================
+// 1. VISTA COMPLETA (Con panel de personas)
+// ============================================
+export const VistaCompleta: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <TableLayoutView
+        locations={sampleLocations}
+        activeLocationId="1"
+        tables={sampleTables}
+        tablesTitle="Mesas de Antejardín"
+        showPeopleCountPanel={true}
+        selectedTable={{
+          locationName: 'Antejardín',
+          tableName: 'Mesa 1',
+        }}
+        userInfo={sampleUserInfo}
+        onLocationSelect={(id) => console.log('Ubicación seleccionada:', id)}
+        onTableSelect={(table) => console.log('Mesa seleccionada:', table)}
+        onCreateTables={() => console.log('Crear mesas')}
+        onMergeTables={() => console.log('Unir mesas')}
+        onSplitTables={() => console.log('Separar mesas')}
+        onPeopleCountSelect={(count) => console.log('Personas:', count)}
+        onAssignTable={() => console.log('Asignar mesa')}
+        onTransferTable={() => console.log('Transferir mesa')}
+        onSetCutlery={() => console.log('Configurar cubiertos')}
+        onClosePeoplePanel={() => console.log('Cerrar panel')}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. VISTA SIN PANEL DE PERSONAS
+// ============================================
+export const SinPanelDePersonas: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <TableLayoutView
+        locations={sampleLocations}
+        activeLocationId="1"
+        tables={sampleTables}
+        tablesTitle="Mesas de Antejardín"
+        showPeopleCountPanel={false}
+        userInfo={sampleUserInfo}
+        onLocationSelect={(id) => console.log('Ubicación seleccionada:', id)}
+        onTableSelect={(table) => console.log('Mesa seleccionada:', table)}
+        onCreateTables={() => console.log('Crear mesas')}
+        onMergeTables={() => console.log('Unir mesas')}
+        onSplitTables={() => console.log('Separar mesas')}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 3. ESTADO DE CARGA
+// ============================================
+export const EstadoDeCarga: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <TableLayoutView
+        locations={[]}
+        tables={[]}
+        isLoading={true}
+        userInfo={sampleUserInfo}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 4. ESTADO DE ERROR
+// ============================================
+export const EstadoDeError: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <TableLayoutView
+        locations={sampleLocations}
+        activeLocationId="1"
+        tables={[]}
+        errorMessage="Error al cargar las mesas. Por favor, intenta nuevamente."
+        userInfo={sampleUserInfo}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 5. SIN MESAS DISPONIBLES
+// ============================================
+export const SinMesasDisponibles: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <TableLayoutView
+        locations={sampleLocations}
+        activeLocationId="1"
+        tables={[]}
+        tablesTitle="Mesas de Bar"
+        userInfo={sampleUserInfo}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 6. TODAS LAS MESAS OCUPADAS
+// ============================================
+export const TodasLasMesasOcupadas: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <TableLayoutView
+        locations={[
+          {
+            id: '2',
+            name: 'Terraza',
+            status: 'occupied',
+            capacity: { current: 8, total: 8 },
+          },
+        ]}
+        activeLocationId="2"
+        tables={sampleTables.map((table) => ({ ...table, status: 'busy' as const }))}
+        tablesTitle="Mesas de Terraza"
+        showPeopleCountPanel={false}
+        userInfo={sampleUserInfo}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 7. MESAS CON MÚLTIPLES ESTADOS
+// ============================================
+export const MesasConMultiplesEstados: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <TableLayoutView
+        locations={sampleLocations}
+        activeLocationId="1"
+        tables={[
+          { tableNumber: '01', status: 'available', shape: 'square', chairs: 8 },
+          { tableNumber: '02', status: 'available', shape: 'circle', chairs: 2 },
+          { tableNumber: '03', status: 'available', shape: 'circle', chairs: 4 },
+          { tableNumber: '04', status: 'available', shape: 'oval', chairs: 6 },
+          { tableNumber: '05', status: 'available', shape: 'rectangle', chairs: 8 },
+          { tableNumber: '06', status: 'busy', shape: 'square', chairs: 4 },
+          { tableNumber: '07', status: 'busy', shape: 'circle', chairs: 2 },
+          { tableNumber: '08', status: 'reserved', shape: 'circle', chairs: 4 },
+          { tableNumber: '09', status: 'reserved', shape: 'square', chairs: 8 },
+          { tableNumber: '10', status: 'available', shape: 'circle', chairs: 6 },
+          { tableNumber: '11', status: 'available', shape: 'square', chairs: 4 },
+          { tableNumber: '12', status: 'busy', shape: 'oval', chairs: 6 },
+        ]}
+        tablesTitle="Mesas de Antejardín"
+        showPeopleCountPanel={false}
+        userInfo={sampleUserInfo}
+      />
+    </div>
+  ),
+};