siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/DropdownItemHeading/icons.tsx

@@ -1,125 +0,0 @@
-/**
- * Iconos para el componente DropdownItemHeading
- * Usando heroicons-micro según especificaciones de Figma
- * 
- * Los iconos se pueden pasar como strings al componente:
- * - 'cog-6-tooth': Icono de engranaje
- * - 'check': Icono de check
- * - 'x': Icono de cerrar
- * - 'chevron-down': Icono de chevron hacia abajo
- * 
- * @see DropdownItemHeading.tsx para ver cómo se usan
- */
-
-import React from 'react';
-
-interface IconProps {
-  className?: string;
-}
-
-/**
- * Icono Cog (heroicons-micro/cog-6-tooth)
- * Usado como icono por defecto en DropdownItemHeading
- * Tamaño: 16x16px
- */
-export const CogIcon = ({ className = 'w-4 h-4' }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <path
-      fillRule="evenodd"
-      d="M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.461 3.39a.5.5 0 0 1 .639-.206l1.703.768c.433-.36.928-.649 1.466-.847l.186-1.858ZM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Icono Check (heroicons-micro/check)
- */
-export const CheckIcon = ({ className = 'w-4 h-4' }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <path
-      fillRule="evenodd"
-      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 1 1-1.06-1.06L12.69 4.22a.75.75 0 0 1 1.06 0Z"
-      clipRule="evenodd"
-    />
-    <path
-      fillRule="evenodd"
-      d="M2.22 9.28a.75.75 0 0 0 0 1.06l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.5-2.5a.75.75 0 0 0-1.06 0Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Icono X (heroicons-micro/x-mark)
- */
-export const XIcon = ({ className = 'w-4 h-4' }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
-  </svg>
-);
-
-/**
- * Icono ChevronDown (heroicons-micro/chevron-down)
- */
-export const ChevronDownIcon = ({ className = 'w-4 h-4' }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    className={className}
-  >
-    <path
-      fillRule="evenodd"
-      d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-/**
- * Mapeo de nombres de iconos a componentes
- * Permite usar strings para referenciar iconos
- */
-export const iconMap: Record<string, React.FC<IconProps>> = {
-  'cog-6-tooth': CogIcon,
-  'check': CheckIcon,
-  'x': XIcon,
-  'chevron-down': ChevronDownIcon,
-};
-
-/**
- * Obtener un icono por su nombre
- * @param iconName - Nombre del icono (ej: 'cog-6-tooth', 'check', 'x', 'chevron-down')
- * @param className - Clases CSS adicionales
- * @returns Componente del icono o null si no existe
- */
-export const getIcon = (
-  iconName: string | null | undefined,
-  className?: string
-): React.ReactNode => {
-  if (!iconName) return null;
-
-  const IconComponent = iconMap[iconName];
-  if (!IconComponent) {
-    console.warn(`Icon "${iconName}" not found in iconMap`);
-    return null;
-  }
-
-  return <IconComponent className={className} />;
-};

package/src/components/DropdownItemHeading/index.ts

@@ -1,3 +0,0 @@
-export { DropdownItemHeading } from './DropdownItemHeading';
-export type { DropdownItemHeadingProps } from './DropdownItemHeading.types';
-export { CogIcon, CheckIcon, XIcon, ChevronDownIcon, getIcon, iconMap } from './icons';

package/src/components/NavigationRailCommercial/NavigationRailCommercial.stories.tsx

@@ -1,464 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { NavigationRailCommercial } from './NavigationRailCommercial';
-import type { NavigationRailCommercialProps } from './NavigationRailCommercial.types';
-import {
-  Cog6ToothIcon,
-  ShoppingCartIcon,
-  CubeIcon,
-  DocumentIcon,
-} from './icons';
-
-// Wrapper con estado para las stories interactivas
-const NavigationRailCommercialWithState = (args: NavigationRailCommercialProps) => {
-  const [state, setState] = useState(args.state || 'collapsed');
-
-  return (
-    <NavigationRailCommercial
-      {...args}
-      state={state}
-      onStateChange={(newState) => {
-        setState(newState);
-        args.onStateChange?.(newState);
-      }}
-    />
-  );
-};
-
-const meta = {
-  title: 'Siesa UI Kit/NavigationRailCommercial',
-  component: NavigationRailCommercial,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Componente de navegación lateral especializado para aplicaciones comerciales que combina NavigationRailTypes y NavigationRailPanel. Soporta cuatro estados: collapsed, expanded, hover y searcher.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    state: {
-      control: 'select',
-      options: ['collapsed', 'expanded', 'hover', 'searcher'],
-      description: 'Estado visual del componente',
-      table: {
-        type: { summary: 'string' },
-        category: 'Apariencia',
-        defaultValue: { summary: 'collapsed' },
-      },
-    },
-    items: {
-      control: 'object',
-      description: 'Items de menú a mostrar',
-      table: {
-        type: { summary: 'NavigationRailCommercialMenuItem[]' },
-        category: 'Contenido',
-      },
-    },
-    showSearchButton: {
-      control: 'boolean',
-      description: 'Si mostrar el botón de búsqueda en modo collapsed',
-      table: {
-        type: { summary: 'boolean' },
-        category: 'Apariencia',
-        defaultValue: { summary: 'true' },
-      },
-    },
-    onStateChange: {
-      action: 'stateChanged',
-      description: 'Callback cuando cambia el estado',
-      table: {
-        category: 'Eventos',
-      },
-    },
-    onItemClick: {
-      action: 'itemClicked',
-      description: 'Callback cuando se hace click en un item',
-      table: {
-        category: 'Eventos',
-      },
-    },
-    onItemHover: {
-      action: 'itemHovered',
-      description: 'Callback cuando se hace hover en un item',
-      table: {
-        category: 'Eventos',
-      },
-    },
-  },
-} satisfies Meta<typeof NavigationRailCommercial>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// DATOS DE EJEMPLO
-// ============================================
-const exampleItems = [
-  {
-    id: 'admin',
-    label: 'Administración',
-    icon: <Cog6ToothIcon className="size-4" />,
-    isCollapsible: true,
-    children: [
-      {
-        id: 'users',
-        label: 'Usuarios',
-        icon: <Cog6ToothIcon className="size-4" />,
-        onClick: () => console.log('Usuarios clicked'),
-      },
-      {
-        id: 'roles',
-        label: 'Roles y Permisos',
-        icon: <Cog6ToothIcon className="size-4" />,
-        onClick: () => console.log('Roles clicked'),
-      },
-      {
-        id: 'config',
-        label: 'Configuración',
-        icon: <Cog6ToothIcon className="size-4" />,
-        onClick: () => console.log('Config clicked'),
-      },
-    ],
-  },
-  {
-    id: 'sales',
-    label: 'Ventas',
-    icon: <ShoppingCartIcon className="size-4" />,
-    isCollapsible: true,
-    children: [
-      {
-        id: 'orders',
-        label: 'Pedidos',
-        icon: <ShoppingCartIcon className="size-4" />,
-      },
-      {
-        id: 'invoices',
-        label: 'Facturas',
-        icon: <ShoppingCartIcon className="size-4" />,
-      },
-    ],
-  },
-  {
-    id: 'inventory',
-    label: 'Inventario',
-    icon: <CubeIcon className="size-4" />,
-    isCollapsible: true,
-    children: [
-      {
-        id: 'products',
-        label: 'Productos',
-        icon: <CubeIcon className="size-4" />,
-      },
-      {
-        id: 'categories',
-        label: 'Categorías',
-        icon: <CubeIcon className="size-4" />,
-      },
-    ],
-  },
-  {
-    id: 'purchases',
-    label: 'Compras',
-    icon: <DocumentIcon className="size-4" />,
-    isCollapsible: true,
-    children: [
-      {
-        id: 'orders-purchase',
-        label: 'Órdenes de Compra',
-        icon: <DocumentIcon className="size-4" />,
-      },
-      {
-        id: 'suppliers',
-        label: 'Proveedores',
-        icon: <DocumentIcon className="size-4" />,
-      },
-    ],
-  },
-];
-
-// ============================================
-// 1. INTERACTIVE PLAYGROUND
-// ============================================
-export const Playground: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems,
-    showSearchButton: true,
-  },
-  render: (args) => <NavigationRailCommercialWithState {...args} />,
-};
-
-// ============================================
-// 2. ESTADOS DEL COMPONENTE
-// ============================================
-export const EstadoColapsado: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estado Colapsado
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Barra de navegación compacta de 80px con solo iconos.
-          <br />
-          Pasa el mouse sobre un icono para ver el panel lateral con el submenú.
-          <br />
-          <strong>Prueba el botón de expandir</strong> en el footer.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const EstadoExpandido: Story = {
-  args: {
-    state: 'expanded',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estado Expandido
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Barra de navegación de 215px con labels visibles.
-          <br />
-          Los items colapsables se muestran con chevron down y se pueden expandir.
-          <br />
-          <strong>Prueba el botón "Colapsar"</strong> en el footer.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const EstadoHover: Story = {
-  args: {
-    state: 'hover',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <div className="relative">
-        <NavigationRailCommercial {...args} />
-        <div className="absolute left-[80px] top-0 w-[248px] h-full bg-bg-primary dark:bg-dark-bg-primary border-l border-border-primary dark:border-dark-border-primary p-3 shadow-lg">
-          <div className="mb-3">
-            <h4 className="text-sm font-bold text-content-primary dark:text-dark-content-primary px-4 py-2">
-              Administración
-            </h4>
-          </div>
-          <div className="border-t border-border-primary dark:border-dark-border-primary mb-3" />
-          <div className="space-y-1">
-            <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-              Usuarios
-            </button>
-            <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-              Roles y Permisos
-            </button>
-            <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-              Configuración
-            </button>
-          </div>
-        </div>
-      </div>
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estado Hover
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Panel lateral se muestra al hacer hover sobre un item con submenú.
-          <br />
-          El panel desaparece cuando el mouse sale de la zona del rail + panel.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const EstadoBusqueda: Story = {
-  args: {
-    state: 'searcher',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <div className="relative">
-        <NavigationRailCommercial {...args} />
-        <div className="absolute left-[80px] top-0 w-[248px] h-full bg-bg-primary dark:bg-dark-bg-primary border-l border-border-primary dark:border-dark-border-primary shadow-lg">
-          <div className="p-3">
-            <input
-              type="text"
-              placeholder="Buscar módulo"
-              className="w-full px-3 py-2 text-sm border border-border-primary dark:border-dark-border-primary rounded-lg bg-white dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary placeholder-content-tertiary dark:placeholder-content-tertiary"
-            />
-          </div>
-          <div className="border-t border-border-primary dark:border-dark-border-primary mb-3" />
-          <div className="px-3 space-y-3">
-            <div>
-              <p className="text-xs text-content-tertiary dark:text-content-tertiary mb-2">
-                Recientes
-              </p>
-              <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-                Configuración
-              </button>
-            </div>
-            <div>
-              <p className="text-xs text-content-tertiary dark:text-content-tertiary mb-2">
-                Opciones frecuentes
-              </p>
-              <button className="w-full text-left px-4 py-2 text-sm text-content-primary dark:text-dark-content-primary hover:bg-primary-custom-100 dark:hover:bg-dark-bg-custom rounded-lg transition-colors">
-                Item
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estado Búsqueda
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Panel lateral se muestra al hacer click en el botón de búsqueda (modo collapsed).
-          <br />
-          Incluye input de búsqueda, sección de recientes y opciones frecuentes.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. VARIANTES CON ITEMS ACTIVOS
-// ============================================
-export const ConItemActivo: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems.map((item, index) => ({
-      ...item,
-      active: index === 0,
-    })),
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Con Item Activo
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          El primer item (Administración) está marcado como activo.
-          <br />
-          Los items activos tienen un fondo de color custom-primary.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const ConBadges: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems.map((item, index) => ({
-      ...item,
-      badge: index === 1 || index === 3,
-      badgeCount: index === 1 ? 5 : index === 3 ? 12 : undefined,
-    })),
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Con Badges de Notificación
-        </h3>
-        <p className="text-sm text-content-secondary dark:text-content-secondary">
-          Algunos items tienen badges de notificación con contador.
-          <br />
-          Ventas (5) y Compras (12) tienen notificaciones pendientes.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CASOS DE USO REALES
-// ============================================
-export const AplicacionCompleta: Story = {
-  args: {
-    state: 'collapsed',
-    items: exampleItems,
-  },
-  render: (args) => (
-    <div className="flex h-screen bg-white dark:bg-dark-bg-primary">
-      <NavigationRailCommercialWithState {...args} />
-      <div className="flex-1 p-8">
-        <div className="max-w-4xl">
-          <h1 className="text-3xl font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-            Panel de Control
-          </h1>
-          <p className="text-content-secondary dark:text-content-secondary mb-8">
-            Bienvenido al sistema comercial de Siesa
-          </p>
-
-          <div className="grid grid-cols-3 gap-6 mb-8">
-            <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
-              <h3 className="text-lg font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-                Ventas del Mes
-              </h3>
-              <p className="text-3xl font-bold text-primary-custom-600">$125,430</p>
-            </div>
-            <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
-              <h3 className="text-lg font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-                Pedidos Activos
-              </h3>
-              <p className="text-3xl font-bold text-primary-custom-600">48</p>
-            </div>
-            <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
-              <h3 className="text-lg font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-                Productos en Stock
-              </h3>
-              <p className="text-3xl font-bold text-primary-custom-600">1,234</p>
-            </div>
-          </div>
-
-          <div className="bg-white dark:bg-dark-bg-primary p-6 rounded-lg border border-border-primary dark:border-dark-border-primary">
-            <h3 className="text-lg font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-              Actividad Reciente
-            </h3>
-            <div className="space-y-3">
-              {[1, 2, 3, 4].map((i) => (
-                <div
-                  key={i}
-                  className="flex items-center justify-between py-3 border-b border-border-primary dark:border-dark-border-primary last:border-0"
-                >
-                  <div>
-                    <p className="font-medium text-content-primary dark:text-dark-content-primary">
-                      Nueva orden #{1000 + i}
-                    </p>
-                    <p className="text-sm text-content-secondary dark:text-content-secondary">
-                      Cliente: Usuario {i}
-                    </p>
-                  </div>
-                  <span className="text-sm text-content-secondary dark:text-content-secondary">
-                    Hace {i} hora{i > 1 ? 's' : ''}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};