react-compose-form 0.0.1 → 0.0.2

package/README.md

@@ -7,7 +7,7 @@ npm i react-hook-form react-compose-form
 ## Usage
 
 ```tsx
-import {Form, FormControl, FormFieldProps} from "@kearisp/react-admin";
+import {Form, FormControl, FormFieldProps} from "react-compose-form";
 
 type InputProps = {
     label: string;
@@ -31,7 +31,7 @@ const InputField = ({label, ...props}: FormFieldProps<InputProps>) => {
 ```
 
 ```tsx
-import {Form, FormControl, FormArray, useFormArray} from "@kearisp/react-admin";
+import {Form, FormControl, FormArray, useFormArray} from "react-compose-form";
 
 
 const ExampleArray = ({ children }: PropsWithChildren) => {

package/lib/blocks/Form.d.ts

@@ -0,0 +1,14 @@
+import { FormEvent, ElementType, ComponentType, PropsWithChildren } from "react";
+import { UseFormProps, FieldValues, SubmitHandler, SubmitErrorHandler } from "react-hook-form";
+type FormComponentProps = {
+    className?: string;
+    onSubmit?: (e: FormEvent) => void;
+};
+export type FormProps<T extends FieldValues = FieldValues, C = any> = PropsWithChildren<UseFormProps<T, C> & {
+    as?: ElementType<FormComponentProps> | ComponentType<FormComponentProps>;
+    className?: string;
+    onSubmit?: SubmitHandler<T>;
+    onInvalid?: SubmitErrorHandler<T>;
+}>;
+export declare const Form: <T extends FieldValues = FieldValues, C = any>(props: FormProps<T, C>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/blocks/Form.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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, children, onSubmit, onInvalid } = props, rest = __rest(props, ["as", "className", "children", "onSubmit", "onInvalid"]);
+    const formProps = useForm(rest), submitRef = useRef(onSubmit), invalidRef = useRef(onInvalid);
+    submitRef.current = onSubmit;
+    invalidRef.current = onInvalid;
+    const handleSubmit = useCallback((data, event) => {
+        if (submitRef.current) {
+            submitRef.current(data, event);
+        }
+    }, []);
+    const handleInvalid = useCallback((errors, event) => {
+        if (invalidRef.current) {
+            invalidRef.current(errors, event);
+        }
+    }, []);
+    return (_jsx(FormProvider, Object.assign({}, formProps, { children: _jsx(Component, { className: className, onSubmit: formProps.handleSubmit(handleSubmit, handleInvalid), children: children }) })));
+};

package/lib/blocks/FormArray.d.ts

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren, ComponentType, ElementType } from "react";
+export type FormArrayProps = PropsWithChildren<{
+    as?: ComponentType<PropsWithChildren> | ElementType<PropsWithChildren>;
+    name: string;
+}>;
+export declare const FormArray: React.FC<FormArrayProps>;

package/lib/blocks/FormControl.d.ts

@@ -0,0 +1,10 @@
+import { ComponentType } from "react";
+import { 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>;
+};
+export declare const FormControl: <P = unknown>(props: FormControlProps<P>) => import("react/jsx-runtime").JSX.Element;

package/lib/blocks/{Form/FormControl.js → FormControl.js}

@@ -10,15 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useFormContext, Controller, } from "react-hook-form";
+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"]);
     const { control } = useFormContext();
     const fullName = useFormGroupName(name);
     return (_jsx(Controller, { control: control, disabled: disabled, name: fullName, rules: {
             required
-        }, render: ({ field }) => {
-            return (_jsx(Component, Object.assign({}, rest, field)));
+        }, render: ({ field, fieldState }) => {
+            return (_jsx(FormControlContext, { value: fieldState, children: _jsx(Component, Object.assign({}, rest, field)) }));
         } }));
 };

package/lib/blocks/FormControlContext.d.ts

@@ -0,0 +1,3 @@
+import { ControllerFieldState } from "react-hook-form";
+export declare const FormControlContext: import("react").Context<ControllerFieldState>;
+export declare const useFormControl: () => ControllerFieldState;

package/lib/blocks/FormControlContext.js

@@ -0,0 +1,8 @@
+import { useContext, createContext } from "react";
+export const FormControlContext = createContext({
+    invalid: false,
+    isDirty: false,
+    isTouched: false,
+    isValidating: false
+});
+export const useFormControl = () => useContext(FormControlContext);

package/lib/blocks/{Form/FormGroupContext.js → FormGroupContext.js}

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

package/lib/blocks/index.d.ts

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

package/lib/blocks/index.js

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

package/package.json

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

package/lib/blocks/Form/Form.d.ts

@@ -1,16 +0,0 @@
-import { FormEvent, ComponentType, PropsWithChildren } from "react";
-import { Resolver, FieldValues, Mode, DefaultValues } from "react-hook-form";
-export type FormProps<T extends FieldValues = FieldValues> = PropsWithChildren<{
-    as?: ComponentType<{
-        className?: string;
-        onSubmit: (e: FormEvent) => void;
-    }>;
-    className?: string;
-    mode?: Mode;
-    resolver?: Resolver<T>;
-    values?: T;
-    defaultValues?: DefaultValues<T>;
-    onSubmit?: (data: T) => void;
-    onError?: (err: unknown) => void;
-}>;
-export declare const Form: <T extends FieldValues = FieldValues>(props: FormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/blocks/Form/Form.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { useForm, FormProvider } from "react-hook-form";
-export const Form = (props) => {
-    const { as: Component = "form", className, mode, resolver, values, defaultValues, children, onSubmit, onError } = props;
-    const formProps = useForm({
-        mode,
-        resolver,
-        values,
-        defaultValues
-    });
-    const handleSubmit = useCallback((data) => {
-        if (onSubmit) {
-            onSubmit(data);
-        }
-    }, [onSubmit]);
-    return (_jsx(FormProvider, Object.assign({}, formProps, { children: _jsx(Component, { className: className, onSubmit: formProps.handleSubmit(handleSubmit, onError), children: children }) })));
-};

package/lib/blocks/Form/FormArray.d.ts

@@ -1,6 +0,0 @@
-import React, { PropsWithChildren, ComponentType } from "react";
-export type FormArrayProps = PropsWithChildren<{
-    as?: ComponentType<PropsWithChildren>;
-    name: string;
-}>;
-export declare const FormArray: React.FC<FormArrayProps>;

package/lib/blocks/Form/FormControl.d.ts

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

package/lib/blocks/Form/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./Form";
-export * from "./FormArray";
-export * from "./FormArrayContext";
-export * from "./FormControl";
-export * from "./FormGroup";

package/lib/blocks/Form/index.js

@@ -1,5 +0,0 @@
-export * from "./Form";
-export * from "./FormArray";
-export * from "./FormArrayContext";
-export * from "./FormControl";
-export * from "./FormGroup";