@tulip-systems/core 0.8.2 → 0.9.0

package/src/modules/inline/components/inputs/date-time.client.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import type { DefaultError } from "@tanstack/react-query";
+import { format } from "date-fns";
+import type { ComponentProps } from "react";
+import type { z } from "zod";
+import { DateTimeInput } from "@/components/ui/input-date-time.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 DateTimeInlineTrigger = "change" | "blur";
+
+type InlineDateTimeInputProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = ComponentProps<typeof DateTimeInput> &
+  useInlineEditOptions<
+    DateTimeInlineTrigger,
+    z.ZodDate | z.ZodNullable<z.ZodDate>,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  > &
+  InlineEditVariantsProps;
+
+export function InlineDateTimeInput<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  permission,
+  variant,
+  className,
+  strategy,
+  disabled,
+  ...props
+}: InlineDateTimeInputProps<TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<string>(
+    initialValue ? format(initialValue, "yyyy-MM-dd'T'HH:mm") : "",
+  );
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    z.ZodDate | z.ZodNullable<z.ZodDate>,
+    string,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    DateTimeInlineTrigger,
+    z.ZodDate | z.ZodNullable<z.ZodDate>,
+    string
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (date) => (date ? format(date, "yyyy-MM-dd'T'HH:mm") : ""),
+      encode: (dateTime) => (dateTime ? new Date(dateTime) : null),
+    },
+  });
+
+  return (
+    <DateTimeInput
+      data-inline-input="date-time"
+      value={state.value ?? undefined}
+      className={cn(inlineEditVariants({ variant, status: state.status }), className)}
+      disabled={access.isDisabled}
+      aria-invalid={state.isInvalid}
+      onValueChange={(date) => handleTrigger("change", date ?? null)}
+      onValueBlur={(date) => handleTrigger("blur", date ?? null)}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,295 @@
+"use client";
+
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import type { Locale } from "date-fns";
+import { format, isValid, parse } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+import type { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar.client";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover.client";
+import { cn } from "@/lib/utils/cn";
+import type { Permission } from "@/modules/auth/lib/permissions";
+import { useInlineState } from "../../hooks/inline-state.client";
+import {
+  type InlineStrategy,
+  useInlineAccess,
+  useInlineMutation,
+  useInlineStrategy,
+} from "../../hooks/use-inline.client";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../../lib/variants";
+
+type DateSchema = z.ZodType<string | null, string | null>;
+type DateInputTrigger = "change" | "blur";
+type DatePickerTrigger = "commit";
+
+type InlineDateInputStrategy = InlineStrategy<DateSchema, DateInputTrigger>;
+type InlineDatePickerStrategy = InlineStrategy<DateSchema, DatePickerTrigger>;
+
+const DEFAULT_INPUT_DATE_FORMAT = "dd/MM/yyyy";
+
+/**
+ * Inline Date Context
+ */
+type InlineDateContextType = {
+  state: ReturnType<typeof useInlineState<string | null>>;
+  mutations: ReturnType<typeof useInlineMutation<DateSchema, string | null>>;
+  access: ReturnType<typeof useInlineAccess>;
+  locale?: Locale;
+};
+
+const InlineDateContext = createContext<InlineDateContextType | undefined>(undefined);
+
+function useInlineDateContext() {
+  const context = useContext(InlineDateContext);
+  if (!context) {
+    throw new Error("InlineDate components must be used within InlineDateProvider");
+  }
+
+  return context;
+}
+
+/**
+ * Inline Date Provider
+ */
+export type InlineDateProviderProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = {
+  initialValue?: string | null;
+  variables?: (value: string | null) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  permission?: Permission;
+  disabled?: boolean;
+  locale?: Locale;
+  children: ReactNode;
+};
+
+export function InlineDateProvider<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  permission,
+  disabled,
+  locale,
+  initialValue,
+  children,
+}: InlineDateProviderProps<TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<string | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    DateSchema,
+    string | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({ variables, mutation, access, state });
+
+  return (
+    <InlineDateContext value={{ state, access, mutations, locale }}>{children}</InlineDateContext>
+  );
+}
+
+/**
+ * The inline edit date input component.
+ */
+export type InlineDateInputFieldProps = Omit<
+  ComponentProps<typeof Input>,
+  "type" | "value" | "defaultValue" | "onChange" | "onBlur"
+> &
+  InlineEditVariantsProps & {
+    strategy: InlineDateInputStrategy;
+    dateFormat?: string;
+  };
+
+export function InlineDateInputField({
+  strategy,
+  dateFormat = DEFAULT_INPUT_DATE_FORMAT,
+  variant,
+  className,
+  ...props
+}: InlineDateInputFieldProps) {
+  const { state, access, mutations } = useInlineDateContext();
+
+  const [draftValue, setDraftValue] = useState(() =>
+    formatDisplayDate(state.value, dateFormat),
+  );
+  const [isLocallyInvalid, setIsLocallyInvalid] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    if (isFocused || isLocallyInvalid) return;
+    setDraftValue(formatDisplayDate(state.value, dateFormat));
+  }, [dateFormat, isFocused, isLocallyInvalid, state.value]);
+
+  const { handleTrigger } = useInlineStrategy<DateInputTrigger, DateSchema, string | null>({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      encode: (date) => date,
+      decode: (input) => input,
+    },
+  });
+
+  const isInvalid = state.isInvalid || isLocallyInvalid;
+
+  return (
+    <Input
+      {...props}
+      data-inline-input="date-composed-input"
+      type="text"
+      value={draftValue}
+      aria-invalid={isInvalid}
+      disabled={access.isDisabled}
+      className={cn(
+        inlineEditVariants({ variant, status: state.status }),
+        isInvalid && "text-destructive",
+        className,
+      )}
+      onFocus={() => setIsFocused(true)}
+      onChange={(e) => {
+        const nextValue = e.target.value;
+        const parsedValue = parseDisplayDate(nextValue, dateFormat);
+
+        setDraftValue(nextValue);
+        setIsLocallyInvalid(false);
+
+        if (parsedValue !== undefined) handleTrigger("change", parsedValue);
+      }}
+      onBlur={(e) => {
+        const parsedValue = parseDisplayDate(e.target.value, dateFormat);
+        setIsFocused(false);
+
+        if (parsedValue === undefined) {
+          setIsLocallyInvalid(true);
+          return;
+        }
+
+        if (parsedValue === null) {
+          setIsLocallyInvalid(false);
+          setDraftValue("");
+          handleTrigger("blur", null);
+          return;
+        }
+
+        setIsLocallyInvalid(false);
+        setDraftValue(formatDisplayDate(parsedValue, dateFormat));
+        handleTrigger("blur", parsedValue);
+      }}
+    />
+  );
+}
+
+/**
+ * The inline edit date picker component.
+ */
+export type InlineDatePickerFieldProps = Omit<ComponentProps<typeof Button>, "type"> &
+  InlineEditVariantsProps & {
+    strategy: InlineDatePickerStrategy;
+  };
+
+export function InlineDatePickerField({
+  strategy,
+  className,
+  variant,
+  ...props
+}: InlineDatePickerFieldProps) {
+  const { state, access, mutations, locale } = useInlineDateContext();
+  const selectedDate = toCalendarDate(state.value);
+
+  const { handleTrigger } = useInlineStrategy<DatePickerTrigger, DateSchema, string | null>({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      encode: (date) => date,
+      decode: (input) => input,
+    },
+  });
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          {...props}
+          data-inline-input="date-composed-picker"
+          type="button"
+          variant="ghost"
+          aria-label="Open kalender"
+          aria-invalid={state.isInvalid}
+          disabled={access.isDisabled}
+          className={cn(
+            "absolute top-0 right-0 bottom-0 opacity-50",
+            !state.value && "text-muted-foreground",
+            inlineEditVariants({ variant, status: state.status }),
+            className,
+          )}
+        >
+          <CalendarIcon className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          autoFocus
+          selected={selectedDate}
+          defaultMonth={selectedDate}
+          locale={locale}
+          disabled={access.isDisabled}
+          onSelect={(selectedDate) => {
+            if (!selectedDate) return;
+            handleTrigger("commit", format(selectedDate, "yyyy-MM-dd"));
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+/**
+ * Helper functions
+ */
+function toCalendarDate(value: string | null | undefined): Date | undefined {
+  if (!value) return undefined;
+
+  const date = parse(value, "yyyy-MM-dd", new Date());
+  if (!isValid(date)) return undefined;
+
+  return format(date, "yyyy-MM-dd") === value ? date : undefined;
+}
+
+function formatDisplayDate(
+  value: string | null | undefined,
+  dateFormat: string,
+): string {
+  const date = toCalendarDate(value);
+  if (!date) return "";
+
+  return format(date, dateFormat);
+}
+
+function parseDisplayDate(
+  value: string,
+  dateFormat: string,
+): string | null | undefined {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  const parsedDate = parse(trimmed, dateFormat, new Date());
+  if (!isValid(parsedDate)) return undefined;
+  if (format(parsedDate, dateFormat) !== trimmed) return undefined;
+
+  return format(parsedDate, "yyyy-MM-dd");
+}

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

@@ -0,0 +1,99 @@
+"use client";
+
+import type { DefaultError } from "@tanstack/react-query";
+import type { z } from "zod";
+import { Editor, type EditorProps } from "@/components/editor/components/editor.client";
+import type { EditorJSONContent } from "@/components/editor/lib/types";
+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 EditorInlineTrigger = "change" | "blur";
+
+export type InlineEditorProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+> = useInlineEditOptions<
+  EditorInlineTrigger,
+  z.ZodType<EditorJSONContent | null, EditorJSONContent | null>,
+  TData,
+  TError,
+  TVariables,
+  TOnMutateResult
+> &
+  InlineEditVariantsProps &
+  Omit<EditorProps, "value" | "onUpdate" | "onBlur" | "variant">;
+
+export function InlineEditor<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = unknown,
+  TOnMutateResult = unknown,
+>({
+  initialValue,
+  variables,
+  mutation,
+  extensions,
+  variant,
+  disabled,
+  permission,
+  strategy,
+  className,
+  children,
+}: InlineEditorProps<TData, TError, TVariables, TOnMutateResult>) {
+  const state = useInlineState<EditorJSONContent | null>(initialValue);
+  const access = useInlineAccess({ permission, disabled });
+  const mutations = useInlineMutation<
+    z.ZodType<EditorJSONContent | null, EditorJSONContent | null>,
+    EditorJSONContent | null,
+    TData,
+    TError,
+    TVariables,
+    TOnMutateResult
+  >({
+    variables,
+    mutation,
+    access,
+    state,
+  });
+
+  const { handleTrigger } = useInlineStrategy<
+    EditorInlineTrigger,
+    z.ZodType<EditorJSONContent | null, EditorJSONContent | null>,
+    EditorJSONContent | null
+  >({
+    strategy,
+    state,
+    mutations,
+    parser: {
+      decode: (content) => content,
+      encode: (content) => content,
+    },
+  });
+
+  return (
+    <Editor
+      value={state.value}
+      extensions={extensions}
+      onUpdate={(nextValue) => handleTrigger("change", nextValue)}
+      onBlur={(nextValue) => handleTrigger("blur", nextValue)}
+      className={cn(inlineEditVariants({ variant, status: state.status }), className)}
+      disabled={access.isDisabled}
+      variant={variant}
+      attributes={{
+        "data-inline-input": "editor",
+        "aria-invalid": state.isInvalid ? "true" : "false",
+      }}
+    >
+      {children}
+    </Editor>
+  );
+}

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