@tulip-systems/core 0.2.0

package/src/modules/inline-edit/lib/factory.server.ts

@@ -0,0 +1,91 @@
+// import "server-cli-only";
+
+// import { ServerError } from "@/modules/config/router/error.server";
+// import { eq, type AnyColumn } from "drizzle-orm";
+// import type { PgTable } from "drizzle-orm/pg-core";
+// import type { z } from "zod";
+// import { createInlineEditSchema, InlineEditSchema } from "./validators";
+// import { RPCContext } from "@/modules/config/router/context.server";
+// import { AnyProcedure, Procedure } from "@orpc/server";
+
+// /**
+//  * Inline edit factory hooks
+//  */
+// type InlineEditFactoryHookParams<TSchema> = {
+//   input: { id: string; value: TSchema };
+//   context: RPCContext;
+// };
+
+// type InlineEditFactoryHook<TTable extends PgTable, TSchema> = {
+//   beforeUpdate?: (params: InlineEditFactoryHookParams<TSchema>) => Promise<void> | void;
+//   afterUpdate?: (
+//     params: InlineEditFactoryHookParams<TSchema> & { data: TTable["$inferSelect"] },
+//   ) => Promise<void> | void;
+// };
+
+// /**
+//  * Create inline edit factory params
+//  */
+// type CreateInlineEditFactoryParams<TTable extends PgTable, TSchema> = {
+//   procedure: Procedure<RPCContext, RPCContext, InlineEditSchema<TSchema>, undefined, any, any>;
+//   table: TTable;
+//   hooks?: InlineEditFactoryHook<TTable, unknown>;
+// };
+
+// /**
+//  * Inline edit factory params
+//  */
+// type InlineEditFactoryParams<TTable extends PgTable, TSchema> = {
+//   column: keyof TTable["_"]["columns"];
+//   schema: z.Schema<TSchema>;
+//   hooks?: InlineEditFactoryHook<TTable, TSchema>;
+// };
+
+// /**
+//  * Create inline edit factory
+//  * @param { CreateInlineEditFactoryParams<TTable> } params
+//  */
+// export function createInlineEditFactory<TTable extends PgTable, TSchema>(
+//   params: CreateInlineEditFactoryParams<TTable, TSchema>,
+// ) {
+//   /**
+//    * Inline edit factory instance
+//    * @param { InlineEditFactoryParams } options
+//    */
+//   return <TSchema>({ column, schema, hooks = {} }: InlineEditFactoryParams<TTable, TSchema>) => {
+//     if (!("id" in params.table)) throw new Error("Table does not have a id column");
+
+//     const idColumn = params.table["id" as keyof typeof params.table] as AnyColumn;
+
+//     return params.procedure
+//       .input(createInlineEditSchema(schema))
+//       .mutation(async ({ context, ...opts }) => {
+//         const input = opts.input as { id: string; value: TSchema };
+//         const { id, value } = input;
+
+//         // Run the before update callback
+//         await params.hooks?.beforeUpdate?.({ input, context });
+//         await hooks.beforeUpdate?.({ input, context });
+
+//         // Update the column value
+//         const [data] = await context.db
+//           .update(params.table)
+//           .set({ [column]: value } as Partial<TTable["$inferInsert"]>)
+//           .where(eq(idColumn, id))
+//           .returning();
+
+//         if (!data) {
+//           throw new ServerError("INTERNAL_SERVER_ERROR", {
+//             message: "Kon niet worden gewijzigd",
+//           });
+//         }
+
+//         // Run the after update callback
+//         await hooks.afterUpdate?.({ data, input, context });
+//         await params.hooks?.afterUpdate?.({ data, input, context });
+
+//         // Return undefined
+//         return undefined;
+//       });
+//   };
+// }

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

@@ -0,0 +1,43 @@
+import { z, ZodType } from "zod";
+
+/**
+ * Inline edit schema
+ */
+const inlineEditSchema = z.object({
+  id: z.string(),
+});
+
+export type InlineEditSchema<TValue> = z.infer<typeof inlineEditSchema> & {
+  value: TValue;
+};
+
+/**
+ * Create inline edit schema
+ */
+export const createInlineEditSchema = <TValue extends ZodType>(value: TValue) =>
+  inlineEditSchema.extend({ value });
+
+/**
+ * Inline edit string schema
+ */
+export const inlineEditStringSchema = createInlineEditSchema(z.string());
+
+/**
+ * Inline edit number schema
+ */
+export const inlineEditNumberSchema = createInlineEditSchema(z.number());
+
+/**
+ * Inline edit boolean schema
+ */
+export const inlineEditBooleanSchema = createInlineEditSchema(z.boolean());
+
+/**
+ * Inline edit date schema
+ */
+export const inlineEditDateSchema = createInlineEditSchema(z.date());
+
+/**
+ * Inline edit json schema
+ */
+export const inlineEditJsonSchema = createInlineEditSchema(z.any());

package/src/modules/uploads/components/button.client.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+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";
+
+export function UploadButton({ className, ...props }: ComponentProps<typeof Button>) {
+  const { onUpload } = useUploadZone();
+
+  return (
+    <Button {...props} className={cn("relative gap-2", className)}>
+      <UploadIcon className="h-3 w-3" />
+      <span>Upload</span>
+
+      <Input
+        type="file"
+        className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
+        multiple
+        onChange={(e) => {
+          if (!e.target.files) return;
+          Array.from(e.target.files).forEach(onUpload);
+        }}
+      />
+    </Button>
+  );
+}

package/src/modules/uploads/components/images/grid.client.tsx

@@ -0,0 +1,162 @@
+"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 { cn } from "@/lib/utils/cn";
+import {
+  closestCenter,
+  DndContext,
+  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 } from "lucide-react";
+import Image from "next/image";
+import React, { type HTMLAttributes } from "react";
+import { useUploadZone } from "../../hooks/use-upload-zone.client";
+import { ImageInput } from "./input.client";
+
+/**
+ * Image Grid
+ */
+export function ImageGrid(props: HTMLAttributes<HTMLElement>) {
+  const { files, disabled, onUpload, onMove } = useUploadZone();
+
+  const [current, setCurrent] = React.useState<number>(0);
+
+  const { setNodeRef } = useDroppable({ id: "image grid" });
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  return (
+    <Dialog {...props}>
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onMove}>
+        <div
+          ref={setNodeRef}
+          className="grid grid-cols-[repeat(auto-fill,_minmax(10rem,_1fr))] gap-5"
+        >
+          <SortableContext items={files.map((file) => file.url)} strategy={rectSortingStrategy}>
+            {files.map(({ url, isLoading }, index) => (
+              <ImageGridItem
+                key={url}
+                url={url}
+                index={index}
+                isLoading={isLoading}
+                setCurrent={setCurrent}
+              />
+            ))}
+
+            {!disabled && <ImageInput onUpload={onUpload} />}
+          </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]">
+            {files.map(({ url }, index) => (
+              <CarouselItem key={index} className="overflow-hidden rounded-xl">
+                <Image
+                  src={url}
+                  alt="Image Preview"
+                  width={1920}
+                  height={1080}
+                  className="h-full w-full rounded-xl object-contain"
+                />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </DialogContent>
+      </Carousel>
+    </Dialog>
+  );
+}
+
+/**
+ * Image Grid Item
+ */
+type ImageGridItemProps = {
+  url: string;
+  index: number;
+  isLoading: boolean | undefined;
+  setCurrent: React.Dispatch<React.SetStateAction<number>>;
+};
+
+function ImageGridItem({ url, index, isLoading, setCurrent }: ImageGridItemProps) {
+  const { onDelete, onMove } = useUploadZone();
+
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: url,
+  });
+
+  return (
+    <Card
+      id={url}
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      className={cn("group relative aspect-square w-full", isLoading && "opacity-30")}
+    >
+      <DialogTrigger onClick={() => setCurrent(index)}>
+        <Image
+          src={url}
+          alt="Image Preview"
+          width={100}
+          height={100}
+          className="bg-muted absolute inset-0 h-full w-full cursor-pointer rounded-lg object-contain"
+        />
+      </DialogTrigger>
+
+      {onMove && (
+        <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>
+      )}
+
+      {onDelete && (
+        <Button
+          type="button"
+          variant="destructive"
+          size="icon"
+          onClick={() => onDelete(url)}
+          className="absolute left-2 top-2 hidden p-1 group-hover:flex"
+        >
+          <Icons.trash className="size-4" />
+        </Button>
+      )}
+    </Card>
+  );
+}

package/src/modules/uploads/components/images/input.client.tsx

@@ -0,0 +1,34 @@
+import "client-only";
+
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils/cn";
+import { UploadIcon } from "lucide-react";
+import React from "react";
+
+export type ImageInputProps = React.HTMLAttributes<HTMLElement> & {
+  onUpload: (file: File) => void;
+};
+
+export function ImageInput({ onUpload, className, ...props }: ImageInputProps) {
+  return (
+    <label
+      {...props}
+      className={cn(
+        "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",
+        className,
+      )}
+    >
+      <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>
+  );
+}

package/src/modules/uploads/components/preview-dialog.client.tsx

@@ -0,0 +1,21 @@
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog.client";
+import Image from "next/image";
+
+type AssetPreviewDialogProps = {
+  children: React.ReactNode;
+  src: string;
+};
+
+export function AssetPreviewDialog({ children, src }: AssetPreviewDialogProps) {
+  return (
+    <Dialog>
+      {children}
+
+      <DialogContent className="max-h-[80vh] overflow-hidden border-none p-0 lg:min-w-[40vw]">
+        <Image src={src} alt="preview" className="h-full w-full" width={1920} height={1080} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const AssetPreviewDialogTrigger = DialogTrigger;

package/src/modules/uploads/components/zone.client.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils/cn";
+import React, { useState, type HTMLAttributes } from "react";
+import {
+  UploadFile,
+  UploadZoneContext,
+  UploadZoneContextValue,
+} from "../hooks/use-upload-zone.client";
+
+/**
+ * UploadZone
+ */
+type UploadZoneProps<TFile extends UploadFile> = HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+  value: UploadZoneContextValue<TFile>;
+};
+
+export function UploadZone<TFile extends UploadFile>({
+  value,
+  children,
+  className,
+  ...props
+}: UploadZoneProps<TFile>) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  return (
+    <UploadZoneContext.Provider value={value}>
+      <div
+        {...props}
+        className={cn("relative z-0 space-y-6", className)}
+        onDragOver={() => setIsDragging(true)}
+        onDragLeave={() => setIsDragging(false)}
+      >
+        {isDragging && (
+          <div className="border-primary bg-primary/20 absolute -inset-5 z-10 rounded-md border opacity-70 backdrop-blur-3xl">
+            <Input
+              multiple
+              type="file"
+              className="h-full w-full opacity-0"
+              onChange={(e) => {
+                setIsDragging(false);
+
+                if (!e.target.files) return;
+                Array.from(e.target.files).forEach(value.onUpload);
+              }}
+            />
+          </div>
+        )}
+
+        {children}
+      </div>
+    </UploadZoneContext.Provider>
+  );
+}

package/src/modules/uploads/entry.client.ts

@@ -0,0 +1,14 @@
+/**
+ * Components
+ */
+export * from "./components/button.client";
+export * from "./components/images/grid.client";
+export * from "./components/images/input.client";
+export * from "./components/preview-dialog.client";
+export * from "./components/zone.client";
+
+/**
+ * Hooks
+ */
+export * from "./hooks/use-upload-image.client";
+export * from "./hooks/use-upload-zone.client";

package/src/modules/uploads/entry.server.ts

@@ -0,0 +1,6 @@
+/**
+ * Lib
+ */
+export * from "./lib/route.server";
+export * from "./lib/router.server";
+export * from "./lib/proxy.server";

package/src/modules/uploads/entry.ts

@@ -0,0 +1,5 @@
+export * from "./lib/constants";
+export * from "./lib/filters";
+export * from "./lib/helpers";
+export * from "./lib/schema";
+export * from "./lib/validators";

package/src/modules/uploads/hooks/use-upload-image.client.tsx

@@ -0,0 +1,131 @@
+import { useAction } from "@/lib/hooks/use-action";
+import { useIndicator } from "@/lib/hooks/use-indicator";
+import { arrayMove } from "@/lib/utils/array-move";
+import { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core";
+import { upload } from "@vercel/blob/client";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Asset } from "../entry";
+import { UploadZoneContextValue } from "./use-upload-zone.client";
+
+type ImageUpload = Pick<Asset, "pathname" | "name" | "url"> & {
+  loading?: boolean;
+};
+
+type UploadOptions<TPayload> = {
+  initial: ImageUpload[];
+  payload: TPayload;
+  handleUploadUrl: string;
+  createPathname?: (file: File) => string;
+  deleteAction: (params: { url: string }) => Promise<void>;
+  moveAction?: (params: { fromIndex: number; toIndex: number }) => Promise<void>;
+  max?: number;
+};
+
+export function useUploadImage<TPayload>({
+  max,
+  payload,
+  initial,
+  handleUploadUrl,
+  createPathname,
+  deleteAction,
+  moveAction,
+}: UploadOptions<TPayload>): UploadZoneContextValue<ImageUpload> {
+  const { status, setStatus, startTransition } = useIndicator();
+
+  const [files, setFiles] = useState<ImageUpload[]>(initial ?? []);
+
+  const disabled = files.length >= (max ?? Infinity);
+
+  /**
+   * Uploads a file
+   */
+  async function onUpload(file: File) {
+    // Check if the upload has reached the max limit
+    if (disabled) return;
+
+    // Create the pathname
+    const pathname = createPathname ? createPathname(file) : file.name;
+
+    // Add the file to the state so that it starts loading
+    const fileUrl = URL.createObjectURL(file);
+    setFiles((prev) => [...prev, { name: file.name, url: fileUrl, pathname, isLoading: true }]);
+
+    startTransition(async () => {
+      try {
+        // Create the payload
+        const basePayload = { size: file.size };
+
+        // Upload the file
+        const blob = await upload(pathname, file, {
+          access: "public",
+          handleUploadUrl,
+          clientPayload: JSON.stringify(payload ? { ...payload, ...basePayload } : basePayload),
+        });
+
+        // Find the file in the state and update it so that it stops loading and has the correct URL
+        setFiles((prev) =>
+          prev.map((file) => (file.pathname === pathname ? { ...blob, name: file.name } : file)),
+        );
+
+        toast.success(`Afbeelding ${file.name} is geüpload`);
+        setStatus("success");
+      } catch (err: unknown) {
+        console.error(err);
+        // Remove the file from the state so that it stops loading
+        setFiles((prev) => prev.filter((file) => file.pathname !== pathname));
+
+        toast.error("Error", { description: err instanceof Error ? err.message : undefined });
+        setStatus("error");
+      }
+    });
+  }
+
+  /**
+   * Delete an image
+   */
+  const deleteMutation = useAction({
+    mutationFn: deleteAction,
+    onSuccess: () => toast.success("Afbeelding is succesvol verwijderd"),
+  });
+
+  function onDelete(url: string) {
+    setFiles((prev) => prev.filter((file) => file.url !== url));
+    deleteMutation.mutate({ url });
+  }
+
+  /**
+   * Move an image
+   */
+  const moveMutation = useAction({
+    mutationFn: async (params: { activeId: UniqueIdentifier; overId: UniqueIdentifier }) => {
+      if (!moveAction) return Promise.resolve();
+
+      const fromIndex = files.findIndex((file) => file.url === params.activeId);
+      const toIndex = files.findIndex((file) => file.url === params.overId);
+
+      setFiles((prev) => arrayMove(prev, { fromIndex, toIndex }));
+      await moveAction({ fromIndex, toIndex });
+    },
+  });
+
+  function onMove({ active, over }: DragEndEvent) {
+    const activeId = active.id;
+    const overId = over?.id;
+
+    if (!activeId || !overId || activeId === overId) return;
+
+    moveMutation.mutate({ activeId, overId });
+  }
+
+  return {
+    files,
+    status,
+    disabled,
+    handleUploadUrl,
+    createPathname,
+    onUpload,
+    onDelete,
+    onMove,
+  };
+}

package/src/modules/uploads/hooks/use-upload-zone.client.ts

@@ -0,0 +1,44 @@
+import "client-only";
+
+import { IndicatorStatus } from "@/lib/hooks/use-indicator";
+import { DragEndEvent } from "@dnd-kit/core";
+import React from "react";
+
+/**
+ * UploadFile
+ */
+export type UploadFile = {
+  name: string;
+  url: string;
+  isLoading?: boolean;
+};
+
+/**
+ * UploadZoneContextValue
+ */
+export type UploadZoneContextValue<TFile extends UploadFile> = {
+  files: TFile[];
+  disabled?: boolean;
+  status: IndicatorStatus;
+  handleUploadUrl: string;
+  createPathname?: (file: File) => string;
+  onUpload: (file: File) => void;
+  onDelete: (url: string) => void;
+  onMove?: (event: DragEndEvent) => void;
+};
+
+/**
+ * UploadZoneContext
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const UploadZoneContext = React.createContext({} as UploadZoneContextValue<any>);
+
+/**
+ * useUploadZone
+ */
+export function useUploadZone<TFile extends UploadFile>() {
+  const context = React.useContext(UploadZoneContext);
+  if (!context) throw new Error("Missing UploadZoneContext");
+
+  return context as UploadZoneContextValue<TFile>;
+}

package/src/modules/uploads/lib/constants.ts

@@ -0,0 +1,10 @@
+// Device sizes
+export const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840] as const;
+
+// Image variants
+export const imageVariants = ["main", ...deviceSizes.map((size) => `preview-${size}` as const)] as const;
+export type ImageVariant = typeof imageVariants[number];
+
+// Image dispositions
+export const imageDispositions = ["inline", "attachment"] as const;
+export type ImageDisposition = typeof imageDispositions[number];

package/src/modules/uploads/lib/filters.ts

@@ -0,0 +1,7 @@
+import { createTableFilters } from "@/modules/data-tables/lib/filters/config";
+import { parseFilterBoolean } from "@/modules/data-tables/lib/filters/parsers";
+import z from "zod";
+
+export const nodesTableFilters = createTableFilters({
+  isDeleted: parseFilterBoolean(z.boolean()),
+});