@tulip-systems/core 0.8.3 → 0.9.0

package/src/modules/commands/hooks/{use-command-mutation.client.tsx → use-command-mutation.client.ts}

@@ -3,12 +3,7 @@
 import type { DefaultError, MutationFunction, MutationOptions } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useAction } from "@/lib/hooks/use-action";
-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;
+import { useCommand } from "./use-command.client";
 
 export type CommandMutationMeta = {
   router: ReturnType<typeof useRouter>;
@@ -23,43 +18,31 @@ export function useCommandMutation<
   const router = useRouter();
   const commandContext = useCommand();
 
-  const mutation = useAction({
+  return 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/hooks/use-command.client.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  createContext,
+  type Dispatch,
+  type PropsWithChildren,
+  type SetStateAction,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import type { CommandStatus, CommandUI } from "../lib/builder";
+
+type CommandContextValue = {
+  ui: CommandUI;
+  status: CommandStatus;
+  disabled: boolean;
+  setStatus: Dispatch<SetStateAction<CommandStatus>>;
+};
+
+const CommandContext = createContext<CommandContextValue | null>(null);
+
+export function useCommand() {
+  const context = useContext(CommandContext);
+  if (!context) {
+    throw new Error("useCommand must be used within CommandContextProvider");
+  }
+
+  return context;
+}
+
+export type CommandContextLifecycle = {
+  onSuccess?: () => Promise<void> | void;
+  onError?: () => Promise<void> | void;
+  onSettled?: () => Promise<void> | void;
+};
+
+type CommandContextProviderProps = PropsWithChildren<
+  CommandContextLifecycle & {
+    ui: CommandUI;
+    disabled?: boolean;
+  }
+>;
+
+export function CommandContextProvider({
+  children,
+  ui,
+  disabled = false,
+  onSuccess,
+  onError,
+  onSettled,
+}: CommandContextProviderProps) {
+  const [status, setStatus] = useState<CommandStatus>("idle");
+  const previousStatusRef = useRef<CommandStatus>("idle");
+
+  useEffect(() => {
+    if (status === previousStatusRef.current) return;
+
+    if (status === "success") {
+      void onSuccess?.();
+      void onSettled?.();
+    }
+
+    if (status === "error") {
+      void onError?.();
+      void onSettled?.();
+    }
+
+    previousStatusRef.current = status;
+  }, [status, onSuccess, onError, onSettled]);
+
+  return (
+    <CommandContext.Provider value={{ ui, status, disabled, setStatus }}>
+      {children}
+    </CommandContext.Provider>
+  );
+}

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

@@ -0,0 +1,91 @@
+import type { z } from "zod";
+import type { Permission } from "@/modules/auth/lib/permissions";
+
+export type CommandUI = "dropdown" | "context" | "table" | "inline" | "custom";
+
+export type CommandStatus = "idle" | "pending" | "success" | "error";
+
+export type CommandCondition<TSchema extends z.ZodTypeAny, TMeta> = (params: {
+  data: z.output<TSchema>;
+  meta: TMeta;
+}) => boolean | boolean[];
+
+export type CommandRender<TSchema extends z.ZodTypeAny, TMeta> = (params: {
+  data: z.output<TSchema>;
+  meta: TMeta;
+  ui: CommandUI;
+}) => React.ReactNode;
+
+/**
+ * Final command definition (without name).
+ * Name is derived from the object key in `defineCommands`.
+ */
+export type CommandDef<TSchema extends z.ZodTypeAny = z.ZodTypeAny, TMeta = object> = {
+  permission?: Permission;
+  schema: TSchema;
+  visibleWhen?: CommandCondition<TSchema, TMeta>;
+  disabledWhen?: CommandCondition<TSchema, TMeta>;
+  render: CommandRender<TSchema, TMeta>;
+};
+
+type ReadyCommandBuilder<TSchema extends z.ZodTypeAny, TMeta> = {
+  permission(permission: Permission): ReadyCommandBuilder<TSchema, TMeta>;
+  visibleWhen(condition: CommandCondition<TSchema, TMeta>): ReadyCommandBuilder<TSchema, TMeta>;
+  disabledWhen(condition: CommandCondition<TSchema, TMeta>): ReadyCommandBuilder<TSchema, TMeta>;
+  render(render: CommandRender<TSchema, TMeta>): CommandDef<TSchema, TMeta>;
+};
+
+type InitialCommandBuilder<TMeta> = {
+  input<TNextSchema extends z.ZodTypeAny>(schema: TNextSchema): ReadyCommandBuilder<TNextSchema, TMeta>;
+};
+
+type StartState<TMeta> = {
+  permission?: Permission;
+  meta?: TMeta;
+};
+
+type ReadyState<TSchema extends z.ZodTypeAny, TMeta> = {
+  permission?: Permission;
+  schema: TSchema;
+  visibleWhen?: CommandCondition<TSchema, TMeta>;
+  disabledWhen?: CommandCondition<TSchema, TMeta>;
+};
+
+function createInitialBuilder<TMeta>(state: StartState<TMeta>): InitialCommandBuilder<TMeta> {
+  return {
+    input<TNextSchema extends z.ZodTypeAny>(schema: TNextSchema) {
+      return createReadyBuilder<TNextSchema, TMeta>({ permission: state.permission, schema });
+    },
+  };
+}
+
+function createReadyBuilder<TSchema extends z.ZodTypeAny, TMeta>(
+  state: ReadyState<TSchema, TMeta>,
+): ReadyCommandBuilder<TSchema, TMeta> {
+  return {
+    permission(permission: Permission) {
+      return createReadyBuilder<TSchema, TMeta>({ ...state, permission });
+    },
+    visibleWhen(condition: CommandCondition<TSchema, TMeta>) {
+      return createReadyBuilder<TSchema, TMeta>({ ...state, visibleWhen: condition });
+    },
+    disabledWhen(condition: CommandCondition<TSchema, TMeta>) {
+      return createReadyBuilder<TSchema, TMeta>({ ...state, disabledWhen: condition });
+    },
+    render(render: CommandRender<TSchema, TMeta>) {
+      return {
+        permission: state.permission,
+        schema: state.schema,
+        visibleWhen: state.visibleWhen,
+        disabledWhen: state.disabledWhen,
+        render,
+      };
+    },
+  };
+}
+
+export function createCommandBuilder<TMeta = object>(): InitialCommandBuilder<TMeta> {
+  return createInitialBuilder<TMeta>({});
+}
+
+export const commandBuilder = createCommandBuilder();

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

@@ -0,0 +1,116 @@
+import type z from "zod";
+import type { CommandDef } from "./builder";
+
+/**
+ * Command map type defining the shape of command definitions.
+ */
+export type CommandMap = Record<string, CommandDef<z.ZodTypeAny, any>>;
+
+type CommandKey<TCommands extends CommandMap> = Extract<keyof TCommands, string>;
+type CommandFlags<TCommands extends CommandMap> = Partial<Record<CommandKey<TCommands>, boolean>>;
+type CommandInput<TCommands extends CommandMap> =
+  | readonly CommandKey<TCommands>[]
+  | CommandFlags<TCommands>;
+
+type TruthyKeys<T> = {
+  [K in keyof T]-?: T[K] extends true ? K : never;
+}[keyof T];
+
+type PickedCommands<
+  TCommands extends CommandMap,
+  TInput extends CommandInput<TCommands>,
+> = TInput extends readonly CommandKey<TCommands>[]
+  ? Pick<TCommands, TInput[number]>
+  : TInput extends CommandFlags<TCommands>
+      ? Pick<TCommands, Extract<TruthyKeys<TInput>, keyof TCommands>>
+      : never;
+
+type OmittedCommands<
+  TCommands extends CommandMap,
+  TInput extends CommandInput<TCommands>,
+> = TInput extends readonly CommandKey<TCommands>[]
+  ? Omit<TCommands, TInput[number]>
+  : TInput extends CommandFlags<TCommands>
+      ? Omit<TCommands, Extract<TruthyKeys<TInput>, keyof TCommands>>
+      : never;
+
+type ExtendedCommands<TBase extends CommandMap, TExtension extends CommandMap> = Omit<
+  TBase,
+  keyof TExtension
+> &
+  TExtension;
+
+/**
+ * Command registry type with utility methods for picking, omitting, and converting to array.
+ * This allows for flexible manipulation of command sets while maintaining type safety.
+ */
+type CommandRegistry<TCommands extends CommandMap> = {
+  commands: TCommands;
+  extend<const TExtension extends CommandMap>(
+    extension: TExtension,
+  ): CommandRegistry<ExtendedCommands<TCommands, TExtension>>;
+  pick<const TInput extends CommandInput<TCommands>>(
+    input: TInput,
+  ): CommandRegistry<PickedCommands<TCommands, TInput>>;
+  omit<const TInput extends CommandInput<TCommands>>(
+    input: TInput,
+  ): CommandRegistry<OmittedCommands<TCommands, TInput>>;
+  toArray(): Array<CommandDef<z.ZodTypeAny, any>>;
+};
+
+function toKeys<TCommands extends CommandMap>(
+  input: CommandInput<TCommands>,
+): Array<CommandKey<TCommands>> {
+  if (Array.isArray(input)) return [...input];
+
+  return (Object.entries(input) as Array<[CommandKey<TCommands>, boolean | undefined]>)
+    .filter(([, enabled]) => enabled === true)
+    .map(([key]) => key);
+}
+
+/**
+ * Internal function to create a command registry from a given command map.
+ */
+function createRegistry<TCommands extends CommandMap>(
+  commands: TCommands,
+): CommandRegistry<TCommands> {
+  return {
+    commands,
+    extend<const TExtension extends CommandMap>(extension: TExtension) {
+      const next = { ...commands, ...extension } as ExtendedCommands<TCommands, TExtension>;
+      return createRegistry(next);
+    },
+    pick<const TInput extends CommandInput<TCommands>>(input: TInput) {
+      const keys = toKeys<TCommands>(input);
+      const next = Object.fromEntries(
+        keys.flatMap((key) => (key in commands ? [[key, commands[key]]] : [])),
+      ) as PickedCommands<TCommands, TInput>;
+
+      return createRegistry(next);
+    },
+    omit<const TInput extends CommandInput<TCommands>>(input: TInput) {
+      const keys = toKeys<TCommands>(input);
+      const blacklist = new Set(keys);
+      const next = Object.fromEntries(
+        Object.entries(commands).filter(([key]) => !blacklist.has(key as CommandKey<TCommands>)),
+      ) as OmittedCommands<TCommands, TInput>;
+
+      return createRegistry(next);
+    },
+    toArray() {
+      return Object.values(commands) as Array<CommandDef<z.ZodTypeAny, any>>;
+    },
+  };
+}
+
+/**
+ * Public function to define commands. It takes a command map and returns a command registry with utility methods.
+ * This is the main entry point for users to create their command sets.
+ * @param commands - A map of command definitions keyed by command name.
+ * @returns A command registry with the defined commands and utility methods.
+ */
+export function defineCommands<TCommands extends CommandMap>(
+  commands: TCommands,
+): CommandRegistry<TCommands> {
+  return createRegistry(commands);
+}

package/src/modules/data-tables/components/filters/combobox.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Check, type LucideIcon, PlusCircle } from "lucide-react";
-import { type ParserBuilder, useQueryState } from "nuqs";
+import { ListFilter, type LucideIcon } from "lucide-react";
+import { type SingleParserBuilder, useQueryState } from "nuqs";
 import { startTransition, useOptimistic } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -11,6 +11,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandItemCheck,
   CommandList,
   CommandSeparator,
 } from "@/components/ui/command.client";
@@ -28,7 +29,7 @@ export type TableFilterComboboxOption = {
 
 export type TableFilterComboboxProps<TValue extends string = string> = {
   title?: string;
-  filter: { name: string; parser: ParserBuilder<TValue[] | null> };
+  filter: { name: string; parser: SingleParserBuilder<TValue[] | null> };
   options: TableFilterComboboxOption[];
 };
 
@@ -47,11 +48,11 @@ export function TableFilterCombobox<TValue extends string>({
     <Popover>
       <PopoverTrigger asChild>
         <Button type="button" variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle className="h-4 w-4" />
+          <ListFilter className="mr-1 h-4 w-4" />
           {title}
           {selectedValues?.size > 0 && (
             <>
-              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Separator orientation="vertical" className="mx-2 h-full" />
               <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
                 {selectedValues.size}
               </Badge>
@@ -90,6 +91,8 @@ export function TableFilterCombobox<TValue extends string>({
                 return (
                   <CommandItem
                     key={option.value}
+                    value={option.value}
+                    data-checked={selectedValues.has(option.value)}
                     onSelect={() =>
                       startTransition(() => {
                         const newSelectedValues = new Set(selectedValues);
@@ -105,14 +108,7 @@ export function TableFilterCombobox<TValue extends string>({
                       })
                     }
                   >
-                    <div
-                      data-active={selectedValues.has(option.value)}
-                      className={cn(
-                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary opacity-50 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:opacity-100 [&>svg]:invisible data-[active=true]:[&>svg]:visible data-[active=true]:[&>svg]:text-primary-foreground",
-                      )}
-                    >
-                      <Check className="h-4 w-4 text-foreground" />
-                    </div>
+                    <CommandItemCheck />
 
                     <div className="flex flex-1 items-center gap-2">
                       {Icon && <Icon className={cn("size-4", option.className)} />}

package/src/modules/data-tables/components/filters/date-range.client.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Badge, Button, Separator } from "@tulip-systems/core/components";
+import {
+  Calendar,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@tulip-systems/core/components/client";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { type SingleParserBuilder, useQueryState } from "nuqs";
+import { startTransition, useState } from "react";
+
+export type TableFilterDateRangeValue = [Date, Date] | null;
+
+export type TableFilterDateRangeProps = {
+  title?: string;
+  filter: { name: string; parser: SingleParserBuilder<[Date, Date] | null> };
+  presets?: TableFilterDateRangePreset[];
+};
+
+export type TableFilterDateRangePreset = {
+  label: string;
+  value: [Date, Date];
+};
+
+export function TableFilterDateRange({
+  title,
+  filter,
+  presets,
+}: TableFilterDateRangeProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useQueryState(filter.name, filter.parser);
+
+  const from = query?.[0] ?? null;
+  const until = query?.[1] ?? null;
+  const selectedRange =
+    from || until ? { from: from ?? undefined, to: until ?? undefined } : undefined;
+
+  const label = formatDateRange(from, until);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button type="button" variant="outline" size="sm" className="h-8 border-dashed">
+          <CalendarIcon className="mr-1 h-4 w-4" />
+          {title}
+          {label && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-full" />
+              <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                {label}
+              </Badge>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex flex-col gap-3 p-3 lg:flex-row">
+          {presets && presets.length > 0 && (
+            <div className="flex min-w-40 flex-col gap-1 lg:border-r lg:pr-3">
+              {presets.map((preset) => (
+                <Button
+                  key={preset.label}
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  className="justify-start"
+                  onClick={() => {
+                    setQuery(preset.value, { startTransition });
+                    setOpen(false);
+                  }}
+                >
+                  {preset.label}
+                </Button>
+              ))}
+            </div>
+          )}
+
+          <Calendar
+            mode="range"
+            numberOfMonths={2}
+            selected={selectedRange}
+            onSelect={(range) => {
+              if (range?.from && range?.to) {
+                setQuery([range.from, range.to], { startTransition });
+              } else if (range?.from) {
+                setQuery([range.from, range.from], { startTransition });
+              } else {
+                setQuery(null, { startTransition });
+              }
+            }}
+            autoFocus
+          />
+        </div>
+
+        {label && (
+          <div className="w-full space-y-2 p-1.5">
+            <Separator />
+
+            <Button
+              size="sm"
+              type="button"
+              variant="ghost"
+              onClick={() => {
+                setOpen(false);
+                setQuery(null, { startTransition });
+              }}
+              className="w-full text-center"
+            >
+              Clear filters
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function formatDateRange(from: Date | null, until: Date | null) {
+  if (from && until) return `${format(from, "dd/MM/yyyy")} tot ${format(until, "dd/MM/yyyy")}`;
+  if (from) return `Vanaf ${format(from, "dd/MM/yyyy")}`;
+  if (until) return `Tot ${format(until, "dd/MM/yyyy")}`;
+
+  return null;
+}

package/src/modules/data-tables/components/filters/search.client.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { debounce, type SingleParserBuilder, useQueryState } from "nuqs";
+import { startTransition } from "react";
+import { Input } from "@/components/ui/input";
+
+export type TableFilterSearchProps = {
+  placeholder?: string;
+  filter: { name: string; parser: SingleParserBuilder<string | null> };
+};
+
+export function TableFilterSearch({ placeholder, filter }: TableFilterSearchProps) {
+  const [query, setQuery] = useQueryState(filter.name, filter.parser);
+
+  return (
+    <div className="relative">
+      <Search className="pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Input
+        defaultValue={query ?? undefined}
+        placeholder={placeholder}
+        className="h-8 w-[150px] pl-8 lg:w-[250px]"
+        onChange={(e) => {
+          setQuery(e.target.value || null, {
+            limitUrlUpdates: e.target.value === "" ? undefined : debounce(350),
+            startTransition,
+          });
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            setQuery(e.currentTarget.value || null, { startTransition });
+          }
+        }}
+      />
+    </div>
+  );
+}

package/src/modules/data-tables/components/filters/slider.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { PlusCircle } from "lucide-react";
-import { type ParserBuilder, useQueryState } from "nuqs";
+import { SlidersHorizontal } from "lucide-react";
+import { type SingleParserBuilder, useQueryState } from "nuqs";
 import { startTransition, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { Badge } from "@/components/ui/badge";
@@ -13,7 +13,7 @@ import { Slider } from "@/components/ui/slider";
 
 export type TableFilterSliderProps = {
   title?: string;
-  filter: { name: string; parser: ParserBuilder<[number, number] | null> };
+  filter: { name: string; parser: SingleParserBuilder<[number, number] | null> };
   options?: { min: number; max: number };
 };
 
@@ -38,7 +38,7 @@ export function TableFilterSlider({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button type="button" variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle className="mr-2 h-4 w-4" />
+          <SlidersHorizontal className="mr-1 h-4 w-4" />
           {title}
           {selectedValues && selectedValues?.length > 0 && (
             <>

package/src/modules/data-tables/components/filters/toggle.client.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ToggleLeft } from "lucide-react";
+import { type SingleParserBuilder, useQueryState } from "nuqs";
+import { startTransition } from "react";
+import { Toggle } from "@/components/ui/toggle.client";
+
+export type TableFilterToggleProps = {
+  title?: string;
+  filter: { name: string; parser: SingleParserBuilder<boolean | null> };
+};
+
+export function TableFilterToggle({ title, filter }: TableFilterToggleProps) {
+  const [query, setQuery] = useQueryState(filter.name, filter.parser);
+
+  return (
+    <Toggle
+      variant="outline"
+      size="sm"
+      className="h-8 border-border border-dashed bg-background data-[state=on]:border-primary data-[state=on]:border-solid data-[state=on]:bg-primary data-[state=on]:text-primary-foreground dark:border-input dark:bg-input/30"
+      pressed={query === true}
+      onPressedChange={(pressed) =>
+        startTransition(() => {
+          setQuery(pressed ? true : null);
+        })
+      }
+    >
+      <ToggleLeft className="mr-2 h-4 w-4" />
+      {title}
+    </Toggle>
+  );
+}

package/src/modules/data-tables/components/footer.tsx

@@ -8,7 +8,7 @@ import { PaginationTableFooter } from "../strategies/pagination/components";
 /**
  * Table bottombar
  */
-export function TableFooter<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+export function TableFooter<TData>({ table }: { table: Table<TData> }) {
   const meta = table.options.meta as TableMeta<TData>;
 
   if (meta.strategy.name === "pagination") {
@@ -25,7 +25,7 @@ export function TableFooter<TData extends { id: string }>({ table }: { table: Ta
 /**
  * Table bottombar
  */
-export function TableBottombar<TData extends { id: string }>({ table }: { table: Table<TData> }) {
+export function TableBottombar<TData>({ table }: { table: Table<TData> }) {
   const meta = table.options.meta as TableMeta<TData>;
 
   if (meta.strategy.name === "pagination") {

package/src/modules/data-tables/entry.client.ts

@@ -5,7 +5,10 @@ export * from "./components/cell/common.client";
 export * from "./components/cell/index.client";
 export * from "./components/cell/select.client";
 export * from "./components/filters/combobox.client";
+export * from "./components/filters/date-range.client";
+export * from "./components/filters/search.client";
 export * from "./components/filters/slider.client";
+export * from "./components/filters/toggle.client";
 export * from "./components/search-input.client";
 /**
  * Hooks

package/src/modules/data-tables/entry.server.ts

@@ -1,9 +1,9 @@
 /**
  * Lib
  */
-export * from "./lib/converters/cursor";
 export * from "./lib/converters/dto";
-export * from "./lib/converters/filter";
+export * from "./lib/converters/filters";
+export * from "./lib/converters/pagination";
 export * from "./lib/converters/search";
 export * from "./lib/converters/sorting";