@tulip-systems/core 0.8.2 → 0.9.0

package/src/modules/auth/lib/validators.ts

@@ -8,6 +8,13 @@ import { users } from "../db/schema";
  */
 export type User = typeof users.$inferSelect;
 
+/**
+ * Select user schema
+ */
+export const selectUserSchema = createInsertSchema(users);
+
+export type SelectUserSchema = z.infer<typeof selectUserSchema>;
+
 /**
  * Login schema
  */

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

@@ -0,0 +1,79 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import type z from "zod";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu.client";
+import { cn } from "@/lib/entry";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { CommandDef } from "../../lib/builder";
+import { RenderCommand } from "../render-command";
+
+export type ContextCommandMenuContentProps<TSchema extends z.ZodTypeAny, TMeta> = ComponentProps<
+  typeof ContextMenuContent
+> &
+  CommandContextLifecycle & {
+    data: unknown;
+    commands: Array<CommandDef<z.ZodTypeAny, TMeta>>;
+    meta?: TMeta;
+    fallback?: ReactNode;
+    emptyLabel?: string;
+  };
+
+/**
+ * ContextCommandMenu
+ */
+export const ContextCommandMenu = ContextMenu;
+
+/**
+ * ContextCommandMenuTrigger
+ */
+export const ContextCommandMenuTrigger = ContextMenuTrigger;
+
+/**
+ * ContextCommandMenuContent
+ */
+export function ContextCommandMenuContent<TSchema extends z.ZodTypeAny, TMeta>({
+  data,
+  commands,
+  meta,
+  fallback,
+  onSuccess,
+  onError,
+  onSettled,
+  className,
+  emptyLabel = "Geen acties beschikbaar",
+  ...props
+}: ContextCommandMenuContentProps<TSchema, TMeta>) {
+  if (!commands.length) {
+    return (
+      <ContextMenuContent {...props} className={cn("min-w-40", className)}>
+        <ContextMenuItem className="font-medium" disabled>
+          {emptyLabel}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    );
+  }
+
+  return (
+    <ContextMenuContent {...props} className={cn("min-w-40", className)}>
+      {commands.map((command, index) => (
+        <RenderCommand
+          key={index}
+          command={command}
+          data={data}
+          meta={meta}
+          fallback={fallback}
+          ui="context"
+          onSuccess={onSuccess}
+          onError={onError}
+          onSettled={onSettled}
+        />
+      ))}
+    </ContextMenuContent>
+  );
+}

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

@@ -0,0 +1,85 @@
+"use client";
+
+import { MoreHorizontal } from "lucide-react";
+import React, { type ComponentProps, type HTMLAttributes, type ReactNode } from "react";
+import type z from "zod";
+import { Skeleton } from "@/components/entry";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.client";
+import { cn } from "@/lib/utils/cn";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { CommandDef } from "../../lib/builder";
+import { RenderCommand } from "../render-command";
+
+export type DropdownCommandMenuProps<
+  TSchema extends z.ZodTypeAny,
+  TMeta,
+> = HTMLAttributes<HTMLElement> &
+  CommandContextLifecycle & {
+    data: unknown;
+    commands: Array<CommandDef<z.ZodTypeAny, TMeta>>;
+    meta?: TMeta;
+    fallback?: ReactNode;
+  };
+
+export function DropdownCommandMenu<TSchema extends z.ZodTypeAny, TMeta>({
+  data,
+  commands,
+  meta,
+  fallback,
+  onSuccess,
+  onError,
+  onSettled,
+  className,
+  ...props
+}: DropdownCommandMenuProps<TSchema, TMeta>) {
+  const [open, setOpen] = React.useState(false);
+
+  if (!commands.length) return null;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          {...props}
+          variant="ghost"
+          className={cn("size-8 p-0 data-[state=open]:bg-secondary", className)}
+        >
+          <MoreHorizontal className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="min-w-[10rem]">
+        {commands.map((command, index) => (
+          <RenderCommand
+            key={index}
+            command={command}
+            data={data}
+            meta={meta}
+            fallback={fallback}
+            ui="dropdown"
+            onSuccess={async () => {
+              setOpen(false);
+              await onSuccess?.();
+            }}
+            onError={onError}
+            onSettled={onSettled}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function DropdownCommandMenuLoading({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("flex w-fit items-center", className)}>
+      <Skeleton className="h-8 w-8" />
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+import type z from "zod";
+import { cn } from "@/lib/utils/cn";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { CommandDef } from "../../lib/builder";
+import { RenderCommand } from "../render-command";
+
+export type FloatingCommandMenuProps<
+  TSchema extends z.ZodTypeAny,
+  TMeta,
+> = HTMLAttributes<HTMLElement> &
+  CommandContextLifecycle & {
+    data: unknown;
+    commands: Array<CommandDef<z.ZodTypeAny, TMeta>>;
+    meta?: TMeta;
+    fallback?: ReactNode;
+    state: "open" | "closed";
+    emptyLabel?: string;
+  };
+
+export function FloatingCommandMenu<TSchema extends z.ZodTypeAny, TMeta>({
+  data,
+  commands,
+  meta,
+  fallback,
+  onSuccess,
+  onError,
+  onSettled,
+  state,
+  className,
+  emptyLabel = "Geen acties beschikbaar",
+  ...props
+}: FloatingCommandMenuProps<TSchema, TMeta>) {
+  return (
+    <div
+      {...props}
+      data-state={state}
+      className={cn(
+        "fixed right-0 bottom-12 left-0 z-50 mx-auto flex w-fit items-center rounded-xl border bg-muted/80 px-3 py-2 shadow-xl backdrop-blur-2xl data-[state=open]:flex data-[state=closed]:hidden",
+        className,
+      )}
+    >
+      <div className="flex gap-2">
+        {commands.map((command, index) => (
+          <RenderCommand
+            key={index}
+            command={command}
+            data={data}
+            meta={meta}
+            fallback={fallback}
+            ui="table"
+            onSuccess={onSuccess}
+            onError={onError}
+            onSettled={onSettled}
+          />
+        ))}
+
+        {!commands.length && <span className="font-medium text-sm">{emptyLabel}</span>}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+"use client";
+
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import type z from "zod";
+import { Skeleton } from "@/components/entry";
+import { cn } from "@/lib/utils/cn";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { CommandDef } from "../../lib/builder";
+import { RenderCommand } from "../render-command";
+
+export type InlineCommandMenuProps<
+  TSchema extends z.ZodTypeAny,
+  TMeta,
+> = HTMLAttributes<HTMLElement> &
+  CommandContextLifecycle & {
+    data: unknown;
+    commands: Array<CommandDef<z.ZodTypeAny, TMeta>>;
+    meta?: TMeta;
+    fallback?: ReactNode;
+  };
+
+export function InlineCommandMenu<TSchema extends z.ZodTypeAny, TMeta>({
+  data,
+  meta,
+  commands,
+  fallback,
+  onSuccess,
+  onError,
+  onSettled,
+  className,
+  ...props
+}: InlineCommandMenuProps<TSchema, 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}
+            data={data}
+            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,38 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type z from "zod";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { CommandDef } from "../../lib/builder";
+import { DropdownCommandMenu, DropdownCommandMenuLoading } from "./dropdown-menu.client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "./inline-menu.client";
+
+export type ResponsiveCommandMenuProps<
+  TSchema extends z.ZodTypeAny,
+  TMeta,
+> = CommandContextLifecycle & {
+  data: unknown;
+  commands: Array<CommandDef<z.ZodTypeAny, TMeta>>;
+  meta?: TMeta;
+  fallback?: ReactNode;
+};
+
+export function ResponsiveCommandMenu<TSchema extends z.ZodTypeAny, TMeta>(
+  props: ResponsiveCommandMenuProps<TSchema, 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/primitives/alert-dialog-command.client.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import React, { type ComponentProps } from "react";
+import { type Keys, useHotkeys } from "react-hotkeys-hook";
+import { Icons } from "@/components/common/icons";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog.client";
+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/use-command.client";
+import { useCommandMutation } from "../../hooks/use-command-mutation.client";
+import { CommandTrigger } from "./command-trigger.client";
+
+type CommandAlertDialogContextValue = {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const CommandAlertDialogContext = React.createContext({} as CommandAlertDialogContextValue);
+
+export function CommandAlertDialog({ children, ...props }: ComponentProps<typeof AlertDialog>) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <AlertDialog {...props} open={open} onOpenChange={setOpen}>
+      <CommandAlertDialogContext.Provider value={{ open, setOpen }}>
+        {children}
+      </CommandAlertDialogContext.Provider>
+    </AlertDialog>
+  );
+}
+
+type CommandAlertDialogTriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+  label?: string;
+  hotkey?: Keys;
+  disabled?: boolean;
+};
+
+export function CommandAlertDialogTrigger({
+  label,
+  hotkey,
+  children,
+  disabled,
+  ...props
+}: CommandAlertDialogTriggerProps) {
+  const { status, ui, disabled: commandDisabled } = useCommand();
+  const { setOpen } = React.useContext(CommandAlertDialogContext);
+
+  const isDisabled = disabled || commandDisabled || status === "pending";
+
+  useHotkeys(hotkey ?? "", () => setOpen(true), { enabled: !isDisabled && hotkey !== undefined });
+
+  if (ui === "inline" || ui === "table") {
+    return (
+      <CommandTrigger label={label}>
+        <AlertDialogTrigger
+          {...props}
+          disabled={isDisabled}
+          className={cn(buttonVariants({ variant: "outline", size: "sm" }), props.className)}
+        >
+          {children}
+        </AlertDialogTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  if (ui === "dropdown") {
+    return (
+      <CommandTrigger label={label}>
+        <AlertDialogTrigger asChild>
+          <DropdownMenuItem
+            {...props}
+            disabled={isDisabled}
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            {children}
+          </DropdownMenuItem>
+        </AlertDialogTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  if (ui === "context") {
+    return (
+      <CommandTrigger label={label}>
+        <AlertDialogTrigger asChild>
+          <ContextMenuItem
+            {...props}
+            disabled={isDisabled}
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+          >
+            {children}
+          </ContextMenuItem>
+        </AlertDialogTrigger>
+      </CommandTrigger>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+export function CommandAlertDialogContent({
+  children,
+  ...props
+}: ComponentProps<typeof AlertDialogContent>) {
+  return <AlertDialogContent {...props}>{children}</AlertDialogContent>;
+}
+
+export function CommandAlertDialogHeader({
+  children,
+  ...props
+}: ComponentProps<typeof AlertDialogHeader>) {
+  return <AlertDialogHeader {...props}>{children}</AlertDialogHeader>;
+}
+
+export function CommandAlertDialogTitle({
+  children,
+  ...props
+}: ComponentProps<typeof AlertDialogTitle>) {
+  return <AlertDialogTitle {...props}>{children}</AlertDialogTitle>;
+}
+
+export function CommandAlertDialogDescription({
+  children,
+  ...props
+}: ComponentProps<typeof AlertDialogDescription>) {
+  return <AlertDialogDescription {...props}>{children}</AlertDialogDescription>;
+}
+
+export function CommandAlertDialogFooter({
+  children,
+  ...props
+}: ComponentProps<typeof AlertDialogFooter>) {
+  return <AlertDialogFooter {...props}>{children}</AlertDialogFooter>;
+}
+
+export function CommandAlertDialogCancel({
+  children,
+  ...props
+}: ComponentProps<typeof AlertDialogCancel>) {
+  return <AlertDialogCancel {...props}>{children}</AlertDialogCancel>;
+}
+
+type CommandAlertDialogActionProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+};
+
+export function CommandAlertDialogAction<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  children,
+  disabled,
+  ...props
+}: CommandAlertDialogActionProps<TData, TError, TVariables, TOnMutateResult>) {
+  const { setOpen } = React.useContext(CommandAlertDialogContext);
+  const { status, disabled: commandDisabled } = useCommand();
+
+  const { mutateAsync } = useCommandMutation({
+    ...mutation,
+    onSuccess: async (...params) => {
+      setOpen(false);
+      return await mutation?.onSuccess?.(...params);
+    },
+  });
+
+  const isDisabled = disabled || commandDisabled || status === "pending";
+
+  return (
+    <AlertDialogAction {...props} disabled={isDisabled} onClick={() => mutateAsync(variables)}>
+      {status === "pending" && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+      {children}
+    </AlertDialogAction>
+  );
+}

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

@@ -0,0 +1,81 @@
+"use client";
+
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import type React from "react";
+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/use-command.client";
+import { useCommandMutation } from "../../hooks/use-command-mutation.client";
+import { CommandTrigger } from "./command-trigger.client";
+
+export type CommandClickProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  variables: TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  label?: string;
+  hotkey?: Keys;
+};
+
+export function CommandClick<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  children,
+  variables,
+  mutation,
+  label,
+  hotkey,
+  disabled,
+  ...props
+}: CommandClickProps<TData, TError, TVariables, TOnMutateResult>) {
+  const { status, ui, disabled: commandDisabled } = useCommand();
+  const { mutate } = useCommandMutation(mutation);
+
+  const isDisabled = disabled || commandDisabled || status === "pending";
+  const handleClick = () => mutate(variables);
+
+  useHotkeys(hotkey ?? "", () => handleClick(), { enabled: !isDisabled && hotkey !== undefined });
+
+  if (ui === "inline" || ui === "table") {
+    return (
+      <CommandTrigger label={label}>
+        <Button {...props} variant="outline" size="sm" disabled={isDisabled} onClick={handleClick}>
+          {children}
+        </Button>
+      </CommandTrigger>
+    );
+  }
+
+  if (ui === "dropdown") {
+    return (
+      <CommandTrigger label={label}>
+        <DropdownMenuItem {...props} disabled={isDisabled} onClick={handleClick}>
+          {children}
+        </DropdownMenuItem>
+      </CommandTrigger>
+    );
+  }
+
+  if (ui === "context") {
+    return (
+      <CommandTrigger label={label}>
+        <ContextMenuItem {...props} disabled={isDisabled} onClick={handleClick}>
+          {children}
+        </ContextMenuItem>
+      </CommandTrigger>
+    );
+  }
+
+  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>}
+    </>
+  );
+}