react-compose-form 0.0.4 → 0.0.6-beta.0

package/README.md

@@ -1,12 +1,12 @@
 # react-compose-form
 
 [![npm version](https://img.shields.io/npm/v/react-compose-form.svg)](https://www.npmjs.com/package/react-compose-form)
-[![Publish](https://github.com/kearisp/react-compose-form/actions/workflows/publish-latest.yml/badge.svg?event=release)](https://github.com/kearisp/react-compose-form/actions/workflows/publish-latest.yml)
+[![Beta](https://github.com/kearisp/react-compose-form/actions/workflows/publish-beta.yml/badge.svg?branch=v0.0.6&event=pull_request)](https://github.com/kearisp/react-compose-form/actions/workflows/publish-beta.yml)
 [![License](https://img.shields.io/npm/l/react-compose-form)](https://github.com/kearisp/react-compose-form/blob/master/LICENSE)
 
 [![npm total downloads](https://img.shields.io/npm/dt/react-compose-form.svg)](https://www.npmjs.com/package/react-compose-form)
 [![bundle size](https://img.shields.io/bundlephobia/minzip/react-compose-form)](https://bundlephobia.com/package/react-compose-form)
-![Coverage](https://gist.githubusercontent.com/kearisp/f17f46c6332ea3bb043f27b0bddefa9f/raw/coverage-react-compose-form-latest.svg)
+![Coverage](https://gist.githubusercontent.com/kearisp/f17f46c6332ea3bb043f27b0bddefa9f/raw/coverage-react-compose-form-beta.svg)
 
 ```shell
 npm i react-hook-form react-compose-form

package/lib/blocks/Form.d.ts

@@ -1,11 +1,9 @@
-import { FormEvent, ComponentType, PropsWithChildren, JSX, HTMLAttributes } from "react";
+import { ElementType } from "react";
 import { UseFormProps, FieldValues, SubmitHandler, SubmitErrorHandler } from "react-hook-form";
-export type FormComponentProps<P = unknown> = P & PropsWithChildren<{
-    onSubmit?: (e: FormEvent) => void;
-}>;
-export type FormProps<T extends FieldValues = FieldValues, C = any, P = unknown> = PropsWithChildren<UseFormProps<T, C> & Omit<P, "onSubmit" | "onInvalid"> & {
-    as?: ComponentType<FormComponentProps<P>> | keyof JSX.IntrinsicElements;
+import { PolymorphicComponentProps } from "../types/PolymorphicComponentProps";
+type FormProps<T extends FieldValues = FieldValues, C extends ElementType = "form"> = PolymorphicComponentProps<C, UseFormProps<T, C> & {
     onSubmit?: SubmitHandler<T>;
     onInvalid?: SubmitErrorHandler<T>;
 }>;
-export declare const Form: <T extends FieldValues = FieldValues, C = HTMLFormElement, P = HTMLAttributes<C>>(props: FormProps<T, C, P>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <T extends FieldValues = FieldValues, C extends ElementType = "form">(props: FormProps<T, C>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/blocks/Form.js

@@ -10,11 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useCallback } from "react";
+import { useRef, useCallback, useEffect, useLayoutEffect } from "react";
 import { useForm, FormProvider } from "react-hook-form";
+import { useFormContext } from "../contexts/FormContext";
 export const Form = (props) => {
-    const { as: Component = "form", mode, disabled, reValidateMode, defaultValues, values, resetOptions, resolver, errors, context, shouldFocusError, shouldUnregister, shouldUseNativeValidation, progressive, criteriaMode, delayError, formControl, children, onSubmit, onInvalid } = props, rest = __rest(props, ["as", "mode", "disabled", "reValidateMode", "defaultValues", "values", "resetOptions", "resolver", "errors", "context", "shouldFocusError", "shouldUnregister", "shouldUseNativeValidation", "progressive", "criteriaMode", "delayError", "formControl", "children", "onSubmit", "onInvalid"]);
-    const formProps = useForm({
+    const { id, as: Component = "form", mode, disabled, reValidateMode, defaultValues, values, resetOptions, resolver, errors, context, shouldFocusError, shouldUnregister, shouldUseNativeValidation, progressive, criteriaMode, delayError, formControl, children, onSubmit, onInvalid } = props, rest = __rest(props, ["id", "as", "mode", "disabled", "reValidateMode", "defaultValues", "values", "resetOptions", "resolver", "errors", "context", "shouldFocusError", "shouldUnregister", "shouldUseNativeValidation", "progressive", "criteriaMode", "delayError", "formControl", "children", "onSubmit", "onInvalid"]);
+    const { registry, registerForm, unregisterForm } = useFormContext();
+    const form = useForm({
         mode,
         disabled,
         reValidateMode,
@@ -32,6 +34,9 @@ export const Form = (props) => {
         delayError,
         formControl
     });
+    if (id && !registry.has(id)) {
+        registry.set(id, form);
+    }
     const submitRef = useRef(onSubmit), invalidRef = useRef(onInvalid);
     submitRef.current = onSubmit;
     invalidRef.current = onInvalid;
@@ -45,5 +50,19 @@ export const Form = (props) => {
             return invalidRef.current(errors, event);
         }
     }, []);
-    return (_jsx(FormProvider, Object.assign({}, formProps, { children: _jsx(Component, Object.assign({}, rest, { onSubmit: formProps.handleSubmit(handleSubmit, handleInvalid), children: children })) })));
+    useEffect(() => {
+        if (!id) {
+            return;
+        }
+        registerForm(id, form);
+    }, [registerForm, id, form, form.formState.isSubmitting]);
+    useLayoutEffect(() => {
+        if (!id) {
+            return;
+        }
+        return () => {
+            unregisterForm(id);
+        };
+    }, []);
+    return (_jsx(FormProvider, Object.assign({}, form, { children: _jsx(Component, Object.assign({}, rest, { id: id, onSubmit: form.handleSubmit(handleSubmit, handleInvalid), children: children })) })));
 };

package/lib/blocks/FormControl.d.ts

@@ -1,10 +1,11 @@
 import { ComponentType } from "react";
-import { ControllerRenderProps, Message, ValidationRule, ControllerFieldState } from "react-hook-form";
+import { Control, ControllerRenderProps, Message, ValidationRule, ControllerFieldState } from "react-hook-form";
 export type FormFieldProps<P = unknown> = P & Partial<ControllerRenderProps & ControllerFieldState>;
 export type FormControlProps<P = unknown> = Omit<P, "as" | "name" | "disabled" | "required" | keyof ControllerFieldState | keyof ControllerRenderProps> & {
     as?: ComponentType<FormFieldProps<P>>;
     name: string;
     disabled?: boolean;
     required?: Message | ValidationRule<boolean>;
+    control?: Control;
 };
 export declare const FormControl: <P = unknown>(props: FormControlProps<P>) => import("react/jsx-runtime").JSX.Element;

package/lib/blocks/FormControl.js

@@ -13,11 +13,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
 import { FormControlContext } from "../contexts";
 import { useFormGroupName } from "../hooks";
-export const FormControl = (props) => {
-    const { as: Component = "input", name, disabled = false, required } = props, rest = __rest(props, ["as", "name", "disabled", "required"]);
+const ControllerWithContext = (props) => {
     const { control } = useFormContext();
+    return (_jsx(Controller, Object.assign({}, props, { control: control })));
+};
+export const FormControl = (props) => {
+    const { as: Component = "input", name, disabled = false, required, control } = props, rest = __rest(props, ["as", "name", "disabled", "required", "control"]);
     const fullName = useFormGroupName(name);
-    return (_jsx(Controller, { control: control, disabled: disabled, name: fullName, rules: {
+    const C = control ? Controller : ControllerWithContext;
+    return (_jsx(C, { control: control, disabled: disabled, name: fullName, rules: {
             required
         }, render: ({ field, fieldState }) => {
             return (_jsx(FormControlContext, { value: fieldState, children: _jsx(Component, Object.assign({}, rest, field)) }));

package/lib/blocks/FormProvider.d.ts

@@ -0,0 +1,4 @@
+import React, { PropsWithChildren } from "react";
+type FormProviderProps = PropsWithChildren;
+export declare const FormProvider: React.FC<FormProviderProps>;
+export {};

package/lib/blocks/FormProvider.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { FormContext } from "../contexts/FormContext";
+export const FormProvider = (props) => {
+    const { children } = props;
+    const [formMap, setFormMap] = useState(() => new Map());
+    const handleGetForm = useCallback((formId) => {
+        return formMap.get(formId);
+    }, [formMap]);
+    const handleRegisterForm = useCallback((id, form) => {
+        setFormMap((formMap) => {
+            const newMap = new Map(formMap);
+            newMap.set(id, form);
+            return newMap;
+        });
+    }, []);
+    const handleUnregisterForm = useCallback((id) => {
+        setFormMap((map) => {
+            const formMap = new Map(map);
+            formMap.delete(id);
+            return formMap;
+        });
+    }, []);
+    const context = useMemo(() => {
+        return {
+            registry: formMap,
+            getForm: handleGetForm,
+            registerForm: handleRegisterForm,
+            unregisterForm: handleUnregisterForm
+        };
+    }, [formMap, handleGetForm, handleRegisterForm, handleUnregisterForm]);
+    return (_jsx(FormContext, { value: context, children: children }));
+};

package/lib/blocks/index.d.ts

@@ -2,3 +2,4 @@ export * from "./Form";
 export * from "./FormArray";
 export * from "./FormControl";
 export * from "./FormGroup";
+export * from "./FormProvider";

package/lib/blocks/index.js

@@ -2,3 +2,4 @@ export * from "./Form";
 export * from "./FormArray";
 export * from "./FormControl";
 export * from "./FormGroup";
+export * from "./FormProvider";

package/lib/contexts/FormContext.d.ts

@@ -0,0 +1,9 @@
+import { UseFormReturn } from "react-hook-form";
+export type FormContextType = {
+    registry: Map<string, UseFormReturn>;
+    getForm: (id: string) => UseFormReturn | undefined;
+    registerForm: (id: string, props: UseFormReturn) => void;
+    unregisterForm: (id: string) => void;
+};
+export declare const FormContext: import("react").Context<FormContextType>;
+export declare const useFormContext: () => FormContextType;

package/lib/contexts/FormContext.js

@@ -0,0 +1,10 @@
+import { useContext, createContext } from "react";
+export const FormContext = createContext({
+    registry: new Map(),
+    getForm() {
+        return undefined;
+    },
+    registerForm() { },
+    unregisterForm() { }
+});
+export const useFormContext = () => useContext(FormContext);

package/lib/contexts/FormRegistryContext.d.ts

@@ -0,0 +1 @@
+export declare const useFormRegistry: () => void;

package/lib/contexts/FormRegistryContext.js

@@ -0,0 +1,6 @@
+import { useCallback } from "react";
+const formMap = new Map();
+export const useFormRegistry = () => {
+    const subscribe = useCallback(() => {
+    }, []);
+};

package/lib/hooks/index.d.ts

@@ -1,2 +1,3 @@
+export * from "./useForm";
 export * from "./useFormArray";
 export * from "./useFormGroupName";

package/lib/hooks/index.js

@@ -1,2 +1,3 @@
+export * from "./useForm";
 export * from "./useFormArray";
 export * from "./useFormGroupName";

package/lib/hooks/useForm.d.ts

@@ -0,0 +1,2 @@
+import { FieldValues, UseFormReturn } from "react-hook-form";
+export declare const useForm: <V extends FieldValues = FieldValues>(formId?: string) => UseFormReturn<V>;

package/lib/hooks/useForm.js

@@ -0,0 +1,13 @@
+import { useFormContext as useHookContext } from "react-hook-form";
+import { useFormContext } from "../contexts/FormContext";
+export const useForm = (formId) => {
+    const { registry } = useFormContext();
+    if (formId) {
+        const form = registry.get(formId);
+        if (!form) {
+            throw new Error(`Form "${formId}" is not registered yet`);
+        }
+        return form;
+    }
+    return useHookContext();
+};

package/lib/types/FormControl.d.ts

@@ -0,0 +1,4 @@
+import { FormState } from "react-hook-form";
+export type FormControl = {
+    formState: FormState<any>;
+};

package/lib/types/FormControl.js

@@ -0,0 +1 @@
+export {};

package/lib/types/PolymorphicComponentProps.d.ts

@@ -0,0 +1,7 @@
+import { ElementType, ComponentPropsWithoutRef } from "react";
+type AsProp<T extends ElementType> = {
+    as?: T;
+};
+type PropsToOmit<T extends ElementType, P> = keyof (AsProp<T> & P);
+export type PolymorphicComponentProps<T extends ElementType, Props = {}> = Props & AsProp<T> & Omit<ComponentPropsWithoutRef<T>, PropsToOmit<T, Props>>;
+export {};

package/lib/types/PolymorphicComponentProps.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-compose-form",
-    "version": "0.0.4",
+    "version": "0.0.6-beta.0",
     "description": "Composable form components built on top of React Hook Form",
     "author": "Kris Papercut <krispcut@gmail.com>",
     "license": "MIT",