@tulip-systems/core 0.2.0

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

@@ -0,0 +1,284 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { buttonVariants } from "@/components/ui/button";
+import { ContextMenuItem } from "@/components/ui/context-menu";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils/cn";
+import {
+  AlertDialogCancelProps,
+  AlertDialogContentProps,
+  AlertDialogProps,
+} from "@radix-ui/react-alert-dialog";
+import React from "react";
+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";
+
+/**
+ * CommandAlertDialogContext
+ */
+type CommandAlertDialogContextValue = {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const CommandAlertDialogContext = React.createContext({} as CommandAlertDialogContextValue);
+
+/**
+ * CommandAlertDialog
+ */
+export function CommandAlertDialog({ children, ...props }: AlertDialogProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <AlertDialog {...props} open={open} onOpenChange={setOpen}>
+      <CommandAlertDialogContext.Provider value={{ open, setOpen }}>
+        {children}
+      </CommandAlertDialogContext.Provider>
+    </AlertDialog>
+  );
+}
+
+/**
+ * CommandAlertDialogTrigger
+ */
+type CommandAlertDialogTriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+  label?: string;
+  hotkey?: Keys;
+  disabled?: boolean;
+};
+
+export function CommandAlertDialogTrigger({
+  label,
+  hotkey,
+  children,
+  disabled,
+  ...props
+}: CommandAlertDialogTriggerProps) {
+  const { menu, status } = useCommand();
+  const { setOpen } = React.useContext(CommandAlertDialogContext);
+
+  const isDisabled = disabled || status === "pending";
+
+  useHotkeys(hotkey ?? "", () => setOpen(true), { enabled: !isDisabled && hotkey !== undefined });
+
+  if (menu === "inline" || menu === "table") {
+    return (
+      <CommandTrigger label={label}>
+        <AlertDialogTrigger
+          {...props}
+          disabled={isDisabled}
+          className={cn(buttonVariants({ variant: "outline", size: "sm" }), props.className)}
+        >
+          {children}
+        </AlertDialogTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "dropdown") {
+    return (
+      <CommandTrigger label={label}>
+        <AlertDialogTrigger asChild>
+          <DropdownMenuItem
+            {...props}
+            disabled={isDisabled}
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            {children}
+          </DropdownMenuItem>
+        </AlertDialogTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "context") {
+    return (
+      <CommandTrigger label={label}>
+        <AlertDialogTrigger asChild>
+          <ContextMenuItem
+            {...props}
+            disabled={isDisabled}
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            {children}
+          </ContextMenuItem>
+        </AlertDialogTrigger>
+      </CommandTrigger>
+    );
+  }
+}
+
+/**
+ * CommandAlertDialogContent
+ */
+export function CommandAlertDialogContent({ children, ...props }: AlertDialogContentProps) {
+  return <AlertDialogContent {...props}>{children}</AlertDialogContent>;
+}
+
+/**
+ * CommandAlertDialogHeader
+ */
+export function CommandAlertDialogHeader({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  return <AlertDialogHeader {...props}>{children}</AlertDialogHeader>;
+}
+
+/**
+ * CommandAlertDialogTitle
+ */
+export function CommandAlertDialogTitle({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return <AlertDialogTitle {...props}>{children}</AlertDialogTitle>;
+}
+
+/**
+ * CommandAlertDialogDescription
+ */
+export function CommandAlertDialogDescription({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  return <AlertDialogDescription {...props}>{children}</AlertDialogDescription>;
+}
+
+/**
+ * CommandAlertDialogFooter
+ */
+export function CommandAlertDialogFooter({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  return <AlertDialogFooter {...props}>{children}</AlertDialogFooter>;
+}
+
+/**
+ * CommandAlertDialogCancel
+ */
+export function CommandAlertDialogCancel({ children, ...props }: AlertDialogCancelProps) {
+  return <AlertDialogCancel {...props}>{children}</AlertDialogCancel>;
+}
+
+/**
+ * CommandAlertDialogAction
+ */
+type CommandAlertDialogActionProps = {
+  children: React.ReactNode;
+  className?: string;
+  action: CommandAction;
+  message?: string;
+  disabled?: boolean;
+};
+
+export function CommandAlertDialogAction({
+  action,
+  message,
+  children,
+  disabled,
+  ...props
+}: CommandAlertDialogActionProps) {
+  const { setOpen } = React.useContext(CommandAlertDialogContext);
+  const { status } = useCommand();
+  const execute = useCommandAction(action, { message, onSuccess: () => setOpen(false) });
+
+  const isDisabled = disabled || status === "pending";
+
+  return (
+    <AlertDialogAction {...props} disabled={isDisabled} onClick={() => execute()}>
+      {status === "pending" && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+      {children}
+    </AlertDialogAction>
+  );
+}
+
+// /**
+//  * CommandAlertDialogAction
+//  */
+// type CommandAlertDialogAction2Props<
+//   TRouter extends AnyTRPCRouter,
+//   TInput,
+//   TDef extends { input: TInput; output: any; transformer: boolean; errorShape: any },
+// > = {
+//   children: React.ReactNode;
+//   className?: string;
+
+//   input: TInput;
+//   mutation: (trpc: ReturnType<typeof useTRPC<TRouter>>) => DecorateMutationProcedure<TDef>;
+
+//   message?: string;
+//   disabled?: boolean;
+// };
+
+// export function CommandAlertDialogAction2<
+// TInput,
+// TDef extends { input: TInput; output: any; transformer: boolean; errorShape: any },
+// TRouter extends AnyTRPCRouter,
+// >({
+//   input,
+//   mutation,
+//   message,
+//   children,
+//   disabled,
+//   ...props
+// }: CommandAlertDialogAction2Props<TRouter, TInput, TDef>) {
+//   const trpc = useTRPC<TRouter>();
+
+//   const { setOpen } = React.useContext(CommandAlertDialogContext);
+//   const commandContext = useCommand();
+
+//   const options = mutation?.(trpc);
+
+//   const { mutate } = useMutation(
+//     options.mutationOptions({
+//       onMutate: () => {
+//         commandContext.setStatus("pending");
+//       },
+//       onSuccess: async () => {
+//         commandContext.setStatus("success");
+//         toast.success(message || "Actie voltooid!");
+//         setOpen(false);
+//         await commandContext.onSuccess?.();
+//       },
+//       onError: async () => {
+//         commandContext.setStatus("error");
+//         await commandContext.onError?.();
+//       },
+//       onSettled: () => {
+//         commandContext.setStatus("idle");
+//       },
+//     }),
+//   );
+
+//   const isDisabled = disabled || status === "pending";
+
+//   return (
+//     <AlertDialogAction {...props} disabled={isDisabled} onClick={() => mutate(input)}>
+//       {commandContext.status === "pending" && (
+//         <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+//       )}
+//       {children}
+//     </AlertDialogAction>
+//   );
+// }

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

@@ -0,0 +1,81 @@
+"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 { CommandAction, useCommandAction } from "../hooks/use-command-action.client";
+import { CommandTrigger } from "./command-trigger.client";
+import { Keys, useHotkeys } from "react-hotkeys-hook";
+
+export type CommandClickProps = {
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  action: CommandAction;
+  message?: string;
+  label?: string;
+  hotkey?: Keys;
+};
+
+export function CommandClick({
+  children,
+  action,
+  message,
+  label,
+  hotkey,
+  disabled,
+  ...props
+}: CommandClickProps) {
+  const { menu, status } = useCommand();
+  const execute = useCommandAction(action, { message });
+
+  const isDisabled = disabled || status === "pending";
+
+  const handleClick = () => execute();
+
+  useHotkeys(hotkey ?? "", () => handleClick(), { enabled: !isDisabled && hotkey !== undefined });
+
+  if (menu === "inline") {
+    return (
+      <CommandTrigger label={label}>
+        <Button {...props} variant="outline" size="sm" disabled={isDisabled} onClick={handleClick}>
+          {children}
+        </Button>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "dropdown") {
+    return (
+      <CommandTrigger label={label}>
+        <DropdownMenuItem {...props} disabled={isDisabled} onClick={handleClick}>
+          {children}
+        </DropdownMenuItem>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "context") {
+    return (
+      <CommandTrigger label={label}>
+        <ContextMenuItem {...props} disabled={isDisabled} onClick={handleClick}>
+          {children}
+        </ContextMenuItem>
+      </CommandTrigger>
+    );
+  }
+
+  if (menu === "table") {
+    return (
+      <CommandTrigger label={label}>
+        <Button {...props} variant="outline" size="sm" disabled={isDisabled} onClick={handleClick}>
+          {children}
+        </Button>
+      </CommandTrigger>
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,69 @@
+"use client";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip.client";
+import { createContext, PropsWithChildren, useContext } from "react";
+import { useCommand } from "../hooks/context.client";
+
+/**
+ * Command trigger context
+ */
+type CommandTriggerContextValue = {
+  label?: string;
+};
+
+export const CommandTriggerContext = createContext({} as CommandTriggerContextValue);
+
+/**
+ * Command trigger
+ */
+export function CommandTrigger({ label, children }: PropsWithChildren<{ label?: string }>) {
+  const { menu } = useCommand();
+  const showLabel = label && menu !== "dropdown" && menu !== "context";
+
+  return (
+    <CommandTriggerContext.Provider value={{ label }}>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{children}</TooltipTrigger>
+          {showLabel && <TooltipContent>{label}</TooltipContent>}
+        </Tooltip>
+      </TooltipProvider>
+    </CommandTriggerContext.Provider>
+  );
+}
+
+/**
+ * Command label
+ */
+export function CommandLabel() {
+  const { label } = useContext(CommandTriggerContext);
+
+  const { menu } = useCommand();
+  const showLabel = label && (menu === "dropdown" || menu === "context");
+
+  if (!showLabel) return null;
+
+  return <span className="ml-3">{label}</span>;
+}
+
+/**
+ * Command icon
+ */
+export function CommandIcon({ children }: PropsWithChildren) {
+  const { label } = useContext(CommandTriggerContext);
+
+  const { menu } = useCommand();
+  const showLabel = label && (menu === "dropdown" || menu === "context");
+
+  return (
+    <>
+      {children}
+      {showLabel && <span className="ml-3">{label}</span>}
+    </>
+  );
+}

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

@@ -0,0 +1,161 @@
+"use client";
+
+import { 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 from "react";
+import { Keys, useHotkeys } from "react-hotkeys-hook";
+import { useCommand } from "../hooks/context.client";
+import { CommandTrigger } from "./command-trigger.client";
+
+/**
+ * CommandDialogContext
+ */
+type CommandDialogContextValue = {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const CommandDialogContext = React.createContext({} as CommandDialogContextValue);
+
+/**
+ * CommandDialog
+ */
+export function CommandDialog({ children, ...props }: DialogProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={setOpen}>
+      <CommandDialogContext.Provider value={{ open, setOpen }}>
+        {children}
+      </CommandDialogContext.Provider>
+    </Dialog>
+  );
+}
+
+/**
+ * CommandDialogTrigger
+ */
+type CommandDialogTriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+  label?: string;
+  hotkey?: Keys;
+  disabled?: boolean;
+};
+
+export function CommandDialogTrigger({
+  label,
+  hotkey,
+  children,
+  disabled,
+  ...props
+}: CommandDialogTriggerProps) {
+  const { menu, status } = useCommand();
+  const { setOpen } = React.useContext(CommandDialogContext);
+
+  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>
+    );
+  }
+}
+
+/**
+ * CommandDialogContent
+ */
+export function CommandDialogContent({ children, ...props }: DialogContentProps) {
+  return <DialogContent {...props}>{children}</DialogContent>;
+}
+
+/**
+ * CommandDialogHeader
+ */
+export function CommandDialogHeader({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return <DialogHeader {...props}>{children}</DialogHeader>;
+}
+
+/**
+ * CommandDialogTitle
+ */
+export function CommandDialogTitle({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return <DialogTitle {...props}>{children}</DialogTitle>;
+}
+
+/**
+ * CommandDialogDescription
+ */
+export function CommandDialogDescription({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  return <DialogDescription {...props}>{children}</DialogDescription>;
+}
+
+/**
+ * CommandDialogFooter
+ */
+export function CommandDialogFooter({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return <DialogFooter {...props}>{children}</DialogFooter>;
+}