siesa-ui-kit 1.0.3 → 1.0.5

package/src/views/TableLayoutView/README.md

@@ -0,0 +1,268 @@
+# TableLayoutView
+
+Vista completa de administración de layout de mesas para restaurantes (sistema POS).
+
+## Descripción
+
+TableLayoutView es una vista pixel-perfect según especificaciones de Figma que proporciona una interfaz completa para gestionar el layout de mesas de un restaurante. Incluye:
+
+- **Navbar superior**: Con información de usuario y acciones
+- **Sidebar izquierdo (245px)**: Lista de salones/ubicaciones con sus estados
+- **Área central (flex)**: Grid de mesas con controles de gestión y leyenda
+- **Sidebar derecho (304px)**: Panel de selección de cantidad de personas (condicional)
+
+## Características
+
+- ✅ Layout responsive (mobile-first)
+- ✅ Dark mode completo
+- ✅ Múltiples estados visuales para mesas (disponible, ocupada, reservada, fuera de servicio)
+- ✅ Posicionamiento libre de mesas con coordenadas
+- ✅ Panel de teclado numérico para selección de personas
+- ✅ Callbacks para todas las acciones principales
+- ✅ Estados de carga y error
+- ✅ TypeScript strict
+- ✅ Accesibilidad (ARIA labels)
+
+## Uso Básico
+
+```tsx
+import { TableLayoutView } from './views/TableLayoutView';
+
+function App() {
+  const [activeLocation, setActiveLocation] = useState('1');
+  const [selectedTable, setSelectedTable] = useState<string | null>(null);
+
+  const locations = [
+    { id: '1', name: 'Antejardín', status: 'available', capacity: { current: 1, total: 8 } },
+    { id: '2', name: 'Terraza', status: 'occupied', capacity: { current: 8, total: 8 } },
+  ];
+
+  const tables = [
+    {
+      tableNumber: '01',
+      status: 'available',
+      shape: 'square',
+      chairs: 8,
+      position: { x: 25, y: 30 },
+    },
+    {
+      tableNumber: '02',
+      status: 'occupied',
+      shape: 'circle',
+      chairs: 4,
+      position: { x: 50, y: 30 },
+    },
+  ];
+
+  return (
+    <TableLayoutView
+      locations={locations}
+      activeLocationId={activeLocation}
+      tables={tables}
+      tablesTitle="Mesas de Antejardín"
+      showPeopleCountPanel={!!selectedTable}
+      userInfo={{
+        avatar: '/path/to/avatar.jpg',
+        name: 'Juan Pérez',
+        role: 'Administrador',
+      }}
+      onLocationSelect={setActiveLocation}
+      onTableSelect={setSelectedTable}
+      onCreateTables={() => console.log('Crear mesas')}
+      onAssignTable={() => console.log('Asignar mesa')}
+    />
+  );
+}
+```
+
+## Props
+
+### Datos de Ubicaciones
+
+- **locations** (`Location[]`): Lista de salones/ubicaciones
+- **activeLocationId** (`string`): ID de la ubicación actualmente seleccionada
+- **tables** (`TableItem[]`): Lista de mesas en el layout actual
+- **tablesTitle** (`string`): Título del área de mesas (default: "Mesas de Antejardín")
+
+### Panel de Personas
+
+- **showPeopleCountPanel** (`boolean`): Si se muestra el panel de selección de personas
+- **selectedTable** (`{ locationName: string; tableName: string }`): Info de la mesa seleccionada
+- **peopleCount** (`number`): Cantidad de personas seleccionada
+
+### Callbacks de Acciones
+
+- **onLocationSelect** (`(locationId: string) => void`): Al seleccionar una ubicación
+- **onTableSelect** (`(tableNumber: string) => void`): Al seleccionar una mesa
+- **onCreateTables** (`() => void`): Al hacer clic en "Crear Mesas"
+- **onMergeTables** (`() => void`): Al hacer clic en "Unir Mesas"
+- **onSplitTables** (`() => void`): Al hacer clic en "Separar Mesas"
+- **onPeopleCountSelect** (`(count: number) => void`): Al seleccionar cantidad de personas
+- **onAssignTable** (`() => void`): Al hacer clic en "Asignar"
+- **onTransferTable** (`() => void`): Al hacer clic en "Transferir"
+- **onSetCutlery** (`() => void`): Al hacer clic en "Cubiertos"
+- **onClosePeoplePanel** (`() => void`): Al cerrar el panel de personas
+- **onTableSwitchChange** (`(checked: boolean) => void`): Al cambiar el switch de mesa
+
+### Estados
+
+- **isLoading** (`boolean`): Si se está cargando información
+- **errorMessage** (`string`): Mensaje de error (si existe)
+
+### Customización
+
+- **className** (`string`): Clases CSS adicionales
+- **userInfo** (`{ avatar: string; name: string; role: string }`): Información del usuario para navbar
+
+## Tipos de Datos
+
+### Location
+
+```typescript
+interface Location {
+  id: string;
+  name: string;
+  status: 'available' | 'occupied' | 'reserved' | 'outOfService';
+  capacity: {
+    current: number;
+    total: number;
+  };
+}
+```
+
+### TableItem
+
+```typescript
+interface TableItem {
+  tableNumber: string;
+  status: 'available' | 'occupied' | 'reserved' | 'outOfService';
+  shape: 'square' | 'circle' | 'rectangle' | 'oval';
+  chairs: 2 | 4 | 6 | 8;
+  isActive?: boolean;
+  position?: {
+    x: number; // Porcentaje 0-100
+    y: number; // Porcentaje 0-100
+  };
+}
+```
+
+## Ejemplos de Uso
+
+### Vista Completa (con panel de personas)
+
+```tsx
+<TableLayoutView
+  locations={locations}
+  activeLocationId="1"
+  tables={tables}
+  tablesTitle="Mesas de Antejardín"
+  showPeopleCountPanel={true}
+  selectedTable={{
+    locationName: 'Antejardín',
+    tableName: 'Mesa 1',
+  }}
+  userInfo={userInfo}
+  onPeopleCountSelect={(count) => console.log('Personas:', count)}
+  onAssignTable={() => console.log('Asignar')}
+/>
+```
+
+### Vista sin Panel de Personas
+
+```tsx
+<TableLayoutView
+  locations={locations}
+  activeLocationId="1"
+  tables={tables}
+  showPeopleCountPanel={false}
+  userInfo={userInfo}
+/>
+```
+
+### Estado de Carga
+
+```tsx
+<TableLayoutView
+  locations={[]}
+  tables={[]}
+  isLoading={true}
+  userInfo={userInfo}
+/>
+```
+
+### Estado de Error
+
+```tsx
+<TableLayoutView
+  locations={locations}
+  activeLocationId="1"
+  tables={[]}
+  errorMessage="Error al cargar las mesas"
+  userInfo={userInfo}
+/>
+```
+
+## Posicionamiento de Mesas
+
+Las mesas usan un sistema de coordenadas porcentuales (0-100) para posicionamiento libre:
+
+```typescript
+const tables: TableItem[] = [
+  {
+    tableNumber: '01',
+    status: 'available',
+    shape: 'square',
+    chairs: 8,
+    position: { x: 25, y: 30 }, // 25% desde izquierda, 30% desde arriba
+  },
+  {
+    tableNumber: '02',
+    status: 'occupied',
+    shape: 'circle',
+    chairs: 4,
+    position: { x: 75, y: 70 }, // 75% desde izquierda, 70% desde arriba
+  },
+];
+```
+
+## Estados Visuales de Mesas
+
+- **available** (Disponible): Verde/Lime
+- **occupied** (Ocupada): Naranja/Yellow
+- **reserved** (Reservada): Morado/Purple
+- **outOfService** (Fuera de servicio): Gris/Zinc
+
+## Responsive Design
+
+La vista es completamente responsive:
+
+- **Mobile**: Las tres columnas se apilan verticalmente
+- **Desktop**: Layout de 3 columnas (245px + flex + 304px)
+
+## Dark Mode
+
+Todos los elementos tienen soporte completo para dark mode con tokens del sistema.
+
+## Accesibilidad
+
+- ARIA labels en botones y acciones
+- Navegación por teclado en todos los elementos interactivos
+- Estados de focus visibles
+- Contraste de colores según WCAG
+
+## Componentes Relacionados
+
+- `POSLocationButton`: Botones de salones en sidebar izquierdo
+- `POSTable`: Visualización de mesas con sillas
+- `POSNumberButton`: Teclado numérico para cantidad de personas
+- `POSConvention`: Leyendas de convención de colores
+- `Switch`: Selector de mesa en panel de personas
+- `Button`: Botones de acción
+- `Navbar`: Barra de navegación superior
+
+## Notas Técnicas
+
+- Diseño pixel-perfect según especificaciones de Figma
+- Usa tokens del sistema para colores, espaciados y tipografía
+- TypeScript strict para type safety
+- Componentes reutilizables del sistema de diseño

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

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