siesa-ui-kit 1.0.0 → 1.0.2

package/src/views/ListView/ListView.tsx

@@ -0,0 +1,570 @@
+import React, { useState } from 'react';
+import type { ListViewProps, ListViewSortDirection } from './ListView.types';
+import { Badge } from '../../components/Badge/Badge';
+import { Avatar } from '../../components/Avatar/Avatar';
+import { Input } from '../../components/Input/Input';
+import { NavigationRail } from '../../components/NavigationRail/NavigationRail';
+import {
+  HomeIcon,
+  GlobeAltIcon,
+  DocumentTextIcon,
+  CloudIcon,
+  SquaresPlusIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  ListBulletIcon,
+  FunnelIcon,
+  BellIcon,
+  ChevronDownIcon,
+  ArrowLongLeftIcon,
+  ArrowLongRightIcon,
+  EnvelopeIcon,
+} from './icons';
+
+/**
+ * ListView - Vista de lista del sistema de diseño Siesa
+ *
+ * Vista completa que incluye:
+ * - Navigation Rail lateral con FAB
+ * - Navbar superior con logo, título, notificaciones y dropdown de usuario
+ * - Barra de filtros rápidos con badges
+ * - Tabla de datos con cabecera, cuerpo y paginación
+ * - Botones de acción (Crear, Auditoría, Filtrar)
+ * - Buscador integrado
+ * - Dropdown de opciones de vista
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels y keyboard navigation
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ *
+ * @example
+ * ```tsx
+ * <ListView
+ *   title="List View"
+ *   tableTitle="Usuarios"
+ *   columns={columns}
+ *   data={users}
+ *   userDropdown={{
+ *     avatar: '/avatar.jpg',
+ *     name: 'John Doe',
+ *     role: 'Administrador',
+ *   }}
+ *   pagination={{
+ *     currentPage: 1,
+ *     totalPages: 10,
+ *     onPageChange: (page) => console.log(page),
+ *   }}
+ * />
+ * ```
+ */
+export const ListView = <T extends Record<string, any>>({
+  title = 'List View',
+  navbarTitle = 'List View',
+  tableTitle = 'Usuarios',
+  columns,
+  data,
+  navigationItems,
+  quickFilters,
+  actionButtons,
+  userDropdown,
+  notifications,
+  // environmentBadge - Reserved for future use
+  showFab = true,
+  fabIcon,
+  onFabClick,
+  onSearch,
+  searchPlaceholder = 'Jane Doe',
+  onSort,
+  sortColumn: externalSortColumn,
+  sortDirection: externalSortDirection,
+  pagination,
+  loading = false,
+  loadingRows = 5,
+  emptyMessage = 'No hay datos disponibles',
+  className = '',
+  selectedNavId,
+  onNavSelect,
+  // onCartClick - Reserved for future use
+  onNotificationsClick,
+  viewOptions,
+  selectedViewOption,
+  onViewOptionChange,
+}: ListViewProps<T>) => {
+  // ===== ESTADO INTERNO =====
+  const [internalSortColumn, setInternalSortColumn] = useState<keyof T | string | null>(null);
+  const [internalSortDirection, setInternalSortDirection] = useState<ListViewSortDirection>(null);
+  const [searchValue, setSearchValue] = useState('');
+  const [showViewDropdown, setShowViewDropdown] = useState(false);
+
+  // Usar sort externo si está controlado
+  const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;
+  const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;
+
+  // ===== NAVIGATION ITEMS DEFAULT =====
+  const defaultNavigationItems = navigationItems || [
+    { id: 'home', icon: <HomeIcon className="w-4 h-4" />, label: 'Inicio', selected: true },
+    { id: 'option1', icon: <GlobeAltIcon className="w-4 h-4" />, label: 'Opción 1' },
+    { id: 'option2', icon: <DocumentTextIcon className="w-4 h-4" />, label: 'Opción 2' },
+    { id: 'option3', icon: <CloudIcon className="w-4 h-4" />, label: 'Opción 3' },
+    { id: 'more', icon: <SquaresPlusIcon className="w-4 h-4" />, label: 'Ver más...' },
+  ];
+
+  // ===== QUICK FILTERS DEFAULT =====
+  const defaultQuickFilters = quickFilters || [
+    { id: 'paid', label: 'Facturas Pagadas', color: 'lime' as const, icon: undefined },
+    { id: 'pending', label: 'facturas Pendientes por Pago', color: 'rose' as const, icon: undefined },
+    { id: 'orders', label: 'Ordenes de Compra', color: 'sky' as const, icon: undefined },
+  ];
+
+  // ===== ACTION BUTTONS DEFAULT =====
+  const defaultActionButtons = actionButtons || [
+    { id: 'create', label: 'Crear', icon: <PlusIcon className="w-4 h-4" />, variant: 'primary' as const, onClick: undefined },
+    { id: 'audit', label: 'Auditoria', icon: <ListBulletIcon className="w-4 h-4" />, variant: 'primary' as const, onClick: undefined },
+    { id: 'filter', label: 'Filtrar', icon: <FunnelIcon className="w-4 h-4" />, variant: 'primary' as const, onClick: undefined },
+  ];
+
+  // ===== HANDLERS =====
+  const handleSort = (columnAccessor: keyof T | string) => {
+    let newDirection: ListViewSortDirection = 'asc';
+
+    if (sortColumn === columnAccessor) {
+      if (sortDirection === 'asc') {
+        newDirection = 'desc';
+      } else if (sortDirection === 'desc') {
+        newDirection = null;
+      }
+    }
+
+    if (onSort) {
+      onSort(columnAccessor, newDirection);
+    } else {
+      setInternalSortColumn(newDirection ? columnAccessor : null);
+      setInternalSortDirection(newDirection);
+    }
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+    onSearch?.(e.target.value);
+  };
+
+  // ===== OBTENER VALOR DE CELDA =====
+  const getCellValue = (row: T, accessor: keyof T | ((row: T) => any)) => {
+    if (typeof accessor === 'function') {
+      return accessor(row);
+    }
+    return row[accessor];
+  };
+
+  // ===== GENERAR PÁGINAS DE PAGINACIÓN =====
+  const getPageNumbers = () => {
+    if (!pagination) return [];
+    const { currentPage, totalPages } = pagination;
+    const pages: (number | string)[] = [];
+    const maxVisible = 5;
+
+    if (totalPages <= maxVisible) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      if (currentPage <= 3) {
+        pages.push(2, 3);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push('...');
+        pages.push(totalPages - 2, totalPages - 1);
+      } else {
+        pages.push('...');
+        pages.push(currentPage);
+        pages.push('...');
+      }
+      if (totalPages > 1) {
+        pages.push(totalPages);
+      }
+    }
+    return pages;
+  };
+
+  return (
+    <div
+      className={[
+        'bg-bg-tertiary',
+        'dark:bg-dark-bg-tertiary',
+        'flex',
+        'flex-col',
+        'w-full',
+        'h-full',
+        'min-h-screen',
+        className,
+      ].join(' ')}
+    >
+      {/* ===== CONTENEDOR PRINCIPAL ===== */}
+      <div className="flex flex-col grow overflow-hidden w-full">
+        <div className="flex grow overflow-hidden w-full">
+          {/* ===== NAVIGATION RAIL ===== */}
+          <NavigationRail
+            items={defaultNavigationItems.map((item) => ({
+              ...item,
+              selected: selectedNavId ? item.id === selectedNavId : item.selected,
+            }))}
+            alignment="center"
+            showFab={showFab}
+            fabIcon={fabIcon || <MagnifyingGlassIcon className="w-4 h-4" />}
+            onFabClick={onFabClick}
+            fabAriaLabel="Buscar"
+            selectedId={selectedNavId}
+            onItemSelect={onNavSelect}
+          />
+
+          {/* ===== CONTENIDO PRINCIPAL ===== */}
+          <div className="flex flex-col grow overflow-hidden">
+            {/* ===== NAVBAR ===== */}
+            <nav className="flex items-center gap-8 px-4 py-1 w-full bg-bg-primary dark:bg-dark-bg-primary">
+              {/* Leading Section */}
+              <div className="flex items-center gap-4">
+                <img
+                  src="/.Siesa Logo.png"
+                  alt="Siesa"
+                  className="w-[120px] h-[30px] object-contain"
+                />
+                <div className="w-px h-6 bg-border-primary dark:bg-dark-border-primary" />
+                <h1 className="font-bold text-xl leading-7 tracking-[-0.5px] text-content-primary dark:text-dark-content-primary whitespace-nowrap">
+                  {navbarTitle}
+                </h1>
+              </div>
+
+              {/* Trailing Section */}
+              <div className="flex items-center gap-4 grow justify-end">
+                {/* Notification Bell */}
+                <div className="relative">
+                  <button
+                    className="flex flex-col items-center justify-center p-1 rounded-md text-content-primary dark:text-dark-content-primary hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors"
+                    onClick={onNotificationsClick}
+                    aria-label="Notificaciones"
+                  >
+                    <BellIcon className="w-4 h-4" />
+                  </button>
+                  {notifications?.bell && (
+                    <span className="absolute -top-0.5 left-[calc(50%+4px)] w-[13px] h-[13px] rounded-full bg-red-700 flex items-center justify-center text-[10px] font-bold text-white">
+                      {notifications.cart && notifications.cart > 99 ? '+99' : notifications.cart}
+                    </span>
+                  )}
+                </div>
+
+                <div className="w-px h-6 bg-border-primary dark:bg-dark-border-primary" />
+
+                {/* User Dropdown */}
+                {userDropdown && (
+                  <button
+                    className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors"
+                    onClick={userDropdown.onMenuClick}
+                    aria-label="Menú de usuario"
+                  >
+                    <Avatar
+                      src={userDropdown.avatar}
+                      alt={userDropdown.name}
+                      size="10"
+                      type="rounded"
+                    />
+                    <div className="flex flex-col items-start gap-0.5 w-[123px]">
+                      <span className="text-sm leading-5 text-content-primary dark:text-dark-content-primary whitespace-nowrap">
+                        {userDropdown.name}
+                      </span>
+                      {(userDropdown.email || userDropdown.role) && (
+                        <span className="text-xs leading-4 text-content-secondary dark:text-content-secondary whitespace-nowrap overflow-hidden text-ellipsis w-full">
+                          {userDropdown.role || userDropdown.email}
+                        </span>
+                      )}
+                    </div>
+                    <ChevronDownIcon className="w-5 h-5 text-content-secondary dark:text-content-secondary" />
+                  </button>
+                )}
+              </div>
+            </nav>
+
+            {/* ===== QUICK FILTERS BAR ===== */}
+            <div className="flex items-center gap-2 px-0 py-2 w-full">
+              {defaultQuickFilters.map((filter) => (
+                <Badge
+                  key={filter.id}
+                  color={filter.color}
+                  label={filter.label}
+                  leftIcon={filter.icon}
+                />
+              ))}
+            </div>
+
+            {/* ===== BODY ===== */}
+            <div className="flex grow overflow-hidden">
+              <div className="flex flex-col gap-4 grow bg-bg-primary dark:bg-dark-bg-primary p-4 rounded-tl-3xl overflow-hidden">
+                {/* Header Row */}
+                <div className="flex items-center justify-between w-full">
+                  <h2 className="font-bold text-xl leading-7 tracking-[-0.5px] text-content-primary dark:text-dark-content-primary">
+                    {title}
+                  </h2>
+
+                  {/* Action Buttons */}
+                  <div className="flex items-center gap-2">
+                    {defaultActionButtons.map((btn) => (
+                      <button
+                        key={btn.id}
+                        onClick={btn.onClick}
+                        className={[
+                          'flex',
+                          'items-center',
+                          'justify-center',
+                          'gap-2',
+                          'px-2.5',
+                          'py-1.5',
+                          'rounded-md',
+                          'font-bold',
+                          'text-sm',
+                          'leading-5',
+                          'transition-all',
+                          'duration-150',
+                          btn.variant === 'primary'
+                            ? [
+                                'bg-primary-custom-600',
+                                'text-primary-inverse-content',
+                                'border',
+                                'border-primary-custom-600',
+                                'shadow-button-inset',
+                                'hover:bg-primary-custom-500',
+                                'dark:bg-dark-bg-inverse',
+                                'dark:text-dark-content-inverse',
+                                'dark:border-dark-bg-inverse',
+                              ].join(' ')
+                            : [
+                                'bg-bg-primary',
+                                'text-content-primary',
+                                'border',
+                                'border-border-primary',
+                                'hover:bg-bg-secondary',
+                                'dark:bg-dark-bg-primary',
+                                'dark:text-dark-content-primary',
+                                'dark:border-dark-border-primary',
+                              ].join(' '),
+                        ].join(' ')}
+                      >
+                        {btn.icon}
+                        <span>{btn.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* ===== TABLE ===== */}
+                <div className="flex flex-col gap-4 grow bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-xl p-8 overflow-hidden">
+                  {/* Table Header */}
+                  <div className="flex items-center gap-4 w-full">
+                    <h3 className="grow font-bold text-base leading-6 text-content-primary dark:text-dark-content-primary overflow-hidden text-ellipsis whitespace-nowrap">
+                      {tableTitle}
+                    </h3>
+                    <Input
+                      placeholder={searchPlaceholder}
+                      leftIcon={<EnvelopeIcon className="w-4 h-4" />}
+                      value={searchValue}
+                      onChange={handleSearch}
+                      className="w-[200px]"
+                    />
+                    {/* View Dropdown */}
+                    <div className="relative">
+                      <button
+                        onClick={() => setShowViewDropdown(!showViewDropdown)}
+                        className="flex items-center gap-3 px-3 py-2 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg shadow-sm hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors"
+                      >
+                        <span className="font-bold text-sm text-content-secondary dark:text-content-secondary">
+                          Ver
+                        </span>
+                        <ChevronDownIcon className="w-5 h-5 text-content-secondary dark:text-content-secondary" />
+                      </button>
+                      {showViewDropdown && viewOptions && (
+                        <div className="absolute top-full right-0 mt-1 bg-bg-primary dark:bg-dark-bg-primary border border-border-primary dark:border-dark-border-primary rounded-lg shadow-lg z-10">
+                          {viewOptions.map((option) => (
+                            <button
+                              key={option.id}
+                              onClick={() => {
+                                onViewOptionChange?.(option.id);
+                                setShowViewDropdown(false);
+                              }}
+                              className={[
+                                'block',
+                                'w-full',
+                                'px-4',
+                                'py-2',
+                                'text-left',
+                                'text-sm',
+                                'hover:bg-bg-secondary',
+                                'dark:hover:bg-dark-bg-secondary',
+                                selectedViewOption === option.id
+                                  ? 'bg-primary-custom-100 dark:bg-primary-custom-600/20'
+                                  : '',
+                              ].join(' ')}
+                            >
+                              {option.label}
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Table Content */}
+                  <div className="flex grow overflow-auto w-full">
+                    {columns.map((column, colIndex) => {
+                      const accessor =
+                        typeof column.accessor === 'function' ? `column_${colIndex}` : String(column.accessor);
+
+                      return (
+                        <div key={accessor} className="flex flex-col flex-1 min-w-0">
+                          {/* Column Header */}
+                          <div
+                            className={[
+                              'flex',
+                              'items-center',
+                              'gap-3',
+                              'px-6',
+                              'py-2.5',
+                              'border-b',
+                              'border-border-primary',
+                              'dark:border-dark-border-primary',
+                              column.sortable ? 'cursor-pointer hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary' : '',
+                            ].join(' ')}
+                            onClick={column.sortable ? () => handleSort(accessor) : undefined}
+                            style={{ width: column.width }}
+                          >
+                            <span className="font-bold text-sm text-content-secondary dark:text-content-secondary overflow-hidden text-ellipsis whitespace-nowrap flex-1">
+                              {column.header}
+                            </span>
+                          </div>
+
+                          {/* Loading Skeleton */}
+                          {loading &&
+                            Array.from({ length: loadingRows }).map((_, rowIndex) => (
+                              <div
+                                key={`loading-${rowIndex}`}
+                                className="flex flex-col px-6 py-4 min-h-[56px] border-b border-border-secondary dark:border-dark-border-primary"
+                                style={{ width: column.width }}
+                              >
+                                <div className="h-4 bg-bg-secondary dark:bg-dark-border-primary rounded animate-pulse" />
+                              </div>
+                            ))}
+
+                          {/* Data Rows */}
+                          {!loading &&
+                            data.map((row, rowIndex) => {
+                              const value = getCellValue(row, column.accessor);
+                              const content = column.render ? column.render(value, row, rowIndex) : value;
+
+                              return (
+                                <div
+                                  key={rowIndex}
+                                  className="flex flex-col justify-center px-6 py-4 min-h-[56px] border-b border-border-secondary dark:border-dark-border-primary"
+                                  style={{ width: column.width }}
+                                >
+                                  <span className="text-sm text-content-primary dark:text-dark-content-primary overflow-hidden text-ellipsis">
+                                    {content}
+                                  </span>
+                                </div>
+                              );
+                            })}
+
+                          {/* Empty State */}
+                          {!loading && data.length === 0 && colIndex === 0 && (
+                            <div className="flex items-center justify-center px-6 py-12 text-sm text-content-secondary dark:text-content-secondary">
+                              {emptyMessage}
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  {/* ===== PAGINATION ===== */}
+                  {pagination && (
+                    <div className="flex items-center justify-between w-full h-9">
+                      {/* Previous Button */}
+                      <button
+                        onClick={() => pagination.currentPage > 1 && pagination.onPageChange(pagination.currentPage - 1)}
+                        disabled={pagination.currentPage === 1}
+                        className="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600 hover:bg-primary-custom-100 dark:hover:bg-primary-custom-600/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                      >
+                        <ArrowLongLeftIcon className="w-4 h-4" />
+                        <span>{pagination.previousLabel || 'Atrás'}</span>
+                      </button>
+
+                      {/* Page Numbers */}
+                      <div className="flex items-center gap-0">
+                        {getPageNumbers().map((page, index) => {
+                          if (page === '...') {
+                            return (
+                              <div
+                                key={`ellipsis-${index}`}
+                                className="flex items-center justify-center px-3 py-2 text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600"
+                              >
+                                {page}
+                              </div>
+                            );
+                          }
+
+                          const isActive = page === pagination.currentPage;
+
+                          return (
+                            <button
+                              key={page}
+                              onClick={() => pagination.onPageChange(page as number)}
+                              className={[
+                                'flex',
+                                'items-center',
+                                'justify-center',
+                                'px-3',
+                                'py-2',
+                                'rounded-md',
+                                'text-sm',
+                                'font-bold',
+                                'text-primary-custom-600',
+                                'dark:text-primary-custom-600',
+                                'transition-colors',
+                                isActive
+                                  ? 'bg-primary-custom-100 dark:bg-primary-custom-600/20'
+                                  : 'hover:bg-primary-custom-50 dark:hover:bg-primary-custom-600/10',
+                              ].join(' ')}
+                            >
+                              {page}
+                            </button>
+                          );
+                        })}
+                      </div>
+
+                      {/* Next Button */}
+                      <button
+                        onClick={() =>
+                          pagination.currentPage < pagination.totalPages &&
+                          pagination.onPageChange(pagination.currentPage + 1)
+                        }
+                        disabled={pagination.currentPage === pagination.totalPages}
+                        className="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600 hover:bg-primary-custom-100 dark:hover:bg-primary-custom-600/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                      >
+                        <span>{pagination.nextLabel || 'Siguiente'}</span>
+                        <ArrowLongRightIcon className="w-4 h-4" />
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};