siesa-ui-kit 1.0.0 → 1.0.1

package/src/views/TableLayoutView/TableLayoutView.tsx

@@ -1,461 +0,0 @@
-import React from 'react';
-import type { TableLayoutViewProps } from './TableLayoutView.types';
-import { Navbar } from '../../components/Navbar/Navbar';
-import { POSLocationButton } from '../../components/POSLocationButton/POSLocationButton';
-import { POSTable } from '../../components/POSTable/POSTable';
-import { POSConvention } from '../../components/POSConvention/POSConvention';
-import { POSNumberButton } from '../../components/POSNumberButton/POSNumberButton';
-import { Switch } from '../../components/Switch/Switch';
-import { Button } from '../../components/Button/Button';
-import {
-  PlusIcon,
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-  ArrowRightEndOnRectangleIcon,
-  ArrowsRightLeftIcon,
-  RectangleGroupIcon,
-  XMarkIcon,
-} from './icons';
-
-/**
- * TableLayoutView - Vista de layout de mesas para restaurante (POS)
- *
- * Vista completa pixel-perfect según especificaciones de Figma que incluye:
- * - Navbar superior con usuario y acciones
- * - Sidebar izquierdo con lista de salones/ubicaciones
- * - Área central con grid de mesas y controles
- * - Sidebar derecho con selector de cantidad de personas
- * - Leyenda de convenciones al pie del área central
- *
- * **Layout responsive:**
- * - Mobile: Columnas apiladas verticalmente
- * - Desktop: 3 columnas (sidebar izq 245px + centro flex + sidebar der 304px)
- *
- * **Mejores prácticas implementadas:**
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels
- * - Mobile-first responsive design
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see docs/shadows.md - Sistema de sombras
- *
- * @example
- * ```tsx
- * <TableLayoutView
- *   locations={[
- *     { id: '1', name: 'Antejardín', status: 'available', capacity: { current: 1, total: 8 } },
- *     { id: '2', name: 'Terraza', status: 'occupied', capacity: { current: 8, total: 8 } },
- *   ]}
- *   tables={[
- *     { tableNumber: '01', status: 'available', shape: 'square', chairs: 8, isActive: true },
- *     { tableNumber: '02', status: 'available', shape: 'circle', chairs: 2 },
- *   ]}
- *   onTableSelect={(tableNum) => console.log('Mesa seleccionada:', tableNum)}
- * />
- * ```
- */
-export const TableLayoutView: React.FC<TableLayoutViewProps> = ({
-  locations = [],
-  activeLocationId,
-  tables = [],
-  tablesTitle = 'Mesas de Antejardín',
-  showPeopleCountPanel = false,
-  selectedTable,
-  onLocationSelect,
-  onTableSelect,
-  onCreateTables,
-  onMergeTables,
-  onSplitTables,
-  onPeopleCountSelect,
-  onAssignTable,
-  onTransferTable,
-  onSetCutlery,
-  onClosePeoplePanel,
-  onTableSwitchChange,
-  isLoading = false,
-  errorMessage,
-  tableLayout = 'grid',
-  className = '',
-  userInfo,
-}) => {
-  // ===== RENDER NAVBAR =====
-  const renderNavbar = () => (
-    <div className="w-full shrink-0">
-      <Navbar
-        variant="desktop"
-        productName=""
-        userDropdown={
-          userInfo
-            ? {
-              avatar: userInfo.avatar,
-              name: userInfo.name,
-              email: userInfo.role,
-              onMenuClick: () => { },
-            }
-            : undefined
-        }
-      />
-    </div>
-  );
-
-  // ===== RENDER SIDEBAR IZQUIERDO (SALONES) =====
-  const renderLocationsSidebar = () => (
-    <div
-      className={[
-        'w-full',
-        'md:w-[245px]',
-        'h-auto',
-        'md:h-full',
-        'shrink-0',
-        'flex',
-        'flex-col',
-        'gap-2.5',
-        'p-4',
-        'overflow-auto',
-      ].join(' ')}
-    >
-      {/* Título */}
-      <div className="w-full">
-        <h2
-          className={[
-            'text-xl',
-            'leading-7',
-            'font-bold',
-            'tracking-[-0.5px]',
-            'text-content-primary',
-            'dark:text-dark-content-primary',
-          ].join(' ')}
-        >
-          Salones
-        </h2>
-      </div>
-
-      {/* Lista de ubicaciones */}
-      <div className="flex flex-col gap-2 w-full">
-        {isLoading ? (
-          <div className="text-content-secondary dark:text-content-secondary text-sm">
-            Cargando salones...
-          </div>
-        ) : locations.length === 0 ? (
-          <div className="text-content-secondary dark:text-content-secondary text-sm">
-            No hay salones disponibles
-          </div>
-        ) : (
-          locations.map((location) => (
-            <POSLocationButton
-              key={location.id}
-              locationName={location.name}
-              status={location.status}
-              state={location.id === activeLocationId ? 'actived' : 'enabled'}
-              capacity={location.capacity}
-              onClick={() => onLocationSelect?.(location.id)}
-            />
-          ))
-        )}
-      </div>
-    </div>
-  );
-
-  // ===== RENDER ÁREA CENTRAL (MESAS) =====
-  const renderTablesArea = () => (
-    <div
-      className={[
-        'flex-1',
-        'min-w-0',
-        'flex',
-        'flex-col',
-        'gap-4',
-        'p-4',
-        'bg-white',
-        'dark:bg-dark-bg-primary',
-        'rounded-tl-3xl',
-        'rounded-tr-3xl',
-        'overflow-auto',
-      ].join(' ')}
-    >
-      {/* Header con título y botones */}
-      <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between w-full">
-        {/* Título */}
-        <h2
-          className={[
-            'text-xl',
-            'leading-7',
-            'font-bold',
-            'tracking-[-0.5px]',
-            'text-content-primary',
-            'dark:text-dark-content-primary',
-            'flex-1',
-          ].join(' ')}
-        >
-          {tablesTitle}
-        </h2>
-
-        {/* Botones de acción */}
-        <div className="flex gap-2 flex-wrap">
-          <Button
-            type="default"
-            size="sm"
-            leftIcon={<PlusIcon />}
-            onClick={onCreateTables}
-          >
-            Crear Mesas
-          </Button>
-          <Button
-            type="default"
-            size="sm"
-            leftIcon={<ArrowsPointingInIcon />}
-            onClick={onMergeTables}
-          >
-            Unir Mesas
-          </Button>
-          <Button
-            type="default"
-            size="sm"
-            leftIcon={<ArrowsPointingOutIcon />}
-            onClick={onSplitTables}
-          >
-            Separar Mesas
-          </Button>
-        </div>
-      </div>
-
-      {/* Área de mesas */}
-      <div
-        className={[
-          'flex-1',
-          'bg-background-secondary',
-          'dark:bg-dark-bg-secondary',
-          'rounded-xl',
-          'p-4',
-          'overflow-auto',
-          'min-h-[400px]',
-        ].join(' ')}
-      >
-        {isLoading ? (
-          <div className="flex items-center justify-center h-full text-content-secondary dark:text-content-secondary">
-            Cargando mesas...
-          </div>
-        ) : errorMessage ? (
-          <div className="flex items-center justify-center h-full text-error-content dark:text-error-content">
-            {errorMessage}
-          </div>
-        ) : tables.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-content-secondary dark:text-content-secondary">
-            No hay mesas en esta ubicación
-          </div>
-        ) : tableLayout === 'grid' ? (
-          /* Layout Flexbox centrado con ancho máximo restringido para 4 columnas (160px * 4 + 8px * 3 = 664px) */
-          <div className="flex flex-col items-center justify-center min-h-full w-full p-4">
-            <div className="flex flex-wrap gap-2 justify-center max-w-[664px]">
-              {tables.map((table) => (
-                <POSTable
-                  key={table.tableNumber}
-                  tableNumber={table.tableNumber}
-                  status={table.status}
-                  shape={table.shape}
-                  chairs={table.chairs}
-                  isActive={table.isActive}
-                  onClick={() => onTableSelect?.(table.tableNumber)}
-                />
-              ))}
-            </div>
-          </div>
-        ) : (
-          /* Layout libre con posicionamiento absoluto */
-          <div className="relative w-full h-full min-h-[400px]">
-            {tables.map((table) => (
-              <div
-                key={table.tableNumber}
-                className="absolute"
-                style={
-                  table.position
-                    ? {
-                      left: `${table.position.x}%`,
-                      top: `${table.position.y}%`,
-                      transform: 'translate(-50%, -50%)',
-                    }
-                    : undefined
-                }
-              >
-                <POSTable
-                  tableNumber={table.tableNumber}
-                  status={table.status}
-                  shape={table.shape}
-                  chairs={table.chairs}
-                  isActive={table.isActive}
-                  onClick={() => onTableSelect?.(table.tableNumber)}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Leyenda de convenciones */}
-      <div className="flex flex-wrap gap-4 items-center w-full">
-        <POSConvention status="available" />
-        <POSConvention status="occupied" />
-        <POSConvention status="reserved" />
-        <POSConvention status="outOfService" />
-      </div>
-    </div>
-  );
-
-  // ===== RENDER SIDEBAR DERECHO (SELECTOR DE PERSONAS) =====
-  const renderPeopleCountSidebar = () => {
-    if (!showPeopleCountPanel) return null;
-
-    return (
-      <div
-        className={[
-          'w-full',
-          'md:w-[304px]',
-          'shrink-0',
-          'flex',
-          'flex-col',
-          'p-4',
-          'overflow-hidden',
-        ].join(' ')}
-      >
-        {/* Header con switch y botón cerrar */}
-        <div className="flex items-center justify-between w-full pb-4 border-b border-border-primary dark:border-dark-border-primary shrink-0">
-          <Switch
-            label={selectedTable?.locationName || 'Ubicación'}
-            description={selectedTable?.tableName || 'Mesa'}
-            labelPosition="trailing"
-            checked={false}
-            onChange={(e) => onTableSwitchChange?.(e.target.checked)}
-          />
-          <button
-            className={[
-              'p-2',
-              'rounded-md',
-              'border',
-              'border-primary-custom-300',
-              'text-primary-custom-600',
-              'hover:bg-background-secondary',
-              'dark:border-dark-border-custom',
-              'dark:hover:bg-dark-bg-primary',
-              'transition-colors',
-            ].join(' ')}
-            onClick={onClosePeoplePanel}
-            aria-label="Cerrar panel"
-          >
-            <XMarkIcon className="w-4 h-4" />
-          </button>
-        </div>
-
-        {/* Body - Título, descripción y teclado numérico */}
-        <div className="flex flex-col gap-2 w-full flex-1 overflow-auto pt-4">
-          {/* Título y descripción */}
-          <div className="flex flex-col gap-1 w-full">
-            <h3
-              className={[
-                'text-xl',
-                'leading-7',
-                'font-bold',
-                'tracking-[-0.5px]',
-                'text-content-primary',
-                'dark:text-dark-content-primary',
-              ].join(' ')}
-            >
-              Tomar pedido
-            </h3>
-            <p
-              className={[
-                'text-sm',
-                'leading-5',
-                'text-content-primary',
-                'dark:text-dark-content-primary',
-              ].join(' ')}
-            >
-              Selecciona la cantidad de personas
-            </p>
-          </div>
-
-          {/* Teclado numérico 3x3 */}
-          <div className="grid grid-cols-3 gap-2 w-full mt-2">
-            {[1, 2, 3, 4, 5, 6, 7, 8].map((num) => (
-              <POSNumberButton
-                key={num}
-                size="l"
-                border
-                onClick={() => onPeopleCountSelect?.(num)}
-              >
-                {num}
-              </POSNumberButton>
-            ))}
-          </div>
-        </div>
-
-        {/* Footer - Botones de acción FIJADOS AL BOTTOM con border-top */}
-        <div className="flex flex-col gap-4 w-full pt-4 mt-auto shrink-0 grow-0 basis-auto border-t border-border-primary dark:border-dark-border-primary">
-          <Button
-            type="default"
-            size="sm"
-            fullWidth
-            leftIcon={<ArrowRightEndOnRectangleIcon />}
-            onClick={onAssignTable}
-          >
-            Asignar
-          </Button>
-          <div className="flex gap-2 w-full">
-            <Button
-              type="outline"
-              size="sm"
-              fullWidth
-              leftIcon={<ArrowsRightLeftIcon />}
-              onClick={onTransferTable}
-            >
-              Transferir
-            </Button>
-            <Button
-              type="outline"
-              size="sm"
-              fullWidth
-              leftIcon={<RectangleGroupIcon />}
-              onClick={onSetCutlery}
-            >
-              Cubiertos
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  // ===== RENDER PRINCIPAL =====
-  return (
-    <div
-      className={[
-        'flex',
-        'flex-col',
-        'w-full',
-        'min-h-screen',
-        'bg-background-secondary',
-        'dark:bg-dark-bg-primary',
-        className,
-      ].join(' ')}
-    >
-      {/* Navbar */}
-      {renderNavbar()}
-
-      {/* Contenedor principal con sidebars y área central */}
-      <div className="flex flex-1 w-full overflow-hidden">
-        {/* Sidebar izquierdo - Salones */}
-        {renderLocationsSidebar()}
-
-        {/* Área central - Mesas */}
-        {renderTablesArea()}
-
-        {/* Sidebar derecho - Selector de personas (condicional) */}
-        {renderPeopleCountSidebar()}
-      </div>
-    </div>
-  );
-};

package/src/views/TableLayoutView/TableLayoutView.types.ts

@@ -1,209 +0,0 @@
-import type { ConventionStatus } from '../../components/POSConvention/POSConvention.types';
-
-/**
- * Estado de una ubicación/salón
- */
-export interface Location {
-  /**
-   * ID único de la ubicación
-   */
-  id: string;
-
-  /**
-   * Nombre de la ubicación (ej: "Antejardín", "Terraza", "Bar")
-   */
-  name: string;
-
-  /**
-   * Estado general de la ubicación
-   */
-  status: ConventionStatus;
-
-  /**
-   * Capacidad actual (mesas ocupadas/total)
-   */
-  capacity: {
-    current: number;
-    total: number;
-  };
-}
-
-/**
- * Estado de mesa compatible con POSTable
- * Nota: 'busy' se usa en lugar de 'occupied' para mantener compatibilidad con POSTable
- */
-export type TableStatus = 'available' | 'busy' | 'reserved';
-
-/**
- * Mesa en el layout
- */
-export interface TableItem {
-  /**
-   * Número de la mesa (ej: "01", "02")
-   */
-  tableNumber: string;
-
-  /**
-   * Estado actual de la mesa
-   * Nota: usa 'busy' en lugar de 'occupied' para POSTable
-   */
-  status: TableStatus;
-
-  /**
-   * Forma de la mesa
-   */
-  shape: 'square' | 'circle' | 'rectangle' | 'oval';
-
-  /**
-   * Cantidad de sillas (2, 4, 6, 8)
-   */
-  chairs: 2 | 4 | 6 | 8;
-
-  /**
-   * Si la mesa está actualmente seleccionada
-   */
-  isActive?: boolean;
-
-  /**
-   * Posición en el grid (opcional, para layout libre)
-   */
-  position?: {
-    x: number;
-    y: number;
-  };
-}
-
-/**
- * Props del componente TableLayoutView
- */
-export interface TableLayoutViewProps {
-  /**
-   * Lista de ubicaciones/salones disponibles
-   */
-  locations?: Location[];
-
-  /**
-   * ID de la ubicación actualmente seleccionada
-   */
-  activeLocationId?: string;
-
-  /**
-   * Lista de mesas en el layout actual
-   */
-  tables?: TableItem[];
-
-  /**
-   * Título del área de mesas (ej: "Mesas de Antejardín")
-   */
-  tablesTitle?: string;
-
-  /**
-   * Si se está mostrando el panel de selección de personas
-   */
-  showPeopleCountPanel?: boolean;
-
-  /**
-   * Información de la mesa seleccionada para el panel
-   */
-  selectedTable?: {
-    locationName: string;
-    tableName: string;
-  };
-
-  /**
-   * Cantidad de personas seleccionada
-   */
-  peopleCount?: number;
-
-  // ===== CALLBACKS =====
-
-  /**
-   * Callback cuando se selecciona una ubicación/salón
-   */
-  onLocationSelect?: (locationId: string) => void;
-
-  /**
-   * Callback cuando se selecciona una mesa
-   */
-  onTableSelect?: (tableNumber: string) => void;
-
-  /**
-   * Callback cuando se hace clic en "Crear Mesas"
-   */
-  onCreateTables?: () => void;
-
-  /**
-   * Callback cuando se hace clic en "Unir Mesas"
-   */
-  onMergeTables?: () => void;
-
-  /**
-   * Callback cuando se hace clic en "Separar Mesas"
-   */
-  onSplitTables?: () => void;
-
-  /**
-   * Callback cuando se selecciona un número de personas
-   */
-  onPeopleCountSelect?: (count: number) => void;
-
-  /**
-   * Callback cuando se hace clic en "Asignar"
-   */
-  onAssignTable?: () => void;
-
-  /**
-   * Callback cuando se hace clic en "Transferir"
-   */
-  onTransferTable?: () => void;
-
-  /**
-   * Callback cuando se hace clic en "Cubiertos"
-   */
-  onSetCutlery?: () => void;
-
-  /**
-   * Callback cuando se cierra el panel de personas
-   */
-  onClosePeoplePanel?: () => void;
-
-  /**
-   * Callback cuando cambia el switch de la mesa
-   */
-  onTableSwitchChange?: (checked: boolean) => void;
-
-  // ===== ESTADOS DE CARGA =====
-
-  /**
-   * Si se está cargando información
-   */
-  isLoading?: boolean;
-
-  /**
-   * Mensaje de error (si existe)
-   */
-  errorMessage?: string;
-
-  // ===== CUSTOMIZACIÓN =====
-
-  /**
-   * Tipo de layout para las mesas:
-   * - 'grid': Grid automático con separación uniforme (por defecto)
-   * - 'free': Posicionamiento libre usando position.x/y de cada mesa
-   */
-  tableLayout?: 'grid' | 'free';
-
-  /**
-   * Clases CSS adicionales para el contenedor
-   */
-  className?: string;
-
-  /**
-   * Información del usuario para el navbar
-   */
-  userInfo?: {
-    avatar: string;
-    name: string;
-    role: string;
-  };
-}