@tulip-systems/core 0.4.0 → 0.5.0

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,10 +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";
@@ -14,9 +14,9 @@ export type useInlineEditOptions<TValue> = {
   permission?: Permission;
 };
 
-export function useInlineEdit<TValue extends string | number | Date | boolean | JSON | JSONContent>(
-  props: useInlineEditOptions<TValue>,
-) {
+export function useInlineEdit<
+  TValue extends string | number | Date | boolean | JSON | EditorJSONContent | undefined,
+>(props: useInlineEditOptions<TValue>) {
   /**
    * The inline edit context.
    */

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

@@ -0,0 +1,16 @@
+import { cva, VariantProps } from "class-variance-authority";
+
+export const inlineEditVariants = cva("", {
+  variants: {
+    variant: {
+      default: "",
+      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",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type InlineEditVariantsProps = VariantProps<typeof inlineEditVariants>;

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

@@ -0,0 +1,4 @@
+/**
+ * Handler
+ */
+export * from "./handler/caller.client";

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

@@ -0,0 +1,14 @@
+/**
+ * Handler
+ */
+export * from "./handler/caller.server";
+export * from "./handler/context.server";
+export * from "./handler/init.server";
+export * from "./handler/register.server";
+export * from "./handler/route.server";
+
+/**
+ * Lib
+ */
+export * from "./lib/error.server";
+export * from "./lib/query-client.server";

package/src/modules/router/entry.ts

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

package/src/modules/router/handler/caller.client.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import { AnyRouter, RouterClient as ORPCRouterClient } from "@orpc/server";
+import { createTanstackQueryUtils } from "@orpc/tanstack-query";
+import { RouterClient } from "./register.server";
+
+/**
+ * Create a new RPC link
+ */
+const link = new RPCLink({
+  url: () => {
+    if (typeof window === "undefined") {
+      throw new Error("RPCLink is not allowed on the server side.");
+    }
+
+    return `${window.location.origin}/api/rpc`;
+  },
+});
+
+/**
+ * Create a new RPC client
+ */
+const client: ORPCRouterClient<AnyRouter> = createORPCClient(link);
+
+/**
+ * Create a new RPC client
+ */
+export function createRPCClient<TRouter extends AnyRouter>(): RouterClient<TRouter> {
+  return createTanstackQueryUtils(client as ORPCRouterClient<TRouter>);
+}

package/src/modules/router/handler/caller.server.ts

@@ -0,0 +1,3 @@
+import { createRouterClient } from "@orpc/server";
+
+export const createRPCCaller = createRouterClient;

package/src/modules/router/handler/context.server.ts

@@ -0,0 +1,28 @@
+import "server-cli-only";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { type TDatabaseSchema } from "@/modules/config/db/types";
+import { TulipContext } from "@/modules/config/entry";
+import { headers as headersList } from "next/headers";
+import { cache } from "react";
+
+/**
+ * Create the router context
+ */
+export const createRPCContext = cache(
+  async <TSchema extends TDatabaseSchema>(props: { context: TulipContext<TSchema> }) => {
+    const headers = await headersList();
+    const session = await props.context.auth.api.getSession({ headers });
+
+    return { ...props.context, session, headers };
+  },
+);
+
+export type RPCContext<TSchema extends TDatabaseSchema = any> = Awaited<
+  ReturnType<typeof createRPCContext<TSchema>>
+>;
+
+export type ProtectedRPCContext<TSchema extends TDatabaseSchema = any> = RPCContext<TSchema> & {
+  session: NonNullable<RPCContext<TSchema>["session"]>;
+};

package/src/modules/router/handler/init.server.ts

@@ -0,0 +1,77 @@
+import "server-cli-only";
+
+import { Permission } from "@/modules/auth/lib/permissions";
+import { TDatabaseSchema } from "@/modules/config/db/types";
+import { os } from "@orpc/server";
+import { ServerError } from "../lib/error.server";
+import { ProtectedRPCContext, RPCContext } from "./context.server";
+
+/**
+ * Initialize TRPC
+ */
+export function initRPC<TSchema extends TDatabaseSchema>() {
+  /**
+   * Create the router
+   */
+  const o = os.$context<RPCContext<TSchema>>();
+
+  /**
+   * Middleware function to check if the user is authenticated
+   */
+  const authMiddleware = o.middleware(async (opts) => {
+    if (!opts.context.session) {
+      throw new ServerError("UNAUTHORIZED", {
+        message: "Jou hebt geen toegang om deze actie uit te voeren",
+      });
+    }
+
+    return opts.next({
+      context: { ...opts.context, session: opts.context.session } as ProtectedRPCContext<TSchema>,
+    });
+  });
+
+  /**
+   * Middleware function to check if the user has the required permission
+   */
+  function permissionMiddleware(permission: Permission) {
+    /**
+     * Middleware function to check if the user has the required permission
+     */
+    return os.$context<ProtectedRPCContext<TSchema>>().middleware(async (opts) => {
+      const { success, error } = await opts.context.auth.api.userHasPermission({
+        body: {
+          userId: opts.context.session.user.id,
+          permission,
+        },
+      });
+
+      if (error || !success) {
+        throw new ServerError("UNAUTHORIZED", {
+          message: "Jou hebt geen toegang om deze actie uit te voeren",
+        });
+      }
+
+      return opts.next({ context: { ...opts.context } as ProtectedRPCContext<TSchema> });
+    });
+  }
+
+  /**
+   * Public procedures
+   */
+  const publicProcedure = o;
+
+  /**
+   * Protected procedures
+   */
+  const protectedProcedure = o.use(authMiddleware);
+
+  /**
+   * Export
+   */
+  return {
+    publicProcedure,
+    protectedProcedure,
+    authMiddleware,
+    permissionMiddleware,
+  };
+}

package/src/modules/router/handler/register.server.ts

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { AnyRouter, RouterClient as ORPCRouterClient } from "@orpc/server";
+import { createTanstackQueryUtils, RouterUtils } from "@orpc/tanstack-query";
+
+export type RouterClient<TRouter extends AnyRouter> = RouterUtils<ORPCRouterClient<TRouter>>;
+
+export function registerRouterClient<TRouter extends AnyRouter>(client: ORPCRouterClient<TRouter>) {
+  if (!(globalThis as any).$client) {
+    (globalThis as any).$client = createTanstackQueryUtils(client);
+  }
+
+  return (globalThis as any).$client;
+}

package/src/modules/router/handler/route.server.ts

@@ -0,0 +1,41 @@
+import { TDatabaseSchema } from "@/modules/config/db/types";
+import { TulipContext } from "@/modules/config/lib/context";
+import { onError } from "@orpc/client";
+import { AnyRouter } from "@orpc/server";
+import { RPCHandler } from "@orpc/server/fetch";
+import { createRPCContext } from "./context.server";
+
+/**
+ * RPC Route handler
+ */
+export function handleRPCRoute<TRouter extends AnyRouter, TSchema extends TDatabaseSchema>(props: {
+  appRouter: TRouter;
+  context: TulipContext<TSchema>;
+}) {
+  const handler = new RPCHandler(props.appRouter, {
+    interceptors: [
+      onError((error) => {
+        console.error(JSON.stringify(error));
+      }),
+    ],
+  });
+
+  async function handleRequest(request: Request) {
+    const rpcContext = await createRPCContext({ context: props.context });
+    const { response } = await handler.handle(request, {
+      prefix: "/api/rpc",
+      context: rpcContext,
+    });
+
+    return response ?? new Response("Not found", { status: 404 });
+  }
+
+  return {
+    HEAD: handleRequest,
+    GET: handleRequest,
+    POST: handleRequest,
+    PUT: handleRequest,
+    PATCH: handleRequest,
+    DELETE: handleRequest,
+  };
+}

package/src/modules/router/lib/query-client.server.tsx

@@ -0,0 +1,19 @@
+import "server-cli-only";
+
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { cache } from "react";
+import { createQueryClient } from "./query-client";
+
+/**
+ *  Create a stable getter for the query client that will return the same client during the same request.
+ */
+export const getQueryClient = cache(createQueryClient);
+
+/**
+ * Hydrate the client with the data from the server
+ */
+export function HydrateClient(props: { children: React.ReactNode }) {
+  const queryClient = getQueryClient();
+
+  return <HydrationBoundary state={dehydrate(queryClient)}>{props.children}</HydrationBoundary>;
+}

package/src/modules/storage/components/dropzone-context.client.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { createContext, use } from "react";
+import { DropzoneOptions } from "react-dropzone";
+
+type DropzoneContextType = {
+  src?: File[];
+  accept?: DropzoneOptions["accept"];
+  maxSize?: DropzoneOptions["maxSize"];
+  minSize?: DropzoneOptions["minSize"];
+  maxFiles?: DropzoneOptions["maxFiles"];
+};
+
+export const DropzoneContext = createContext<DropzoneContextType | undefined>(undefined);
+
+/**
+ * Dropzone context hook
+ */
+export function useDropzoneContext() {
+  const context = use(DropzoneContext);
+  if (!context) throw new Error("useDropzoneContext must be used within a Dropzone");
+  return context;
+}

package/src/modules/storage/components/dropzone.client.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+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 { DropzoneContext, useDropzoneContext } from "./dropzone-context.client";
+
+/**
+ * Dropzone
+ */
+export type DropzoneProps = Omit<DropzoneOptions, "onDrop"> & {
+  src?: File[];
+  className?: string;
+  onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => void;
+  children?: ReactNode;
+};
+
+export function Dropzone({
+  accept,
+  maxFiles = 1,
+  maxSize,
+  minSize,
+  onDrop,
+  onError,
+  disabled,
+  src,
+  className,
+  children,
+  ...props
+}: DropzoneProps) {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept,
+    maxFiles,
+    maxSize,
+    minSize,
+    onError,
+    disabled,
+    onDrop: (acceptedFiles, fileRejections, event) => {
+      if (fileRejections.length > 0) {
+        const message = fileRejections.at(0)?.errors.at(0)?.message;
+        onError?.(new Error(message));
+        return;
+      }
+      onDrop?.(acceptedFiles, fileRejections, event);
+    },
+    ...props,
+  });
+
+  return (
+    <DropzoneContext key={JSON.stringify(src)} value={{ src, accept, maxSize, minSize, maxFiles }}>
+      <Button
+        className={cn(
+          "relative h-auto w-full flex-col overflow-hidden p-8",
+          isDragActive && "ring-ring outline-none ring-1",
+          className,
+        )}
+        disabled={disabled}
+        type="button"
+        variant="outline"
+        {...getRootProps()}
+      >
+        <input {...getInputProps()} disabled={disabled} />
+        {children}
+      </Button>
+    </DropzoneContext>
+  );
+}
+
+/**
+ * DropzoneContent
+ */
+export type DropzoneContentProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+const maxLabelItems = 3;
+
+export function DropzoneContent({ children, className }: DropzoneContentProps) {
+  const { src } = useDropzoneContext();
+  if (!src) return null;
+
+  if (children) return children;
+
+  return (
+    <div className={cn("flex flex-col items-center justify-center", className)}>
+      <div className="bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md">
+        <UploadIcon size={16} />
+      </div>
+
+      <p className="my-2 w-full truncate text-sm font-medium">
+        {src.length > maxLabelItems
+          ? `${new Intl.ListFormat("en").format(
+              src.slice(0, maxLabelItems).map((file) => file.name),
+            )} and ${src.length - maxLabelItems} more`
+          : new Intl.ListFormat("en").format(src.map((file) => file.name))}
+      </p>
+
+      <p className="text-muted-foreground w-full text-wrap text-xs">
+        Drag and drop or click to replace
+      </p>
+    </div>
+  );
+}
+
+/**
+ * DropzoneEmptyState
+ */
+export type DropzoneEmptyStateProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export function DropzoneEmptyState({ children, className }: DropzoneEmptyStateProps) {
+  const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();
+  if (src) {
+    return null;
+  }
+  if (children) {
+    return children;
+  }
+  let caption = "";
+  if (accept) {
+    caption += "Accepts ";
+    caption += new Intl.ListFormat("en").format(Object.keys(accept));
+  }
+  if (minSize && maxSize) {
+    caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;
+  } else if (minSize) {
+    caption += ` at least ${renderBytes(minSize)}`;
+  } else if (maxSize) {
+    caption += ` less than ${renderBytes(maxSize)}`;
+  }
+  return (
+    <div className={cn("flex flex-col items-center justify-center", className)}>
+      <div className="bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md">
+        <UploadIcon size={16} />
+      </div>
+      <p className="my-2 w-full truncate text-wrap text-sm font-medium">
+        Upload {maxFiles === 1 ? "a file" : "files"}
+      </p>
+      <p className="text-muted-foreground w-full truncate text-wrap text-xs">
+        Drag and drop or click to upload
+      </p>
+      {caption && <p className="text-muted-foreground text-wrap text-xs">{caption}.</p>}
+    </div>
+  );
+}