siesa-ui-kit 1.0.0 → 1.0.1

package/src/views/TableLayoutView/README.md

@@ -1,268 +0,0 @@
-# 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

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