@pautena/react-design-system 0.20.2 → 0.21.0

package/dist/remote-data-table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './remote-data-table';
+export * from './use-remote-data-table';

package/dist/remote-data-table/query-spec-utils.d.ts

@@ -0,0 +1,8 @@
+import { QuerySpecField, QuerySpecFilter, QuerySpecOp } from './remote-data-table.types';
+export declare const querySpecOpLabels: Record<QuerySpecOp, string>;
+export declare const createFilterId: () => string;
+export declare const getFieldByName: (fields: QuerySpecField[], name: string) => QuerySpecField | undefined;
+export declare const getOpsForField: (field?: QuerySpecField) => QuerySpecOp[];
+export declare const coerceFilterValue: (field: QuerySpecField | undefined, op: QuerySpecOp, value?: string) => string;
+export declare const formatFiltersSummary: (filters: QuerySpecFilter[], fields: QuerySpecField[]) => string;
+export declare const buildQuerySpecParams: (filters: QuerySpecFilter[], fields: QuerySpecField[]) => Record<string, string | number | boolean>;

package/dist/remote-data-table/remote-data-table-body.d.ts

@@ -0,0 +1,13 @@
+import { RemoteDataTableColumn, SortingState } from './remote-data-table.types';
+type RemoteDataTableBodyProps<TData> = {
+    data: TData[];
+    columns: RemoteDataTableColumn<TData>[];
+    loading: boolean;
+    emptyMessage: string;
+    sorting?: SortingState;
+    onSortingChange?: (sorting: SortingState) => void;
+    onRowClick?: (row: TData) => void;
+    getRowId?: (row: TData, index: number) => string;
+};
+export declare const RemoteDataTableBody: <TData>({ data, columns, loading, emptyMessage, sorting, onSortingChange, onRowClick, getRowId, }: RemoteDataTableBodyProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/remote-data-table/remote-data-table-pagination.d.ts

@@ -0,0 +1,9 @@
+import { OnChangeFn, PaginationState } from './remote-data-table.types';
+type RemoteDataTablePaginationProps = {
+    pagination: PaginationState;
+    onPaginationChange: OnChangeFn<PaginationState>;
+    rowCount: number;
+    pageSizeOptions: number[];
+};
+export declare const RemoteDataTablePagination: ({ pagination, onPaginationChange, rowCount, pageSizeOptions, }: RemoteDataTablePaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/remote-data-table/remote-data-table-query-builder.d.ts

@@ -0,0 +1,6 @@
+import { RemoteDataTableQueryBuilderProps as RemoteDataTableQueryBuilderConfig } from './remote-data-table.types';
+type RemoteDataTableQueryBuilderProps = {
+    queryBuilder: RemoteDataTableQueryBuilderConfig;
+};
+export declare const RemoteDataTableQueryBuilder: ({ queryBuilder, }: RemoteDataTableQueryBuilderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/remote-data-table/remote-data-table.d.ts

@@ -0,0 +1,65 @@
+import { OnChangeFn, PaginationState, RemoteDataTableColumn, RemoteDataTableQueryBuilderProps, SortingState } from './remote-data-table.types';
+export { buildQuerySpecParams } from './query-spec-utils';
+export type { OnChangeFn, PaginationState, QuerySpecField, QuerySpecFieldOption, QuerySpecFieldType, QuerySpecFilter, QuerySpecOp, RemoteDataTableColumn, RemoteDataTableColumnMeta, RemoteDataTableQueryBuilderProps, SortingState, } from './remote-data-table.types';
+/**
+ * Props for the RemoteDataTable component
+ */
+export type RemoteDataTableProps<TData> = {
+    /** Array of data items to display in the table */
+    data: TData[];
+    /** Column definitions for the table */
+    columns: RemoteDataTableColumn<TData>[];
+    /** Optional function to generate unique row IDs. If not provided, uses array index */
+    getRowId?: (row: TData, index: number) => string;
+    /** Current pagination state (pageIndex and pageSize) */
+    pagination: PaginationState;
+    /** Callback fired when pagination changes */
+    onPaginationChange: OnChangeFn<PaginationState>;
+    /** Current sorting state */
+    sorting?: SortingState;
+    /** Callback fired when sorting changes */
+    onSortingChange?: OnChangeFn<SortingState>;
+    /** Total number of rows available (for server-side pagination). If not provided, uses data.length */
+    rowCount?: number;
+    /** Whether data is currently loading */
+    loading?: boolean;
+    /** Message to display when there is no data
+     * @default "No data available"
+     */
+    emptyMessage?: string;
+    /** Available page size options for the pagination dropdown
+     * @default [10, 25, 50]
+     */
+    pageSizeOptions?: number[];
+    /** Callback fired when a row is clicked */
+    onRowClick?: (row: TData) => void;
+    /** Configuration for the query builder (filters) */
+    query?: RemoteDataTableQueryBuilderProps;
+};
+/**
+ * A table component designed for displaying remote/server-side data with built-in
+ * pagination, sorting, and filtering capabilities.
+ *
+ * This component is fully controlled - all state (pagination, sorting, filters) must be
+ * managed by the parent component. For convenience, use the `useRemoteDataTable` hook
+ * to manage this state.
+ *
+ * @example
+ * ```tsx
+ * const tableState = useRemoteDataTable({
+ *   initialPagination: { pageSize: 25 }
+ * });
+ *
+ * <RemoteDataTable
+ *   data={items}
+ *   columns={columns}
+ *   {...tableState}
+ *   query={{
+ *     fields: queryFields,
+ *     filters: tableState.filters,
+ *     onFiltersChange: tableState.onFiltersChange
+ *   }}
+ * />
+ * ```
+ */
+export declare const RemoteDataTable: <TData>({ data, columns, getRowId, pagination, onPaginationChange, sorting, onSortingChange, rowCount, loading, emptyMessage, pageSizeOptions, onRowClick, query, }: RemoteDataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/remote-data-table/remote-data-table.mocks.d.ts

@@ -0,0 +1,30 @@
+import { QuerySpecField, RemoteDataTableColumn } from './remote-data-table';
+/**
+ * Mock item type for testing and stories
+ */
+export type MockItem = {
+    id: string;
+    name: string;
+    status: "Active" | "Inactive" | "Archived";
+    createdAt: string;
+};
+/**
+ * Basic columns for testing (no custom cell rendering)
+ */
+export declare const mockColumnsBasic: RemoteDataTableColumn<MockItem>[];
+/**
+ * Full-featured columns for stories (with sorting, custom cells, and widths)
+ */
+export declare const mockColumnsFull: RemoteDataTableColumn<MockItem>[];
+/**
+ * Query fields for filter builder
+ */
+export declare const mockQueryFields: QuerySpecField[];
+/**
+ * Generates mock items for testing
+ */
+export declare const buildMockItems: (count: number) => MockItem[];
+/**
+ * Default mock dataset (48 items)
+ */
+export declare const mockItems: MockItem[];

package/dist/remote-data-table/remote-data-table.types.d.ts

@@ -0,0 +1,52 @@
+import { TableCellProps } from '@mui/material';
+import { ReactNode } from 'react';
+export type RemoteDataTableColumnMeta = {
+    align?: TableCellProps["align"];
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+};
+export type RemoteDataTableColumn<TData> = {
+    id: string;
+    header: ReactNode;
+    accessorKey?: keyof TData;
+    cell?: (row: TData) => ReactNode;
+    enableSorting?: boolean;
+    meta?: RemoteDataTableColumnMeta;
+};
+export type PaginationState = {
+    pageIndex: number;
+    pageSize: number;
+};
+export type SortingState = Array<{
+    id: string;
+    desc: boolean;
+}>;
+export type OnChangeFn<T> = (updaterOrValue: T | ((old: T) => T)) => void;
+export type QuerySpecOp = "eq" | "neq" | "lt" | "lte" | "gt" | "gte" | "ilike" | "in" | "isnull";
+export type QuerySpecFieldType = "string" | "number" | "boolean" | "date" | "datetime";
+export type QuerySpecFieldOption = {
+    label: string;
+    value: string;
+};
+export type QuerySpecField = {
+    name: string;
+    label: string;
+    type?: QuerySpecFieldType;
+    ops?: QuerySpecOp[];
+    placeholder?: string;
+    options?: QuerySpecFieldOption[];
+};
+export type QuerySpecFilter = {
+    id: string;
+    field: string;
+    op: QuerySpecOp;
+    value?: string;
+};
+export type RemoteDataTableQueryBuilderProps = {
+    fields: QuerySpecField[];
+    filters: QuerySpecFilter[];
+    onFiltersChange: (filters: QuerySpecFilter[]) => void;
+    placeholder?: string;
+    summaryFormatter?: (filters: QuerySpecFilter[], fields: QuerySpecField[]) => string;
+};

package/dist/remote-data-table/use-remote-data-table.d.ts

@@ -0,0 +1,19 @@
+import { OnChangeFn, PaginationState, QuerySpecFilter, SortingState } from './remote-data-table.types';
+export type UseRemoteDataTableOptions = {
+    initialPagination?: Partial<PaginationState>;
+    initialSorting?: SortingState;
+    initialFilters?: QuerySpecFilter[];
+};
+export type UseRemoteDataTableResult = {
+    pagination: PaginationState;
+    onPaginationChange: OnChangeFn<PaginationState>;
+    sorting: SortingState;
+    onSortingChange: OnChangeFn<SortingState>;
+    filters: QuerySpecFilter[];
+    onFiltersChange: (filters: QuerySpecFilter[]) => void;
+    resetPagination: () => void;
+    resetSorting: () => void;
+    resetFilters: () => void;
+    resetAll: () => void;
+};
+export declare const useRemoteDataTable: (options?: UseRemoteDataTableOptions) => UseRemoteDataTableResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.20.2",
+  "version": "0.21.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",