@aic-kits/react 0.35.2 → 0.35.4

package/dist/components/Table/index.d.ts

@@ -0,0 +1,12 @@
+export { Table } from './Table';
+export { AccordionRow } from './AccordionRow';
+export { AddForm } from './AddForm';
+export { DeleteDialog } from './DeleteDialog';
+export { FormFields } from './FormFields';
+export { Filters } from './Filters';
+export { InlineMultiSelect } from './InlineMultiSelect';
+export { InlinePairSelect } from './InlinePairSelect';
+export { useTable, useLocalStateAdapter } from './hooks';
+export { applyFilters, PAGINATION_PARAMS, createNonFilterParams, filtersToSearchParams, parseFiltersFromParams, } from './utils';
+export type { FormFieldsProps } from './FormFields';
+export type { RecordWithId, FilterOperator, FilterCondition, FilterFn, InlinePairSelectOption, InlinePairSelectValue, InlinePairSelectConfig, InlineMultiSelectOption, InlineMultiSelectGroupOption, ColumnType, FilterType, Column, PaginationParams, PaginatedResponse, TableProps, AccordionRowProps, AddFormProps, FiltersProps, DeleteDialogProps, InlineMultiSelectProps, InlinePairSelectProps, UseTableConfig, TableStateAdapter, UseTableReturn, UseLocalStateAdapterConfig, } from './types';

package/dist/components/Table/types.d.ts

@@ -0,0 +1,374 @@
+import { ReactNode } from 'react';
+import { Color, Radius } from '../../theme';
+/**
+ * Base type for records with an id field
+ */
+export type RecordWithId = {
+    id: string | number;
+    [key: string]: unknown;
+};
+/**
+ * Filter operators for table filtering
+ */
+export type FilterOperator = 'equals' | 'contains' | 'starts_with' | 'ends_with' | 'greater_than' | 'less_than' | 'greater_equal' | 'less_equal' | 'not_equals' | 'is_empty' | 'is_not_empty';
+/**
+ * Filter condition for a column
+ */
+export interface FilterCondition<T> {
+    id: string;
+    column: keyof T;
+    operator: FilterOperator;
+    value: string;
+    valueEnd?: string;
+    relation?: string;
+}
+/**
+ * Custom filter function type
+ */
+export type FilterFn<T> = (data: T[], filters: FilterCondition<T>[]) => T[];
+/**
+ * Option for inline pair select
+ */
+export interface InlinePairSelectOption {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+}
+/**
+ * Value type for inline pair select
+ */
+export type InlinePairSelectValue = Record<string, string>;
+/**
+ * Configuration for inline pair select
+ */
+export interface InlinePairSelectConfig {
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    primaryPlaceholder?: string;
+    secondaryPlaceholder?: string;
+    emptyStateText?: string;
+    valueKeys?: {
+        primary: string;
+        secondary: string;
+    };
+    primaryOptions: InlinePairSelectOption[];
+    secondaryOptions: InlinePairSelectOption[];
+    getSecondaryOptions?: (primaryValue: string) => InlinePairSelectOption[];
+}
+/**
+ * Option for inline multi select
+ */
+export interface InlineMultiSelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * Group option for inline multi select
+ */
+export interface InlineMultiSelectGroupOption {
+    values: string[];
+    label: string;
+}
+/**
+ * Column type definitions
+ */
+export type ColumnType = 'text' | 'number' | 'email' | 'date' | 'select' | 'link' | 'checkboxes' | 'inlinemultiselect' | 'inlinepairselect' | 'boolean';
+/**
+ * Filter type definitions
+ */
+export type FilterType = 'text' | 'number' | 'date' | 'select' | 'checkboxes' | 'boolean' | 'none' | 'inlinemultiselect' | 'inlinepairselect';
+/**
+ * Column definition for table
+ */
+export interface Column<T> {
+    key: keyof T | 'select';
+    header: string;
+    sortable?: boolean;
+    render?: (value: unknown, item: T) => ReactNode;
+    renderEditField?: (value: unknown, item: T, onChange: (value: unknown) => void) => ReactNode;
+    editable?: boolean;
+    required?: boolean;
+    multiline?: boolean;
+    type?: ColumnType;
+    filterType?: FilterType;
+    /** For inlinemultiselect filter: 'option' filters by individual options, 'group' filters by groupOptions */
+    filterBy?: 'option' | 'group';
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    filterOptions?: {
+        value: string;
+        label: string;
+    }[];
+    groupOptions?: {
+        values: string[];
+        label: string;
+    }[];
+    pairOptions?: InlinePairSelectConfig;
+    flex?: number | string;
+    truncate?: boolean;
+    href?: (item: T) => string;
+    hiddenInHeader?: boolean;
+    hiddenInContent?: boolean;
+    headerEditable?: boolean;
+    filterKey?: string;
+    filterRelation?: string;
+    tagColor?: Color;
+    defaultValue?: unknown;
+}
+/**
+ * Pagination parameters
+ */
+export interface PaginationParams {
+    page: number;
+    pageSize: number;
+    sortBy?: string;
+    sortDirection?: 'asc' | 'desc';
+    search?: string;
+}
+/**
+ * Paginated response type
+ */
+export interface PaginatedResponse<T> {
+    data: T[];
+    total: number;
+    page: number;
+    pageSize: number;
+}
+/**
+ * Table component props
+ */
+export interface TableProps<T extends {
+    id: string | number;
+}> {
+    data: T[];
+    columns: Column<T>[];
+    onAdd?: (item: Omit<T, 'id'>) => void | Promise<void>;
+    onEdit?: (id: string | number, item: Partial<T>) => void | Promise<void>;
+    onDelete?: (id: string | number) => void | Promise<void>;
+    onView?: (id: string | number) => Promise<unknown>;
+    renderExpandedRow?: (item: T, detailedData: unknown) => ReactNode;
+    onSelectedItemChange?: (item: T | null) => void | Promise<void>;
+    title?: string;
+    addButtonText?: string;
+    editButtonText?: string;
+    deleteButtonText?: string;
+    viewButtonText?: string;
+    confirmDeleteMessage?: string;
+    noDataMessage?: string;
+    total: number;
+    currentPage: number;
+    pageSize: number;
+    pageSizeOptions?: number[];
+    sortBy?: string;
+    sortDirection?: 'asc' | 'desc';
+    onPaginationChange: (params: PaginationParams) => void;
+    isLoading?: boolean;
+    filters?: FilterCondition<T>[];
+    onFiltersChange?: (filters: FilterCondition<T>[]) => void;
+    showFilterBuilder?: boolean;
+    onFieldChange?: (updates: Partial<T>, key: keyof T, value: unknown) => Partial<T>;
+    expandable?: boolean;
+    /** Error message displayed as a banner above the table */
+    error?: string | null;
+}
+/**
+ * AccordionRow component props
+ */
+export interface AccordionRowProps<T extends {
+    id: string | number;
+}> {
+    item: T;
+    columns: Column<T>[];
+    allColumns: Column<T>[];
+    expandedRows: Set<string | number>;
+    editFormData: Record<string | number, Partial<T>>;
+    loadingDetails: Set<string | number>;
+    isFormLoading: boolean;
+    isEditable?: boolean;
+    isExpandAccordion?: boolean;
+    isSelected?: boolean;
+    onToggleExpanded: (item: T) => void;
+    onEditFormChange: (itemId: string | number, key: keyof T, value: unknown) => void;
+    onSave: (item: T) => void;
+    onDelete?: (item: T) => void;
+    onQuickEdit?: (item: T, key: keyof T, value: unknown) => void;
+}
+/**
+ * AddForm component props
+ */
+export interface AddFormProps<T extends {
+    id: string | number;
+}> {
+    columns: Column<T>[];
+    formData: Partial<T>;
+    isLoading: boolean;
+    onInputChange: (key: keyof T, value: unknown) => void;
+    onSubmit: () => void;
+    onCancel: () => void;
+}
+/**
+ * Filters component props
+ */
+export interface FiltersProps<T> {
+    columns: Column<T>[];
+    filters: FilterCondition<T>[];
+    onFiltersChange: (filters: FilterCondition<T>[]) => void;
+    /**
+     * Border radius for Input, Select, and DatePicker components
+     * @default 'md'
+     */
+    borderRadius?: Radius;
+}
+/**
+ * DeleteDialog component props
+ */
+export interface DeleteDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+    isLoading?: boolean;
+    message?: string;
+    deleteButtonText?: string;
+}
+/**
+ * InlineMultiSelect component props
+ */
+export interface InlineMultiSelectProps {
+    options: InlineMultiSelectOption[];
+    groupOptions: InlineMultiSelectGroupOption[];
+    value: string[];
+    onChange: (next: string[]) => void;
+    placeholder?: string;
+    max?: number;
+    limit?: number;
+}
+/**
+ * InlinePairSelect component props
+ */
+export interface InlinePairSelectProps {
+    primaryOptions: InlinePairSelectOption[];
+    secondaryOptions: InlinePairSelectOption[];
+    getSecondaryOptions?: (primaryValue: string) => InlinePairSelectOption[];
+    value: InlinePairSelectValue[];
+    onChange: (next: InlinePairSelectValue[]) => void;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    primaryPlaceholder?: string;
+    secondaryPlaceholder?: string;
+    emptyStateText?: string;
+    valueKeys?: {
+        primary: string;
+        secondary: string;
+    };
+    disabled?: boolean;
+    /**
+     * Border radius for Select components
+     * @default 'md'
+     */
+    borderRadius?: Radius;
+}
+/**
+ * Configuration for useTable hook defaults
+ */
+export interface UseTableConfig {
+    defaultPageSize: number;
+    defaultSortBy: string;
+    defaultSortDirection: 'asc' | 'desc';
+}
+/**
+ * Adapter interface for reading and writing table UI state
+ * Enables useTable to work with different state backends (URL params, local state, etc.)
+ */
+export interface TableStateAdapter<T = unknown> {
+    getCurrentPage: () => number;
+    getPageSize: () => number;
+    getSortBy: () => string;
+    getSortDirection: () => 'asc' | 'desc';
+    getFilters: () => FilterCondition<T>[];
+    setPagination: (params: PaginationParams) => void;
+    setFilters: (filters: FilterCondition<T>[]) => void;
+}
+/**
+ * Return type for useTable hook
+ */
+export interface UseTableReturn<T = unknown> {
+    currentPage: number;
+    pageSize: number;
+    sortBy: string;
+    sortDirection: 'asc' | 'desc';
+    filters: FilterCondition<T>[];
+    onPaginationChange: (params: PaginationParams) => void;
+    onFiltersChange: (filters: FilterCondition<T>[]) => void;
+}
+/**
+ * Configuration for useLocalStateAdapter hook
+ */
+export interface UseLocalStateAdapterConfig {
+    defaultPageSize?: number;
+    defaultSortBy?: string;
+    defaultSortDirection?: 'asc' | 'desc';
+}
+/**
+ * Props for useTableState hook
+ */
+export interface UseTableStateProps<T extends {
+    id: string | number;
+}> {
+    data: T[];
+    columns: Column<T>[];
+    currentPage: number;
+    pageSize: number;
+    total: number;
+    sortBy?: string;
+    sortDirection: 'asc' | 'desc';
+    onPaginationChange: (params: PaginationParams) => void;
+    onAdd?: (item: Omit<T, 'id'>) => void | Promise<void>;
+    onEdit?: (id: string | number, item: Partial<T>) => void | Promise<void>;
+    onDelete?: (id: string | number) => void | Promise<void>;
+    onView?: (id: string | number) => Promise<unknown>;
+    onSelectedItemChange?: (item: T | null) => void | Promise<void>;
+    onFieldChange?: (formData: Partial<T>, changedKey: keyof T, newValue: unknown) => Partial<T>;
+    renderExpandedRow?: (item: T, detailedData: unknown) => ReactNode;
+}
+/**
+ * Return type for useTableState hook
+ */
+export interface UseTableStateReturn<T extends {
+    id: string | number;
+}> {
+    visibleColumns: Column<T>[];
+    displayData: T[];
+    totalPages: number;
+    totalFlex: number;
+    defaults: Partial<T>;
+    isAddFormOpen: boolean;
+    setIsAddFormOpen: (open: boolean) => void;
+    isDeleteDialogOpen: boolean;
+    setIsDeleteDialogOpen: (open: boolean) => void;
+    validationErrors: string[];
+    setValidationErrors: (errors: string[]) => void;
+    isFilterBuilderOpen: boolean;
+    setIsFilterBuilderOpen: (open: boolean) => void;
+    isFormLoading: boolean;
+    selectedItem: T | null;
+    setSelectedItem: (item: T | null) => void;
+    addFormData: Partial<T>;
+    setAddFormData: (data: Partial<T>) => void;
+    editFormData: Record<string | number, Partial<T>>;
+    expandedRows: Set<string | number>;
+    loadingDetails: Set<string | number>;
+    detailedData: Record<string | number, unknown>;
+    handleSort: (key: keyof T) => void;
+    handlePageChange: (page: number) => void;
+    handlePageSizeChange: (newPageSize: number) => void;
+    handleAddFormInputChange: (key: keyof T, value: unknown) => void;
+    handleAdd: () => Promise<void>;
+    handleDelete: () => Promise<void>;
+    openDeleteDialog: (item: T) => void;
+    toggleExpandedRow: (item: T) => Promise<void>;
+    handleInlineEditFormChange: (itemId: string | number, key: keyof T, value: unknown) => void;
+    handleInlineSave: (item: T) => void;
+    handleQuickEdit: (row: T, key: keyof T, value: unknown) => void;
+}

package/dist/components/Table/utils.d.ts

@@ -0,0 +1,83 @@
+import { FilterCondition } from './types';
+/**
+ * Format a date value for display in table cells.
+ * Uses DD/MM/YYYY format to match editable inputs (Filters, AddForm, AccordionRow).
+ */
+export declare function formatCellDate(value: unknown): string;
+/**
+ * Format a cell value for display, handling complex types like arrays and objects.
+ * Resolves labels from column options for select/multiselect/pairselect types.
+ */
+export declare function formatCellValue(value: unknown, column: {
+    type?: string;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    pairOptions?: {
+        primaryOptions: {
+            value: string;
+            label: string;
+        }[];
+        secondaryOptions: {
+            value: string;
+            label: string;
+        }[];
+        valueKeys?: {
+            primary: string;
+            secondary: string;
+        };
+    };
+}): string;
+/**
+ * Common pagination and sorting parameters that should NOT be treated as filters
+ */
+export declare const PAGINATION_PARAMS: Set<string>;
+/**
+ * Create a set of known non-filter params by combining pagination params with custom params
+ *
+ * @param additionalParams - Additional parameter names to exclude from filtering
+ * @returns Set of all non-filter parameter names
+ */
+export declare function createNonFilterParams(...additionalParams: string[]): Set<string>;
+/**
+ * Convert filter conditions to URL search params
+ *
+ * Converts FilterCondition objects into individual URL parameters with optional table prefix:
+ * - Simple filters: { column: 'name', value: 'john' } → ?name=john or ?experts_name=john
+ * - Range filters: { column: 'count', value: '5', valueEnd: '10' } → ?count_min=5&count_max=10
+ *
+ * @param searchParams - Current URLSearchParams to update
+ * @param filters - Array of FilterCondition objects to convert
+ * @param knownNonFilterParams - Set of parameter names that should NOT be removed
+ * @param pageParam - Name of the page parameter to reset (e.g., 'page', 'staffPage')
+ * @param tablePrefix - Optional prefix for filter params (e.g., 'experts') to avoid conflicts between tables
+ * @returns Updated URLSearchParams with filter parameters
+ */
+export declare function filtersToSearchParams<T>(searchParams: URLSearchParams, filters: FilterCondition<T>[], knownNonFilterParams: Set<string>, pageParam?: string, tablePrefix?: string): URLSearchParams;
+/**
+ * Parse filter conditions from URL search params
+ *
+ * Converts individual URL parameters into FilterCondition objects:
+ * - Simple filters: ?name=john → { column: 'name', operator: 'contains', value: 'john' }
+ * - Range filters: ?count_min=5&count_max=10 → { column: 'count', operator: 'greater_equal', value: '5', valueEnd: '10' }
+ *
+ * The operator for simple filters is derived from `columnTypes` when provided:
+ * - 'boolean' | 'select' | 'checkboxes' → 'equals'
+ * - 'number' | 'date' → 'greater_equal'
+ * - default (text etc.) → 'contains'
+ *
+ * @param searchParams - URLSearchParams to parse
+ * @param knownNonFilterParams - Set of parameter names that should NOT be treated as filters
+ * @param tablePrefix - Optional prefix for filter params (e.g., 'experts') to only parse this table's filters
+ * @param columnTypes - Optional map of column name → filter type for correct operator inference
+ * @returns Array of FilterCondition objects
+ */
+export declare function parseFiltersFromParams<T>(searchParams: URLSearchParams, knownNonFilterParams: Set<string>, tablePrefix?: string, columnTypes?: Record<string, string>): FilterCondition<T>[];
+/**
+ * Apply filters to data array based on filter conditions.
+ * Handles all filter operators including range filters with valueEnd.
+ */
+export declare function applyFilters<T extends {
+    id: string | number;
+}>(data: T[], filters: FilterCondition<T>[]): T[];

package/dist/components/index.d.ts

@@ -16,11 +16,14 @@ export * from './Carousel';
 export * from './Accordion';
 export * from './Tag';
 export * from './Checkbox';
+export * from './Radio';
 export * from './Select';
+export * from './Switch';
 export * from './Grid';
 export * from './Pagination';
 export * from './Progress';
 export * from './Modal';
+export * from './Table';
 export * from './Tooltip';
 export * from './BarChart';
 export * from './PieChart';