siesa-ui-kit 1.0.3 → 1.0.4

package/src/components/NavigationRailTypes/NavigationRailTypes.tsx

@@ -0,0 +1,363 @@
+import React, { useState } from 'react';
+import type { NavigationRailTypesProps, NavigationRailItem } from './NavigationRailTypes.types';
+import { ChevronRightIcon, ChevronLeftIcon, ClockIcon, MagnifyingGlassIcon } from './icons';
+import { Button } from '../Button/Button';
+import { Divider } from '../Divider/Divider';
+import { DropdownItemCollapsible } from '../DropdownItemCollapsible/DropdownItemCollapsible';
+import { NavigationRailItem as NavigationRailItemComponent } from '../NavigationRailItem/NavigationRailItem';
+import { Input } from '../Input/Input';
+
+/**
+ * Componente NavigationRailTypes del sistema de diseño Siesa
+ *
+ * Barra de navegación lateral que permite dos modos visuales:
+ * - **Collapsed (Colapsado)**: 80px width, solo iconos con botón de búsqueda
+ * - **Expanded (Expandido)**: 215px width, con labels y búsqueda integrada
+ *
+ * **Características:**
+ * - Dos modos: collapsed e expanded (toggle con botón "Colapsar")
+ * - Soporta items con badges de notificación
+ * - Items colapsables para agrupar navegación relacionada
+ * - Botón "Recientes" en footer
+ * - Búsqueda integrada (solo en modo expanded)
+ * - Dark mode completo
+ * - Focus rings adaptativos
+ *
+ * **Especificaciones de Figma:**
+ * - Collapsed: 80px width, items con height 44px + gap 12px
+ * - Expanded: 215px width, items reutilizan DropdownItemCollapsible
+ * - Icono search: 16x16px, azul (#0e79fd)
+ * - Borde derecho: 1px solid #e4e4e7 (collapsed)
+ * - Borde izquierdo: 1px solid #e4e4e7 (expanded)
+ * - Height total: 900px (scroll si necesario)
+ *
+ * **Estructura:**
+ * 1. Header (Search en expanded) - altura variable
+ * 2. Menu & Destinations - flex 1 con items scrollables
+ * 3. Footer - Actions con divider y botones
+ *
+ * **Estados de Items:**
+ * - `default`: Text color content-primary
+ * - `hover`: Fondo hover-overlay, icon color content-custom-primary
+ * - `active`: Fondo custom-primary, text color custom-primary
+ * - `disabled`: Opacity 50%, sin interacción
+ *
+ * **Colores (Light Mode):**
+ * - Background: background-primary (#ffffff)
+ * - Borders: border-primary (#e4e4e7)
+ * - Text: content-primary (#18181b)
+ * - Icons: content-secondary (#a1a1aa)
+ * - Icon hover: content-custom-primary (#0e79fd)
+ * - Divider: border-primary (#e4e4e7)
+ * - Search input: bg-primary, border-primary, placeholder: content-tertiary
+ *
+ * **Colores (Dark Mode):**
+ * - Background: background-primary/dark (#09090b)
+ * - Borders: border-primary/dark (#3f3f46)
+ * - Text: content-primary/dark (#fafafa)
+ * - Icons: content-secondary/dark (#a1a1aa)
+ * - Icon hover: content-custom-primary/dark (#bfe2fe)
+ * - Divider: border-primary/dark (#3f3f46)
+ *
+ * **Tipografía:**
+ * - Items labels: Paragraph/Small (14px, Regular, line-height 20px)
+ * - Heading: Paragraph/Tiny (12px, Regular, line-height 16px) - si aplica
+ * - Button labels: Label Small (14px, Bold)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado (gap-3, px-4, py-2, etc)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-36219
+ *
+ * @example
+ * ```tsx
+ * const navItems: NavigationRailItem[] = [
+ *   {
+ *     id: 'home',
+ *     label: 'Home',
+ *     icon: <HomeIcon />,
+ *     active: true,
+ *     onClick: () => navigate('/home'),
+ *   },
+ *   {
+ *     id: 'users',
+ *     label: 'Users',
+ *     icon: <UsersIcon />,
+ *     badge: true,
+ *     onClick: () => navigate('/users'),
+ *   },
+ * ];
+ *
+ * const [isCollapsed, setIsCollapsed] = useState(true);
+ *
+ * <NavigationRailTypes
+ *   collapsed={isCollapsed}
+ *   items={navItems}
+ *   showRecentButton={true}
+ *   onCollapsedChange={setIsCollapsed}
+ *   onItemClick={(index, item) => console.log('Selected:', item.id)}
+ * />
+ * ```
+ *
+ * @see NavigationRailTypes.types.ts - Props e interfaces
+ */
+export const NavigationRailTypes = React.forwardRef<
+  HTMLDivElement,
+  NavigationRailTypesProps
+>(
+  (
+    {
+      collapsed = true,
+      items = [],
+      showRecentButton = true,
+      showSearchButton = true,
+      onCollapsedChange,
+      onItemClick,
+      onItemHover,
+      className,
+      labels = {},
+    },
+    ref
+  ) => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Labels con valores por defecto
+    const finalLabels = {
+      searchButton: labels.searchButton ?? 'Search',
+      searchPlaceholder: labels.searchPlaceholder ?? 'Buscar módulo',
+      recentButton: labels.recentButton ?? 'Recientes',
+      collapseButton: labels.collapseButton ?? 'Colapsar',
+      expandButton: labels.expandButton ?? 'Expandir',
+    };
+
+    const handleCollapsedToggle = () => {
+      onCollapsedChange?.(!collapsed);
+    };
+
+    const handleItemClick = (index: number, item: NavigationRailItem) => {
+      item.onClick?.(new Event('click') as any);
+      onItemClick?.(index, item);
+    };
+
+    const handleItemHover = (index: number, item: NavigationRailItem) => {
+      onItemHover?.(index, item);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          ${collapsed ? 'w-[80px]' : 'w-[215px]'}
+          h-full
+          bg-background-primary dark:bg-background-primary
+          ${collapsed ? 'border-r border-border-primary dark:border-border-primary' : 'border-l border-r border-border-primary dark:border-border-primary'}
+          border-solid
+          flex flex-col
+          items-center
+          relative
+          transition-all duration-300
+          ${className || ''}
+        `}
+      >
+        {/* Sección de búsqueda - solo en modo expandido */}
+        {!collapsed && (
+          <div className="w-full flex flex-col gap-3 px-3 py-3 relative shrink-0">
+            <Input
+              placeholder={finalLabels.searchPlaceholder}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              leftIcon={<MagnifyingGlassIcon className="size-4 text-content-secondary dark:text-content-secondary" />}
+              fullWidth
+            />
+            <Divider className="w-full" />
+          </div>
+        )}
+
+        {/* Main content - Menu & Destinations */}
+        <div
+          className={`
+            flex-1 flex flex-col
+            items-center min-h-px min-w-px
+            relative shrink-0
+            px-0
+            ${collapsed
+              ? 'gap-7 py-2 w-[80px]'
+              : 'gap-0.5 p-3 w-full bg-background-primary dark:bg-background-primary border-l dark:border-border-primary border-border-primary border-solid'
+            }
+          `}
+        >
+          {/* Botón Search en collapsed */}
+          {collapsed && showSearchButton && (
+            <Button
+              type="default"
+              size="xl"
+              iconOnly
+              leftIcon={<MagnifyingGlassIcon className="overflow-clip relative shrink-0 size-4 text-primary-inverse-content dark:text-primary-inverse-content" />}
+              ariaLabel={finalLabels.searchButton}
+            />
+          )}
+
+          {/* Items container */}
+          <div
+            className={`
+              flex flex-col items-center min-h-px min-w-px
+              relative shrink-0
+              flex-1
+              overflow-hidden
+              ${collapsed
+                ? 'gap-3 leading-none w-[80px]'
+                : 'gap-0.5 p-3 w-full'
+              }
+            `}
+          >
+            {items.length === 0 ? (
+              // Items de demo/ejemplo
+              <>
+                {collapsed &&
+                  Array.from({ length: 4 }).map((_, idx) => (
+                    <NavigationRailItemComponent
+                      key={`demo-collapsed-${idx}`}
+                      id={`demo-collapsed-${idx}`}
+                      label="Item"
+                      icon={
+                        <svg
+                          className="size-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M3 12a9 9 0 1118 0 9 9 0 01-18 0z"
+                          />
+                        </svg>
+                      }
+                      showLabelText={false}
+                    />
+                  ))}
+
+                {!collapsed &&
+                  Array.from({ length: 6 }).map((_, idx) => (
+                    <DropdownItemCollapsible
+                      key={`demo-expanded-${idx}`}
+                      label="Item"
+                      showDivider={false}
+                      showHeading={false}
+                    />
+                  ))}
+              </>
+            ) : collapsed ? (
+              // Items reales - collapsed mode
+              <>
+                {items.map((item, idx) => (
+                  <NavigationRailItemComponent
+                    key={item.id}
+                    id={item.id}
+                    label={item.label}
+                    icon={item.icon}
+                    selected={item.active}
+                    disabled={item.disabled}
+                    badge={item.badge}
+                    badgeCount={item.badgeCount}
+                    ariaLabel={item.ariaLabel}
+                    showLabelText={false}
+                    onClick={() => handleItemClick(idx, item)}
+                    onMouseEnter={() => handleItemHover(idx, item)}
+                  />
+                ))}
+              </>
+            ) : (
+              // Items reales - expanded mode
+              <>
+                {items.map((item, idx) => {
+                  const isCollapsible = (item as any).children && (item as any).children.length > 0;
+                  return (
+                    <div key={item.id} className="w-full">
+                      <DropdownItemCollapsible
+                        label={item.label}
+                        icon={item.icon}
+                        selected={item.active}
+                        disabled={item.disabled}
+                        badge={item.badge}
+                        badgeCount={item.badgeCount}
+                        badgeColor={item.badgeColor as any}
+                        showDivider={false}
+                        showHeading={false}
+                        isCollapsible={isCollapsible}
+                        defaultOpen={(item as any).defaultOpen}
+                        children={isCollapsible ? (item as any).children : undefined}
+                        onClick={() => handleItemClick(idx, item)}
+                      />
+                    </div>
+                  );
+                })}
+              </>
+            )}
+          </div>
+
+          {/* Footer - Actions */}
+          <div className={`w-full flex flex-col gap-3 items-center relative shrink-0 ${!collapsed ? 'px-3' : ''}`}>
+            <Divider className="w-full" />
+
+            <div
+              className={`
+                flex flex-col gap-3 relative shrink-0 w-full
+                ${collapsed ? 'items-stretch px-3' : 'items-stretch'}
+              `}
+            >
+              {/* Botón Recientes */}
+              {showRecentButton && collapsed && (
+                <Button
+                  type="outline"
+                  size="base"
+                  fullWidth
+                  leftIcon={<ClockIcon className="size-4 text-primary-custom-600 dark:text-primary-custom-600" />}
+                  ariaLabel={finalLabels.recentButton}
+                />
+              )}
+
+              {showRecentButton && !collapsed && (
+                <Button
+                  type="outline"
+                  size="base"
+                  leftIcon={<ClockIcon className="size-4 text-primary-custom-600 dark:text-primary-custom-600" />}
+                  fullWidth
+                >
+                  {finalLabels.recentButton}
+                </Button>
+              )}
+
+              {/* Botón Colapsar/Expandir */}
+              {collapsed ? (
+                <Button
+                  type="plain"
+                  size="base"
+                  fullWidth
+                  leftIcon={<ChevronRightIcon className="overflow-clip relative shrink-0 size-4 text-background-inverse-custom-primary dark:text-background-inverse-custom-primary" />}
+                  onClick={handleCollapsedToggle}
+                  ariaLabel={finalLabels.expandButton}
+                />
+              ) : (
+                <Button
+                  type="outline"
+                  size="base"
+                  leftIcon={<ChevronLeftIcon className="overflow-clip relative shrink-0 size-4 text-content-custom-primary dark:text-content-custom-primary" />}
+                  onClick={handleCollapsedToggle}
+                  fullWidth
+                >
+                  {finalLabels.collapseButton}
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+NavigationRailTypes.displayName = 'NavigationRailTypes';
+
+export default NavigationRailTypes;

package/src/components/NavigationRailTypes/NavigationRailTypes.types.ts

@@ -0,0 +1,178 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Props del componente NavigationRailTypes
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-36219
+ */
+export interface NavigationRailTypesProps {
+  /**
+   * Determina si el rail está colapsado (iconos solo) o expandido (con labels)
+   * - `true`: Modo colapsado (80px width, solo iconos)
+   * - `false`: Modo expandido (215px width, con labels)
+   * @default true
+   */
+  collapsed?: boolean;
+
+  /**
+   * Items de navegación a mostrar en la barra
+   * Se muestran en modo comprimido (iconos) o expandido (con descripción)
+   */
+  items?: NavigationRailItem[];
+
+  /**
+   * Si mostrar el botón "Recientes" en el footer
+   * @default true
+   */
+  showRecentButton?: boolean;
+
+  /**
+   * Si mostrar el botón de búsqueda en modo collapsed
+   * @default true
+   */
+  showSearchButton?: boolean;
+
+  /**
+   * Callback cuando el estado collapsed cambia
+   * Útil para sincronizar con estado global
+   */
+  onCollapsedChange?: (collapsed: boolean) => void;
+
+  /**
+   * Callback cuando se clickea un item
+   * @param index - índice del item clickeado
+   * @param item - datos del item
+   */
+  onItemClick?: (index: number, item: NavigationRailItem) => void;
+
+  /**
+   * Callback cuando se hace hover sobre un item
+   * @param index - índice del item con hover
+   * @param item - datos del item
+   */
+  onItemHover?: (index: number, item: NavigationRailItem) => void;
+
+  /**
+   * Classes CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Labels de internacionalización
+   */
+  labels?: {
+    /**
+     * Label del botón de búsqueda (collapsed mode)
+     * @default 'Search'
+     */
+    searchButton?: string;
+
+    /**
+     * Placeholder del input de búsqueda (expanded mode)
+     * @default 'Buscar módulo'
+     */
+    searchPlaceholder?: string;
+
+    /**
+     * Label del botón "Recientes"
+     * @default 'Recientes'
+     */
+    recentButton?: string;
+
+    /**
+     * Label del botón "Colapsar"
+     * @default 'Colapsar'
+     */
+    collapseButton?: string;
+
+    /**
+     * Label del botón "Expandir"
+     * @default 'Expandir'
+     */
+    expandButton?: string;
+  };
+}
+
+/**
+ * Props para cada item de navegación en el rail
+ */
+export interface NavigationRailItem {
+  /**
+   * Identificador único del item
+   */
+  id: string;
+
+  /**
+   * Etiqueta del item (visible en modo expandido)
+   */
+  label: string;
+
+  /**
+   * Icono a mostrar (16x16px recomendado)
+   */
+  icon: ReactNode;
+
+  /**
+   * Si el item está activo/seleccionado
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Si el item está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Callback cuando se hace click en el item
+   */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * URL para navigation (si se usa como link)
+   */
+  href?: string;
+
+  /**
+   * Atributos ARIA para accesibilidad
+   */
+  ariaLabel?: string;
+
+  /**
+   * Badge de notificación (dot rojo pequeño)
+   */
+  badge?: boolean;
+
+  /**
+   * Contador de notificaciones (99+ para >99)
+   */
+  badgeCount?: number;
+
+  /**
+   * Color del badge
+   * @default 'red'
+   */
+  badgeColor?: 'red' | 'blue' | 'green' | 'yellow' | 'orange';
+}
+
+/**
+ * Props para el item colapsable (reutiliza DropdownItemCollapsible)
+ * Solo se usa en modo expandido
+ */
+export interface NavigationRailCollapsibleItem extends NavigationRailItem {
+  /**
+   * Items anidados (solo en modo expandido)
+   */
+  children?: NavigationRailItem[];
+
+  /**
+   * Si el item está expandido inicialmente
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Si el item es colapsable
+   */
+  isCollapsible?: boolean;
+}