@docyrus/shadcn 1.2.0 → 1.3.0

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

@@ -0,0 +1,209 @@
+import { RowData, ColumnSort, Column, Row } from '@tanstack/react-table';
+import * as nuqs_server from 'nuqs/server';
+import { z } from 'zod';
+
+declare const getSortingStateParser: <TData>(columnIds?: string[] | Set<string>) => nuqs_server.SingleParserBuilder<ExtendedColumnSort<TData>[]>;
+declare const filterItemSchema: z.ZodObject<{
+    id: z.ZodString;
+    value: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+    variant: z.ZodEnum<{
+        number: "number";
+        boolean: "boolean";
+        select: "select";
+        text: "text";
+        date: "date";
+        range: "range";
+        dateRange: "dateRange";
+        multiSelect: "multiSelect";
+    }>;
+    operator: z.ZodEnum<{
+        iLike: "iLike";
+        notILike: "notILike";
+        eq: "eq";
+        ne: "ne";
+        isEmpty: "isEmpty";
+        isNotEmpty: "isNotEmpty";
+        lt: "lt";
+        lte: "lte";
+        gt: "gt";
+        gte: "gte";
+        isBetween: "isBetween";
+        isRelativeToToday: "isRelativeToToday";
+        inArray: "inArray";
+        notInArray: "notInArray";
+    }>;
+    filterId: z.ZodString;
+}, z.core.$strip>;
+type FilterItemSchema = z.infer<typeof filterItemSchema>;
+declare const getFiltersStateParser: <TData>(columnIds?: string[] | Set<string>) => nuqs_server.SingleParserBuilder<ExtendedColumnFilter<TData>[]>;
+
+type DataTableConfig = typeof dataTableConfig;
+declare function getColumnPinningStyle<TData>({ column, }: {
+    column: Column<TData>;
+}): React.CSSProperties;
+declare const dataTableConfig: {
+    textOperators: ({
+        label: string;
+        value: "iLike";
+    } | {
+        label: string;
+        value: "notILike";
+    } | {
+        label: string;
+        value: "eq";
+    } | {
+        label: string;
+        value: "ne";
+    } | {
+        label: string;
+        value: "isEmpty";
+    } | {
+        label: string;
+        value: "isNotEmpty";
+    })[];
+    numericOperators: ({
+        label: string;
+        value: "eq";
+    } | {
+        label: string;
+        value: "ne";
+    } | {
+        label: string;
+        value: "lt";
+    } | {
+        label: string;
+        value: "lte";
+    } | {
+        label: string;
+        value: "gt";
+    } | {
+        label: string;
+        value: "gte";
+    } | {
+        label: string;
+        value: "isBetween";
+    } | {
+        label: string;
+        value: "isEmpty";
+    } | {
+        label: string;
+        value: "isNotEmpty";
+    })[];
+    dateOperators: ({
+        label: string;
+        value: "eq";
+    } | {
+        label: string;
+        value: "ne";
+    } | {
+        label: string;
+        value: "lt";
+    } | {
+        label: string;
+        value: "gt";
+    } | {
+        label: string;
+        value: "lte";
+    } | {
+        label: string;
+        value: "gte";
+    } | {
+        label: string;
+        value: "isBetween";
+    } | {
+        label: string;
+        value: "isRelativeToToday";
+    } | {
+        label: string;
+        value: "isEmpty";
+    } | {
+        label: string;
+        value: "isNotEmpty";
+    })[];
+    selectOperators: ({
+        label: string;
+        value: "eq";
+    } | {
+        label: string;
+        value: "ne";
+    } | {
+        label: string;
+        value: "isEmpty";
+    } | {
+        label: string;
+        value: "isNotEmpty";
+    })[];
+    multiSelectOperators: ({
+        label: string;
+        value: "inArray";
+    } | {
+        label: string;
+        value: "notInArray";
+    } | {
+        label: string;
+        value: "isEmpty";
+    } | {
+        label: string;
+        value: "isNotEmpty";
+    })[];
+    booleanOperators: ({
+        label: string;
+        value: "eq";
+    } | {
+        label: string;
+        value: "ne";
+    })[];
+    sortOrders: ({
+        label: string;
+        value: "asc";
+    } | {
+        label: string;
+        value: "desc";
+    })[];
+    filterVariants: readonly ["text", "number", "range", "date", "dateRange", "boolean", "select", "multiSelect"];
+    operators: readonly ["iLike", "notILike", "eq", "ne", "inArray", "notInArray", "isEmpty", "isNotEmpty", "lt", "lte", "gt", "gte", "isBetween", "isRelativeToToday"];
+    joinOperators: readonly ["and", "or"];
+};
+
+declare module "@tanstack/react-table" {
+    interface TableMeta<TData extends RowData> {
+        queryKeys?: QueryKeys;
+    }
+    interface ColumnMeta<TData extends RowData, TValue> {
+        label?: string;
+        placeholder?: string;
+        variant?: FilterVariant;
+        options?: Option[];
+        range?: [number, number];
+        unit?: string;
+        icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    }
+}
+interface QueryKeys {
+    page: string;
+    perPage: string;
+    sort: string;
+    filters: string;
+    joinOperator: string;
+}
+interface Option {
+    label: string;
+    value: string;
+    count?: number;
+    icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+}
+type FilterOperator = DataTableConfig["operators"][number];
+type FilterVariant = DataTableConfig["filterVariants"][number];
+type JoinOperator = DataTableConfig["joinOperators"][number];
+interface ExtendedColumnSort<TData> extends Omit<ColumnSort, "id"> {
+    id: Extract<keyof TData, string>;
+}
+interface ExtendedColumnFilter<TData> extends FilterItemSchema {
+    id: Extract<keyof TData, string>;
+}
+interface DataTableRowAction<TData> {
+    row: Row<TData>;
+    variant: "update" | "delete";
+}
+
+export { type DataTableConfig as D, type ExtendedColumnSort as E, type FilterOperator as F, type JoinOperator as J, type Option as O, type QueryKeys as Q, type FilterVariant as a, type ExtendedColumnFilter as b, type DataTableRowAction as c, dataTableConfig as d, getSortingStateParser as e, type FilterItemSchema as f, getColumnPinningStyle as g, getFiltersStateParser as h };

package/dist/hooks/index.d.ts

@@ -1,8 +1,13 @@
 export { useAsRef } from './use-as-ref.js';
 export { clearBadgeWidthCache, useBadgeOverflow } from './use-badge-overflow.js';
 export { useCallbackRef } from './use-callback-ref.js';
+export { useDataTable } from './use-data-table.js';
 export { useDebouncedCallback } from './use-debounced-callback.js';
 export { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
 export { useLazyRef } from './use-lazy-ref.js';
 export { useIsMobile } from './use-mobile.js';
 import 'react';
+import '@tanstack/react-table';
+import '../data-table-DWI8FPWh.js';
+import 'nuqs/server';
+import 'zod';

package/dist/hooks/index.js

@@ -1,11 +1,15 @@
-import * as React3 from 'react';
+import * as React6 from 'react';
+import { useReactTable, getFacetedMinMaxValues, getFacetedUniqueValues, getFacetedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel } from '@tanstack/react-table';
+import { useQueryState, parseAsInteger, parseAsArrayOf, parseAsString, useQueryStates } from 'nuqs';
+import { createParser } from 'nuqs/server';
+import { z } from 'zod';
 
 // src/hooks/use-as-ref.ts
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React3.useLayoutEffect : React3.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React6.useLayoutEffect : React6.useEffect;
 
 // src/hooks/use-as-ref.ts
 function useAsRef(props) {
-  const ref = React3.useRef(props);
+  const ref = React6.useRef(props);
   useIsomorphicLayoutEffect(() => {
     ref.current = props;
   });
@@ -64,8 +68,8 @@ function useBadgeOverflow({
   maxWidth,
   className
 }) {
-  const [containerWidth, setContainerWidth] = React3.useState(0);
-  React3.useEffect(() => {
+  const [containerWidth, setContainerWidth] = React6.useState(0);
+  React6.useEffect(() => {
     if (!containerRef.current) return;
     function measureWidth() {
       if (containerRef.current) {
@@ -80,7 +84,7 @@ function useBadgeOverflow({
       resizeObserver.disconnect();
     };
   }, [containerRef, containerPadding]);
-  const result = React3.useMemo(() => {
+  const result = React6.useMemo(() => {
     if (!containerWidth || items.length === 0) {
       return { visibleItems: items, hiddenCount: 0, containerWidth };
     }
@@ -135,23 +139,23 @@ function clearBadgeWidthCache() {
   badgeWidthCache.clear();
 }
 function useCallbackRef(callback) {
-  const callbackRef = React3.useRef(callback);
-  React3.useEffect(() => {
+  const callbackRef = React6.useRef(callback);
+  React6.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React3.useMemo(
+  return React6.useMemo(
     () => ((...args) => callbackRef.current?.(...args)),
     []
   );
 }
 function useDebouncedCallback(callback, delay) {
   const handleCallback = useCallbackRef(callback);
-  const debounceTimerRef = React3.useRef(0);
-  React3.useEffect(
+  const debounceTimerRef = React6.useRef(0);
+  React6.useEffect(
     () => () => window.clearTimeout(debounceTimerRef.current),
     []
   );
-  const setValue = React3.useCallback(
+  const setValue = React6.useCallback(
     (...args) => {
       window.clearTimeout(debounceTimerRef.current);
       debounceTimerRef.current = window.setTimeout(
@@ -163,8 +167,288 @@ function useDebouncedCallback(callback, delay) {
   );
   return setValue;
 }
+
+// src/lib/data-table.ts
+var dataTableConfig = {
+  filterVariants: [
+    "text",
+    "number",
+    "range",
+    "date",
+    "dateRange",
+    "boolean",
+    "select",
+    "multiSelect"
+  ],
+  operators: [
+    "iLike",
+    "notILike",
+    "eq",
+    "ne",
+    "inArray",
+    "notInArray",
+    "isEmpty",
+    "isNotEmpty",
+    "lt",
+    "lte",
+    "gt",
+    "gte",
+    "isBetween",
+    "isRelativeToToday"
+  ]};
+
+// src/lib/parsers.ts
+var sortingItemSchema = z.object({
+  id: z.string(),
+  desc: z.boolean()
+});
+var getSortingStateParser = (columnIds) => {
+  const validKeys = columnIds ? columnIds instanceof Set ? columnIds : new Set(columnIds) : null;
+  return createParser({
+    parse: (value) => {
+      try {
+        const parsed = JSON.parse(value);
+        const result = z.array(sortingItemSchema).safeParse(parsed);
+        if (!result.success) return null;
+        if (validKeys && result.data.some((item) => !validKeys.has(item.id))) {
+          return null;
+        }
+        return result.data;
+      } catch {
+        return null;
+      }
+    },
+    serialize: (value) => JSON.stringify(value),
+    eq: (a, b) => a.length === b.length && a.every(
+      (item, index) => item.id === b[index]?.id && item.desc === b[index]?.desc
+    )
+  });
+};
+z.object({
+  id: z.string(),
+  value: z.union([z.string(), z.array(z.string())]),
+  variant: z.enum(dataTableConfig.filterVariants),
+  operator: z.enum(dataTableConfig.operators),
+  filterId: z.string()
+});
+
+// src/hooks/use-data-table.ts
+var PAGE_KEY = "page";
+var PER_PAGE_KEY = "perPage";
+var SORT_KEY = "sort";
+var FILTERS_KEY = "filters";
+var JOIN_OPERATOR_KEY = "joinOperator";
+var ARRAY_SEPARATOR = ",";
+var DEBOUNCE_MS = 300;
+var THROTTLE_MS = 50;
+function useDataTable(props) {
+  const {
+    columns,
+    pageCount = -1,
+    initialState,
+    queryKeys,
+    history = "replace",
+    debounceMs = DEBOUNCE_MS,
+    throttleMs = THROTTLE_MS,
+    clearOnDefault = false,
+    enableAdvancedFilter = false,
+    scroll = false,
+    shallow = true,
+    startTransition,
+    ...tableProps
+  } = props;
+  const pageKey = queryKeys?.page ?? PAGE_KEY;
+  const perPageKey = queryKeys?.perPage ?? PER_PAGE_KEY;
+  const sortKey = queryKeys?.sort ?? SORT_KEY;
+  const filtersKey = queryKeys?.filters ?? FILTERS_KEY;
+  const joinOperatorKey = queryKeys?.joinOperator ?? JOIN_OPERATOR_KEY;
+  const queryStateOptions = React6.useMemo(
+    () => ({
+      history,
+      scroll,
+      shallow,
+      throttleMs,
+      debounceMs,
+      clearOnDefault,
+      startTransition
+    }),
+    [
+      history,
+      scroll,
+      shallow,
+      throttleMs,
+      debounceMs,
+      clearOnDefault,
+      startTransition
+    ]
+  );
+  const [rowSelection, setRowSelection] = React6.useState(
+    initialState?.rowSelection ?? {}
+  );
+  const [columnVisibility, setColumnVisibility] = React6.useState(initialState?.columnVisibility ?? {});
+  const [page, setPage] = useQueryState(
+    pageKey,
+    parseAsInteger.withOptions(queryStateOptions).withDefault(1)
+  );
+  const [perPage, setPerPage] = useQueryState(
+    perPageKey,
+    parseAsInteger.withOptions(queryStateOptions).withDefault(initialState?.pagination?.pageSize ?? 10)
+  );
+  const pagination = React6.useMemo(() => {
+    return {
+      pageIndex: page - 1,
+      // zero-based index -> one-based index
+      pageSize: perPage
+    };
+  }, [page, perPage]);
+  const onPaginationChange = React6.useCallback(
+    (updaterOrValue) => {
+      if (typeof updaterOrValue === "function") {
+        const newPagination = updaterOrValue(pagination);
+        void setPage(newPagination.pageIndex + 1);
+        void setPerPage(newPagination.pageSize);
+      } else {
+        void setPage(updaterOrValue.pageIndex + 1);
+        void setPerPage(updaterOrValue.pageSize);
+      }
+    },
+    [pagination, setPage, setPerPage]
+  );
+  const columnIds = React6.useMemo(() => {
+    return new Set(
+      columns.map((column) => column.id).filter(Boolean)
+    );
+  }, [columns]);
+  const [sorting, setSorting] = useQueryState(
+    sortKey,
+    getSortingStateParser(columnIds).withOptions(queryStateOptions).withDefault(initialState?.sorting ?? [])
+  );
+  const onSortingChange = React6.useCallback(
+    (updaterOrValue) => {
+      if (typeof updaterOrValue === "function") {
+        const newSorting = updaterOrValue(sorting);
+        setSorting(newSorting);
+      } else {
+        setSorting(updaterOrValue);
+      }
+    },
+    [sorting, setSorting]
+  );
+  const filterableColumns = React6.useMemo(() => {
+    if (enableAdvancedFilter) return [];
+    return columns.filter((column) => column.enableColumnFilter);
+  }, [columns, enableAdvancedFilter]);
+  const filterParsers = React6.useMemo(() => {
+    if (enableAdvancedFilter) return {};
+    return filterableColumns.reduce((acc, column) => {
+      if (column.meta?.options) {
+        acc[column.id ?? ""] = parseAsArrayOf(
+          parseAsString,
+          ARRAY_SEPARATOR
+        ).withOptions(queryStateOptions);
+      } else {
+        acc[column.id ?? ""] = parseAsString.withOptions(queryStateOptions);
+      }
+      return acc;
+    }, {});
+  }, [filterableColumns, queryStateOptions, enableAdvancedFilter]);
+  const [filterValues, setFilterValues] = useQueryStates(filterParsers);
+  const debouncedSetFilterValues = useDebouncedCallback(
+    (values) => {
+      void setPage(1);
+      void setFilterValues(values);
+    },
+    debounceMs
+  );
+  const initialColumnFilters = React6.useMemo(() => {
+    if (enableAdvancedFilter) return [];
+    return Object.entries(filterValues).reduce(
+      (filters, [key, value]) => {
+        if (value !== null) {
+          const processedValue = Array.isArray(value) ? value : typeof value === "string" && /[^a-zA-Z0-9]/.test(value) ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean) : [value];
+          filters.push({
+            id: key,
+            value: processedValue
+          });
+        }
+        return filters;
+      },
+      []
+    );
+  }, [filterValues, enableAdvancedFilter]);
+  const [columnFilters, setColumnFilters] = React6.useState(initialColumnFilters);
+  const onColumnFiltersChange = React6.useCallback(
+    (updaterOrValue) => {
+      if (enableAdvancedFilter) return;
+      setColumnFilters((prev) => {
+        const next = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
+        const filterUpdates = next.reduce((acc, filter) => {
+          if (filterableColumns.find((column) => column.id === filter.id)) {
+            acc[filter.id] = filter.value;
+          }
+          return acc;
+        }, {});
+        for (const prevFilter of prev) {
+          if (!next.some((filter) => filter.id === prevFilter.id)) {
+            filterUpdates[prevFilter.id] = null;
+          }
+        }
+        debouncedSetFilterValues(filterUpdates);
+        return next;
+      });
+    },
+    [debouncedSetFilterValues, filterableColumns, enableAdvancedFilter]
+  );
+  const table = useReactTable({
+    ...tableProps,
+    columns,
+    initialState,
+    pageCount,
+    state: {
+      pagination,
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters
+    },
+    defaultColumn: {
+      ...tableProps.defaultColumn,
+      enableColumnFilter: false
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange,
+    onSortingChange,
+    onColumnFiltersChange,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFacetedMinMaxValues: getFacetedMinMaxValues(),
+    manualPagination: true,
+    manualSorting: true,
+    manualFiltering: true,
+    meta: {
+      ...tableProps.meta,
+      queryKeys: {
+        page: pageKey,
+        perPage: perPageKey,
+        sort: sortKey,
+        filters: filtersKey,
+        joinOperator: joinOperatorKey
+      }
+    }
+  });
+  return React6.useMemo(
+    () => ({ table, shallow, debounceMs, throttleMs }),
+    [table, shallow, debounceMs, throttleMs]
+  );
+}
 function useLazyRef(fn) {
-  const ref = React3.useRef(null);
+  const ref = React6.useRef(null);
   if (ref.current === null) {
     ref.current = fn();
   }
@@ -172,10 +456,10 @@ function useLazyRef(fn) {
 }
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile(breakpoint = MOBILE_BREAKPOINT) {
-  const [isMobile, setIsMobile] = React3.useState(
+  const [isMobile, setIsMobile] = React6.useState(
     void 0
   );
-  React3.useEffect(() => {
+  React6.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < breakpoint);
@@ -187,6 +471,6 @@ function useIsMobile(breakpoint = MOBILE_BREAKPOINT) {
   return !!isMobile;
 }
 
-export { clearBadgeWidthCache, useAsRef, useBadgeOverflow, useCallbackRef, useDebouncedCallback, useIsMobile, useIsomorphicLayoutEffect, useLazyRef };
+export { clearBadgeWidthCache, useAsRef, useBadgeOverflow, useCallbackRef, useDataTable, useDebouncedCallback, useIsMobile, useIsomorphicLayoutEffect, useLazyRef };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map