@firecms/formex 3.0.0-3.0.0-beta.4.pre.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 FireCMS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,165 @@
+# Formex - React Form Library
+
+Formex is a lightweight, flexible library designed to simplify form handling within React applications. By leveraging React's powerful context and hooks features, Formex allows for efficient form state management with minimal boilerplate code.
+
+## Features
+
+- Lightweight and easy to integrate
+- Supports custom field components
+- Built-in validation handling
+- Provides both field-level and form-level state management
+
+## Installation
+
+To install Formex, you can use either npm or yarn:
+
+```sh
+npm install your-formex-package-name
+
+# or if you're using yarn
+
+yarn add your-formex-package-name
+```
+
+## Quick Start
+
+To get started with Formex, you first need to create your form context and form controller using the `useCreateFormex` hook. Then, you can structure your form using the `<Field />` components provided by Formex.
+
+### Step 1: Create your form controller
+
+```jsx
+import React from 'react';
+import { useCreateFormex } from 'formex-library';
+
+const MyForm = () => {
+    const formController = useCreateFormex({
+        initialValues: {
+            name: '',
+            email: '',
+        },
+        // Optionally add a validation function
+        // validation: values => {
+        //   const errors = {};
+        //   if (!values.name) errors.name = 'Name is required';
+        //   return errors;
+        // },
+        onSubmit: (values) => {
+            console.log('Form Submitted:', values);
+        },
+    });
+
+    return (
+        <form onSubmit={formController.handleSubmit}>
+            {/* Field components go here */}
+        </form>
+    );
+};
+```
+
+### Step 2: Use the `<Field />` component
+
+```jsx
+import { Field } from 'formex-library';
+
+// Inside your form component
+<Field name="name">
+  {({ field }) => (
+    <input
+      {...field}
+      placeholder="Your name"
+    />
+  )}
+</Field>
+
+<Field name="email">
+  {({ field }) => (
+    <input
+      {...field}
+      type="email"
+      placeholder="Your email"
+    />
+  )}
+</Field>
+
+<button type="submit">Submit</button>
+```
+
+### Handling Submissions
+
+Wrap your form inputs and submit button within a form element and pass the `submitForm` method from your form controller to the form's `onSubmit` event:
+
+```jsx
+<form onSubmit={formController.handleSubmit}>
+    {/* Fields and submit button */}
+</form>
+```
+
+## API Reference
+
+### `useCreateFormex`
+
+Hook to create a form controller.
+
+**Parameters**
+
+- `initialValues`: An object with your form's initial values.
+- `initialErrors` (optional): An object for any initial validation errors.
+- `validation` (optional): A function for validating form data.
+- `validateOnChange` (optional): If `true`, validates fields whenever they change.
+- `onSubmit`: A function that fires when the form is submitted.
+
+
+### `<Field />`
+
+A component used to render individual form fields.
+
+**Props**
+
+- `name`: The name of the form field.
+- `as` (optional): The component or HTML tag that should be rendered. Defaults to `"input"`.
+- `children`: A function that returns the field input component. Receives field props as its parameter.
+
+**Example**
+
+```jsx
+<Field name="username">
+  {({ field }) => <input {...field} />}
+</Field>
+```
+
+## Customization
+
+Formex is designed to be flexible. You can create custom field components, use any validation library, or integrate with UI component libraries.
+
+### Using with UI Libraries
+
+```jsx
+import { Field } from 'formex-library';
+import { TextField } from 'some-ui-library';
+
+<Field name="username">
+  {({ field }) => (
+    <TextField {...field} label="Username" />
+  )}
+</Field>
+```
+
+### Custom Validation
+
+Leverage the `validation` function in `useCreateFormex` to integrate any validation logic or library.
+
+```jsx
+const validate = values => {
+  const errors = {};
+  if (!values.email.includes('@')) {
+    errors.email = 'Invalid email';
+  }
+  return errors;
+};
+```
+
+## Conclusion
+
+Formex provides a simple yet powerful way to manage forms in React applications. It reduces the amount of boilerplate code needed and offers flexibility to work with custom components and validation strategies. Whether you are building simple or complex forms, Formex can help streamline your form management process.
+
+For further examples and advanced usage, refer to the Formex documentation or source code.

package/dist/Field.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { FormexController } from "./types";
+export interface FieldInputProps<Value> {
+    /** Value of the field */
+    value: Value;
+    /** Name of the field */
+    name: string;
+    /** Multiple select? */
+    multiple?: boolean;
+    /** Is the field checked? */
+    checked?: boolean;
+    /** Change event handler */
+    onChange: (event: React.SyntheticEvent) => void;
+    /** Blur event handler */
+    onBlur: (event: React.FocusEvent) => void;
+}
+export interface FormexFieldProps<Value = any, FormValues extends object = any> {
+    field: FieldInputProps<Value>;
+    form: FormexController<FormValues>;
+}
+export type FieldValidator = (value: any) => string | void | Promise<string | void>;
+export interface FieldConfig<Value, C extends React.ElementType | undefined = undefined> {
+    /**
+     * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.
+     */
+    as?: C | string | React.ForwardRefExoticComponent<any>;
+    /**
+     * Children render function <Field name>{props => ...}</Field>)
+     */
+    children?: ((props: FormexFieldProps<Value>) => React.ReactNode) | React.ReactNode;
+    /**
+     * Validate a single field value independently
+     */
+    /**
+     * Used for 'select' and related input types.
+     */
+    multiple?: boolean;
+    /**
+     * Field name
+     */
+    name: string;
+    /** HTML input type */
+    type?: string;
+    /** Field value */
+    value?: any;
+    /** Inner ref */
+    innerRef?: (instance: any) => void;
+}
+export type FieldProps<T, C extends React.ElementType | undefined> = {
+    as?: C;
+} & (C extends React.ElementType ? (React.ComponentProps<C> & FieldConfig<T, C>) : FieldConfig<T, C>);
+export declare function Field<T, C extends React.ElementType | undefined = undefined>({ validate, name, children, as: is, // `as` is reserved in typescript lol
+className, ...props }: FieldProps<T, C>): any;

package/dist/Formex.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { FormexController } from "./types";
+export declare const useFormex: <T extends object>() => FormexController<T>;
+export declare const Formex: React.Provider<FormexController<any>>;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Field";
+export * from "./Formex";
+export * from "./types";
+export * from "./utils";
+export * from "./useCreateFormex";

package/dist/index.es.js

@@ -0,0 +1,172 @@
+import * as x from "react";
+import b, { useContext as Q, useState as h, useEffect as U } from "react";
+import T from "react-fast-compare";
+const D = b.createContext({}), X = () => Q(D), nt = D.Provider, st = (t) => Array.isArray(t) && t.length === 0, M = (t) => typeof t == "function", y = (t) => t !== null && typeof t == "object", Y = (t) => String(Math.floor(Number(t))) === t, ot = (t) => Object.prototype.toString.call(t) === "[object String]", ct = (t) => t !== t, ut = (t) => x.Children.count(t) === 0, it = (t) => y(t) && M(t.then), at = (t) => t && y(t) && y(t.target);
+function lt(t) {
+  if (t = t || (typeof document < "u" ? document : void 0), typeof t > "u")
+    return null;
+  try {
+    return t.activeElement || t.body;
+  } catch {
+    return t.body;
+  }
+}
+function F(t, a, n, u = 0) {
+  const r = O(a);
+  for (; t && u < r.length; )
+    t = t[r[u++]];
+  return u !== r.length && !t || t === void 0 ? n : t;
+}
+function Z(t, a, n) {
+  const u = V(t);
+  let r = u, e = 0;
+  const i = O(a);
+  for (; e < i.length - 1; e++) {
+    const c = i[e], f = F(t, i.slice(0, e + 1));
+    if (f && (y(f) || Array.isArray(f)))
+      r = r[c] = V(f);
+    else {
+      const d = i[e + 1];
+      r = r[c] = Y(d) && Number(d) >= 0 ? [] : {};
+    }
+  }
+  return (e === 0 ? t : r)[i[e]] === n ? t : (n === void 0 ? delete r[i[e]] : r[i[e]] = n, e === 0 && n === void 0 && delete u[i[e]], u);
+}
+function j(t, a, n = /* @__PURE__ */ new WeakMap(), u = {}) {
+  for (const r of Object.keys(t)) {
+    const e = t[r];
+    y(e) ? n.get(e) || (n.set(e, !0), u[r] = Array.isArray(e) ? [] : {}, j(e, a, n, u[r])) : u[r] = a;
+  }
+  return u;
+}
+function V(t) {
+  return Array.isArray(t) ? [...t] : typeof t == "object" && t !== null ? { ...t } : t;
+}
+function O(t) {
+  return Array.isArray(t) ? t : t.replace(/\[(\d+)]/g, ".$1").replace(/^\./, "").replace(/\.$/, "").split(".");
+}
+function ft({
+  validate: t,
+  name: a,
+  children: n,
+  as: u,
+  // `as` is reserved in typescript lol
+  // component,
+  className: r,
+  ...e
+}) {
+  const i = X(), c = tt({ name: a, ...e }, i);
+  if (M(n))
+    return n({ field: c, form: i });
+  const f = u || "input";
+  if (typeof f == "string") {
+    const { innerRef: d, ...p } = e;
+    return x.createElement(
+      f,
+      { ref: d, ...c, ...p, className: r },
+      n
+    );
+  }
+  return x.createElement(f, { ...c, ...e, className: r }, n);
+}
+const tt = (t, a) => {
+  const n = y(t), u = n ? t.name : t, r = F(a.values, u), e = {
+    name: u,
+    value: r,
+    onChange: a.handleChange,
+    onBlur: a.handleBlur
+  };
+  if (n) {
+    const {
+      type: i,
+      value: c,
+      // value is special for checkboxes
+      as: f,
+      multiple: d
+    } = t;
+    i === "checkbox" ? c === void 0 ? e.checked = !!r : (e.checked = !!(Array.isArray(r) && ~r.indexOf(c)), e.value = c) : i === "radio" ? (e.checked = r === c, e.value = c) : f === "select" && d && (e.value = e.value || [], e.multiple = !0);
+  }
+  return e;
+};
+function dt({ initialValues: t, initialErrors: a, validation: n, validateOnChange: u = !1, onSubmit: r, validateOnInitialRender: e = !1 }) {
+  const i = b.useRef(t), c = b.useRef(t), [f, d] = h(t), [p, R] = h({}), [k, g] = h(a ?? {}), [_, A] = h(!1), [I, C] = h(0), [$, S] = h(!1), [q, w] = h(!1);
+  U(() => {
+    e && E();
+  }, []);
+  const W = (s) => {
+    c.current = s, d(s), A(T(i.current, s));
+  }, E = async () => {
+    w(!0);
+    const s = c.current, o = await n?.(s);
+    return g(o ?? {}), w(!1), o;
+  }, N = (s, o, l) => {
+    const m = Z(c.current, s, o);
+    c.current = m, d(m), T(F(i.current, s), o) || A(!0), l && E();
+  }, z = (s, o) => {
+    const l = { ...k };
+    o ? l[s] = o : delete l[s], g(l);
+  }, v = (s, o, l) => {
+    const m = { ...p };
+    m[s] = o, R(m), l && E();
+  }, G = (s) => {
+    const o = s.target, l = o.type === "checkbox" ? o.checked : o.value, m = o.name;
+    N(m, l, u), v(m, !0);
+  }, H = (s) => {
+    const l = s.target.name;
+    v(l, !0);
+  }, J = async (s) => {
+    s?.preventDefault(), s?.stopPropagation(), S(!0), C(I + 1);
+    const o = await n?.(c.current);
+    o && Object.keys(o).length > 0 ? g(o) : (g({}), await r?.(c.current, B.current)), S(!1);
+  }, K = (s) => {
+    const {
+      submitCount: o,
+      values: l,
+      errors: m,
+      touched: L
+    } = s ?? {};
+    i.current = l ?? t, c.current = l ?? t, d(l ?? t), g(m ?? {}), R(L ?? {}), A(!1), C(o ?? 0);
+  }, P = {
+    values: f,
+    initialValues: i.current,
+    handleChange: G,
+    isSubmitting: $,
+    setSubmitting: S,
+    setValues: W,
+    setFieldValue: N,
+    errors: k,
+    setFieldError: z,
+    touched: p,
+    setFieldTouched: v,
+    dirty: _,
+    setDirty: A,
+    handleSubmit: J,
+    submitCount: I,
+    setSubmitCount: C,
+    handleBlur: H,
+    validate: E,
+    isValidating: q,
+    resetForm: K
+  }, B = b.useRef(P);
+  return B.current = P, P;
+}
+export {
+  ft as Field,
+  nt as Formex,
+  lt as getActiveElement,
+  F as getIn,
+  st as isEmptyArray,
+  ut as isEmptyChildren,
+  M as isFunction,
+  at as isInputEvent,
+  Y as isInteger,
+  ct as isNaN,
+  y as isObject,
+  it as isPromise,
+  ot as isString,
+  Z as setIn,
+  j as setNestedObjectValues,
+  dt as useCreateFormex,
+  X as useFormex
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/Formex.tsx","../src/utils.ts","../src/Field.tsx","../src/useCreateFormex.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { FormexController } from \"./types\";\n\nconst FormexContext = React.createContext<FormexController<any>>({} as any);\n\nexport const useFormex = <T extends object>() => useContext<FormexController<T>>(FormexContext);\n\nexport const Formex = FormexContext.Provider;\n","import * as React from \"react\";\n\n/** @private is the value an empty array? */\nexport const isEmptyArray = (value?: any) =>\n    Array.isArray(value) && value.length === 0;\n\n/** @private is the given object a Function? */\nexport const isFunction = (obj: any): obj is Function =>\n    typeof obj === \"function\";\n\n/** @private is the given object an Object? */\nexport const isObject = (obj: any): obj is Object =>\n    obj !== null && typeof obj === \"object\";\n\n/** @private is the given object an integer? */\nexport const isInteger = (obj: any): boolean =>\n    String(Math.floor(Number(obj))) === obj;\n\n/** @private is the given object a string? */\nexport const isString = (obj: any): obj is string =>\n    Object.prototype.toString.call(obj) === \"[object String]\";\n\n/** @private is the given object a NaN? */\n// eslint-disable-next-line no-self-compare\nexport const isNaN = (obj: any): boolean => obj !== obj;\n\n/** @private Does a React component have exactly 0 children? */\nexport const isEmptyChildren = (children: any): boolean =>\n    React.Children.count(children) === 0;\n\n/** @private is the given object/value a promise? */\nexport const isPromise = (value: any): value is PromiseLike<any> =>\n    isObject(value) && isFunction(value.then);\n\n/** @private is the given object/value a type of synthetic event? */\nexport const isInputEvent = (value: any): value is React.SyntheticEvent<any> =>\n    value && isObject(value) && isObject(value.target);\n\n/**\n * Same as document.activeElement but wraps in a try-catch block. In IE it is\n * not safe to call document.activeElement if there is nothing focused.\n *\n * The activeElement will be null only if the document or document body is not\n * yet defined.\n *\n * @param {?Document} doc Defaults to current document.\n * @return {Element | null}\n * @see https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getActiveElement.js\n */\nexport function getActiveElement(doc?: Document): Element | null {\n    doc = doc || (typeof document !== \"undefined\" ? document : undefined);\n    if (typeof doc === \"undefined\") {\n        return null;\n    }\n    try {\n        return doc.activeElement || doc.body;\n    } catch (e) {\n        return doc.body;\n    }\n}\n\n/**\n * Deeply get a value from an object via its path.\n */\nexport function getIn(\n    obj: any,\n    key: string | string[],\n    def?: any,\n    p = 0\n) {\n    const path = toPath(key);\n    while (obj && p < path.length) {\n        obj = obj[path[p++]];\n    }\n\n    // check if path is not in the end\n    if (p !== path.length && !obj) {\n        return def;\n    }\n\n    return obj === undefined ? def : obj;\n}\n\nexport function setIn(obj: any, path: string, value: any): any {\n    const res: any = clone(obj); // this keeps inheritance when obj is a class\n    let resVal: any = res;\n    let i = 0;\n    const pathArray = toPath(path);\n\n    for (; i < pathArray.length - 1; i++) {\n        const currentPath: string = pathArray[i];\n        const currentObj: any = getIn(obj, pathArray.slice(0, i + 1));\n\n        if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {\n            resVal = resVal[currentPath] = clone(currentObj);\n        } else {\n            const nextPath: string = pathArray[i + 1];\n            resVal = resVal[currentPath] =\n                isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};\n        }\n    }\n\n    // Return original object if new value is the same as current\n    if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {\n        return obj;\n    }\n\n    if (value === undefined) {\n        delete resVal[pathArray[i]];\n    } else {\n        resVal[pathArray[i]] = value;\n    }\n\n    // If the path array has a single element, the loop did not run.\n    // Deleting on `resVal` had no effect in this scenario, so we delete on the result instead.\n    if (i === 0 && value === undefined) {\n        delete res[pathArray[i]];\n    }\n\n    return res;\n}\n\n/**\n * Recursively a set the same value for all keys and arrays nested object, cloning\n * @param object\n * @param value\n * @param visited\n * @param response\n */\nexport function setNestedObjectValues<T>(\n    object: any,\n    value: any,\n    visited: any = new WeakMap(),\n    response: any = {}\n): T {\n    for (const k of Object.keys(object)) {\n        const val = object[k];\n        if (isObject(val)) {\n            if (!visited.get(val)) {\n                visited.set(val, true);\n                // In order to keep array values consistent for both dot path  and\n                // bracket syntax, we need to check if this is an array so that\n                // this will output  { friends: [true] } and not { friends: { \"0\": true } }\n                response[k] = Array.isArray(val) ? [] : {};\n                setNestedObjectValues(val, value, visited, response[k]);\n            }\n        } else {\n            response[k] = value;\n        }\n    }\n\n    return response;\n}\n\nfunction clone(value: any) {\n    if (Array.isArray(value)) {\n        return [...value];\n    } else if (typeof value === \"object\" && value !== null) {\n        return { ...value };\n    } else {\n        return value; // This is for primitive types which do not need cloning.\n    }\n}\n\nfunction toPath(value: string | string[]) {\n    if (Array.isArray(value)) return value; // Already in path array form.\n    // Replace brackets with dots, remove leading/trailing dots, then split by dot.\n    return value.replace(/\\[(\\d+)]/g, \".$1\").replace(/^\\./, \"\").replace(/\\.$/, \"\").split(\".\");\n}\n","import * as React from \"react\";\nimport { useFormex } from \"./Formex\";\nimport { getIn, isFunction, isObject } from \"./utils\";\nimport { FormexController } from \"./types\";\n\nexport interface FieldInputProps<Value> {\n    /** Value of the field */\n    value: Value;\n    /** Name of the field */\n    name: string;\n    /** Multiple select? */\n    multiple?: boolean;\n    /** Is the field checked? */\n    checked?: boolean;\n    /** Change event handler */\n    onChange: (event: React.SyntheticEvent) => void,\n    /** Blur event handler */\n    onBlur: (event: React.FocusEvent) => void,\n}\n\nexport interface FormexFieldProps<Value = any, FormValues extends object = any> {\n    field: FieldInputProps<Value>;\n    form: FormexController<FormValues>;\n}\n\nexport type FieldValidator = (\n    value: any\n) => string | void | Promise<string | void>;\n\nexport interface FieldConfig<Value, C extends React.ElementType | undefined = undefined> {\n\n    /**\n     * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.\n     */\n    as?:\n        | C\n        | string\n        | React.ForwardRefExoticComponent<any>;\n\n    /**\n     * Children render function <Field name>{props => ...}</Field>)\n     */\n    children?: ((props: FormexFieldProps<Value>) => React.ReactNode) | React.ReactNode;\n\n    /**\n     * Validate a single field value independently\n     */\n    // validate?: FieldValidator;\n\n    /**\n     * Used for 'select' and related input types.\n     */\n    multiple?: boolean;\n\n    /**\n     * Field name\n     */\n    name: string;\n\n    /** HTML input type */\n    type?: string;\n\n    /** Field value */\n    value?: any;\n\n    /** Inner ref */\n    innerRef?: (instance: any) => void;\n\n}\n\nexport type FieldProps<T, C extends React.ElementType | undefined> = {\n    as?: C;\n} & (C extends React.ElementType ? (React.ComponentProps<C> & FieldConfig<T, C>) : FieldConfig<T, C>);\n\nexport function Field<T, C extends React.ElementType | undefined = undefined>({\n                                                                                  validate,\n                                                                                  name,\n                                                                                  children,\n                                                                                  as: is, // `as` is reserved in typescript lol\n                                                                                  // component,\n                                                                                  className,\n                                                                                  ...props\n                                                                              }: FieldProps<T, C>) {\n    const formex = useFormex();\n\n    const field = getFieldProps({ name, ...props }, formex);\n\n    if (isFunction(children)) {\n        return children({ field, form: formex });\n    }\n\n    // if (component) {\n    //     if (typeof component === \"string\") {\n    //         const { innerRef, ...rest } = props;\n    //         return React.createElement(\n    //             component,\n    //             { ref: innerRef, ...field, ...rest, className },\n    //             children\n    //         );\n    //     }\n    //     return React.createElement(\n    //         component,\n    //         { field, form: formex, ...props, className },\n    //         children\n    //     );\n    // }\n\n    // default to input here so we can check for both `as` and `children` above\n    const asElement = is || \"input\";\n\n    if (typeof asElement === \"string\") {\n        const { innerRef, ...rest } = props;\n        return React.createElement(\n            asElement,\n            { ref: innerRef, ...field, ...rest, className },\n            children\n        );\n    }\n\n    return React.createElement(asElement, { ...field, ...props, className }, children);\n}\n\nconst getFieldProps = (nameOrOptions: string | FieldConfig<any>, formex: FormexController<any>): FieldInputProps<any> => {\n    const isAnObject = isObject(nameOrOptions);\n    const name = isAnObject\n        ? (nameOrOptions as FieldConfig<any>).name\n        : nameOrOptions;\n    const valueState = getIn(formex.values, name);\n\n    const field: FieldInputProps<any> = {\n        name,\n        value: valueState,\n        onChange: formex.handleChange,\n        onBlur: formex.handleBlur,\n    };\n    if (isAnObject) {\n        const {\n            type,\n            value: valueProp, // value is special for checkboxes\n            as: is,\n            multiple,\n        } = nameOrOptions as FieldConfig<any>;\n\n        if (type === \"checkbox\") {\n            if (valueProp === undefined) {\n                field.checked = !!valueState;\n            } else {\n                field.checked = !!(\n                    Array.isArray(valueState) && ~valueState.indexOf(valueProp)\n                );\n                field.value = valueProp;\n            }\n        } else if (type === \"radio\") {\n            field.checked = valueState === valueProp;\n            field.value = valueProp;\n        } else if (is === \"select\" && multiple) {\n            field.value = field.value || [];\n            field.multiple = true;\n        }\n    }\n    return field;\n};\n","import React, { FormEvent, useEffect, useState } from \"react\";\nimport { getIn, setIn } from \"./utils\";\nimport equal from \"react-fast-compare\"\n\nimport { FormexController, FormexResetProps } from \"./types\";\n\nexport function useCreateFormex<T extends object>({ initialValues, initialErrors, validation, validateOnChange = false, onSubmit, validateOnInitialRender = false }: {\n    initialValues: T,\n    initialErrors?: Record<string, string>,\n    validateOnChange?: boolean,\n    validateOnInitialRender?: boolean,\n    validation?: (values: T) => Record<string, string> | Promise<Record<string, string>> | undefined | void,\n    onSubmit?: (values: T, controller: FormexController<T>) => void | Promise<void>\n}): FormexController<T> {\n\n    const initialValuesRef = React.useRef<T>(initialValues);\n    const valuesRef = React.useRef<T>(initialValues);\n\n    const [values, setValuesInner] = useState<T>(initialValues);\n    const [touchedState, setTouchedState] = useState<Record<string, boolean>>({});\n    const [errors, setErrors] = useState<Record<string, string>>(initialErrors ?? {});\n    const [dirty, setDirty] = useState(false);\n    const [submitCount, setSubmitCount] = useState(0);\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    const [isValidating, setIsValidating] = useState(false);\n\n    useEffect(() => {\n        if (validateOnInitialRender) {\n            validate();\n        }\n    }, []);\n\n    const setValues = (newValues: T) => {\n        valuesRef.current = newValues;\n        setValuesInner(newValues);\n        setDirty(equal(initialValuesRef.current, newValues));\n    }\n\n    const validate = async () => {\n        setIsValidating(true);\n        const values = valuesRef.current;\n        const validationErrors = await validation?.(values);\n        setErrors(validationErrors ?? {});\n        setIsValidating(false);\n        return validationErrors;\n    }\n\n    const setFieldValue = (key: string, value: any, shouldValidate?: boolean) => {\n        const newValues = setIn(valuesRef.current, key, value);\n        valuesRef.current = newValues;\n        setValuesInner(newValues);\n        if (!equal(getIn(initialValuesRef.current, key), value)) {\n            setDirty(true);\n        }\n        if (shouldValidate) {\n            validate();\n        }\n    }\n\n    const setFieldError = (key: string, error: string | undefined) => {\n        const newErrors = { ...errors };\n        if (error) {\n            newErrors[key] = error;\n        } else {\n            delete newErrors[key];\n        }\n        setErrors(newErrors);\n    }\n\n    const setFieldTouched = (key: string, touched: boolean, shouldValidate?: boolean | undefined) => {\n        const newTouched = { ...touchedState };\n        newTouched[key] = touched;\n        setTouchedState(newTouched);\n        if (shouldValidate) {\n            validate();\n        }\n    }\n\n    const handleChange = (event: React.SyntheticEvent) => {\n        const target = event.target as HTMLInputElement;\n        const value = target.type === \"checkbox\" ? target.checked : target.value;\n        const name = target.name;\n        setFieldValue(name, value, validateOnChange);\n        setFieldTouched(name, true);\n    }\n\n    const handleBlur = (event: React.FocusEvent) => {\n        const target = event.target as HTMLInputElement;\n        const name = target.name;\n        setFieldTouched(name, true);\n    }\n\n    const submit = async (e?: FormEvent<HTMLFormElement>) => {\n        e?.preventDefault();\n        e?.stopPropagation();\n        setIsSubmitting(true);\n        setSubmitCount(submitCount + 1);\n        const validationErrors = await validation?.(valuesRef.current);\n        if (validationErrors && Object.keys(validationErrors).length > 0) {\n            setErrors(validationErrors);\n        } else {\n            setErrors({});\n            await onSubmit?.(valuesRef.current, controllerRef.current);\n        }\n        setIsSubmitting(false);\n    }\n\n    const resetForm = (props?: FormexResetProps<T>) => {\n        const {\n            submitCount: submitCountProp,\n            values: valuesProp,\n            errors: errorsProp,\n            touched: touchedProp\n        } = props ?? {};\n        initialValuesRef.current = valuesProp ?? initialValues;\n        valuesRef.current = valuesProp ?? initialValues;\n        setValuesInner(valuesProp ?? initialValues);\n        setErrors(errorsProp ?? {});\n        setTouchedState(touchedProp ?? {});\n        setDirty(false);\n        setSubmitCount(submitCountProp ?? 0);\n    }\n\n    const controller: FormexController<T> = {\n        values,\n        initialValues: initialValuesRef.current,\n        handleChange,\n        isSubmitting,\n        setSubmitting: setIsSubmitting,\n        setValues,\n        setFieldValue,\n        errors,\n        setFieldError,\n        touched: touchedState,\n        setFieldTouched,\n        dirty,\n        setDirty,\n        handleSubmit: submit,\n        submitCount,\n        setSubmitCount,\n        handleBlur,\n        validate,\n        isValidating,\n        resetForm\n    };\n\n    const controllerRef = React.useRef<FormexController<T>>(controller);\n    controllerRef.current = controller;\n    return controller\n}\n"],"names":["FormexContext","React","useFormex","useContext","Formex","isEmptyArray","value","isFunction","obj","isObject","isInteger","isString","isNaN","isEmptyChildren","children","isPromise","isInputEvent","getActiveElement","doc","getIn","key","def","p","path","toPath","setIn","res","clone","resVal","i","pathArray","currentPath","currentObj","nextPath","setNestedObjectValues","object","visited","response","k","val","Field","validate","name","is","className","props","formex","field","getFieldProps","asElement","innerRef","rest","nameOrOptions","isAnObject","valueState","type","valueProp","multiple","useCreateFormex","initialValues","initialErrors","validation","validateOnChange","onSubmit","validateOnInitialRender","initialValuesRef","valuesRef","values","setValuesInner","useState","touchedState","setTouchedState","errors","setErrors","dirty","setDirty","submitCount","setSubmitCount","isSubmitting","setIsSubmitting","isValidating","setIsValidating","useEffect","setValues","newValues","equal","validationErrors","setFieldValue","shouldValidate","setFieldError","error","newErrors","setFieldTouched","touched","newTouched","handleChange","event","target","handleBlur","submit","e","controllerRef","resetForm","submitCountProp","valuesProp","errorsProp","touchedProp","controller"],"mappings":"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"}

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+(function(s,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react"),require("react-fast-compare")):typeof define=="function"&&define.amd?define(["exports","react","react-fast-compare"],f):(s=typeof globalThis<"u"?globalThis:s||self,f(s.Formex={},s.React,s.equal))})(this,function(s,f,k){"use strict";function x(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(a,n,c.get?c:{enumerable:!0,get:()=>e[n]})}}return a.default=e,Object.freeze(a)}const F=x(f),N=f.createContext({}),w=()=>f.useContext(N),G=N.Provider,H=e=>Array.isArray(e)&&e.length===0,v=e=>typeof e=="function",h=e=>e!==null&&typeof e=="object",T=e=>String(Math.floor(Number(e)))===e,J=e=>Object.prototype.toString.call(e)==="[object String]",K=e=>e!==e,L=e=>F.Children.count(e)===0,Q=e=>h(e)&&v(e.then),U=e=>e&&h(e)&&h(e.target);function X(e){if(e=e||(typeof document<"u"?document:void 0),typeof e>"u")return null;try{return e.activeElement||e.body}catch{return e.body}}function b(e,a,n,c=0){const r=V(a);for(;e&&c<r.length;)e=e[r[c++]];return c!==r.length&&!e||e===void 0?n:e}function j(e,a,n){const c=M(e);let r=c,t=0;const l=V(a);for(;t<l.length-1;t++){const u=l[t],m=b(e,l.slice(0,t+1));if(m&&(h(m)||Array.isArray(m)))r=r[u]=M(m);else{const y=l[t+1];r=r[u]=T(y)&&Number(y)>=0?[]:{}}}return(t===0?e:r)[l[t]]===n?e:(n===void 0?delete r[l[t]]:r[l[t]]=n,t===0&&n===void 0&&delete c[l[t]],c)}function D(e,a,n=new WeakMap,c={}){for(const r of Object.keys(e)){const t=e[r];h(t)?n.get(t)||(n.set(t,!0),c[r]=Array.isArray(t)?[]:{},D(t,a,n,c[r])):c[r]=a}return c}function M(e){return Array.isArray(e)?[...e]:typeof e=="object"&&e!==null?{...e}:e}function V(e){return Array.isArray(e)?e:e.replace(/\[(\d+)]/g,".$1").replace(/^\./,"").replace(/\.$/,"").split(".")}function Y({validate:e,name:a,children:n,as:c,className:r,...t}){const l=w(),u=Z({name:a,...t},l);if(v(n))return n({field:u,form:l});const m=c||"input";if(typeof m=="string"){const{innerRef:y,...p}=t;return F.createElement(m,{ref:y,...u,...p,className:r},n)}return F.createElement(m,{...u,...t,className:r},n)}const Z=(e,a)=>{const n=h(e),c=n?e.name:e,r=b(a.values,c),t={name:c,value:r,onChange:a.handleChange,onBlur:a.handleBlur};if(n){const{type:l,value:u,as:m,multiple:y}=e;l==="checkbox"?u===void 0?t.checked=!!r:(t.checked=!!(Array.isArray(r)&&~r.indexOf(u)),t.value=u):l==="radio"?(t.checked=r===u,t.value=u):m==="select"&&y&&(t.value=t.value||[],t.multiple=!0)}return t};function R({initialValues:e,initialErrors:a,validation:n,validateOnChange:c=!1,onSubmit:r,validateOnInitialRender:t=!1}){const l=f.useRef(e),u=f.useRef(e),[m,y]=f.useState(e),[p,B]=f.useState({}),[_,S]=f.useState(a??{}),[ee,A]=f.useState(!1),[q,P]=f.useState(0),[te,C]=f.useState(!1),[ne,$]=f.useState(!1);f.useEffect(()=>{t&&E()},[]);const re=o=>{u.current=o,y(o),A(k(l.current,o))},E=async()=>{$(!0);const o=u.current,i=await n?.(o);return S(i??{}),$(!1),i},z=(o,i,d)=>{const g=j(u.current,o,i);u.current=g,y(g),k(b(l.current,o),i)||A(!0),d&&E()},se=(o,i)=>{const d={..._};i?d[o]=i:delete d[o],S(d)},I=(o,i,d)=>{const g={...p};g[o]=i,B(g),d&&E()},ce=o=>{const i=o.target,d=i.type==="checkbox"?i.checked:i.value,g=i.name;z(g,d,c),I(g,!0)},oe=o=>{const d=o.target.name;I(d,!0)},ie=async o=>{o?.preventDefault(),o?.stopPropagation(),C(!0),P(q+1);const i=await n?.(u.current);i&&Object.keys(i).length>0?S(i):(S({}),await r?.(u.current,W.current)),C(!1)},ue=o=>{const{submitCount:i,values:d,errors:g,touched:ae}=o??{};l.current=d??e,u.current=d??e,y(d??e),S(g??{}),B(ae??{}),A(!1),P(i??0)},O={values:m,initialValues:l.current,handleChange:ce,isSubmitting:te,setSubmitting:C,setValues:re,setFieldValue:z,errors:_,setFieldError:se,touched:p,setFieldTouched:I,dirty:ee,setDirty:A,handleSubmit:ie,submitCount:q,setSubmitCount:P,handleBlur:oe,validate:E,isValidating:ne,resetForm:ue},W=f.useRef(O);return W.current=O,O}s.Field=Y,s.Formex=G,s.getActiveElement=X,s.getIn=b,s.isEmptyArray=H,s.isEmptyChildren=L,s.isFunction=v,s.isInputEvent=U,s.isInteger=T,s.isNaN=K,s.isObject=h,s.isPromise=Q,s.isString=J,s.setIn=j,s.setNestedObjectValues=D,s.useCreateFormex=R,s.useFormex=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/Formex.tsx","../src/utils.ts","../src/Field.tsx","../src/useCreateFormex.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { FormexController } from \"./types\";\n\nconst FormexContext = React.createContext<FormexController<any>>({} as any);\n\nexport const useFormex = <T extends object>() => useContext<FormexController<T>>(FormexContext);\n\nexport const Formex = FormexContext.Provider;\n","import * as React from \"react\";\n\n/** @private is the value an empty array? */\nexport const isEmptyArray = (value?: any) =>\n    Array.isArray(value) && value.length === 0;\n\n/** @private is the given object a Function? */\nexport const isFunction = (obj: any): obj is Function =>\n    typeof obj === \"function\";\n\n/** @private is the given object an Object? */\nexport const isObject = (obj: any): obj is Object =>\n    obj !== null && typeof obj === \"object\";\n\n/** @private is the given object an integer? */\nexport const isInteger = (obj: any): boolean =>\n    String(Math.floor(Number(obj))) === obj;\n\n/** @private is the given object a string? */\nexport const isString = (obj: any): obj is string =>\n    Object.prototype.toString.call(obj) === \"[object String]\";\n\n/** @private is the given object a NaN? */\n// eslint-disable-next-line no-self-compare\nexport const isNaN = (obj: any): boolean => obj !== obj;\n\n/** @private Does a React component have exactly 0 children? */\nexport const isEmptyChildren = (children: any): boolean =>\n    React.Children.count(children) === 0;\n\n/** @private is the given object/value a promise? */\nexport const isPromise = (value: any): value is PromiseLike<any> =>\n    isObject(value) && isFunction(value.then);\n\n/** @private is the given object/value a type of synthetic event? */\nexport const isInputEvent = (value: any): value is React.SyntheticEvent<any> =>\n    value && isObject(value) && isObject(value.target);\n\n/**\n * Same as document.activeElement but wraps in a try-catch block. In IE it is\n * not safe to call document.activeElement if there is nothing focused.\n *\n * The activeElement will be null only if the document or document body is not\n * yet defined.\n *\n * @param {?Document} doc Defaults to current document.\n * @return {Element | null}\n * @see https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getActiveElement.js\n */\nexport function getActiveElement(doc?: Document): Element | null {\n    doc = doc || (typeof document !== \"undefined\" ? document : undefined);\n    if (typeof doc === \"undefined\") {\n        return null;\n    }\n    try {\n        return doc.activeElement || doc.body;\n    } catch (e) {\n        return doc.body;\n    }\n}\n\n/**\n * Deeply get a value from an object via its path.\n */\nexport function getIn(\n    obj: any,\n    key: string | string[],\n    def?: any,\n    p = 0\n) {\n    const path = toPath(key);\n    while (obj && p < path.length) {\n        obj = obj[path[p++]];\n    }\n\n    // check if path is not in the end\n    if (p !== path.length && !obj) {\n        return def;\n    }\n\n    return obj === undefined ? def : obj;\n}\n\nexport function setIn(obj: any, path: string, value: any): any {\n    const res: any = clone(obj); // this keeps inheritance when obj is a class\n    let resVal: any = res;\n    let i = 0;\n    const pathArray = toPath(path);\n\n    for (; i < pathArray.length - 1; i++) {\n        const currentPath: string = pathArray[i];\n        const currentObj: any = getIn(obj, pathArray.slice(0, i + 1));\n\n        if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {\n            resVal = resVal[currentPath] = clone(currentObj);\n        } else {\n            const nextPath: string = pathArray[i + 1];\n            resVal = resVal[currentPath] =\n                isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};\n        }\n    }\n\n    // Return original object if new value is the same as current\n    if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {\n        return obj;\n    }\n\n    if (value === undefined) {\n        delete resVal[pathArray[i]];\n    } else {\n        resVal[pathArray[i]] = value;\n    }\n\n    // If the path array has a single element, the loop did not run.\n    // Deleting on `resVal` had no effect in this scenario, so we delete on the result instead.\n    if (i === 0 && value === undefined) {\n        delete res[pathArray[i]];\n    }\n\n    return res;\n}\n\n/**\n * Recursively a set the same value for all keys and arrays nested object, cloning\n * @param object\n * @param value\n * @param visited\n * @param response\n */\nexport function setNestedObjectValues<T>(\n    object: any,\n    value: any,\n    visited: any = new WeakMap(),\n    response: any = {}\n): T {\n    for (const k of Object.keys(object)) {\n        const val = object[k];\n        if (isObject(val)) {\n            if (!visited.get(val)) {\n                visited.set(val, true);\n                // In order to keep array values consistent for both dot path  and\n                // bracket syntax, we need to check if this is an array so that\n                // this will output  { friends: [true] } and not { friends: { \"0\": true } }\n                response[k] = Array.isArray(val) ? [] : {};\n                setNestedObjectValues(val, value, visited, response[k]);\n            }\n        } else {\n            response[k] = value;\n        }\n    }\n\n    return response;\n}\n\nfunction clone(value: any) {\n    if (Array.isArray(value)) {\n        return [...value];\n    } else if (typeof value === \"object\" && value !== null) {\n        return { ...value };\n    } else {\n        return value; // This is for primitive types which do not need cloning.\n    }\n}\n\nfunction toPath(value: string | string[]) {\n    if (Array.isArray(value)) return value; // Already in path array form.\n    // Replace brackets with dots, remove leading/trailing dots, then split by dot.\n    return value.replace(/\\[(\\d+)]/g, \".$1\").replace(/^\\./, \"\").replace(/\\.$/, \"\").split(\".\");\n}\n","import * as React from \"react\";\nimport { useFormex } from \"./Formex\";\nimport { getIn, isFunction, isObject } from \"./utils\";\nimport { FormexController } from \"./types\";\n\nexport interface FieldInputProps<Value> {\n    /** Value of the field */\n    value: Value;\n    /** Name of the field */\n    name: string;\n    /** Multiple select? */\n    multiple?: boolean;\n    /** Is the field checked? */\n    checked?: boolean;\n    /** Change event handler */\n    onChange: (event: React.SyntheticEvent) => void,\n    /** Blur event handler */\n    onBlur: (event: React.FocusEvent) => void,\n}\n\nexport interface FormexFieldProps<Value = any, FormValues extends object = any> {\n    field: FieldInputProps<Value>;\n    form: FormexController<FormValues>;\n}\n\nexport type FieldValidator = (\n    value: any\n) => string | void | Promise<string | void>;\n\nexport interface FieldConfig<Value, C extends React.ElementType | undefined = undefined> {\n\n    /**\n     * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.\n     */\n    as?:\n        | C\n        | string\n        | React.ForwardRefExoticComponent<any>;\n\n    /**\n     * Children render function <Field name>{props => ...}</Field>)\n     */\n    children?: ((props: FormexFieldProps<Value>) => React.ReactNode) | React.ReactNode;\n\n    /**\n     * Validate a single field value independently\n     */\n    // validate?: FieldValidator;\n\n    /**\n     * Used for 'select' and related input types.\n     */\n    multiple?: boolean;\n\n    /**\n     * Field name\n     */\n    name: string;\n\n    /** HTML input type */\n    type?: string;\n\n    /** Field value */\n    value?: any;\n\n    /** Inner ref */\n    innerRef?: (instance: any) => void;\n\n}\n\nexport type FieldProps<T, C extends React.ElementType | undefined> = {\n    as?: C;\n} & (C extends React.ElementType ? (React.ComponentProps<C> & FieldConfig<T, C>) : FieldConfig<T, C>);\n\nexport function Field<T, C extends React.ElementType | undefined = undefined>({\n                                                                                  validate,\n                                                                                  name,\n                                                                                  children,\n                                                                                  as: is, // `as` is reserved in typescript lol\n                                                                                  // component,\n                                                                                  className,\n                                                                                  ...props\n                                                                              }: FieldProps<T, C>) {\n    const formex = useFormex();\n\n    const field = getFieldProps({ name, ...props }, formex);\n\n    if (isFunction(children)) {\n        return children({ field, form: formex });\n    }\n\n    // if (component) {\n    //     if (typeof component === \"string\") {\n    //         const { innerRef, ...rest } = props;\n    //         return React.createElement(\n    //             component,\n    //             { ref: innerRef, ...field, ...rest, className },\n    //             children\n    //         );\n    //     }\n    //     return React.createElement(\n    //         component,\n    //         { field, form: formex, ...props, className },\n    //         children\n    //     );\n    // }\n\n    // default to input here so we can check for both `as` and `children` above\n    const asElement = is || \"input\";\n\n    if (typeof asElement === \"string\") {\n        const { innerRef, ...rest } = props;\n        return React.createElement(\n            asElement,\n            { ref: innerRef, ...field, ...rest, className },\n            children\n        );\n    }\n\n    return React.createElement(asElement, { ...field, ...props, className }, children);\n}\n\nconst getFieldProps = (nameOrOptions: string | FieldConfig<any>, formex: FormexController<any>): FieldInputProps<any> => {\n    const isAnObject = isObject(nameOrOptions);\n    const name = isAnObject\n        ? (nameOrOptions as FieldConfig<any>).name\n        : nameOrOptions;\n    const valueState = getIn(formex.values, name);\n\n    const field: FieldInputProps<any> = {\n        name,\n        value: valueState,\n        onChange: formex.handleChange,\n        onBlur: formex.handleBlur,\n    };\n    if (isAnObject) {\n        const {\n            type,\n            value: valueProp, // value is special for checkboxes\n            as: is,\n            multiple,\n        } = nameOrOptions as FieldConfig<any>;\n\n        if (type === \"checkbox\") {\n            if (valueProp === undefined) {\n                field.checked = !!valueState;\n            } else {\n                field.checked = !!(\n                    Array.isArray(valueState) && ~valueState.indexOf(valueProp)\n                );\n                field.value = valueProp;\n            }\n        } else if (type === \"radio\") {\n            field.checked = valueState === valueProp;\n            field.value = valueProp;\n        } else if (is === \"select\" && multiple) {\n            field.value = field.value || [];\n            field.multiple = true;\n        }\n    }\n    return field;\n};\n","import React, { FormEvent, useEffect, useState } from \"react\";\nimport { getIn, setIn } from \"./utils\";\nimport equal from \"react-fast-compare\"\n\nimport { FormexController, FormexResetProps } from \"./types\";\n\nexport function useCreateFormex<T extends object>({ initialValues, initialErrors, validation, validateOnChange = false, onSubmit, validateOnInitialRender = false }: {\n    initialValues: T,\n    initialErrors?: Record<string, string>,\n    validateOnChange?: boolean,\n    validateOnInitialRender?: boolean,\n    validation?: (values: T) => Record<string, string> | Promise<Record<string, string>> | undefined | void,\n    onSubmit?: (values: T, controller: FormexController<T>) => void | Promise<void>\n}): FormexController<T> {\n\n    const initialValuesRef = React.useRef<T>(initialValues);\n    const valuesRef = React.useRef<T>(initialValues);\n\n    const [values, setValuesInner] = useState<T>(initialValues);\n    const [touchedState, setTouchedState] = useState<Record<string, boolean>>({});\n    const [errors, setErrors] = useState<Record<string, string>>(initialErrors ?? {});\n    const [dirty, setDirty] = useState(false);\n    const [submitCount, setSubmitCount] = useState(0);\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    const [isValidating, setIsValidating] = useState(false);\n\n    useEffect(() => {\n        if (validateOnInitialRender) {\n            validate();\n        }\n    }, []);\n\n    const setValues = (newValues: T) => {\n        valuesRef.current = newValues;\n        setValuesInner(newValues);\n        setDirty(equal(initialValuesRef.current, newValues));\n    }\n\n    const validate = async () => {\n        setIsValidating(true);\n        const values = valuesRef.current;\n        const validationErrors = await validation?.(values);\n        setErrors(validationErrors ?? {});\n        setIsValidating(false);\n        return validationErrors;\n    }\n\n    const setFieldValue = (key: string, value: any, shouldValidate?: boolean) => {\n        const newValues = setIn(valuesRef.current, key, value);\n        valuesRef.current = newValues;\n        setValuesInner(newValues);\n        if (!equal(getIn(initialValuesRef.current, key), value)) {\n            setDirty(true);\n        }\n        if (shouldValidate) {\n            validate();\n        }\n    }\n\n    const setFieldError = (key: string, error: string | undefined) => {\n        const newErrors = { ...errors };\n        if (error) {\n            newErrors[key] = error;\n        } else {\n            delete newErrors[key];\n        }\n        setErrors(newErrors);\n    }\n\n    const setFieldTouched = (key: string, touched: boolean, shouldValidate?: boolean | undefined) => {\n        const newTouched = { ...touchedState };\n        newTouched[key] = touched;\n        setTouchedState(newTouched);\n        if (shouldValidate) {\n            validate();\n        }\n    }\n\n    const handleChange = (event: React.SyntheticEvent) => {\n        const target = event.target as HTMLInputElement;\n        const value = target.type === \"checkbox\" ? target.checked : target.value;\n        const name = target.name;\n        setFieldValue(name, value, validateOnChange);\n        setFieldTouched(name, true);\n    }\n\n    const handleBlur = (event: React.FocusEvent) => {\n        const target = event.target as HTMLInputElement;\n        const name = target.name;\n        setFieldTouched(name, true);\n    }\n\n    const submit = async (e?: FormEvent<HTMLFormElement>) => {\n        e?.preventDefault();\n        e?.stopPropagation();\n        setIsSubmitting(true);\n        setSubmitCount(submitCount + 1);\n        const validationErrors = await validation?.(valuesRef.current);\n        if (validationErrors && Object.keys(validationErrors).length > 0) {\n            setErrors(validationErrors);\n        } else {\n            setErrors({});\n            await onSubmit?.(valuesRef.current, controllerRef.current);\n        }\n        setIsSubmitting(false);\n    }\n\n    const resetForm = (props?: FormexResetProps<T>) => {\n        const {\n            submitCount: submitCountProp,\n            values: valuesProp,\n            errors: errorsProp,\n            touched: touchedProp\n        } = props ?? {};\n        initialValuesRef.current = valuesProp ?? initialValues;\n        valuesRef.current = valuesProp ?? initialValues;\n        setValuesInner(valuesProp ?? initialValues);\n        setErrors(errorsProp ?? {});\n        setTouchedState(touchedProp ?? {});\n        setDirty(false);\n        setSubmitCount(submitCountProp ?? 0);\n    }\n\n    const controller: FormexController<T> = {\n        values,\n        initialValues: initialValuesRef.current,\n        handleChange,\n        isSubmitting,\n        setSubmitting: setIsSubmitting,\n        setValues,\n        setFieldValue,\n        errors,\n        setFieldError,\n        touched: touchedState,\n        setFieldTouched,\n        dirty,\n        setDirty,\n        handleSubmit: submit,\n        submitCount,\n        setSubmitCount,\n        handleBlur,\n        validate,\n        isValidating,\n        resetForm\n    };\n\n    const controllerRef = React.useRef<FormexController<T>>(controller);\n    controllerRef.current = controller;\n    return controller\n}\n"],"names":["FormexContext","React","useFormex","useContext","Formex","isEmptyArray","value","isFunction","obj","isObject","isInteger","isString","isNaN","isEmptyChildren","children","isPromise","isInputEvent","getActiveElement","doc","getIn","key","def","p","path","toPath","setIn","res","clone","resVal","i","pathArray","currentPath","currentObj","nextPath","setNestedObjectValues","object","visited","response","k","val","Field","validate","name","is","className","props","formex","field","getFieldProps","asElement","innerRef","rest","nameOrOptions","isAnObject","valueState","type","valueProp","multiple","useCreateFormex","initialValues","initialErrors","validation","validateOnChange","onSubmit","validateOnInitialRender","initialValuesRef","valuesRef","values","setValuesInner","useState","touchedState","setTouchedState","errors","setErrors","dirty","setDirty","submitCount","setSubmitCount","isSubmitting","setIsSubmitting","isValidating","setIsValidating","useEffect","setValues","newValues","equal","validationErrors","setFieldValue","shouldValidate","setFieldError","error","newErrors","setFieldTouched","touched","newTouched","handleChange","event","target","handleBlur","submit","e","controllerRef","resetForm","submitCountProp","valuesProp","errorsProp","touchedProp","controller"],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+import React, { FormEvent } from "react";
+export type FormexController<T extends object> = {
+    values: T;
+    initialValues: T;
+    setValues: (values: T) => void;
+    setFieldValue: (key: string, value: any, shouldValidate?: boolean) => void;
+    touched: Record<string, boolean>;
+    setFieldTouched: (key: string, touched: boolean, shouldValidate?: boolean) => void;
+    dirty: boolean;
+    setDirty: (dirty: boolean) => void;
+    setSubmitCount: (submitCount: number) => void;
+    errors: Record<string, string>;
+    setFieldError: (key: string, error?: string) => void;
+    handleChange: (event: React.SyntheticEvent) => void;
+    handleBlur: (event: React.FocusEvent) => void;
+    handleSubmit: (event?: FormEvent<HTMLFormElement>) => void;
+    validate: () => void;
+    resetForm: (props?: FormexResetProps<T>) => void;
+    submitCount: number;
+    isSubmitting: boolean;
+    setSubmitting: (isSubmitting: boolean) => void;
+    isValidating: boolean;
+};
+export type FormexResetProps<T extends object> = {
+    values?: T;
+    submitCount?: number;
+    errors?: Record<string, string>;
+    touched?: Record<string, boolean>;
+};

package/dist/useCreateFormex.d.ts

@@ -0,0 +1,9 @@
+import { FormexController } from "./types";
+export declare function useCreateFormex<T extends object>({ initialValues, initialErrors, validation, validateOnChange, onSubmit, validateOnInitialRender }: {
+    initialValues: T;
+    initialErrors?: Record<string, string>;
+    validateOnChange?: boolean;
+    validateOnInitialRender?: boolean;
+    validation?: (values: T) => Record<string, string> | Promise<Record<string, string>> | undefined | void;
+    onSubmit?: (values: T, controller: FormexController<T>) => void | Promise<void>;
+}): FormexController<T>;

package/dist/utils.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+/** @private is the value an empty array? */
+export declare const isEmptyArray: (value?: any) => boolean;
+/** @private is the given object a Function? */
+export declare const isFunction: (obj: any) => obj is Function;
+/** @private is the given object an Object? */
+export declare const isObject: (obj: any) => obj is Object;
+/** @private is the given object an integer? */
+export declare const isInteger: (obj: any) => boolean;
+/** @private is the given object a string? */
+export declare const isString: (obj: any) => obj is string;
+/** @private is the given object a NaN? */
+export declare const isNaN: (obj: any) => boolean;
+/** @private Does a React component have exactly 0 children? */
+export declare const isEmptyChildren: (children: any) => boolean;
+/** @private is the given object/value a promise? */
+export declare const isPromise: (value: any) => value is PromiseLike<any>;
+/** @private is the given object/value a type of synthetic event? */
+export declare const isInputEvent: (value: any) => value is React.SyntheticEvent<any, Event>;
+/**
+ * Same as document.activeElement but wraps in a try-catch block. In IE it is
+ * not safe to call document.activeElement if there is nothing focused.
+ *
+ * The activeElement will be null only if the document or document body is not
+ * yet defined.
+ *
+ * @param {?Document} doc Defaults to current document.
+ * @return {Element | null}
+ * @see https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getActiveElement.js
+ */
+export declare function getActiveElement(doc?: Document): Element | null;
+/**
+ * Deeply get a value from an object via its path.
+ */
+export declare function getIn(obj: any, key: string | string[], def?: any, p?: number): any;
+export declare function setIn(obj: any, path: string, value: any): any;
+/**
+ * Recursively a set the same value for all keys and arrays nested object, cloning
+ * @param object
+ * @param value
+ * @param visited
+ * @param response
+ */
+export declare function setNestedObjectValues<T>(object: any, value: any, visited?: any, response?: any): T;

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@firecms/formex",
+  "type": "module",
+  "version": "3.0.0-3.0.0-beta.4.pre.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "firebase",
+    "cms",
+    "admin",
+    "admin panel",
+    "firebase panel",
+    "firestore",
+    "headless",
+    "headless cms",
+    "content manager"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "packageManager": "yarn@4.1.0",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "peerDependencies": {
+    "firebase": "^10.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "react-fast-compare": "^3.2.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/parser": "^7.3.1",
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tailwind.config.js",
+    "bin"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "gitHead": "bfe875c02132b5763ac0c9d8c8a885c791bb5a24"
+}

package/src/Field.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { useFormex } from "./Formex";
+import { getIn, isFunction, isObject } from "./utils";
+import { FormexController } from "./types";
+
+export interface FieldInputProps<Value> {
+    /** Value of the field */
+    value: Value;
+    /** Name of the field */
+    name: string;
+    /** Multiple select? */
+    multiple?: boolean;
+    /** Is the field checked? */
+    checked?: boolean;
+    /** Change event handler */
+    onChange: (event: React.SyntheticEvent) => void,
+    /** Blur event handler */
+    onBlur: (event: React.FocusEvent) => void,
+}
+
+export interface FormexFieldProps<Value = any, FormValues extends object = any> {
+    field: FieldInputProps<Value>;
+    form: FormexController<FormValues>;
+}
+
+export type FieldValidator = (
+    value: any
+) => string | void | Promise<string | void>;
+
+export interface FieldConfig<Value, C extends React.ElementType | undefined = undefined> {
+
+    /**
+     * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.
+     */
+    as?:
+        | C
+        | string
+        | React.ForwardRefExoticComponent<any>;
+
+    /**
+     * Children render function <Field name>{props => ...}</Field>)
+     */
+    children?: ((props: FormexFieldProps<Value>) => React.ReactNode) | React.ReactNode;
+
+    /**
+     * Validate a single field value independently
+     */
+    // validate?: FieldValidator;
+
+    /**
+     * Used for 'select' and related input types.
+     */
+    multiple?: boolean;
+
+    /**
+     * Field name
+     */
+    name: string;
+
+    /** HTML input type */
+    type?: string;
+
+    /** Field value */
+    value?: any;
+
+    /** Inner ref */
+    innerRef?: (instance: any) => void;
+
+}
+
+export type FieldProps<T, C extends React.ElementType | undefined> = {
+    as?: C;
+} & (C extends React.ElementType ? (React.ComponentProps<C> & FieldConfig<T, C>) : FieldConfig<T, C>);
+
+export function Field<T, C extends React.ElementType | undefined = undefined>({
+                                                                                  validate,
+                                                                                  name,
+                                                                                  children,
+                                                                                  as: is, // `as` is reserved in typescript lol
+                                                                                  // component,
+                                                                                  className,
+                                                                                  ...props
+                                                                              }: FieldProps<T, C>) {
+    const formex = useFormex();
+
+    const field = getFieldProps({ name, ...props }, formex);
+
+    if (isFunction(children)) {
+        return children({ field, form: formex });
+    }
+
+    // if (component) {
+    //     if (typeof component === "string") {
+    //         const { innerRef, ...rest } = props;
+    //         return React.createElement(
+    //             component,
+    //             { ref: innerRef, ...field, ...rest, className },
+    //             children
+    //         );
+    //     }
+    //     return React.createElement(
+    //         component,
+    //         { field, form: formex, ...props, className },
+    //         children
+    //     );
+    // }
+
+    // default to input here so we can check for both `as` and `children` above
+    const asElement = is || "input";
+
+    if (typeof asElement === "string") {
+        const { innerRef, ...rest } = props;
+        return React.createElement(
+            asElement,
+            { ref: innerRef, ...field, ...rest, className },
+            children
+        );
+    }
+
+    return React.createElement(asElement, { ...field, ...props, className }, children);
+}
+
+const getFieldProps = (nameOrOptions: string | FieldConfig<any>, formex: FormexController<any>): FieldInputProps<any> => {
+    const isAnObject = isObject(nameOrOptions);
+    const name = isAnObject
+        ? (nameOrOptions as FieldConfig<any>).name
+        : nameOrOptions;
+    const valueState = getIn(formex.values, name);
+
+    const field: FieldInputProps<any> = {
+        name,
+        value: valueState,
+        onChange: formex.handleChange,
+        onBlur: formex.handleBlur,
+    };
+    if (isAnObject) {
+        const {
+            type,
+            value: valueProp, // value is special for checkboxes
+            as: is,
+            multiple,
+        } = nameOrOptions as FieldConfig<any>;
+
+        if (type === "checkbox") {
+            if (valueProp === undefined) {
+                field.checked = !!valueState;
+            } else {
+                field.checked = !!(
+                    Array.isArray(valueState) && ~valueState.indexOf(valueProp)
+                );
+                field.value = valueProp;
+            }
+        } else if (type === "radio") {
+            field.checked = valueState === valueProp;
+            field.value = valueProp;
+        } else if (is === "select" && multiple) {
+            field.value = field.value || [];
+            field.multiple = true;
+        }
+    }
+    return field;
+};

package/src/Formex.tsx

@@ -0,0 +1,8 @@
+import React, { useContext } from "react";
+import { FormexController } from "./types";
+
+const FormexContext = React.createContext<FormexController<any>>({} as any);
+
+export const useFormex = <T extends object>() => useContext<FormexController<T>>(FormexContext);
+
+export const Formex = FormexContext.Provider;

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./Field";
+export * from "./Formex";
+export * from "./types";
+export * from "./utils";
+export * from "./useCreateFormex";

package/src/types.ts

@@ -0,0 +1,31 @@
+import React, { FormEvent } from "react";
+
+export type FormexController<T extends object> = {
+    values: T;
+    initialValues: T;
+    setValues: (values: T) => void;
+    setFieldValue: (key: string, value: any, shouldValidate?: boolean) => void;
+    touched: Record<string, boolean>;
+    setFieldTouched: (key: string, touched: boolean, shouldValidate?: boolean) => void;
+    dirty: boolean;
+    setDirty: (dirty: boolean) => void;
+    setSubmitCount: (submitCount: number) => void;
+    errors: Record<string, string>;
+    setFieldError: (key: string, error?: string) => void;
+    handleChange: (event: React.SyntheticEvent) => void,
+    handleBlur: (event: React.FocusEvent) => void,
+    handleSubmit: (event?: FormEvent<HTMLFormElement>) => void;
+    validate: () => void;
+    resetForm: (props?: FormexResetProps<T>) => void;
+    submitCount: number;
+    isSubmitting: boolean;
+    setSubmitting: (isSubmitting: boolean) => void;
+    isValidating: boolean;
+}
+
+export type FormexResetProps<T extends object> = {
+    values?: T;
+    submitCount?: number;
+    errors?: Record<string, string>;
+    touched?: Record<string, boolean>;
+};

package/src/useCreateFormex.tsx

@@ -0,0 +1,150 @@
+import React, { FormEvent, useEffect, useState } from "react";
+import { getIn, setIn } from "./utils";
+import equal from "react-fast-compare"
+
+import { FormexController, FormexResetProps } from "./types";
+
+export function useCreateFormex<T extends object>({ initialValues, initialErrors, validation, validateOnChange = false, onSubmit, validateOnInitialRender = false }: {
+    initialValues: T,
+    initialErrors?: Record<string, string>,
+    validateOnChange?: boolean,
+    validateOnInitialRender?: boolean,
+    validation?: (values: T) => Record<string, string> | Promise<Record<string, string>> | undefined | void,
+    onSubmit?: (values: T, controller: FormexController<T>) => void | Promise<void>
+}): FormexController<T> {
+
+    const initialValuesRef = React.useRef<T>(initialValues);
+    const valuesRef = React.useRef<T>(initialValues);
+
+    const [values, setValuesInner] = useState<T>(initialValues);
+    const [touchedState, setTouchedState] = useState<Record<string, boolean>>({});
+    const [errors, setErrors] = useState<Record<string, string>>(initialErrors ?? {});
+    const [dirty, setDirty] = useState(false);
+    const [submitCount, setSubmitCount] = useState(0);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isValidating, setIsValidating] = useState(false);
+
+    useEffect(() => {
+        if (validateOnInitialRender) {
+            validate();
+        }
+    }, []);
+
+    const setValues = (newValues: T) => {
+        valuesRef.current = newValues;
+        setValuesInner(newValues);
+        setDirty(equal(initialValuesRef.current, newValues));
+    }
+
+    const validate = async () => {
+        setIsValidating(true);
+        const values = valuesRef.current;
+        const validationErrors = await validation?.(values);
+        setErrors(validationErrors ?? {});
+        setIsValidating(false);
+        return validationErrors;
+    }
+
+    const setFieldValue = (key: string, value: any, shouldValidate?: boolean) => {
+        const newValues = setIn(valuesRef.current, key, value);
+        valuesRef.current = newValues;
+        setValuesInner(newValues);
+        if (!equal(getIn(initialValuesRef.current, key), value)) {
+            setDirty(true);
+        }
+        if (shouldValidate) {
+            validate();
+        }
+    }
+
+    const setFieldError = (key: string, error: string | undefined) => {
+        const newErrors = { ...errors };
+        if (error) {
+            newErrors[key] = error;
+        } else {
+            delete newErrors[key];
+        }
+        setErrors(newErrors);
+    }
+
+    const setFieldTouched = (key: string, touched: boolean, shouldValidate?: boolean | undefined) => {
+        const newTouched = { ...touchedState };
+        newTouched[key] = touched;
+        setTouchedState(newTouched);
+        if (shouldValidate) {
+            validate();
+        }
+    }
+
+    const handleChange = (event: React.SyntheticEvent) => {
+        const target = event.target as HTMLInputElement;
+        const value = target.type === "checkbox" ? target.checked : target.value;
+        const name = target.name;
+        setFieldValue(name, value, validateOnChange);
+        setFieldTouched(name, true);
+    }
+
+    const handleBlur = (event: React.FocusEvent) => {
+        const target = event.target as HTMLInputElement;
+        const name = target.name;
+        setFieldTouched(name, true);
+    }
+
+    const submit = async (e?: FormEvent<HTMLFormElement>) => {
+        e?.preventDefault();
+        e?.stopPropagation();
+        setIsSubmitting(true);
+        setSubmitCount(submitCount + 1);
+        const validationErrors = await validation?.(valuesRef.current);
+        if (validationErrors && Object.keys(validationErrors).length > 0) {
+            setErrors(validationErrors);
+        } else {
+            setErrors({});
+            await onSubmit?.(valuesRef.current, controllerRef.current);
+        }
+        setIsSubmitting(false);
+    }
+
+    const resetForm = (props?: FormexResetProps<T>) => {
+        const {
+            submitCount: submitCountProp,
+            values: valuesProp,
+            errors: errorsProp,
+            touched: touchedProp
+        } = props ?? {};
+        initialValuesRef.current = valuesProp ?? initialValues;
+        valuesRef.current = valuesProp ?? initialValues;
+        setValuesInner(valuesProp ?? initialValues);
+        setErrors(errorsProp ?? {});
+        setTouchedState(touchedProp ?? {});
+        setDirty(false);
+        setSubmitCount(submitCountProp ?? 0);
+    }
+
+    const controller: FormexController<T> = {
+        values,
+        initialValues: initialValuesRef.current,
+        handleChange,
+        isSubmitting,
+        setSubmitting: setIsSubmitting,
+        setValues,
+        setFieldValue,
+        errors,
+        setFieldError,
+        touched: touchedState,
+        setFieldTouched,
+        dirty,
+        setDirty,
+        handleSubmit: submit,
+        submitCount,
+        setSubmitCount,
+        handleBlur,
+        validate,
+        isValidating,
+        resetForm
+    };
+
+    const controllerRef = React.useRef<FormexController<T>>(controller);
+    controllerRef.current = controller;
+    return controller
+}

package/src/utils.ts

@@ -0,0 +1,169 @@
+import * as React from "react";
+
+/** @private is the value an empty array? */
+export const isEmptyArray = (value?: any) =>
+    Array.isArray(value) && value.length === 0;
+
+/** @private is the given object a Function? */
+export const isFunction = (obj: any): obj is Function =>
+    typeof obj === "function";
+
+/** @private is the given object an Object? */
+export const isObject = (obj: any): obj is Object =>
+    obj !== null && typeof obj === "object";
+
+/** @private is the given object an integer? */
+export const isInteger = (obj: any): boolean =>
+    String(Math.floor(Number(obj))) === obj;
+
+/** @private is the given object a string? */
+export const isString = (obj: any): obj is string =>
+    Object.prototype.toString.call(obj) === "[object String]";
+
+/** @private is the given object a NaN? */
+// eslint-disable-next-line no-self-compare
+export const isNaN = (obj: any): boolean => obj !== obj;
+
+/** @private Does a React component have exactly 0 children? */
+export const isEmptyChildren = (children: any): boolean =>
+    React.Children.count(children) === 0;
+
+/** @private is the given object/value a promise? */
+export const isPromise = (value: any): value is PromiseLike<any> =>
+    isObject(value) && isFunction(value.then);
+
+/** @private is the given object/value a type of synthetic event? */
+export const isInputEvent = (value: any): value is React.SyntheticEvent<any> =>
+    value && isObject(value) && isObject(value.target);
+
+/**
+ * Same as document.activeElement but wraps in a try-catch block. In IE it is
+ * not safe to call document.activeElement if there is nothing focused.
+ *
+ * The activeElement will be null only if the document or document body is not
+ * yet defined.
+ *
+ * @param {?Document} doc Defaults to current document.
+ * @return {Element | null}
+ * @see https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getActiveElement.js
+ */
+export function getActiveElement(doc?: Document): Element | null {
+    doc = doc || (typeof document !== "undefined" ? document : undefined);
+    if (typeof doc === "undefined") {
+        return null;
+    }
+    try {
+        return doc.activeElement || doc.body;
+    } catch (e) {
+        return doc.body;
+    }
+}
+
+/**
+ * Deeply get a value from an object via its path.
+ */
+export function getIn(
+    obj: any,
+    key: string | string[],
+    def?: any,
+    p = 0
+) {
+    const path = toPath(key);
+    while (obj && p < path.length) {
+        obj = obj[path[p++]];
+    }
+
+    // check if path is not in the end
+    if (p !== path.length && !obj) {
+        return def;
+    }
+
+    return obj === undefined ? def : obj;
+}
+
+export function setIn(obj: any, path: string, value: any): any {
+    const res: any = clone(obj); // this keeps inheritance when obj is a class
+    let resVal: any = res;
+    let i = 0;
+    const pathArray = toPath(path);
+
+    for (; i < pathArray.length - 1; i++) {
+        const currentPath: string = pathArray[i];
+        const currentObj: any = getIn(obj, pathArray.slice(0, i + 1));
+
+        if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {
+            resVal = resVal[currentPath] = clone(currentObj);
+        } else {
+            const nextPath: string = pathArray[i + 1];
+            resVal = resVal[currentPath] =
+                isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};
+        }
+    }
+
+    // Return original object if new value is the same as current
+    if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {
+        return obj;
+    }
+
+    if (value === undefined) {
+        delete resVal[pathArray[i]];
+    } else {
+        resVal[pathArray[i]] = value;
+    }
+
+    // If the path array has a single element, the loop did not run.
+    // Deleting on `resVal` had no effect in this scenario, so we delete on the result instead.
+    if (i === 0 && value === undefined) {
+        delete res[pathArray[i]];
+    }
+
+    return res;
+}
+
+/**
+ * Recursively a set the same value for all keys and arrays nested object, cloning
+ * @param object
+ * @param value
+ * @param visited
+ * @param response
+ */
+export function setNestedObjectValues<T>(
+    object: any,
+    value: any,
+    visited: any = new WeakMap(),
+    response: any = {}
+): T {
+    for (const k of Object.keys(object)) {
+        const val = object[k];
+        if (isObject(val)) {
+            if (!visited.get(val)) {
+                visited.set(val, true);
+                // In order to keep array values consistent for both dot path  and
+                // bracket syntax, we need to check if this is an array so that
+                // this will output  { friends: [true] } and not { friends: { "0": true } }
+                response[k] = Array.isArray(val) ? [] : {};
+                setNestedObjectValues(val, value, visited, response[k]);
+            }
+        } else {
+            response[k] = value;
+        }
+    }
+
+    return response;
+}
+
+function clone(value: any) {
+    if (Array.isArray(value)) {
+        return [...value];
+    } else if (typeof value === "object" && value !== null) {
+        return { ...value };
+    } else {
+        return value; // This is for primitive types which do not need cloning.
+    }
+}
+
+function toPath(value: string | string[]) {
+    if (Array.isArray(value)) return value; // Already in path array form.
+    // Replace brackets with dots, remove leading/trailing dots, then split by dot.
+    return value.replace(/\[(\d+)]/g, ".$1").replace(/^\./, "").replace(/\.$/, "").split(".");
+}