@tulip-systems/core 0.5.2 → 0.5.3

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

@@ -7,30 +7,37 @@ import { CheckIcon, XIcon } from "lucide-react";
 import { ComponentProps, useState } from "react";
 import { useInlineEdit, useInlineEditOptions } from "../hooks/use-inline.client";
 
-type InlineStringInputToggleProps<TValue> = Omit<ComponentProps<typeof Input>, "type"> &
-  useInlineEditOptions<TValue>;
+type InlineStringInputToggleProps<Required extends boolean = false> = Omit<
+  ComponentProps<typeof Input>,
+  "type"
+> &
+  useInlineEditOptions<string, Required>;
 
-export function InlineStringInputToggle({
+export function InlineStringInputToggle<Required extends boolean>({
   initialValue,
   action,
   disabled,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   ...props
-}: InlineStringInputToggleProps<string>) {
+}: InlineStringInputToggleProps<Required>) {
   const [enabled, setEnabled] = useState(!!initialValue);
 
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   function handleToggle() {
     setEnabled(!enabled);
     if (!enabled) return;
 
-    handleUpdate("");
+    handleBlur(null);
   }
 
   const isDisabled = !enabled || disabled || !isAllowed;
@@ -40,10 +47,10 @@ export function InlineStringInputToggle({
       <Input
         {...props}
         type="text"
-        value={value}
+        value={value ?? undefined}
         disabled={isDisabled}
-        onChange={(e) => setValue(e.target.value)}
-        onBlur={(e) => handleUpdate(e.target.value)}
+        onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
+        onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
         className={cn("border-border/70 hover:border-border w-full", className)}
       />
 

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

@@ -6,39 +6,46 @@ import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineEditInputProps<TValue> = Omit<ComponentProps<typeof Input>, "type"> &
-  useInlineEditOptions<TValue> &
+type InlineEditInputProps<TValue, Required extends boolean = false> = Omit<
+  ComponentProps<typeof Input>,
+  "type"
+> &
+  useInlineEditOptions<TValue, Required> &
   InlineEditVariantsProps;
 
 /**
  * The inline edit string input component.
  */
-export function InlineStringInput({
+export function InlineStringInput<Required extends boolean = false>({
   initialValue,
   action,
   variant,
   className,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditInputProps<string | undefined>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string | undefined>({
+}: InlineEditInputProps<string, Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
     <Input
       {...props}
       type="text"
-      value={value}
+      value={value ?? undefined}
       disabled={disabled || !isAllowed}
-      onChange={(e) => setValue(e.target.value)}
-      onBlur={(e) => handleUpdate(e.target.value)}
+      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
+      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
       className={cn(
         "border-border/70 hover:border-border w-full",
-        inlineEditVariants({ variant }),
+        inlineEditVariants({ variant, status }),
         className,
       )}
     />
@@ -48,19 +55,26 @@ export function InlineStringInput({
 /**
  * The inline edit number input component.
  */
-export function InlineNumberInput({
+const parseValueAsNumber = (valueAsNumber: number): number | null =>
+  !isNaN(Number(valueAsNumber)) ? valueAsNumber : null;
+
+export function InlineNumberInput<Required extends boolean = false>({
   initialValue,
   action,
   variant,
   className,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditInputProps<number | undefined>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<number | undefined>({
+}: InlineEditInputProps<number, Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -69,15 +83,11 @@ export function InlineNumberInput({
       type="number"
       value={value ?? undefined}
       disabled={disabled || !isAllowed}
-      onChange={(e) =>
-        setValue(!isNaN(e.target.valueAsNumber) ? e.target.valueAsNumber : undefined)
-      }
-      onBlur={(e) =>
-        handleUpdate(!isNaN(e.target.valueAsNumber) ? e.target.valueAsNumber : undefined)
-      }
+      onChange={(e) => handleChange(parseValueAsNumber(e.target.valueAsNumber))}
+      onBlur={(e) => handleBlur(parseValueAsNumber(e.target.valueAsNumber))}
       className={cn(
         "border-border/70 hover:border-border w-full",
-        inlineEditVariants({ variant }),
+        inlineEditVariants({ variant, status }),
         className,
       )}
     />
@@ -93,13 +103,17 @@ export function InlineDecimalInput({
   variant,
   className,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditInputProps<string | undefined>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string | undefined>({
+}: InlineEditInputProps<string>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -108,11 +122,11 @@ export function InlineDecimalInput({
       type="number"
       value={value ?? undefined}
       disabled={disabled || !isAllowed}
-      onChange={(e) => setValue(e.target.value)}
-      onBlur={(e) => handleUpdate(e.target.value ? e.target.value : undefined)}
+      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
+      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
       className={cn(
         "border-border/70 hover:border-border w-full",
-        inlineEditVariants({ variant }),
+        inlineEditVariants({ variant, status }),
         className,
       )}
     />

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

@@ -7,6 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select.client";
+import { useIndicator } from "@/lib/entry.client";
 import { cn } from "@/lib/utils/cn";
 import type {
   SelectContentProps,
@@ -18,29 +19,31 @@ import type {
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-export type InlineSelectProps = SelectProps & useInlineEditOptions<string>;
-
-export function InlineSelect({
+export function InlineSelect<Required extends boolean = false>({
   initialValue,
   action,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineSelectProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: SelectProps & useInlineEditOptions<string, Required>) {
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
     <Select
       {...props}
       disabled={disabled || !isAllowed}
-      defaultValue={value}
+      defaultValue={value ?? undefined}
       onValueChange={(value) => {
-        setValue(value);
-        handleUpdate(value);
+        handleChange(value ? value : null);
+        handleBlur(value ? value : null);
       }}
     />
   );
@@ -53,7 +56,11 @@ export function InlineSelectTrigger({
   className,
   ...props
 }: InlineSelectTriggerProps & InlineEditVariantsProps) {
-  return <SelectTrigger {...props} className={cn(inlineEditVariants({ variant }), className)} />;
+  const { status } = useIndicator();
+
+  return (
+    <SelectTrigger {...props} className={cn(inlineEditVariants({ variant, status }), className)} />
+  );
 }
 
 export type InlineSelectContentProps = SelectContentProps;

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

@@ -4,27 +4,31 @@ import { Switch } from "@/components/ui/switch";
 import { type SwitchProps } from "@radix-ui/react-switch";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 
-export function InlineSwitch({
+export function InlineSwitch<Required extends boolean = false>({
   initialValue,
   action,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: SwitchProps & useInlineEditOptions<boolean>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: SwitchProps & useInlineEditOptions<boolean, Required>) {
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
     <Switch
       {...props}
       disabled={disabled || !isAllowed}
-      defaultChecked={value}
+      defaultChecked={value ?? undefined}
       onCheckedChange={(checked) => {
-        setValue(checked);
-        handleUpdate(checked);
+        handleChange(checked ?? null);
+        handleBlur(checked ?? null);
       }}
     />
   );

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

@@ -5,21 +5,25 @@ import { cn } from "@/lib/utils/cn";
 import type React from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 
-export type InlineEditToggleProps = React.HTMLAttributes<HTMLDivElement> &
-  useInlineEditOptions<boolean>;
+export type InlineEditToggleProps<Required extends boolean = false> =
+  React.HTMLAttributes<HTMLDivElement> & useInlineEditOptions<boolean, Required>;
 
-export function InlineToggle({
+export function InlineToggle<Required extends boolean = false>({
   initialValue,
   action,
   children,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   ...props
-}: InlineEditToggleProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineEditToggleProps<Required>) {
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -27,11 +31,11 @@ export function InlineToggle({
       <Toggle
         disabled={!isAllowed}
         variant="outline"
-        pressed={value}
-        defaultChecked={initialValue}
+        pressed={value ?? undefined}
+        defaultChecked={initialValue ?? undefined}
         onPressedChange={(value) => {
-          setValue(value);
-          handleUpdate(value);
+          handleChange(value);
+          handleBlur(value);
         }}
       >
         {children}

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

@@ -2,7 +2,6 @@ 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";

package/src/modules/inline-edit/hooks/use-inline.client copy.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { EditorJSONContent } from "@/components/entry";
+import { useAction } from "@/lib/hooks/use-action";
+import { usePermission } from "@/modules/auth/hooks/use-permission";
+import { Permission } from "@/modules/auth/lib/permissions";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useInlineEditContext } from "./context.client";
+
+type UpdateStrategy = {
+  trigger: "change" | "blur";
+  delay?: number;
+};
+
+const defaultUpdateStrategy: UpdateStrategy = {
+  trigger: "blur",
+};
+
+export type useInlineEditOptions<TValue> = {
+  initialValue?: TValue;
+  action: (value: { id: string; value: TValue }) => Promise<unknown>;
+  permission?: Permission;
+  /**
+   * Update strategy
+   * - trigger: when to update the value (default: "blur")
+   * - delay: delay in milliseconds before updating the value (only for "change" trigger)
+   * @default { trigger: "blur" }
+   */
+  updateStrategy?: UpdateStrategy;
+};
+
+export function useInlineEdit<
+  TValue extends string | number | Date | boolean | JSON | EditorJSONContent | undefined,
+>(props: useInlineEditOptions<TValue>) {
+  const strategy = props.updateStrategy ?? defaultUpdateStrategy;
+  /**
+   * The inline edit context.
+   */
+  const context = useInlineEditContext();
+
+  const { data } = usePermission(props.permission ?? context.permission);
+  const isAllowed = data?.success;
+
+  /**
+   * The current value of the inline edit.
+   */
+  const [value, setValue] = useState(props.initialValue);
+
+  /**
+   * Execute the action to update the value.
+   */
+  const { mutate, status } = useAction({
+    mutationFn: props.action,
+    onError: (error) => {
+      setValue(props.initialValue);
+      toast.error("Er is iets misgegaan", {
+        description: error instanceof Error ? error.message : undefined,
+      });
+    },
+  });
+
+  /**
+   * 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 === props.initialValue) return;
+
+    return mutate({ id: context.id, value });
+  };
+
+  /**
+   * Handle change updates
+   */
+  function handleChange(value: TValue) {
+    setValue(value);
+
+    // if the strategy is change, update the value after the delay
+  }
+
+  /**
+   * Handle blur updates
+   */
+  function handleBlur(value: TValue) {
+    setValue(value);
+
+    // if the strategy is blur, update the value
+  }
+
+  return { value, setValue, handleUpdate, status, isAllowed };
+}

package/src/modules/inline-edit/hooks/use-inline.client.tsx

@@ -1,40 +1,105 @@
 "use client";
 
 import { EditorJSONContent } from "@/components/entry";
+import { useLocalIndicator } from "@/lib/entry.client";
 import { useAction } from "@/lib/hooks/use-action";
 import { usePermission } from "@/modules/auth/hooks/use-permission";
 import { Permission } from "@/modules/auth/lib/permissions";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { toast } from "sonner";
+import { useDebouncedCallback } from "use-debounce";
 import { useInlineEditContext } from "./context.client";
 
-export type useInlineEditOptions<TValue> = {
-  initialValue?: TValue;
-  action: (value: { id: string; value: TValue }) => Promise<unknown>;
+type UpdateStrategy =
+  | {
+      mode: "change";
+      delay?: number;
+    }
+  | {
+      mode: "blur";
+    };
+
+const defaultUpdateStrategy: UpdateStrategy = {
+  mode: "blur",
+};
+
+type MaybeValue<TValue, Required extends boolean> = Required extends true ? TValue : TValue | null;
+
+/**
+ * Use the inline edit hook options.
+ */
+export type useInlineEditOptions<TValue, Required extends boolean = false> = {
+  /**
+   * Initial value
+   */
+  initialValue?: MaybeValue<TValue, Required>;
+  /**
+   * Action to execute on update
+   */
+  action: (value: { id: string; value: MaybeValue<TValue, Required> }) => Promise<unknown>;
+  /**
+   * Permission required to edit
+   */
   permission?: Permission;
+  /**
+   * Update strategy
+   * - trigger: when to update the value (default: "blur")
+   * - delay: delay in milliseconds before updating the value (only for "change" trigger)
+   * @default { trigger: "blur" }
+   */
+  updateStrategy?: UpdateStrategy;
+  /**
+   * Is the value required
+   * @default false
+   */
+  isRequired?: Required;
 };
 
+/**
+ * Use the inline edit hook.
+ */
 export function useInlineEdit<
-  TValue extends string | number | Date | boolean | JSON | EditorJSONContent | undefined,
->(props: useInlineEditOptions<TValue>) {
+  TValue extends string | number | Date | boolean | JSON | EditorJSONContent,
+  Required extends boolean = false,
+>(props: useInlineEditOptions<TValue, Required>) {
+  /**
+   * The update strategy.
+   */
+  const strategy = props.updateStrategy ?? defaultUpdateStrategy;
+  const delay = strategy.mode === "change" ? (strategy.delay ?? 0) : 0;
+
   /**
    * The inline edit context.
    */
   const context = useInlineEditContext();
 
-  const { data } = usePermission(props.permission ?? context.permission);
-  const isAllowed = data?.success;
-
   /**
    * The current value of the inline edit.
    */
-  const [value, setValue] = useState(props.initialValue);
+  const [value, setValue] = useState<MaybeValue<TValue, Required> | undefined>(props.initialValue);
+
+  /**
+   * The indicator status.
+   */
+  const { status, setStatus } = useLocalIndicator();
+
+  /**
+   * Permission guard
+   */
+  const { data } = usePermission(props.permission ?? context.permission);
+  const isAllowed = data?.success;
 
   /**
    * Execute the action to update the value.
    */
-  const { mutate, status } = useAction({
+  const mutation = useAction({
     mutationFn: props.action,
+    onMutate: () => {
+      setStatus("pending");
+    },
+    onSuccess: () => {
+      setStatus("success");
+    },
     onError: (error) => {
       setValue(props.initialValue);
       toast.error("Er is iets misgegaan", {
@@ -44,19 +109,73 @@ export function useInlineEdit<
   });
 
   /**
-   * Handle the update of the value.
+   * Handle instant mutate
+   */
+  const handleMutateInstant = useCallback(
+    (value: MaybeValue<TValue, Required>) => {
+      // Permission guard
+      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 === props.initialValue) return;
+
+      // Update the value
+      return mutation.mutate({ id: context.id, value });
+    },
+    [isAllowed, props.initialValue, mutation, context.id],
+  );
+
+  /**
+   * Handle mutate with debounce
    */
-  const handleUpdate = (value: TValue) => {
-    if (!isAllowed) {
-      toast.error("Je hebt geen toestemming om dit te bewerken");
+  const handleMutateDebounced = useDebouncedCallback(handleMutateInstant, delay);
+
+  /**
+   * Handle change updates
+   */
+  function handleChange(next: MaybeValue<TValue, Required> | null) {
+    // Set value in state
+    setValue(next ?? undefined);
+
+    // If the strategy is not change, exit
+    if (strategy.mode !== "change") return;
+
+    // If it is required and the value is null or empty, reset to initial value
+    if (props.isRequired && next === null) {
+      setValue(props.initialValue ?? undefined);
+      setStatus("error");
+      toast.error("Dit veld is verplicht");
       return;
     }
 
-    // If the value is the same as the initial value, do nothing
-    if (value === props.initialValue) return;
+    // If the strategy is change, update the value after the delay
+    handleMutateDebounced(next as MaybeValue<TValue, Required>);
+  }
+
+  /**
+   * Handle blur updates
+   */
+  function handleBlur(next: MaybeValue<TValue, Required> | null) {
+    // Set value in state
+    setValue(next ?? undefined);
+
+    // If the strategy is not blur, exit
+    if (strategy.mode !== "blur") return;
+
+    // If it is required and the value is null or empty, reset to initial value
+    if (props.isRequired && next === null) {
+      setValue(props.initialValue ?? undefined);
+      setStatus("error");
+      toast.error("Dit veld is verplicht");
+      return;
+    }
 
-    return mutate({ id: context.id, value });
-  };
+    // If the strategy is blur, update the value
+    handleMutateInstant(next as MaybeValue<TValue, Required>);
+  }
 
-  return { value, setValue, handleUpdate, status, isAllowed };
+  return { value, setValue, handleChange, handleBlur, status, isAllowed };
 }

package/src/modules/inline-edit/lib/variants.ts

@@ -7,9 +7,16 @@ export const inlineEditVariants = cva("", {
       table:
         "min-h-9 px-3 py-1 text-base md:text-sm rounded-none 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 focus-visible:ring-0 focus-visible:ring-offset-0",
     },
+    status: {
+      idle: "",
+      pending: "opacity-70 animate-pulse",
+      success: "",
+      error: "border-destructive text-destructive",
+    },
   },
   defaultVariants: {
     variant: "default",
+    // status: "idle",
   },
 });
 

package/src/modules/storage/components/image-grid.client.tsx

@@ -156,7 +156,7 @@ type ImageGridItemProps = {
 };
 
 function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
-  const { deleteMutation } = useUploadZone();
+  const { uploadClient } = useUploadZone();
 
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });
 
@@ -198,7 +198,7 @@ function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
             type="button"
             variant="destructive"
             size="icon"
-            onClick={() => deleteMutation({ ids: [node.id] })}
+            onClick={() => uploadClient.deleteFiles([node.id])}
             className="absolute left-2 top-2 hidden p-1 group-hover:flex"
           >
             <Icons.trash className="size-4" />