siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/NavigationRailTypes/NavigationRailTypes.tsx

@@ -1,363 +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';
-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

@@ -1,178 +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;
-
-  /**
-   * 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;
-}