siesa-ui-kit 1.0.2 → 1.0.4

package/src/views/ListView/ListView.types.ts

@@ -1,211 +1,211 @@
-import type { ReactNode, ReactElement } from 'react';
-import type { BadgeColor } from '../../components/Badge/Badge.types';
-
-/**
- * Interfaz para los items de navegación (Navigation Rail)
- */
-export interface ListViewNavigationItem {
-  /** ID único del item */
-  id: string;
-  /** Icono del item */
-  icon: ReactNode;
-  /** Label del item */
-  label: string;
-  /** Si el item está seleccionado */
-  selected?: boolean;
-  /** Si el item está deshabilitado */
-  disabled?: boolean;
-  /** Badge de notificación */
-  badge?: boolean;
-  /** Contador de badge */
-  badgeCount?: number;
-  /** Handler de click */
-  onClick?: () => void;
-}
-
-/**
- * Interfaz para los filtros rápidos (badges en la barra de navegación)
- */
-export interface ListViewQuickFilter {
-  /** ID único del filtro */
-  id: string;
-  /** Label del filtro */
-  label: string;
-  /** Color del badge */
-  color: BadgeColor;
-  /** Icono del filtro */
-  icon?: ReactElement;
-  /** Si el filtro está activo */
-  active?: boolean;
-  /** Handler de click */
-  onClick?: () => void;
-}
-
-/**
- * Interfaz para las columnas de la tabla
- */
-export interface ListViewColumn<T = any> {
-  /** Título del header */
-  header: string;
-  /** Key del objeto para acceder al valor */
-  accessor: keyof T | ((row: T) => any);
-  /** Si es sortable */
-  sortable?: boolean;
-  /** Render custom */
-  render?: (value: any, row: T, index: number) => ReactNode;
-  /** Alineación */
-  align?: 'left' | 'center' | 'right';
-  /** Ancho */
-  width?: string;
-}
-
-/**
- * Interfaz para los datos del dropdown de usuario
- */
-export interface ListViewUserDropdown {
-  /** URL del avatar */
-  avatar: string;
-  /** Nombre del usuario */
-  name: string;
-  /** Email o rol del usuario */
-  email?: string;
-  /** Rol del usuario */
-  role?: string;
-  /** Handler del click en menú */
-  onMenuClick?: () => void;
-}
-
-/**
- * Interfaz para las notificaciones
- */
-export interface ListViewNotifications {
-  /** Contador del carrito */
-  cart?: number;
-  /** Si tiene notificaciones de campana */
-  bell?: boolean;
-}
-
-/**
- * Interfaz para los botones de acción
- */
-export interface ListViewActionButton {
-  /** ID del botón */
-  id: string;
-  /** Label del botón */
-  label: string;
-  /** Icono del botón */
-  icon?: ReactNode;
-  /** Handler del click */
-  onClick?: () => void;
-  /** Variante del botón */
-  variant?: 'primary' | 'secondary';
-}
-
-/**
- * Dirección de ordenamiento
- */
-export type ListViewSortDirection = 'asc' | 'desc' | null;
-
-/**
- * Props del componente ListView
- */
-export interface ListViewProps<T = any> {
-  /** Título de la vista */
-  title?: string;
-
-  /** Título del navbar */
-  navbarTitle?: string;
-
-  /** Título de la tabla */
-  tableTitle?: string;
-
-  /** Columnas de la tabla */
-  columns: ListViewColumn<T>[];
-
-  /** Datos de la tabla */
-  data: T[];
-
-  /** Items de navegación lateral */
-  navigationItems?: ListViewNavigationItem[];
-
-  /** Filtros rápidos */
-  quickFilters?: ListViewQuickFilter[];
-
-  /** Botones de acción */
-  actionButtons?: ListViewActionButton[];
-
-  /** Dropdown del usuario */
-  userDropdown?: ListViewUserDropdown;
-
-  /** Notificaciones */
-  notifications?: ListViewNotifications;
-
-  /** Badge de ambiente */
-  environmentBadge?: string;
-
-  /** Si mostrar el FAB en navigation rail */
-  showFab?: boolean;
-
-  /** Icono del FAB */
-  fabIcon?: ReactNode;
-
-  /** Handler del FAB */
-  onFabClick?: () => void;
-
-  /** Handler de búsqueda */
-  onSearch?: (query: string) => void;
-
-  /** Placeholder del buscador */
-  searchPlaceholder?: string;
-
-  /** Handler de ordenamiento */
-  onSort?: (column: keyof T | string, direction: ListViewSortDirection) => void;
-
-  /** Columna de ordenamiento actual */
-  sortColumn?: keyof T | string;
-
-  /** Dirección de ordenamiento actual */
-  sortDirection?: ListViewSortDirection;
-
-  /** Props de paginación */
-  pagination?: {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    previousLabel?: string;
-    nextLabel?: string;
-  };
-
-  /** Si está cargando */
-  loading?: boolean;
-
-  /** Número de filas skeleton */
-  loadingRows?: number;
-
-  /** Mensaje cuando no hay datos */
-  emptyMessage?: string;
-
-  /** Clases adicionales */
-  className?: string;
-
-  /** ID de navegación seleccionado */
-  selectedNavId?: string;
-
-  /** Handler de selección de navegación */
-  onNavSelect?: (id: string) => void;
-
-  /** Handler click en carrito */
-  onCartClick?: () => void;
-
-  /** Handler click en notificaciones */
-  onNotificationsClick?: () => void;
-
-  /** Opciones del dropdown de vista */
-  viewOptions?: Array<{ id: string; label: string }>;
-
-  /** Opción de vista seleccionada */
-  selectedViewOption?: string;
-
-  /** Handler de cambio de opción de vista */
-  onViewOptionChange?: (id: string) => void;
-}
+import type { ReactNode, ReactElement } from 'react';
+import type { BadgeColor } from '../../components/Badge/Badge.types';
+
+/**
+ * Interfaz para los items de navegación (Navigation Rail)
+ */
+export interface ListViewNavigationItem {
+  /** ID único del item */
+  id: string;
+  /** Icono del item */
+  icon: ReactNode;
+  /** Label del item */
+  label: string;
+  /** Si el item está seleccionado */
+  selected?: boolean;
+  /** Si el item está deshabilitado */
+  disabled?: boolean;
+  /** Badge de notificación */
+  badge?: boolean;
+  /** Contador de badge */
+  badgeCount?: number;
+  /** Handler de click */
+  onClick?: () => void;
+}
+
+/**
+ * Interfaz para los filtros rápidos (badges en la barra de navegación)
+ */
+export interface ListViewQuickFilter {
+  /** ID único del filtro */
+  id: string;
+  /** Label del filtro */
+  label: string;
+  /** Color del badge */
+  color: BadgeColor;
+  /** Icono del filtro */
+  icon?: ReactElement;
+  /** Si el filtro está activo */
+  active?: boolean;
+  /** Handler de click */
+  onClick?: () => void;
+}
+
+/**
+ * Interfaz para las columnas de la tabla
+ */
+export interface ListViewColumn<T = any> {
+  /** Título del header */
+  header: string;
+  /** Key del objeto para acceder al valor */
+  accessor: keyof T | ((row: T) => any);
+  /** Si es sortable */
+  sortable?: boolean;
+  /** Render custom */
+  render?: (value: any, row: T, index: number) => ReactNode;
+  /** Alineación */
+  align?: 'left' | 'center' | 'right';
+  /** Ancho */
+  width?: string;
+}
+
+/**
+ * Interfaz para los datos del dropdown de usuario
+ */
+export interface ListViewUserDropdown {
+  /** URL del avatar */
+  avatar: string;
+  /** Nombre del usuario */
+  name: string;
+  /** Email o rol del usuario */
+  email?: string;
+  /** Rol del usuario */
+  role?: string;
+  /** Handler del click en menú */
+  onMenuClick?: () => void;
+}
+
+/**
+ * Interfaz para las notificaciones
+ */
+export interface ListViewNotifications {
+  /** Contador del carrito */
+  cart?: number;
+  /** Si tiene notificaciones de campana */
+  bell?: boolean;
+}
+
+/**
+ * Interfaz para los botones de acción
+ */
+export interface ListViewActionButton {
+  /** ID del botón */
+  id: string;
+  /** Label del botón */
+  label: string;
+  /** Icono del botón */
+  icon?: ReactNode;
+  /** Handler del click */
+  onClick?: () => void;
+  /** Variante del botón */
+  variant?: 'primary' | 'secondary';
+}
+
+/**
+ * Dirección de ordenamiento
+ */
+export type ListViewSortDirection = 'asc' | 'desc' | null;
+
+/**
+ * Props del componente ListView
+ */
+export interface ListViewProps<T = any> {
+  /** Título de la vista */
+  title?: string;
+
+  /** Título del navbar */
+  navbarTitle?: string;
+
+  /** Título de la tabla */
+  tableTitle?: string;
+
+  /** Columnas de la tabla */
+  columns: ListViewColumn<T>[];
+
+  /** Datos de la tabla */
+  data: T[];
+
+  /** Items de navegación lateral */
+  navigationItems?: ListViewNavigationItem[];
+
+  /** Filtros rápidos */
+  quickFilters?: ListViewQuickFilter[];
+
+  /** Botones de acción */
+  actionButtons?: ListViewActionButton[];
+
+  /** Dropdown del usuario */
+  userDropdown?: ListViewUserDropdown;
+
+  /** Notificaciones */
+  notifications?: ListViewNotifications;
+
+  /** Badge de ambiente */
+  environmentBadge?: string;
+
+  /** Si mostrar el FAB en navigation rail */
+  showFab?: boolean;
+
+  /** Icono del FAB */
+  fabIcon?: ReactNode;
+
+  /** Handler del FAB */
+  onFabClick?: () => void;
+
+  /** Handler de búsqueda */
+  onSearch?: (query: string) => void;
+
+  /** Placeholder del buscador */
+  searchPlaceholder?: string;
+
+  /** Handler de ordenamiento */
+  onSort?: (column: keyof T | string, direction: ListViewSortDirection) => void;
+
+  /** Columna de ordenamiento actual */
+  sortColumn?: keyof T | string;
+
+  /** Dirección de ordenamiento actual */
+  sortDirection?: ListViewSortDirection;
+
+  /** Props de paginación */
+  pagination?: {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    previousLabel?: string;
+    nextLabel?: string;
+  };
+
+  /** Si está cargando */
+  loading?: boolean;
+
+  /** Número de filas skeleton */
+  loadingRows?: number;
+
+  /** Mensaje cuando no hay datos */
+  emptyMessage?: string;
+
+  /** Clases adicionales */
+  className?: string;
+
+  /** ID de navegación seleccionado */
+  selectedNavId?: string;
+
+  /** Handler de selección de navegación */
+  onNavSelect?: (id: string) => void;
+
+  /** Handler click en carrito */
+  onCartClick?: () => void;
+
+  /** Handler click en notificaciones */
+  onNotificationsClick?: () => void;
+
+  /** Opciones del dropdown de vista */
+  viewOptions?: Array<{ id: string; label: string }>;
+
+  /** Opción de vista seleccionada */
+  selectedViewOption?: string;
+
+  /** Handler de cambio de opción de vista */
+  onViewOptionChange?: (id: string) => void;
+}