@tulip-systems/core 0.8.3 → 0.10.0

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

@@ -0,0 +1,97 @@
+"use client";
+
+import type { DefaultError } from "@tanstack/react-query";
+import type { ComponentProps } from "react";
+import type { z } from "zod";
+import { type Contact, RecipientInput } from "@/components/ui/input-recipient";
+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 RecipientInlineTrigger = "commit";
+
+type InlineRecipientInputProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = Omit<ComponentProps<typeof RecipientInput>, "value" | "onChange"> &
+  useInlineEditOptions<
+    RecipientInlineTrigger,
+    z.ZodArray<z.ZodString>,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  > &
+  InlineEditVariantsProps & {
+    contacts: Contact[];
+  };
+
+export function InlineRecipientInput<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  variant,
+  disabled,
+  contacts,
+  permission,
+  strategy,
+  className,
+  ...props
+}: InlineRecipientInputProps<TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<string[]>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    z.ZodArray<z.ZodString>,
+    string[],
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    RecipientInlineTrigger,
+    z.ZodArray<z.ZodString>,
+    string[]
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (recipientValue) => recipientValue,
+      encode: (recipientValue) => recipientValue,
+    },
+  });
+
+  return (
+    <RecipientInput
+      {...props}
+      data-inline-input="recipient"
+      contacts={contacts}
+      value={state.value ?? []}
+      onChange={(newValue) => {
+        handleTrigger("commit", newValue);
+      }}
+      disabled={access.isDisabled}
+      className={cn(inlineEditVariants({ variant, status: state.status }), className)}
+    />
+  );
+}

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

@@ -0,0 +1,256 @@
+"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 InlineStringSchema =
+  | z.ZodType<string | null, string | null>
+  | z.ZodType<string, string>;
+
+type InlineNumberSchema =
+  | z.ZodType<number | null, number | null>
+  | z.ZodType<number, number>;
+
+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 InlineStringSchema = 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<
+  TSchema extends InlineNumberSchema = z.ZodType<number | null, number | 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<number | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    TSchema,
+    number | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    InputInlineTrigger,
+    TSchema,
+    number | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value as z.input<TSchema>,
+    },
+  });
+
+  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<
+  TSchema extends
+    | z.ZodType<string | null, string | null>
+    | z.ZodType<string, string> = 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="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,132 @@
+"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 InlineStringSchema =
+  | z.ZodType<string | null, string | null>
+  | z.ZodType<string, string>;
+
+type InlineSelectProps<
+  TSchema extends InlineStringSchema = z.ZodType<string | null, string | null>,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = Omit<ComponentProps<typeof Select>, "value" | "defaultValue"> &
+  useInlineEditOptions<
+    SelectInlineTrigger,
+    TSchema,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >;
+
+export function InlineSelect<
+  TSchema extends InlineStringSchema = z.ZodType<string | null, string | null>,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  permission,
+  strategy,
+  disabled,
+  onValueChange,
+  ...props
+}: InlineSelectProps<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<
+    SelectInlineTrigger,
+    TSchema,
+    string | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value as z.input<TSchema>,
+    },
+  });
+
+  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,94 @@
+"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 InlineBooleanSchema =
+  | z.ZodType<boolean | null, boolean | null>
+  | z.ZodType<boolean, boolean>;
+
+type InlineSwitchProps<
+  TSchema extends InlineBooleanSchema = z.ZodType<boolean | null, boolean | null>,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = ComponentProps<typeof Switch> &
+  useInlineEditOptions<
+    SwitchInlineTrigger,
+    TSchema,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >;
+
+export function InlineSwitch<
+  TSchema extends InlineBooleanSchema = z.ZodType<boolean | null, boolean | null>,
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  permission,
+  strategy,
+  disabled,
+  ...props
+}: InlineSwitchProps<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<
+    SwitchInlineTrigger,
+    TSchema,
+    boolean | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value as z.input<TSchema>,
+    },
+  });
+
+  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";