siesa-ui-kit 1.0.4 → 1.0.5

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

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

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

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