tablero 1.0.0

package/dist/react.d.ts

@@ -0,0 +1,117 @@
+import { ColumnDef, TableStateHandler, UncontrolledTableState, TableState, Column } from './core.js';
+
+/**
+ * React hook for data table functionality
+ *
+ * Bridges core table logic to React components.
+ * Supports both controlled and uncontrolled state patterns.
+ */
+
+/**
+ * Hook configuration options
+ */
+interface UseDataTableOptions<TData> {
+    /** Data array to display */
+    data: TData[];
+    /** Column definitions */
+    columns: readonly ColumnDef<TData>[];
+    /** Initial page size (default: 10) */
+    pageSize?: number;
+    /** Controlled or uncontrolled state configuration */
+    state?: TableStateHandler | UncontrolledTableState;
+}
+/**
+ * Table instance API returned by useDataTable
+ */
+interface TableInstance<TData> {
+    /** Current table state */
+    state: TableState;
+    /** Runtime columns (with normalized accessors) */
+    columns: Column<TData>[];
+    /** Visible columns in current order */
+    visibleColumns: Column<TData>[];
+    /** Original data array */
+    data: TData[];
+    /** Filtered data (after applying filters) */
+    filteredData: TData[];
+    /** Sorted data (after applying sorting) */
+    sortedData: TData[];
+    /** Paginated data (final data to display) */
+    paginatedData: TData[];
+    /** Total number of items after filtering */
+    filteredRowCount: number;
+    /** Total number of pages */
+    pageCount: number;
+    /** Current page index */
+    pageIndex: number;
+    /** Current page size */
+    pageSize: number;
+    /** Whether there is a next page */
+    hasNextPage: boolean;
+    /** Whether there is a previous page */
+    hasPreviousPage: boolean;
+    /** Sorting handlers */
+    sorting: {
+        /** Current sort state */
+        state: TableState["sorting"];
+        /** Toggle sort for a column */
+        toggle: (columnId: string) => void;
+        /** Set sort explicitly */
+        set: (columnId: string | null, direction: "asc" | "desc" | null) => void;
+        /** Clear sort */
+        clear: () => void;
+    };
+    /** Pagination handlers */
+    pagination: {
+        /** Current pagination state */
+        state: TableState["pagination"];
+        /** Go to next page */
+        nextPage: () => void;
+        /** Go to previous page */
+        previousPage: () => void;
+        /** Go to specific page */
+        goToPage: (pageIndex: number) => void;
+        /** Set page size */
+        setPageSize: (pageSize: number) => void;
+    };
+    /** Filtering handlers */
+    filtering: {
+        /** Current filter state */
+        state: TableState["filtering"];
+        /** Set global filter */
+        setGlobalFilter: (filter: string) => void;
+        /** Set column filter */
+        setColumnFilter: (columnId: string, filter: string) => void;
+        /** Clear column filter */
+        clearColumnFilter: (columnId: string) => void;
+        /** Clear all filters */
+        clearAllFilters: () => void;
+    };
+    /** Column management handlers */
+    columnManagement: {
+        /** Toggle column visibility */
+        toggleVisibility: (columnId: string) => void;
+        /** Set column visibility */
+        setVisibility: (columnId: string, visible: boolean) => void;
+        /** Reorder columns */
+        reorder: (columnOrder: string[]) => void;
+    };
+}
+/**
+ * useDataTable hook
+ *
+ * Provides a complete table instance with state management,
+ * data transformations, and event handlers.
+ *
+ * @example
+ * ```tsx
+ * const table = useDataTable({
+ *   data: users,
+ *   columns: userColumns,
+ *   pageSize: 10,
+ * });
+ * ```
+ */
+declare function useDataTable<TData>(options: UseDataTableOptions<TData>): TableInstance<TData>;
+
+export { type TableInstance, type UseDataTableOptions, useDataTable };

package/dist/react.js

@@ -0,0 +1,543 @@
+'use strict';
+
+var react = require('react');
+
+// packages/react/useDataTable.ts
+
+// packages/core/tableState.ts
+function createInitialTableState(columnIds) {
+  return {
+    sorting: {
+      columnId: null,
+      direction: null
+    },
+    pagination: {
+      pageIndex: 0,
+      pageSize: 10
+    },
+    filtering: {
+      globalFilter: "",
+      columnFilters: {}
+    },
+    columnVisibility: columnIds.reduce((acc, id) => {
+      acc[id] = true;
+      return acc;
+    }, {}),
+    columnOrder: [...columnIds]
+  };
+}
+function updateTableState(state, updates) {
+  return {
+    ...state,
+    ...updates
+  };
+}
+function updateSorting(state, sorting) {
+  return updateTableState(state, { sorting });
+}
+function updatePagination(state, pagination) {
+  return updateTableState(state, {
+    pagination: {
+      ...state.pagination,
+      ...pagination
+    }
+  });
+}
+function updateFiltering(state, filtering) {
+  return updateTableState(state, {
+    filtering: {
+      ...state.filtering,
+      ...filtering
+    }
+  });
+}
+function updateColumnVisibility(state, columnId, visible) {
+  return updateTableState(state, {
+    columnVisibility: {
+      ...state.columnVisibility,
+      [columnId]: visible
+    }
+  });
+}
+function updateColumnOrder(state, columnOrder) {
+  return updateTableState(state, { columnOrder });
+}
+function isControlledState(handler) {
+  return "state" in handler && "setState" in handler;
+}
+
+// packages/core/columns.ts
+function normalizeAccessor(accessor) {
+  if (typeof accessor === "function") {
+    return accessor;
+  }
+  return (data) => {
+    return data[String(accessor)];
+  };
+}
+function createColumn(def) {
+  const accessor = def.accessor ? normalizeAccessor(def.accessor) : () => void 0;
+  return {
+    def,
+    id: def.id,
+    header: def.header ?? def.id,
+    sortable: def.sortable ?? false,
+    filter: def.filter ?? "none",
+    width: def.width,
+    align: def.align ?? "left",
+    accessor
+  };
+}
+function createColumns(definitions) {
+  return definitions.map(createColumn);
+}
+function getVisibleColumns(columns, visibility) {
+  return columns.filter((col) => visibility[col.id] !== false);
+}
+function getOrderedColumns(columns, order) {
+  const columnMap = new Map(columns.map((col) => [col.id, col]));
+  const ordered = [];
+  for (const id of order) {
+    const col = columnMap.get(id);
+    if (col) {
+      ordered.push(col);
+      columnMap.delete(id);
+    }
+  }
+  ordered.push(...columnMap.values());
+  return ordered;
+}
+function getColumnIds(definitions) {
+  return definitions.map((def) => def.id);
+}
+
+// packages/core/sorting.ts
+function createInitialSortState() {
+  return {
+    columnId: null,
+    direction: null
+  };
+}
+function toggleSort(currentState, columnId) {
+  if (currentState.columnId === columnId) {
+    if (currentState.direction === "asc") {
+      return { columnId, direction: "desc" };
+    }
+    if (currentState.direction === "desc") {
+      return { columnId: null, direction: null };
+    }
+  }
+  return { columnId, direction: "asc" };
+}
+function setSort(columnId, direction) {
+  return {
+    columnId,
+    direction
+  };
+}
+function clearSort() {
+  return createInitialSortState();
+}
+function isSortActive(state) {
+  return state.columnId !== null && state.direction !== null;
+}
+function defaultCompare(a, b) {
+  if (a === b) return 0;
+  if (a === null || a === void 0) return 1;
+  if (b === null || b === void 0) return -1;
+  if (typeof a === "number" && typeof b === "number") {
+    return a - b;
+  }
+  if (typeof a === "string" && typeof b === "string") {
+    return a.localeCompare(b);
+  }
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() - b.getTime();
+  }
+  return String(a).localeCompare(String(b));
+}
+function createComparator(direction, compareFn = defaultCompare) {
+  return (a, b) => {
+    const result = compareFn(a, b);
+    return direction === "asc" ? result : -result;
+  };
+}
+function applySort(data, sortState, getValue, compareFn) {
+  if (!isSortActive(sortState) || !sortState.columnId) {
+    return [...data];
+  }
+  const comparator = createComparator(
+    sortState.direction,
+    defaultCompare
+  );
+  return [...data].sort((a, b) => {
+    const valueA = getValue(a, sortState.columnId);
+    const valueB = getValue(b, sortState.columnId);
+    return comparator(valueA, valueB);
+  });
+}
+
+// packages/core/filtering.ts
+function createInitialFilterState() {
+  return {
+    globalFilter: "",
+    columnFilters: {}
+  };
+}
+function setGlobalFilter(filter) {
+  return {
+    globalFilter: filter,
+    columnFilters: {}
+  };
+}
+function setColumnFilter(state, columnId, filter) {
+  return {
+    ...state,
+    columnFilters: {
+      ...state.columnFilters,
+      [columnId]: filter
+    }
+  };
+}
+function clearColumnFilter(state, columnId) {
+  const { [columnId]: _, ...restFilters } = state.columnFilters;
+  return {
+    ...state,
+    columnFilters: restFilters
+  };
+}
+function clearAllFilters() {
+  return createInitialFilterState();
+}
+function isFilterActive(state) {
+  return state.globalFilter.trim() !== "" || Object.values(state.columnFilters).some((filter) => filter.trim() !== "");
+}
+function defaultMatch(value, filter) {
+  if (!filter.trim()) return true;
+  const normalizedFilter = filter.toLowerCase().trim();
+  const normalizedValue = String(value ?? "").toLowerCase();
+  return normalizedValue.includes(normalizedFilter);
+}
+function applyFilters(data, filterState, getValue, matchFn = defaultMatch) {
+  if (!isFilterActive(filterState)) {
+    return [...data];
+  }
+  return data.filter((item) => {
+    if (filterState.globalFilter.trim()) {
+      const matchesGlobal = Object.keys(filterState.columnFilters).length === 0 ? (
+        // If no column filters, check all columns for global filter
+        Object.values(item).some(
+          (value) => matchFn(value, filterState.globalFilter)
+        )
+      ) : (
+        // If column filters exist, global filter is ignored (TODO: make configurable)
+        true
+      );
+      if (!matchesGlobal) return false;
+    }
+    for (const [columnId, filterValue] of Object.entries(filterState.columnFilters)) {
+      if (filterValue.trim()) {
+        const value = getValue(item, columnId);
+        if (!matchFn(value, filterValue)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  });
+}
+
+// packages/core/pagination.ts
+function getPageCount(totalItems, pageSize) {
+  if (pageSize <= 0) return 0;
+  return Math.ceil(totalItems / pageSize);
+}
+function getPageStartIndex(pageIndex, pageSize) {
+  return pageIndex * pageSize;
+}
+function getPageEndIndex(pageIndex, pageSize, totalItems) {
+  return Math.min(getPageStartIndex(pageIndex, pageSize) + pageSize, totalItems);
+}
+function clampPageIndex(pageIndex, totalPages) {
+  if (totalPages === 0) return 0;
+  return Math.max(0, Math.min(pageIndex, totalPages - 1));
+}
+function goToNextPage(state, totalPages) {
+  const nextIndex = clampPageIndex(state.pageIndex + 1, totalPages);
+  return {
+    ...state,
+    pageIndex: nextIndex
+  };
+}
+function goToPreviousPage(state, totalPages) {
+  const prevIndex = clampPageIndex(state.pageIndex - 1, totalPages);
+  return {
+    ...state,
+    pageIndex: prevIndex
+  };
+}
+function goToPage(state, pageIndex, totalPages) {
+  return {
+    ...state,
+    pageIndex: clampPageIndex(pageIndex, totalPages)
+  };
+}
+function setPageSize(state, pageSize, totalItems) {
+  const totalPages = getPageCount(totalItems, pageSize);
+  const clampedPageIndex = clampPageIndex(state.pageIndex, totalPages);
+  return {
+    pageIndex: clampedPageIndex,
+    pageSize
+  };
+}
+function getPaginatedData(data, pagination) {
+  const start = getPageStartIndex(pagination.pageIndex, pagination.pageSize);
+  const end = getPageEndIndex(
+    pagination.pageIndex,
+    pagination.pageSize,
+    data.length
+  );
+  return data.slice(start, end);
+}
+function hasNextPage(pageIndex, totalPages) {
+  return pageIndex < totalPages - 1;
+}
+function hasPreviousPage(pageIndex) {
+  return pageIndex > 0;
+}
+
+// packages/react/useDataTable.ts
+function useDataTable(options) {
+  const { data, columns: columnDefs, pageSize: initialPageSize = 10, state } = options;
+  const isControlled = state && isControlledState(state);
+  const [internalState, setInternalState] = react.useState(() => {
+    const columnIds = getColumnIds(columnDefs);
+    const baseState = createInitialTableState(columnIds);
+    if (isControlled) {
+      return state.state;
+    }
+    const uncontrolledState = state;
+    const initialState = uncontrolledState?.initialState;
+    return {
+      ...baseState,
+      pagination: {
+        ...baseState.pagination,
+        pageSize: initialPageSize,
+        ...initialState?.pagination
+      },
+      ...initialState
+    };
+  });
+  const currentState = isControlled ? state.state : internalState;
+  const updateState = react.useCallback(
+    (updater) => {
+      const newState = typeof updater === "function" ? updater(currentState) : updater;
+      if (isControlled) {
+        state.setState(newState);
+      } else {
+        setInternalState(newState);
+        const uncontrolledState = state;
+        uncontrolledState?.onStateChange?.(newState);
+      }
+    },
+    [currentState, isControlled, state]
+  );
+  const columns = react.useMemo(() => {
+    return createColumns(columnDefs);
+  }, [columnDefs]);
+  const visibleColumns = react.useMemo(() => {
+    const visible = getVisibleColumns(columns, currentState.columnVisibility);
+    return getOrderedColumns(visible, currentState.columnOrder);
+  }, [columns, currentState.columnVisibility, currentState.columnOrder]);
+  const getValue = react.useCallback(
+    (item, columnId) => {
+      const column = columns.find((col) => col.id === columnId);
+      if (!column) return void 0;
+      return column.accessor(item);
+    },
+    [columns]
+  );
+  const filteredData = react.useMemo(() => {
+    return applyFilters(data, currentState.filtering, getValue);
+  }, [data, currentState.filtering, getValue]);
+  const sortedData = react.useMemo(() => {
+    if (!currentState.sorting.columnId) {
+      return filteredData;
+    }
+    return applySort(filteredData, currentState.sorting, getValue);
+  }, [filteredData, currentState.sorting, getValue]);
+  const paginatedData = react.useMemo(() => {
+    return getPaginatedData(sortedData, currentState.pagination);
+  }, [sortedData, currentState.pagination]);
+  const filteredRowCount = filteredData.length;
+  const pageCount = react.useMemo(() => {
+    return getPageCount(filteredRowCount, currentState.pagination.pageSize);
+  }, [filteredRowCount, currentState.pagination.pageSize]);
+  const hasNext = react.useMemo(() => {
+    return hasNextPage(currentState.pagination.pageIndex, pageCount);
+  }, [currentState.pagination.pageIndex, pageCount]);
+  const hasPrev = react.useMemo(() => {
+    return hasPreviousPage(currentState.pagination.pageIndex);
+  }, [currentState.pagination.pageIndex]);
+  const handleToggleSort = react.useCallback(
+    (columnId) => {
+      const newSorting = toggleSort(currentState.sorting, columnId);
+      updateState((prev) => updateSorting(prev, newSorting));
+    },
+    [currentState.sorting, updateState]
+  );
+  const handleSetSort = react.useCallback(
+    (columnId, direction) => {
+      const newSorting = setSort(columnId, direction);
+      updateState((prev) => updateSorting(prev, newSorting));
+    },
+    [updateState]
+  );
+  const handleClearSort = react.useCallback(() => {
+    const newSorting = clearSort();
+    updateState((prev) => updateSorting(prev, newSorting));
+  }, [updateState]);
+  const handleNextPage = react.useCallback(() => {
+    const newPagination = goToNextPage(currentState.pagination, pageCount);
+    updateState((prev) => updatePagination(prev, newPagination));
+  }, [currentState.pagination, pageCount, updateState]);
+  const handlePreviousPage = react.useCallback(() => {
+    const newPagination = goToPreviousPage(currentState.pagination, pageCount);
+    updateState((prev) => updatePagination(prev, newPagination));
+  }, [currentState.pagination, pageCount, updateState]);
+  const handleGoToPage = react.useCallback(
+    (pageIndex) => {
+      const newPagination = goToPage(currentState.pagination, pageIndex, pageCount);
+      updateState((prev) => updatePagination(prev, newPagination));
+    },
+    [currentState.pagination, pageCount, updateState]
+  );
+  const handleSetPageSize = react.useCallback(
+    (pageSize) => {
+      const newPagination = setPageSize(
+        currentState.pagination,
+        pageSize,
+        filteredRowCount
+      );
+      updateState((prev) => updatePagination(prev, newPagination));
+    },
+    [currentState.pagination, filteredRowCount, updateState]
+  );
+  const handleSetGlobalFilter = react.useCallback(
+    (filter) => {
+      const newFiltering = setGlobalFilter(filter);
+      updateState((prev) => updateFiltering(prev, newFiltering));
+    },
+    [updateState]
+  );
+  const handleSetColumnFilter = react.useCallback(
+    (columnId, filter) => {
+      const newFiltering = setColumnFilter(currentState.filtering, columnId, filter);
+      updateState((prev) => updateFiltering(prev, newFiltering));
+    },
+    [currentState.filtering, updateState]
+  );
+  const handleClearColumnFilter = react.useCallback(
+    (columnId) => {
+      const newFiltering = clearColumnFilter(currentState.filtering, columnId);
+      updateState((prev) => updateFiltering(prev, newFiltering));
+    },
+    [currentState.filtering, updateState]
+  );
+  const handleClearAllFilters = react.useCallback(() => {
+    const newFiltering = clearAllFilters();
+    updateState((prev) => updateFiltering(prev, newFiltering));
+  }, [updateState]);
+  const toggleColumnVisibility = react.useCallback(
+    (columnId) => {
+      const currentVisibility = currentState.columnVisibility[columnId] ?? true;
+      updateState((prev) => updateColumnVisibility(prev, columnId, !currentVisibility));
+    },
+    [currentState.columnVisibility, updateState]
+  );
+  const setColumnVisibility = react.useCallback(
+    (columnId, visible) => {
+      updateState((prev) => updateColumnVisibility(prev, columnId, visible));
+    },
+    [updateState]
+  );
+  const reorderColumns = react.useCallback(
+    (columnOrder) => {
+      updateState((prev) => updateColumnOrder(prev, columnOrder));
+    },
+    [updateState]
+  );
+  return react.useMemo(
+    () => ({
+      state: currentState,
+      columns,
+      visibleColumns,
+      data,
+      filteredData,
+      sortedData,
+      paginatedData,
+      filteredRowCount,
+      pageCount,
+      pageIndex: currentState.pagination.pageIndex,
+      pageSize: currentState.pagination.pageSize,
+      hasNextPage: hasNext,
+      hasPreviousPage: hasPrev,
+      sorting: {
+        state: currentState.sorting,
+        toggle: handleToggleSort,
+        set: handleSetSort,
+        clear: handleClearSort
+      },
+      pagination: {
+        state: currentState.pagination,
+        nextPage: handleNextPage,
+        previousPage: handlePreviousPage,
+        goToPage: handleGoToPage,
+        setPageSize: handleSetPageSize
+      },
+      filtering: {
+        state: currentState.filtering,
+        setGlobalFilter: handleSetGlobalFilter,
+        setColumnFilter: handleSetColumnFilter,
+        clearColumnFilter: handleClearColumnFilter,
+        clearAllFilters: handleClearAllFilters
+      },
+      columnManagement: {
+        toggleVisibility: toggleColumnVisibility,
+        setVisibility: setColumnVisibility,
+        reorder: reorderColumns
+      }
+    }),
+    [
+      currentState,
+      columns,
+      visibleColumns,
+      data,
+      filteredData,
+      sortedData,
+      paginatedData,
+      filteredRowCount,
+      pageCount,
+      hasNext,
+      hasPrev,
+      handleToggleSort,
+      handleSetSort,
+      handleClearSort,
+      handleNextPage,
+      handlePreviousPage,
+      handleGoToPage,
+      handleSetPageSize,
+      handleSetGlobalFilter,
+      handleSetColumnFilter,
+      handleClearColumnFilter,
+      handleClearAllFilters,
+      toggleColumnVisibility,
+      setColumnVisibility,
+      reorderColumns
+    ]
+  );
+}
+
+exports.useDataTable = useDataTable;
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map