@tulip-systems/core 0.2.0

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

@@ -0,0 +1,200 @@
+"use client";
+
+import { buttonVariants } from "@/components/ui/button";
+import {
+  ContextMenuItem,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+} from "@/components/ui/context-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils/cn";
+import React from "react";
+import { useCommand } from "../hooks/context.client";
+import { CommandAction, useCommandAction } from "../hooks/use-command-action.client";
+import { CommandTrigger } from "./command-trigger.client";
+
+/**
+ * CommandDropdownContext
+ */
+type CommandDropdownContextValue = {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const CommandDropdownContext = React.createContext({} as CommandDropdownContextValue);
+
+/**
+ * CommandDropdown
+ */
+export type CommandDropdownProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function CommandDropdown({ children, ...props }: CommandDropdownProps) {
+  const [open, setOpen] = React.useState(false);
+  const { menu } = useCommand();
+
+  if (menu === "inline" || menu === "table") {
+    return (
+      <DropdownMenu {...props} open={open} onOpenChange={setOpen}>
+        <CommandDropdownContext.Provider value={{ open, setOpen }}>
+          {children}
+        </CommandDropdownContext.Provider>
+      </DropdownMenu>
+    );
+  }
+
+  if (menu === "dropdown") {
+    return (
+      <DropdownMenuSub {...props} open={open} onOpenChange={setOpen}>
+        <CommandDropdownContext.Provider value={{ open, setOpen }}>
+          {children}
+        </CommandDropdownContext.Provider>
+      </DropdownMenuSub>
+    );
+  }
+
+  if (menu === "context") {
+    return (
+      <ContextMenuSub {...props} open={open} onOpenChange={setOpen}>
+        <CommandDropdownContext.Provider value={{ open, setOpen }}>
+          {children}
+        </CommandDropdownContext.Provider>
+      </ContextMenuSub>
+    );
+  }
+
+  return null;
+}
+
+/**
+ * CommandDropdownContent
+ */
+type CommandDropdownContentProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function CommandDropdownContent({ children, ...props }: CommandDropdownContentProps) {
+  const { menu } = useCommand();
+
+  if (menu === "inline" || menu === "table") {
+    return <DropdownMenuContent {...props}>{children}</DropdownMenuContent>;
+  }
+
+  if (menu === "dropdown") {
+    return <DropdownMenuSubContent {...props}>{children}</DropdownMenuSubContent>;
+  }
+
+  if (menu === "context") {
+    return <ContextMenuSubContent {...props}>{children}</ContextMenuSubContent>;
+  }
+
+  return null;
+}
+
+/**
+ * CommandDropdownTrigger
+ */
+type CommandDropdownTriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+  label?: string;
+  disabled?: boolean;
+};
+
+export function CommandDropdownTrigger({
+  label,
+  disabled,
+  children,
+  ...props
+}: CommandDropdownTriggerProps) {
+  const { menu, status } = useCommand();
+
+  const isDisabled = disabled || status === "pending";
+
+  if (menu === "inline" || menu === "table") {
+    return (
+      <CommandTrigger label={label}>
+        <DropdownMenuTrigger
+          {...props}
+          disabled={isDisabled}
+          className={cn(buttonVariants({ variant: "outline", size: "sm" }), props.className)}
+        >
+          {children}
+        </DropdownMenuTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "dropdown") {
+    return (
+      <CommandTrigger label={label}>
+        <DropdownMenuSubTrigger {...props} disabled={isDisabled}>
+          {children}
+        </DropdownMenuSubTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "context") {
+    return (
+      <CommandTrigger label={label}>
+        <ContextMenuSubTrigger {...props} disabled={isDisabled}>
+          {children}
+        </ContextMenuSubTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  return null;
+}
+
+/**
+ * CommandDropdownItem
+ */
+type CommandDropdownItemProps = {
+  action: CommandAction;
+  message?: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function CommandDropdownItem({
+  action,
+  message,
+  children,
+  ...props
+}: CommandDropdownItemProps) {
+  const { setOpen } = React.useContext(CommandDropdownContext);
+  const { menu, status } = useCommand();
+  const execute = useCommandAction(action, { message, onSuccess: () => setOpen(false) });
+
+  if (menu === "inline" || menu === "table" || menu === "dropdown") {
+    return (
+      <DropdownMenuItem {...props} disabled={status === "pending"} onClick={() => execute()}>
+        {children}
+      </DropdownMenuItem>
+    );
+  }
+
+  if (menu === "context") {
+    return (
+      <ContextMenuItem {...props} disabled={status === "pending"} onClick={() => execute()}>
+        {children}
+      </ContextMenuItem>
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,63 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ContextMenuItem } from "@/components/ui/context-menu";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import React from "react";
+import { useCommand } from "../hooks/context.client";
+import { CommandTrigger } from "./command-trigger.client";
+
+export type CommandEmptyProps = {
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  label?: string;
+};
+
+export function CommandEmpty({ label, children, disabled, ...props }: CommandEmptyProps) {
+  const { menu, status } = useCommand();
+
+  const isDisabled = disabled ?? status === "pending";
+
+  if (menu === "inline") {
+    return (
+      <CommandTrigger label={label}>
+        <Button {...props} variant="outline" size="sm" disabled={isDisabled}>
+          {children}
+        </Button>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "dropdown") {
+    return (
+      <CommandTrigger label={label}>
+        <DropdownMenuItem {...props} disabled={isDisabled}>
+          {children}
+        </DropdownMenuItem>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "context") {
+    return (
+      <CommandTrigger label={label}>
+        <ContextMenuItem {...props} disabled={isDisabled}>
+          {children}
+        </ContextMenuItem>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "table") {
+    return (
+      <CommandTrigger label={label}>
+        <Button {...props} variant="outline" size="sm" disabled={isDisabled}>
+          {children}
+        </Button>
+      </CommandTrigger>
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,243 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { ContextMenuItem } from "@/components/ui/context-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} 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 { useCommand } from "../hooks/context.client";
+import { CommandAction, useCommandAction } from "../hooks/use-command-action.client";
+import { CommandTrigger } from "./command-trigger.client";
+
+/**
+ * CommandFormDialogContext
+ */
+type CommandFormDialogContextValue = {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const CommandFormDialogContext = React.createContext({} as CommandFormDialogContextValue);
+
+/**
+ * CommandFormDialog
+ */
+export function CommandFormDialog({ children, ...props }: DialogProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={setOpen}>
+      <CommandFormDialogContext.Provider value={{ open, setOpen }}>
+        {children}
+      </CommandFormDialogContext.Provider>
+    </Dialog>
+  );
+}
+
+/**
+ * CommandFormDialogTrigger
+ */
+type CommandFormDialogTriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+  label?: string;
+  disabled?: boolean;
+  hotkey?: Keys;
+};
+
+export function CommandFormDialogTrigger({
+  label,
+  hotkey,
+  children,
+  disabled,
+  ...props
+}: CommandFormDialogTriggerProps) {
+  const { menu, status } = useCommand();
+  const { setOpen } = React.useContext(CommandFormDialogContext);
+
+  const isDisabled = disabled || status === "pending";
+
+  useHotkeys(hotkey ?? "", () => setOpen(true), { enabled: !isDisabled && hotkey !== undefined });
+
+  if (menu === "inline" || menu === "table") {
+    return (
+      <CommandTrigger label={label}>
+        <DialogTrigger
+          {...props}
+          disabled={isDisabled}
+          className={cn(buttonVariants({ variant: "outline", size: "sm" }), props.className)}
+        >
+          {children}
+        </DialogTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "dropdown") {
+    return (
+      <CommandTrigger label={label}>
+        <DialogTrigger asChild>
+          <DropdownMenuItem
+            {...props}
+            disabled={isDisabled}
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            {children}
+          </DropdownMenuItem>
+        </DialogTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "context") {
+    return (
+      <CommandTrigger label={label}>
+        <DialogTrigger asChild>
+          <ContextMenuItem
+            {...props}
+            disabled={isDisabled}
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            {children}
+          </ContextMenuItem>
+        </DialogTrigger>
+      </CommandTrigger>
+    );
+  }
+}
+
+/**
+ * CommandFormDialogHeader
+ */
+export function CommandFormDialogHeader({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return <DialogHeader {...props}>{children}</DialogHeader>;
+}
+
+/**
+ * CommandFormDialogTitle
+ */
+export function CommandFormDialogTitle({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return <DialogTitle {...props}>{children}</DialogTitle>;
+}
+
+/**
+ * CommandFormDialogDescription
+ */
+export function CommandFormDialogDescription({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  return <DialogDescription {...props}>{children}</DialogDescription>;
+}
+
+export const CommandFormDialogContentProvider = Form;
+
+/**
+ * CommandFormDialogContent
+ */
+export type CommandFormDialogContentProps<TSchema extends FieldValues> = DialogContentProps & {
+  action: CommandAction<TSchema>;
+  message?: string;
+  children: React.ReactNode;
+};
+
+export function CommandFormDialogContent<TSchema extends FieldValues>({
+  action,
+  message,
+  children,
+  ...props
+}: CommandFormDialogContentProps<TSchema>) {
+  const { setOpen } = React.useContext(CommandFormDialogContext);
+  const form = useFormContext<TSchema>();
+
+  const execute = useCommandAction(action, {
+    message,
+    onSuccess: () => {
+      form.reset();
+      setOpen(false);
+    },
+  });
+
+  if (Object.keys(form?.formState?.errors || {})?.length > 0) {
+    console.error(form.formState.errors);
+  }
+
+  return (
+    <DialogContent {...props}>
+      <form onSubmit={form.handleSubmit((data) => execute(data))}>{children}</form>
+    </DialogContent>
+  );
+}
+
+/**
+ * FormDialogFields
+ */
+export function CommandFormDialogFields({ children, className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("space-y-5 py-10", className)}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * CommandFormDialogFooter
+ */
+export function CommandFormDialogFooter({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return <DialogFooter {...props}>{children}</DialogFooter>;
+}
+
+/**
+ * CommandFormDialogCancel
+ */
+export function CommandFormDialogCancel({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  const { setOpen } = React.useContext(CommandFormDialogContext);
+  const form = useFormContext();
+
+  return (
+    <Button
+      {...props}
+      variant="ghost"
+      type="button"
+      onClick={() => {
+        form.reset();
+        setOpen(false);
+      }}
+    >
+      {children}
+    </Button>
+  );
+}
+
+/**
+ * CommandFormDialogSubmit
+ */
+export function CommandFormDialogSubmit({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  const { status } = useCommand();
+
+  return (
+    <Button {...props} disabled={status === "pending"} type="submit">
+      {status === "pending" && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+      {children}
+    </Button>
+  );
+}

package/src/modules/commands/components/render-command.tsx

@@ -0,0 +1,20 @@
+import { Allowed } from "@/modules/auth/components/allowed.client";
+import { Fragment } from "react/jsx-runtime";
+import { CommandDef } from "../lib/definitions";
+
+type RenderCommandProps<TData, TMeta> = {
+  command: CommandDef<TData, TMeta>;
+  render: (command: CommandDef<TData, TMeta>) => React.ReactNode;
+};
+
+export function RenderCommand<TData, TMeta>({ command, render }: RenderCommandProps<TData, TMeta>) {
+  const children = <Fragment key={command.name}>{render(command)}</Fragment>;
+
+  if (!command.permission) return children;
+
+  return (
+    <Allowed key={command.name} permission={command.permission}>
+      {children}
+    </Allowed>
+  );
+}

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

@@ -0,0 +1,15 @@
+export * from "./components/alert-dialog-command.client";
+export * from "./components/click-command.client";
+export * from "./components/command-trigger.client";
+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 "./menus/context-menu.client";
+export * from "./menus/dropdown-menu.client";
+export * from "./menus/inline-menu.client";
+export * from "./menus/responsive-menu.client";
+export * from "./utils/archive-command.client";
+export * from "./utils/delete-command.client";
+export * from "./utils/send-mail-command.client";

package/src/modules/commands/entry.ts

@@ -0,0 +1,2 @@
+export * from "./lib/definitions";
+export * from "./lib/factory";

package/src/modules/commands/hooks/context.client.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import React, { PropsWithChildren } from "react";
+
+export type CommandContextValue = {
+  // data: TData[]
+  menu: "dropdown" | "context" | "table" | "inline";
+  status: "idle" | "pending" | "success" | "error";
+  setStatus: React.Dispatch<React.SetStateAction<"idle" | "pending" | "success" | "error">>;
+  onSuccess?: () => Promise<void> | void;
+  onError?: () => Promise<void> | void;
+};
+
+/**
+ * CommandContext
+ */
+const CommandContext = React.createContext({} as CommandContextValue);
+
+/**
+ * useCommand
+ */
+export const useCommand = () => React.useContext(CommandContext);
+
+/**
+ * CommandContextProvider
+ */
+export function CommandContextProvider({
+  value,
+  children,
+}: PropsWithChildren<{ value: Omit<CommandContextValue, "status" | "setStatus"> }>) {
+  const [status, setStatus] = React.useState<"idle" | "pending" | "success" | "error">("idle");
+
+  return (
+    <CommandContext.Provider value={{ ...value, status, setStatus }}>
+      {children}
+    </CommandContext.Provider>
+  );
+}

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

@@ -0,0 +1,95 @@
+"use client";
+
+import { useAction } from "@/lib/hooks/use-action";
+import { MutationOptions } from "@tanstack/react-query";
+import { toast } from "sonner";
+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;
+
+/**
+ * Hook to use command
+ * @returns Command context value
+ */
+export function useCommandAction<TInput = void>(
+  action: CommandAction<TInput>,
+  options?: {
+    message?: string;
+    onSuccess?: () => Promise<void> | void;
+    onError?: () => Promise<void> | void;
+  },
+) {
+  const commandContext = useCommand();
+
+  const { mutateAsync } = useAction({
+    mutationFn: action,
+    onMutate: () => {
+      commandContext.setStatus("pending");
+    },
+    onSuccess: async () => {
+      commandContext.setStatus("success");
+      toast.success(options?.message || "Actie voltooid!");
+      await options?.onSuccess?.();
+      await commandContext.onSuccess?.();
+    },
+    onRedirect: async () => {
+      commandContext.setStatus("success");
+      toast.success(options?.message || "Actie voltooid!");
+      await options?.onSuccess?.();
+      await commandContext.onSuccess?.();
+    },
+    onError: async () => {
+      commandContext.setStatus("error");
+      await options?.onError?.();
+      await commandContext.onError?.();
+    },
+    onSettled: () => {
+      commandContext.setStatus("idle");
+      // finnalyCallback?.();
+      // options?.callback?.();
+    },
+  });
+
+  return mutateAsync as (input: TInput) => CommandActionResult;
+}
+
+export function useCommandAction2<TInput = void>(
+  // action: CommandAction<TInput>,
+  options?: MutationOptions,
+) {
+  const commandContext = useCommand();
+
+  const { mutateAsync } = useAction({
+    ...options,
+    onMutate: () => {
+      commandContext.setStatus("pending");
+    },
+    onSuccess: async (...params) => {
+      commandContext.setStatus("success");
+      // toast.success(options?.message || "Actie voltooid!");
+      await options?.onSuccess?.(...params);
+      await commandContext.onSuccess?.();
+    },
+    // onRedirect: async () => {
+    //   commandContext.setStatus("success");
+    //   toast.success(options?.message || "Actie voltooid!");
+    //   await options?.onSuccess?.();
+    //   await commandContext.onSuccess?.();
+    // },
+    onError: async (...params) => {
+      commandContext.setStatus("error");
+      await options?.onError?.(...params);
+      await commandContext.onError?.();
+    },
+    onSettled: () => {
+      commandContext.setStatus("idle");
+      // finnalyCallback?.();
+      // options?.callback?.();
+    },
+  });
+
+  return mutateAsync as (input: TInput) => CommandActionResult;
+}