@tulip-systems/core 0.4.1 → 0.5.1

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

@@ -11,7 +11,8 @@ import {
   useEffect,
   useState,
 } from "react";
-import type { Selection, TableColumnDef, TableStrategy } from "../lib/types";
+import { TableFiltersResult } from "../lib/filters/config";
+import type { Selection, TableColumnDef, TableMetaInput, TableStrategy } from "../lib/types";
 
 type useReactTableProps<TData extends { id: string }> = Omit<
   TableOptions<TData>,
@@ -23,7 +24,11 @@ type useReactTableProps<TData extends { id: string }> = Omit<
 /**
  * Use table config
  */
-export type TableConfigContextValue<TData extends { id: string }> = useReactTableProps<TData> & {
+export type TableConfigContextValue<
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+> = useReactTableProps<TData> & {
   queryData: TData[];
   data: TData[];
   setData: Dispatch<SetStateAction<TData[]>>;
@@ -31,7 +36,9 @@ export type TableConfigContextValue<TData extends { id: string }> = useReactTabl
   strategy: TableStrategy;
   selection?: Selection;
   columnVisibility?: VisibilityState;
-  commands?: CommandDef<TData>[];
+  commands?: CommandDef<TData, TMeta>[];
+  meta?: TMeta;
+  where?: TFilters;
 };
 
 const TableConfigContext = createContext({});
@@ -41,19 +48,25 @@ const TableConfigContext = createContext({});
  */
 export function useTableConfigContext<
   TData extends { id: string },
->(): TableConfigContextValue<TData> {
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>(): TableConfigContextValue<TData, TFilters, TMeta> {
   const context = use(TableConfigContext);
   if (!context) throw new Error("TableConfigContext not found!");
-  return context as TableConfigContextValue<TData>;
+  return context as TableConfigContextValue<TData, TFilters, TMeta>;
 }
 
 /**
  * Table context provider
  */
-export function TableConfigProvider<TData extends { id: string }>({
+export function TableConfigProvider<
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>({
   children,
   config,
-}: PropsWithChildren<{ config: CreateTableConfigInput<TData> }>) {
+}: PropsWithChildren<{ config: CreateTableConfigInput<TData, TFilters, TMeta> }>) {
   const [data, setData] = useState(config.queryData);
   useEffect(() => setData(config.queryData), [config.queryData]);
 
@@ -63,11 +76,16 @@ export function TableConfigProvider<TData extends { id: string }>({
 /**
  * Create use table config hook
  */
-type CreateTableConfigInput<TData extends { id: string }> = Omit<
-  TableConfigContextValue<TData>,
-  "data" | "setData"
->;
+type CreateTableConfigInput<
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+> = Omit<TableConfigContextValue<TData, TFilters, TMeta>, "data" | "setData">;
 
-export const createTableConfig = <TData extends { id: string }>(
-  config: CreateTableConfigInput<TData>,
+export const createTableConfig = <
+  TData extends { id: string },
+  TFilters extends TableFiltersResult = TableFiltersResult,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>(
+  config: CreateTableConfigInput<TData, TFilters, TMeta>,
 ) => config;

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

@@ -14,9 +14,12 @@ import { useSelection } from "./use-selection.client";
 /**
  * Server data table
  */
-export function useTable<TData extends { id: string }>() {
+export function useTable<
+  TData extends { id: string },
+  TMeta extends TableMeta<TData> = TableMeta<TData>,
+>() {
   const { data, strategy, selection, columnVisibility, commands, ...options } =
-    useTableConfigContext<TData>();
+    useTableConfigContext<TData, TMeta>();
 
   const { rowSelection, selectedData, onRowSelectionChange } = useSelection({
     data,
@@ -52,6 +55,6 @@ export function useTable<TData extends { id: string }>() {
     onColumnFiltersChange: setColumnFilters,
     enableHiding: true,
     onColumnVisibilityChange: setColumnVisibility,
-    meta: { ...options.meta, selectedData, commands, strategy } satisfies TableMeta<TData>,
+    meta: { ...options.meta, selectedData, commands, strategy } satisfies TableMeta<TData, TMeta>,
   });
 }

package/src/modules/data-tables/lib/filters/config.ts

@@ -2,5 +2,6 @@ import { ZodType } from "zod";
 import { ParseFilter } from "./parsers";
 
 export type TableFiltersDef = { readonly [k: string]: ParseFilter<ZodType> };
+export type TableFiltersResult = { readonly [k: string]: unknown };
 
 export const createTableFilters = <TDef extends TableFiltersDef>(def: TDef) => def;

package/src/modules/data-tables/lib/filters/helpers.ts

@@ -0,0 +1,19 @@
+import deepmerge from "deepmerge";
+
+export const mergeFilters = deepmerge;
+
+/**
+ * Converts visibility state to filter config
+ */
+export function parseFiltersVisibility<TKey extends string>(
+  config: TKey[],
+  visibilityState: Partial<Record<TKey, boolean>> | undefined,
+): Record<TKey, boolean> {
+  return config.reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: visibilityState?.[key] === undefined ? true : visibilityState[key],
+    }),
+    {} as Record<TKey, boolean>,
+  );
+}

package/src/modules/data-tables/lib/filters/parsers.ts

@@ -8,7 +8,20 @@ export type ParseFilter<TSchema extends z.ZodType> = {
 };
 
 /**
- * Filter uuid array
+ * Filter string
+ */
+export type ParseFilterStringSchema = z.ZodString;
+
+export const parseFilterString = <TSchema extends ParseFilterStringSchema>(
+  schema: TSchema,
+): ParseFilter<TSchema> => ({
+  schema: schema.nullable(),
+  decode: (encoded) => (encoded?.trim() ?? null) as unknown as z.input<TSchema>,
+  encode: (decoded) => decoded ?? "",
+});
+
+/**
+ * Filter string array
  */
 export type ParseFilterArraySchema = z.ZodArray<ZodType>;
 

package/src/modules/data-tables/lib/filters/resolvers.ts

@@ -46,6 +46,14 @@ export function resolveFilterDescriptors<TDef extends TableFiltersDef>(def: TDef
   };
 }
 
+/**
+ * Resolvers for the visibility state config
+ * @returns array of keys
+ */
+export function resolveVisibilityState<TDef extends TableFiltersDef>(def: TDef) {
+  return typedEntries(def).map(([key]) => key) as (keyof TDef)[];
+}
+
 /**
  * Helpers
  */

package/src/modules/data-tables/lib/types.ts

@@ -1,16 +1,23 @@
 import { Permission } from "@/modules/auth/lib/permissions";
 import { CommandDef } from "@/modules/commands/lib/definitions";
 import type { RowSelectionState, Updater } from "@tanstack/react-table";
-import { ColumnDef, PaginationState, SortingState } from "@tanstack/react-table";
+import {
+  ColumnDef,
+  PaginationState,
+  SortingState,
+  TableMeta as TanStackTableMeta,
+} from "@tanstack/react-table";
 import { UseQueryStatesKeysMap } from "nuqs";
 
 /**
  * Data table meta
  */
-export type TableMeta<TData extends { id: string }> = {
+export type TableMetaInput<TData extends { id: string }> = TanStackTableMeta<TData>;
+
+export type TableMeta<TData extends { id: string }, TMeta = TableMetaInput<TData>> = {
   strategy: TableStrategy;
   selectedData: TData[];
-  commands?: CommandDef<TData>[];
+  commands?: CommandDef<TData, TMeta>[];
 };
 
 /**

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

@@ -40,7 +40,7 @@ export function TableDragHandle<TData, TValue>({ row, className, disabled }:  Ta
  * Create a new column with the drag handle
  */
 export const createTableDragHandleCell = createTableCell({
-  id: "drag-handle",
+  id: "dragHandle",
   cell: TableDragHandle,
   enableHiding: false,
   enableSorting: false,

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

@@ -21,12 +21,19 @@ export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   variant,
   className,
   onSelect,
+  initialValue,
+  action,
+  permission,
   disabled,
   ...props
 }: InlineEditComboboxDropdownProps<TValue>) {
-  const { setValue, handleUpdate, isAllowed } = useInlineEdit(props);
+  const { setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+    permission,
+  });
 
-  const initialSelectedItem = props.items.find((item) => item.id === props.initialValue);
+  const initialSelectedItem = props.items.find((item) => item.id === initialValue);
 
   return (
     <ComboboxDropdown

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

@@ -7,12 +7,19 @@ export type InlineComboboxProps<TValue> = useInlineEditOptions<string> &
   Omit<ComboboxProps<TValue>, "value">;
 
 export function InlineCombobox<TValue>({
+  initialValue,
+  action,
+  permission,
   onSelect,
   onBlur,
   disabled,
   ...props
 }: InlineComboboxProps<TValue>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit(props);
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+    permission,
+  });
 
   return (
     <Combobox

package/src/modules/inline-edit/components/date-input.client.tsx

@@ -9,21 +9,25 @@ import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import React, { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
 const formatDate = (value: Date) => format(value, "dd/MM/yyyy");
 const parseDate = (value: string) => new Date(value.split("/").reverse().join("-"));
 
 export function InlineDateInput({
   initialValue,
-  className,
   action,
+  permission,
+  variant,
+  className,
   ...props
-}: ComponentProps<"div"> & useInlineEditOptions<Date>) {
+}: ComponentProps<"div"> & useInlineEditOptions<Date> & InlineEditVariantsProps) {
   const [inValid, setInValid] = React.useState<boolean>(false);
 
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
     initialValue,
     action,
+    permission,
   });
 
   const [stringDate, setStringDate] = React.useState<string>(
@@ -32,7 +36,7 @@ export function InlineDateInput({
 
   return (
     <Popover>
-      <div {...props} className={cn("relative h-full", className)}>
+      <div {...props} className={cn("relative h-full", inlineEditVariants({ variant }), className)}>
         <Input
           data-input
           type="string"

package/src/modules/inline-edit/components/date-picker.client.tsx

@@ -8,11 +8,17 @@ import { formatDate } from "@/lib/utils/format";
 import { CalendarIcon } from "lucide-react";
 import React, { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineEditDatePickerProps = ComponentProps<typeof Button> & useInlineEditOptions<Date>;
+type InlineEditDatePickerProps = ComponentProps<typeof Button> &
+  useInlineEditOptions<Date> &
+  InlineEditVariantsProps;
 
 export function InlineDatePicker({
   initialValue,
+  action,
+  permission,
+  variant,
   className,
   disabled,
   ...props
@@ -21,7 +27,8 @@ export function InlineDatePicker({
 
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
     initialValue,
-    action: props.action,
+    action,
+    permission,
   });
 
   return (
@@ -37,7 +44,7 @@ export function InlineDatePicker({
           {...props}
           type="button"
           variant="outline"
-          className={cn("w-full", className)}
+          className={cn("w-full", inlineEditVariants({ variant }), className)}
           disabled={disabled || !isAllowed}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />

package/src/modules/inline-edit/components/deprecated-editor.client.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { EDITOR_EXTENSIONS_VALUES } from "@/components/editor/lib/constants";
+import { cn } from "@/lib/utils/cn";
+import { EditorContent, JSONContent, useEditor } from "@tiptap/react";
+import { ComponentProps } from "react";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+
+/**
+ * @deprecated
+ */
+export function InlineEditorDeprecated({
+  initialValue,
+  action,
+  variant,
+  className,
+  disabled,
+  ...props
+}: Omit<ComponentProps<"input">, "type"> &
+  useInlineEditOptions<JSONContent> &
+  InlineEditVariantsProps) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+  });
+
+  const editor = useEditor({
+    extensions: EDITOR_EXTENSIONS_VALUES,
+    content: value,
+    editable: !disabled && isAllowed,
+    immediatelyRender: false,
+    injectCSS: false,
+    onUpdate: ({ editor }) => setValue(editor.getJSON()),
+    onBlur: ({ editor }) => handleUpdate(editor.getJSON()),
+    editorProps: {
+      attributes: {
+        class: cn(
+          "prose max-w-full bg-background ring-offset-background rounded-md border border-input dark:prose-invert p-3 focus:outline-none prose-a:text-primary prose-li:marker:text-primary ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring rounded-md border text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&[contenteditable=false]]:opacity-50 [&[contenteditable=false]]:cursor-not-allowed md:text-sm",
+          inlineEditVariants({ variant }),
+          className,
+        ),
+      },
+    },
+  });
+
+  return <EditorContent {...props} editor={editor} />;
+}

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

@@ -1,46 +1,49 @@
 "use client";
 
+import { Editor, EditorProps } from "@/components/editor/components/editor.client";
+import { EditorJSONContent } from "@/components/editor/lib/types";
 import { cn } from "@/lib/utils/cn";
-import Underline from "@tiptap/extension-underline";
-import { EditorContent, JSONContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
+export type InlineEditorProps = useInlineEditOptions<EditorJSONContent> &
+  InlineEditVariantsProps &
+  Omit<EditorProps, "value" | "onUpdate" | "onBlur" | "variant">;
+
 export function InlineEditor({
   initialValue,
   action,
+  extensions,
   variant,
-  className,
   disabled,
-  ...props
-}: Omit<ComponentProps<"input">, "type"> &
-  useInlineEditOptions<JSONContent> &
-  InlineEditVariantsProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  permission,
+  className,
+  children,
+}: InlineEditorProps) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<EditorJSONContent>({
     initialValue,
     action,
+    permission,
   });
 
-  const editor = useEditor({
-    extensions: [StarterKit, Underline],
-    content: value,
-    editable: !disabled && isAllowed,
-    immediatelyRender: false,
-    injectCSS: false,
-    onUpdate: ({ editor }) => setValue(editor.getJSON()),
-    onBlur: ({ editor }) => handleUpdate(editor.getJSON()),
-    editorProps: {
-      attributes: {
-        class: cn(
-          "prose max-w-full bg-background ring-offset-background rounded-md border border-input dark:prose-invert p-3 focus:outline-none prose-a:text-primary prose-li:marker:text-primary ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring rounded-md border text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&[contenteditable=false]]:opacity-50 [&[contenteditable=false]]:cursor-not-allowed md:text-sm",
-          inlineEditVariants({ variant }),
-          className,
-        ),
-      },
-    },
-  });
+  // const [debouncedValue] = useDebounce(value, 500);
+  // useEffect(() => {
+  //   if (!value) return;
+  //   handleUpdate(value);
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [debouncedValue]);
 
-  return <EditorContent {...props} editor={editor} />;
+  return (
+    <Editor
+      value={value}
+      extensions={extensions}
+      onUpdate={(value) => setValue(value)}
+      onBlur={(value) => handleUpdate(value)}
+      className={cn(inlineEditVariants({ variant }), className)}
+      disabled={disabled || !isAllowed}
+      variant={variant}
+    >
+      {children}
+    </Editor>
+  );
 }

package/src/modules/inline-edit/components/input-recipient.client.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { Contact, RecipientInput } from "@/components/ui/input-recipient";
+import { cn } from "@/lib/utils/cn";
 import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { InlineEditVariantsProps } from "../lib/variants";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
 type InlineRecipientInputProps = Omit<ComponentProps<typeof RecipientInput>, "value" | "onChange"> &
   useInlineEditOptions<string[]> &
@@ -20,11 +21,14 @@ export function InlineRecipientInput({
   variant,
   disabled,
   contacts,
+  permission,
+  className,
   ...props
 }: InlineRecipientInputProps) {
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string[]>({
     initialValue,
     action,
+    permission,
   });
 
   return (
@@ -34,10 +38,10 @@ export function InlineRecipientInput({
       value={value ?? []}
       onChange={(newValue) => {
         setValue(newValue);
-        // Update onBlur-achtig gedrag: update direct na elke wijziging
         handleUpdate(newValue);
       }}
       disabled={disabled || !isAllowed}
+      className={cn(inlineEditVariants({ variant }), className)}
     />
   );
 }

package/src/modules/inline-edit/components/input-toggle.client.tsx

@@ -14,6 +14,7 @@ export function InlineStringInputToggle({
   initialValue,
   action,
   disabled,
+  permission,
   className,
   ...props
 }: InlineStringInputToggleProps<string>) {
@@ -22,6 +23,7 @@ export function InlineStringInputToggle({
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
     initialValue,
     action,
+    permission,
   });
 
   function handleToggle() {

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

@@ -18,12 +18,14 @@ export function InlineStringInput({
   action,
   variant,
   className,
+  permission,
   disabled,
   ...props
 }: InlineEditInputProps<string | undefined>) {
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string | undefined>({
     initialValue,
     action,
+    permission,
   });
 
   return (
@@ -51,12 +53,14 @@ export function InlineNumberInput({
   action,
   variant,
   className,
+  permission,
   disabled,
   ...props
 }: InlineEditInputProps<number | undefined>) {
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<number | undefined>({
     initialValue,
     action,
+    permission,
   });
 
   return (
@@ -79,3 +83,38 @@ export function InlineNumberInput({
     />
   );
 }
+
+/**
+ * The inline edit decimal input component.
+ */
+export function InlineDecimalInput({
+  initialValue,
+  action,
+  variant,
+  className,
+  permission,
+  disabled,
+  ...props
+}: InlineEditInputProps<string | undefined>) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string | undefined>({
+    initialValue,
+    action,
+    permission,
+  });
+
+  return (
+    <Input
+      {...props}
+      type="number"
+      value={value ?? undefined}
+      disabled={disabled || !isAllowed}
+      onChange={(e) => setValue(e.target.value)}
+      onBlur={(e) => handleUpdate(e.target.value ? e.target.value : undefined)}
+      className={cn(
+        "border-border/70 hover:border-border w-full",
+        inlineEditVariants({ variant }),
+        className,
+      )}
+    />
+  );
+}

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

@@ -20,10 +20,17 @@ import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
 export type InlineSelectProps = SelectProps & useInlineEditOptions<string>;
 
-export function InlineSelect({ initialValue, disabled, ...props }: InlineSelectProps) {
+export function InlineSelect({
+  initialValue,
+  action,
+  permission,
+  disabled,
+  ...props
+}: InlineSelectProps) {
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
     initialValue,
-    action: props.action,
+    action,
+    permission,
   });
 
   return (

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

@@ -7,12 +7,14 @@ import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.cl
 export function InlineSwitch({
   initialValue,
   action,
+  permission,
   disabled,
   ...props
 }: SwitchProps & useInlineEditOptions<boolean>) {
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
     initialValue,
     action,
+    permission,
   });
 
   return (

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

@@ -12,12 +12,14 @@ export function InlineToggle({
   initialValue,
   action,
   children,
+  permission,
   className,
   ...props
 }: InlineEditToggleProps) {
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
     initialValue,
     action,
+    permission,
   });
 
   return (

package/src/modules/inline-edit/entry.client.ts

@@ -2,11 +2,11 @@ export * from "./components/combobox-dropdown.client";
 export * from "./components/combobox.client";
 export * from "./components/date-input.client";
 export * from "./components/date-picker.client";
+export * from "./components/deprecated-editor.client";
 export * from "./components/editor.client";
 export * from "./components/input-recipient.client";
 export * from "./components/input-toggle.client";
 export * from "./components/input.client";
-export * from "./components/richtext.client";
 export * from "./components/select.client";
 export * from "./components/switch.client";
 export * from "./components/toggle.client";