@explita/formly 0.1.0

package/dist/lib/pub-sub.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createChannel = createChannel;
+exports.createFormBus = createFormBus;
+function createChannel() {
+    const listeners = new Set();
+    return {
+        emit(payload) {
+            listeners.forEach((cb) => cb(payload));
+        },
+        subscribe(cb) {
+            listeners.add(cb);
+            return () => {
+                listeners.delete(cb);
+            };
+        },
+        clear() {
+            listeners.clear();
+        },
+    };
+}
+function createFormBus() {
+    const channels = new Map();
+    // The hybrid callable-object
+    const channel = (name) => {
+        if (!name)
+            throw new Error("Channel name required");
+        if (!channels.has(name))
+            channels.set(name, createChannel());
+        return channels.get(name);
+    };
+    // Attach helper methods directly to the function
+    channel.clearAll = () => {
+        channels.forEach((c) => c.clear());
+        channels.clear();
+    };
+    return { channel };
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,17 @@
+import { Path } from "../types/path";
+/**
+ * Combines multiple class names into a single string.
+ * This function takes an array of class names and returns a single string
+ * with all the class names combined, separated by spaces.
+ * It filters out any falsey values (null, undefined, etc.) before joining.
+ *
+ * @param {string[]} classes - An array of class names to combine.
+ * @returns {string} A single string with all the class names combined.
+ */
+export declare function cn(...classes: (string | false | null | undefined)[]): string;
+export declare function multiPathError<T>(paths: Path<T>[], message: string): Partial<Record<Path<T>, string>>;
+export declare function mapErrors(obj: Record<string, any>, path?: string): Record<string, string>;
+export declare function flattenFormValues<T extends any>(obj: T, prefix?: string): Record<string, any>;
+export declare function nestFormValues<T extends any>(flat: T): T;
+export declare function mergeValues<T extends any>(defaultValues: T, saved: T): T;
+export declare function determineDirtyFields<T extends any>(defaultValues: T, saved: T): T;

package/dist/lib/utils.js

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = cn;
+exports.multiPathError = multiPathError;
+exports.mapErrors = mapErrors;
+exports.flattenFormValues = flattenFormValues;
+exports.nestFormValues = nestFormValues;
+exports.mergeValues = mergeValues;
+exports.determineDirtyFields = determineDirtyFields;
+/**
+ * Combines multiple class names into a single string.
+ * This function takes an array of class names and returns a single string
+ * with all the class names combined, separated by spaces.
+ * It filters out any falsey values (null, undefined, etc.) before joining.
+ *
+ * @param {string[]} classes - An array of class names to combine.
+ * @returns {string} A single string with all the class names combined.
+ */
+function cn(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+function multiPathError(paths, message) {
+    return paths.reduce((acc, path) => {
+        acc[path] = message;
+        return acc;
+    }, {});
+}
+function mapErrors(obj, path = "") {
+    const result = {};
+    for (const key in obj) {
+        const value = obj[key];
+        const currentPath = path ? `${path}.${key}` : key;
+        if (Array.isArray(value)) {
+            value.forEach((item, i) => {
+                // graceful fallback for _index or broken items
+                const index = item && typeof item === "object" && "_index" in item
+                    ? item._index
+                    : i;
+                if (item && typeof item === "object" && !Array.isArray(item)) {
+                    const keys = Object.keys(item);
+                    const hasOtherKeys = keys.some((k) => k !== "_index" && k !== "error");
+                    if (hasOtherKeys) {
+                        // nested object or keyed structure
+                        for (const subKey in item) {
+                            if (subKey === "_index")
+                                continue;
+                            result[`${currentPath}.${index}.${subKey}`] = String(item[subKey]);
+                        }
+                    }
+                    else if ("error" in item) {
+                        // simple indexed error: { _index, error }
+                        result[`${currentPath}.${index}`] = String(item.error);
+                    }
+                    else {
+                        // empty or malformed object
+                        result[`${currentPath}.${index}`] = "Invalid value";
+                    }
+                }
+                else if (item != null && item !== "") {
+                    // primitive value (string, number, etc.)
+                    result[`${currentPath}.${index}`] = String(item);
+                }
+                else {
+                    // null, undefined, or empty
+                    result[`${currentPath}.${index}`] = "Invalid value";
+                }
+            });
+        }
+        else if (value && typeof value === "object") {
+            // nested object
+            Object.assign(result, mapErrors(value, currentPath));
+        }
+        else {
+            // primitive (string, number, etc.)
+            result[currentPath] = String(value);
+        }
+    }
+    return result;
+}
+function flattenFormValues(obj, prefix = "") {
+    const result = {};
+    for (const key in obj) {
+        const value = obj[key];
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (Array.isArray(value)) {
+            if (value.length === 0) {
+                // always include the array itself
+                result[path] = [];
+            }
+            else {
+                value.forEach((item, index) => {
+                    if (typeof item === "object" && item !== null) {
+                        Object.assign(result, flattenFormValues(item, `${path}.${index}`));
+                    }
+                    else {
+                        result[`${path}.${index}`] = item;
+                    }
+                });
+            }
+        }
+        else if (typeof value === "object" &&
+            !(value instanceof Date) &&
+            value !== null) {
+            Object.assign(result, flattenFormValues(value, path));
+        }
+        else {
+            result[path] = value;
+        }
+    }
+    return result;
+}
+function nestFormValues(flat) {
+    const result = {};
+    for (const key in flat) {
+        const parts = key.split("."); // split by dot
+        let current = result;
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            // If part is numeric (array index)
+            const arrayIndex = Number(part);
+            const isLast = i === parts.length - 1;
+            if (!isNaN(arrayIndex) && Number.isInteger(arrayIndex)) {
+                // ensure current is an array
+                if (!Array.isArray(current))
+                    current = [];
+                if (current[arrayIndex] === undefined)
+                    current[arrayIndex] = {};
+                if (isLast) {
+                    current[arrayIndex] = flat[key];
+                }
+                else {
+                    current = current[arrayIndex];
+                }
+            }
+            else {
+                // normal object key
+                if (isLast) {
+                    current[part] = flat[key];
+                }
+                else {
+                    if (current[part] === undefined ||
+                        typeof current[part] !== "object") {
+                        // check if next part is numeric to pre-create array
+                        const nextPart = parts[i + 1];
+                        current[part] = !isNaN(Number(nextPart)) ? [] : {};
+                    }
+                    current = current[part];
+                }
+            }
+        }
+    }
+    return result;
+}
+function mergeValues(defaultValues, saved) {
+    const flattenDefaultValues = flattenFormValues(defaultValues);
+    const flattenSaved = flattenFormValues(saved);
+    const result = {};
+    // Get all unique keys from both objects
+    const allKeys = new Set([
+        ...Object.keys(flattenDefaultValues),
+        ...Object.keys(flattenSaved),
+    ]);
+    for (const key of allKeys) {
+        const savedValue = flattenSaved[key];
+        const defaultValue = flattenDefaultValues[key];
+        result[key] =
+            defaultValue !== undefined && defaultValue !== null && defaultValue !== ""
+                ? defaultValue
+                : savedValue !== null && savedValue !== void 0 ? savedValue : defaultValue;
+    }
+    return result;
+}
+function determineDirtyFields(defaultValues, saved) {
+    const flattenDefaultValues = flattenFormValues(defaultValues);
+    const flattenSaved = flattenFormValues(saved);
+    const result = {};
+    // Get all unique keys from both objects
+    const allKeys = new Set([
+        ...Object.keys(flattenDefaultValues),
+        ...Object.keys(flattenSaved),
+    ]);
+    for (const key of allKeys) {
+        const savedValue = flattenSaved[key];
+        const defaultValue = flattenDefaultValues[key];
+        if (savedValue === defaultValue)
+            continue;
+        result[key] = true;
+    }
+    return result;
+}

package/dist/lib/validation.d.ts

@@ -0,0 +1,22 @@
+import type { z } from "zod";
+type ValidationResponse<T> = {
+    success: true;
+    data: T;
+} | {
+    success: false;
+    errors: Partial<Record<keyof T, string>>;
+    message: string;
+    data: T;
+};
+/**
+ * Validates form data against a Zod schema.
+ *
+ * @param {Schema} validationSchema - The Zod schema to validate the form data against.
+ * @param {FormData | Record<string, unknown> | undefined} formData - The form data to validate.
+ * @returns {Promise<ValidationResponse<z.infer<Schema>>>} - A promise that resolves to a validation response.
+ *
+ * @throws {Error} Throws an error if a valid Zod schema or valid FormData is not provided,
+ * or if an unexpected error occurs during validation.
+ */
+export declare function validateForm<Schema extends z.ZodObject>(validationSchema: Schema, formData: FormData | Record<string, unknown> | undefined): Promise<ValidationResponse<z.infer<Schema>>>;
+export {};

package/dist/lib/validation.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateForm = validateForm;
+const utils_1 = require("./utils");
+const zod_helpers_1 = require("./zod-helpers");
+/**
+ * Validates form data against a Zod schema.
+ *
+ * @param {Schema} validationSchema - The Zod schema to validate the form data against.
+ * @param {FormData | Record<string, unknown> | undefined} formData - The form data to validate.
+ * @returns {Promise<ValidationResponse<z.infer<Schema>>>} - A promise that resolves to a validation response.
+ *
+ * @throws {Error} Throws an error if a valid Zod schema or valid FormData is not provided,
+ * or if an unexpected error occurs during validation.
+ */
+async function validateForm(validationSchema, formData) {
+    if (typeof (validationSchema === null || validationSchema === void 0 ? void 0 : validationSchema.safeParseAsync) !== "function") {
+        throw new Error("A valid Zod schema is required for form validation. Please provide a valid Zod schema and try again.");
+    }
+    if (!formData) {
+        throw new Error("A valid FormData object is required for form validation. Please provide a valid FormData object and try again.");
+    }
+    try {
+        let form = formData;
+        if (formData instanceof FormData) {
+            form = Object.fromEntries(formData.entries());
+        }
+        const result = await validationSchema.safeParseAsync((0, utils_1.nestFormValues)(form));
+        if (result.success) {
+            return {
+                success: true,
+                data: result.data,
+            };
+        }
+        const errors = (0, zod_helpers_1.mapZodErrors)(result.error.issues);
+        return {
+            success: false,
+            errors,
+            message: "Validation failed",
+            data: form,
+        };
+    }
+    catch (error) {
+        throw new Error(`Validation failed due to an unexpected error: ${error.message || "Please make sure Zod is installed and try again."}`);
+    }
+}

package/dist/lib/zod-helpers.d.ts

@@ -0,0 +1,5 @@
+import type { z } from "zod";
+export declare function isZodSchema(schema: unknown): schema is z.ZodObject;
+export declare function createEmptyValues<T extends z.ZodObject<any>>(schema?: T): z.infer<T>;
+export declare function mapZodErrors(error?: z.ZodError["issues"]): Record<string, string>;
+export declare function isZodError(issues: any): issues is z.ZodError["issues"];

package/dist/lib/zod-helpers.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isZodSchema = isZodSchema;
+exports.createEmptyValues = createEmptyValues;
+exports.mapZodErrors = mapZodErrors;
+exports.isZodError = isZodError;
+function isZodSchema(schema) {
+    return typeof schema === "object" && schema !== null && "def" in schema;
+}
+function createEmptyValues(schema) {
+    if (!schema)
+        return {};
+    const shape = schema.shape;
+    const result = {};
+    for (const key in shape) {
+        const field = shape[key];
+        result[key] = getEmptyValue(field);
+    }
+    return result;
+}
+function getEmptyValue(field) {
+    const { type } = field.def;
+    switch (type) {
+        case "object":
+            return createEmptyValues(field);
+        case "array":
+            // safe recursion into array element type
+            //@ts-ignore
+            return [getEmptyValue(field.def.element)];
+        case "boolean":
+            return false;
+        case "string":
+        case "number":
+        case "bigint":
+        case "date":
+            return "";
+        case "optional":
+        case "nullable":
+            // unwrap and recurse
+            //@ts-ignore
+            return getEmptyValue(field.def.innerType);
+        default:
+            return "";
+    }
+}
+function mapZodErrors(error) {
+    if (!error)
+        return {};
+    const result = {};
+    for (const issue of error) {
+        const path = issue.path
+            .map((p) => (typeof p === "number" ? p : p.toString()))
+            .join(".");
+        result[path || "_root"] = issue.message;
+    }
+    return result;
+}
+function isZodError(issues) {
+    return (issues &&
+        typeof issues === "object" &&
+        Array.isArray(issues) &&
+        issues.every((i) => "path" in i && "message" in i));
+}

package/dist/providers/form.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { useForm } from "../hooks/use-form";
+import type { z } from "zod";
+export type FormContextValue<TSchema extends z.ZodObject | undefined = undefined, DefaultValues = TSchema extends undefined ? Record<string, any> : Partial<z.infer<TSchema>>> = ReturnType<typeof useForm<TSchema, DefaultValues>>;
+type FormProps<TSchema extends z.ZodObject | undefined = undefined, DefaultValues = TSchema extends undefined ? Record<string, any> : Partial<z.infer<TSchema>>> = {
+    use?: FormContextValue<TSchema, DefaultValues>;
+    children: React.ReactNode;
+    as?: "form" | "div" | "section";
+    className?: string;
+} & React.HTMLAttributes<HTMLFormElement | HTMLDivElement>;
+export declare const FormContext: React.Context<import("..").FormInstance<any> | null>;
+/**
+ * A component that wraps the useForm hook and provides the form context
+ * to its children. It also provides a way to render the form as a
+ * different HTML element.
+ *
+ * @param {FormProps<TSchema, DefaultValues>} - The props for the Form component.
+ * @returns {ReactNode} - The rendered Form component.
+ *
+ * @example
+ *
+ * const form = useForm({
+ *   schema,
+ *   defaultValues,
+ *   errors,
+ *   mode,
+ *   errorParser,
+ *   persistKey,
+ *   check,
+ * })
+ *
+ * <Form use={form} onSubmit={form.handleSubmit((data, ctx) => {
+      console.log("before", data);
+
+      const after = ctx
+        .array("contacts")
+        .filter((item) => item.phone > 3 && item.phone !== null)
+        .map((item) => item)
+        .removeIf((item) => item.phone === 4);
+
+      const snapshot = after.snapshot();
+      const values = after.get();
+
+      console.log("after", snapshot, values);
+    })}>
+ *   <Field name="name" label="Name" />
+ *   <Field name="age" label="Age" type="number" />
+ * </Form>
+ */
+export declare function Form<TSchema extends z.ZodObject | undefined = undefined, DefaultValues = TSchema extends undefined ? Record<string, any> : Partial<z.infer<TSchema>>>({ children, use, as, className, onSubmit, ...rest }: FormProps<TSchema, DefaultValues>): React.JSX.Element;
+export {};

package/dist/providers/form.js

@@ -0,0 +1,63 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormContext = void 0;
+exports.Form = Form;
+const react_1 = __importDefault(require("react"));
+const use_form_1 = require("../hooks/use-form");
+const css_1 = require("../lib/css");
+// export const FormContext = createContext<FormContextValue | null>(null);
+exports.FormContext = react_1.default.createContext(null);
+/**
+ * A component that wraps the useForm hook and provides the form context
+ * to its children. It also provides a way to render the form as a
+ * different HTML element.
+ *
+ * @param {FormProps<TSchema, DefaultValues>} - The props for the Form component.
+ * @returns {ReactNode} - The rendered Form component.
+ *
+ * @example
+ *
+ * const form = useForm({
+ *   schema,
+ *   defaultValues,
+ *   errors,
+ *   mode,
+ *   errorParser,
+ *   persistKey,
+ *   check,
+ * })
+ *
+ * <Form use={form} onSubmit={form.handleSubmit((data, ctx) => {
+      console.log("before", data);
+
+      const after = ctx
+        .array("contacts")
+        .filter((item) => item.phone > 3 && item.phone !== null)
+        .map((item) => item)
+        .removeIf((item) => item.phone === 4);
+
+      const snapshot = after.snapshot();
+      const values = after.get();
+
+      console.log("after", snapshot, values);
+    })}>
+ *   <Field name="name" label="Name" />
+ *   <Field name="age" label="Age" type="number" />
+ * </Form>
+ */
+function Form({ children, use, as = "form", className, onSubmit, ...rest }) {
+    const formInstance = use !== null && use !== void 0 ? use : (0, use_form_1.useForm)();
+    const Element = as;
+    //@ts-ignore
+    const submitFn = onSubmit || formInstance.onSubmit;
+    return (
+    // @ts-ignore
+    react_1.default.createElement(exports.FormContext.Provider, { value: formInstance },
+        react_1.default.createElement(Element, { onSubmit: submitFn, className: `explita-form ${className !== null && className !== void 0 ? className : ""}`, ...rest },
+            react_1.default.createElement("style", null, css_1.css),
+            children)));
+}