@tulip-systems/core 0.4.0 → 0.4.1

package/src/modules/data-tables/tables/inline-table/components/cells/drag-handle.client.tsx

@@ -4,11 +4,17 @@ import { CellContext } from "@tanstack/react-table";
 import { GripIcon } from "lucide-react";
 import { createTableCell } from "../../../../lib/helpers/create-column";
 import { TableInlineCell } from "./common";
+import { cn } from "@/lib/entry";
 
 /**
  * Create a new column with the drag handle
  */
-function TableDragHandle<TData, TValue>({ row }: CellContext<TData, TValue>) {
+export type TableDragHandleProps<TData, TValue> = Pick<CellContext<TData, TValue>, "row"> & {
+  className?: string;
+  disabled?: boolean;
+}
+
+export function TableDragHandle<TData, TValue>({ row, className, disabled }:  TableDragHandleProps<TData, TValue>) {
   const rowId = (row.original as { id: string }).id;
 
   const { attributes, listeners } = useSortable({ id: rowId });
@@ -21,7 +27,8 @@ function TableDragHandle<TData, TValue>({ row }: CellContext<TData, TValue>) {
         variant="ghost"
         size="icon"
         type="button"
-        className="h-full w-8 rounded-none border-none"
+        className={cn("h-full w-8 rounded-none border-none", className)}
+        disabled={disabled}
       >
         <GripIcon className="fill-muted size-4" />
       </Button>

package/src/modules/data-tables/tables/inline-table/components/row.client.tsx

@@ -6,6 +6,7 @@ import {
   ContextCommandMenuTrigger,
 } from "@/modules/commands/entry.client";
 import { TableRow } from "@/modules/data-tables/components/table";
+import { InlineEditProvider } from "@/modules/inline-edit/entry.client";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { type Row, type Table } from "@tanstack/react-table";
@@ -42,7 +43,7 @@ export function InlineTableRow<TData extends { id: string }>({
             transition,
           }}
         >
-          {children}
+          <InlineEditProvider id={row.original.id}>{children}</InlineEditProvider>
         </TableRow>
       </ContextCommandMenuTrigger>
 

package/src/modules/inline-edit/components/combobox-dropdown.client.tsx

@@ -5,16 +5,21 @@ import {
   ComboboxDropdownItem,
   type ComboboxDropdownProps,
 } from "@/components/ui/combobox-dropdown.client";
+import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
 export type InlineEditComboboxDropdownProps<TValue extends ComboboxDropdownItem> =
   useInlineEditOptions<string> &
+    InlineEditVariantsProps &
     Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
       onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
     };
 
 export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   selectedItem,
+  variant,
+  className,
   onSelect,
   disabled,
   ...props
@@ -26,6 +31,7 @@ export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   return (
     <ComboboxDropdown
       {...props}
+      className={cn(inlineEditVariants({ variant }), className)}
       disabled={disabled || !isAllowed}
       selectedItem={selectedItem ?? initialSelectedItem}
       onSelect={(event) => {

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

@@ -6,14 +6,18 @@ 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 function InlineEditor({
   initialValue,
   action,
+  variant,
   className,
   disabled,
   ...props
-}: Omit<ComponentProps<"input">, "type"> & useInlineEditOptions<JSONContent>) {
+}: Omit<ComponentProps<"input">, "type"> &
+  useInlineEditOptions<JSONContent> &
+  InlineEditVariantsProps) {
   const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
     initialValue,
     action,
@@ -30,7 +34,8 @@ export function InlineEditor({
     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",
+          "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,
         ),
       },

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

@@ -0,0 +1,43 @@
+"use client";
+
+import { Contact, RecipientInput } from "@/components/ui/input-recipient";
+import { ComponentProps } from "react";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+import { InlineEditVariantsProps } from "../lib/variants";
+
+type InlineRecipientInputProps = Omit<ComponentProps<typeof RecipientInput>, "value" | "onChange"> &
+  useInlineEditOptions<string[]> &
+  InlineEditVariantsProps & {
+    contacts: Contact[];
+  };
+
+/**
+ * The inline edit recipient input component.
+ */
+export function InlineRecipientInput({
+  initialValue,
+  action,
+  variant,
+  disabled,
+  contacts,
+  ...props
+}: InlineRecipientInputProps) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string[]>({
+    initialValue,
+    action,
+  });
+
+  return (
+    <RecipientInput
+      {...props}
+      contacts={contacts}
+      value={value ?? []}
+      onChange={(newValue) => {
+        setValue(newValue);
+        // Update onBlur-achtig gedrag: update direct na elke wijziging
+        handleUpdate(newValue);
+      }}
+      disabled={disabled || !isAllowed}
+    />
+  );
+}

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

@@ -4,9 +4,11 @@ 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";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
 type InlineEditInputProps<TValue> = Omit<ComponentProps<typeof Input>, "type"> &
-  useInlineEditOptions<TValue>;
+  useInlineEditOptions<TValue> &
+  InlineEditVariantsProps;
 
 /**
  * The inline edit string input component.
@@ -14,11 +16,12 @@ type InlineEditInputProps<TValue> = Omit<ComponentProps<typeof Input>, "type"> &
 export function InlineStringInput({
   initialValue,
   action,
+  variant,
   className,
   disabled,
   ...props
-}: InlineEditInputProps<string>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineEditInputProps<string | undefined>) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string | undefined>({
     initialValue,
     action,
   });
@@ -31,7 +34,11 @@ export function InlineStringInput({
       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)}
+      className={cn(
+        "border-border/70 hover:border-border w-full",
+        inlineEditVariants({ variant }),
+        className,
+      )}
     />
   );
 }
@@ -42,11 +49,12 @@ export function InlineStringInput({
 export function InlineNumberInput({
   initialValue,
   action,
+  variant,
   className,
   disabled,
   ...props
-}: InlineEditInputProps<number>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineEditInputProps<number | undefined>) {
+  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<number | undefined>({
     initialValue,
     action,
   });
@@ -55,11 +63,19 @@ export function InlineNumberInput({
     <Input
       {...props}
       type="number"
-      value={value}
+      value={value ?? undefined}
       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)}
+      onChange={(e) =>
+        setValue(!isNaN(e.target.valueAsNumber) ? e.target.valueAsNumber : undefined)
+      }
+      onBlur={(e) =>
+        handleUpdate(!isNaN(e.target.valueAsNumber) ? e.target.valueAsNumber : undefined)
+      }
+      className={cn(
+        "border-border/70 hover:border-border w-full",
+        inlineEditVariants({ variant }),
+        className,
+      )}
     />
   );
 }

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

@@ -10,6 +10,7 @@ import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.cl
 export function InlineRichtext({
   initialValue,
   action,
+  disabled,
   ...props
 }: Omit<ComponentProps<typeof Input>, "type"> & useInlineEditOptions<string>) {
   const { value, setValue, handleUpdate } = useInlineEdit<string>({
@@ -29,6 +30,7 @@ export function InlineRichtext({
     <EditorContextProvider
       value={value ? JSON.parse(value) : undefined}
       onChange={(value) => setValue(JSON.stringify(value))}
+      disabled={disabled}
     >
       <Editor {...props} />
     </EditorContextProvider>

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

@@ -7,6 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select.client";
+import { cn } from "@/lib/utils/cn";
 import type {
   SelectContentProps,
   SelectItemProps,
@@ -15,6 +16,7 @@ import type {
   SelectValueProps,
 } from "@radix-ui/react-select";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
+import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
 export type InlineSelectProps = SelectProps & useInlineEditOptions<string>;
 
@@ -39,8 +41,12 @@ export function InlineSelect({ initialValue, disabled, ...props }: InlineSelectP
 
 export type InlineSelectTriggerProps = SelectTriggerProps;
 
-export function InlineSelectTrigger(props: InlineSelectTriggerProps) {
-  return <SelectTrigger {...props} />;
+export function InlineSelectTrigger({
+  variant,
+  className,
+  ...props
+}: InlineSelectTriggerProps & InlineEditVariantsProps) {
+  return <SelectTrigger {...props} className={cn(inlineEditVariants({ variant }), className)} />;
 }
 
 export type InlineSelectContentProps = SelectContentProps;

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

@@ -3,6 +3,7 @@ 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-recipient.client";
 export * from "./components/input-toggle.client";
 export * from "./components/input.client";
 export * from "./components/richtext.client";

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

@@ -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 | JSONContent | 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 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/uploads/components/dropzone/context.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;
+}