@hexclave/ui 1.0.2 → 1.0.5

package/src/components/data-table/data-table.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import { runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  GlobalFiltering,
+  OnChangeFn,
+  PaginationState,
+  SortingState,
+  Table as TableType,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import React from "react";
+import { DataTablePagination } from "./pagination";
+import { DataTableToolbar } from "./toolbar";
+
+export function TableView<TData, TValue>(props: {
+  table: TableType<TData>,
+  columns: ColumnDef<TData, TValue>[],
+  toolbarRender?: (table: TableType<TData>) => React.ReactNode,
+  showDefaultToolbar?: boolean,
+  defaultColumnFilters: ColumnFiltersState,
+  defaultSorting: SortingState,
+  onRowClick?: (row: TData) => void,
+}) {
+  return (
+    <div className="space-y-4">
+      <DataTableToolbar
+        table={props.table}
+        toolbarRender={props.toolbarRender}
+        showDefaultToolbar={props.showDefaultToolbar}
+        defaultColumnFilters={props.defaultColumnFilters}
+        defaultSorting={props.defaultSorting}
+      />
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {props.table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} >
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id} colSpan={header.colSpan}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {props.table.getRowModel().rows.length ? (
+              props.table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  onClick={(ev) => {
+                    // only trigger onRowClick if the element is a direct descendant; don't trigger for portals
+                    if (ev.target instanceof Node && ev.currentTarget.contains(ev.target)) {
+                      props.onRowClick?.(row.original);
+                    }
+                  }}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={props.columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={props.table} />
+    </div>
+  );
+}
+
+type DataTableProps<TData, TValue> = {
+  columns: ColumnDef<TData, TValue>[],
+  data: TData[],
+  toolbarRender?: (table: TableType<TData>) => React.ReactNode,
+  defaultVisibility?: VisibilityState,
+  defaultColumnFilters: ColumnFiltersState,
+  defaultSorting: SortingState,
+  showDefaultToolbar?: boolean,
+  onRowClick?: (row: TData) => void,
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  defaultColumnFilters,
+  defaultSorting,
+  showDefaultToolbar = true,
+  onRowClick,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>(defaultSorting);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters);
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [globalFilter, setGlobalFilter] = React.useState<any>();
+
+  return <DataTableBase
+    columns={columns}
+    data={data}
+    toolbarRender={toolbarRender}
+    defaultVisibility={defaultVisibility}
+    sorting={sorting}
+    setSorting={setSorting}
+    defaultSorting={defaultSorting}
+    columnFilters={columnFilters}
+    setColumnFilters={setColumnFilters}
+    defaultColumnFilters={defaultColumnFilters}
+    manualPagination={false}
+    manualFiltering={false}
+    pagination={pagination}
+    setPagination={setPagination}
+    globalFilter={globalFilter}
+    setGlobalFilter={setGlobalFilter}
+    showDefaultToolbar={showDefaultToolbar}
+    onRowClick={onRowClick}
+  />;
+}
+
+type DataTableManualPaginationProps<TData, TValue> = DataTableProps<TData, TValue> & {
+  onUpdate: (options: {
+    cursor: string,
+    limit: number,
+    sorting: SortingState,
+    columnFilters: ColumnFiltersState,
+    globalFilters: any,
+  }) => Promise<{ nextCursor: string | null }>,
+}
+
+export function DataTableManualPagination<TData, TValue>({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  defaultColumnFilters,
+  defaultSorting,
+  onRowClick,
+  onUpdate,
+  showDefaultToolbar = true,
+}: DataTableManualPaginationProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>(defaultSorting);
+  const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 });
+  const [cursors, setCursors] = React.useState<Record<number, string>>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(defaultColumnFilters);
+  const [globalFilter, setGlobalFilter] = React.useState<any>();
+  const [refreshCounter, setRefreshCounter] = React.useState(0);
+
+  React.useEffect(() => {
+    runAsynchronouslyWithAlert(async () => {
+      const { nextCursor } = await onUpdate({
+        cursor: cursors[pagination.pageIndex],
+        limit: pagination.pageSize,
+        sorting,
+        columnFilters,
+        globalFilters: globalFilter,
+      });
+      setCursors(c => nextCursor ? { ...c, [pagination.pageIndex + 1]: nextCursor } : c);
+    });
+  }, [pagination, sorting, columnFilters, refreshCounter]);
+
+  // Reset to first page when filters change
+  React.useEffect(() => {
+    setPagination(pagination => ({ ...pagination, pageIndex: 0 }));
+    setCursors({});
+  }, [columnFilters, sorting, pagination.pageSize]);
+
+  // Refresh the users when the global filter changes. Delay to prevent unnecessary re-renders.
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setRefreshCounter(x => x + 1);
+    }, 3_000);
+    return () => clearTimeout(timer);
+  }, [globalFilter]);
+
+  return <DataTableBase
+    columns={columns}
+    data={data}
+    toolbarRender={toolbarRender}
+    sorting={sorting}
+    setSorting={setSorting}
+    pagination={pagination}
+    setPagination={setPagination}
+    columnFilters={columnFilters}
+    setColumnFilters={setColumnFilters}
+    rowCount={pagination.pageSize * Object.keys(cursors).length + (cursors[pagination.pageIndex + 1] ? 1 : 0)}
+    globalFilter={globalFilter}
+    setGlobalFilter={setGlobalFilter}
+    defaultColumnFilters={defaultColumnFilters}
+    defaultSorting={defaultSorting}
+    defaultVisibility={defaultVisibility}
+    showDefaultToolbar={showDefaultToolbar}
+    onRowClick={onRowClick}
+  />;
+}
+
+type DataTableBaseProps<TData, TValue> = DataTableProps<TData, TValue> & {
+  sorting?: SortingState,
+  setSorting?: OnChangeFn<SortingState>,
+  pagination?: PaginationState,
+  setPagination?: OnChangeFn<PaginationState>,
+  rowCount?: number,
+  columnFilters?: ColumnFiltersState,
+  setColumnFilters?: OnChangeFn<ColumnFiltersState>,
+  manualPagination?: boolean,
+  manualFiltering?: boolean,
+  globalFilter?: any,
+  setGlobalFilter?: OnChangeFn<any>,
+}
+
+function DataTableBase<TData, TValue>({
+  columns,
+  data,
+  toolbarRender,
+  defaultVisibility,
+  sorting,
+  setSorting,
+  defaultColumnFilters,
+  defaultSorting,
+  pagination,
+  setPagination,
+  rowCount,
+  columnFilters,
+  setColumnFilters,
+  globalFilter,
+  setGlobalFilter,
+  manualPagination = true,
+  manualFiltering = true,
+  showDefaultToolbar = true,
+  onRowClick,
+}: DataTableBaseProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(defaultVisibility || {});
+
+  const table: TableType<TData> = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination,
+      globalFilter: globalFilter,
+    },
+    enableRowSelection: true,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getColumnCanGlobalFilter: (c) => c.columnDef.enableGlobalFilter ?? GlobalFiltering.getDefaultOptions!(table).getColumnCanGlobalFilter!(c),
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    autoResetAll: false,
+    manualPagination,
+    manualFiltering,
+    rowCount,
+  });
+
+  return <TableView
+    table={table}
+    columns={columns}
+    toolbarRender={toolbarRender}
+    showDefaultToolbar={showDefaultToolbar}
+    defaultColumnFilters={defaultColumnFilters}
+    defaultSorting={defaultSorting}
+    onRowClick={onRowClick}
+  />;
+}

package/src/components/data-table/faceted-filter.tsx

@@ -0,0 +1,138 @@
+import { CheckIcon } from "@radix-ui/react-icons";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Separator } from "../ui/separator";
+import { Column } from "@tanstack/react-table";
+import { ListFilter } from "lucide-react";
+import React from "react";
+import { cn } from "../../lib/utils";
+
+type DataTableFacetedFilterProps<TData, TValue> = {
+  column?: Column<TData, TValue>,
+  title?: string,
+  options: {
+    label: string,
+    value: string,
+    icon?: React.ComponentType<{ className?: string }>,
+  }[],
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue() as string[]);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border">
+          <ListFilter className="mr-2 h-4 w-4 text-gray-500" />
+          {title}
+          {selectedValues.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value);
+                      } else {
+                        selectedValues.add(option.value);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      );
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className={cn("h-4 w-4")} />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{option.label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/data-table/index.tsx

@@ -0,0 +1,9 @@
+export * from "./cells";
+export * from "./column-header";
+export * from "./data-table";
+export * from "./faceted-filter";
+export * from "./pagination";
+export * from "./toolbar-items";
+export * from "./toolbar";
+export * from "./utils";
+export * from "./view-options";

package/src/components/data-table/pagination.tsx

@@ -0,0 +1,76 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { Button } from "../ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { Table } from "@tanstack/react-table";
+
+type DataTablePaginationProps<TData> = {
+  table: Table<TData>,
+}
+
+export function DataTablePagination<TData>({
+  table,
+}: DataTablePaginationProps<TData>) {
+  return (
+    <div className="flex items-center justify-between px-2 flex-col sm:flex-row gap-y-4 sm:gap-y-0">
+      <div className="flex-1 text-sm text-muted-foreground">
+        {table.getFilteredSelectedRowModel().rows.length !== 0 ?
+          `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} row(s) selected` :
+          undefined}
+      </div>
+      <div className="flex items-center gap-x-6 lg:gap-x-8 flex-col sm:flex-row gap-y-4 sm:gap-y-0">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center justify-center text-sm font-medium">
+            {table.getState().pagination.pageIndex + 1}
+            {/* {" / "}{table.getPageCount()} */}
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <span className="sr-only">Go to previous page</span>
+              <ChevronLeftIcon className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <span className="sr-only">Go to next page</span>
+              <ChevronRightIcon className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/data-table/toolbar-items.tsx

@@ -0,0 +1,13 @@
+import { Input, cn } from "../..";
+import { Table } from "@tanstack/react-table";
+
+export function SearchToolbarItem<TData>(props: { table: Table<TData>, keyName?: string | null, placeholder: string, className?: string }) {
+  return (
+    <Input
+      placeholder={props.placeholder}
+      value={props.keyName ? `${props.table.getColumn(props.keyName)?.getFilterValue() ?? ""}` : props.table.getState().globalFilter ?? ""}
+      onChange={(event) => props.keyName ? props.table.getColumn(props.keyName)?.setFilterValue(event.target.value) : props.table.setGlobalFilter(event.target.value)}
+      className={cn("h-8 w-[250px]", props.className)}
+    />
+  );
+}

package/src/components/data-table/toolbar.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { deepPlainEquals } from "@hexclave/shared/dist/utils/objects";
+import { Button } from "../ui/button";
+import { Cell, ColumnFiltersState, SortingState, Table } from "@tanstack/react-table";
+import { download, generateCsv, mkConfig } from 'export-to-csv';
+import { DownloadIcon } from "lucide-react";
+import { DataTableViewOptions } from "./view-options";
+
+type DataTableToolbarProps<TData> = {
+  table: Table<TData>,
+  toolbarRender?: (table: Table<TData>) => React.ReactNode,
+  showDefaultToolbar?: boolean,
+  defaultColumnFilters: ColumnFiltersState,
+  defaultSorting: SortingState,
+  showResetFilters?: boolean,
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  toolbarRender,
+  showDefaultToolbar,
+  defaultColumnFilters,
+  defaultSorting,
+  showResetFilters = true,
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = !deepPlainEquals(table.getState().columnFilters, defaultColumnFilters);
+  const isSorted = !deepPlainEquals(table.getState().sorting, defaultSorting);
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2 flex-wrap flex-1 stack-scope">
+        {toolbarRender?.(table)}
+        {showResetFilters && (isFiltered || isSorted) && (
+          <Button
+            variant="ghost"
+            onClick={() => {
+              table.setColumnFilters(defaultColumnFilters);
+              table.setSorting(defaultSorting);
+            }}
+            className="h-8 px-2 lg:px-3"
+          >
+            Reset filters
+            <Cross2Icon className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+      </div>
+      {showDefaultToolbar && (
+        <>
+          <div className="flex items-center gap-2 flex-wrap">
+            <DataTableViewOptions table={table} />
+            <Button
+              variant="outline"
+              size="sm"
+              className="ml-auto hidden h-8 lg:flex"
+              onClick={() => {
+                const csvConfig = mkConfig({
+                  fieldSeparator: ',',
+                  filename: 'data',
+                  decimalSeparator: '.',
+                  useKeysAsHeaders: true,
+                });
+
+                const renderCellValue = (cell: Cell<TData, unknown>) => {
+                  const rendered = cell.renderValue();
+                  if (rendered === null) {
+                    return undefined;
+                  }
+                  if (['string', 'number', 'boolean', 'undefined'].includes(typeof rendered)) {
+                    return rendered;
+                  }
+                  if (rendered instanceof Date) {
+                    return rendered.toISOString();
+                  }
+                  if (typeof rendered === 'object') {
+                    return JSON.stringify(rendered);
+                  }
+                };
+
+
+                const rowModel = table.getCoreRowModel();
+                const rows = rowModel.rows.map(row => Object.fromEntries(row.getAllCells().map(c => [c.column.id, renderCellValue(c)]).filter(([_, v]) => v !== undefined)));
+                if (rows.length === 0) {
+                  alert("No data to export");
+                  return;
+                }
+                const csv = generateCsv(csvConfig)(rows as any);
+                download(csvConfig)(csv);
+              }}
+            >
+              <DownloadIcon className="mr-2 h-4 w-4" />
+              Export CSV
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/data-table/utils.tsx

@@ -0,0 +1,7 @@
+export function standardFilterFn (row: any, id: string, value: any) {
+  return value.includes(row.getValue(id));
+}
+
+export function arrayFilterFn (row: any, id: string, value: any) {
+  return value.some((v: any) => row.getValue(id).includes(v));
+}