@tulip-systems/core 0.2.0

package/src/modules/data-tables/strategies/pagination/strategy.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { PaginationState, Updater } from "@tanstack/react-table";
+import { useQueryStates } from "nuqs";
+import { tableSearchParams } from "../../entry";
+import { TableStrategy } from "../../lib/types";
+import { handleSortingChange } from "../helpers/sorting";
+
+export type UsePaginationStrategyInput = {
+  total: number | undefined;
+};
+
+export type PaginationStrategy = typeof usePaginationStrategy;
+
+export function usePaginationStrategy({ total }: UsePaginationStrategyInput): TableStrategy {
+  const [query, setQuery] = useQueryStates(tableSearchParams);
+
+  // Convert pagination to table state
+  const paginationState = {
+    pageIndex: query.cursor,
+    pageSize: query.limit,
+  };
+
+  // Convert sorting to table state
+  const sortingState = query.sort ? [{ id: query.sort, desc: query.order === "desc" }] : [];
+
+  const resetCursor = () => 0;
+
+  return {
+    name: "pagination",
+    rowCount: total,
+    paginationState,
+    manualPagination: true,
+    onPaginationChange: (updater: Updater<PaginationState>) => {
+      // Get the new state from the updater function
+      const newState = typeof updater === "function" ? updater(paginationState) : updater;
+
+      // Update the search params
+      setQuery({
+        cursor: Math.max(newState.pageIndex, 0),
+        limit: newState.pageSize,
+      });
+
+      // Return the new state
+      return newState;
+    },
+    tableSearchParams: tableSearchParams,
+    resetCursor,
+    sortingState,
+    manualSorting: true,
+    onSortingChange: handleSortingChange({ sortingState, setQuery, resetCursor }),
+  };
+}

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

@@ -0,0 +1,48 @@
+"use client";
+
+import { Allowed } from "@/modules/auth/components/allowed.client";
+import { TableBody, TableCell, TableRow } from "@/modules/data-tables/components/table";
+import { flexRender, Table } from "@tanstack/react-table";
+import { Fragment } from "react/jsx-runtime";
+import { TableColumnDef } from "../../../lib/types";
+import { DataTableRow } from "./row";
+
+type DataTableBodyProps<TData extends { id: string }> = {
+  table: Table<TData>;
+};
+
+export function DataTableBody<TData extends { id: string }>({ table }: DataTableBodyProps<TData>) {
+  const { rows } = table.getRowModel();
+
+  return (
+    <TableBody>
+      {table.getRowModel().rows?.length ? (
+        rows.map((row) => (
+          <DataTableRow key={row.id} row={row} table={table}>
+            {row.getVisibleCells().map((cell) => {
+              const columnDef = cell.column.columnDef as TableColumnDef<TData>;
+
+              const children = flexRender(cell.column.columnDef.cell, cell.getContext());
+
+              if (!columnDef.permissions) {
+                return <Fragment key={cell.id}>{children}</Fragment>;
+              }
+
+              return (
+                <Allowed key={cell.id} permission={columnDef.permissions}>
+                  {children}
+                </Allowed>
+              );
+            })}
+          </DataTableRow>
+        ))
+      ) : (
+        <TableRow>
+          <TableCell colSpan={table.getAllFlatColumns().length} className="h-24 text-center">
+            Geen resultaten gevonden
+          </TableCell>
+        </TableRow>
+      )}
+    </TableBody>
+  );
+}

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

@@ -0,0 +1,18 @@
+"use client";
+
+import { Table } from "@tanstack/react-table";
+import { TableHeader, TableHeaderCell, TableHeaderRow } from "../../../components/header";
+
+export function DataTableHeader<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+  return (
+    <TableHeader>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <TableHeaderRow key={headerGroup.id}>
+          {headerGroup.headers.map((header) => (
+            <TableHeaderCell key={header.id} header={header} />
+          ))}
+        </TableHeaderRow>
+      ))}
+    </TableHeader>
+  );
+}

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

@@ -0,0 +1,40 @@
+import {
+  ContextCommandMenu,
+  ContextCommandMenuContent,
+  ContextCommandMenuTrigger,
+} from "@/modules/commands/menus/context-menu.client";
+import { TableRow } from "@/modules/data-tables/components/table";
+import { Row, Table } from "@tanstack/react-table";
+import * as React from "react";
+import { TableMeta } from "../../../lib/types";
+
+export type DataTableRowProps<TData extends { id: string }> = React.ComponentProps<
+  typeof TableRow
+> & {
+  row: Row<TData>;
+  table: Table<TData>;
+};
+
+export function DataTableRow<TData extends { id: string }>({
+  row,
+  table,
+  className,
+  ...props
+}: DataTableRowProps<TData>) {
+  const meta = table.options.meta as TableMeta<TData>;
+
+  return (
+    <ContextCommandMenu>
+      <ContextCommandMenuTrigger asChild>
+        <TableRow {...props} data-state={row.getIsSelected() && "selected"} />
+      </ContextCommandMenuTrigger>
+
+      <ContextCommandMenuContent
+        data={row.original}
+        commands={meta.commands || []}
+        meta={meta as never}
+        className="w-[300px]"
+      />
+    </ContextCommandMenu>
+  );
+}

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { TableCommandMenu } from "@/modules/commands/menus/data-table-menu.client";
+import { TableBottombar, TableFooter } from "@/modules/data-tables/components/footer";
+import { Table } from "@/modules/data-tables/components/table";
+import { TableMeta } from "@/modules/data-tables/entry";
+import { useTable } from "@/modules/data-tables/hooks/use-table.client";
+import { ComponentProps } from "react";
+import { DataTableBody } from "./body";
+import { DataTableHeader } from "./header";
+
+export function DataTable<TData extends { id: string }>(props: ComponentProps<typeof Table>) {
+  const table = useTable<TData>();
+  const meta = table.options.meta as TableMeta<TData>;
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table {...props}>
+          <DataTableHeader table={table} />
+          <DataTableBody table={table} />
+          <TableFooter table={table} />
+        </Table>
+      </div>
+
+      <TableBottombar table={table} />
+      {meta.commands && <TableCommandMenu table={table} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+"use client";
+
+import { Allowed } from "@/modules/auth/components/allowed.client";
+import { TableBody, TableCell, TableRow } from "@/modules/data-tables/components/table";
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import {
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+import { flexRender, Table } from "@tanstack/react-table";
+import { Fragment } from "react/jsx-runtime";
+import { TableColumnDef } from "../../../lib/types";
+import { useInlineTableContext } from "../hooks/context.client";
+import { useInlineDataTableHotkeys } from "../hooks/use-hotkeys.client";
+import { InlineTableRow } from "./row.client";
+
+export function InlineTableBody<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+  const context = useInlineTableContext();
+
+  const { rows } = table.getRowModel();
+
+  const { setNodeRef } = useDroppable({ id: "inline-data-table" });
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  useInlineDataTableHotkeys();
+
+  if (rows?.length === 0) {
+    return (
+      <TableBody>
+        <TableRow>
+          <TableCell
+            colSpan={
+              table.getAllFlatColumns().length +
+              1 +
+              (context.isDraggable ? 1 : 0) +
+              (table.options.enableRowSelection ? 1 : 0)
+            }
+            className="h-24 text-center"
+          >
+            Geen resultaten gevonden
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    );
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    if (!context.isDraggable) return;
+    const { active, over } = event;
+
+    if (active.id !== over?.id) {
+      const fromIndex = rows.findIndex((item) => item.id === active.id);
+      const toIndex = rows.findIndex((item) => item.id === over?.id);
+
+      context.moveRow({ fromIndex, toIndex });
+    }
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragEnd={handleDragEnd}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+    >
+      <SortableContext items={rows.map((row) => row.id)} strategy={rectSortingStrategy}>
+        <TableBody ref={setNodeRef}>
+          {rows.map((row) => (
+            <InlineTableRow
+              key={row.id}
+              row={row}
+              data-row-id={row.id}
+              table={table}
+              className="relative"
+            >
+              {row.getVisibleCells().map((cell) => {
+                const columnDef = cell.column.columnDef as TableColumnDef<TData>;
+
+                const children = flexRender(cell.column.columnDef.cell, cell.getContext());
+
+                if (!columnDef.permissions) {
+                  return <Fragment key={cell.id}>{children}</Fragment>;
+                }
+
+                return (
+                  <Allowed key={cell.id} permission={columnDef.permissions}>
+                    {children}
+                  </Allowed>
+                );
+              })}
+            </InlineTableRow>
+          ))}
+        </TableBody>
+      </SortableContext>
+    </DndContext>
+  );
+}

package/src/modules/data-tables/tables/inline-table/components/cells/common.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils/cn";
+import * as React from "react";
+import { TableCell } from "../../../../components/table";
+
+export function TableInlineCell({ className, ...props }: React.ComponentProps<typeof TableCell>) {
+  return (
+    <TableCell
+      className={cn(
+        "focus-within:bg-accent focus-within:text-accent-foreground h-9 border-l p-0 align-middle first:border-0 [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/modules/data-tables/tables/inline-table/components/cells/drag-handle.client.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@/components/ui/button";
+import { useSortable } from "@dnd-kit/sortable";
+import { CellContext } from "@tanstack/react-table";
+import { GripIcon } from "lucide-react";
+import { createTableCell } from "../../../../lib/helpers/create-column";
+import { TableInlineCell } from "./common";
+
+/**
+ * Create a new column with the drag handle
+ */
+function TableDragHandle<TData, TValue>({ row }: CellContext<TData, TValue>) {
+  const rowId = (row.original as { id: string }).id;
+
+  const { attributes, listeners } = useSortable({ id: rowId });
+
+  return (
+    <TableInlineCell className="w-8">
+      <Button
+        {...attributes}
+        {...listeners}
+        variant="ghost"
+        size="icon"
+        type="button"
+        className="h-full w-8 rounded-none border-none"
+      >
+        <GripIcon className="fill-muted size-4" />
+      </Button>
+    </TableInlineCell>
+  );
+}
+
+/**
+ * Create a new column with the drag handle
+ */
+export const createTableDragHandleCell = createTableCell({
+  id: "drag-handle",
+  cell: TableDragHandle,
+  enableHiding: false,
+  enableSorting: false,
+});

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

@@ -0,0 +1,20 @@
+import { Table } from "@tanstack/react-table";
+import { TableHeader, TableHeaderCell, TableHeaderRow } from "../../../components/header";
+
+export function InlineTableHeader<TData extends { id: string }>({
+  table,
+}: {
+  table: Table<TData>;
+}) {
+  return (
+    <TableHeader>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <TableHeaderRow key={headerGroup.id}>
+          {headerGroup.headers.map((header) => (
+            <TableHeaderCell key={header.id} header={header} />
+          ))}
+        </TableHeaderRow>
+      ))}
+    </TableHeader>
+  );
+}

package/src/modules/data-tables/tables/inline-table/components/inputs/advanced-select.client.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils/cn";
+import { DropdownMenu } from "@radix-ui/react-dropdown-menu";
+import { useInlineTableContext } from "../../hooks/context.client";
+import {
+  useInlineDataTableInput,
+  UseInlineDataTableInputParams,
+} from "../../hooks/use-input.client";
+
+export type AdvancedSelectItem = {
+  id: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type InlineDataTableAdvancedSelectProps<TData, TValue> = UseInlineDataTableInputParams<
+  TData,
+  TValue
+> & {
+  options: AdvancedSelectItem[];
+  disabled?: boolean;
+  className?: string;
+  autoSelect?: boolean;
+};
+
+export function InlineDataTableAdvancedSelect<TData extends { id: string }, TValue>({
+  context,
+  action,
+  permission,
+  options,
+  disabled,
+  autoSelect,
+  className,
+}: InlineDataTableAdvancedSelectProps<TData, TValue>) {
+  const { disabledColumns } = useInlineTableContext();
+
+  const { value, setValue, isAllowed } = useInlineDataTableInput({ context, action, permission });
+
+  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
+
+  return (
+    <div className="flex h-full">
+      <input
+        type="text"
+        value={(value as string) ?? ""}
+        data-input
+        disabled={isDisabled}
+        onFocus={(e) => {
+          if (autoSelect) e.target.select();
+        }}
+        onChange={(e) => {
+          setValue(e.target.value as TValue);
+        }}
+        className={cn(
+          "h- placeholder:text-primary-foreground read-only:bg-muted/50 flex w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+      />
+
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          disabled={isDisabled}
+          className="bg-muted/30 flex aspect-square h-full items-center justify-center rounded-none border-none outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none"
+        >
+          <Icons.chevronDown className="size-4 opacity-50" />
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent className="w-56">
+          {options.map((item) => (
+            <DropdownMenuItem
+              disabled={item.disabled}
+              className="cursor-pointer"
+              key={item.id}
+              onSelect={() => setValue(item.id as TValue)}
+            >
+              {item.label}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/modules/data-tables/tables/inline-table/components/inputs/combobox.client.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Combobox } from "@/components/ui/combobox.client";
+import { useInlineTableContext } from "../../hooks/context.client";
+import {
+  useInlineDataTableInput,
+  UseInlineDataTableInputParams,
+} from "../../hooks/use-input.client";
+
+export type ComboboxItem = {
+  id: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type InlineDataTableComboboxProps<TData, TValue> = UseInlineDataTableInputParams<TData, TValue> & {
+  options: ComboboxItem[];
+  emptyMessage?: string;
+  placeholder?: string;
+  disabled?: boolean;
+};
+
+export function InlineDataTableCombobox<TData extends { id: string }, TValue>({
+  context,
+  action,
+  permission,
+  disabled,
+  ...props
+}: InlineDataTableComboboxProps<TData, TValue>) {
+  const { disabledColumns } = useInlineTableContext();
+
+  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
+    context,
+    action,
+    permission,
+  });
+
+  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
+
+  return (
+    <Combobox
+      {...props}
+      value={value}
+      disabled={isDisabled}
+      onSelect={setValue}
+      onBlur={(e) => mutate(e.target.value as TValue)}
+      className="rounded-none border-none shadow-none"
+    />
+  );
+
+  // return (
+  //   <Popover open={open} onOpenChange={setOpen}>
+  //     <Command className="text-foreground bg-transparent">
+  //       <PopoverAnchor asChild>
+  //         <CommandPrimitive.Input
+  //           data-input
+  //           value={value?.toString() ?? ""}
+  //           placeholder={placeholder}
+  //           disabled={isDisabled}
+  //           onValueChange={(value) => setValue(value as TValue)}
+  //           onKeyDown={(e) => setOpen(e.key !== "Escape")}
+  //           onMouseDown={() => setOpen((open) => !!value || !open)}
+  //           onBlur={(e) => {
+  //             setOpen(false);
+  //             mutate(e.target.value as TValue);
+  //           }}
+  //           onFocus={() => setOpen(true)}
+  //           className="read-only:bg-muted/50 h-full w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+  //         />
+  //       </PopoverAnchor>
+
+  //       {!open && <CommandList aria-hidden="true" className="hidden" />}
+
+  //       <PopoverContent
+  //         asChild
+  //         onOpenAutoFocus={(e) => e.preventDefault()}
+  //         onInteractOutside={(e) => {
+  //           if (e.target instanceof Element && e.target.hasAttribute("cmdk-input")) {
+  //             e.preventDefault();
+  //           }
+  //         }}
+  //         className="w-[var(--radix-popover-trigger-width)] p-0"
+  //       >
+  //         <CommandList>
+  //           {options.length > 0 && (
+  //             <CommandGroup>
+  //               {options.map((option) => (
+  //                 <CommandItem
+  //                   key={option.id}
+  //                   value={option.id}
+  //                   onMouseDown={(e) => e.preventDefault()}
+  //                   onSelect={(id) => {
+  //                     setValue(id as TValue);
+  //                     setOpen(false);
+  //                   }}
+  //                 >
+  //                   {option.label}
+  //                 </CommandItem>
+  //               ))}
+  //             </CommandGroup>
+  //           )}
+
+  //           <CommandEmpty className="px-3 py-1">{emptyMessage}</CommandEmpty>
+  //         </CommandList>
+  //       </PopoverContent>
+  //     </Command>
+  //   </Popover>
+  // );
+}