@tulip-systems/core 0.4.0 → 0.5.0

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

@@ -1,162 +0,0 @@
-"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

@@ -1,34 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,56 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-/**
- * 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

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

package/src/modules/uploads/entry.ts

@@ -1,5 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,10 +0,0 @@
-// 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

@@ -1,7 +0,0 @@
-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()),
-});

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

@@ -1,66 +0,0 @@
-import { GetFileUrlInput } from "./proxy.server";
-import { FileNode, Node } from "./validators";
-
-/**
- * Check if the node is a file
- */
-export function isFile(node: Pick<Node, "type">): node is Node {
-  return node.type === "file";
-}
-
-/**
- * Check if the node is a folder
- */
-export function isFolder(node: Pick<Node, "type">): node is Node {
-  return node.type === "folder";
-}
-
-/**
- * Get file url
- */
-export function getFileUrl(
-  id: string,
-  { variant, disposition }: Pick<GetFileUrlInput, "variant" | "disposition"> = {},
-) {
-  const searchParams = new URLSearchParams();
-  searchParams.set("id", id);
-  if (variant) searchParams.set("variant", variant);
-  if (disposition) searchParams.set("disposition", disposition);
-
-  return `/api/drive/files?${searchParams.toString()}`;
-}
-
-/**
- * Node subtype
- */
-export const nodeSubtypes = [
-  "image",
-  "document",
-  "spreadsheet",
-  "video",
-  "audio",
-  "archive",
-  "other",
-] as const;
-
-export type NodeSubtype = (typeof nodeSubtypes)[number];
-
-export function inferNodeSubtype({
-  name,
-  contentType,
-}: Pick<FileNode, "name" | "contentType">): NodeSubtype {
-  if (contentType?.startsWith("image/")) return "image";
-  if (contentType === "application/pdf") return "document";
-  if (contentType?.includes("spreadsheet")) return "spreadsheet";
-  if (contentType?.startsWith("video/")) return "video";
-  if (contentType?.startsWith("audio/")) return "audio";
-  if (contentType?.includes("zip") || contentType?.includes("archive")) return "archive";
-
-  const ext = name.split(".").pop()?.toLowerCase();
-  if (["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(ext ?? "")) return "image";
-  if (["pdf", "doc", "docx", "txt"].includes(ext ?? "")) return "document";
-  if (["xls", "xlsx", "ods"].includes(ext ?? "")) return "spreadsheet";
-  if (["zip", "rar", "7z"].includes(ext ?? "")) return "archive";
-
-  return "other";
-}