react-compose-form 0.0.1 → 0.0.3

package/README.md

@@ -1,4 +1,12 @@
-# kp-admin
+# 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)
+[![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)
 
 ```shell
 npm i react-hook-form react-compose-form
@@ -7,7 +15,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 +39,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,13 @@
+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 & {
+    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;

package/lib/blocks/Form.js

@@ -0,0 +1,49 @@
+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, 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 formProps = useForm({
+        mode,
+        disabled,
+        reValidateMode,
+        defaultValues,
+        values,
+        resetOptions,
+        resolver,
+        errors,
+        context,
+        shouldFocusError,
+        shouldUnregister,
+        shouldUseNativeValidation,
+        progressive,
+        criteriaMode,
+        delayError,
+        formControl
+    });
+    const 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, Object.assign({}, rest, { 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,8 @@
 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 +1,8 @@
 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/utils/joinDotNotation.test.d.ts

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

package/lib/utils/joinDotNotation.test.js

@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest";
+import { joinDotNotation } from "./joinDotNotation";
+describe("joinDotNotation", () => {
+    it("joins simple names with dots", () => {
+        expect(joinDotNotation("user", "name")).toBe("user.name");
+        expect(joinDotNotation("profile", "contacts", "email")).toBe("profile.contacts.email");
+    });
+    it("splits dotted segments and flattens", () => {
+        expect(joinDotNotation("user.info", "first")).toBe("user.info.first");
+        expect(joinDotNotation("a.b", "c.d", "e")).toBe("a.b.c.d.e");
+    });
+    it("respects escaped dots (\\.) and does not split them", () => {
+        expect(joinDotNotation("user\\.info")).toBe("user\\.info");
+        expect(joinDotNotation("user\\.info", "first")).toBe("user\\.info.first");
+        expect(joinDotNotation("one\\.two\\.three", "x")).toBe("one\\.two\\.three.x");
+    });
+    it("ignores empty strings and falsy names", () => {
+        expect(joinDotNotation("", "a", "", "b")).toBe("a.b");
+        expect(joinDotNotation("")).toBe("");
+    });
+    it("handles no arguments", () => {
+        expect(joinDotNotation()).toBe("");
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-compose-form",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "description": "Composable form components built on top of React Hook Form",
     "author": "Kris Papercut <krispcut@gmail.com>",
     "license": "MIT",
@@ -26,14 +26,25 @@
         "start": "npm run watch",
         "watch": "tsc --watch",
         "build": "tsc --build",
-        "test": "echo 'error'"
+        "test": "vitest run --coverage",
+        "make-coverage-badge": "make-coverage-badge",
+        "test:watch": "vitest"
     },
     "peerDependencies": {
-        "react": "x.x.x",
+        "react": ">=16.8.0",
         "react-hook-form": "^7.x.x"
     },
     "devDependencies": {
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^16.0.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/react": "^19.2.2",
-        "typescript": "^5.9.3"
+        "@types/react-dom": "^19.2.2",
+        "@vitest/coverage-v8": "^4.0.5",
+        "jsdom": "^25.0.1",
+        "make-coverage-badge": "^1.2.0",
+        "react": "^19.2.0",
+        "typescript": "^5.9.3",
+        "vitest": "^4.0.5"
     }
 }

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";