siesa-ui-kit 1.0.3 → 1.0.4

package/src/views/LayoutCommercial/LayoutCommercial.stories.tsx

@@ -0,0 +1,374 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { LayoutCommercial } from './LayoutCommercial';
+import {
+  Cog6ToothIcon,
+  ShoppingCartIcon,
+  CubeIcon,
+  DocumentIcon,
+} from '../../components/NavigationRailCommercial/icons';
+
+const meta = {
+  title: 'Siesa UI Kit/Views/LayoutCommercial',
+  component: LayoutCommercial,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Vista de layout comercial completa con NavigationRail lateral, Navbar superior y formulario de configuración de ítems.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    productName: {
+      control: 'text',
+      description: 'Nombre del producto en el Navbar',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+      },
+    },
+    userDropdown: {
+      control: 'object',
+      description: 'Configuración del dropdown de usuario',
+      table: {
+        type: { summary: 'UserDropdownProps' },
+        category: 'Contenido',
+      },
+    },
+    navigationItems: {
+      control: 'object',
+      description: 'Items del NavigationRail',
+      table: {
+        type: { summary: 'NavigationRailCommercialMenuItem[]' },
+        category: 'Contenido',
+      },
+    },
+    formData: {
+      control: 'object',
+      description: 'Datos del formulario',
+      table: {
+        type: { summary: 'FormData' },
+        category: 'Estado',
+      },
+    },
+  },
+} satisfies Meta<typeof LayoutCommercial>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// DATOS DE PRUEBA
+// ============================================
+
+const avatarUrl = 'https://avatar.iran.liara.run/public/boy?username=carlos';
+
+const defaultUserDropdown = {
+  avatar: avatarUrl,
+  name: 'Carlos',
+  email: 'carlos@siesa.com',
+};
+
+const defaultNavigationItems = [
+  {
+    id: 'config',
+    label: 'Configuración',
+    icon: <Cog6ToothIcon />,
+    active: true,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'general',
+        label: 'General',
+        icon: <Cog6ToothIcon />,
+      },
+      {
+        id: 'users',
+        label: 'Usuarios',
+        icon: <Cog6ToothIcon />,
+      },
+      {
+        id: 'permissions',
+        label: 'Permisos',
+        icon: <Cog6ToothIcon />,
+      },
+    ],
+  },
+  {
+    id: 'cart',
+    label: 'Carrito',
+    icon: <ShoppingCartIcon />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'active-carts',
+        label: 'Carritos activos',
+        icon: <ShoppingCartIcon />,
+      },
+      {
+        id: 'pending',
+        label: 'Pendientes',
+        icon: <ShoppingCartIcon />,
+      },
+    ],
+  },
+  {
+    id: 'products',
+    label: 'Productos',
+    icon: <CubeIcon />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'catalog',
+        label: 'Catálogo',
+        icon: <CubeIcon />,
+      },
+      {
+        id: 'inventory',
+        label: 'Inventario',
+        icon: <CubeIcon />,
+      },
+      {
+        id: 'categories',
+        label: 'Categorías',
+        icon: <CubeIcon />,
+      },
+    ],
+  },
+  {
+    id: 'documents',
+    label: 'Documentos',
+    icon: <DocumentIcon />,
+    isCollapsible: true,
+    children: [
+      {
+        id: 'invoices',
+        label: 'Facturas',
+        icon: <DocumentIcon />,
+      },
+      {
+        id: 'orders',
+        label: 'Pedidos',
+        icon: <DocumentIcon />,
+      },
+      {
+        id: 'reports',
+        label: 'Reportes',
+        icon: <DocumentIcon />,
+      },
+    ],
+  },
+];
+
+const defaultFormData = {
+  codigoItem: '',
+  nombre: '',
+  tipoItem: 'inventario' as const,
+  extension1: '',
+  extension2: '',
+  modeloCosto: '',
+  configuracionSerial: '',
+  manejaLotes: '',
+  manejaSeriales: false,
+  procesoManufactura: false,
+  puedeComprarse: false,
+  puedeVenderse: false,
+  permitirExtension1: false,
+  permitirExtension2: false,
+  permitirModeloCosto: false,
+  permitirManejaLotes: false,
+  permitirManejaSeriales: false,
+  permitirConfiguracionSerial: false,
+  permitirProcesoManufactura: false,
+  permitirCompras: false,
+  permitirVentas: false,
+};
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    productName: 'SB Comercial',
+    userDropdown: defaultUserDropdown,
+    navigationItems: defaultNavigationItems,
+    formData: defaultFormData,
+  },
+  render: (args) => {
+    const [formData, setFormData] = useState(args.formData);
+
+    return (
+      <LayoutCommercial
+        {...args}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 2. ESTADO: FORMULARIO VACÍO
+// ============================================
+export const FormularioVacio: Story = {
+  render: () => {
+    const [formData, setFormData] = useState(defaultFormData);
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 3. ESTADO: FORMULARIO CON DATOS
+// ============================================
+export const FormularioConDatos: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      codigoItem: 'ITEM-001',
+      nombre: 'Producto de Ejemplo',
+      tipoItem: 'inventario' as const,
+      extension1: 'azul',
+      extension2: 'm',
+      modeloCosto: 'fifo',
+      configuracionSerial: '1234567890123456789O',
+      manejaLotes: 'si',
+      manejaSeriales: true,
+      procesoManufactura: true,
+      puedeComprarse: true,
+      puedeVenderse: true,
+      permitirExtension1: true,
+      permitirExtension2: true,
+      permitirModeloCosto: false,
+      permitirManejaLotes: true,
+      permitirManejaSeriales: true,
+      permitirConfiguracionSerial: false,
+      permitirProcesoManufactura: true,
+      permitirCompras: true,
+      permitirVentas: true,
+    });
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 4. ESTADO: TIPO SERVICIO
+// ============================================
+export const TipoServicio: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      ...defaultFormData,
+      codigoItem: 'SERV-001',
+      nombre: 'Servicio de Consultoría',
+      tipoItem: 'servicio' as const,
+      puedeComprarse: false,
+      puedeVenderse: true,
+    });
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 5. ESTADO: SIN USUARIO
+// ============================================
+export const SinUsuario: Story = {
+  render: () => {
+    const [formData, setFormData] = useState(defaultFormData);
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 6. ESTADO: SIN NAVEGACIÓN
+// ============================================
+export const SinNavegacion: Story = {
+  render: () => {
+    const [formData, setFormData] = useState(defaultFormData);
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};
+
+// ============================================
+// 7. ESTADO: CREACIÓN ÍTEM (BASADO EN FIGMA)
+// ============================================
+export const CreacionItem: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      codigoItem: '',
+      nombre: '',
+      tipoItem: 'inventario' as const,
+      extension1: '',
+      extension2: '',
+      modeloCosto: '',
+      configuracionSerial: '',
+      manejaLotes: '',
+      manejaSeriales: false,
+      procesoManufactura: false,
+      puedeComprarse: true,
+      puedeVenderse: true,
+      permitirExtension1: false,
+      permitirExtension2: false,
+      permitirModeloCosto: false,
+      permitirManejaLotes: false,
+      permitirManejaSeriales: false,
+      permitirConfiguracionSerial: false,
+      permitirProcesoManufactura: false,
+      permitirCompras: true,
+      permitirVentas: true,
+    });
+
+    return (
+      <LayoutCommercial
+        productName="SB Comercial"
+        userDropdown={defaultUserDropdown}
+        navigationItems={defaultNavigationItems}
+        formData={formData}
+        onFormChange={setFormData}
+      />
+    );
+  },
+};

package/src/views/LayoutCommercial/LayoutCommercial.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { Navbar } from '../../components/Navbar';
+import { NavigationRailCommercial } from '../../components/NavigationRailCommercial';
+import type { LayoutCommercialProps } from './LayoutCommercial.types';
+
+/**
+ * LayoutCommercial - Layout general comercial del sistema Siesa
+ *
+ * Layout reutilizable que implementa la estructura base del sistema comercial
+ * con NavigationRail lateral, Navbar superior y área de contenido dinámico.
+ * Diseñado para ser usado como wrapper en diferentes vistas comerciales.
+ *
+ * **Composición:**
+ * - Navbar: Barra superior con logo Siesa, título del producto y dropdown de usuario
+ * - NavigationRailCommercial: Rail de navegación lateral con iconos y búsqueda
+ * - Área de contenido: Contenido dinámico pasado como children
+ *
+ * **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
+ * - Responsive design mobile-first con breakpoints md:, lg:, xl:
+ * - Composición con componentes del sistema (NO reimplementación)
+ * - Type safety con TypeScript estricto
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see src/components/Navbar - Componente Navbar reutilizado
+ * @see src/components/NavigationRailCommercial - Componente NavigationRail reutilizado
+ *
+ * @example
+ * ```tsx
+ * <LayoutCommercial
+ *   productName="SB Comercial"
+ *   userDropdown={{
+ *     avatar: '/avatar.jpg',
+ *     name: 'Carlos',
+ *     email: 'carlos@siesa.com',
+ *   }}
+ *   navigationItems={navigationItems}
+ * >
+ *   <div>
+ *     <h1>Mi contenido personalizado</h1>
+ *     <p>Cualquier contenido puede ir aquí</p>
+ *   </div>
+ * </LayoutCommercial>
+ * ```
+ */
+export const LayoutCommercial: React.FC<LayoutCommercialProps> = ({
+  productName = 'SB Comercial',
+  userDropdown,
+  navigationItems,
+  children,
+  className = '',
+  contentClassName = '',
+}) => {
+  // Estado local para el NavigationRail
+  const [navState, setNavState] = useState<'collapsed' | 'expanded' | 'hover' | 'searcher'>('collapsed');
+
+  // Handler para cambio de estado del NavigationRail
+  const handleNavStateChange = (state: 'collapsed' | 'expanded' | 'hover' | 'searcher' | undefined) => {
+    if (state) {
+      setNavState(state);
+    }
+  };
+
+  return (
+    <div
+      className={[
+        // ===== BASE CONTAINER =====
+        'h-screen', // Altura fija de pantalla completa
+        'w-full',
+        'bg-white', // Fondo blanco para Navbar y NavigationRail
+        'dark:bg-dark-bg-primary',
+        'flex',
+        'flex-col',
+        'overflow-hidden', // Prevenir scroll en contenedor principal
+        className,
+      ]
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim()}
+    >
+      {/* ===== NAVBAR ===== */}
+      <Navbar
+        productName={productName}
+        userDropdown={userDropdown}
+        hideActionButtons
+        showSiesaLogoLeading
+        showBusinessLogo={false}
+        className="bg-white dark:bg-dark-bg-primary"
+      />
+
+      {/* ===== LAYOUT: NAVIGATION RAIL + CONTENT ===== */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* ===== NAVIGATION RAIL ===== */}
+        <NavigationRailCommercial
+          state={navState}
+          items={navigationItems}
+          showSearchButton={false}
+          onStateChange={handleNavStateChange}
+          onItemClick={(item) => console.log('Item clicked:', item)}
+          onItemHover={(item) => console.log('Item hover:', item)}
+        />
+
+        {/* ===== CONTENT AREA ===== */}
+        <div
+          className={[
+            'flex-1',
+            'overflow-y-auto',
+            'bg-gray-50',
+            'dark:bg-dark-bg-primary',
+            contentClassName,
+          ]
+            .join(' ')
+            .replace(/\s+/g, ' ')
+            .trim()}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/views/LayoutCommercial/LayoutCommercial.types.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import type { UserDropdownProps } from '../../components/Navbar/Navbar.types';
+import type { NavigationRailCommercialMenuItem } from '../../components/NavigationRailCommercial/NavigationRailCommercial.types';
+
+/**
+ * Props del componente LayoutCommercial
+ *
+ * Layout general comercial con NavigationRail lateral, Navbar superior y área
+ * de contenido dinámico. Diseñado para ser reutilizado en diferentes vistas
+ * del sistema comercial.
+ *
+ * **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
+ * - Responsive design mobile-first
+ * - Composición con componentes del sistema
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ */
+export interface LayoutCommercialProps {
+  /**
+   * Nombre del producto que aparece en el Navbar
+   * @default 'SB Comercial'
+   */
+  productName?: string;
+
+  /**
+   * Configuración del dropdown de usuario en el Navbar
+   */
+  userDropdown?: UserDropdownProps;
+
+  /**
+   * Items de navegación para el NavigationRail
+   */
+  navigationItems?: NavigationRailCommercialMenuItem[];
+
+  /**
+   * Contenido dinámico que se renderiza en el área principal
+   */
+  children?: ReactNode;
+
+  /**
+   * Clases CSS adicionales para el contenedor principal
+   */
+  className?: string;
+
+  /**
+   * Clases CSS adicionales para el área de contenido
+   */
+  contentClassName?: string;
+}