@povio/ui 0.0.2 → 0.0.4

package/src/helpers/dynamicInputs.ts

@@ -0,0 +1,392 @@
+// oxlint-disable no-unsafe-return
+// oxlint-disable no-unsafe-assignment
+// oxlint-disable no-unsafe-argument
+// oxlint-disable no-unsafe-member-access
+// oxlint-disable no-explicit-any
+
+import i18next from "i18next";
+import type { ReactElement } from "react";
+import type { Control, UseFormReturn } from "react-hook-form";
+import { z } from "zod";
+
+import type {
+  InputComponentProps,
+  InputComponentType,
+  InputDef,
+  InputDefBaseProps,
+  InputWrapperType,
+} from "#ui/components/inputs/Inputs/InputItem";
+import { StringUtils } from "#ui/utils/string.utils";
+import { ZodUtils } from "#ui/utils/zod.utils";
+
+const defaultComponentTypes = {
+  datetime: "datePicker",
+  dateRange: "dateRangePicker",
+  textEditor: "textEditor",
+  boolean: "toggle",
+  number: "numberInput",
+  enum: "select",
+  string: "textInput",
+  email: "textInput",
+  object: "unknown",
+  array: "select",
+  unknown: "unknown",
+} as const;
+
+const ZOD_TYPE_COMPONENT_TYPE = [
+  [z.ZodBoolean, defaultComponentTypes.boolean],
+  [z.ZodNumber, defaultComponentTypes.number],
+  [z.ZodEnum, defaultComponentTypes.enum],
+  [z.ZodISODateTime, defaultComponentTypes.datetime],
+  [z.ZodString, defaultComponentTypes.string],
+  [z.ZodEmail, defaultComponentTypes.email],
+  [z.ZodObject, defaultComponentTypes.object],
+  [z.ZodArray, defaultComponentTypes.array],
+] as const;
+
+const DEFAULT_NAMESPACE = "dynamicInputs";
+
+export type DefaultComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeSwitch<
+  TZodType,
+  typeof defaultComponentTypes
+>;
+export type AllowedComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeSwitch<
+  TZodType,
+  {
+    datetime: "datePicker" | "dateTimePicker" | "timePicker";
+    dateRange: "dateRangePicker";
+    textEditor: "textEditor";
+    boolean: "toggle" | "checkbox";
+    number: "numberInput" | "slider" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    enum: "select" | "autocomplete" | "segment";
+    string: "textInput" | "passwordInput" | "textArea" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    email: "textInput";
+    array: "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    object: InputComponentType;
+    unknown: InputComponentType;
+  }
+>;
+
+interface DynamicInputDefBase<TProps> {
+  label?: string;
+  placeholder?: string;
+  props?: Partial<TProps>;
+  inputWrapper?: InputWrapperType;
+}
+
+type ConfigInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>> = {
+  [T in AllowedComponentType<TSchema["shape"][K]>]: {
+    type: T;
+  } & DynamicInputDefBase<InputDefBaseProps<InputComponentProps<T>>>;
+}[AllowedComponentType<TSchema["shape"][K]>];
+
+type UnknownInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>> = {
+  [T in DefaultComponentType<TSchema["shape"][K]>]: {
+    type?: never;
+  } & DynamicInputDefBase<InputDefBaseProps<InputComponentProps<T>>>;
+}[DefaultComponentType<TSchema["shape"][K]>];
+
+type RenderInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>> = {
+  render: (
+    formControl: { control: Control<z.infer<TSchema>>; name: K },
+    form: UseFormReturn<z.infer<TSchema>>,
+  ) => ReactElement;
+} & DynamicInputDefBase<Record<string, never>>;
+
+type DynamicInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>> =
+  | ConfigInputDef<TSchema, K>
+  | UnknownInputDef<TSchema, K>
+  | RenderInputDef<TSchema, K>;
+
+type InputsConfig<TSchema extends z.ZodObject<any>> = {
+  [K in keyof z.infer<TSchema>]?:
+    | DynamicInputDef<TSchema, K>
+    | ((
+        formControl: { control: Control<z.infer<TSchema>>; name: K },
+        form: UseFormReturn<z.infer<TSchema>>,
+      ) => ReactElement)
+    | boolean;
+};
+
+type InputConfigEntry<TSchema extends z.ZodObject<any>> = [string, InputsConfig<TSchema>[keyof z.infer<TSchema>]];
+type DynamicInputDefEntry<TSchema extends z.ZodObject<any>> = {
+  [K in keyof z.infer<TSchema>]: [K, DynamicInputDef<TSchema, K>];
+}[keyof z.infer<TSchema>];
+
+type GlobalProps = {
+  [T in Exclude<InputComponentType, "unknown">]: InputDefBaseProps<InputComponentProps<T>>;
+}[Exclude<InputComponentType, "unknown">];
+
+type SchemaKeyOrString<TSchema extends z.ZodObject<any>> = keyof z.infer<TSchema> | (string & {});
+
+export interface DynamicInputsOptions<TSchema extends z.ZodObject<any>> {
+  inputs?: InputsConfig<TSchema>;
+  order?: SchemaKeyOrString<TSchema>[];
+  globalProps?: Partial<GlobalProps>;
+  globalInputWrapper?: InputWrapperType;
+  namespace?: string;
+  overridePresetLocales?: boolean;
+  includeAll?: boolean;
+}
+
+export interface DynamicInputsParams<TSchema extends z.ZodObject<any>> {
+  schema: TSchema;
+  preset?: InputDef<z.infer<TSchema>>[];
+  options: DynamicInputsOptions<TSchema>;
+}
+
+const sortInputDefs = <TSchema extends z.ZodObject<any>>(
+  inputDefs: InputDef<z.infer<TSchema>>[],
+  orderKeys?: DynamicInputsOptions<TSchema>["order"],
+): InputDef<z.infer<TSchema>>[] => {
+  if (!orderKeys) {
+    return inputDefs;
+  }
+
+  return inputDefs.sort((a, b) => {
+    const orderMap = new Map(orderKeys.map((key, index) => [key, index]));
+    const orderA = orderMap.get(a.name);
+    const orderB = orderMap.get(b.name);
+
+    if (orderA !== undefined && orderB !== undefined) {
+      return orderA - orderB;
+    }
+    if (orderA !== undefined && orderB === undefined) {
+      return -1;
+    }
+    if (orderA === undefined && orderB !== undefined) {
+      return 1;
+    }
+    return 0;
+  });
+};
+
+const excludeEntries = <TSchema extends z.ZodObject<any>>(
+  entries: InputConfigEntry<TSchema>[],
+): InputConfigEntry<TSchema>[] => {
+  return entries.filter(([, value]) => value !== false && value !== undefined);
+};
+
+const inputConfigToObjectDefinition = <TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>>(
+  value: InputsConfig<TSchema>[K],
+): DynamicInputDef<TSchema, K> => {
+  if (typeof value === "object") {
+    return value as DynamicInputDef<TSchema, K>;
+  }
+
+  if (typeof value === "function") {
+    return { render: value } as RenderInputDef<TSchema, K>;
+  }
+
+  return {} as DynamicInputDef<TSchema, K>;
+};
+
+const convertInputsConfigToObjectDefinitions = <TSchema extends z.ZodObject<any>>(
+  entries: InputConfigEntry<TSchema>[],
+): DynamicInputDefEntry<TSchema>[] => {
+  return entries.map(([key, value]) => {
+    const k = key as keyof z.infer<TSchema>;
+    return [k, inputConfigToObjectDefinition(value)];
+  });
+};
+
+export const getDefaultInputComponentType = (schemaType: z.core.$ZodType): InputComponentType => {
+  if (ZodUtils.isDateRange(schemaType)) {
+    return defaultComponentTypes.dateRange;
+  }
+
+  if (ZodUtils.isTextEditor(schemaType)) {
+    return defaultComponentTypes.textEditor;
+  }
+
+  const unwrappedType = ZodUtils.unwrapZodType(schemaType);
+  const componentType = ZOD_TYPE_COMPONENT_TYPE.find(([zodType]) => unwrappedType instanceof zodType)?.[1];
+  if (componentType) {
+    return componentType;
+  }
+
+  return defaultComponentTypes.unknown;
+};
+
+const getDefaultSelectionItems = (keyType: z.core.$ZodType) => {
+  const unwrappedType = ZodUtils.unwrapZodType(keyType instanceof z.ZodArray ? keyType.element : keyType);
+  if (unwrappedType instanceof z.ZodEnum) {
+    return Object.values(unwrappedType.options)
+      .filter((value) => typeof value === "string")
+      .map((value) => ({ id: value, label: StringUtils.capitalize(value) }));
+  }
+  return [];
+};
+
+export const getDefaultSelectionMode = (keyType: z.core.$ZodType) => {
+  return keyType instanceof z.ZodArray ? "multiple" : "single";
+};
+
+const getDefaultProps = (componentType: InputComponentType, keyType: z.core.$ZodType) => {
+  const props: any = {};
+  const unwrappedType = ZodUtils.unwrapZodType(keyType);
+  if (["select", "autocomplete", "segment"].includes(componentType)) {
+    props.items = getDefaultSelectionItems(unwrappedType);
+  }
+  if (["select", "autocomplete", "queryAutocomplete", "segment"].includes(componentType)) {
+    props.selectionMode = getDefaultSelectionMode(unwrappedType);
+  }
+  return props;
+};
+
+const getLabelAndPlaceholder = <TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>>(
+  value: DynamicInputDef<TSchema, K>,
+  options: DynamicInputsOptions<TSchema>,
+  schemaKey: K,
+) => {
+  const namespace = options.namespace ?? DEFAULT_NAMESPACE;
+  const stringKey = String(schemaKey);
+
+  let { label, placeholder } = value;
+  if (!label) {
+    const key = `${namespace}.${stringKey}.label`;
+    const translation = i18next.exists(key) ? i18next.t(key as any) : null;
+    label = typeof translation === "string" ? translation : StringUtils.capitalize(stringKey);
+  }
+  if (!placeholder) {
+    const key = `${namespace}.${stringKey}.placeholder`;
+    const translation = i18next.exists(key) ? i18next.t(key as any) : null;
+    placeholder = typeof translation === "string" ? translation : undefined;
+  }
+
+  return { label, placeholder };
+};
+
+const overridePresetLabelsAndPlaceholders = <TSchema extends z.ZodObject<any>>(
+  presetInputDefs: InputDef<z.infer<TSchema>>[],
+  options: DynamicInputsOptions<TSchema>,
+): InputDef<z.infer<TSchema>>[] => {
+  const namespace = options.namespace ?? DEFAULT_NAMESPACE;
+
+  return presetInputDefs.map((inputDef) => {
+    const labelName = String(inputDef.name);
+    const labelKey = `${namespace}.${labelName}.label`;
+    const placeholderKey = `${namespace}.${labelName}.placeholder`;
+
+    const labelTranslation = i18next.exists(labelKey) ? i18next.t(labelKey as any) : null;
+    const placeholderTranslation = i18next.exists(placeholderKey) ? i18next.t(placeholderKey as any) : null;
+
+    return {
+      ...inputDef,
+      label: typeof labelTranslation === "string" ? labelTranslation : inputDef.label,
+      placeholder: typeof placeholderTranslation === "string" ? placeholderTranslation : inputDef.placeholder,
+    } as InputDef<z.infer<TSchema>>;
+  });
+};
+
+const removeOverriddenPresetInputs = <TSchema extends z.ZodObject<any>>(
+  presetInputs: InputDef<z.infer<TSchema>>[],
+  options: DynamicInputsOptions<TSchema>,
+): InputDef<z.infer<TSchema>>[] => {
+  if (presetInputs.length === 0) {
+    return presetInputs;
+  }
+
+  const usedKeys = Object.entries(options.inputs ?? {}).map(([key]) => String(key));
+  return presetInputs.filter((input) => !usedKeys.includes(String(input.name)));
+};
+
+const validateParams = <TSchema extends z.ZodObject<any>>(
+  schema: TSchema,
+  presetInputs: InputDef<z.infer<TSchema>>[],
+  options: DynamicInputsOptions<TSchema>,
+) => {
+  const { inputs, order, includeAll } = options;
+
+  if (!order) {
+    return;
+  }
+
+  const inputKeys = Object.keys(inputs ?? {});
+  const presetKeys = presetInputs.map((input) => input.name).filter((name) => name !== undefined);
+  const schemaKeys = includeAll ? Object.keys(schema.shape) : [];
+
+  const allInputKeys = new Set([...inputKeys, ...presetKeys, ...schemaKeys]);
+
+  const unnecessaryOrderKeys = order.filter((key) => !allInputKeys.has(key));
+  if (unnecessaryOrderKeys.length > 0) {
+    throw new Error(
+      `Found unnecessary keys in "order": [${unnecessaryOrderKeys.join(", ")}]. These keys are not found in any of the input definitions.\nAll defined input keys are: [${Array.from(allInputKeys).join(", ")}].\nIn the case of a preset input definition, the key is the name attribute.`,
+    );
+  }
+};
+
+const populateInputDef = <TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>>(
+  schema: TSchema,
+  schemaKey: K,
+  value: DynamicInputDef<TSchema, K>,
+  options: DynamicInputsOptions<TSchema>,
+): InputDef<z.infer<TSchema>> => {
+  const name = String(schemaKey);
+  const { label, placeholder } = getLabelAndPlaceholder(value, options, schemaKey);
+  const inputWrapper = value.inputWrapper ?? options.globalInputWrapper;
+
+  if ("render" in value) {
+    return {
+      name,
+      render: value.render,
+    } as InputDef<z.infer<TSchema>>;
+  }
+
+  const schemaKeyType = schema.shape[schemaKey as string];
+  const componentType = "type" in value ? value.type : getDefaultInputComponentType(schemaKeyType);
+
+  const defaultProps = componentType ? getDefaultProps(componentType, schemaKeyType) : {};
+  const props = { ...defaultProps, ...options.globalProps, ...value.props };
+
+  return {
+    type: componentType === "unknown" ? null : componentType,
+    name,
+    label,
+    placeholder,
+    inputWrapper,
+    props,
+  } as InputDef<z.infer<TSchema>>;
+};
+
+const addMissingSchemaFields = <TSchema extends z.ZodObject<any>>(
+  schema: TSchema,
+  existingInputDefs: InputDef<z.infer<TSchema>>[],
+  options: DynamicInputsOptions<TSchema>,
+): InputDef<z.infer<TSchema>>[] => {
+  const schemaFields = Object.keys(schema.shape) as (keyof z.infer<TSchema>)[];
+  const definedFields = new Set(existingInputDefs.map((def) => def.name));
+
+  const missingFields = schemaFields.filter((field) => !definedFields.has(field));
+  const additionalInputDefs = missingFields.map((field) => {
+    return populateInputDef(schema, field, {} as DynamicInputDef<TSchema, typeof field>, options);
+  });
+
+  return [...existingInputDefs, ...additionalInputDefs];
+};
+
+export const dynamicInputs = <TSchema extends z.ZodObject<any>>({
+  schema,
+  preset = [],
+  options,
+}: DynamicInputsParams<TSchema>): InputDef<z.infer<TSchema>>[] => {
+  validateParams(schema, preset, options);
+
+  let entries = Object.entries(options.inputs ?? {}) as InputConfigEntry<TSchema>[];
+  entries = excludeEntries(entries);
+
+  const dynamicInputDefs = convertInputsConfigToObjectDefinitions(entries);
+  const inputDefs = dynamicInputDefs.map(([key, value]) => {
+    return populateInputDef(schema, key, value, options);
+  });
+
+  let presetInputDefs = removeOverriddenPresetInputs(preset, options);
+  if (options.overridePresetLocales) {
+    presetInputDefs = overridePresetLabelsAndPlaceholders(presetInputDefs, options);
+  }
+
+  const mergedInputDefs = [...presetInputDefs, ...inputDefs];
+  const allInputDefs = options.includeAll ? addMissingSchemaFields(schema, mergedInputDefs, options) : mergedInputDefs;
+
+  return sortInputDefs(allInputDefs, options.order);
+};

package/src/hooks/useAutosave.ts

@@ -0,0 +1,109 @@
+// oxlint-disable typescript-eslint/no-unsafe-assignment
+// oxlint-disable typescript-eslint/no-unsafe-member-access
+
+import { useEffect, useRef } from "react";
+import { type DefaultValues, type FieldValues, type UseFormReturn, useFormState, useWatch } from "react-hook-form";
+
+import { isEqual } from "#ui/utils/isEqual";
+import { ObjectUtils } from "#ui/utils/object.utils";
+
+export interface UseAutosaveProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TTransformedValues = TFieldValues,
+  TResponse = unknown,
+> {
+  form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+  delay?: number;
+  enabled?: boolean;
+  onSave: (data: Partial<TTransformedValues>) => Promise<TResponse>;
+  onSaveSuccess?: () => void;
+}
+
+function isNilOrEqual(left: any, right: any) {
+  if (ObjectUtils.isNil(left) && ObjectUtils.isNil(right)) {
+    return true;
+  }
+  return isEqual(left, right);
+}
+
+function diffLeftOnly(left: any, right: any, shallowKeys?: any): any {
+  if (!ObjectUtils.isObject(left) || ObjectUtils.isDate(left) || ObjectUtils.isRegExp(left)) {
+    return !isNilOrEqual(left, right) ? left : undefined;
+  }
+  if (Array.isArray(left)) {
+    return !isNilOrEqual(left, right) ? left : undefined;
+  }
+  const result = Object.entries(left).reduce<Record<string, any>>((acc, [key, value]) => {
+    const shallowSubtree = shallowKeys?.[key];
+    if (shallowSubtree === true) {
+      if (!isNilOrEqual(value, right?.[key])) {
+        acc[key] = value;
+      }
+      return acc;
+    }
+    const diff = diffLeftOnly(value, right?.[key], shallowSubtree);
+    if (diff !== undefined && (!ObjectUtils.isObject(diff) || !ObjectUtils.isEmpty(diff))) {
+      acc[key] = diff;
+    }
+    return acc;
+  }, {});
+  return ObjectUtils.isEmpty(result) ? undefined : result;
+}
+
+export function useAutosave<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TTransformedValues = TFieldValues,
+  TResponse = unknown,
+>({
+  form,
+  delay = 500,
+  enabled = true,
+  onSave,
+  onSaveSuccess,
+}: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>) {
+  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
+  const { control, reset, handleSubmit } = form;
+  const { dirtyFields, defaultValues } = useFormState({ control });
+  const formData = useWatch({ control });
+
+  useEffect(() => {
+    if (!enabled || Object.keys(dirtyFields).length === 0) {
+      return undefined;
+    }
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      handleSubmit(async (data: TTransformedValues) => {
+        const dirtyData = Object.entries(dirtyFields)
+          .filter(([, value]) => value)
+          .reduce((acc, [key]) => ({ ...acc, [key]: data[key as keyof TTransformedValues] }), {});
+        const changedData = (diffLeftOnly(dirtyData, defaultValues, dirtyFields) ?? {}) as Partial<TTransformedValues>;
+        if (Object.keys(changedData).length === 0) {
+          return undefined;
+        }
+
+        try {
+          reset(undefined, { keepValues: true });
+          await onSave(changedData);
+          onSaveSuccess?.();
+        } catch {
+          reset(defaultValues as DefaultValues<TFieldValues>);
+          return undefined;
+        }
+        return undefined;
+      })();
+      return undefined;
+    }, delay);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [defaultValues, dirtyFields, formData, delay, onSave, handleSubmit, enabled, reset]);
+}

package/src/hooks/useBreakpoint.ts

@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+import { useMediaQuery } from "react-responsive";
+
+type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+
+function getBreakpoints() {
+  const cs = getComputedStyle(document.documentElement);
+  const entries = ["sm", "md", "lg", "xl", "2xl"]
+    .map((k) => [k, cs.getPropertyValue(`--breakpoint-${k}`).trim()])
+    .filter(([, v]) => !!v);
+  // Returns { sm: "40rem", md: "48rem", ... } (or px if you convert)
+  return Object.fromEntries(entries) as Record<Breakpoint, string>;
+}
+
+export function useBreakpoint(breakpointKey: Breakpoint) {
+  const breakpoints = useMemo(() => getBreakpoints(), []);
+  if (!breakpoints) {
+    throw new Error("Tailwind config is missing theme.screens");
+  }
+
+  const bool = useMediaQuery({
+    query: `(min-width: ${breakpoints[breakpointKey]})`,
+  });
+
+  return bool;
+}

package/src/hooks/useDebounceCallback.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useDebounceCallback<T extends (...args: any[]) => any>(
+  callback?: T,
+  { delay = 500 }: { delay?: number } = {},
+) {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [isDebouncing, setIsDebouncing] = useState(false);
+
+  const debouncedCallback = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      setIsDebouncing(true);
+
+      timeoutRef.current = setTimeout(() => {
+        setIsDebouncing(false);
+        callback?.(...args);
+      }, delay);
+    },
+    [callback, delay],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return { callback: debouncedCallback, isDebouncing };
+}

package/src/hooks/useDeepCompare.ts

@@ -0,0 +1,27 @@
+import { type EffectCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+
+import { isEqual } from "#ui/utils/isEqual";
+
+export const useDeepCompareEffect = (callback: EffectCallback, dependencies: any[]): void => {
+  return useEffect(callback, useDeepCompareDeps(dependencies));
+};
+
+export const useDeepCompareLayoutEffect = (callback: EffectCallback, dependencies: any[]): void => {
+  return useLayoutEffect(callback, useDeepCompareDeps(dependencies));
+};
+
+export const useDeepCompareMemo = <T = any>(factory: () => T, dependencies: any[]): T => {
+  return useMemo(factory, useDeepCompareDeps(dependencies));
+};
+
+const useDeepCompareDeps = (value: any[]): number[] => {
+  const ref = useRef<any[]>(undefined);
+  const signalRef = useRef<number>(0);
+
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+  }
+
+  return [signalRef.current];
+};