siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/POSTable/POSTable.tsx

@@ -0,0 +1,401 @@
+import React from 'react';
+import type { POSTableProps } from './POSTable.types';
+
+/**
+ * POSTable - Sistema de visualización de mesas de restaurante
+ *
+ * Componente para mostrar mesas de restaurante con diferentes estados
+ * (disponible, ocupada, reservada) y configuraciones de sillas según diseño de Figma.
+ *
+ * ⚠️ IMPORTANTE - COLORES PERSONALIZADOS DEL CLIENTE:
+ * Este componente usa colores específicos hardcodeados según el diseño del cliente.
+ * Estos NO son tokens del sistema de diseño general, sino colores únicos para POSTable.
+ * Esta es una EXCEPCIÓN JUSTIFICADA similar a los iconos personalizados de POSTable.
+ *
+ * ESPECIFICACIONES PIXEL-PERFECT DE FIGMA:
+ *
+ * Colores exactos (ESPECÍFICOS DEL CLIENTE):
+ *
+ * LIGHT MODE:
+ * - Available (Azul): #0e79fd (border, mesa, silla, texto) - Azul primario del sistema
+ * - Available Active: Bg #dbeefe + Border #bce4ff (cuando isActive=true)
+ * - Busy (Naranja): #af460e (border, mesa, silla, texto)
+ * - Busy Active: Bg #fed7aa + Border #fed7aa (cuando isActive=true)
+ * - Reserved (Púrpura): #7e22ce (border, mesa, silla, texto)
+ * - Reserved Active: Bg #e9d5ff + Border #e9d5ff (cuando isActive=true)
+ *
+ * DARK MODE (colores más brillantes para mejor visibilidad):
+ * - Available (Azul claro): #93d1fd (border, mesa, silla, texto)
+ * - Available Active: Bg #1e3a5f + Border #1e3a5f (cuando isActive=true)
+ * - Busy (Naranja/Amarillo): #f5a927 (border, mesa, silla, texto)
+ * - Busy Active: Bg #5c3a1e + Border #5c3a1e (cuando isActive=true)
+ * - Reserved (Púrpura claro): #c084fc (border, mesa, silla, texto)
+ * - Reserved Active: Bg #3b1f5c + Border #3b1f5c (cuando isActive=true)
+ *
+ * - Texto del label: Mismo color del estado (está FUERA de la mesa según Figma)
+ *
+ * Dimensiones exactas:
+ * - Container: 160x160px, border-radius: 8px, border: 2px
+ * - Inner container: 134x134px, gap: 4px
+ * - Mesa Square: 64x64px, border-radius: 4px
+ * - Mesa Circle: 64x64px, border-radius: 9999px
+ * - Mesa Rectangle: 80x64px, border-radius: 4px
+ * - Mesa Oval: 80x64px, border-radius: 24px
+ * - Silla: 28x22px, border-radius: 4px
+ * - Silla Respaldo (top): 28x16px (72.73% height)
+ * - Silla Asiento (bottom): 24x14px (85.71% width, 63.64% height)
+ * - Gap: 4px entre todos los elementos
+ *
+ * Tipografía:
+ * - Label: 10px / 12px line-height, weight: 400, font: SiesaBT
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Focus rings adaptativos para light y dark mode
+ * - Valores exactos de Figma con notación [px]
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <POSTable
+ *   tableNumber="12"
+ *   status="available"
+ *   shape="square"
+ *   chairs={4}
+ *   onClick={() => console.log('Mesa seleccionada')}
+ * />
+ * ```
+ */
+export const POSTable: React.FC<POSTableProps> = ({
+  tableNumber,
+  status = 'available',
+  shape = 'square',
+  chairs = 4,
+  showChairs = true,
+  isActive = false,
+  onClick,
+  className = '',
+  disabled = false,
+  children,
+}) => {
+  // ===== COLORES POR ESTADO (VALORES EXACTOS DE FIGMA) =====
+  // ⚠️ NOTA: Estos colores son ESPECÍFICOS del cliente (excepción justificada)
+  // NO son tokens del sistema general de diseño
+  // Light Mode: #0e79fd (azul primario), #af460e (naranja), #7e22ce (púrpura)
+  // Dark Mode:  #93d1fd (azul claro), #f5a927 (naranja/amarillo), #c084fc (púrpura claro)
+  const statusColors = {
+    available: {
+      // Enabled state - Light: #0e79fd (azul primario del sistema), Dark: #93d1fd
+      border: 'border-[#0e79fd]',
+      borderDark: 'dark:border-[#93d1fd]',
+      bgEnabled: 'bg-transparent',
+      bgEnabledDark: 'dark:bg-transparent',
+      // Actived state - Light: Bg #dbeefe + Border #bce4ff según Figma
+      bgActive: 'bg-[#dbeefe]',
+      bgActiveDark: 'dark:bg-[#1e3a5f]',
+      borderActive: 'border-[#bce4ff]',
+      borderActiveDark: 'dark:border-[#1e3a5f]',
+      // Table and chairs - Light: #0e79fd, Dark: #93d1fd
+      table: 'bg-[#0e79fd]',
+      tableDark: 'dark:bg-[#93d1fd]',
+      chair: 'bg-[#0e79fd]',
+      chairDark: 'dark:bg-[#93d1fd]',
+      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
+      text: 'text-[#0e79fd]',
+      textDark: 'dark:text-[#93d1fd]',
+      // Focus ring
+      focusRing: 'focus:ring-[#93d1fd]',
+      focusRingDark: 'dark:focus:ring-[#0e79fd]',
+    },
+    busy: {
+      // Enabled state - Light: #af460e, Dark: #f5a927
+      border: 'border-[#af460e]',
+      borderDark: 'dark:border-[#f5a927]',
+      bgEnabled: 'bg-transparent',
+      bgEnabledDark: 'dark:bg-transparent',
+      // Actived state
+      bgActive: 'bg-[#fed7aa]',
+      bgActiveDark: 'dark:bg-[#5c3a1e]',
+      borderActive: 'border-[#fed7aa]',
+      borderActiveDark: 'dark:border-[#5c3a1e]',
+      // Table and chairs - Light: #af460e, Dark: #f5a927
+      table: 'bg-[#af460e]',
+      tableDark: 'dark:bg-[#f5a927]',
+      chair: 'bg-[#af460e]',
+      chairDark: 'dark:bg-[#f5a927]',
+      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
+      text: 'text-[#af460e]',
+      textDark: 'dark:text-[#f5a927]',
+      // Focus ring
+      focusRing: 'focus:ring-[#f5a927]',
+      focusRingDark: 'dark:focus:ring-[#af460e]',
+    },
+    reserved: {
+      // Enabled state - Light: #7e22ce, Dark: #c084fc
+      border: 'border-[#7e22ce]',
+      borderDark: 'dark:border-[#c084fc]',
+      bgEnabled: 'bg-transparent',
+      bgEnabledDark: 'dark:bg-transparent',
+      // Actived state
+      bgActive: 'bg-[#e9d5ff]',
+      bgActiveDark: 'dark:bg-[#3b1f5c]',
+      borderActive: 'border-[#e9d5ff]',
+      borderActiveDark: 'dark:border-[#3b1f5c]',
+      // Table and chairs - Light: #7e22ce, Dark: #c084fc
+      table: 'bg-[#7e22ce]',
+      tableDark: 'dark:bg-[#c084fc]',
+      chair: 'bg-[#7e22ce]',
+      chairDark: 'dark:bg-[#c084fc]',
+      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
+      text: 'text-[#7e22ce]',
+      textDark: 'dark:text-[#c084fc]',
+      // Focus ring
+      focusRing: 'focus:ring-[#c084fc]',
+      focusRingDark: 'dark:focus:ring-[#7e22ce]',
+    },
+  };
+
+  // ===== CLASES DE FORMA (ESPECIFICACIONES EXACTAS DE FIGMA) =====
+  const shapeClasses = {
+    square: {
+      container: 'rounded-[4px]',
+      table: 'w-[64px] h-[64px] rounded-[4px]',
+    },
+    circle: {
+      container: 'rounded-[9999px]',
+      table: 'w-[64px] h-[64px] rounded-[9999px]',
+    },
+    rectangle: {
+      container: 'rounded-[4px]',
+      table: 'w-[80px] h-[64px] rounded-[4px]',
+    },
+    oval: {
+      container: 'rounded-[24px]',
+      table: 'w-[80px] h-[64px] rounded-[24px]',
+    },
+  };
+
+  // ===== COMPONENTE SILLA (ESPECIFICACIONES EXACTAS DE FIGMA) =====
+  const Chair: React.FC<{ rotation: number }> = ({ rotation }) => (
+    <div
+      className="w-[28px] h-[22px]"
+      style={{ transform: `rotate(${rotation}deg)` }}
+      aria-hidden="true"
+    >
+      {/* Respaldo (parte superior) - 72.73% height */}
+      <div
+        className={`
+          absolute
+          top-0
+          left-0
+          right-0
+          h-[16px]
+          rounded-t-[4px]
+          ${statusColors[status].chair}
+          ${statusColors[status].chairDark}
+        `}
+      />
+      {/* Asiento (parte inferior) - 85.71% width, 63.64% height */}
+      <div
+        className={`
+          absolute
+          bottom-0
+          left-[7.14%]
+          right-[7.14%]
+          h-[14px]
+          rounded-b-[4px]
+          ${statusColors[status].chair}
+          ${statusColors[status].chairDark}
+        `}
+      />
+    </div>
+  );
+
+  // ===== HANDLER DE CLICK =====
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if ((e.key === 'Enter' || e.key === ' ') && !disabled && onClick) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+
+  // ===== CLASES DEL CONTAINER (160x160px según Figma) =====
+  const containerClasses = [
+    // Dimensiones exactas del container
+    'w-[160px]',
+    'h-[160px]',
+    'shrink-0',
+
+    // Estructura
+    'relative',
+    'flex',
+    'flex-col',
+    'items-center',
+    'justify-center',
+    'p-0',
+
+    // Borde (2px según Figma)
+    'border-2',
+    'box-border',
+
+    // Border radius (8px según Figma)
+    'rounded-[8px]',
+
+    // Colores del borde y fondo según estado
+    isActive ? statusColors[status].borderActive : statusColors[status].border,
+    isActive ? statusColors[status].borderActiveDark : statusColors[status].borderDark,
+    isActive ? statusColors[status].bgActive : statusColors[status].bgEnabled,
+    isActive ? statusColors[status].bgActiveDark : statusColors[status].bgEnabledDark,
+
+    // Focus rings adaptativos (siguiendo patrón de Button)
+    'focus:outline-none',
+    'focus:ring-2',
+    statusColors[status].focusRing,
+    statusColors[status].focusRingDark,
+    'focus:ring-offset-2',
+    'dark:focus:ring-offset-dark-bg-primary',
+
+    // Transiciones
+    'transition-all',
+    'duration-150',
+
+    // Interactividad
+    onClick && !disabled ? 'cursor-pointer' : '',
+    onClick && !disabled ? 'hover:scale-105' : '',
+    onClick && !disabled ? 'active:scale-95' : '',
+    disabled ? 'opacity-50 cursor-not-allowed' : '',
+
+    // Clases adicionales
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== RENDER =====
+  return (
+    <button
+      className={containerClasses}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      disabled={disabled}
+      type="button"
+      aria-label={`Mesa ${tableNumber} - ${
+        status === 'available' ? 'Disponible' : status === 'busy' ? 'Ocupada' : 'Reservada'
+      }`}
+    >
+      {/* INNER CONTAINER (134x134px según Figma) */}
+      <div className="flex flex-col gap-[4px] items-center justify-center w-[134px] h-[134px] shrink-0">
+        {/* FILA DE SILLAS SUPERIORES */}
+        {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (
+          <div className="flex gap-[4px] items-center justify-center shrink-0">
+            {chairs >= 6 && (
+              <>
+                <Chair rotation={0} />
+                <Chair rotation={0} />
+              </>
+            )}
+            {chairs === 2 && <Chair rotation={0} />}
+            {chairs === 4 && <Chair rotation={0} />}
+          </div>
+        )}
+
+        {/* FILA CENTRAL CON MESA Y SILLAS LATERALES */}
+        <div className="flex gap-[4px] items-center justify-center shrink-0">
+          {/* COLUMNA IZQUIERDA - SILLAS */}
+          {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (
+            <div className="flex flex-col gap-[4px] items-start justify-center shrink-0">
+              {chairs >= 8 && (
+                <>
+                  <Chair rotation={270} />
+                  <Chair rotation={270} />
+                </>
+              )}
+              {(chairs === 4 || chairs === 6) && <Chair rotation={270} />}
+            </div>
+          )}
+
+          {/* MESA (sin label - el label va fuera según Figma) */}
+          <div className="flex flex-col gap-[4px] items-start justify-center shrink-0">
+            <div className="flex items-center shrink-0">
+              <div
+                className={`
+                  ${shapeClasses[shape].table}
+                  ${statusColors[status].table}
+                  ${statusColors[status].tableDark}
+                  shrink-0
+                `}
+              />
+            </div>
+          </div>
+
+          {/* COLUMNA DERECHA - SILLAS */}
+          {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (
+            <div className="flex flex-col gap-[4px] items-start justify-center shrink-0">
+              {chairs >= 8 && (
+                <>
+                  <Chair rotation={90} />
+                  <Chair rotation={90} />
+                </>
+              )}
+              {(chairs === 4 || chairs === 6) && <Chair rotation={90} />}
+            </div>
+          )}
+        </div>
+
+        {/* FILA DE SILLAS INFERIORES */}
+        {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (
+          <div className="flex gap-[4px] items-center justify-center shrink-0">
+            {chairs >= 6 && (
+              <>
+                <Chair rotation={180} />
+                <Chair rotation={180} />
+              </>
+            )}
+            {chairs === 2 && <Chair rotation={180} />}
+            {chairs === 4 && <Chair rotation={180} />}
+          </div>
+        )}
+      </div>
+
+      {/* LABEL DE NÚMERO DE MESA - Debajo del conjunto mesa+sillas según Figma */}
+      <div
+        className={`
+          flex
+          flex-col
+          justify-center
+          leading-[0]
+          not-italic
+          overflow-ellipsis
+          overflow-hidden
+          min-w-full
+          text-center
+          whitespace-nowrap
+          shrink-0
+          text-[10px]
+          font-normal
+          ${statusColors[status].text}
+          ${statusColors[status].textDark}
+        `}
+      >
+        <p className="leading-[12px] overflow-ellipsis overflow-hidden">
+          Mesa {tableNumber}
+        </p>
+        {children}
+      </div>
+    </button>
+  );
+};

package/src/components/POSTable/POSTable.types.ts

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Estado de la mesa de restaurante
+ */
+export type TableStatus = 'available' | 'busy' | 'reserved';
+
+/**
+ * Forma de la mesa
+ */
+export type TableShape = 'square' | 'circle' | 'rectangle' | 'oval';
+
+/**
+ * Configuración de número de sillas
+ */
+export type ChairCount = 2 | 4 | 6 | 8;
+
+/**
+ * Props del componente POSTable (Restaurant Table)
+ */
+export interface POSTableProps {
+  /**
+   * Número de la mesa
+   * @example "01"
+   */
+  tableNumber: string;
+
+  /**
+   * Estado de la mesa
+   * @default 'available'
+   */
+  status?: TableStatus;
+
+  /**
+   * Forma de la mesa
+   * - square: Mesa cuadrada 64x64px con border-radius 4px
+   * - circle: Mesa circular 64x64px con border-radius completo
+   * - rectangle: Mesa rectangular 80x64px con border-radius 4px
+   * - oval: Mesa ovalada 80x64px con border-radius 24px
+   * @default 'square'
+   */
+  shape?: TableShape;
+
+  /**
+   * Número de sillas alrededor de la mesa
+   * @default 4
+   */
+  chairs?: ChairCount;
+
+  /**
+   * Si muestra las sillas alrededor de la mesa
+   * @default true
+   */
+  showChairs?: boolean;
+
+  /**
+   * Si la mesa está en estado activo (con fondo de color)
+   * Estado "actived" muestra fondo de color según Figma
+   * @default false
+   */
+  isActive?: boolean;
+
+  /**
+   * Callback cuando se hace clic en la mesa
+   */
+  onClick?: () => void;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Si la mesa está deshabilitada (no clickeable)
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Contenido adicional a mostrar dentro de la mesa
+   */
+  children?: ReactNode;
+}