@os-design/form 1.0.29 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/form",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,15 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx",
+    "!**/*.emotion.d.ts"
   ],
   "scripts": {
     "clean": "rimraf dist",
@@ -28,11 +36,11 @@
     "access": "public"
   },
   "devDependencies": {
-    "@os-design/core": "^1.0.198",
-    "@os-design/icons": "^1.0.47"
+    "@os-design/core": "^1.0.200",
+    "@os-design/icons": "^1.0.48"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "8791b7a1da0d71fb3e47d0df630e835c8221cfa9"
+  "gitHead": "3d6b264027712ef81a75379fe3fde3c76c3079af"
 }

package/src/BroadcastObserverManager.ts

@@ -0,0 +1,33 @@
+import { Subscription } from './types';
+import deleteFromArray from './utils/deleteFromArray';
+
+export type BroadcastObserver<TName, TValue> = (
+  name: TName,
+  value: TValue
+) => void;
+
+class BroadcastObserverManager<TName, TValue> {
+  private readonly broadcastObservers: Array<BroadcastObserver<TName, TValue>>;
+
+  public constructor() {
+    this.broadcastObservers = [];
+  }
+
+  public subscribeToAll(
+    observer: BroadcastObserver<TName, TValue>
+  ): Subscription {
+    this.broadcastObservers.push(observer);
+    return {
+      unsubscribe: () => deleteFromArray(this.broadcastObservers, observer),
+    };
+  }
+
+  protected callBroadcastObservers<N extends TName, V extends TValue>(
+    name: N,
+    value: V
+  ): void {
+    this.broadcastObservers.forEach((observer) => observer(name, value));
+  }
+}
+
+export default BroadcastObserverManager;

package/src/ErrorData.ts

@@ -0,0 +1,30 @@
+import ErrorObserverManager from './ErrorObserverManager';
+import { Errors } from './types';
+import clone from './utils/clone';
+
+class ErrorData<
+  TErrors extends Errors,
+  TName extends keyof TErrors = keyof TErrors
+> extends ErrorObserverManager<TErrors> {
+  private readonly errors: TErrors;
+
+  public constructor(errors: TErrors) {
+    super();
+    this.errors = errors;
+  }
+
+  public get<T extends TName>(name: T): TErrors[T] {
+    return this.errors[name];
+  }
+
+  public getAll(): TErrors {
+    return clone(this.errors);
+  }
+
+  public set<T extends TName>(name: T, value: TErrors[T]): void {
+    this.errors[name] = value;
+    this.callObservers(name, value);
+  }
+}
+
+export default ErrorData;

package/src/ErrorObserverManager.ts

@@ -0,0 +1,40 @@
+import BroadcastObserverManager from './BroadcastObserverManager';
+import { Errors, Observer, Subscription } from './types';
+import deleteFromArray from './utils/deleteFromArray';
+
+export type ErrorObserver = Observer<string | undefined>;
+
+class ErrorObserverManager<
+  TErrors extends Errors,
+  TName extends keyof TErrors = keyof TErrors
+> extends BroadcastObserverManager<TName, string | undefined> {
+  private readonly observers: {
+    [K in TName]?: ErrorObserver[];
+  };
+
+  public constructor() {
+    super();
+    this.observers = {};
+  }
+
+  private getObservers<T extends TName>(name: T): ErrorObserver[] {
+    if (!this.observers[name]) this.observers[name] = [];
+    return this.observers[name] as ErrorObserver[];
+  }
+
+  public subscribe<T extends TName>(
+    name: T,
+    observer: ErrorObserver
+  ): Subscription {
+    const observers = this.getObservers(name);
+    observers.push(observer);
+    return { unsubscribe: () => deleteFromArray(observers, observer) };
+  }
+
+  protected callObservers<T extends TName>(name: T, value: string | undefined) {
+    this.callBroadcastObservers(name, value);
+    this.getObservers(name).forEach((observer) => observer(value));
+  }
+}
+
+export default ErrorObserverManager;

package/src/Form.ts

@@ -0,0 +1,38 @@
+import ErrorData from './ErrorData';
+import { Errors, Path, Values } from './types';
+import clone from './utils/clone';
+import ValueData from './ValueData';
+
+class Form<
+  TValues extends Values = Values,
+  TErrors extends Errors<TValues> = Errors<TValues>
+> {
+  public initValues: TValues;
+
+  public readonly values: ValueData<TValues>;
+
+  public readonly errors: ErrorData<TErrors>;
+
+  public constructor(initValues: TValues) {
+    this.initValues = initValues;
+    this.values = new ValueData(clone(initValues));
+    this.errors = new ErrorData({} as TErrors);
+  }
+
+  public reset() {
+    // Reset values
+    Object.keys(this.values.getAll()).forEach((name) => {
+      this.values.set(name as Path<TValues>, clone(this.initValues[name]));
+    });
+
+    // Reset errors
+    Object.keys(this.errors.getAll()).forEach((name) => {
+      this.errors.set(
+        name as keyof TErrors,
+        undefined as TErrors[keyof TErrors]
+      );
+    });
+  }
+}
+
+export default Form;

package/src/Node.ts

@@ -0,0 +1,42 @@
+import { Observer } from './types';
+import deleteFromArray from './utils/deleteFromArray';
+
+class Node {
+  public readonly name: string;
+
+  public readonly parent: Node | null;
+
+  public readonly nodes: Record<string, Node>;
+
+  public readonly observers: Observer[];
+
+  public constructor(parent: Node | null = null, name = '') {
+    this.name = name;
+    this.parent = parent;
+    this.nodes = {};
+    this.observers = [];
+  }
+
+  public getNode(name: string): Node | undefined {
+    return this.nodes[name];
+  }
+
+  public createNode(name: string): Node {
+    this.nodes[name] = new Node(this, name);
+    return this.nodes[name];
+  }
+
+  public deleteNode(name: string): void {
+    delete this.nodes[name];
+  }
+
+  public addObserver(observer: Observer): void {
+    this.observers.push(observer);
+  }
+
+  public deleteObserver(observer: Observer): void {
+    deleteFromArray(this.observers, observer);
+  }
+}
+
+export default Node;

package/src/ValueData.ts

@@ -0,0 +1,31 @@
+import { Path, PathReturn, Values } from './types';
+import clone from './utils/clone';
+import { get, set } from './utils/path';
+import ValueObserverManager from './ValueObserverManager';
+
+class ValueData<
+  TValues extends Values,
+  TName extends Path<TValues> = Path<TValues>
+> extends ValueObserverManager<TValues> {
+  private readonly values: TValues;
+
+  public constructor(values: TValues) {
+    super();
+    this.values = values;
+  }
+
+  public get<T extends TName>(name: T): PathReturn<TValues, T> {
+    return clone(get(this.values, name));
+  }
+
+  public getAll(): TValues {
+    return clone(this.values);
+  }
+
+  public set<T extends TName>(name: T, value: PathReturn<TValues, T>): void {
+    const ok = set(this.values, name, clone(value));
+    if (ok) this.callObservers(name, this.values);
+  }
+}
+
+export default ValueData;

package/src/ValueObserverManager.ts

@@ -0,0 +1,83 @@
+import BroadcastObserverManager from './BroadcastObserverManager';
+import Node from './Node';
+import { Observer, Path, PathReturn, Subscription, Values } from './types';
+import { get, isObjectOrArray } from './utils/path';
+
+const split = (path: string) => path.split('.');
+
+class ValueObserverManager<
+  TValues extends Values,
+  TName extends Path<TValues> = Path<TValues>
+> extends BroadcastObserverManager<TName, TValues[TName]> {
+  private readonly root: Node;
+
+  public constructor() {
+    super();
+    this.root = new Node();
+  }
+
+  private findNode(path: string) {
+    const keys = split(path);
+    let cur = this.root;
+    keys.forEach((key) => {
+      cur = cur.getNode(key) || cur.createNode(key);
+    });
+    return cur;
+  }
+
+  public subscribe<T extends TName>(
+    name: T,
+    observer: Observer<PathReturn<TValues, T>>
+  ): Subscription {
+    const node = this.findNode(name);
+    node.addObserver(observer);
+
+    return {
+      unsubscribe: () => {
+        node.deleteObserver(observer);
+        if (node.observers.length === 0) {
+          node.parent?.deleteNode(node.name);
+        }
+      },
+    };
+  }
+
+  protected callObservers<T extends TName>(name: T, data: TValues): void {
+    this.callBroadcastObservers(name, get(data, name));
+    this.callNodeObservers(name, data);
+  }
+
+  private callNodeObservers<T extends TName>(name: T, data: TValues): void {
+    const keys = split(name);
+    let curNode = this.root;
+    let curData = data;
+
+    // Call the observers for the root node
+    curNode.observers.forEach((observer) => observer(curData));
+
+    // Call observers on each node from the root to the specified one
+    for (let i = 0; i < keys.length; i += 1) {
+      const key = keys[i];
+      const node = curNode.getNode(key);
+      if (!node || !isObjectOrArray(curData)) return;
+      curNode = node;
+      curData = curData[key];
+      // eslint-disable-next-line @typescript-eslint/no-loop-func
+      curNode.observers.forEach((observer) => observer(curData));
+    }
+
+    // Call observers of all child nodes started from the specified one
+    this.callChildObservers(curNode, curData);
+  }
+
+  private callChildObservers(parent: Node, data: TValues): void {
+    if (!isObjectOrArray(data)) return;
+    Object.entries(parent.nodes).forEach(([name, node]) => {
+      const value = data[name];
+      node.observers.forEach((observer) => observer(value));
+      this.callChildObservers(node, value);
+    });
+  }
+}
+
+export default ValueObserverManager;

package/src/index.tsx

@@ -0,0 +1,246 @@
+import {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import Form from './Form';
+import { Path, PathReturn, Values } from './types';
+import useFormContext from './useFormContext';
+import isEqual from './utils/isEqual';
+import { get } from './utils/path';
+import useDeepEqualMemo from './utils/useDeepEqualMemo';
+
+export * from './BroadcastObserverManager';
+export * from './ErrorObserverManager';
+export { default as Form } from './Form';
+export * from './types';
+export * from './useFormContext';
+
+const createUseValueHook =
+  <TValues extends Values>(form: Form<TValues>) =>
+  <TName extends Path<TValues>>(name: TName) => {
+    const [value, setValue] = useState<PathReturn<TValues, TName>>(
+      form.values.get(name)
+    );
+
+    useEffect(() => {
+      const subscription = form.values.subscribe(name, (v) => {
+        setValue(v);
+      });
+      return () => subscription.unsubscribe();
+    }, [name]);
+
+    return value;
+  };
+
+const createUseErrorHook =
+  <TValues extends Values>(form: Form<TValues>) =>
+  <TName extends Path<TValues>>(name: TName) => {
+    const [value, setValue] = useState<string | undefined>(
+      form.errors.get(name)
+    );
+
+    useEffect(() => {
+      const subscription = form.errors.subscribe(name, (v) => {
+        setValue(v);
+      });
+      return () => subscription.unsubscribe();
+    }, [name]);
+
+    return value;
+  };
+
+export type Transformer<TValues extends Values, TName extends Path<TValues>> = (
+  value: PathReturn<TValues, TName>
+) => {
+  [K in Path<TValues>]?: PathReturn<TValues, K>;
+};
+
+const createUseTransformerHook = <TValues extends Values>(
+  form: Form<TValues>
+) => {
+  const useValue = createUseValueHook(form);
+  return <TName extends Path<TValues>>(
+    name: TName,
+    transformer: Transformer<TValues, TName>
+  ) => {
+    const value = useValue(name);
+
+    const transformerRef = useRef(transformer);
+    useEffect(() => {
+      transformerRef.current = transformer;
+    }, [transformer]);
+
+    useEffect(() => {
+      const partialValues = transformerRef.current(value);
+      Object.entries(partialValues).forEach(([n, v]) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        form.values.set(n as Path<TValues>, v as any);
+      });
+    }, [value]);
+  };
+};
+
+interface InputProps<TValue> {
+  value: TValue;
+  onChange: (value: TValue) => void;
+}
+interface FieldState {
+  error?: string;
+  modified: boolean;
+  reset: () => void;
+}
+interface FieldProps<TName, TValue, TData> {
+  name: TName;
+  data?: TData;
+  transformer?: (value: TValue) => TValue;
+  render: (
+    inputProps: InputProps<TValue>,
+    fieldState: FieldState,
+    data: TData
+  ) => ReactElement | null;
+}
+
+const createFieldComponent = <TValues extends Values>(form: Form<TValues>) => {
+  const useValue = createUseValueHook(form);
+  const useError = createUseErrorHook(form);
+  return <TName extends Path<TValues>, TData>(
+    props: FieldProps<TName, PathReturn<TValues, TName>, TData>
+  ) => {
+    const { name, data, transformer = (v) => v, render } = props;
+
+    const value = useValue(name);
+    const error = useError(name);
+
+    const initValue = useMemo(() => get(form.initValues, name), [name]);
+    const modified = useMemo(
+      () => !isEqual(value, initValue),
+      [initValue, value]
+    );
+    const reset = useCallback(
+      () => form.values.set(name, initValue),
+      [initValue, name]
+    );
+
+    const transformerRef = useRef(transformer);
+    useEffect(() => {
+      transformerRef.current = transformer;
+    }, [transformer]);
+
+    const onChange = useCallback(
+      (v: PathReturn<TValues, TName>) => {
+        form.values.set(name, transformerRef.current(v));
+      },
+      [name]
+    );
+
+    // Reset the error when the value was changed
+    useEffect(() => {
+      form.errors.set(name, undefined);
+    }, [name, value]);
+
+    const renderRef = useRef(render);
+    useEffect(() => {
+      renderRef.current = render;
+    }, [render]);
+
+    const inputProps = useMemo(() => ({ value, onChange }), [onChange, value]);
+    const fieldState = useMemo(
+      () => ({ error, modified, reset }),
+      [error, modified, reset]
+    );
+
+    const memoizedData = useDeepEqualMemo(() => data as TData, [data]);
+
+    return useMemo(
+      () => renderRef.current(inputProps, fieldState, memoizedData),
+      [fieldState, inputProps, memoizedData]
+    );
+  };
+};
+
+const useModifiedFields = <TValues extends Values>(form: Form<TValues>) => {
+  const [modifiedFields, setModifiedFields] = useState<Array<Path<TValues>>>(
+    []
+  );
+
+  const modifiedFieldsRef = useRef(modifiedFields);
+  useEffect(() => {
+    modifiedFieldsRef.current = modifiedFields;
+  }, [modifiedFields]);
+
+  const initValuesRef = useRef(form.initValues);
+  useEffect(() => {
+    initValuesRef.current = form.initValues;
+  }, [form.initValues]);
+
+  useEffect(() => {
+    const subscription = form.values.subscribeToAll((name, value) => {
+      const isInitValue = isEqual(value, get(initValuesRef.current, name));
+      const fields = modifiedFieldsRef.current;
+
+      if (fields.includes(name)) {
+        if (isInitValue) {
+          setModifiedFields(fields.filter((field) => field !== name));
+        }
+      } else if (!isInitValue) {
+        setModifiedFields([...fields, name]);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [form.values]);
+
+  return modifiedFields;
+};
+
+const useFormResponse = <TValues extends Values>(form: Form<TValues>) => {
+  const Field = useMemo(() => createFieldComponent(form), [form]);
+  const useValue = useMemo(() => createUseValueHook(form), [form]);
+  const useError = useMemo(() => createUseErrorHook(form), [form]);
+  const useTransformer = useMemo(() => createUseTransformerHook(form), [form]);
+
+  const modifiedFields = useModifiedFields(form);
+  const modified = useMemo(
+    () => modifiedFields.length > 0,
+    [modifiedFields.length]
+  );
+
+  return useMemo(
+    () => ({
+      form,
+      Field,
+      useValue,
+      useError,
+      useTransformer,
+      modifiedFields,
+      modified,
+    }),
+    [Field, form, modified, modifiedFields, useError, useTransformer, useValue]
+  );
+};
+
+export const useForm = <TValues extends Values = Values>(
+  initValues: TValues
+) => {
+  const memoizedInitValues = useDeepEqualMemo<TValues>(
+    () => initValues,
+    [initValues]
+  );
+
+  const formRef = useRef(new Form<TValues>(memoizedInitValues));
+  useEffect(() => {
+    formRef.current.initValues = memoizedInitValues;
+    formRef.current.reset();
+  }, [memoizedInitValues]);
+
+  return useFormResponse(formRef.current);
+};
+
+export const useExistingForm = <TValues extends Values = Values>() => {
+  const form = useFormContext<Form<TValues> | null>();
+  if (!form) throw new Error('Wrap your form in a FormProvider');
+  return useFormResponse(form);
+};

package/src/types.ts

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+type Separator = '.';
+type KeysWithSeparator<K1, K2> = `${K1 & string}${Separator}${K2 & string}`;
+
+type OwnKeyOf<T> = Exclude<keyof T, keyof any[]> & string;
+type IsAny<T> = unknown extends T & string ? true : false;
+
+export type Path<T, K = OwnKeyOf<T>> = IsAny<T> extends true
+  ? string
+  : T extends object
+  ?
+      | K
+      | (K extends keyof T
+          ? T[K] extends object
+            ? KeysWithSeparator<K, Path<T[K]>>
+            : never
+          : never)
+  : never;
+
+export type PathReturn<T, K> = K extends keyof T
+  ? T[K]
+  : K extends `${infer U}${Separator}${infer R}`
+  ? U extends keyof T
+    ? PathReturn<T[U], R>
+    : never
+  : never;
+
+export type Values<T = any> = Record<string, T>;
+export type Errors<T = any> = Record<Path<T>, string | undefined>;
+
+export type Observer<V = any> = (value: V) => void;
+export interface Subscription {
+  unsubscribe: () => void;
+}

package/src/useFormContext.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+import Form from './Form';
+import { Values } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FormContext = createContext<any>(null);
+
+export interface FormProviderProps<TValues extends Values> {
+  form: Form<TValues>;
+  children?: ReactNode;
+}
+
+// eslint-disable-next-line react/function-component-definition
+export function FormProvider<TValues extends Values>({
+  form,
+  children,
+}: FormProviderProps<TValues>) {
+  return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
+}
+
+function useFormContext<T>() {
+  return useContext<T>(FormContext);
+}
+
+export default useFormContext;

package/src/utils/clone.ts

@@ -0,0 +1,27 @@
+import { isValidElement } from 'react';
+
+const clone = <T>(value: T): T => {
+  if (typeof value === 'object') {
+    if (Array.isArray(value)) {
+      return value.map((item) => clone(item)) as T;
+    }
+
+    if (isValidElement(value)) return value;
+    if (typeof window !== 'undefined' && value instanceof File) {
+      return value;
+    }
+
+    if (value !== null) {
+      const clonedObj = {};
+      Object.entries(value).forEach(([objKey, objValue]) => {
+        clonedObj[objKey] = clone(objValue);
+      });
+      Object.setPrototypeOf(clonedObj, Object.getPrototypeOf(value));
+      return clonedObj as T;
+    }
+  }
+
+  return value;
+};
+
+export default clone;

package/src/utils/deleteFromArray.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const deleteFromArray = (arr: any[], item: any) => {
+  const index = arr.findIndex((i) => i === item);
+  if (index === -1) return;
+  arr.splice(index, 1);
+};
+
+export default deleteFromArray;

package/src/utils/isEqual.ts

@@ -0,0 +1,38 @@
+import { isValidElement } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isEqual = (value1: any, value2: any): boolean => {
+  if (typeof value1 !== typeof value2) return false;
+
+  if (typeof value1 === 'object') {
+    if (isValidElement(value1) || isValidElement(value2)) {
+      return value1 === value2;
+    }
+    if (Array.isArray(value1) !== Array.isArray(value2)) return false;
+
+    if (Array.isArray(value1)) {
+      if (value1.length !== value2.length) return false;
+
+      return value1.every((item1, index) => {
+        const item2 = value2[index];
+        return isEqual(item1, item2);
+      });
+    }
+
+    if (value1 !== null && value2 !== null) {
+      if (Object.keys(value1).length !== Object.keys(value2).length) {
+        return false;
+      }
+
+      return Object.entries(value1).every(([objKey, objValue1]) => {
+        if (!Object.hasOwn(value2, objKey)) return false;
+        const objValue2 = value2[objKey];
+        return isEqual(objValue1, objValue2);
+      });
+    }
+  }
+
+  return Object.is(value1, value2);
+};
+
+export default isEqual;

package/src/utils/path.ts

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-explicit-any,no-param-reassign */
+
+export const isObjectOrArray = (value: any): value is object =>
+  typeof value === 'object' && value !== null;
+
+const split = (path: string) => {
+  const groups = path.match(/^([^.]*)\.(.*)$/);
+  return groups ? [groups[1], groups[2]] : null;
+};
+
+export const get = (data: Record<string, any>, path: string): any => {
+  if (Object.hasOwn(data, path)) {
+    return data[path];
+  }
+
+  const groups = split(path);
+  if (!groups) return undefined;
+
+  const [key, nextPath] = groups;
+  if (!Object.hasOwn(data, key)) return undefined;
+  if (!isObjectOrArray(data[key])) return undefined;
+
+  return get(data[key], nextPath);
+};
+
+export const set = (
+  data: Record<string, any>,
+  path: string,
+  value: any
+): boolean => {
+  if (Object.hasOwn(data, path)) {
+    data[path] = value;
+    return true;
+  }
+
+  const groups = split(path);
+  if (!groups) return false;
+
+  const [key, nextPath] = groups;
+  if (!Object.hasOwn(data, key)) return false;
+  if (!isObjectOrArray(data[key])) return false;
+
+  return set(data[key], nextPath, value);
+};

package/src/utils/useDeepEqualMemo.ts

@@ -0,0 +1,19 @@
+import { DependencyList, useMemo, useRef } from 'react';
+import clone from './clone';
+import isEqual from './isEqual';
+
+const useDeepEqualMemoize = <T>(value: T) => {
+  const ref = useRef<T | undefined>(undefined);
+  if (!isEqual(ref.current, value)) {
+    ref.current = clone(value);
+  }
+  return ref.current;
+};
+
+/* eslint-disable react-hooks/exhaustive-deps */
+const useDeepEqualMemo = <T>(
+  factory: () => T,
+  deps: DependencyList | undefined
+): T => useMemo(factory, deps ? deps.map(useDeepEqualMemoize) : undefined);
+
+export default useDeepEqualMemo;