@tulip-systems/core 0.2.0

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

@@ -0,0 +1,108 @@
+"use client";
+
+import type { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils/cn";
+import { ComponentProps } from "react";
+import { useInlineTableContext } from "../../hooks/context.client";
+import {
+  useInlineDataTableInput,
+  UseInlineDataTableInputParams,
+} from "../../hooks/use-input.client";
+
+export type InlineDataTableInputProps<TData, TValue> = Omit<ComponentProps<typeof Input>, "type"> &
+  UseInlineDataTableInputParams<TData, TValue> & { autoSelect?: boolean };
+
+export function InlineDataTableStringInput<TData extends { id: string }, TValue>({
+  context,
+  action,
+  permission,
+  onChange,
+  onBlur,
+  onFocus,
+  autoSelect,
+  disabled,
+  className,
+  ...props
+}: InlineDataTableInputProps<TData, TValue>) {
+  const { disabledColumns } = useInlineTableContext();
+
+  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
+    context,
+    action,
+    permission,
+  });
+
+  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
+
+  return (
+    <input
+      {...props}
+      key={`${context.row.id}-${context.column.id}`}
+      type="text"
+      value={value as string}
+      data-input
+      disabled={isDisabled}
+      onFocus={(e) => {
+        if (autoSelect) e.target.select();
+        onFocus?.(e);
+      }}
+      onChange={(e) => {
+        setValue(e.target.value as TValue);
+        onChange?.(e);
+      }}
+      onBlur={(e) => {
+        mutate(e.target.value as TValue);
+        onBlur?.(e);
+      }}
+      className={cn(
+        "placeholder:text-primary-foreground read-only:bg-muted/50 flex 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",
+        className,
+      )}
+    />
+  );
+}
+
+export function InlineDataTableNumberInput<TData extends { id: string }, TValue>({
+  context,
+  action,
+  onChange,
+  onFocus,
+  onBlur,
+  autoSelect,
+  disabled,
+  className,
+  ...props
+}: InlineDataTableInputProps<TData, TValue>) {
+  const { disabledColumns } = useInlineTableContext();
+
+  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({ context, action });
+
+  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
+
+  return (
+    <input
+      {...props}
+      type="number"
+      value={value as number}
+      data-input
+      disabled={isDisabled}
+      onFocus={(e) => {
+        if (autoSelect) e.target.select();
+        onFocus?.(e);
+      }}
+      onChange={(e) => {
+        setValue(e.target.valueAsNumber as TValue);
+        onChange?.(e);
+      }}
+      onBlur={(e) => {
+        mutate(e.target.value as TValue);
+        onBlur?.(e);
+      }}
+      className={cn(
+        "placeholder:text-primary-foreground read-only:bg-muted/50 flex 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",
+        "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+        className,
+      )}
+    />
+  );
+}

package/src/modules/data-tables/tables/inline-table/components/inputs/read-only.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils/cn";
+import React from "react";
+
+export function InlineDataTableReadOnly({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      {...props}
+      className={cn("bg-muted/50 flex h-full w-full items-center truncate px-3", className)}
+    >
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,102 @@
+"use client";
+
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select.client";
+import { cn } from "@/lib/utils/cn";
+import React from "react";
+import { useInlineTableContext } from "../../hooks/context.client";
+import {
+  useInlineDataTableInput,
+  UseInlineDataTableInputParams,
+} from "../../hooks/use-input.client";
+
+export type SelectItem = {
+  id: string;
+  value: string;
+  label?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export type InlineDataTableSelectProps<TData, TValue> = UseInlineDataTableInputParams<
+  TData,
+  TValue
+> & {
+  placeholder?: React.ReactNode;
+  options: SelectItem[];
+  renderSelectedItem?: (selectedItem: SelectItem) => React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function InlineDataTableSelect<TData extends { id: string }, TValue>({
+  context,
+  action,
+  permission,
+  placeholder,
+  options,
+  renderSelectedItem,
+  disabled,
+  className,
+}: InlineDataTableSelectProps<TData, TValue>) {
+  const { disabledColumns } = useInlineTableContext();
+
+  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
+    context,
+    action,
+    permission,
+  });
+  const incomingSelectedItem = options.find((item) => item.id === value);
+
+  const [open, setOpen] = React.useState(false);
+  const [internalSelectedItem, setInternalSelectedItem] = React.useState<SelectItem | undefined>();
+
+  const selectedItem = incomingSelectedItem ?? internalSelectedItem;
+
+  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
+
+  return (
+    <Select
+      open={open}
+      defaultValue={value as string}
+      onOpenChange={setOpen}
+      onValueChange={(id) => {
+        const foundItem = options.find((item) => item.id === id);
+
+        if (!foundItem) return;
+
+        setValue(foundItem.id as TValue);
+        mutate(foundItem.id as TValue);
+        setInternalSelectedItem(foundItem);
+        setOpen(false);
+      }}
+    >
+      <SelectTrigger
+        disabled={isDisabled}
+        className={cn(
+          "h-full w-full border-none outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none",
+          className,
+        )}
+      >
+        {selectedItem ? (
+          <div className="flex items-center">
+            {renderSelectedItem?.(selectedItem) ?? selectedItem.label ?? selectedItem.value}
+          </div>
+        ) : (
+          (placeholder ?? "Kies een optie...")
+        )}
+      </SelectTrigger>
+
+      <SelectContent>
+        {options.map((item) => (
+          <SelectItem
+            disabled={item.disabled}
+            className="cursor-pointer"
+            key={item.id}
+            value={item.id}
+          >
+            {item.label ?? item.value}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

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

@@ -0,0 +1,57 @@
+"use client";
+
+import {
+  ContextCommandMenu,
+  ContextCommandMenuContent,
+  ContextCommandMenuTrigger,
+} from "@/modules/commands/entry.client";
+import { TableRow } from "@/modules/data-tables/components/table";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { type Row, type Table } from "@tanstack/react-table";
+import * as React from "react";
+import { TableMeta } from "../../../lib/types";
+
+export type InlineTableRowProps<TData extends { id: string }> =
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    row: Row<TData>;
+    table: Table<TData>;
+  };
+
+export function InlineTableRow<TData extends { id: string }>({
+  row,
+  table,
+  children,
+  ...props
+}: InlineTableRowProps<TData>) {
+  const meta = table.options.meta as TableMeta<TData>;
+
+  const rowId = (row.original as { id: string }).id;
+
+  const { setNodeRef, transform, transition } = useSortable({ id: rowId });
+
+  return (
+    <ContextCommandMenu>
+      <ContextCommandMenuTrigger asChild>
+        <TableRow
+          {...props}
+          ref={setNodeRef}
+          data-state={row.getIsSelected() && "selected"}
+          style={{
+            transform: CSS.Transform.toString(transform),
+            transition,
+          }}
+        >
+          {children}
+        </TableRow>
+      </ContextCommandMenuTrigger>
+
+      <ContextCommandMenuContent
+        data={row.original}
+        commands={meta.commands || []}
+        meta={meta as never}
+        className="w-[300px]"
+      />
+    </ContextCommandMenu>
+  );
+}

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

@@ -0,0 +1,42 @@
+"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 { HotkeysProvider } from "react-hotkeys-hook";
+import { InlineTableProvider } from "../hooks/context.client";
+import { InlineTableBody } from "./body";
+import { InlineTableHeader } from "./header";
+
+export function InlineTable<TData extends { id: string }>({
+  disabledColumns,
+  moveRowAction,
+  ...props
+}: ComponentProps<typeof Table> & ComponentProps<typeof InlineTableProvider>) {
+  const table = useTable<TData>();
+  const meta = table.options.meta as TableMeta<TData>;
+
+  return (
+    <InlineTableProvider disabledColumns={disabledColumns} moveRowAction={moveRowAction}>
+      <div className="space-y-4">
+        <div className="rounded-md border">
+          <Table {...props}>
+            <InlineTableHeader table={table} />
+
+            <HotkeysProvider initiallyActiveScopes={["inline-data-table"]}>
+              <InlineTableBody table={table} />
+            </HotkeysProvider>
+
+            <TableFooter table={table} />
+          </Table>
+        </div>
+
+        <TableBottombar table={table} />
+        {meta.commands && <TableCommandMenu table={table} />}
+      </div>
+    </InlineTableProvider>
+  );
+}

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

@@ -0,0 +1,85 @@
+"use client";
+
+import { arrayMove } from "@/lib/entry";
+import { useAction } from "@/lib/hooks/use-action";
+import { useTableConfigContext } from "@/modules/data-tables/entry.client";
+import { VisibilityState } from "@tanstack/react-table";
+import React, { PropsWithChildren } from "react";
+
+/**
+ * Move row method as meta
+ */
+type MoveRowMethod =
+  | {
+      isDraggable: false;
+      moveRow: undefined;
+    }
+  | {
+      isDraggable: true;
+      moveRow: (params: { fromIndex: number; toIndex: number }) => void;
+    };
+
+/**
+ * Inline form table context value
+ */
+export type InlineTableContextValue = MoveRowMethod & {
+  disabledColumns?: VisibilityState;
+  // setData: React.Dispatch<React.SetStateAction<TData[]>>;
+};
+
+/**
+ * Inline form table context
+ */
+const InlineTableContext = React.createContext({} as InlineTableContextValue);
+
+/**
+ * Inline form table context hook
+ */
+export function useInlineTableContext() {
+  const context = React.useContext(InlineTableContext) as InlineTableContextValue;
+  if (!context) throw new Error("InlineTableContext not found!");
+  return context;
+}
+
+/**
+ * Inline form table context provider
+ */
+
+export function InlineTableProvider<TData extends { id: string }>({
+  children,
+  disabledColumns,
+  moveRowAction,
+}: PropsWithChildren<{
+  disabledColumns?: VisibilityState;
+  moveRowAction?: (input: { fromIndex: number; toIndex: number }) => Promise<unknown>;
+}>) {
+  const { queryData, setData } = useTableConfigContext<TData>();
+
+  const moveRowMutation = useAction({
+    mutationFn: async (params: { fromIndex: number; toIndex: number }) => {
+      if (!moveRowAction) return;
+      await moveRowAction(params);
+    },
+    onMutate: (params: { fromIndex: number; toIndex: number }) => {
+      if (!moveRowAction) return;
+      setData((prev) => arrayMove(prev, params));
+    },
+    onError: () => {
+      if (!moveRowAction) return;
+      setData(queryData);
+    },
+  });
+
+  return (
+    <InlineTableContext.Provider
+      value={{
+        disabledColumns,
+        ...(moveRowAction
+          ? { isDraggable: true, moveRow: moveRowMutation.mutate }
+          : { isDraggable: false, moveRow: undefined }),
+      }}
+    >
+      {children}
+    </InlineTableContext.Provider>
+  );
+}

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

@@ -0,0 +1,117 @@
+import { useHotkeys } from "react-hotkeys-hook";
+
+export function useInlineDataTableHotkeys() {
+  useHotkeys(
+    ["mod+arrowleft", "mod+arrowright"],
+    (e, handler) => {
+      const currentInput = e.target as HTMLInputElement | null;
+      const currentCell = currentInput?.closest("td");
+
+      const cellToFocus = handler.keys?.includes("left")
+        ? currentCell?.previousElementSibling
+        : currentCell?.nextElementSibling;
+
+      const nextCell = cellToFocus?.querySelector("[data-input]") as HTMLInputElement | null;
+
+      nextCell?.focus();
+    },
+    {
+      scopes: "inline-data-table",
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+  );
+
+  useHotkeys(
+    ["mod+arrowup", "mod+arrowdown"],
+    (e, handler) => {
+      const currentInput = e.target as HTMLInputElement | null;
+      const columnId = currentInput?.closest("td")?.getAttribute("data-column-id");
+      const currentRow = currentInput?.closest("tr");
+
+      const nextRow = handler.keys?.includes("up")
+        ? currentRow?.previousElementSibling
+        : currentRow?.nextElementSibling;
+
+      const nextCell = nextRow
+        ?.querySelector(`td[data-column-id="${columnId}"]`)
+        ?.querySelector("[data-input]") as HTMLInputElement | null;
+
+      nextCell?.focus();
+    },
+    {
+      scopes: "inline-data-table",
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+  );
+
+  // useHotkeys(
+  //   ["mod+shift+arrowdown", "mod+shift+arrowup"],
+  //   (e, handler) => {
+  //     if (!meta.isDraggable) return;
+
+  //     const currentInput = e.target as HTMLInputElement | null;
+  //     const rowIndex = currentInput?.closest("td")?.getAttribute("data-row-index");
+
+  //     const fromIndex = Number(rowIndex);
+  //     const toIndex = Number(rowIndex) + (handler.keys?.includes("down") ? 1 : -1);
+
+  //     meta.moveRow({ fromIndex, toIndex });
+  //   },
+  //   {
+  //     scopes: "inline-data-table",
+  //     enableOnFormTags: true,
+  //     preventDefault: true,
+  //     enabled: meta.isDraggable,
+  //   },
+  // );
+
+  // useHotkeys(
+  //   "mod+d",
+  //   (e) => {
+  //     if (!meta.isDeletable) return;
+
+  //     const currentInput = e.target as HTMLInputElement | null;
+  //     const currentCell = currentInput?.closest("td");
+  //     const currentRow = currentInput?.closest("tr");
+
+  //     const columnId = currentCell?.getAttribute("data-column-id");
+  //     const rowId = currentRow?.getAttribute("data-row-id");
+
+  //     if (rowId) meta.deleteRow({ id: rowId });
+
+  //     // Focus on the next cell
+  //     const nextRow = currentRow?.nextElementSibling;
+  //     const nextCell = nextRow
+  //       ?.querySelector(`td[data-column-id="${columnId}"]`)
+  //       ?.querySelector("[data-input]") as HTMLInputElement | null;
+
+  //     nextCell?.focus();
+  //   },
+  //   {
+  //     scopes: "inline-data-table",
+  //     enableOnFormTags: true,
+  //     preventDefault: true,
+  //     enabled: meta.isDeletable,
+  //   },
+  // );
+
+  // useHotkeys(
+  //   ["mod+i", "mod+u"],
+  //   (e, handler) => {
+  //     if (!meta.isCreatable) return;
+
+  //     const currentInput = e.target as HTMLInputElement | null;
+  //     const rowIndex = currentInput?.closest("td")?.getAttribute("data-row-index");
+  //     const index = Number(rowIndex) + (handler.keys?.includes("i") ? 1 : 0);
+  //     rowIndex && meta.addRow({ index });
+  //   },
+  //   {
+  //     scopes: "inline-data-table",
+  //     enableOnFormTags: true,
+  //     preventDefault: true,
+  //     enabled: meta.isCreatable,
+  //   },
+  // );
+}

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

@@ -0,0 +1,65 @@
+import "client-only";
+
+import { useAction } from "@/lib/hooks/use-action";
+import { Permission } from "@/modules/auth/entry";
+import { usePermission } from "@/modules/auth/hooks/use-permission.client";
+import { InlineEditSchema } from "@/modules/inline-edit/entry";
+import { type CellContext } from "@tanstack/react-table";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+export type UseInlineDataTableInputParams<TData, TValue> = {
+  context: CellContext<TData, TValue>;
+  action: (params: InlineEditSchema<TValue>) => Promise<void> | void;
+  permission?: Permission;
+};
+
+/**
+ * Inline form table input
+ */
+export function useInlineDataTableInput<TData extends { id: string }, TValue>({
+  context,
+  action,
+  permission,
+}: UseInlineDataTableInputParams<TData, TValue>) {
+  const initialValue = context.getValue();
+
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => setValue(initialValue), [initialValue]);
+
+  const permissionData = usePermission(permission);
+  const isAllowed = permissionData.data?.success;
+
+  /**
+   * Update value mutation
+   */
+  const { mutate } = useAction({
+    mutationFn: async (value: TValue) => {
+      if (initialValue === value) return;
+
+      const { id } = context.row.original as TData;
+      await action({ id, value });
+    },
+    onError: () => {
+      setValue(initialValue);
+    },
+  });
+
+  /**
+   * Handle the update of the value.
+   */
+  const handleUpdate = (value: TValue) => {
+    if (!isAllowed) {
+      toast.error("Je hebt geen toestemming om dit te bewerken");
+      return;
+    }
+
+    // If the value is the same as the initial value, do nothing
+    if (value === initialValue) return;
+
+    return mutate(value);
+  };
+
+  return { value, setValue, mutate: handleUpdate, isAllowed };
+}

package/src/modules/inline-edit/components/combobox-dropdown.client.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import {
+  ComboboxDropdown,
+  ComboboxDropdownItem,
+  type ComboboxDropdownProps,
+} from "@/components/ui/combobox-dropdown.client";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+
+export type InlineEditComboboxDropdownProps<TValue extends ComboboxDropdownItem> =
+  useInlineEditOptions<string> &
+    Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
+      onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
+    };
+
+export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
+  selectedItem,
+  onSelect,
+  disabled,
+  ...props
+}: InlineEditComboboxDropdownProps<TValue>) {
+  const { setValue, handleUpdate, isAllowed } = useInlineEdit(props);
+
+  const initialSelectedItem = props.items.find((item) => item.id === props.initialValue);
+
+  return (
+    <ComboboxDropdown
+      {...props}
+      disabled={disabled || !isAllowed}
+      selectedItem={selectedItem ?? initialSelectedItem}
+      onSelect={(event) => {
+        setValue(event.id);
+        handleUpdate(event.id);
+        onSelect?.(event);
+      }}
+    />
+  );
+}

package/src/modules/inline-edit/components/combobox.client.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Combobox, ComboboxProps } from "@/components/ui/combobox.client";
+import { useInlineEdit, useInlineEditOptions } from "../hooks/use-inline.client";
+
+export type InlineComboboxProps<TValue> = useInlineEditOptions<string> &
+  Omit<ComboboxProps<TValue>, "value">;
+
+export function InlineCombobox<TValue>({
+  onSelect,
+  onBlur,
+  disabled,
+  ...props
+}: InlineComboboxProps<TValue>) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit(props);
+
+  return (
+    <Combobox
+      {...props}
+      value={value}
+      disabled={disabled || !isAllowed}
+      onSelect={(value) => {
+        setValue(value);
+        onSelect?.(value as TValue);
+      }}
+      onBlur={(e) => {
+        handleUpdate(e.target.value);
+        onBlur?.(e);
+      }}
+    />
+  );
+}