@explita/formly 0.1.0

package/dist/components/label.js

@@ -0,0 +1,46 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = Label;
+const React = __importStar(require("react"));
+const utils_1 = require("../lib/utils");
+const field_1 = require("./field");
+function Label({ className, ...props }) {
+    const { id, required, hasError, label } = (0, field_1.useFieldContext)();
+    if (!label)
+        return;
+    return (React.createElement("label", { "data-slot": "label", htmlFor: id, "data-required": required, "aria-required": required, "data-error": hasError, "aria-invalid": hasError, className: (0, utils_1.cn)("form-label", className), ...props }, label));
+}

package/dist/hooks/use-field.d.ts

@@ -0,0 +1,21 @@
+import { Path } from "../types/path";
+import { FieldRegistrationOptions, InputChangeEvent } from "../types/utils";
+export declare function useField<T extends Record<string, any>>(name: string, options?: FieldRegistrationOptions<T, Path<T>>): {
+    value: string;
+    error: string | undefined;
+    hasError: boolean;
+    isTouched: boolean;
+    setValue: (value: any) => void;
+    reset: () => void;
+    focus: () => void;
+    refId: string;
+    bind: () => {
+        name: string;
+        value: string;
+        onChange: (e: InputChangeEvent) => void;
+        onBlur: () => void;
+        "data-input-ref": string;
+        "data-input-error": boolean;
+        "aria-invalid": boolean;
+    };
+};

package/dist/hooks/use-field.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useField = useField;
+const use_form_context_1 = require("./use-form-context");
+const react_1 = require("react");
+function useField(name, options) {
+    const form = (0, use_form_context_1.useFormContext)();
+    //@ts-ignore
+    form.register(name, options, true);
+    const [value, setValue] = (0, react_1.useState)("");
+    const [error, setError] = (0, react_1.useState)("");
+    //@ts-ignore
+    const [isDirty, setIsDirty] = (0, react_1.useState)(form.isDirty(name));
+    //@ts-ignore
+    const [isTouched, setIsTouched] = (0, react_1.useState)(form.isTouched(name));
+    const refId = name + "-" + (0, react_1.useId)();
+    (0, react_1.useEffect)(() => {
+        if (!form || !name)
+            return;
+        //@ts-ignore
+        form.subscribe(name, setValue, { internalRef: refId });
+        //@ts-ignore
+        form.subscribeFieldError(name, setError);
+        return () => {
+            //@ts-ignore
+            form.unsubscribeField(name, setValue);
+        };
+    }, [name]);
+    // Field helpers
+    const bind = {
+        name,
+        value: value || "",
+        onChange: (e) => {
+            form.field(name).set(e.currentTarget.value);
+            setValue(e.currentTarget.value);
+            setIsDirty(true);
+        },
+        onBlur: () => {
+            //@ts-ignore
+            form.markTouched(name);
+            setIsTouched(true);
+            //@ts-ignore
+            if (form.validateOn === "blur")
+                form.field(name).validate();
+        },
+        "data-input-ref": refId,
+        "data-input-error": !!error,
+        "aria-invalid": !!error,
+    };
+    return {
+        value,
+        error,
+        hasError: !!error,
+        isTouched,
+        setValue: (value) => form.field(name).set(value),
+        reset: () => {
+            //@ts-ignore
+            form.resetField(name);
+            setValue("");
+        },
+        //@ts-ignore
+        focus: () => form.focus(name),
+        refId,
+        bind: () => bind,
+    };
+}

package/dist/hooks/use-form-by-id.d.ts

@@ -0,0 +1,6 @@
+import { FormInstance as BaseInstance } from "../types/utils";
+type FormInstance<T> = Omit<BaseInstance<T>, "isDirty" | "Field"> & {
+    isDirty: boolean;
+};
+export declare function useFormById<T extends Record<string, any>>(id: string, field?: string): FormInstance<T>;
+export {};

package/dist/hooks/use-form-by-id.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormById = useFormById;
+const react_1 = require("react");
+const form_registry_1 = require("../lib/form-registry");
+function useFormById(id, field) {
+    const [, setTick] = (0, react_1.useState)(0);
+    const form = (0, react_1.useMemo)(() => form_registry_1.registry.get(id), [id]);
+    (0, react_1.useEffect)(() => {
+        // trigger initial render so values are pulled into React
+        setTick((t) => t + 1);
+        const channelName = field !== null && field !== void 0 ? field : "*";
+        const unsub = form
+            //@ts-ignore
+            .channel(`value:${channelName}`)
+            .subscribe(() => setTick((t) => t + 1));
+        return unsub;
+    }, [form, field]);
+    return {
+        ...form,
+        get isDirty() {
+            return form.isDirty();
+        },
+    };
+}

package/dist/hooks/use-form-context.d.ts

@@ -0,0 +1,5 @@
+import { FormContextValue } from "../providers/form";
+import type { z } from "zod";
+export declare function useFormContext<TDefaultValues extends Record<string, any> = Record<string, any>, TSchema extends z.ZodObject<any> | undefined = undefined>(props?: {
+    schema?: TSchema;
+}): FormContextValue<TSchema, TDefaultValues>;

package/dist/hooks/use-form-context.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormContext = useFormContext;
+const react_1 = require("react");
+const form_1 = require("../providers/form");
+function useFormContext(props) {
+    const form = (0, react_1.useContext)(form_1.FormContext);
+    if (!form) {
+        throw new Error("useFormContext must be used within a FormProvider");
+    }
+    // Handle schema updates if provided
+    (0, react_1.useEffect)(() => {
+        //@ts-ignore
+        form.setSchema(props === null || props === void 0 ? void 0 : props.schema);
+    }, [props === null || props === void 0 ? void 0 : props.schema]);
+    return form;
+}

package/dist/hooks/use-form.d.ts

@@ -0,0 +1,43 @@
+import type { z } from "zod";
+import { FormInstance, FormValues } from "../types/utils";
+/**
+ * useForm is a React hook that allows you to manage form state and validation.
+ *
+ * @param schema - a Zod schema object that defines the form structure and validation rules.
+ * @param defaultValues - an object containing the default values for the form fields.
+ * @param errors - an object containing the initial errors for the form fields.
+ * @param mode - the form mode, either "controlled" or "uncontrolled".
+ * @param errorParser - a function that takes an error and returns a string to be displayed to the user.
+ * @param persistKey - a string that defines the key under which the form state is persisted.
+ * @param check - a function that takes the form values and an object containing the focus method for each field.
+ * @param onSubmit - a function that takes the form values and an object containing the focus method for each field.
+ * @param persistKey - a string that defines the key under which the form state is persisted.
+ * @param computed - an object containing the computed fields.
+ * @param autoFocusOnError - a boolean that defines whether to focus on the first error field.
+ * @param savedFormFirst - a boolean that defines whether to prioritize the saved form state.
+ * @param validateOn - a string that defines when to validate the form.
+ *
+ * @returns an object containing the useForm API methods.
+ *
+ * @example
+ * const form = useForm({
+ *   schema,
+ *   defaultValues,
+ *   errors,
+ *   mode,
+ *   errorParser,
+ *   persistKey,
+ *   check,
+ *   onSubmit: async(values)=>{}
+ * });
+ *
+ * <Form use={form}>
+ *   {formFields.map((field) => (
+ *     <div key={field.name}>
+ *       <label>{field.label}</label>
+ *       <input type="text" {...register(field.name)} />
+ *     </div>
+ *   ))}
+ * </Form>
+ */
+export declare function useForm<TSchema extends z.ZodObject<any> | undefined = undefined, TDefault = TSchema extends z.ZodObject<any> ? z.infer<TSchema> : Record<string, any>>(options?: FormValues<TSchema, TDefault>): FormInstance<TSchema extends z.ZodObject<any> ? z.infer<TSchema> : TDefault>;