react-compose-form 0.0.3 → 0.0.5-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.5&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,13 +1,11 @@
 import { FormEvent, ComponentType, PropsWithChildren, JSX, HTMLAttributes } from "react";
 import { UseFormProps, FieldValues, SubmitHandler, SubmitErrorHandler } from "react-hook-form";
 export type FormComponentProps<P = unknown> = P & PropsWithChildren<{
-    className?: string;
     onSubmit?: (e: FormEvent) => void;
 }>;
-export type FormProps<T extends FieldValues = FieldValues, C = any, P = unknown> = PropsWithChildren<UseFormProps<T, C> & P & {
+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;
-    className?: string;
     onSubmit?: SubmitHandler<T>;
     onInvalid?: SubmitErrorHandler<T>;
 }>;
-export declare const Form: <T extends FieldValues = FieldValues, C = any, P = HTMLAttributes<HTMLFormElement>>(props: FormProps<T, C, P>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <T extends FieldValues = FieldValues, C = HTMLFormElement, P = HTMLAttributes<C>>(props: FormProps<T, C, P>) => import("react/jsx-runtime").JSX.Element;

package/lib/blocks/Form.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useCallback } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 export const Form = (props) => {
-    const { as: Component = "form", className, mode, disabled, reValidateMode, defaultValues, values, resetOptions, resolver, errors, context, shouldFocusError, shouldUnregister, shouldUseNativeValidation, progressive, criteriaMode, delayError, formControl, children, onSubmit, onInvalid } = props, rest = __rest(props, ["as", "className", "mode", "disabled", "reValidateMode", "defaultValues", "values", "resetOptions", "resolver", "errors", "context", "shouldFocusError", "shouldUnregister", "shouldUseNativeValidation", "progressive", "criteriaMode", "delayError", "formControl", "children", "onSubmit", "onInvalid"]);
+    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({
         mode,
         disabled,
@@ -37,13 +37,13 @@ export const Form = (props) => {
     invalidRef.current = onInvalid;
     const handleSubmit = useCallback((data, event) => {
         if (submitRef.current) {
-            submitRef.current(data, event);
+            return submitRef.current(data, event);
         }
     }, []);
     const handleInvalid = useCallback((errors, event) => {
         if (invalidRef.current) {
-            invalidRef.current(errors, event);
+            return invalidRef.current(errors, event);
         }
     }, []);
-    return (_jsx(FormProvider, Object.assign({}, formProps, { children: _jsx(Component, Object.assign({}, rest, { className: className, onSubmit: formProps.handleSubmit(handleSubmit, handleInvalid), children: children })) })));
+    return (_jsx(FormProvider, Object.assign({}, formProps, { children: _jsx(Component, Object.assign({}, rest, { onSubmit: formProps.handleSubmit(handleSubmit, handleInvalid), children: children })) })));
 };

package/lib/blocks/FormArray.js

@@ -2,16 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { isValidElement, cloneElement, Children } from "react";
 import { useFieldArray } from "react-hook-form";
 import { FormGroup } from "./FormGroup";
-import { useFormGroupName } from "./FormGroupContext";
-import { FormArrayContext } from "./FormArrayContext";
-import { FormArrayItemContext } from "./FormArrayItemContext";
+import { FormArrayContext, FormArrayItemContext } from "../contexts";
+import { useFormGroupName } from "../hooks";
 export const FormArray = (props) => {
     const { as: Component = React.Fragment, name, children } = props;
     const fullName = useFormGroupName(name);
     const array = useFieldArray({
         name: fullName
     });
-    return (_jsx(FormGroup, { name: fullName, children: _jsx(FormArrayContext.Provider, { value: array, children: _jsx(Component, { children: array.fields.map((field, index) => {
+    return (_jsx(FormGroup, { name: name, children: _jsx(FormArrayContext.Provider, { value: array, children: _jsx(Component, { children: array.fields.map((field, index) => {
                     return (_jsx(FormGroup, { name: index.toString(), children: _jsx(FormArrayItemContext.Provider, { value: {
                                 index,
                                 remove: () => array.remove(index),

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

@@ -11,13 +11,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormContext, Controller } from "react-hook-form";
-import { useFormGroupName } from "./FormGroupContext";
-import { FormControlContext } from "./FormControlContext";
-export const FormControl = (props) => {
-    const { as: Component = "input", name, disabled = false, required } = props, rest = __rest(props, ["as", "name", "disabled", "required"]);
+import { FormControlContext } from "../contexts";
+import { useFormGroupName } from "../hooks";
+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/FormGroup.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { FormGroupContext, useFormGroupName } from "./FormGroupContext";
+import { FormGroupContext } from "../contexts";
+import { useFormGroupName } from "../hooks";
 export const FormGroup = (props) => {
     const { name, children } = props;
     const fullName = useFormGroupName(name);

package/lib/blocks/index.d.ts

@@ -1,8 +1,4 @@
 export * from "./Form";
 export * from "./FormArray";
-export * from "./FormArrayContext";
 export * from "./FormControl";
-export * from "./FormControlContext";
 export * from "./FormGroup";
-export * from "./FormGroupContext";
-export * from "./FormArrayItemContext";

package/lib/blocks/index.js

@@ -1,8 +1,4 @@
 export * from "./Form";
 export * from "./FormArray";
-export * from "./FormArrayContext";
 export * from "./FormControl";
-export * from "./FormControlContext";
 export * from "./FormGroup";
-export * from "./FormGroupContext";
-export * from "./FormArrayItemContext";

package/lib/{blocks → contexts}/FormArrayContext.d.ts

@@ -1,3 +1,2 @@
 import { UseFieldArrayReturn } from "react-hook-form";
 export declare const FormArrayContext: import("react").Context<UseFieldArrayReturn>;
-export declare const useFormArray: () => UseFieldArrayReturn;

package/lib/{blocks → contexts}/FormArrayContext.js

@@ -1,4 +1,4 @@
-import { createContext, useContext } from "react";
+import { createContext } from "react";
 export const FormArrayContext = createContext({
     fields: [],
     swap() { },
@@ -10,4 +10,3 @@ export const FormArrayContext = createContext({
     update() { },
     replace() { }
 });
-export const useFormArray = () => useContext(FormArrayContext);

package/lib/{blocks → contexts}/FormArrayItemContext.js

@@ -6,4 +6,3 @@ export const FormArrayItemContext = createContext({
     moveDown() { }
 });
 export const useFormArrayItemContext = () => useContext(FormArrayItemContext);
-;

package/lib/{blocks → contexts}/FormGroupContext.d.ts

@@ -1,4 +1,3 @@
 export declare const FormGroupContext: import("react").Context<{
     name?: string;
 }>;
-export declare const useFormGroupName: (name?: string) => string;

package/lib/contexts/FormGroupContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const FormGroupContext = createContext({});

package/lib/contexts/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./FormArrayContext";
+export * from "./FormArrayItemContext";
+export * from "./FormControlContext";
+export * from "./FormGroupContext";

package/lib/contexts/index.js

@@ -0,0 +1,4 @@
+export * from "./FormArrayContext";
+export * from "./FormArrayItemContext";
+export * from "./FormControlContext";
+export * from "./FormGroupContext";

package/lib/hooks/index.d.ts

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

package/lib/hooks/index.js

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

package/lib/hooks/useFormArray.d.ts

@@ -0,0 +1,2 @@
+import { UseFieldArrayReturn, FieldValues, ArrayPath } from "react-hook-form";
+export declare const useFormArray: <T extends FieldValues = FieldValues, P extends ArrayPath<T> = ArrayPath<T>, K extends string = "id">() => UseFieldArrayReturn<T, P, K>;

package/lib/hooks/useFormArray.js

@@ -0,0 +1,3 @@
+import { useContext } from "react";
+import { FormArrayContext } from "../contexts";
+export const useFormArray = () => useContext(FormArrayContext);

package/lib/hooks/useFormGroupName.d.ts

@@ -0,0 +1 @@
+export declare const useFormGroupName: (name: string) => string;

package/lib/hooks/useFormGroupName.js

@@ -0,0 +1,9 @@
+import { useMemo, useContext } from "react";
+import { FormGroupContext } from "../contexts";
+import { joinDotNotation } from "../utils";
+export const useFormGroupName = (name) => {
+    const { name: parent = "" } = useContext(FormGroupContext);
+    return useMemo(() => {
+        return joinDotNotation(parent, name);
+    }, [parent, name]);
+};

package/lib/index.d.ts

@@ -1 +1,3 @@
 export * from "./blocks";
+export * from "./contexts";
+export * from "./hooks";

package/lib/index.js

@@ -1 +1,3 @@
 export * from "./blocks";
+export * from "./contexts";
+export * from "./hooks";

package/package.json

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

package/lib/blocks/FormGroupContext.js

@@ -1,9 +0,0 @@
-import { useMemo, useContext, createContext } from "react";
-import { joinDotNotation } from "../utils";
-export const FormGroupContext = createContext({});
-export const useFormGroupName = (name = "") => {
-    const { name: parentName = "" } = useContext(FormGroupContext);
-    return useMemo(() => {
-        return joinDotNotation(parentName, name);
-    }, [parentName, name]);
-};