@tulip-systems/core 0.8.3 → 0.10.0

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

@@ -0,0 +1,65 @@
+"use client";
+
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { Skeleton } from "@/components/entry";
+import { cn } from "@/lib/utils/cn";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { AnyCommandDef, CommandDef, ExtractCommandData } from "../../lib/builder";
+import { RenderCommand } from "../render-command";
+
+export type InlineCommandMenuProps<
+  TCommand extends AnyCommandDef,
+  TMeta = object,
+> = HTMLAttributes<HTMLElement> &
+  CommandContextLifecycle & {
+    data: NoInfer<ExtractCommandData<TCommand>>;
+    commands: TCommand[];
+    meta?: TMeta;
+    fallback?: ReactNode;
+  };
+
+export function InlineCommandMenu<TCommand extends AnyCommandDef, TMeta = object>({
+  data,
+  meta,
+  commands,
+  fallback,
+  onSuccess,
+  onError,
+  onSettled,
+  className,
+  ...props
+}: InlineCommandMenuProps<TCommand, TMeta>) {
+  if (!commands.length) return null;
+
+  return (
+    <div {...props} className={cn("flex w-fit items-center", className)}>
+      <div className="flex gap-2">
+        {commands.map((command, index) => (
+          <RenderCommand
+            key={index}
+            command={command as CommandDef<unknown, TMeta>}
+            data={data as unknown}
+            meta={meta}
+            fallback={fallback}
+            ui="inline"
+            onSuccess={onSuccess}
+            onError={onError}
+            onSettled={onSettled}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function InlineCommandMenuLoading({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("flex w-fit items-center", className)}>
+      <div className="flex gap-2">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <Skeleton key={index} className="h-8 w-8" />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { AnyCommandDef, ExtractCommandData } from "../../lib/builder";
+import { DropdownCommandMenu, DropdownCommandMenuLoading } from "./dropdown-menu.client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "./inline-menu.client";
+
+export type ResponsiveCommandMenuProps<
+  TCommand extends AnyCommandDef,
+  TMeta = object,
+> = CommandContextLifecycle & {
+  data: NoInfer<ExtractCommandData<TCommand>>;
+  commands: TCommand[];
+  meta?: TMeta;
+  fallback?: ReactNode;
+};
+
+export function ResponsiveCommandMenu<TCommand extends AnyCommandDef, TMeta = object>(
+  props: ResponsiveCommandMenuProps<TCommand, TMeta>,
+) {
+  return (
+    <>
+      <InlineCommandMenu className="hidden xl:flex" {...props} />
+      <DropdownCommandMenu className="xl:hidden" {...props} />
+    </>
+  );
+}
+
+export function ResponsiveCommandMenuLoading() {
+  return (
+    <>
+      <InlineCommandMenuLoading className="hidden xl:flex" />
+      <DropdownCommandMenuLoading className="xl:hidden" />
+    </>
+  );
+}

package/src/modules/commands/components/{alert-dialog-command.client.tsx → primitives/alert-dialog-command.client.tsx}

@@ -19,13 +19,10 @@ import { buttonVariants } from "@/components/ui/button";
 import { ContextMenuItem } from "@/components/ui/context-menu.client";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu.client";
 import { cn } from "@/lib/utils/cn";
-import { useCommand } from "../hooks/context.client";
-import { useCommandMutation } from "../hooks/use-command-mutation.client";
+import { useCommand } from "../../hooks/use-command.client";
+import { useCommandMutation } from "../../hooks/use-command-mutation.client";
 import { CommandTrigger } from "./command-trigger.client";
 
-/**
- * CommandAlertDialogContext
- */
 type CommandAlertDialogContextValue = {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -33,9 +30,6 @@ type CommandAlertDialogContextValue = {
 
 const CommandAlertDialogContext = React.createContext({} as CommandAlertDialogContextValue);
 
-/**
- * CommandAlertDialog
- */
 export function CommandAlertDialog({ children, ...props }: ComponentProps<typeof AlertDialog>) {
   const [open, setOpen] = React.useState(false);
 
@@ -48,9 +42,6 @@ export function CommandAlertDialog({ children, ...props }: ComponentProps<typeof
   );
 }
 
-/**
- * CommandAlertDialogTrigger
- */
 type CommandAlertDialogTriggerProps = {
   children: React.ReactNode;
   className?: string;
@@ -66,14 +57,14 @@ export function CommandAlertDialogTrigger({
   disabled,
   ...props
 }: CommandAlertDialogTriggerProps) {
-  const { menu, status } = useCommand();
+  const { status, ui, disabled: commandDisabled } = useCommand();
   const { setOpen } = React.useContext(CommandAlertDialogContext);
 
-  const isDisabled = disabled || status === "pending";
+  const isDisabled = disabled || commandDisabled || status === "pending";
 
   useHotkeys(hotkey ?? "", () => setOpen(true), { enabled: !isDisabled && hotkey !== undefined });
 
-  if (menu === "inline" || menu === "table") {
+  if (ui === "inline" || ui === "table") {
     return (
       <CommandTrigger label={label}>
         <AlertDialogTrigger
@@ -87,7 +78,7 @@ export function CommandAlertDialogTrigger({
     );
   }
 
-  if (menu === "dropdown") {
+  if (ui === "dropdown") {
     return (
       <CommandTrigger label={label}>
         <AlertDialogTrigger asChild>
@@ -106,7 +97,7 @@ export function CommandAlertDialogTrigger({
     );
   }
 
-  if (menu === "context") {
+  if (ui === "context") {
     return (
       <CommandTrigger label={label}>
         <AlertDialogTrigger asChild>
@@ -124,11 +115,10 @@ export function CommandAlertDialogTrigger({
       </CommandTrigger>
     );
   }
+
+  return <>{children}</>;
 }
 
-/**
- * CommandAlertDialogContent
- */
 export function CommandAlertDialogContent({
   children,
   ...props
@@ -136,9 +126,6 @@ export function CommandAlertDialogContent({
   return <AlertDialogContent {...props}>{children}</AlertDialogContent>;
 }
 
-/**
- * CommandAlertDialogHeader
- */
 export function CommandAlertDialogHeader({
   children,
   ...props
@@ -146,9 +133,6 @@ export function CommandAlertDialogHeader({
   return <AlertDialogHeader {...props}>{children}</AlertDialogHeader>;
 }
 
-/**
- * CommandAlertDialogTitle
- */
 export function CommandAlertDialogTitle({
   children,
   ...props
@@ -156,9 +140,6 @@ export function CommandAlertDialogTitle({
   return <AlertDialogTitle {...props}>{children}</AlertDialogTitle>;
 }
 
-/**
- * CommandAlertDialogDescription
- */
 export function CommandAlertDialogDescription({
   children,
   ...props
@@ -166,9 +147,6 @@ export function CommandAlertDialogDescription({
   return <AlertDialogDescription {...props}>{children}</AlertDialogDescription>;
 }
 
-/**
- * CommandAlertDialogFooter
- */
 export function CommandAlertDialogFooter({
   children,
   ...props
@@ -176,9 +154,6 @@ export function CommandAlertDialogFooter({
   return <AlertDialogFooter {...props}>{children}</AlertDialogFooter>;
 }
 
-/**
- * CommandAlertDialogCancel
- */
 export function CommandAlertDialogCancel({
   children,
   ...props
@@ -186,9 +161,6 @@ export function CommandAlertDialogCancel({
   return <AlertDialogCancel {...props}>{children}</AlertDialogCancel>;
 }
 
-/**
- * CommandAlertDialogAction
- */
 type CommandAlertDialogActionProps<
   TData = unknown,
   TError = DefaultError,
@@ -215,18 +187,17 @@ export function CommandAlertDialogAction<
   ...props
 }: CommandAlertDialogActionProps<TData, TError, TVariables, TOnMutateResult>) {
   const { setOpen } = React.useContext(CommandAlertDialogContext);
-  const { status } = useCommand();
+  const { status, disabled: commandDisabled } = useCommand();
 
   const { mutateAsync } = useCommandMutation({
     ...mutation,
     onSuccess: async (...params) => {
       setOpen(false);
-
       return await mutation?.onSuccess?.(...params);
     },
   });
 
-  const isDisabled = disabled || status === "pending";
+  const isDisabled = disabled || commandDisabled || status === "pending";
 
   return (
     <AlertDialogAction {...props} disabled={isDisabled} onClick={() => mutateAsync(variables)}>

package/src/modules/commands/components/{click-command.client.tsx → primitives/click-command.client.tsx}

@@ -6,8 +6,8 @@ import { type Keys, useHotkeys } from "react-hotkeys-hook";
 import { Button } from "@/components/ui/button";
 import { ContextMenuItem } from "@/components/ui/context-menu.client";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu.client";
-import { useCommand } from "../hooks/context.client";
-import { useCommandMutation } from "../hooks/use-command-mutation.client";
+import { useCommand } from "../../hooks/use-command.client";
+import { useCommandMutation } from "../../hooks/use-command-mutation.client";
 import { CommandTrigger } from "./command-trigger.client";
 
 export type CommandClickProps<
@@ -39,16 +39,15 @@ export function CommandClick<
   disabled,
   ...props
 }: CommandClickProps<TData, TError, TVariables, TOnMutateResult>) {
-  const { menu, status } = useCommand();
+  const { status, ui, disabled: commandDisabled } = useCommand();
   const { mutate } = useCommandMutation(mutation);
 
-  const isDisabled = disabled || status === "pending";
-
+  const isDisabled = disabled || commandDisabled || status === "pending";
   const handleClick = () => mutate(variables);
 
   useHotkeys(hotkey ?? "", () => handleClick(), { enabled: !isDisabled && hotkey !== undefined });
 
-  if (menu === "inline") {
+  if (ui === "inline" || ui === "table") {
     return (
       <CommandTrigger label={label}>
         <Button {...props} variant="outline" size="sm" disabled={isDisabled} onClick={handleClick}>
@@ -58,7 +57,7 @@ export function CommandClick<
     );
   }
 
-  if (menu === "dropdown") {
+  if (ui === "dropdown") {
     return (
       <CommandTrigger label={label}>
         <DropdownMenuItem {...props} disabled={isDisabled} onClick={handleClick}>
@@ -68,7 +67,7 @@ export function CommandClick<
     );
   }
 
-  if (menu === "context") {
+  if (ui === "context") {
     return (
       <CommandTrigger label={label}>
         <ContextMenuItem {...props} disabled={isDisabled} onClick={handleClick}>
@@ -78,15 +77,5 @@ export function CommandClick<
     );
   }
 
-  if (menu === "table") {
-    return (
-      <CommandTrigger label={label}>
-        <Button {...props} variant="outline" size="sm" disabled={isDisabled} onClick={handleClick}>
-          {children}
-        </Button>
-      </CommandTrigger>
-    );
-  }
-
-  return null;
+  return <>{children}</>;
 }

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

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

package/src/modules/commands/components/{dialog-command.client.tsx → primitives/dialog-command.client.tsx}

@@ -15,12 +15,9 @@ import {
 } from "@/components/ui/dialog.client";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu.client";
 import { cn } from "@/lib/utils/cn";
-import { useCommand } from "../hooks/context.client";
+import { useCommand } from "../../hooks/use-command.client";
 import { CommandTrigger } from "./command-trigger.client";
 
-/**
- * CommandDialogContext
- */
 type CommandDialogOpenState = {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -32,9 +29,6 @@ type CommandDialogContextValue = {
 
 const CommandDialogContext = React.createContext({} as CommandDialogContextValue);
 
-/**
- * CommandDialog
- */
 export function CommandDialog({
   children,
   openState,
@@ -43,7 +37,6 @@ export function CommandDialog({
   openState?: CommandDialogOpenState;
 }) {
   const state = React.useState(false);
-
   const { open, setOpen } = openState ?? { open: state[0], setOpen: state[1] };
 
   return (
@@ -55,9 +48,6 @@ export function CommandDialog({
   );
 }
 
-/**
- * CommandDialogTrigger
- */
 type CommandDialogTriggerProps = {
   children: React.ReactNode;
   className?: string;
@@ -73,16 +63,16 @@ export function CommandDialogTrigger({
   disabled,
   ...props
 }: CommandDialogTriggerProps) {
-  const { menu, status } = useCommand();
+  const { status, ui, disabled: commandDisabled } = useCommand();
   const { openState } = React.useContext(CommandDialogContext);
 
-  const isDisabled = disabled || status === "pending";
+  const isDisabled = disabled || commandDisabled || status === "pending";
 
   useHotkeys(hotkey ?? "", () => openState.setOpen(true), {
     enabled: !isDisabled && hotkey !== undefined,
   });
 
-  if (menu === "inline" || menu === "table") {
+  if (ui === "inline" || ui === "table") {
     return (
       <CommandTrigger label={label}>
         <DialogTrigger
@@ -96,7 +86,7 @@ export function CommandDialogTrigger({
     );
   }
 
-  if (menu === "dropdown") {
+  if (ui === "dropdown") {
     return (
       <CommandTrigger label={label}>
         <DialogTrigger asChild>
@@ -115,7 +105,7 @@ export function CommandDialogTrigger({
     );
   }
 
-  if (menu === "context") {
+  if (ui === "context") {
     return (
       <CommandTrigger label={label}>
         <DialogTrigger asChild>
@@ -133,32 +123,22 @@ export function CommandDialogTrigger({
       </CommandTrigger>
     );
   }
+
+  return <>{children}</>;
 }
 
-/**
- * CommandDialogContent
- */
 export function CommandDialogContent({ children, ...props }: ComponentProps<typeof DialogContent>) {
   return <DialogContent {...props}>{children}</DialogContent>;
 }
 
-/**
- * CommandDialogHeader
- */
 export function CommandDialogHeader({ children, ...props }: ComponentProps<typeof DialogHeader>) {
   return <DialogHeader {...props}>{children}</DialogHeader>;
 }
 
-/**
- * CommandDialogTitle
- */
 export function CommandDialogTitle({ children, ...props }: ComponentProps<typeof DialogTitle>) {
   return <DialogTitle {...props}>{children}</DialogTitle>;
 }
 
-/**
- * CommandDialogDescription
- */
 export function CommandDialogDescription({
   children,
   ...props
@@ -166,9 +146,6 @@ export function CommandDialogDescription({
   return <DialogDescription {...props}>{children}</DialogDescription>;
 }
 
-/**
- * CommandDialogFooter
- */
 export function CommandDialogFooter({ children, ...props }: ComponentProps<typeof DialogFooter>) {
   return <DialogFooter {...props}>{children}</DialogFooter>;
 }