siesa-ui-kit 1.0.2 → 1.0.3

package/src/components/NavigationRailTypes/NavigationRailTypes.tsx

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

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