analytica-frontend-lib 1.2.19 → 1.2.22

package/dist/TableProvider-48a6wb7j.d.ts

@@ -0,0 +1,231 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { C as CategoryConfig } from './CheckBoxGroup-9n5C0OH4.js';
+
+type FilterConfig = {
+    key: string;
+    label: string;
+    categories: CategoryConfig[];
+};
+type UseTableFilterOptions = {
+    syncWithUrl?: boolean;
+};
+type UseTableFilterReturn = {
+    filterConfigs: FilterConfig[];
+    activeFilters: Record<string, string[]>;
+    hasActiveFilters: boolean;
+    updateFilters: (configs: FilterConfig[]) => void;
+    applyFilters: () => void;
+    clearFilters: () => void;
+};
+/**
+ * Hook for managing table filters with URL synchronization
+ *
+ * @param initialConfigs - Initial filter configurations
+ * @param options - Hook options including URL sync
+ * @returns Filter state and management functions
+ *
+ * @example
+ * ```tsx
+ * const { filterConfigs, activeFilters, updateFilters, applyFilters } = useTableFilter(
+ *   [
+ *     {
+ *       key: 'academic',
+ *       label: 'Dados Acadêmicos',
+ *       categories: [...]
+ *     }
+ *   ],
+ *   { syncWithUrl: true }
+ * );
+ * ```
+ */
+declare const useTableFilter: (initialConfigs: FilterConfig[], options?: UseTableFilterOptions) => UseTableFilterReturn;
+
+/**
+ * Column configuration with flexible rendering options
+ */
+interface ColumnConfig<T = Record<string, unknown>> {
+    /** Column key (must match data object key) */
+    key: string;
+    /** Column label - can be string or JSX */
+    label: string | ReactNode;
+    /** Enable sorting for this column */
+    sortable?: boolean;
+    /** Custom render function for cell content */
+    render?: (value: unknown, row: T, index: number) => ReactNode;
+    /** Column width */
+    width?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * Combined parameters sent via onParamsChange
+ */
+interface TableParams {
+    /** Current page number */
+    page: number;
+    /** Items per page */
+    limit: number;
+    /** Search query */
+    search?: string;
+    /** Active filters (dynamic keys based on filter configs) */
+    [key: string]: unknown;
+    /** Sort column */
+    sortBy?: string;
+    /** Sort direction */
+    sortOrder?: 'asc' | 'desc';
+}
+/**
+ * Pagination configuration
+ */
+interface PaginationConfig {
+    /** Label for items (e.g., "atividades") */
+    itemLabel?: string;
+    /** Items per page options */
+    itemsPerPageOptions?: number[];
+    /** Default items per page */
+    defaultItemsPerPage?: number;
+    /** Total items (for displaying pagination info) */
+    totalItems?: number;
+    /** Total pages (if known from backend) */
+    totalPages?: number;
+}
+/**
+ * Empty state configuration
+ */
+interface EmptyStateConfig {
+    /** Custom component to render when table is empty (no data and no search active) */
+    component?: ReactNode;
+    /** Text message to show in empty state (used if component not provided) */
+    message?: string;
+    /** Image to display in empty state */
+    image?: string;
+    /** Button text for empty state action */
+    buttonText?: string;
+    /** Callback when empty state button is clicked */
+    onButtonClick?: () => void;
+}
+/**
+ * Loading state configuration
+ */
+interface LoadingStateConfig {
+    /** Custom component to render when table is loading */
+    component?: ReactNode;
+}
+/**
+ * No search result state configuration
+ */
+interface NoSearchResultConfig {
+    /** Custom component to render when search returns no results */
+    component?: ReactNode;
+    /** Title for no search result state */
+    title?: string;
+    /** Description for no search result state */
+    description?: string;
+    /** Image to display in no search result state */
+    image?: string;
+}
+/**
+ * Table components exposed via render prop
+ */
+interface TableComponents {
+    /** Search and filter controls */
+    controls: ReactNode;
+    /** Table with data */
+    table: ReactNode;
+    /** Pagination controls */
+    pagination: ReactNode;
+}
+/**
+ * TableProvider Props
+ */
+interface TableProviderProps<T = Record<string, unknown>> {
+    /** Data to display in the table */
+    readonly data: T[];
+    /** Column configurations */
+    readonly headers: ColumnConfig<T>[];
+    /** Loading state */
+    readonly loading?: boolean;
+    /** Table variant */
+    readonly variant?: 'default' | 'borderless';
+    /** Enable search functionality */
+    readonly enableSearch?: boolean;
+    /** Enable filters functionality */
+    readonly enableFilters?: boolean;
+    /** Enable table sorting */
+    readonly enableTableSort?: boolean;
+    /** Enable pagination */
+    readonly enablePagination?: boolean;
+    /** Enable row click functionality */
+    readonly enableRowClick?: boolean;
+    /** Initial filter configurations */
+    readonly initialFilters?: FilterConfig[];
+    /** Pagination configuration */
+    readonly paginationConfig?: PaginationConfig;
+    /** Search placeholder text */
+    readonly searchPlaceholder?: string;
+    /** Empty state configuration (when table is empty with no search) */
+    readonly emptyState?: EmptyStateConfig;
+    /** Loading state configuration (when table is loading) */
+    readonly loadingState?: LoadingStateConfig;
+    /** No search result state configuration (when search returns no results) */
+    readonly noSearchResultState?: NoSearchResultConfig;
+    /** Key field name to use for unique row identification (recommended for better performance) */
+    readonly rowKey?: keyof T;
+    /** Callback when any parameter changes */
+    readonly onParamsChange?: (params: TableParams) => void;
+    /** Callback when row is clicked */
+    readonly onRowClick?: (row: T, index: number) => void;
+    /**
+     * Render prop for custom layout control
+     * When provided, gives full control over component positioning
+     * @param components - Table components (controls, table, pagination)
+     * @returns Custom layout JSX
+     *
+     * @example
+     * ```tsx
+     * <TableProvider {...props}>
+     *   {({ controls, table, pagination }) => (
+     *     <>
+     *       <div className="mb-4">{controls}</div>
+     *       <div className="bg-white p-6">
+     *         {table}
+     *         {pagination}
+     *       </div>
+     *     </>
+     *   )}
+     * </TableProvider>
+     * ```
+     */
+    readonly children?: (components: TableComponents) => ReactNode;
+}
+/**
+ * TableProvider - Self-contained table component with search, filters, sorting, and pagination
+ *
+ * @example
+ * ```tsx
+ * <TableProvider
+ *   data={activities}
+ *   headers={[
+ *     { key: 'title', label: 'Título', sortable: true },
+ *     { key: 'status', label: 'Status', render: (value) => <Badge>{value}</Badge> }
+ *   ]}
+ *   loading={loading}
+ *   variant="borderless"
+ *   enableSearch
+ *   enableFilters
+ *   enableTableSort
+ *   enablePagination
+ *   enableRowClick
+ *   initialFilters={filterConfigs}
+ *   paginationConfig={{ itemLabel: 'atividades' }}
+ *   onParamsChange={handleParamsChange}
+ *   onRowClick={handleRowClick}
+ * />
+ * ```
+ */
+declare function TableProvider<T extends Record<string, unknown>>({ data, headers, loading, variant, enableSearch, enableFilters, enableTableSort, enablePagination, enableRowClick, initialFilters, paginationConfig, searchPlaceholder, emptyState, loadingState, noSearchResultState, rowKey, onParamsChange, onRowClick, children, }: TableProviderProps<T>): react_jsx_runtime.JSX.Element;
+
+export { type ColumnConfig as C, type EmptyStateConfig as E, type FilterConfig as F, type LoadingStateConfig as L, type NoSearchResultConfig as N, type PaginationConfig as P, TableProvider as T, type UseTableFilterOptions as U, type UseTableFilterReturn as a, type TableParams as b, type TableProviderProps as c, type TableComponents as d, useTableFilter as u };

package/dist/TableProvider-DyhwEkPT.d.mts

@@ -0,0 +1,231 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { C as CategoryConfig } from './CheckBoxGroup-9n5C0OH4.mjs';
+
+type FilterConfig = {
+    key: string;
+    label: string;
+    categories: CategoryConfig[];
+};
+type UseTableFilterOptions = {
+    syncWithUrl?: boolean;
+};
+type UseTableFilterReturn = {
+    filterConfigs: FilterConfig[];
+    activeFilters: Record<string, string[]>;
+    hasActiveFilters: boolean;
+    updateFilters: (configs: FilterConfig[]) => void;
+    applyFilters: () => void;
+    clearFilters: () => void;
+};
+/**
+ * Hook for managing table filters with URL synchronization
+ *
+ * @param initialConfigs - Initial filter configurations
+ * @param options - Hook options including URL sync
+ * @returns Filter state and management functions
+ *
+ * @example
+ * ```tsx
+ * const { filterConfigs, activeFilters, updateFilters, applyFilters } = useTableFilter(
+ *   [
+ *     {
+ *       key: 'academic',
+ *       label: 'Dados Acadêmicos',
+ *       categories: [...]
+ *     }
+ *   ],
+ *   { syncWithUrl: true }
+ * );
+ * ```
+ */
+declare const useTableFilter: (initialConfigs: FilterConfig[], options?: UseTableFilterOptions) => UseTableFilterReturn;
+
+/**
+ * Column configuration with flexible rendering options
+ */
+interface ColumnConfig<T = Record<string, unknown>> {
+    /** Column key (must match data object key) */
+    key: string;
+    /** Column label - can be string or JSX */
+    label: string | ReactNode;
+    /** Enable sorting for this column */
+    sortable?: boolean;
+    /** Custom render function for cell content */
+    render?: (value: unknown, row: T, index: number) => ReactNode;
+    /** Column width */
+    width?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * Combined parameters sent via onParamsChange
+ */
+interface TableParams {
+    /** Current page number */
+    page: number;
+    /** Items per page */
+    limit: number;
+    /** Search query */
+    search?: string;
+    /** Active filters (dynamic keys based on filter configs) */
+    [key: string]: unknown;
+    /** Sort column */
+    sortBy?: string;
+    /** Sort direction */
+    sortOrder?: 'asc' | 'desc';
+}
+/**
+ * Pagination configuration
+ */
+interface PaginationConfig {
+    /** Label for items (e.g., "atividades") */
+    itemLabel?: string;
+    /** Items per page options */
+    itemsPerPageOptions?: number[];
+    /** Default items per page */
+    defaultItemsPerPage?: number;
+    /** Total items (for displaying pagination info) */
+    totalItems?: number;
+    /** Total pages (if known from backend) */
+    totalPages?: number;
+}
+/**
+ * Empty state configuration
+ */
+interface EmptyStateConfig {
+    /** Custom component to render when table is empty (no data and no search active) */
+    component?: ReactNode;
+    /** Text message to show in empty state (used if component not provided) */
+    message?: string;
+    /** Image to display in empty state */
+    image?: string;
+    /** Button text for empty state action */
+    buttonText?: string;
+    /** Callback when empty state button is clicked */
+    onButtonClick?: () => void;
+}
+/**
+ * Loading state configuration
+ */
+interface LoadingStateConfig {
+    /** Custom component to render when table is loading */
+    component?: ReactNode;
+}
+/**
+ * No search result state configuration
+ */
+interface NoSearchResultConfig {
+    /** Custom component to render when search returns no results */
+    component?: ReactNode;
+    /** Title for no search result state */
+    title?: string;
+    /** Description for no search result state */
+    description?: string;
+    /** Image to display in no search result state */
+    image?: string;
+}
+/**
+ * Table components exposed via render prop
+ */
+interface TableComponents {
+    /** Search and filter controls */
+    controls: ReactNode;
+    /** Table with data */
+    table: ReactNode;
+    /** Pagination controls */
+    pagination: ReactNode;
+}
+/**
+ * TableProvider Props
+ */
+interface TableProviderProps<T = Record<string, unknown>> {
+    /** Data to display in the table */
+    readonly data: T[];
+    /** Column configurations */
+    readonly headers: ColumnConfig<T>[];
+    /** Loading state */
+    readonly loading?: boolean;
+    /** Table variant */
+    readonly variant?: 'default' | 'borderless';
+    /** Enable search functionality */
+    readonly enableSearch?: boolean;
+    /** Enable filters functionality */
+    readonly enableFilters?: boolean;
+    /** Enable table sorting */
+    readonly enableTableSort?: boolean;
+    /** Enable pagination */
+    readonly enablePagination?: boolean;
+    /** Enable row click functionality */
+    readonly enableRowClick?: boolean;
+    /** Initial filter configurations */
+    readonly initialFilters?: FilterConfig[];
+    /** Pagination configuration */
+    readonly paginationConfig?: PaginationConfig;
+    /** Search placeholder text */
+    readonly searchPlaceholder?: string;
+    /** Empty state configuration (when table is empty with no search) */
+    readonly emptyState?: EmptyStateConfig;
+    /** Loading state configuration (when table is loading) */
+    readonly loadingState?: LoadingStateConfig;
+    /** No search result state configuration (when search returns no results) */
+    readonly noSearchResultState?: NoSearchResultConfig;
+    /** Key field name to use for unique row identification (recommended for better performance) */
+    readonly rowKey?: keyof T;
+    /** Callback when any parameter changes */
+    readonly onParamsChange?: (params: TableParams) => void;
+    /** Callback when row is clicked */
+    readonly onRowClick?: (row: T, index: number) => void;
+    /**
+     * Render prop for custom layout control
+     * When provided, gives full control over component positioning
+     * @param components - Table components (controls, table, pagination)
+     * @returns Custom layout JSX
+     *
+     * @example
+     * ```tsx
+     * <TableProvider {...props}>
+     *   {({ controls, table, pagination }) => (
+     *     <>
+     *       <div className="mb-4">{controls}</div>
+     *       <div className="bg-white p-6">
+     *         {table}
+     *         {pagination}
+     *       </div>
+     *     </>
+     *   )}
+     * </TableProvider>
+     * ```
+     */
+    readonly children?: (components: TableComponents) => ReactNode;
+}
+/**
+ * TableProvider - Self-contained table component with search, filters, sorting, and pagination
+ *
+ * @example
+ * ```tsx
+ * <TableProvider
+ *   data={activities}
+ *   headers={[
+ *     { key: 'title', label: 'Título', sortable: true },
+ *     { key: 'status', label: 'Status', render: (value) => <Badge>{value}</Badge> }
+ *   ]}
+ *   loading={loading}
+ *   variant="borderless"
+ *   enableSearch
+ *   enableFilters
+ *   enableTableSort
+ *   enablePagination
+ *   enableRowClick
+ *   initialFilters={filterConfigs}
+ *   paginationConfig={{ itemLabel: 'atividades' }}
+ *   onParamsChange={handleParamsChange}
+ *   onRowClick={handleRowClick}
+ * />
+ * ```
+ */
+declare function TableProvider<T extends Record<string, unknown>>({ data, headers, loading, variant, enableSearch, enableFilters, enableTableSort, enablePagination, enableRowClick, initialFilters, paginationConfig, searchPlaceholder, emptyState, loadingState, noSearchResultState, rowKey, onParamsChange, onRowClick, children, }: TableProviderProps<T>): react_jsx_runtime.JSX.Element;
+
+export { type ColumnConfig as C, type EmptyStateConfig as E, type FilterConfig as F, type LoadingStateConfig as L, type NoSearchResultConfig as N, type PaginationConfig as P, TableProvider as T, type UseTableFilterOptions as U, type UseTableFilterReturn as a, type TableParams as b, type TableProviderProps as c, type TableComponents as d, useTableFilter as u };

package/dist/index.css

@@ -2289,6 +2289,9 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
   .bg-blue-700 {
     background-color: var(--color-blue-700);
   }
@@ -2981,9 +2984,6 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .py-12 {
-    padding-block: calc(var(--spacing) * 12);
-  }
   .py-\[17px\] {
     padding-block: 17px;
   }
@@ -5021,6 +5021,13 @@
       }
     }
   }
+  .hover\:bg-blue-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-700);
+      }
+    }
+  }
   .hover\:bg-border-50 {
     &:hover {
       @media (hover: hover) {