@tulip-systems/core 0.4.0 → 0.5.0

package/src/modules/commands/components/dialog-command.client.tsx

@@ -22,22 +22,32 @@ import { CommandTrigger } from "./command-trigger.client";
 /**
  * CommandDialogContext
  */
-type CommandDialogContextValue = {
+type CommandDialogOpenState = {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+type CommandDialogContextValue = {
+  openState: CommandDialogOpenState;
+};
+
 const CommandDialogContext = React.createContext({} as CommandDialogContextValue);
 
 /**
  * CommandDialog
  */
-export function CommandDialog({ children, ...props }: DialogProps) {
-  const [open, setOpen] = React.useState(false);
+export function CommandDialog({
+  children,
+  openState,
+  ...props
+}: Omit<DialogProps, "open" | "onOpenChange"> & { openState?: CommandDialogOpenState }) {
+  const state = React.useState(false);
+
+  const { open, setOpen } = openState ?? { open: state[0], setOpen: state[1] };
 
   return (
     <Dialog {...props} open={open} onOpenChange={setOpen}>
-      <CommandDialogContext.Provider value={{ open, setOpen }}>
+      <CommandDialogContext.Provider value={{ openState: { open, setOpen } }}>
         {children}
       </CommandDialogContext.Provider>
     </Dialog>
@@ -63,11 +73,13 @@ export function CommandDialogTrigger({
   ...props
 }: CommandDialogTriggerProps) {
   const { menu, status } = useCommand();
-  const { setOpen } = React.useContext(CommandDialogContext);
+  const { openState } = React.useContext(CommandDialogContext);
 
   const isDisabled = disabled || status === "pending";
 
-  useHotkeys(hotkey ?? "", () => setOpen(true), { enabled: !isDisabled && hotkey !== undefined });
+  useHotkeys(hotkey ?? "", () => openState.setOpen(true), {
+    enabled: !isDisabled && hotkey !== undefined,
+  });
 
   if (menu === "inline" || menu === "table") {
     return (
@@ -92,7 +104,7 @@ export function CommandDialogTrigger({
             disabled={isDisabled}
             onClick={(e) => {
               e.preventDefault();
-              setOpen(true);
+              openState.setOpen(true);
             }}
           >
             {children}
@@ -111,7 +123,7 @@ export function CommandDialogTrigger({
             disabled={isDisabled}
             onClick={(e) => {
               e.preventDefault();
-              setOpen(true);
+              openState.setOpen(true);
             }}
           >
             {children}

package/src/modules/commands/components/dropdown-command.client.tsx

@@ -17,9 +17,10 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils/cn";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
 import React from "react";
 import { useCommand } from "../hooks/context.client";
-import { CommandAction, useCommandAction } from "../hooks/use-command-action.client";
+import { useCommandMutation } from "../hooks/use-command-mutation.client";
 import { CommandTrigger } from "./command-trigger.client";
 
 /**
@@ -163,26 +164,48 @@ export function CommandDropdownTrigger({
 /**
  * CommandDropdownItem
  */
-type CommandDropdownItemProps = {
-  action: CommandAction;
-  message?: string;
+type CommandDropdownItemProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
   children: React.ReactNode;
   className?: string;
 };
 
-export function CommandDropdownItem({
-  action,
-  message,
+export function CommandDropdownItem<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
   children,
   ...props
-}: CommandDropdownItemProps) {
+}: CommandDropdownItemProps<TData, TError, TVariables, TOnMutateResult>) {
   const { setOpen } = React.useContext(CommandDropdownContext);
   const { menu, status } = useCommand();
-  const execute = useCommandAction(action, { message, onSuccess: () => setOpen(false) });
+
+  const { mutateAsync } = useCommandMutation({
+    ...mutation,
+    onSuccess: async (...params) => {
+      setOpen(false);
+
+      return await mutation?.onSuccess?.(...params);
+    },
+  });
 
   if (menu === "inline" || menu === "table" || menu === "dropdown") {
     return (
-      <DropdownMenuItem {...props} disabled={status === "pending"} onClick={() => execute()}>
+      <DropdownMenuItem
+        {...props}
+        disabled={status === "pending"}
+        onClick={() => mutateAsync(variables)}
+      >
         {children}
       </DropdownMenuItem>
     );
@@ -190,7 +213,11 @@ export function CommandDropdownItem({
 
   if (menu === "context") {
     return (
-      <ContextMenuItem {...props} disabled={status === "pending"} onClick={() => execute()}>
+      <ContextMenuItem
+        {...props}
+        disabled={status === "pending"}
+        onClick={() => mutateAsync(variables)}
+      >
         {children}
       </ContextMenuItem>
     );

package/src/modules/commands/components/form-dialog-command.client.tsx

@@ -14,12 +14,13 @@ import {
 } from "@/components/ui/dialog.client";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils/cn";
-import { DialogContentProps, DialogProps } from "@radix-ui/react-dialog";
-import React, { ComponentProps } from "react";
-import { FieldValues, Form, useFormContext } from "react-hook-form";
-import { Keys, useHotkeys } from "react-hotkeys-hook";
+import type { DialogContentProps, DialogProps } from "@radix-ui/react-dialog";
+import { type DefaultError, type MutationOptions } from "@tanstack/react-query";
+import React, { type ComponentProps } from "react";
+import { type FieldValues, Form, useFormContext } from "react-hook-form";
+import { type Keys, useHotkeys } from "react-hotkeys-hook";
+import { useCommandMutation } from "../entry.client";
 import { useCommand } from "../hooks/context.client";
-import { CommandAction, useCommandAction } from "../hooks/use-command-action.client";
 import { CommandTrigger } from "./command-trigger.client";
 
 /**
@@ -154,26 +155,46 @@ export const CommandFormDialogContentProvider = Form;
 /**
  * CommandFormDialogContent
  */
-export type CommandFormDialogContentProps<TSchema extends FieldValues> = DialogContentProps & {
-  action: CommandAction<TSchema>;
-  message?: string;
+export type CommandFormDialogContentProps<
+  TValues extends FieldValues,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = DialogContentProps & {
+  variables: (values: TValues) => TVariables;
+  mutation?: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
   children: React.ReactNode;
 };
+// export type CommandFormDialogContentProps<TSchema extends FieldValues> = DialogContentProps & {
+//   action: CommandAction<TSchema>;
+//   mutation?: MutationOptions<TSchema>;
+//   message?: string;
+//   children: React.ReactNode;
+// };
 
-export function CommandFormDialogContent<TSchema extends FieldValues>({
-  action,
-  message,
+export function CommandFormDialogContent<
+  TValues extends FieldValues,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
   children,
   ...props
-}: CommandFormDialogContentProps<TSchema>) {
+}: CommandFormDialogContentProps<TValues, TData, TError, TVariables, TOnMutateResult>) {
   const { setOpen } = React.useContext(CommandFormDialogContext);
-  const form = useFormContext<TSchema>();
+  const form = useFormContext<TValues>();
 
-  const execute = useCommandAction(action, {
-    message,
-    onSuccess: () => {
+  const { mutateAsync } = useCommandMutation({
+    ...mutation,
+    onSuccess: async (...params) => {
       form.reset();
       setOpen(false);
+
+      return await mutation?.onSuccess?.(...params);
     },
   });
 
@@ -183,7 +204,14 @@ export function CommandFormDialogContent<TSchema extends FieldValues>({
 
   return (
     <DialogContent {...props}>
-      <form onSubmit={form.handleSubmit((data) => execute(data))}>{children}</form>
+      <form
+        onSubmit={form.handleSubmit((data) => {
+          const params = variables(data);
+          mutateAsync(params);
+        })}
+      >
+        {children}
+      </form>
     </DialogContent>
   );
 }

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

@@ -5,7 +5,7 @@ export * from "./components/dialog-command.client";
 export * from "./components/dropdown-command.client";
 export * from "./components/empty-command.client";
 export * from "./components/form-dialog-command.client";
-export * from "./hooks/use-command-action.client";
+export * from "./hooks/use-command-mutation.client";
 export * from "./menus/context-menu.client";
 export * from "./menus/dropdown-menu.client";
 export * from "./menus/inline-menu.client";

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { useAction } from "@/lib/hooks/use-action";
+import type { DefaultError, MutationFunction, MutationOptions } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useCommand } from "./context.client";
+
+export type CommandActionResult = Promise<unknown>;
+
+export type CommandAction<TInput = void> = (input: TInput) => CommandActionResult;
+export type BulkCommandAction = (params: { ids: string[] }) => CommandActionResult;
+
+export type CommandMutationMeta = {
+  router: ReturnType<typeof useRouter>;
+};
+
+export function useCommandMutation<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TOnMutateResult = unknown,
+>(options?: MutationOptions<TData, TError, TVariables, TOnMutateResult>) {
+  const router = useRouter();
+  const commandContext = useCommand();
+
+  const mutation = useAction({
+    ...options,
+    mutationFn: options?.mutationFn as MutationFunction<TData, TVariables>,
+    onMutate: async (...params) => {
+      const result = options?.onMutate?.(...params);
+
+      commandContext.setStatus("pending");
+
+      return (await result) as TOnMutateResult;
+    },
+    onSuccess: async (...params) => {
+      const result = options?.onSuccess?.(...params);
+
+      commandContext.setStatus("success");
+      await commandContext.onSuccess?.();
+
+      return await result;
+    },
+    onError: async (...params) => {
+      const result = options?.onError?.(...params);
+
+      commandContext.setStatus("error");
+      await commandContext.onError?.();
+
+      return await result;
+    },
+    onSettled: async (...params) => {
+      const result = options?.onSettled?.(...params);
+
+      commandContext.setStatus("idle");
+
+      return await result;
+    },
+    meta: {
+      router,
+    } satisfies CommandMutationMeta,
+  });
+
+  return mutation;
+}

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

@@ -1,4 +1,4 @@
-import { Permission } from "@/modules/auth/lib/permissions";
+import type { Permission } from "@/modules/auth/lib/permissions";
 
 /**
  * Command mode
@@ -8,7 +8,6 @@ export type CommandMode = Pick<CommandDef<never, never>, "mode">["mode"];
 /**
  * Command definition
  */
-
 export type CommandDef<TData = object, TMeta = object> = {
   name: string;
   permission?: Permission;

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

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

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

@@ -1,27 +1,34 @@
 "use client";
 
 import { Icons } from "@/components/common/icons";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
 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">;
+export type ArchiveCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = { ids: string[] },
+  TOnMutateResult = unknown,
+> = {
+  variables: TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+};
 
 /**
  * Archive command
  * @description command to archive a resource
  */
-export function ArchiveCommand<TData extends { id: string }, TMeta>({
-  ids,
-  action,
-}: ArchiveCommandProps<TData, TMeta>) {
+export function ArchiveCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = { ids: string[] },
+  TOnMutateResult = unknown,
+>({ variables, mutation }: ArchiveCommandProps<TData, TError, TVariables, TOnMutateResult>) {
   return (
     <CommandClick
-      action={() => action({ ids })}
-      message="Succesvol gearchiveerd"
+      variables={variables}
+      mutation={mutation}
       className="text-destructive"
       label="Archiveren"
     >
@@ -35,15 +42,17 @@ export function ArchiveCommand<TData extends { id: string }, TMeta>({
  * Unarchive command
  * @description command to unarchive a resource
  */
-export function RestoreCommand<TData extends { id: string }, TMeta>({
-  ids,
-  action,
-}: ArchiveCommandProps<TData, TMeta>) {
+export function RestoreCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = { ids: string[] },
+  TOnMutateResult = unknown,
+>({ variables, mutation }: ArchiveCommandProps<TData, TError, TVariables, TOnMutateResult>) {
   return (
     <CommandClick
       className="flex gap-2"
-      action={() => action({ ids })}
-      message="Succesvol teruggezet"
+      variables={variables}
+      mutation={mutation}
       label="Terugzetten"
     >
       <Icons.restore className="w-4" />

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { Icons } from "@/components/common/icons";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
 import {
   CommandAlertDialog,
   CommandAlertDialogAction,
@@ -13,21 +14,26 @@ import {
   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">;
 
+export type DeleteCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = {
+  variables: TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+};
 /**
  * Delete command
  * @description command to delete a resource
  */
-export function DeleteCommand<TData extends { id: string }, TMeta>({
-  ids,
-  action,
-}: DeleteCommandProps<TData, TMeta>) {
+export function DeleteCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({ variables, mutation }: DeleteCommandProps<TData, TError, TVariables, TOnMutateResult>) {
   return (
     <CommandAlertDialog>
       <CommandAlertDialogTrigger className="text-destructive" label="Verwijderen">
@@ -48,7 +54,7 @@ export function DeleteCommand<TData extends { id: string }, TMeta>({
 
         <CommandAlertDialogFooter>
           <CommandAlertDialogCancel>Annuleren</CommandAlertDialogCancel>
-          <CommandAlertDialogAction action={() => action({ ids })} message="Succesvol verwijderd">
+          <CommandAlertDialogAction mutation={mutation} variables={variables}>
             Verwijderen
           </CommandAlertDialogAction>
         </CommandAlertDialogFooter>
@@ -56,3 +62,15 @@ export function DeleteCommand<TData extends { id: string }, TMeta>({
     </CommandAlertDialog>
   );
 }
+
+/**
+ * Single Delete command
+ */
+export function SingleDeleteCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = { id: string },
+  TOnMutateResult = unknown,
+>({ variables, mutation }: DeleteCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  return <DeleteCommand variables={variables} mutation={mutation} />;
+}