@tulip-systems/core 0.2.0

package/src/modules/commands/hooks/use-command-menu.client.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import { Permission } from "@/modules/auth/entry";
+import { usePermission } from "@/modules/auth/hooks/use-permission.client";
+import { mergePermissions } from "@/modules/auth/lib/utils";
+import {
+  type BulkCommandDefRenderParams,
+  type CommandDef,
+  type SingleCommandDefRenderParams,
+} from "../lib/definitions";
+
+/**
+ * Command menu props
+ */
+export type SingleCommandMenuProps<TData, TMeta> = {
+  data: TData;
+  commands: CommandDef<TData, TMeta>[];
+  meta?: TMeta;
+};
+
+export type BulkCommandMenuProps<TData, TMeta> = {
+  data: TData[];
+  commands: CommandDef<TData, TMeta>[];
+  meta?: TMeta;
+};
+
+/**
+ * Check if a command has an id field in the data
+ */
+function dataHasId<TData>(data: TData) {
+  return data && typeof data === "object" && "id" in data && typeof data.id === "string";
+}
+
+/**
+ * Single command validation
+ */
+type ValidateSingleCommandParams<TData, TMeta> = {
+  data: TData;
+  command: CommandDef<TData, TMeta> & { mode: "single" };
+};
+
+function validateSingleCommand<TData, TMeta>({
+  data,
+  command,
+}: ValidateSingleCommandParams<TData, TMeta>) {
+  const valid = command.conditions?.({ data });
+  return Array.isArray(valid) ? valid.every(Boolean) : (valid ?? true);
+}
+
+/**
+ * Single command rendering
+ */
+type RenderSingleCommandParams<TData, TMeta> = {
+  data: TData;
+  meta?: TMeta;
+  command: CommandDef<TData, TMeta> & { mode: "single" };
+};
+
+function renderSingleCommand<TData, TMeta>({
+  data,
+  command,
+  meta,
+}: RenderSingleCommandParams<TData, TMeta>) {
+  return command.render({
+    data,
+    meta: meta ?? ({} as TMeta),
+    ...(dataHasId(data) ? { id: (data as TData & { id: string }).id } : {}),
+  } as SingleCommandDefRenderParams<TData, TMeta>);
+}
+
+/**
+ * Bulk command validation
+ */
+type ValidateBulkCommandParams<TData, TMeta> = {
+  data: TData[];
+  command: CommandDef<TData, TMeta> & { mode: "bulk" };
+};
+
+function validateBulkCommand<TData, TMeta>({
+  data,
+  command,
+}: ValidateBulkCommandParams<TData, TMeta>) {
+  const valid = command.conditions?.({ data });
+  return Array.isArray(valid) ? valid.every(Boolean) : (valid ?? true);
+}
+
+/**
+ * Bulk command rendering
+ */
+type RenderBulkCommandParams<TData, TMeta> = {
+  data: TData[];
+  command: CommandDef<TData, TMeta> & { mode: "bulk" };
+  meta?: TMeta;
+};
+
+function renderBulkCommand<TData, TMeta>({
+  data,
+  command,
+  meta,
+}: RenderBulkCommandParams<TData, TMeta>) {
+  const ids = data.filter(dataHasId).map((data) => (data as TData & { id: string }).id);
+
+  return command.render({
+    data,
+    meta: meta ?? ({} as TMeta),
+    ...(ids.length > 0 ? { ids } : {}),
+  } as BulkCommandDefRenderParams<TData, TMeta>);
+}
+
+/**
+ * useSingleCommandMenu
+ */
+export function useSingleCommandMenu<TData, TMeta>({
+  data,
+  commands,
+  meta,
+}: SingleCommandMenuProps<TData, TMeta> & { data: TData }) {
+  const permissions = commands.map((command) => command.permission).filter(Boolean) as Permission[];
+  usePermission(mergePermissions(permissions));
+
+  // filter out commands that don't have valid conditions
+  const validCommands = commands
+    .filter((command) =>
+      command.mode === "single"
+        ? validateSingleCommand({ data, command })
+        : validateBulkCommand({ data: [data], command }),
+    );
+
+  function renderCommand(command: (typeof validCommands)[number]) {
+    return command.mode === "single"
+      ? renderSingleCommand({ command, data, meta })
+      : renderBulkCommand({ command, data: [data], meta });
+  }
+
+  return [validCommands, renderCommand] as const;
+}
+
+/**
+ * useBulkCommandMenu
+ */
+export function useBulkCommandMenu<TData, TMeta>({
+  data,
+  commands,
+  meta,
+}: BulkCommandMenuProps<TData, TMeta>) {
+  const permissions = commands.map((command) => command.permission).filter(Boolean) as Permission[];
+  usePermission(mergePermissions(permissions));
+
+  /**
+   * Filter out commands that don't have valid conditions
+   */
+  const validCommands = commands
+    // filter out commands that have mode "bulk"
+    .filter((command) => command.mode === "bulk")
+    // filter out commands that don't have valid conditions
+    .filter((command) => command.mode === "bulk" && validateBulkCommand({ data, command }));
+
+  /**
+   * Render command
+   */
+  function renderCommand(command: (typeof commands)[number]) {
+    if (command.mode === "single") return null;
+
+    return renderBulkCommand({ command, data, meta });
+  }
+
+  return [validCommands, renderCommand] as const;
+}
+
+// export function useBulkCommandMenu<TData, TMeta>({
+//   data,
+//   commands,
+//   meta,
+// }: BulkCommandMenuProps<TData, TMeta>) {
+//   /**
+//    * Filter out commands that don't have valid conditions
+//    */
+//   const validCommands = useSuspenseQueries({
+//     queries: commands.flatMap((command) => ({
+//       queryKey: ["command", command],
+//       queryFn: async () => {
+//         const { mode, permission } = command;
+
+//         // filter out commands that have mode "bulk"
+//         if (mode !== "bulk") return null;
+
+//         // filter out commands that don't have valid conditions
+//         if (!validateBulkCommand({ data, command })) return null;
+
+//         // filter out commands that don't have a  permissions defined
+//         if (!permission) return command;
+
+//         // filter out commands that don't have valid permissions
+//         const session = await authClient.getSession();
+//         const userId = session.data?.user.id;
+//         const hasPermission = await authClient.admin.hasPermission({ permission, userId });
+//         if (!hasPermission.data?.success) return null;
+
+//         return command;
+//       },
+//     })),
+//     combine: (items) =>
+//       items.filter(({ data }) => data).map(({ data }) => data as NonNullable<typeof data>),
+//   });
+
+//   /**
+//    * Render command
+//    */
+//   const renderCommand = (command: (typeof validCommands)[number]) =>
+//     renderBulkCommand({ command, data, meta });
+
+//   return [validCommands, renderCommand] as const;
+// }
+
+//  */
+// export function useSingleCommandMenu<TData, TMeta>({
+//   data,
+//   commands,
+//   meta,
+// }: SingleCommandMenuProps<TData, TMeta> & { data: TData }) {
+//   /**
+//    * Filter out commands that don't have valid conditions
+//    */
+//   const validCommands = useSuspenseQueries({
+//     queries: commands.flatMap((command) => ({
+//       queryKey: ["command", command],
+//       queryFn: async () => {
+//         const { mode, permission } = command;
+
+//         // filter out commands that don't have valid conditions
+//         if (mode === "single" && !validateSingleCommand({ data, command })) return null;
+//         if (mode === "bulk" && !validateBulkCommand({ data: [data], command })) return null;
+
+//         // filter out commands that don't have a  permissions defined
+//         if (!permission) return command;
+
+//         // filter out commands that don't have valid permissions
+//         const session = await authClient.getSession();
+//         const userId = session.data?.user.id;
+//         const hasPermission = await authClient.admin.hasPermission({ permission, userId });
+//         if (!hasPermission.data?.success) return null;
+
+//         return command;
+//       },
+//     })),
+//     combine: (items) =>
+//       items.filter(({ data }) => data).map(({ data }) => data as NonNullable<typeof data>),
+//   });
+
+//   /**
+//    * Render command
+//    */
+//   function renderCommand(command: (typeof validCommands)[number]) {
+//     return command.mode === "single"
+//       ? renderSingleCommand({ command, data, meta })
+//       : renderBulkCommand({ command, data: [data], meta });
+//   }
+
+//   return [validCommands, renderCommand] as const;
+// }

package/src/modules/commands/lib/definitions.ts

@@ -0,0 +1,43 @@
+import { Permission } from "@/modules/auth/lib/permissions";
+
+/**
+ * Command mode
+ */
+export type CommandMode = Pick<CommandDef<never, never>, "mode">["mode"];
+
+/**
+ * Command definition
+ */
+
+export type CommandDef<TData = object, TMeta = object> = {
+  name: string;
+  permission?: Permission;
+} & (SingleCommandDef<TData, TMeta> | BulkCommandDef<TData, TMeta>);
+
+/**
+ * Single command definition
+ */
+export type SingleCommandDef<TData, TMeta> = {
+  mode: "single";
+  conditions?: (params: { data: TData }) => boolean | boolean[];
+  render: (params: SingleCommandDefRenderParams<TData, TMeta>) => React.ReactNode;
+};
+
+export type SingleCommandDefRenderParams<TData, TMeta> = {
+  data: TData;
+  meta: TMeta;
+} & (TData extends { id: string } ? { id: string } : object);
+
+/**
+ * Bulk command definition
+ */
+export type BulkCommandDef<TData, TMeta> = {
+  mode: "bulk";
+  conditions?: (params: { data: TData[] }) => boolean | boolean[];
+  render: (params: BulkCommandDefRenderParams<TData, TMeta>) => React.ReactNode;
+};
+
+export type BulkCommandDefRenderParams<TData, TMeta> = {
+  data: TData[];
+  meta: TMeta;
+} & (TData extends { id: string } ? { ids: string[] } : object);

package/src/modules/commands/lib/factory.ts

@@ -0,0 +1,5 @@
+import { CommandDef } from "./definitions";
+
+export function createCommand<TData = object, TMeta = object>(config: CommandDef<TData, TMeta>) {
+  return { ...config };
+}

package/src/modules/commands/lib/schema.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+
+/**
+ * Send email schema
+ */
+export const sendEmailSchema = z.object({
+  to: z.email({ message: "Ongeldig email adres" }),
+  //   z.array(
+  //       z
+  //         .string({
+  //           invalid_type_error: "Ongeldig email adres",
+  //           required_error: "Email adres is verplicht",
+  //         })
+  //         .email({ message: "Ongeldig email adres" }),
+  //     )
+  //     .min(1),
+  cc: z.email({ message: "Ongeldig email adres" }).optional().or(z.literal("")),
+  bcc: z.email({ message: "Ongeldig email adres" }).optional().or(z.literal("")),
+  subject: z.string().min(1),
+  body: z.string().min(1),
+});
+
+export type SendEmailSchema = z.infer<typeof sendEmailSchema>;

package/src/modules/commands/menus/context-menu.client.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { cn } from "@/lib/entry";
+import { ContextMenuContentProps } from "@radix-ui/react-context-menu";
+import { Fragment, useState } from "react";
+import { RenderCommand } from "../components/render-command";
+import { CommandContextProvider } from "../hooks/context.client";
+import { SingleCommandMenuProps, useSingleCommandMenu } from "../hooks/use-command-menu.client";
+
+/**
+ * ContextCommandMenu
+ */
+export const ContextCommandMenu = ContextMenu;
+
+/**
+ * ContextCommandMenuTrigger
+ */
+export const ContextCommandMenuTrigger = ContextMenuTrigger;
+
+/**
+ * ContextCommandMenuContent
+ */
+export function ContextCommandMenuContent<TData, TMeta>({
+  data,
+  commands,
+  meta,
+  className,
+  ...props
+}: SingleCommandMenuProps<TData, TMeta> & ContextMenuContentProps) {
+  const [hasCommands, setHasCommands] = useState(true);
+
+  const [validCommands, renderCommand] = useSingleCommandMenu({ data, commands, meta });
+
+  if (!hasCommands) {
+    return (
+      <CommandContextProvider value={{ menu: "context" }}>
+        <ContextMenuContent {...props} className={cn("min-w-[10rem]", className)}>
+          <ContextMenuItem className="font-medium" disabled>
+            Geen acties beschikbaar
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </CommandContextProvider>
+    );
+  }
+
+  return (
+    <Fragment>
+      <CommandContextProvider value={{ menu: "context" }}>
+        <ContextMenuContent
+          {...props}
+          className={cn("min-w-[10rem]", className)}
+          ref={(ref) => {
+            if (ref?.childNodes.length === 0) setHasCommands(false);
+          }}
+        >
+          {validCommands.map((command) => (
+            <RenderCommand key={command.name} command={command} render={renderCommand} />
+          ))}
+        </ContextMenuContent>
+      </CommandContextProvider>
+    </Fragment>
+  );
+}

package/src/modules/commands/menus/data-table-menu.client.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { TableMeta } from "@/modules/data-tables/lib/types";
+import { Table } from "@tanstack/react-table";
+import { useRef } from "react";
+import { RenderCommand } from "../components/render-command";
+import { CommandContextProvider } from "../hooks/context.client";
+import { useBulkCommandMenu } from "../hooks/use-command-menu.client";
+
+export function TableCommandMenu<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+  const meta = table.options.meta as TableMeta<TData>;
+
+  const hasCommands = useRef(true);
+
+  const onSuccess = () => table.resetRowSelection();
+
+  const [validCommands, renderCommand] = useBulkCommandMenu({
+    data: meta.selectedData ?? [],
+    commands: meta.commands ?? [],
+    meta: meta as never,
+  });
+
+  return (
+    <div
+      data-state={meta.selectedData?.length ? "open" : "closed"}
+      className="bg-muted/80 fixed bottom-12 left-0 right-0 z-50 mx-auto flex w-fit items-center rounded-xl border px-3 py-2 shadow-xl backdrop-blur-2xl data-[state=open]:flex data-[state=closed]:hidden"
+    >
+      <CommandContextProvider value={{ menu: "table", onSuccess }}>
+        <div
+          className="flex gap-2"
+          ref={(ref) => {
+            if (ref?.childNodes.length === 0) hasCommands.current = false;
+          }}
+        >
+          {validCommands.map((command) => (
+            <RenderCommand key={command.name} command={command} render={renderCommand} />
+          ))}
+        </div>
+
+        {!hasCommands.current && (
+          <span className="text-sm font-medium">Geen acties beschikbaar</span>
+        )}
+      </CommandContextProvider>
+    </div>
+  );
+}

package/src/modules/commands/menus/dropdown-menu.client.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils/cn";
+import { MoreHorizontal } from "lucide-react";
+import React from "react";
+import { CommandContextProvider } from "../hooks/context.client";
+import { SingleCommandMenuProps, useSingleCommandMenu } from "../hooks/use-command-menu.client";
+import { RenderCommand } from "../components/render-command";
+
+export function DropdownCommandMenu<TData, TMeta>({
+  data,
+  commands,
+  meta,
+  className,
+  ...props
+}: SingleCommandMenuProps<TData, TMeta> & React.HTMLAttributes<HTMLElement>) {
+  const [open, setOpen] = React.useState(false);
+  const [validCommands, renderCommand] = useSingleCommandMenu({ data, commands, meta });
+
+  if (!validCommands.length) return null;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          {...props}
+          variant="ghost"
+          className={cn("data-[state=open]:bg-secondary size-8 p-0", className)}
+        >
+          <MoreHorizontal className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="min-w-[10rem]">
+        <CommandContextProvider value={{ menu: "dropdown", onSuccess: () => setOpen(false) }}>
+          {validCommands.map((command) => (
+            <RenderCommand key={command.name} command={command} render={renderCommand} />
+          ))}
+        </CommandContextProvider>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/modules/commands/menus/inline-menu.client.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { cn } from "@/lib/utils/cn";
+import React from "react";
+import { RenderCommand } from "../components/render-command";
+import { CommandContextProvider } from "../hooks/context.client";
+import { SingleCommandMenuProps, useSingleCommandMenu } from "../hooks/use-command-menu.client";
+
+export type InlineCommandMenuProps<TData, TMeta> = SingleCommandMenuProps<TData, TMeta> &
+  React.HTMLAttributes<HTMLElement>;
+
+export function InlineCommandMenu<TData, TMeta>({
+  data,
+  meta,
+  commands,
+  className,
+  ...props
+}: InlineCommandMenuProps<TData, TMeta>) {
+  const [validCommands, renderCommand] = useSingleCommandMenu({ data, commands, meta });
+
+  if (!validCommands.length) return null;
+
+  return (
+    <div {...props} className={cn("flex w-fit items-center", className)}>
+      <div className="flex gap-2">
+        <CommandContextProvider value={{ menu: "inline" }}>
+          {validCommands.map((command) => (
+            <RenderCommand key={command.name} command={command} render={renderCommand} />
+          ))}
+        </CommandContextProvider>
+      </div>
+    </div>
+  );
+}

package/src/modules/commands/menus/responsive-menu.client.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { SingleCommandMenuProps } from "../hooks/use-command-menu.client";
+import { DropdownCommandMenu } from "./dropdown-menu.client";
+import { InlineCommandMenu } from "./inline-menu.client";
+
+type ResponsiveCommandMenuProps<TData, TMeta> = SingleCommandMenuProps<TData, TMeta>;
+
+export function ResponsiveCommandMenu<TData, TMeta>(
+  props: ResponsiveCommandMenuProps<TData, TMeta>,
+) {
+  return (
+    <>
+      <InlineCommandMenu className="hidden xl:flex" {...props} />
+      <DropdownCommandMenu className="xl:hidden" {...props} />
+    </>
+  );
+}

package/src/modules/commands/utils/archive-command.client.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { CommandClick } from "../components/click-command.client";
+import { CommandLabel } from "../components/command-trigger.client";
+import { BulkCommandAction } from "../hooks/use-command-action.client";
+import { BulkCommandDefRenderParams } from "../lib/definitions";
+
+export type ArchiveCommandProps<TData extends { id: string }, TMeta> = {
+  action: BulkCommandAction;
+} & Pick<BulkCommandDefRenderParams<TData, TMeta>, "ids">;
+
+/**
+ * Archive command
+ * @description command to archive a resource
+ */
+export function ArchiveCommand<TData extends { id: string }, TMeta>({
+  ids,
+  action,
+}: ArchiveCommandProps<TData, TMeta>) {
+  return (
+    <CommandClick
+      action={() => action({ ids })}
+      message="Succesvol gearchiveerd"
+      className="text-destructive"
+      label="Archiveren"
+    >
+      <Icons.archive className="text-destructive w-4" />
+      <CommandLabel />
+    </CommandClick>
+  );
+}
+
+/**
+ * Unarchive command
+ * @description command to unarchive a resource
+ */
+export function RestoreCommand<TData extends { id: string }, TMeta>({
+  ids,
+  action,
+}: ArchiveCommandProps<TData, TMeta>) {
+  return (
+    <CommandClick
+      className="flex gap-2"
+      action={() => action({ ids })}
+      message="Succesvol teruggezet"
+      label="Terugzetten"
+    >
+      <Icons.restore className="w-4" />
+      <CommandLabel />
+    </CommandClick>
+  );
+}

package/src/modules/commands/utils/delete-command.client.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import {
+  CommandAlertDialog,
+  CommandAlertDialogAction,
+  CommandAlertDialogCancel,
+  CommandAlertDialogContent,
+  CommandAlertDialogDescription,
+  CommandAlertDialogFooter,
+  CommandAlertDialogHeader,
+  CommandAlertDialogTitle,
+  CommandAlertDialogTrigger,
+} from "../components/alert-dialog-command.client";
+import { CommandLabel } from "../components/command-trigger.client";
+import { BulkCommandAction } from "../hooks/use-command-action.client";
+import { BulkCommandDefRenderParams } from "../lib/definitions";
+
+export type DeleteCommandProps<TData extends { id: string }, TMeta> = {
+  action: BulkCommandAction;
+} & Pick<BulkCommandDefRenderParams<TData, TMeta>, "ids">;
+
+/**
+ * Delete command
+ * @description command to delete a resource
+ */
+export function DeleteCommand<TData extends { id: string }, TMeta>({
+  ids,
+  action,
+}: DeleteCommandProps<TData, TMeta>) {
+  return (
+    <CommandAlertDialog>
+      <CommandAlertDialogTrigger className="text-destructive" label="Verwijderen">
+        <Icons.trash className="text-destructive w-4" />
+        <CommandLabel />
+      </CommandAlertDialogTrigger>
+
+      <CommandAlertDialogContent>
+        <CommandAlertDialogHeader>
+          <CommandAlertDialogTitle>
+            Weet je zeker dat je dit wilt verwijderen?
+          </CommandAlertDialogTitle>
+
+          <CommandAlertDialogDescription>
+            Dit kan niet ongedaan gemaakt worden en alle gegevens zullen verloren gaan.
+          </CommandAlertDialogDescription>
+        </CommandAlertDialogHeader>
+
+        <CommandAlertDialogFooter>
+          <CommandAlertDialogCancel>Annuleren</CommandAlertDialogCancel>
+          <CommandAlertDialogAction action={() => action({ ids })} message="Succesvol verwijderd">
+            Verwijderen
+          </CommandAlertDialogAction>
+        </CommandAlertDialogFooter>
+      </CommandAlertDialogContent>
+    </CommandAlertDialog>
+  );
+}