remix-validated-form 4.5.0-beta.1 → 4.5.0

package/.turbo/turbo-build.log

@@ -1,17 +1,17 @@
 $ vite build
 vite v2.9.5 building for production...
 transforming...
-✓ 319 modules transformed.
+✓ 320 modules transformed.
 rendering chunks...
-dist/remix-validated-form.cjs.js   45.48 KiB / gzip: 17.10 KiB
-dist/remix-validated-form.cjs.js.map 252.52 KiB
-dist/remix-validated-form.es.js   101.16 KiB / gzip: 23.79 KiB
-dist/remix-validated-form.es.js.map 260.47 KiB
-dist/remix-validated-form.umd.js   45.73 KiB / gzip: 17.22 KiB
-dist/remix-validated-form.umd.js.map 252.50 KiB
+dist/remix-validated-form.cjs.js   47.23 KiB / gzip: 17.41 KiB
+dist/remix-validated-form.cjs.js.map 265.34 KiB
+dist/remix-validated-form.es.js   104.23 KiB / gzip: 24.22 KiB
+dist/remix-validated-form.es.js.map 273.50 KiB
+dist/remix-validated-form.umd.js   47.48 KiB / gzip: 17.53 KiB
+dist/remix-validated-form.umd.js.map 265.31 KiB
 
 [vite:dts] Start generate declaration files...
-[vite:dts] Declaration files built in 1849ms.
+[vite:dts] Declaration files built in 1961ms.
 
 No name was provided for external module 'react' in output.globals – guessing 'React'
 No name was provided for external module '@remix-run/react' in output.globals – guessing 'react'

package/browser/internal/logic/nestedObjectToPathObject.d.ts

@@ -0,0 +1 @@
+export declare const nestedObjectToPathObject: (val: any, acc: Record<string, any>, path: string) => any;

package/browser/internal/logic/nestedObjectToPathObject.js

@@ -0,0 +1,47 @@
+export const nestedObjectToPathObject = (val, acc, path) => {
+    if (Array.isArray(val)) {
+        val.forEach((v, index) => nestedObjectToPathObject(v, acc, `${path}[${index}]`));
+        return acc;
+    }
+    if (typeof val === "object") {
+        Object.entries(val).forEach(([key, value]) => {
+            const nextPath = path ? `${path}.${key}` : key;
+            nestedObjectToPathObject(value, acc, nextPath);
+        });
+        return acc;
+    }
+    if (val !== undefined) {
+        acc[path] = val;
+    }
+    return acc;
+};
+if (import.meta.vitest) {
+    const { describe, expect, it } = import.meta.vitest;
+    describe("nestedObjectToPathObject", () => {
+        it("should return an object with the correct path", () => {
+            const result = nestedObjectToPathObject({
+                a: 1,
+                b: 2,
+                c: { foo: "bar", baz: [true, false] },
+                d: [
+                    { foo: "bar", baz: [true, false] },
+                    { e: true, f: "hi" },
+                ],
+                g: undefined,
+            }, {}, "");
+            expect(result).toEqual({
+                a: 1,
+                b: 2,
+                "c.foo": "bar",
+                "c.baz[0]": true,
+                "c.baz[1]": false,
+                "d[0].foo": "bar",
+                "d[0].baz[0]": true,
+                "d[0].baz[1]": false,
+                "d[1].e": true,
+                "d[1].f": "hi",
+            });
+            expect(Object.keys(result)).toHaveLength(10);
+        });
+    });
+}

package/browser/internal/state/arrayUtil.d.ts

@@ -0,0 +1,6 @@
+export declare const getArray: (values: any, field: string) => unknown[];
+export declare const swap: (array: unknown[], indexA: number, indexB: number) => void;
+export declare const move: (array: unknown[], from: number, to: number) => void;
+export declare const insert: (array: unknown[], index: number, value: unknown) => void;
+export declare const remove: (array: unknown[], index: number) => void;
+export declare const replace: (array: unknown[], index: number, value: unknown) => void;

package/browser/internal/state/arrayUtil.js

@@ -0,0 +1,108 @@
+import lodashGet from "lodash/get";
+import lodashSet from "lodash/set";
+import invariant from "tiny-invariant";
+////
+// All of these array helpers are written in a way that mutates the original array.
+// This is because we're working with immer.
+////
+export const getArray = (values, field) => {
+    const value = lodashGet(values, field);
+    if (value === undefined || value === null) {
+        const newValue = [];
+        lodashSet(values, field, newValue);
+        return newValue;
+    }
+    invariant(Array.isArray(value), `FieldArray: defaultValue value for ${field} must be an array, null, or undefined`);
+    return value;
+};
+export const swap = (array, indexA, indexB) => {
+    const itemA = array[indexA];
+    const itemB = array[indexB];
+    array[indexA] = itemB;
+    array[indexB] = itemA;
+};
+export const move = (array, from, to) => {
+    const [item] = array.splice(from, 1);
+    array.splice(to, 0, item);
+};
+export const insert = (array, index, value) => {
+    array.splice(index, 0, value);
+};
+export const remove = (array, index) => {
+    array.splice(index, 1);
+};
+export const replace = (array, index, value) => {
+    array.splice(index, 1, value);
+};
+if (import.meta.vitest) {
+    const { describe, expect, it } = import.meta.vitest;
+    describe("getArray", () => {
+        it("shoud get a deeply nested array that can be mutated to update the nested value", () => {
+            const values = {
+                d: [
+                    { foo: "bar", baz: [true, false] },
+                    { e: true, f: "hi" },
+                ],
+            };
+            const result = getArray(values, "d[0].baz");
+            const finalValues = {
+                d: [
+                    { foo: "bar", baz: [true, false, true] },
+                    { e: true, f: "hi" },
+                ],
+            };
+            expect(result).toEqual([true, false]);
+            result.push(true);
+            expect(values).toEqual(finalValues);
+        });
+        it("should return an empty array that can be mutated if result is null or undefined", () => {
+            const values = {};
+            const result = getArray(values, "a.foo[0].bar");
+            const finalValues = {
+                a: { foo: [{ bar: ["Bob ross"] }] },
+            };
+            expect(result).toEqual([]);
+            result.push("Bob ross");
+            expect(values).toEqual(finalValues);
+        });
+        it("should throw if the value is defined and not an array", () => {
+            const values = { foo: "foo" };
+            expect(() => getArray(values, "foo")).toThrow();
+        });
+    });
+    describe("swap", () => {
+        it("should swap two items", () => {
+            const array = [1, 2, 3];
+            swap(array, 0, 1);
+            expect(array).toEqual([2, 1, 3]);
+        });
+    });
+    describe("move", () => {
+        it("should move an item to a new index", () => {
+            const array = [1, 2, 3];
+            move(array, 0, 1);
+            expect(array).toEqual([2, 1, 3]);
+        });
+    });
+    describe("insert", () => {
+        it("should insert an item at a new index", () => {
+            const array = [1, 2, 3];
+            insert(array, 1, 4);
+            expect(array).toEqual([1, 4, 2, 3]);
+        });
+    });
+    describe("remove", () => {
+        it("should remove an item at a given index", () => {
+            const array = [1, 2, 3];
+            remove(array, 1);
+            expect(array).toEqual([1, 3]);
+        });
+    });
+    describe("replace", () => {
+        it("should replace an item at a given index", () => {
+            const array = [1, 2, 3];
+            replace(array, 1, 4);
+            expect(array).toEqual([1, 4, 3]);
+        });
+    });
+}

package/browser/internal/state/fieldArray.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export declare const FieldArrayContext: React.Context<{
+    defaultValues: any[];
+    name: string;
+} | null>;
+export declare type FieldArrayHelpers = {
+    push: (item: any) => void;
+    swap: (indexA: number, indexB: number) => void;
+    move: (from: number, to: number) => void;
+    insert: (index: number, value: any) => void;
+    unshift: () => void;
+    remove: (index: number) => void;
+    pop: () => void;
+    replace: (index: number, value: any) => void;
+};
+export declare type FieldArrayProps = {
+    name: string;
+    children: (itemDefaults: any[], helpers: FieldArrayHelpers) => React.ReactNode;
+    formId?: string;
+};
+export declare const FieldArray: ({ name, children, formId }: FieldArrayProps) => JSX.Element;

package/browser/internal/state/fieldArray.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, createContext } from "react";
+import invariant from "tiny-invariant";
+import { useInternalFormContext } from "../hooks";
+import { useControllableValue } from "./controlledFields";
+import { useFormStore } from "./storeHooks";
+const useFieldArray = (context, field) => {
+    // TODO: Fieldarrays need to handle/update these things, too:
+    // - touchedFields & fieldErrors should be updated when fields are added/removed
+    // - Could probably move some of these callbacks into the store
+    // - There's a bug where adding a new field to the fieldarray validates the new field.
+    //   - For some reason this only happens in the test-app, but not in the docs app.
+    const [value] = useControllableValue(context, field);
+    const arr = useFormStore(context.formId, (state) => state.controlledFields.array);
+    const helpers = useMemo(() => ({
+        push: (item) => {
+            arr.push(field, item);
+        },
+        swap: (indexA, indexB) => {
+            arr.swap(field, indexA, indexB);
+        },
+        move: (from, to) => {
+            arr.move(field, from, to);
+        },
+        insert: (index, value) => {
+            arr.insert(field, index, value);
+        },
+        unshift: () => {
+            arr.unshift(field);
+        },
+        remove: (index) => {
+            arr.remove(field, index);
+        },
+        pop: () => {
+            arr.pop(field);
+        },
+        replace: (index, value) => {
+            arr.replace(field, index, value);
+        },
+    }), [arr, field]);
+    return [value, helpers];
+};
+export const FieldArrayContext = createContext(null);
+export const FieldArray = ({ name, children, formId }) => {
+    const context = useInternalFormContext(formId, "FieldArray");
+    const [value, helpers] = useFieldArray(context, name);
+    invariant(value === undefined || value === null || Array.isArray(value), `FieldArray: defaultValue value for ${name} must be an array, null, or undefined`);
+    const contextValue = useMemo(() => ({ defaultValues: value !== null && value !== void 0 ? value : [], name }), [name, value]);
+    return (_jsx(FieldArrayContext.Provider, { value: contextValue, children: children(contextValue.defaultValues, helpers) }, void 0));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.5.0-beta.1",
+  "version": "4.5.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./dist/remix-validated-form.cjs.js",
   "main": "./dist/remix-validated-form.umd.js",