@tulip-systems/core 0.2.0

package/src/modules/data-tables/components/header.tsx

@@ -0,0 +1,67 @@
+import { cn } from "@/lib/utils/cn";
+import { Allowed } from "@/modules/auth/components/allowed.client";
+import { TableRow } from "@/modules/data-tables/components/table";
+import { flexRender, Header, Table } from "@tanstack/react-table";
+import { TableColumnDef } from "../lib/types";
+
+/**
+ * TableHeaderProps
+ */
+export type TableHeaderProps<TData> = {
+  table: Table<TData>;
+};
+
+/**
+ * DataTableHeader
+ */
+export function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />;
+}
+
+/**
+ * DataTableHeaderRow
+ */
+export const TableHeaderRow = TableRow;
+
+/**
+ * TableHead
+ */
+export function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-muted-foreground bg-muted/70 h-10 whitespace-nowrap px-2 text-left align-middle font-medium", //[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * DataTableHeaderCell
+ */
+type DataTableHeaderCellProps<TData> = {
+  header: Header<TData, unknown>;
+};
+
+export function TableHeaderCell<TData>({ header }: DataTableHeaderCellProps<TData>) {
+  const columnDef = header.column.columnDef as TableColumnDef<TData>;
+
+  const children = (
+    <TableHead key={header.id}>
+      {header.isPlaceholder
+        ? null
+        : flexRender(header.column.columnDef.header, header.getContext())}
+    </TableHead>
+  );
+
+  if (!columnDef.permissions) return children;
+
+  return (
+    <Allowed key={header.id} permission={columnDef.permissions}>
+      {children}
+    </Allowed>
+  );
+}

package/src/modules/data-tables/components/layout.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils/cn";
+import { ComponentProps } from "react";
+
+export function TableLayout({ className, children, ...props }: ComponentProps<"div">) {
+  return (
+    <div className={cn("space-y-3", className)} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/modules/data-tables/components/search-input.client.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { useSearch } from "../hooks/use-search.client";
+
+export function TableSearchInput() {
+  const { defaultValue, handleSearch } = useSearch();
+
+  return (
+    <Input
+      placeholder="Zoeken..."
+      defaultValue={defaultValue}
+      onChange={(e) => handleSearch(e.target.value)}
+      className="h-8 w-[150px] min-w-fit lg:w-[250px]"
+    />
+  );
+}

package/src/modules/data-tables/components/skeleton.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from "@/modules/data-tables/components/table";
+import { TableHead, TableHeader } from "./header";
+
+export function TableSkeleton() {
+  return (
+    <>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted relative">
+              {Array.from({ length: 15 }).map((_, index) => (
+                <TableHead key={index}>
+                  <Skeleton className="bg-background my-2 h-2 w-full rounded-full" />
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: 15 }).map((_, index) => (
+              <TableRow key={index} className="relative">
+                {Array.from({ length: 15 }).map((_, index) => (
+                  <TableCell key={index}>
+                    <Skeleton className="my-2 h-2 w-full rounded-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,80 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils/cn";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({
+  readonly,
+  className,
+  ...props
+}: React.ComponentProps<"td"> & { readonly?: boolean }) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "whitespace-nowrap p-2 align-middle", //[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]
+        readonly && "bg-muted/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableRow };

package/src/modules/data-tables/components/toolbar.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils/cn";
+import type { HTMLAttributes } from "react";
+
+type TableToolbarProps = HTMLAttributes<HTMLDivElement> & {
+  children: React.ReactNode;
+};
+
+export function TableToolbar({ children, className, ...props }: TableToolbarProps) {
+  return (
+    <div
+      {...props}
+      className={cn("flex max-w-full justify-between gap-5 overflow-x-auto p-1", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+type TableToolbarListProps = HTMLAttributes<HTMLDivElement> & {
+  children: React.ReactNode;
+};
+
+export function TableToolbarList({ children, className, ...props }: TableToolbarListProps) {
+  return (
+    <div {...props} className={cn("flex flex-row gap-5", className)}>
+      {children}
+    </div>
+  );
+}

package/src/modules/data-tables/entry.client.ts

@@ -0,0 +1,39 @@
+/**
+ * Components
+ */
+export * from "./components/cell/common.client";
+export * from "./components/cell/index.client";
+export * from "./components/cell/select.client";
+export * from "./components/filters/combobox.client";
+export * from "./components/filters/slider.client";
+export * from "./components/search-input.client";
+export * from "./tables/inline-table/components/cells/drag-handle.client";
+
+/**
+ * Hooks
+ */
+export * from "./hooks/use-context.client";
+export * from "./hooks/use-table.client";
+
+/**
+ * Inline tables
+ */
+export * from "./tables/inline-table/components/cells/common";
+export * from "./tables/inline-table/components/inputs/advanced-select.client";
+export * from "./tables/inline-table/components/inputs/combobox.client";
+export * from "./tables/inline-table/components/inputs/input.client";
+export * from "./tables/inline-table/components/inputs/read-only";
+export * from "./tables/inline-table/components/inputs/select.client";
+export * from "./tables/inline-table/components/table";
+export * from "./tables/inline-table/hooks/context.client";
+
+/**
+ * Data tables
+ */
+export * from "./tables/data-table/components/table";
+
+/**
+ * Strategies
+ */
+export * from "./strategies/infinite/strategy";
+export * from "./strategies/pagination/strategy";

package/src/modules/data-tables/entry.server.ts

@@ -0,0 +1,13 @@
+/**
+ * Lib
+ */
+export * from "./lib/converters/cursor";
+export * from "./lib/converters/dto";
+export * from "./lib/converters/filter";
+export * from "./lib/converters/search";
+export * from "./lib/converters/sorting";
+
+/**
+ * Server
+ */
+export * from "./server/get-data.server";

package/src/modules/data-tables/entry.ts

@@ -0,0 +1,20 @@
+/**
+ * Components
+ */
+export * from "./components/column-header";
+export * from "./components/header";
+export * from "./components/layout";
+export * from "./components/skeleton";
+export * from "./components/table";
+export * from "./components/toolbar";
+
+/**
+ * Lib
+ */
+export * from "./lib/filters/config";
+export * from "./lib/filters/parsers";
+export * from "./lib/filters/resolvers";
+export * from "./lib/search-params";
+export * from "./lib/types";
+export * from "./lib/validators";
+

package/src/modules/data-tables/hooks/use-context.client.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { type CommandDef } from "@/modules/commands/lib/definitions";
+import { type TableOptions, type VisibilityState } from "@tanstack/react-table";
+import {
+  createContext,
+  Dispatch,
+  PropsWithChildren,
+  SetStateAction,
+  use,
+  useEffect,
+  useState,
+} from "react";
+import type { Selection, TableColumnDef, TableStrategy } from "../lib/types";
+
+type useReactTableProps<TData extends { id: string }> = Omit<
+  TableOptions<TData>,
+  "getCoreRowModel"
+> & {
+  getCoreRowModel?: TableOptions<TData>["getCoreRowModel"];
+};
+
+/**
+ * Use table config
+ */
+export type TableConfigContextValue<TData extends { id: string }> = useReactTableProps<TData> & {
+  queryData: TData[];
+  data: TData[];
+  setData: Dispatch<SetStateAction<TData[]>>;
+  columns: TableColumnDef<TData>[];
+  strategy: TableStrategy;
+  selection?: Selection;
+  columnVisibility?: VisibilityState;
+  commands?: CommandDef<TData>[];
+};
+
+const TableConfigContext = createContext({});
+
+/**
+ * Table context hook
+ */
+export function useTableConfigContext<
+  TData extends { id: string },
+>(): TableConfigContextValue<TData> {
+  const context = use(TableConfigContext);
+  if (!context) throw new Error("TableConfigContext not found!");
+  return context as TableConfigContextValue<TData>;
+}
+
+/**
+ * Table context provider
+ */
+export function TableConfigProvider<TData extends { id: string }>({
+  children,
+  config,
+}: PropsWithChildren<{ config: CreateTableConfigInput<TData> }>) {
+  const [data, setData] = useState(config.queryData);
+  useEffect(() => setData(config.queryData), [config.queryData]);
+
+  return <TableConfigContext value={{ ...config, data, setData }}>{children}</TableConfigContext>;
+}
+
+/**
+ * Create use table config hook
+ */
+type CreateTableConfigInput<TData extends { id: string }> = Omit<
+  TableConfigContextValue<TData>,
+  "data" | "setData"
+>;
+
+export const createTableConfig = <TData extends { id: string }>(
+  config: CreateTableConfigInput<TData>,
+) => config;

package/src/modules/data-tables/hooks/use-filter.client.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { parseAsArrayOf, parseAsString, useQueryState, useQueryStates } from "nuqs";
+import { useTableConfigContext } from "./use-context.client";
+
+/**
+ * Filter hook for data table filters
+ * @param {string} id
+ */
+export function useFilter(id: string) {
+  const context = useTableConfigContext();
+
+  const [values, setQuery] = useQueryState(id, parseAsArrayOf(parseAsString));
+  const [_, setDataTableQuery] = useQueryStates(context.strategy.tableSearchParams);
+
+  function onFilterChange(values: string[]) {
+    if (!values.length) return clearFilters();
+
+    setQuery(values);
+
+    const cursor = context.strategy.resetCursor();
+    setDataTableQuery({ cursor });
+  }
+
+  function clearFilters() {
+    setQuery(null);
+    setDataTableQuery(null);
+  }
+
+  return { values, onFilterChange, clearFilters };
+}

package/src/modules/data-tables/hooks/use-search.client.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { useQueryStates } from "nuqs";
+import { useDebouncedCallback } from "use-debounce";
+import { useTableConfigContext } from "./use-context.client";
+import { tableSearchParams } from "../entry";
+
+/**
+ * Search hook for data table search
+ */
+export function useSearch() {
+  const context = useTableConfigContext();
+  const [query, setQuery] = useQueryStates(tableSearchParams);
+
+  const defaultValue = query.search ?? "";
+
+  const handleSearch = useDebouncedCallback((search: string | undefined) => {
+    const cursor = context.strategy.resetCursor();
+
+    if (!search) {
+      setQuery({ search: null, cursor });
+      return;
+    }
+
+    setQuery({ search, cursor });
+  }, 300);
+
+  return { defaultValue, handleSearch };
+}

package/src/modules/data-tables/hooks/use-selection.client.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import type { RowSelectionState, Updater } from "@tanstack/react-table";
+import React from "react";
+import { Selection } from "../lib/types";
+
+/**
+ * Row selection props
+ */
+type UseSelectionProps<TData extends { id: string }> = {
+  data: TData[];
+  selection?: Selection;
+};
+
+/**
+ * Row selection hook for tanstack/react-table
+ * @param { UseSelectionProps<TData> } props
+ */
+export function useSelection<TData extends { id: string }>(props: UseSelectionProps<TData>) {
+  const [rowSelectionState, setRowSelectionState] = React.useState({});
+  const [selectedData, setSelectedData] = React.useState<TData[]>([]);
+
+  const rowSelection = props.selection?.rowSelection ?? rowSelectionState;
+  const setRowSelection = props.selection?.setRowSelection ?? setRowSelectionState;
+
+  /**
+   * Handle row selection change
+   * @param { Updater<RowSelectionState> } updater
+   * @returns { RowSelectionState }
+   */
+  function onRowSelectionChange(updater: Updater<RowSelectionState>): RowSelectionState {
+    // Get the new state from the updater function
+    const newState = typeof updater === "function" ? updater(rowSelection) : updater;
+
+    // Update the state
+    setRowSelection(newState);
+
+    // Get the selected IDs from the new state
+    const selectedIds = new Set(Object.keys(newState).filter((id) => newState[id]));
+
+    // Filter out the items that are no longer selected and add the newly selected items
+    setSelectedData((prevData) => {
+      // Create a Set of previously selected IDs for faster lookup
+      const prevSelectedIds = new Set(prevData.map((item) => item.id));
+
+      return [
+        ...prevData.filter(({ id }) => selectedIds.has(id)),
+        ...props.data.filter(({ id }) => selectedIds.has(id) && !prevSelectedIds.has(id)),
+      ];
+    });
+
+    // Set the row selection data
+    return newState;
+  }
+
+  return { rowSelection, selectedData, onRowSelectionChange };
+}

package/src/modules/data-tables/hooks/use-table.client.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import {
+  getCoreRowModel,
+  useReactTable,
+  type ColumnFiltersState,
+  type VisibilityState,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import type { TableMeta } from "../lib/types";
+import { useTableConfigContext } from "./use-context.client";
+import { useSelection } from "./use-selection.client";
+
+/**
+ * Server data table
+ */
+export function useTable<TData extends { id: string }>() {
+  const { data, strategy, selection, columnVisibility, commands, ...options } =
+    useTableConfigContext<TData>();
+
+  const { rowSelection, selectedData, onRowSelectionChange } = useSelection({
+    data,
+    selection,
+  });
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+  const [columnVisibilityState, setColumnVisibility] = useState<VisibilityState>(
+    columnVisibility ?? {},
+  );
+
+  return useReactTable({
+    ...options,
+    data,
+    rowCount: strategy.rowCount,
+    state: {
+      ...options.state,
+      rowSelection,
+      columnFilters,
+      columnVisibility: columnVisibilityState,
+      sorting: strategy.sortingState,
+      pagination: strategy.paginationState,
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.id,
+    manualPagination: strategy.manualPagination,
+    onPaginationChange: strategy.onPaginationChange,
+    manualSorting: strategy.manualSorting,
+    onSortingChange: strategy.onSortingChange,
+    enableRowSelection: true,
+    onRowSelectionChange,
+    enableColumnFilters: true,
+    onColumnFiltersChange: setColumnFilters,
+    enableHiding: true,
+    onColumnVisibilityChange: setColumnVisibility,
+    meta: { ...options.meta, selectedData, commands, strategy } satisfies TableMeta<TData>,
+  });
+}

package/src/modules/data-tables/lib/converters/cursor.ts

@@ -0,0 +1,13 @@
+import { TableQuerySchema } from "../validators";
+
+/**
+ * Convert pagination to DB query
+ * @param {ConvertPaginationToQueryParamsInput} pagination
+ * @returns {{ limit: number; offset: number; }}
+ */
+export function convertCursorToQueryParams({
+  limit,
+  cursor,
+}: Pick<TableQuerySchema, "cursor" | "limit">) {
+  return { limit, offset: cursor * limit };
+}

package/src/modules/data-tables/lib/converters/dto.ts

@@ -0,0 +1,54 @@
+import { TableQuerySchema } from "../validators";
+
+/**
+ * Data table query response
+ */
+export type TableQueryResponse<TData extends object> = {
+  data: TData[];
+  pagination: TableQueryPaginationResponse;
+};
+
+export type TableQueryPaginationResponse = {
+  total: number;
+  totalPages: number;
+  limit: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  cursor: number;
+  nextCursor: number | null;
+  previousCursor: number | null;
+};
+
+/**
+ * Table query response input
+ */
+type TableQueryResponseProps<TData extends object> = {
+  data: TData[];
+  input: TableQuerySchema;
+  total: number;
+};
+/**
+ * Convert pagination to DB query
+ */
+export function createTableQueryResponse<TData extends object>({
+  data,
+  input,
+  total,
+}: TableQueryResponseProps<TData>) {
+  const hasNextPage = total > (input.cursor + 1) * input.limit;
+  const hasPreviousPage = input.cursor > 0;
+
+  return {
+    data,
+    pagination: {
+      total: total,
+      totalPages: Math.ceil(total / input.limit),
+      limit: input.limit,
+      hasNextPage,
+      hasPreviousPage,
+      cursor: input.cursor,
+      nextCursor: hasNextPage ? input.cursor + 1 : null,
+      previousCursor: hasPreviousPage ? input.cursor - 1 : null,
+    } satisfies TableQueryPaginationResponse,
+  };
+}

package/src/modules/data-tables/lib/converters/filter.ts

@@ -0,0 +1,11 @@
+/**
+ * Converts a filter value to an array of strings.
+ * @param { string | string[] | undefined } filterValue
+ * @returns { string[] }
+ */
+export function convertFilterValue<TValue extends string>(
+  filterValue: string | string[] | undefined,
+): TValue[] | null {
+  if (!filterValue) return null;
+  return (typeof filterValue === "string" ? [filterValue] : filterValue) as TValue[];
+}

package/src/modules/data-tables/lib/converters/search.ts

@@ -0,0 +1,23 @@
+import { type SQL, ilike, or } from "drizzle-orm";
+import type { PgColumn } from "drizzle-orm/pg-core";
+import { TableQuerySchema } from "../validators";
+
+export type ConvertSearchToQueryParamsFields = PgColumn[];
+
+/**
+ * Convert search to DB query
+ * @param {ConvertSearchToQueryParamsInput}
+ * @returns { { OR: Record<string, { contains: string, mode: "insensitive" }> } }
+ */
+export function convertSearchToQueryParams(
+  { search }: Pick<TableQuerySchema, "search">,
+  fields: ConvertSearchToQueryParamsFields,
+): SQL | undefined {
+  if (!search) return undefined;
+
+  // create an array of search fields with the search query applied
+  const searchFields = fields.map((field) => ilike(field, `%${search}%`));
+
+  // return the query with the search fields
+  return or(...searchFields);
+}