@tulip-systems/core 0.8.3 → 0.10.0

package/src/modules/inline/hooks/inline-provider.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import type React from "react";
+import { createContext, useContext } from "react";
+import type { Permission } from "@/modules/auth/lib/permissions";
+
+/**
+ * Shared inline config for a subtree.
+ */
+export type InlineProviderContextParams = {
+  permission?: Permission;
+  disabled?: boolean;
+};
+
+export const InlineProviderContext = createContext<InlineProviderContextParams>({});
+
+/**
+ * Inline Provider
+ */
+export function useInlineProviderContext() {
+  return useContext(InlineProviderContext);
+}
+
+/**
+ * Shared inline config provider.
+ */
+export function InlineProvider({
+  children,
+  ...value
+}: InlineProviderContextParams & { children: React.ReactNode }) {
+  return <InlineProviderContext.Provider value={value}>{children}</InlineProviderContext.Provider>;
+}

package/src/modules/inline/hooks/inline-state.client.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { Dispatch, SetStateAction } from "react";
+import { createContext, use, useState } from "react";
+import type { IndicatorStatus } from "@/lib/hooks/use-indicator";
+
+/**
+ * Shared inline runtime state (status + validation error)
+ */
+export type InlineStateContextType = {
+  status: IndicatorStatus;
+  setStatus: Dispatch<SetStateAction<IndicatorStatus>>;
+
+  error: string | undefined;
+  setError: Dispatch<SetStateAction<string | undefined>>;
+};
+
+export const InlineStateContext = createContext<InlineStateContextType | undefined>(undefined);
+
+/**
+ * Inline State Hook
+ */
+export function useInlineState<TValue = never>(initialValue?: TValue) {
+  const context = use(InlineStateContext);
+  if (!context) {
+    throw new Error("useInlineState must be used within an InlineStateContext.Provider");
+  }
+
+  const [value, setValue] = useState<TValue | undefined>(initialValue);
+  const isInvalid = context.status === "error" || Boolean(context.error);
+
+  return { ...context, initialValue, value, setValue, isInvalid };
+}

package/src/modules/inline/hooks/use-inline.client.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import type { z } from "zod";
+import { useAction } from "@/lib/hooks/use-action";
+import { usePermission } from "@/modules/auth/hooks/use-permission";
+import type { Permission } from "@/modules/auth/lib/permissions";
+import { useInlineProviderContext } from "./inline-provider";
+import type { useInlineState } from "./inline-state.client";
+
+export type InlineTrigger = "change" | "blur" | "commit";
+
+type MutationConfig<TAllowedTrigger extends InlineTrigger> = {
+  on: TAllowedTrigger;
+  debounceMs?: number;
+};
+
+export type InlineStrategy<TSchema extends z.ZodType, TAllowedTrigger extends InlineTrigger> = {
+  validate?: Partial<Record<TAllowedTrigger, TSchema>>;
+  mutate: MutationConfig<TAllowedTrigger>;
+};
+
+/**
+ * Use the inline edit hook options.
+ */
+export type useInlineEditOptions<
+  TAllowedTrigger extends InlineTrigger,
+  TSchema extends z.ZodType,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = {
+  /**
+   * Initial value
+   */
+  initialValue?: z.input<TSchema>;
+  /**
+   * Transform validated schema value to mutation variables
+   */
+  variables?: (value: z.output<TSchema>) => TVariables;
+  /**
+   * Mutation options to execute on update
+   */
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  /**
+   * Permission required to edit
+   */
+  permission?: Permission;
+  /**
+   * Disable inline editing
+   */
+  disabled?: boolean;
+  /**
+   * Trigger-based strategy
+   */
+  strategy: InlineStrategy<TSchema, TAllowedTrigger>;
+};
+
+/**
+ * Inline edit hook props
+ */
+export type UseInlineEditProps<
+  TAllowedTrigger extends InlineTrigger,
+  TSchema extends z.ZodType,
+  TValue,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = useInlineEditOptions<TAllowedTrigger, TSchema, TData, TError, TVariables, TOnMutateResult> & {
+  parser: {
+    /**
+     * Transform the value from the result type to the value type
+     */
+    decode: (value: z.input<TSchema>) => TValue;
+    /**
+     * Transform the value from the value type to the result type
+     */
+    encode: (value: TValue) => z.input<TSchema>;
+  };
+};
+
+/**
+ * Resolves access and disabled state for inline editing.
+ *
+ * Responsibilities:
+ * - Merge local `permission`/`disabled` with provider-level config
+ * - Evaluate authorization via `usePermission`
+ * - Return `isAllowed` and final `isDisabled`
+ */
+export type UseInlineAccessProps = {
+  permission?: Permission;
+  disabled?: boolean;
+};
+
+export function useInlineAccess({ permission, disabled }: UseInlineAccessProps) {
+  const providerContext = useInlineProviderContext();
+  const permissionResult = usePermission({
+    permission: permission ?? providerContext.permission,
+  });
+
+  const isAllowed = permissionResult?.success;
+  const isDisabled = Boolean(providerContext.disabled || disabled || !isAllowed);
+
+  return {
+    isAllowed,
+    isDisabled,
+  };
+}
+
+/**
+ * Encapsulates mutation lifecycle and side effects.
+ *
+ * Responsibilities:
+ * - Execute mutation with status transitions (`pending/success/error`)
+ * - Reset value on error to `initialValue`
+ * - Apply permission/disabled guards before mutating
+ * - Provide debounced and immediate mutation entry points
+ */
+export type UseInlineMutationProps<
+  TSchema extends z.ZodType,
+  TValue,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = {
+  variables?: (value: z.output<TSchema>) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  state: ReturnType<typeof useInlineState<TValue>>;
+  access: ReturnType<typeof useInlineAccess>;
+};
+
+export function useInlineMutation<
+  TSchema extends z.ZodType,
+  TValue,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  state,
+  access,
+}: UseInlineMutationProps<TSchema, TValue, TData, TError, TVariables, TOnMutateResult>) {
+  /**
+   * Wraps the mutation with status management and error handling.
+   * - Sets status to "pending" on mutate
+   * - On success, sets status to "success" and clears errors
+   * - On error, resets value to initial and sets status to "error"
+   */
+  const action = useAction<TData, TError, TVariables, TOnMutateResult>({
+    ...mutation,
+    onMutate: async (...params) => {
+      state.setStatus("pending");
+      return (await mutation.onMutate?.(...params)) as TOnMutateResult;
+    },
+    onSuccess: async (...params) => {
+      state.setStatus("success");
+      state.setError(undefined);
+      return await mutation.onSuccess?.(...params);
+    },
+    onError: async (...params) => {
+      state.setValue(state.initialValue);
+      state.setStatus("error");
+      return await mutation.onError?.(...params);
+    },
+  });
+
+  /**
+   * Immediate mutation function that checks permissions and disabled state before executing.
+   */
+  const mutate = useCallback(
+    (input: z.output<TSchema>) => {
+      if (!access.isAllowed) {
+        state.setStatus("error");
+        state.setError("Je hebt geen toestemming om dit te bewerken");
+        return;
+      }
+
+      if (access.isDisabled) return;
+
+      const nextVariables = variables ? variables(input) : (input as unknown as TVariables);
+      return action.mutate(nextVariables);
+    },
+    [action, access.isAllowed, access.isDisabled, state.setError, state.setStatus, variables],
+  );
+
+  return { mutate };
+}
+
+/**
+ * Handles trigger-driven validation and mutation orchestration.
+ *
+ * Responsibilities:
+ * - Validate by trigger (`change/blur/commit`) using provided strategy
+ * - Encode input through parser before validation
+ * - Update local value immediately on trigger
+ * - Mutate only when trigger matches `strategy.mutate.on`
+ */
+export type UseInlineStrategyProps<
+  TAllowedTrigger extends InlineTrigger,
+  TSchema extends z.ZodType,
+  TValue,
+> = {
+  strategy: InlineStrategy<TSchema, TAllowedTrigger>;
+
+  parser: {
+    /**
+     * Transform the value from the result type to the value type
+     */
+    decode: (value: z.input<TSchema>) => TValue;
+    /**
+     * Transform the value from the value type to the result type
+     */
+    encode: (value: TValue) => z.input<TSchema>;
+  };
+  state: ReturnType<typeof useInlineState<TValue>>;
+  mutations: ReturnType<typeof useInlineMutation<TSchema, TValue>>;
+};
+
+export function useInlineStrategy<
+  TAllowedTrigger extends InlineTrigger,
+  TSchema extends z.ZodType,
+  TValue,
+>({
+  strategy,
+  state,
+  mutations,
+  parser,
+}: UseInlineStrategyProps<TAllowedTrigger, TSchema, TValue>) {
+  /**
+   * Debounced mutation function that wraps `mutateInstant` with a debounce.
+   */
+  const mutateDebounced = useDebouncedCallback(mutations.mutate, strategy.mutate.debounceMs ?? 0);
+
+  /**
+   * Main mutation function that checks if debounce is configured and calls the appropriate mutate function.
+   */
+  const mutate = useCallback(
+    (input: z.output<TSchema>) =>
+      strategy.mutate.debounceMs ? mutateDebounced(input) : mutations.mutate(input),
+    [mutateDebounced, mutations, strategy.mutate.debounceMs],
+  );
+
+  /**
+   * Validate the input based on the trigger and strategy configuration.
+   */
+  const validate = useCallback(
+    <TValidator extends z.ZodType>(params: {
+      validator?: TValidator;
+      input: TValue | null;
+    }): { success: true; data: z.output<TValidator> } | { success: false } => {
+      const encodedValue = params.input !== null ? parser.encode(params.input) : null;
+
+      if (!params.validator) {
+        state.setError(undefined);
+        state.setStatus((currentStatus) => (currentStatus === "error" ? "idle" : currentStatus));
+        return { success: true, data: encodedValue as z.output<TValidator> };
+      }
+
+      const result = params.validator.safeParse(encodedValue);
+      if (result.success) {
+        state.setError(undefined);
+        state.setStatus((currentStatus) => (currentStatus === "error" ? "idle" : currentStatus));
+        return { success: true, data: result.data };
+      }
+
+      const message = result.error.issues[0]?.message ?? "De ingevoerde waarde is ongeldig";
+      state.setStatus("error");
+      state.setError(message);
+      return { success: false };
+    },
+    [parser, state.setError, state.setStatus],
+  );
+
+  /**
+   * Handles the trigger event by validating the input and mutating if valid and trigger matches strategy.
+   */
+  const handleTrigger = useCallback(
+    (trigger: TAllowedTrigger, input: TValue | null) => {
+      state.setValue(input ?? undefined);
+
+      const validator = strategy.validate?.[trigger] as z.ZodType | undefined;
+      const result = validate({ validator, input });
+
+      if (!result.success || strategy.mutate.on !== trigger) return;
+      mutate(result.data as z.output<TSchema>);
+    },
+    [mutate, state.setValue, strategy, validate],
+  );
+
+  return { validate, handleTrigger };
+}

package/src/modules/router/entry.ts

@@ -1,4 +1,5 @@
 /**
  * Lib
  */
+export * from "./lib/query-client";
 export * from "./lib/validators";

package/src/modules/router/lib/query-client.ts

@@ -1,4 +1,4 @@
-import { isServer, MutationCache, QueryClient } from "@tanstack/react-query";
+import { environmentManager, MutationCache, QueryClient } from "@tanstack/react-query";
 import { serializer } from "./helpers";
 
 /**
@@ -47,7 +47,7 @@ export function createQueryClient() {
 let browserQueryClient: QueryClient;
 
 export function getQueryClient() {
-  if (isServer) {
+  if (environmentManager.isServer()) {
     // Server: always make a new query client
     return createQueryClient();
   }

package/src/styles.css

@@ -190,3 +190,94 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* ejected from shadcn */
+@theme inline {
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height, var(--accordion-panel-height, auto));
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/* Custom variants */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/dist/inline-edit/client.d.mts

@@ -1,15 +0,0 @@
-import { UseInlineEditProps, useInlineEdit, useInlineEditOptions } from "../modules/inline-edit/hooks/use-inline.client.mjs";
-import { InlineCombobox, InlineComboboxProps } from "../modules/inline-edit/components/combobox.client.mjs";
-import { InlineComboboxDropdown, InlineEditComboboxDropdownProps } from "../modules/inline-edit/components/combobox-dropdown.client.mjs";
-import { InlineDateInput } from "../modules/inline-edit/components/date-input.client.mjs";
-import { InlineDatePicker } from "../modules/inline-edit/components/date-picker.client.mjs";
-import { InlineDateTimeInput } from "../modules/inline-edit/components/date-time.client.mjs";
-import { InlineEditor, InlineEditorProps } from "../modules/inline-edit/components/editor.client.mjs";
-import { InlineDecimalInput, InlineNumberInput, InlineStringInput } from "../modules/inline-edit/components/input.client.mjs";
-import { InlineRecipientInput } from "../modules/inline-edit/components/input-recipient.client.mjs";
-import { InlineStringInputToggle } from "../modules/inline-edit/components/input-toggle.client.mjs";
-import { InlineSelect, InlineSelectContent, InlineSelectItem, InlineSelectTrigger, InlineSelectValue } from "../modules/inline-edit/components/select.client.mjs";
-import { InlineSwitch } from "../modules/inline-edit/components/switch.client.mjs";
-import { InlineEditToggleProps, InlineToggle } from "../modules/inline-edit/components/toggle.client.mjs";
-import { InlineEditContextParams, InlineEditProvider, useInlineEditContext } from "../modules/inline-edit/hooks/context.client.mjs";
-export { InlineCombobox, InlineComboboxDropdown, InlineComboboxProps, InlineDateInput, InlineDatePicker, InlineDateTimeInput, InlineDecimalInput, InlineEditComboboxDropdownProps, InlineEditContextParams, InlineEditProvider, InlineEditToggleProps, InlineEditor, InlineEditorProps, InlineNumberInput, InlineRecipientInput, InlineSelect, InlineSelectContent, InlineSelectItem, InlineSelectTrigger, InlineSelectValue, InlineStringInput, InlineStringInputToggle, InlineSwitch, InlineToggle, UseInlineEditProps, useInlineEdit, useInlineEditContext, useInlineEditOptions };

package/dist/inline-edit/client.mjs

@@ -1,16 +0,0 @@
-import { InlineEditProvider, useInlineEditContext } from "../modules/inline-edit/hooks/context.client.mjs";
-import { useInlineEdit } from "../modules/inline-edit/hooks/use-inline.client.mjs";
-import { InlineCombobox } from "../modules/inline-edit/components/combobox.client.mjs";
-import { InlineComboboxDropdown } from "../modules/inline-edit/components/combobox-dropdown.client.mjs";
-import { InlineDateInput } from "../modules/inline-edit/components/date-input.client.mjs";
-import { InlineDatePicker } from "../modules/inline-edit/components/date-picker.client.mjs";
-import { InlineDateTimeInput } from "../modules/inline-edit/components/date-time.client.mjs";
-import { InlineEditor } from "../modules/inline-edit/components/editor.client.mjs";
-import { InlineDecimalInput, InlineNumberInput, InlineStringInput } from "../modules/inline-edit/components/input.client.mjs";
-import { InlineRecipientInput } from "../modules/inline-edit/components/input-recipient.client.mjs";
-import { InlineStringInputToggle } from "../modules/inline-edit/components/input-toggle.client.mjs";
-import { InlineSelect, InlineSelectContent, InlineSelectItem, InlineSelectTrigger, InlineSelectValue } from "../modules/inline-edit/components/select.client.mjs";
-import { InlineSwitch } from "../modules/inline-edit/components/switch.client.mjs";
-import { InlineToggle } from "../modules/inline-edit/components/toggle.client.mjs";
-
-export { InlineCombobox, InlineComboboxDropdown, InlineDateInput, InlineDatePicker, InlineDateTimeInput, InlineDecimalInput, InlineEditProvider, InlineEditor, InlineNumberInput, InlineRecipientInput, InlineSelect, InlineSelectContent, InlineSelectItem, InlineSelectTrigger, InlineSelectValue, InlineStringInput, InlineStringInputToggle, InlineSwitch, InlineToggle, useInlineEdit, useInlineEditContext };

package/dist/modules/commands/components/click-command.client.mjs

@@ -1,63 +0,0 @@
-"use client";
-
-import { Button } from "../../../components/ui/button.mjs";
-import { ContextMenuItem } from "../../../components/ui/context-menu.client.mjs";
-import { DropdownMenuItem } from "../../../components/ui/dropdown-menu.client.mjs";
-import { useCommand } from "../hooks/context.client.mjs";
-import { useCommandMutation } from "../hooks/use-command-mutation.client.mjs";
-import { CommandTrigger } from "./command-trigger.client.mjs";
-import { jsx } from "react/jsx-runtime";
-import { useHotkeys } from "react-hotkeys-hook";
-
-//#region src/modules/commands/components/click-command.client.tsx
-function CommandClick({ children, variables, mutation, label, hotkey, disabled, ...props }) {
-	const { menu, status } = useCommand();
-	const { mutate } = useCommandMutation(mutation);
-	const isDisabled = disabled || status === "pending";
-	const handleClick = () => mutate(variables);
-	useHotkeys(hotkey ?? "", () => handleClick(), { enabled: !isDisabled && hotkey !== void 0 });
-	if (menu === "inline") return /* @__PURE__ */ jsx(CommandTrigger, {
-		label,
-		children: /* @__PURE__ */ jsx(Button, {
-			...props,
-			variant: "outline",
-			size: "sm",
-			disabled: isDisabled,
-			onClick: handleClick,
-			children
-		})
-	});
-	if (menu === "dropdown") return /* @__PURE__ */ jsx(CommandTrigger, {
-		label,
-		children: /* @__PURE__ */ jsx(DropdownMenuItem, {
-			...props,
-			disabled: isDisabled,
-			onClick: handleClick,
-			children
-		})
-	});
-	if (menu === "context") return /* @__PURE__ */ jsx(CommandTrigger, {
-		label,
-		children: /* @__PURE__ */ jsx(ContextMenuItem, {
-			...props,
-			disabled: isDisabled,
-			onClick: handleClick,
-			children
-		})
-	});
-	if (menu === "table") return /* @__PURE__ */ jsx(CommandTrigger, {
-		label,
-		children: /* @__PURE__ */ jsx(Button, {
-			...props,
-			variant: "outline",
-			size: "sm",
-			disabled: isDisabled,
-			onClick: handleClick,
-			children
-		})
-	});
-	return null;
-}
-
-//#endregion
-export { CommandClick };

package/dist/modules/commands/components/command-trigger.client.d.mts

@@ -1,33 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as react from "react";
-import { PropsWithChildren } from "react";
-
-//#region src/modules/commands/components/command-trigger.client.d.ts
-/**
- * Command trigger context
- */
-type CommandTriggerContextValue = {
-  label?: string;
-};
-declare const CommandTriggerContext: react.Context<CommandTriggerContextValue>;
-/**
- * Command trigger
- */
-declare function CommandTrigger({
-  label,
-  children
-}: PropsWithChildren<{
-  label?: string;
-}>): react_jsx_runtime0.JSX.Element;
-/**
- * Command label
- */
-declare function CommandLabel(): react_jsx_runtime0.JSX.Element | null;
-/**
- * Command icon
- */
-declare function CommandIcon({
-  children
-}: PropsWithChildren): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { CommandIcon, CommandLabel, CommandTrigger, CommandTriggerContext };

package/dist/modules/commands/components/command-trigger.client.mjs

@@ -1,49 +0,0 @@
-"use client";
-
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../components/ui/tooltip.client.mjs";
-import { useCommand } from "../hooks/context.client.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-
-//#region src/modules/commands/components/command-trigger.client.tsx
-const CommandTriggerContext = createContext({});
-/**
-* Command trigger
-*/
-function CommandTrigger({ label, children }) {
-	const { menu } = useCommand();
-	const showLabel = label && menu !== "dropdown" && menu !== "context";
-	return /* @__PURE__ */ jsx(CommandTriggerContext.Provider, {
-		value: { label },
-		children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-			asChild: true,
-			children
-		}), showLabel && /* @__PURE__ */ jsx(TooltipContent, { children: label })] }) })
-	});
-}
-/**
-* Command label
-*/
-function CommandLabel() {
-	const { label } = useContext(CommandTriggerContext);
-	const { menu } = useCommand();
-	if (!(label && (menu === "dropdown" || menu === "context"))) return null;
-	return /* @__PURE__ */ jsx("span", {
-		className: "ml-3",
-		children: label
-	});
-}
-/**
-* Command icon
-*/
-function CommandIcon({ children }) {
-	const { label } = useContext(CommandTriggerContext);
-	const { menu } = useCommand();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [children, label && (menu === "dropdown" || menu === "context") && /* @__PURE__ */ jsx("span", {
-		className: "ml-3",
-		children: label
-	})] });
-}
-
-//#endregion
-export { CommandIcon, CommandLabel, CommandTrigger, CommandTriggerContext };