@blenx-dev/components 0.0.1 → 0.0.3

package/src/DataTable/data-table.tsx

@@ -1,507 +0,0 @@
-import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
-import clsx from "clsx";
-import {
-  type ColumnDef,
-  type ColumnFiltersState,
-  flexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type Row,
-  type RowSelectionState,
-  type SortingState,
-  useReactTable,
-  type VisibilityState,
-} from "@tanstack/react-table";
-import { type UIEvent, useCallback, useMemo, useRef, useState } from "react";
-import { DataTableEmpty } from "./data-table-empty";
-import { DataTableError } from "./data-table-error";
-import { DataTableInfiniteLoader } from "./data-table-infinite-loader";
-import { DataTableLoading } from "./data-table-loading";
-import { DataTablePagination } from "./data-table-pagination";
-import { DataTableToolbar } from "./data-table-toolbar";
-import type { DataTableProps, RowAction, TableFeatures } from "./types";
-import { Button, Spinner } from "../components";
-import * as styles from "./data-table.css";
-
-const DEFAULT_FEATURES: TableFeatures = {
-  sorting: true,
-  globalSearch: true,
-  pagination: true,
-  columnVisibility: true,
-  rowSelection: false,
-  columnResizing: false,
-  columnPinning: false,
-  stickyHeader: false,
-  rowActions: false,
-  bulkActions: false,
-};
-
-function IndeterminateCheckbox({
-  checked,
-  indeterminate,
-  onChange,
-  label,
-}: {
-  checked: boolean;
-  indeterminate: boolean;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  label: string;
-}) {
-  const ref = useRef<HTMLInputElement>(null);
-  useMemo(() => {
-    if (ref.current) {
-      ref.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
-
-  return (
-    <input
-      ref={ref}
-      type="checkbox"
-      checked={checked}
-      onChange={onChange}
-      aria-label={label}
-      className={styles.checkbox}
-    />
-  );
-}
-
-function useDataTableStates<TData extends Record<string, unknown>>(
-  props: Partial<DataTableProps<TData>>,
-) {
-  const [sorting, setSorting] = useState<SortingState>(props.initialSorting ?? []);
-  const [pagination, setPagination] = useState<PaginationState>(
-    props.initialPagination ?? { pageIndex: 0, pageSize: 10 },
-  );
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
-    props.initialColumnFilters ?? [],
-  );
-  const [globalFilter, setGlobalFilter] = useState(props.initialGlobalFilter ?? "");
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>(
-    props.initialRowSelection ?? {},
-  );
-
-  const handlePaginationChange = useCallback(
-    (v: PaginationState | ((old: PaginationState) => PaginationState)) => {
-      const next = typeof v === "function" ? v(pagination) : v;
-      setPagination(next);
-      props.callbacks?.onPaginationChange?.(next);
-    },
-    [pagination, props.callbacks],
-  );
-  const handleSortingChange = useCallback(
-    (v: SortingState | ((old: SortingState) => SortingState)) => {
-      const next = typeof v === "function" ? v(sorting) : v;
-      setSorting(next);
-      props.callbacks?.onSortingChange?.(next);
-      if (props.mode === "server") setPagination((p) => ({ ...p, pageIndex: 0 }));
-    },
-    [sorting, props.callbacks, props.mode],
-  );
-
-  const handleGlobalFilterChange = useCallback(
-    (value: string) => {
-      setGlobalFilter(value);
-      props.callbacks?.onGlobalFilterChange?.(value);
-      setPagination((p) => ({ ...p, pageIndex: 0 }));
-    },
-    [props.callbacks],
-  );
-
-  const handleColumnFiltersChange = useCallback(
-    (v: ColumnFiltersState | ((old: ColumnFiltersState) => ColumnFiltersState)) => {
-      const next = typeof v === "function" ? v(columnFilters) : v;
-      setColumnFilters(next);
-      props.callbacks?.onColumnFiltersChange?.(next);
-    },
-    [columnFilters, props.callbacks],
-  );
-
-  const handleRowSelectionChange = useCallback(
-    (v: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)) => {
-      const next = typeof v === "function" ? v(rowSelection) : v;
-      setRowSelection(next);
-      props.callbacks?.onRowSelectionChange?.(next);
-    },
-    [rowSelection, props.callbacks],
-  );
-  return {
-    sorting,
-    handleSortingChange,
-    columnFilters,
-    handleColumnFiltersChange,
-    pagination,
-    handlePaginationChange,
-    globalFilter,
-    handleGlobalFilterChange,
-    rowSelection,
-    handleRowSelectionChange,
-  };
-}
-export function DataTable<TData extends Record<string, unknown>>({
-  columns,
-  data,
-  pageCount,
-  mode = "client",
-  isLoading,
-  isFetching,
-  isError,
-  errorMessage,
-  fetchNextPage,
-  hasNextPage,
-  isFetchingNextPage,
-  features: featuresProp,
-  size = "md",
-  infiniteScroll,
-  columnPinning,
-  slots,
-  rowActions,
-  initialSorting,
-  initialPagination,
-  initialColumnFilters,
-  initialGlobalFilter,
-  initialColumnVisibility,
-  initialRowSelection,
-  callbacks,
-  tableOptions,
-  className,
-  style,
-}: DataTableProps<TData>) {
-  const features = useMemo(() => ({ ...DEFAULT_FEATURES, ...featuresProp }), [featuresProp]);
-
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
-    initialColumnVisibility ?? {},
-  );
-  const {
-    sorting,
-    handleSortingChange,
-    pagination,
-    handlePaginationChange,
-    columnFilters,
-    handleColumnFiltersChange,
-    globalFilter,
-    handleGlobalFilterChange,
-    rowSelection,
-    handleRowSelectionChange,
-  } = useDataTableStates({
-    initialPagination,
-    initialSorting,
-    initialColumnFilters,
-    initialGlobalFilter,
-    initialColumnVisibility,
-    initialRowSelection,
-    callbacks,
-    mode,
-  });
-
-  const stableColumns = useMemo(() => {
-    let result: ColumnDef<TData, unknown>[] = columns;
-
-    if (features.rowSelection) {
-      result = [
-        {
-          id: "select",
-          header: ({ table }) => (
-            <IndeterminateCheckbox
-              checked={table.getIsAllPageRowsSelected()}
-              indeterminate={table.getIsSomePageRowsSelected()}
-              onChange={table.getToggleAllPageRowsSelectedHandler()}
-              label="Select all rows"
-            />
-          ),
-          cell: ({ row }) => (
-            <IndeterminateCheckbox
-              checked={row.getIsSelected()}
-              indeterminate={row.getIsSomeSelected()}
-              onChange={row.getToggleSelectedHandler()}
-              label={`Select row ${row.id}`}
-            />
-          ),
-          enableSorting: false,
-          enableHiding: false,
-          size: 40,
-        } satisfies ColumnDef<TData, unknown>,
-        ...result,
-      ];
-    }
-
-    if (features.rowActions && rowActions && rowActions.length > 0) {
-      result = [
-        ...result,
-        {
-          id: "actions",
-          header: "Actions",
-          cell: ({ row }) => <RowActionsCell row={row} actions={rowActions} />,
-          enableSorting: false,
-          enableHiding: false,
-          size: 80,
-        } satisfies ColumnDef<TData, unknown>,
-      ];
-    }
-
-    return result;
-  }, [columns, features.rowSelection, features.rowActions, rowActions]);
-
-  const displayedData = useMemo(() => data ?? [], [data]);
-  const enablePagination = features.pagination && mode !== "infinite";
-
-  const table = useReactTable<TData>({
-    data: displayedData,
-    columns: stableColumns,
-    state: {
-      sorting,
-      pagination: enablePagination ? pagination : undefined,
-      columnFilters,
-      globalFilter,
-      rowSelection,
-      columnVisibility,
-      columnPinning: {
-        left: columnPinning?.left ?? [],
-        right: columnPinning?.right ?? [],
-      },
-    },
-    onSortingChange: handleSortingChange,
-    onPaginationChange: handlePaginationChange,
-    onColumnFiltersChange: handleColumnFiltersChange,
-    onGlobalFilterChange: handleGlobalFilterChange,
-    onRowSelectionChange: handleRowSelectionChange,
-    onColumnVisibilityChange: setColumnVisibility,
-    enableRowSelection: features.rowSelection,
-    enableSorting: features.sorting,
-    enableColumnResizing: features.columnResizing,
-    enableColumnPinning: features.columnPinning,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: features.sorting ? getSortedRowModel() : undefined,
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel:
-      enablePagination && mode === "client" ? getPaginationRowModel() : undefined,
-    getExpandedRowModel: getExpandedRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    manualPagination: mode === "server",
-    manualSorting: mode === "server",
-    manualFiltering: mode === "server",
-    pageCount: mode === "server" ? (pageCount ?? 0) : undefined,
-    autoResetPageIndex: false,
-    ...tableOptions,
-  } as Parameters<typeof useReactTable<TData>>[0]);
-
-  const selectedRowModel = table.getSelectedRowModel();
-  const selectedRows = useMemo(
-    () => selectedRowModel.rows.map((r) => r.original),
-    [selectedRowModel.rows],
-  );
-  const { rows } = table.getRowModel();
-  const headerGroups = table.getHeaderGroups();
-
-  const showPagination = enablePagination && mode === "client" && rows.length > 0;
-  const showInfiniteLoader = mode === "infinite" && fetchNextPage;
-  const showToolbar =
-    features.globalSearch ||
-    features.columnVisibility ||
-    slots?.toolbar ||
-    (features.bulkActions && selectedRows.length > 0);
-
-  const tableContainerRef = useRef<HTMLDivElement>(null);
-  const [isScrolled, setIsScrolled] = useState(false);
-  const handleScroll = useCallback((e: UIEvent<HTMLDivElement>) => {
-    setIsScrolled((e.target as HTMLDivElement).scrollTop > 0);
-  }, []);
-
-  const emptyState = useMemo(() => slots?.empty ?? <DataTableEmpty />, [slots?.empty]);
-  const loadingState = useMemo(
-    () => slots?.loading ?? <DataTableLoading columnCount={stableColumns.length} size={size} />,
-    [slots?.loading, stableColumns.length, size],
-  );
-  const errorState = useMemo(
-    () => slots?.error ?? <DataTableError message={errorMessage} />,
-    [slots?.error, errorMessage],
-  );
-
-  if (isError) return <div className={className}>{errorState}</div>;
-  if (isLoading) return <div className={className}>{loadingState}</div>;
-
-  return (
-    <div className={className} style={style}>
-      {showToolbar && (
-        <DataTableToolbar
-          table={table}
-          features={features}
-          globalSearch={globalFilter}
-          onGlobalSearchChange={handleGlobalFilterChange}
-          customToolbar={slots?.toolbar}
-          bulkActions={
-            features.bulkActions
-              ? ((
-                  tableOptions as {
-                    bulkActions?: {
-                      label: string;
-                      onClick: (rows: TData[]) => void;
-                    }[];
-                  }
-                )?.bulkActions ?? undefined)
-              : undefined
-          }
-          selectedRows={selectedRows}
-        />
-      )}
-
-      <div ref={tableContainerRef} onScroll={handleScroll} className={styles.tableContainer}>
-        <table className={styles.table} aria-label="Data table">
-          <thead
-            className={
-              features.stickyHeader
-                ? isScrolled
-                  ? styles.theadStickyScrolled
-                  : styles.theadSticky
-                : styles.theadStatic
-            }
-          >
-            {headerGroups.map((hg) => (
-              <tr key={hg.id} className={styles.headRow}>
-                {hg.headers.map((header) => {
-                  const isSorted = header.column.getIsSorted();
-                  const isSortable = header.column.getCanSort();
-                  return (
-                    <th
-                      key={header.id}
-                      colSpan={header.colSpan}
-                      className={clsx(
-                        styles.th,
-                        size === "sm" && styles.thSm,
-                        size === "lg" && styles.thLg,
-                        isSortable && styles.thSortable,
-                      )}
-                      onClick={isSortable ? header.column.getToggleSortingHandler() : undefined}
-                      aria-sort={
-                        isSorted === "asc"
-                          ? "ascending"
-                          : isSorted === "desc"
-                            ? "descending"
-                            : undefined
-                      }
-                      aria-label={
-                        isSortable
-                          ? `Sort by ${header.column.columnDef.header?.toString() ?? header.id}`
-                          : undefined
-                      }
-                    >
-                      <div className={styles.thContent}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(header.column.columnDef.header, header.getContext())}
-                        {isSorted === "asc" && <CaretUpIcon size={10} aria-hidden="true" />}
-                        {isSorted === "desc" && <CaretDownIcon size={10} aria-hidden="true" />}
-                      </div>
-                    </th>
-                  );
-                })}
-              </tr>
-            ))}
-          </thead>
-          <tbody>
-            {rows.length === 0 ? (
-              <tr>
-                <td colSpan={stableColumns.length} className={styles.emptyTd}>
-                  {emptyState}
-                </td>
-              </tr>
-            ) : (
-              rows.map((row) => {
-                const selected = row.getIsSelected();
-                return (
-                  <tr
-                    key={row.id}
-                    onClick={() => callbacks?.onRowClick?.(row.original)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") callbacks?.onRowClick?.(row.original);
-                    }}
-                    tabIndex={callbacks?.onRowClick ? 0 : undefined}
-                    role={callbacks?.onRowClick ? "button" : undefined}
-                    className={clsx(
-                      styles.tr,
-                      size === "sm" && styles.trSm,
-                      size === "lg" && styles.trLg,
-                      selected && styles.trSelected,
-                    )}
-                    aria-selected={selected}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <td
-                        key={cell.id}
-                        className={clsx(
-                          styles.td,
-                          size === "sm" && styles.tdSm,
-                          size === "lg" && styles.tdLg,
-                        )}
-                      >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </td>
-                    ))}
-                  </tr>
-                );
-              })
-            )}
-          </tbody>
-        </table>
-      </div>
-
-      {isFetching && !isFetchingNextPage && mode !== "client" && (
-        <div className={styles.fetchingBar}>
-          <Spinner />
-          <span className={styles.fetchingText}>Updating...</span>
-        </div>
-      )}
-
-      {showPagination && <DataTablePagination table={table} />}
-
-      {showInfiniteLoader && (
-        <DataTableInfiniteLoader
-          fetchNextPage={fetchNextPage}
-          hasNextPage={Boolean(hasNextPage)}
-          isFetchingNextPage={Boolean(isFetchingNextPage)}
-          isFetching={isFetching}
-          config={infiniteScroll}
-        />
-      )}
-    </div>
-  );
-}
-
-interface RowActionsCellProps<TData> {
-  row: Row<TData>;
-  actions: RowAction<TData>[];
-}
-
-function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
-  return (
-    <div className={styles.actionsCell}>
-      {actions.map((action, i) => {
-        const isDisabled =
-          typeof action.disabled === "function" ? action.disabled(row.original) : action.disabled;
-        return (
-          <Button
-            key={`row-action-${i.toString()}`}
-            variant="ghost"
-            size="small"
-            disabled={isDisabled}
-            onClick={(e) => {
-              e.stopPropagation();
-              action.onClick(row.original);
-            }}
-            aria-label={action.label}
-          >
-            {action.icon && <span>{action.icon}</span>}
-            {action.label}
-          </Button>
-        );
-      })}
-    </div>
-  );
-}

package/src/DataTable/index.ts

@@ -1,24 +0,0 @@
-export { DataTable } from "./data-table";
-export { DataTableColumnToggle } from "./data-table-column-toggle";
-export { DataTableEmpty } from "./data-table-empty";
-export { DataTableError } from "./data-table-error";
-export { DataTableInfiniteLoader } from "./data-table-infinite-loader";
-export { DataTableLoading } from "./data-table-loading";
-export { DataTablePagination } from "./data-table-pagination";
-export { DataTableToolbar } from "./data-table-toolbar";
-export type {
-  BulkAction,
-  ColumnPinningOptions,
-  DataTableProps,
-  InfiniteScrollConfig,
-  InfiniteScrollMode,
-  RowAction,
-  ServerTableResponse,
-  ServerTableState,
-  TableCallbacks,
-  TableFeatures,
-  TableMode,
-  TableSize,
-  TableSlots,
-} from "./types";
-export { useInfiniteScroll } from "./use-infinite-scroll";

package/src/DataTable/registry-meta.json

@@ -1,66 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "data-table",
-  "type": "registry:ui",
-  "title": "Data Table",
-  "description": "A feature-rich data table component with sorting, filtering, pagination, column visibility, row selection, infinite scroll, and server-side support.",
-  "registryDependencies": ["button", "input", "menu", "spinner"],
-  "files": [
-    {
-      "file": "data-table.tsx",
-      "type": "registry:component",
-      "target": "@components/data-table/data-table.tsx"
-    },
-    {
-      "file": "data-table-column-toggle.tsx",
-      "type": "registry:file",
-      "target": "@components/data-table/data-table-column-toggle.tsx"
-    },
-    {
-      "file": "data-table-empty.tsx",
-      "type": "registry:file",
-      "target": "@components/data-table/data-table-empty.tsx"
-    },
-    {
-      "file": "data-table-error.tsx",
-      "type": "registry:file",
-      "target": "@components/data-table/data-table-error.tsx"
-    },
-    {
-      "file": "data-table-infinite-loader.tsx",
-      "type": "registry:file",
-      "target": "@components/data-table/data-table-infinite-loader.tsx"
-    },
-    {
-      "file": "data-table-loading.tsx",
-      "type": "registry:file",
-      "target": "@components/data-table/data-table-loading.tsx"
-    },
-    {
-      "file": "data-table-pagination.tsx",
-      "type": "registry:file",
-      "target": "@components/data-table/data-table-pagination.tsx"
-    },
-    {
-      "file": "data-table-toolbar.tsx",
-      "type": "registry:file",
-      "target": "@components/data-table/data-table-toolbar.tsx"
-    },
-    {
-      "file": "types.ts",
-      "type": "registry:file",
-      "target": "@ui/data-table/types.ts"
-    },
-    {
-      "file": "index.ts",
-      "type": "registry:file",
-      "target": "@components/data-table/index.ts"
-    },
-    {
-      "file": "use-infinite-scroll.ts",
-      "type": "registry:file",
-      "target": "@components/data-table/use-infinite-scroll.ts"
-    }
-  ],
-  "dependencies": ["@stylexjs/stylex", "@phosphor-icons/react", "@tanstack/react-table"]
-}