@tulip-systems/core 0.8.3 → 0.10.0

package/src/modules/inline-edit/components/input-toggle.client.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { CheckIcon, XIcon } from "lucide-react";
-import { type ComponentProps, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/entry";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-
-type InlineStringInputToggleProps<Required extends boolean = false> = Omit<
-  ComponentProps<typeof Input>,
-  "type"
-> &
-  useInlineEditOptions<string, Required>;
-
-export function InlineStringInputToggle<Required extends boolean>({
-  initialValue,
-  action,
-  disabled,
-  permission,
-  updateStrategy,
-  isRequired,
-  className,
-  ...props
-}: InlineStringInputToggleProps<Required>) {
-  const [enabled, setEnabled] = useState(!!initialValue);
-
-  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  function handleToggle() {
-    setEnabled(!enabled);
-    if (!enabled) return;
-
-    handleBlur(null);
-  }
-
-  const isDisabled = !enabled || disabled || !isAllowed;
-
-  return (
-    <div className="relative">
-      <Input
-        {...props}
-        data-inline-input="input-toggle"
-        type="text"
-        value={value ?? undefined}
-        disabled={isDisabled}
-        onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
-        onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
-        className={cn("w-full border-border/70 hover:border-border", className)}
-      />
-
-      <Button
-        variant="ghost"
-        onClick={handleToggle}
-        tabIndex={-1}
-        className={cn(
-          "absolute top-0 right-0 bottom-0 opacity-50",
-          !value && "text-muted-foreground",
-        )}
-      >
-        {enabled ? <CheckIcon /> : <XIcon />}
-      </Button>
-    </div>
-  );
-}

package/src/modules/inline-edit/components/input.client.tsx

@@ -1,149 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-type InlineEditInputProps<TValue, Required extends boolean = false> = Omit<
-  ComponentProps<typeof Input>,
-  "type"
-> &
-  useInlineEditOptions<TValue, Required> &
-  InlineEditVariantsProps;
-
-/**
- * The inline edit string input component.
- */
-export function InlineStringInput<Required extends boolean = false>({
-  initialValue,
-  action,
-  variant,
-  className,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: InlineEditInputProps<string, Required>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Input
-      {...props}
-      data-inline-input="string"
-      type="text"
-      value={value ?? undefined}
-      disabled={disabled || !isAllowed}
-      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
-      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
-      className={cn(
-        "w-full border-border/70 hover:border-border",
-        inlineEditVariants({ variant, status }),
-        className,
-      )}
-    />
-  );
-}
-
-/**
- * The inline edit number input component.
- */
-const parseValueAsNumber = (valueAsNumber: number): number | null =>
-  !Number.isNaN(Number(valueAsNumber)) ? valueAsNumber : null;
-
-export function InlineNumberInput<Required extends boolean = false>({
-  initialValue,
-  action,
-  variant,
-  className,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: InlineEditInputProps<number, Required>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Input
-      {...props}
-      data-inline-input="number"
-      type="number"
-      value={value ?? undefined}
-      disabled={disabled || !isAllowed}
-      onChange={(e) => handleChange(parseValueAsNumber(e.target.valueAsNumber))}
-      onBlur={(e) => handleBlur(parseValueAsNumber(e.target.valueAsNumber))}
-      className={cn(
-        "w-full border-border/70 hover:border-border",
-        inlineEditVariants({ variant, status }),
-        className,
-      )}
-    />
-  );
-}
-
-/**
- * The inline edit decimal input component.
- */
-export function InlineDecimalInput({
-  initialValue,
-  action,
-  variant,
-  className,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: InlineEditInputProps<string>) {
-  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Input
-      {...props}
-      data-inline-input="decimal"
-      type="number"
-      value={value ?? undefined}
-      disabled={disabled || !isAllowed}
-      onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
-      onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
-      className={cn(
-        "w-full border-border/70 hover:border-border",
-        inlineEditVariants({ variant, status }),
-        className,
-      )}
-    />
-  );
-}

package/src/modules/inline-edit/components/select.client.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select.client";
-import { useIndicator } from "@/lib/entry.client";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
-
-export function InlineSelect<Required extends boolean = false>({
-  initialValue,
-  action,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: ComponentProps<typeof Select> & useInlineEditOptions<string, Required>) {
-  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Select
-      {...props}
-      disabled={disabled || !isAllowed}
-      defaultValue={value ?? undefined}
-      onValueChange={(value) => {
-        handleChange(value ? value : null);
-        handleBlur(value ? value : null);
-      }}
-    />
-  );
-}
-
-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-edit/components/switch.client.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { Switch } from "@/components/ui/switch.client";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-
-export function InlineSwitch<Required extends boolean = false>({
-  initialValue,
-  action,
-  permission,
-  updateStrategy,
-  isRequired,
-  disabled,
-  ...props
-}: ComponentProps<typeof Switch> & useInlineEditOptions<boolean, Required>) {
-  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <Switch
-      {...props}
-      data-inline-input="switch"
-      disabled={disabled || !isAllowed}
-      defaultChecked={value ?? undefined}
-      onCheckedChange={(checked) => {
-        handleChange(checked ?? null);
-        handleBlur(checked ?? null);
-      }}
-    />
-  );
-}

package/src/modules/inline-edit/components/toggle.client.tsx

@@ -1,50 +0,0 @@
-"use client";
-
-import type React from "react";
-import { Toggle } from "@/components/ui/toggle.client";
-import { cn } from "@/lib/utils/cn";
-import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-
-export type InlineEditToggleProps<Required extends boolean = false> =
-  React.HTMLAttributes<HTMLDivElement> & useInlineEditOptions<boolean, Required>;
-
-export function InlineToggle<Required extends boolean = false>({
-  initialValue,
-  action,
-  children,
-  permission,
-  updateStrategy,
-  isRequired,
-  className,
-  ...props
-}: InlineEditToggleProps<Required>) {
-  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
-    initialValue,
-    action,
-    permission,
-    updateStrategy,
-    isRequired,
-    parser: {
-      decode: (value) => value,
-      encode: (value) => value,
-    },
-  });
-
-  return (
-    <div {...props} className={cn("flex flex-wrap items-center justify-start gap-1", className)}>
-      <Toggle
-        data-inline-input="toggle"
-        disabled={!isAllowed}
-        variant="outline"
-        pressed={value ?? undefined}
-        defaultChecked={initialValue ?? undefined}
-        onPressedChange={(value) => {
-          handleChange(value);
-          handleBlur(value);
-        }}
-      >
-        {children}
-      </Toggle>
-    </div>
-  );
-}

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

@@ -1,22 +0,0 @@
-/**
- * Components
- */
-
-export * from "./components/combobox.client";
-export * from "./components/combobox-dropdown.client";
-export * from "./components/date-input.client";
-export * from "./components/date-picker.client";
-export * from "./components/date-time.client";
-export * from "./components/editor.client";
-export * from "./components/input.client";
-export * from "./components/input-recipient.client";
-export * from "./components/input-toggle.client";
-export * from "./components/select.client";
-export * from "./components/switch.client";
-export * from "./components/toggle.client";
-
-/**
- * Hooks
- */
-export * from "./hooks/context.client";
-export * from "./hooks/use-inline.client";

package/src/modules/inline-edit/hooks/context.client.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import type React from "react";
-import { createContext, useContext } from "react";
-import type { Permission } from "@/modules/auth/lib/permissions";
-
-/**
- * InlineEditContext
- */
-export type InlineEditContextParams = { id: string; permission?: Permission };
-const InlineEditContext = createContext<InlineEditContextParams | undefined>(undefined);
-
-/**
- * UseInlineEditContext
- */
-export function useInlineEditContext() {
-  const context = useContext(InlineEditContext);
-  if (!context) throw new Error("InlineEditContext not found!");
-  return context;
-}
-
-/**
- * InlineEditContext Provider
- */
-export function InlineEditProvider({
-  children,
-  ...value
-}: InlineEditContextParams & { children: React.ReactNode }) {
-  return <InlineEditContext.Provider value={value}>{children}</InlineEditContext.Provider>;
-}

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

@@ -1,205 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import { toast } from "sonner";
-import { useDebouncedCallback } from "use-debounce";
-import type { EditorJSONContent } from "@/components/entry";
-import { useLocalIndicator } from "@/lib/entry.client";
-import { useAction } from "@/lib/hooks/use-action";
-import { usePermission } from "@/modules/auth/hooks/use-permission";
-import type { Permission } from "@/modules/auth/lib/permissions";
-import { useInlineEditContext } from "./context.client";
-
-type UpdateStrategy =
-  | {
-      mode: "change";
-      delay?: number;
-    }
-  | {
-      mode: "blur";
-    };
-
-const defaultUpdateStrategy: UpdateStrategy = {
-  mode: "blur",
-};
-
-type MaybeValue<TValue, Required extends boolean> = Required extends true ? TValue : TValue | null;
-
-/**
- * Use the inline edit hook options.
- */
-export type useInlineEditOptions<TResult, Required extends boolean = false> = {
-  /**
-   * Initial value
-   */
-  initialValue?: MaybeValue<TResult, Required>;
-  /**
-   * Action to execute on update
-   */
-  action: (value: { id: string; value: MaybeValue<TResult, Required> }) => Promise<unknown>;
-  /**
-   * Permission required to edit
-   */
-  permission?: Permission;
-  /**
-   * Update strategy
-   * - trigger: when to update the value (default: "blur")
-   * - delay: delay in milliseconds before updating the value (only for "change" trigger)
-   * @default { trigger: "blur" }
-   */
-  updateStrategy?: UpdateStrategy;
-  /**
-   * Is the value required
-   * @default false
-   */
-  isRequired?: Required;
-};
-
-/**
- * Inline edit hook props
- */
-export type UseInlineEditProps<
-  TValue extends string | number | Date | boolean | JSON | EditorJSONContent,
-  TResult extends string | number | Date | boolean | JSON | EditorJSONContent,
-  Required extends boolean = false,
-> = useInlineEditOptions<TResult, Required> & {
-  parser: {
-    /**
-     * Transform the value from the result type to the value type
-     */
-    decode: (value: TResult) => TValue;
-    /**
-     * Transform the value from the value type to the result type
-     */
-    encode: (value: TValue) => TResult;
-  };
-};
-
-/**
- * Use the inline edit hook.
- */
-export function useInlineEdit<
-  TValue extends string | number | Date | boolean | JSON | EditorJSONContent,
-  TResult extends string | number | Date | boolean | JSON | EditorJSONContent = TValue,
-  Required extends boolean = false,
->(props: UseInlineEditProps<TValue, TResult, Required>) {
-  /**
-   * The update strategy.
-   */
-  const strategy = props.updateStrategy ?? defaultUpdateStrategy;
-  const delay = strategy.mode === "change" ? (strategy.delay ?? 0) : 0;
-  const initialValue = props.parser.decode(props.initialValue as TResult) ?? undefined;
-
-  /**
-   * The inline edit context.
-   */
-  const context = useInlineEditContext();
-
-  /**
-   * The current value of the inline edit.
-   */
-  const [value, setValue] = useState<MaybeValue<TValue, Required> | undefined>(initialValue);
-
-  /**
-   * The indicator status.
-   */
-  const { status, setStatus } = useLocalIndicator();
-
-  /**
-   * Permission guard
-   */
-  const data = usePermission(props.permission ?? context.permission ?? {});
-  const isAllowed = data?.success;
-
-  /**
-   * Execute the action to update the value.
-   */
-  const mutation = useAction({
-    mutationFn: props.action,
-    onMutate: () => {
-      setStatus("pending");
-    },
-    onSuccess: () => {
-      setStatus("success");
-    },
-    onError: (error) => {
-      setValue(initialValue);
-      toast.error("Er is iets misgegaan", {
-        description: error instanceof Error ? error.message : undefined,
-      });
-    },
-  });
-
-  /**
-   * Handle instant mutate
-   */
-  const handleMutateInstant = useCallback(
-    (input: TValue) => {
-      // Permission guard
-      if (!isAllowed) {
-        toast.error("Je hebt geen toestemming om dit te bewerken");
-        return;
-      }
-
-      // If the value is the same as the initial value, do nothing
-      if (input === initialValue) return;
-
-      const value = props.parser.encode(input as TValue);
-
-      // Update the value
-      return mutation.mutate({ id: context.id, value });
-    },
-    [isAllowed, initialValue, mutation, context.id, props.parser],
-  );
-
-  /**
-   * Handle mutate with debounce
-   */
-  const handleMutateDebounced = useDebouncedCallback(handleMutateInstant, delay);
-
-  /**
-   * Handle change updates
-   */
-  function handleChange(next: MaybeValue<TValue, Required> | null) {
-    // Set value in state
-    setValue(next ?? undefined);
-
-    // If the strategy is not change, exit
-    if (strategy.mode !== "change") return;
-
-    // If it is required and the value is null or empty, reset to initial value
-    if (props.isRequired && next === null) {
-      setValue(initialValue ?? undefined);
-      setStatus("error");
-      toast.error("Dit veld is verplicht");
-      return;
-    }
-
-    // If the strategy is change, update the value after the delay
-    handleMutateDebounced(next as TValue);
-  }
-
-  /**
-   * Handle blur updates
-   */
-  function handleBlur(next: MaybeValue<TValue, Required> | null) {
-    // Set value in state
-    setValue(next ?? undefined);
-
-    // If the strategy is not blur, exit
-    if (strategy.mode !== "blur") return;
-
-    // If it is required and the value is null or empty, reset to initial value
-    if (props.isRequired && next === null) {
-      setValue(initialValue ?? undefined);
-      setStatus("error");
-      toast.error("Dit veld is verplicht");
-      return;
-    }
-
-    // If the strategy is blur, update the value
-    handleMutateInstant(next as TValue);
-  }
-
-  return { value, setValue, handleChange, handleBlur, status, isAllowed };
-}