@tulip-systems/core 0.4.1 → 0.5.0

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";

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

@@ -1,9 +1,9 @@
 "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 { JSONContent } from "@tiptap/react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { useInlineEditContext } from "./context.client";
@@ -15,7 +15,7 @@ export type useInlineEditOptions<TValue> = {
 };
 
 export function useInlineEdit<
-  TValue extends string | number | Date | boolean | JSON | JSONContent | undefined,
+  TValue extends string | number | Date | boolean | JSON | EditorJSONContent | undefined,
 >(props: useInlineEditOptions<TValue>) {
   /**
    * The inline edit context.

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

@@ -5,7 +5,7 @@ export const inlineEditVariants = cva("", {
     variant: {
       default: "",
       table:
-        "min-h-9 px-3 py-1 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",
+        "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",
     },
   },
   defaultVariants: {

package/src/modules/{uploads/components/dropzone/index.tsx → storage/components/dropzone.client.tsx}

@@ -2,12 +2,12 @@
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils/cn";
+import { renderBytes } from "@/modules/storage/lib/helpers";
 import { UploadIcon } from "lucide-react";
 import type { ReactNode } from "react";
 import type { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone";
 import { useDropzone } from "react-dropzone";
-import { renderBytes } from "../../lib/helpers";
-import { DropzoneContext, useDropzoneContext } from "./context";
+import { DropzoneContext, useDropzoneContext } from "./dropzone-context.client";
 
 /**
  * Dropzone

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

@@ -0,0 +1,225 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog.client";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useAction } from "@/lib/entry.client";
+import { arrayMove } from "@/lib/utils/array-move";
+import { cn } from "@/lib/utils/cn";
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripIcon, UploadIcon } from "lucide-react";
+import Image from "next/image";
+import React, { ComponentProps } from "react";
+import { getFileUrl, imageLoader } from "../lib/helpers";
+import { FileNode } from "../lib/validators";
+import { useUploadZone } from "./upload-zone-context.client";
+
+/**
+ * Image Grid
+ */
+type ImageGridProps = ComponentProps<"div"> & {
+  nodes: FileNode[];
+  disabled?: boolean;
+  moveAction: (params: { fromIndex: number; toIndex: number }) => Promise<void>;
+};
+
+export function ImageGrid({ nodes, moveAction, disabled, ...props }: ImageGridProps) {
+  const { onUpload, updateData, invalidateQuery } = useUploadZone();
+
+  const images = nodes.flatMap((node) => ({ ...node, url: getFileUrl(node.id) }));
+
+  const [current, setCurrent] = React.useState<number>(0);
+
+  const { setNodeRef } = useDroppable({ id: "image-grid" });
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const moveMuration = useAction({
+    mutationFn: async ({ active, over }: DragEndEvent) => {
+      if (!moveAction) return Promise.resolve();
+
+      const activeId = active.id;
+      const overId = over?.id;
+      if (!activeId || !overId || activeId === overId) return Promise.resolve();
+
+      const fromIndex = images.findIndex((image) => image.id === activeId);
+      const toIndex = images.findIndex((image) => image.id === overId);
+
+      await updateData((prev) => arrayMove(prev, { fromIndex, toIndex }));
+      await moveAction({ fromIndex, toIndex });
+    },
+    onSuccess: async () => {
+      setCurrent(0);
+      await invalidateQuery();
+    },
+    onError: (error) => {
+      console.error("Error moving image:", error);
+    },
+  });
+
+  return (
+    <Dialog {...props}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={moveMuration.mutate}
+      >
+        <div
+          ref={setNodeRef}
+          className="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5"
+        >
+          <SortableContext items={images.map((image) => image.id)} strategy={rectSortingStrategy}>
+            {images.map((node, index) => (
+              <ImageGridItem key={node.id} node={node} index={index} setCurrent={setCurrent} />
+            ))}
+
+            {!disabled && (
+              <label className="border-muted-foreground bg-muted hover:border-primary relative flex aspect-square w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed">
+                <UploadIcon className="h-8 w-8" />
+                <Input
+                  type="file"
+                  accept="image/jpeg, image/png, image/webp, image/gif"
+                  className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
+                  multiple
+                  onChange={(e) => {
+                    if (!e.target.files) return;
+                    return Array.from(e.target.files).map(onUpload);
+                  }}
+                />
+              </label>
+            )}
+          </SortableContext>
+        </div>
+      </DndContext>
+
+      <Carousel className="w-full" opts={{ startIndex: current }}>
+        <DialogContent className="border-none bg-transparent p-0 shadow-none md:max-w-[80vw] xl:max-w-[60vw]">
+          <CarouselContent className="md:max-h-[80vh]">
+            {images.map(({ id, url }) => (
+              <CarouselItem key={id} className="overflow-hidden rounded-xl">
+                <Image
+                  src={url}
+                  alt="Image Preview"
+                  width={1920}
+                  height={1080}
+                  className="h-full w-full rounded-xl object-contain"
+                  loader={imageLoader}
+                />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </DialogContent>
+      </Carousel>
+    </Dialog>
+  );
+}
+
+/**
+ * Image Grid Item
+ */
+type ImageGridItemProps = {
+  node: FileNode & { url: string };
+  index: number;
+  setCurrent: React.Dispatch<React.SetStateAction<number>>;
+};
+
+function ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {
+  const { deleteMutation } = useUploadZone();
+
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });
+
+  return (
+    <Card
+      id={node.id}
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      className={cn("group relative aspect-square w-full", node.isPending && "opacity-30")}
+    >
+      {!node.isPending ? (
+        <>
+          <DialogTrigger onClick={() => setCurrent(index)}>
+            <Image
+              src={node.url}
+              alt="Image Preview"
+              width={100}
+              height={100}
+              className="bg-muted absolute inset-0 h-full w-full cursor-pointer rounded-lg object-contain"
+              loader={imageLoader}
+            />
+          </DialogTrigger>
+
+          <Button
+            {...attributes}
+            {...listeners}
+            type="button"
+            variant="secondary"
+            size="icon"
+            className="absolute right-2 top-2 hidden p-1 group-hover:flex"
+          >
+            <GripIcon className="size-4" />
+          </Button>
+
+          <Button
+            type="button"
+            variant="destructive"
+            size="icon"
+            onClick={() => deleteMutation({ ids: [node.id] })}
+            className="absolute left-2 top-2 hidden p-1 group-hover:flex"
+          >
+            <Icons.trash className="size-4" />
+          </Button>
+        </>
+      ) : (
+        <Skeleton className="absolute inset-0 h-full w-full rounded-lg" />
+      )}
+    </Card>
+  );
+}
+
+export function ImageGridSkeleton(props: ComponentProps<"div">) {
+  return (
+    <div
+      {...props}
+      className={cn("grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5", props.className)}
+    >
+      {Array.from({ length: 12 }).map((_, index) => (
+        <Skeleton key={index} className="aspect-square w-full rounded-lg" />
+      ))}
+    </div>
+  );
+}

package/src/modules/{uploads/components/button.client.tsx → storage/components/upload-button.client.tsx}

@@ -5,7 +5,7 @@ import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils/cn";
 import { UploadIcon } from "lucide-react";
 import { ComponentProps } from "react";
-import { useUploadZone } from "../hooks/use-upload-zone.client";
+import { useUploadZone } from "./upload-zone-context.client";
 
 export function UploadButton({ className, ...props }: ComponentProps<typeof Button>) {
   const { onUpload } = useUploadZone();

package/src/modules/storage/components/upload-zone-context.client.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import { FileNode, Node, PresignFileSchema } from "../lib/validators";
+
+/**
+ * Upload Zone Context Value
+ */
+export type UploadZoneContextValue = {
+  presignMutation: (params: PresignFileSchema) => Promise<{ id: string; presignedUrl: string }>;
+  confirmMutation: (params: { id: string }) => Promise<Node>;
+  deleteMutation: (params: { ids: string[] }) => Promise<unknown>;
+  updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;
+  invalidateQuery: () => Promise<void> | void;
+  onUpload: (file: File) => Promise<Node>;
+};
+
+/**
+ * Upload Zone Context
+ */
+export const UploadZoneContext = React.createContext({} as UploadZoneContextValue);
+
+/**
+ * Upload Zone Hook
+ */
+export function useUploadZone() {
+  const context = React.useContext(UploadZoneContext);
+  if (!context) {
+    throw new Error("useUploadZone must be used within an UploadZoneProvider");
+  }
+  return context;
+}