react-compose-form 0.0.2 → 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

package/lib/blocks/Form.d.ts

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

@@ -13,8 +13,26 @@ 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);
+    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) => {
@@ -27,5 +45,5 @@ export const Form = (props) => {
             invalidRef.current(errors, event);
         }
     }, []);
-    return (_jsx(FormProvider, Object.assign({}, formProps, { children: _jsx(Component, { className: className, onSubmit: formProps.handleSubmit(handleSubmit, handleInvalid), children: children }) })));
+    return (_jsx(FormProvider, Object.assign({}, formProps, { children: _jsx(Component, Object.assign({}, rest, { className: className, onSubmit: formProps.handleSubmit(handleSubmit, handleInvalid), children: children })) })));
 };

package/lib/blocks/index.d.ts

@@ -5,3 +5,4 @@ export * from "./FormControl";
 export * from "./FormControlContext";
 export * from "./FormGroup";
 export * from "./FormGroupContext";
+export * from "./FormArrayItemContext";

package/lib/blocks/index.js

@@ -5,3 +5,4 @@ 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.2",
+    "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"
     }
 }