@tulip-systems/core 0.2.0

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

@@ -0,0 +1,92 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils/cn";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import React, { ComponentProps } from "react";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+
+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,
+  ...props
+}: ComponentProps<"div"> & useInlineEditOptions<Date>) {
+  const [inValid, setInValid] = React.useState<boolean>(false);
+
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+  });
+
+  const [stringDate, setStringDate] = React.useState<string>(
+    initialValue ? formatDate(initialValue) : "",
+  );
+
+  return (
+    <Popover>
+      <div {...props} className={cn("relative h-full", className)}>
+        <Input
+          data-input
+          type="string"
+          value={stringDate}
+          className={cn(inValid && "text-destructive")}
+          disabled={!isAllowed}
+          onChange={(e) => {
+            setStringDate(e.target.value);
+            const parsedDate = parseDate(e.target.value);
+
+            if (parsedDate.toString() === "Invalid Date") {
+              setInValid(true);
+              setValue(undefined);
+            } else {
+              setInValid(false);
+              setValue(parsedDate);
+            }
+          }}
+          onBlur={(e) => {
+            const parsedDate = parseDate(e.target.value);
+            handleUpdate(parsedDate);
+          }}
+        />
+
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            tabIndex={-1}
+            disabled={!isAllowed}
+            className={cn(
+              "absolute bottom-0 right-0 top-0 opacity-50",
+              !value && "text-muted-foreground",
+            )}
+          >
+            <CalendarIcon className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+      </div>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          initialFocus
+          selected={value}
+          defaultMonth={value}
+          disabled={status === "pending"}
+          onSelect={(selectedDate) => {
+            if (!selectedDate) return;
+            setValue(selectedDate);
+            setStringDate(formatDate(selectedDate));
+            handleUpdate(selectedDate);
+            setInValid(false);
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,58 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils/cn";
+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";
+
+type InlineEditDatePickerProps = ComponentProps<typeof Button> & useInlineEditOptions<Date>;
+
+export function InlineDatePicker({
+  initialValue,
+  className,
+  disabled,
+  ...props
+}: InlineEditDatePickerProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action: props.action,
+  });
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(open) => {
+        setOpen(open);
+        if (!open && value) handleUpdate(value);
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          {...props}
+          type="button"
+          variant="outline"
+          className={cn("w-full", className)}
+          disabled={disabled || !isAllowed}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {value ? formatDate(value) : <span>Kies een datum</span>}
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={value ? new Date(value) : undefined}
+          onSelect={(date) => date && setValue(date)}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,41 @@
+"use client";
+
+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";
+
+export function InlineEditor({
+  initialValue,
+  action,
+  className,
+  disabled,
+  ...props
+}: Omit<ComponentProps<"input">, "type"> & useInlineEditOptions<JSONContent>) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+  });
+
+  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 min-h-40 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",
+          className,
+        ),
+      },
+    },
+  });
+
+  return <EditorContent {...props} editor={editor} />;
+}

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

@@ -0,0 +1,61 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/entry";
+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>;
+
+export function InlineStringInputToggle({
+  initialValue,
+  action,
+  disabled,
+  className,
+  ...props
+}: InlineStringInputToggleProps<string>) {
+  const [enabled, setEnabled] = useState(!!initialValue);
+
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+  });
+
+  function handleToggle() {
+    setEnabled(!enabled);
+    if (!enabled) return;
+
+    handleUpdate("");
+  }
+
+  const isDisabled = !enabled || disabled || !isAllowed;
+
+  return (
+    <div className="relative">
+      <Input
+        {...props}
+        type="text"
+        value={value}
+        disabled={isDisabled}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={(e) => handleUpdate(e.target.value)}
+        className={cn("border-border/70 hover:border-border w-full", className)}
+      />
+
+      <Button
+        variant="ghost"
+        onClick={handleToggle}
+        tabIndex={-1}
+        className={cn(
+          "absolute bottom-0 right-0 top-0 opacity-50",
+          !value && "text-muted-foreground",
+        )}
+      >
+        {enabled ? <CheckIcon /> : <XIcon />}
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils/cn";
+import { ComponentProps } from "react";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+
+type InlineEditInputProps<TValue> = Omit<ComponentProps<typeof Input>, "type"> &
+  useInlineEditOptions<TValue>;
+
+/**
+ * The inline edit string input component.
+ */
+export function InlineStringInput({
+  initialValue,
+  action,
+  className,
+  disabled,
+  ...props
+}: InlineEditInputProps<string>) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+  });
+
+  return (
+    <Input
+      {...props}
+      type="text"
+      value={value}
+      disabled={disabled || !isAllowed}
+      onChange={(e) => setValue(e.target.value)}
+      onBlur={(e) => handleUpdate(e.target.value)}
+      className={cn("border-border/70 hover:border-border w-full", className)}
+    />
+  );
+}
+
+/**
+ * The inline edit number input component.
+ */
+export function InlineNumberInput({
+  initialValue,
+  action,
+  className,
+  disabled,
+  ...props
+}: InlineEditInputProps<number>) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+  });
+
+  return (
+    <Input
+      {...props}
+      type="number"
+      value={value}
+      disabled={disabled || !isAllowed}
+      onChange={(e) => setValue(e.target.valueAsNumber)}
+      onBlur={(e) => handleUpdate(e.target.valueAsNumber)}
+      className={cn("border-border/70 hover:border-border w-full", className)}
+    />
+  );
+}

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

@@ -0,0 +1,36 @@
+"use client";
+
+import { EditorContextProvider } from "@/components/editor/context.client";
+import { Editor } from "@/components/editor/index.client";
+import { Input } from "@/components/ui/input";
+import { ComponentProps, useEffect } from "react";
+import { useDebounce } from "use-debounce";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+
+export function InlineRichtext({
+  initialValue,
+  action,
+  ...props
+}: Omit<ComponentProps<typeof Input>, "type"> & useInlineEditOptions<string>) {
+  const { value, setValue, handleUpdate } = useInlineEdit<string>({
+    initialValue,
+    action,
+  });
+
+  const [debouncedValue] = useDebounce(value, 500);
+
+  useEffect(() => {
+    if (!value) return;
+    handleUpdate(value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue]);
+
+  return (
+    <EditorContextProvider
+      value={value ? JSON.parse(value) : undefined}
+      onChange={(value) => setValue(JSON.stringify(value))}
+    >
+      <Editor {...props} />
+    </EditorContextProvider>
+  );
+}

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

@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.client";
+import type {
+  SelectContentProps,
+  SelectItemProps,
+  SelectProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from "@radix-ui/react-select";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+
+export type InlineSelectProps = SelectProps & useInlineEditOptions<string>;
+
+export function InlineSelect({ initialValue, disabled, ...props }: InlineSelectProps) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action: props.action,
+  });
+
+  return (
+    <Select
+      {...props}
+      disabled={disabled || !isAllowed}
+      defaultValue={value}
+      onValueChange={(value) => {
+        setValue(value);
+        handleUpdate(value);
+      }}
+    />
+  );
+}
+
+export type InlineSelectTriggerProps = SelectTriggerProps;
+
+export function InlineSelectTrigger(props: InlineSelectTriggerProps) {
+  return <SelectTrigger {...props} />;
+}
+
+export type InlineSelectContentProps = SelectContentProps;
+
+export function InlineSelectContent(props: InlineSelectContentProps) {
+  return <SelectContent {...props} />;
+}
+
+export type InlineSelectValueProps = SelectValueProps;
+
+export function InlineSelectValue(props: InlineSelectValueProps) {
+  return <SelectValue {...props} />;
+}
+
+export type InlineSelectItenProps = SelectItemProps;
+
+export function InlineSelectItem(props: InlineSelectItenProps) {
+  return <SelectItem {...props} />;
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+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({
+  initialValue,
+  action,
+  disabled,
+  ...props
+}: SwitchProps & useInlineEditOptions<boolean>) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+  });
+
+  return (
+    <Switch
+      {...props}
+      disabled={disabled || !isAllowed}
+      defaultChecked={value}
+      onCheckedChange={(checked) => {
+        setValue(checked);
+        handleUpdate(checked);
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { Toggle } from "@/components/ui/toggle";
+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 function InlineToggle({
+  initialValue,
+  action,
+  children,
+  className,
+  ...props
+}: InlineEditToggleProps) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+    initialValue,
+    action,
+  });
+
+  return (
+    <div {...props} className={cn("flex flex-wrap items-center justify-start gap-1", className)}>
+      <Toggle
+        disabled={!isAllowed}
+        variant="outline"
+        pressed={value}
+        defaultChecked={initialValue}
+        onPressedChange={(value) => {
+          setValue(value);
+          handleUpdate(value);
+        }}
+      >
+        {children}
+      </Toggle>
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+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/editor.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";
+export * from "./hooks/context.client";

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

@@ -0,0 +1 @@
+export * from "./lib/factory.server";

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

@@ -0,0 +1 @@
+export * from "./lib/validators";

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { Permission } from "@/modules/auth/lib/permissions";
+import React, { createContext, useContext } from "react";
+
+/**
+ * InlineEditContext
+ */
+export type InlineEditContextParams = { id: string; permission?: Permission };
+const InlineEditContext = createContext<InlineEditContextParams | undefined>(undefined);
+
+/**
+ * UseInlineEditContext
+ */
+export function useInlineEditContext() {
+  const context = useContext(InlineEditContext);
+  if (!context) throw new Error("InlineEditContext not found!");
+  return context;
+}
+
+/**
+ * InlineEditContext Provider
+ */
+export function InlineEditProvider({
+  children,
+  ...value
+}: InlineEditContextParams & { children: React.ReactNode }) {
+  return <InlineEditContext.Provider value={value}>{children}</InlineEditContext.Provider>;
+}

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

@@ -0,0 +1,62 @@
+"use client";
+
+import { useAction } from "@/lib/hooks/use-action";
+import { usePermission } from "@/modules/auth/hooks/use-permission.client";
+import { Permission } from "@/modules/auth/lib/permissions";
+import { JSONContent } from "@tiptap/react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useInlineEditContext } from "./context.client";
+
+export type useInlineEditOptions<TValue> = {
+  initialValue?: TValue;
+  action: (value: { id: string; value: TValue }) => Promise<unknown>;
+  permission?: Permission;
+};
+
+export function useInlineEdit<TValue extends string | number | Date | boolean | JSON | JSONContent>(
+  props: useInlineEditOptions<TValue>,
+) {
+  /**
+   * 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 });
+  };
+
+  return { value, setValue, handleUpdate, status, isAllowed };
+}