siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/NavigationRailTypes/NavigationRailTypes.tsx

@@ -0,0 +1,378 @@
+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';
+
+/**
+ * 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,
+      onCollapsedChange,
+      onItemClick,
+      className,
+    },
+    ref
+  ) => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const handleCollapsedToggle = () => {
+      onCollapsedChange?.(!collapsed);
+    };
+
+    const handleItemClick = (index: number, item: NavigationRailItem) => {
+      item.onClick?.(new Event('click') as any);
+      onItemClick?.(index, item);
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={`
+          ${collapsed ? 'w-[80px]' : 'w-[215px]'}
+          bg-background-primary dark:bg-background-primary
+          dark:border-border-primary dark:border-l
+          ${collapsed ? 'border-r dark:border-border-primary border-border-primary' : 'border-l dark:border-border-primary border-border-primary'}
+          border-solid
+          h-[900px]
+          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">
+            <div className="w-full flex flex-col gap-2 items-start relative shrink-0">
+              <div className="w-full bg-background-primary dark:bg-background-primary border border-border-primary dark:border-border-primary border-solid flex items-center overflow-hidden px-3 py-1.5 relative rounded-lg shadow-sm shrink-0">
+                <div className="flex flex-1 gap-2 items-center min-h-px min-w-px relative shrink-0">
+                  <MagnifyingGlassIcon className="opacity-50 overflow-clip relative shrink-0 size-4 text-content-secondary dark:text-content-secondary" />
+                  <input
+                    type="text"
+                    placeholder="Buscar módulo"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="
+                      flex-1 bg-transparent
+                      font-['SiesaBT',sans-serif] font-normal text-sm leading-5
+                      text-content-primary dark:text-content-primary
+                      placeholder:text-content-tertiary dark:placeholder:text-content-tertiary
+                      outline-none
+                    "
+                  />
+                </div>
+              </div>
+            </div>
+            <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 && (
+            <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="Search"
+            />
+          )}
+
+          {/* Items container */}
+          <div
+            className={`
+              flex flex-col items-center min-h-px min-w-px
+              relative shrink-0
+              flex-1
+              overflow-y-auto
+              ${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) => (
+                    <div
+                      key={`demo-collapsed-${idx}`}
+                      className={`
+                        flex flex-col gap-1 items-center
+                        px-0.5 py-0 relative
+                      `}
+                    >
+                      <div className="flex flex-col items-center justify-center overflow-clip px-4 py-1 relative rounded-full shrink-0">
+                        <svg
+                          className="overflow-clip relative shrink-0 size-4 text-content-secondary dark:text-content-secondary"
+                          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>
+                      </div>
+                    </div>
+                  ))}
+
+                {!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) => (
+                  <button
+                    key={item.id}
+                    onClick={() => handleItemClick(idx, item)}
+                    disabled={item.disabled}
+                    className={`
+                      flex flex-col gap-1 items-center
+                      px-0.5 py-0
+                      relative
+                      rounded-full
+                      focus:outline-none focus:ring-4 focus:ring-offset-2
+                      focus:ring-primary-custom-400 focus:ring-offset-background-primary
+                      dark:focus:ring-offset-background-primary
+                      hover:opacity-80
+                      disabled:opacity-50 disabled:pointer-events-none
+                      transition-all duration-200
+                      ${item.active ? 'text-background-inverse-custom-primary dark:text-background-inverse-custom-primary' : 'text-content-secondary dark:text-content-secondary'}
+                    `}
+                    aria-label={item.ariaLabel || item.label}
+                  >
+                    <div className="flex flex-col items-center justify-center overflow-clip px-4 py-1 relative rounded-full shrink-0">
+                      {item.icon}
+                    </div>
+                    {(item.badge || item.badgeCount) && (
+                      <div
+                        className={`
+                          absolute top-0 right-0
+                          ${item.badgeCount
+                            ? 'w-5 h-5 text-xs font-bold flex items-center justify-center rounded-full'
+                            : 'w-2 h-2 rounded-full'
+                          }
+                          ${item.badgeColor === 'blue'
+                            ? 'bg-primary-custom-600 dark:bg-primary-custom-600 text-primary-inverse-content'
+                            : 'bg-red-600 dark:bg-red-600 text-white'
+                          }
+                        `}
+                      >
+                        {item.badgeCount ? (item.badgeCount > 99 ? '99+' : item.badgeCount) : ''}
+                      </div>
+                    )}
+                  </button>
+                ))}
+              </>
+            ) : (
+              // Items reales - expanded mode
+              <>
+                {items.map((item, idx) => (
+                  <div key={item.id} className="w-full">
+                    {/* TODO: Implementar items expandidos usando DropdownItemCollapsible */}
+                    <DropdownItemCollapsible
+                      label={item.label}
+                      icon={item.icon}
+                      showDivider={idx < items.length - 1}
+                      showHeading={false}
+                      disabled={item.disabled}
+                      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
+                ${collapsed ? 'items-start px-3' : 'w-full items-stretch'}
+              `}
+            >
+              {/* Botón Recientes */}
+              {showRecentButton && collapsed && (
+                <Button
+                  type="outline"
+                  size="base"
+                  iconOnly
+                  leftIcon={<ClockIcon className="size-4 text-primary-custom-600 dark:text-primary-custom-600" />}
+                  ariaLabel="Recientes"
+                />
+              )}
+
+              {showRecentButton && !collapsed && (
+                <Button
+                  type="outline"
+                  size="base"
+                  leftIcon={<ClockIcon className="size-4 text-primary-custom-600 dark:text-primary-custom-600" />}
+                  fullWidth
+                >
+                  Recientes
+                </Button>
+              )}
+
+              {/* Botón Colapsar/Expandir */}
+              {collapsed ? (
+                <Button
+                  type="plain"
+                  size="base"
+                  iconOnly
+                  leftIcon={<ChevronRightIcon className="overflow-clip relative shrink-0 size-4 text-background-inverse-custom-primary dark:text-background-inverse-custom-primary" />}
+                  onClick={handleCollapsedToggle}
+                  ariaLabel="Expandir"
+                />
+              ) : (
+                <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
+                >
+                  Colapsar
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+NavigationRailTypes.displayName = 'NavigationRailTypes';
+
+export default NavigationRailTypes;

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

@@ -0,0 +1,130 @@
+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;
+
+  /**
+   * 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;
+
+  /**
+   * Classes CSS adicionales
+   */
+  className?: 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;
+}