@tulip-systems/core 0.8.2 → 0.9.0

package/src/modules/inline/components/inputs/input.client.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import type { DefaultError } from "@tanstack/react-query";
+import type { ComponentProps } from "react";
+import type { z } from "zod";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils/cn";
+import { useInlineState } from "../../hooks/inline-state.client";
+import {
+  useInlineAccess,
+  type useInlineEditOptions,
+  useInlineMutation,
+  useInlineStrategy,
+} from "../../hooks/use-inline.client";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../../lib/variants";
+
+type InputInlineTrigger = "change" | "blur";
+
+type InlineEditInputProps<
+  TSchema extends z.ZodType,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = Omit<ComponentProps<typeof Input>, "type"> &
+  useInlineEditOptions<InputInlineTrigger, TSchema, TData, TError, TVariables, TOnMutateResult> &
+  InlineEditVariantsProps;
+
+/**
+ * The inline edit string input component.
+ */
+export function InlineStringInput<
+  TSchema extends z.ZodType<string | null, string | null>,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  variant,
+  className,
+  permission,
+  strategy,
+  disabled,
+  ...props
+}: InlineEditInputProps<TSchema, TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<string | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    TSchema,
+    string | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<InputInlineTrigger, TSchema, string | null>({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value as z.input<TSchema>,
+    },
+  });
+
+  return (
+    <Input
+      {...props}
+      data-inline-input="string"
+      type="text"
+      value={state.value ?? ""}
+      disabled={access.isDisabled}
+      aria-invalid={state.isInvalid}
+      onChange={(e) => handleTrigger("change", e.target.value ? e.target.value : null)}
+      onBlur={(e) => handleTrigger("blur", e.target.value ? e.target.value : null)}
+      className={cn(
+        "w-full border-border/70 hover:border-border",
+        inlineEditVariants({ variant, status: state.status }),
+        className,
+      )}
+    />
+  );
+}
+
+/**
+ * The inline edit number input component.
+ */
+const parseValueAsNumber = (valueAsNumber: number): number | null =>
+  !Number.isNaN(Number(valueAsNumber)) ? valueAsNumber : null;
+
+export function InlineNumberInput<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  variant,
+  className,
+  permission,
+  strategy,
+  disabled,
+  ...props
+}: InlineEditInputProps<
+  z.ZodNumber | z.ZodNullable<z.ZodNumber>,
+  TData,
+  TError,
+  TVariables,
+  TOnMutateResult
+>) {
+  const state = useInlineState<number | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    z.ZodNumber | z.ZodNullable<z.ZodNumber>,
+    number | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    InputInlineTrigger,
+    z.ZodNumber | z.ZodNullable<z.ZodNumber>,
+    number | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
+  });
+
+  return (
+    <Input
+      {...props}
+      data-inline-input="number"
+      type="number"
+      value={state.value ?? ""}
+      disabled={access.isDisabled}
+      aria-invalid={state.isInvalid}
+      onChange={(e) => handleTrigger("change", parseValueAsNumber(e.target.valueAsNumber))}
+      onBlur={(e) => handleTrigger("blur", parseValueAsNumber(e.target.valueAsNumber))}
+      className={cn(
+        "w-full border-border/70 hover:border-border",
+        inlineEditVariants({ variant, status: state.status }),
+        className,
+      )}
+    />
+  );
+}
+
+/**
+ * The inline edit decimal input component.
+ */
+export function InlineDecimalInput<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  variant,
+  className,
+  permission,
+  strategy,
+  disabled,
+  ...props
+}: InlineEditInputProps<
+  z.ZodString | z.ZodNullable<z.ZodString>,
+  TData,
+  TError,
+  TVariables,
+  TOnMutateResult
+>) {
+  const state = useInlineState<string | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    z.ZodString | z.ZodNullable<z.ZodString>,
+    string | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    InputInlineTrigger,
+    z.ZodString | z.ZodNullable<z.ZodString>,
+    string | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
+  });
+
+  return (
+    <Input
+      {...props}
+      data-inline-input="decimal"
+      type="text"
+      inputMode="decimal"
+      value={state.value ?? ""}
+      disabled={access.isDisabled}
+      aria-invalid={state.isInvalid}
+      onChange={(e) => handleTrigger("change", e.target.value ? e.target.value : null)}
+      onBlur={(e) => handleTrigger("blur", e.target.value ? e.target.value : null)}
+      className={cn(
+        "w-full border-border/70 hover:border-border",
+        inlineEditVariants({ variant, status: state.status }),
+        className,
+      )}
+    />
+  );
+}

package/src/modules/inline/components/inputs/select.client.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import type { DefaultError } from "@tanstack/react-query";
+import type { ComponentProps } from "react";
+import type { z } from "zod";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select.client";
+import { useIndicator } from "@/lib/entry.client";
+import { cn } from "@/lib/utils/cn";
+import { useInlineState } from "../../hooks/inline-state.client";
+import {
+  useInlineAccess,
+  type useInlineEditOptions,
+  useInlineMutation,
+  useInlineStrategy,
+} from "../../hooks/use-inline.client";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../../lib/variants";
+
+type SelectInlineTrigger = "commit";
+
+type InlineSelectProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = Omit<ComponentProps<typeof Select>, "value" | "defaultValue"> &
+  useInlineEditOptions<
+    SelectInlineTrigger,
+    z.ZodString | z.ZodNullable<z.ZodString>,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >;
+
+export function InlineSelect<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  permission,
+  strategy,
+  disabled,
+  onValueChange,
+  ...props
+}: InlineSelectProps<TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<string | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    z.ZodString | z.ZodNullable<z.ZodString>,
+    string | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    SelectInlineTrigger,
+    z.ZodString | z.ZodNullable<z.ZodString>,
+    string | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
+  });
+
+  return (
+    <Select
+      {...props}
+      disabled={access.isDisabled}
+      value={state.value ?? undefined}
+      onValueChange={(nextValue) => {
+        const parsed = nextValue ? nextValue : null;
+        handleTrigger("commit", parsed);
+        onValueChange?.(nextValue);
+      }}
+    />
+  );
+}
+
+export function InlineSelectTrigger({
+  variant,
+  className,
+  ...props
+}: ComponentProps<typeof SelectTrigger> & InlineEditVariantsProps) {
+  const { status } = useIndicator();
+
+  return (
+    <SelectTrigger
+      {...props}
+      data-inline-input="select"
+      className={cn(inlineEditVariants({ variant, status }), className)}
+    />
+  );
+}
+
+export function InlineSelectContent(props: ComponentProps<typeof SelectContent>) {
+  return <SelectContent {...props} />;
+}
+
+export function InlineSelectValue(props: ComponentProps<typeof SelectValue>) {
+  return <SelectValue {...props} />;
+}
+
+export function InlineSelectItem(props: ComponentProps<typeof SelectItem>) {
+  return <SelectItem {...props} />;
+}

package/src/modules/inline/components/inputs/switch.client.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import type { DefaultError } from "@tanstack/react-query";
+import type { ComponentProps } from "react";
+import type { z } from "zod";
+import { Switch } from "@/components/ui/switch.client";
+import { useInlineState } from "../../hooks/inline-state.client";
+import {
+  useInlineAccess,
+  type useInlineEditOptions,
+  useInlineMutation,
+  useInlineStrategy,
+} from "../../hooks/use-inline.client";
+
+type SwitchInlineTrigger = "commit";
+
+type InlineSwitchProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = ComponentProps<typeof Switch> &
+  useInlineEditOptions<
+    SwitchInlineTrigger,
+    z.ZodBoolean | z.ZodNullable<z.ZodBoolean>,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >;
+
+export function InlineSwitch<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  permission,
+  strategy,
+  disabled,
+  ...props
+}: InlineSwitchProps<TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<boolean | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    z.ZodBoolean | z.ZodNullable<z.ZodBoolean>,
+    boolean | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    SwitchInlineTrigger,
+    z.ZodBoolean | z.ZodNullable<z.ZodBoolean>,
+    boolean | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
+  });
+
+  return (
+    <Switch
+      {...props}
+      data-inline-input="switch"
+      aria-invalid={state.isInvalid}
+      disabled={access.isDisabled}
+      checked={Boolean(state.value)}
+      onCheckedChange={(checked) => {
+        handleTrigger("commit", checked ?? null);
+      }}
+    />
+  );
+}

package/src/modules/inline/components/inputs/toggle.client.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import type { DefaultError } from "@tanstack/react-query";
+import type { ComponentProps } from "react";
+import type { z } from "zod";
+import { Toggle } from "@/components/ui/toggle.client";
+import { cn } from "@/lib/utils/cn";
+import { useInlineState } from "../../hooks/inline-state.client";
+import {
+  useInlineAccess,
+  type useInlineEditOptions,
+  useInlineMutation,
+  useInlineStrategy,
+} from "../../hooks/use-inline.client";
+
+type ToggleInlineTrigger = "commit";
+
+export type InlineToggleProps<
+  TSchema extends z.ZodType<boolean | null, boolean | null> = z.ZodType<
+    boolean | null,
+    boolean | null
+  >,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = Omit<ComponentProps<typeof Toggle>, "pressed" | "defaultPressed"> &
+  useInlineEditOptions<ToggleInlineTrigger, TSchema, TData, TError, TVariables, TOnMutateResult>;
+
+export function InlineToggle<
+  TSchema extends z.ZodType<boolean | null, boolean | null> = z.ZodType<
+    boolean | null,
+    boolean | null
+  >,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  children,
+  permission,
+  disabled,
+  strategy,
+  className,
+  onPressedChange,
+  ...props
+}: InlineToggleProps<TSchema, TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<boolean | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    TSchema,
+    boolean | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<ToggleInlineTrigger, TSchema, boolean | null>({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value as boolean | null,
+      encode: (value) => value as z.input<TSchema>,
+    },
+  });
+
+  return (
+    <Toggle
+      {...props}
+      data-inline-input="toggle"
+      className={cn("flex flex-wrap items-center justify-start gap-1", className)}
+      aria-invalid={state.isInvalid}
+      disabled={access.isDisabled}
+      variant="outline"
+      pressed={Boolean(state.value)}
+      onPressedChange={(nextValue) => {
+        handleTrigger("commit", nextValue);
+        onPressedChange?.(nextValue);
+      }}
+    >
+      {children}
+    </Toggle>
+  );
+}

package/src/modules/inline/entry.client.ts

@@ -0,0 +1,23 @@
+/**
+ * Components
+ */
+
+export * from "./components/cell.client";
+export * from "./components/field.client";
+export * from "./components/inputs/combobox.client";
+export * from "./components/inputs/combobox-dropdown.client";
+export * from "./components/inputs/date.client";
+export * from "./components/inputs/date-time.client";
+export * from "./components/inputs/editor.client";
+export * from "./components/inputs/input.client";
+export * from "./components/inputs/input-recipient.client";
+export * from "./components/inputs/select.client";
+export * from "./components/inputs/switch.client";
+export * from "./components/inputs/toggle.client";
+
+/**
+ * Hooks
+ */
+export * from "./hooks/inline-provider";
+export * from "./hooks/inline-state.client";
+export * from "./hooks/use-inline.client";

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 };
+}