react-compose-form 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Kris Papercut
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# kp-admin
+
+```shell
+npm i react-hook-form react-compose-form
+```
+
+## Usage
+
+```tsx
+import {Form, FormControl, FormFieldProps} from "@kearisp/react-admin";
+
+type InputProps = {
+    label: string;
+};
+
+const InputField = ({label, ...props}: FormFieldProps<InputProps>) => {
+    return (
+        <div>
+            <label>{label}</label>
+            <input {...props} />
+        </div>
+    );
+};
+
+<Form>
+    <FormControl
+      as={InputField}
+      label="First name"
+      name="first_name" />
+</Form>
+```
+
+```tsx
+import {Form, FormControl, FormArray, useFormArray} from "@kearisp/react-admin";
+
+
+const ExampleArray = ({ children }: PropsWithChildren) => {
+    const {
+        append
+    } = useFormArray();
+
+    return (
+        <div className="array-container">
+            {children}
+
+            <button type="button" onClick={() => append({first_name: "", last_name: ""})}>
+                Add Item
+            </button>
+        </div>
+    );
+};
+
+<Form>
+    <FormArray as={ExampleArray} name="users">
+        <div className="row">
+            <FormControl name="first_name" />
+            <FormControl name="last_name" />
+        </div>
+    </FormArray>
+</Form>
+```

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,6 @@
+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/FormArray.js

@@ -0,0 +1,37 @@
+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";
+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: index.toString(), children: _jsx(FormArrayItemContext.Provider, { value: {
+                                index,
+                                remove: () => array.remove(index),
+                                moveUp: () => {
+                                    if (index - 1 >= 0) {
+                                        array.swap(index, index - 1);
+                                    }
+                                },
+                                moveDown: () => {
+                                    if (index + 1 < array.fields.length) {
+                                        array.swap(index, index + 1);
+                                    }
+                                }
+                            }, children: Children.map(children, (child, index) => {
+                                if (!isValidElement(child)) {
+                                    return null;
+                                }
+                                return cloneElement(child, {
+                                    key: index.toString()
+                                });
+                            }) }) }, field.id));
+                }) }) }) }));
+};

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

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

package/lib/blocks/Form/FormArrayContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+export const FormArrayContext = createContext({
+    fields: [],
+    swap() { },
+    remove() { },
+    append() { },
+    move() { },
+    insert() { },
+    prepend() { },
+    update() { },
+    replace() { }
+});
+export const useFormArray = () => useContext(FormArrayContext);

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

@@ -0,0 +1,12 @@
+export declare const FormArrayItemContext: import("react").Context<{
+    index: number;
+    remove: () => void;
+    moveUp: () => void;
+    moveDown: () => void;
+}>;
+export declare const useFormArrayItemContext: () => {
+    index: number;
+    remove: () => void;
+    moveUp: () => void;
+    moveDown: () => void;
+};

package/lib/blocks/Form/FormArrayItemContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const FormArrayItemContext = createContext({
+    index: 0,
+    remove() { },
+    moveUp() { },
+    moveDown() { }
+});
+export const useFormArrayItemContext = () => useContext(FormArrayItemContext);
+;

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

@@ -0,0 +1,10 @@
+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/FormControl.js

@@ -0,0 +1,24 @@
+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 { useFormContext, Controller, } from "react-hook-form";
+import { useFormGroupName } from "./FormGroupContext";
+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)));
+        } }));
+};

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

@@ -0,0 +1,5 @@
+import React, { PropsWithChildren } from "react";
+export type FormGroupProps = PropsWithChildren<{
+    name: string;
+}>;
+export declare const FormGroup: React.FC<FormGroupProps>;

package/lib/blocks/Form/FormGroup.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormGroupContext, useFormGroupName } from "./FormGroupContext";
+export const FormGroup = (props) => {
+    const { name, children } = props;
+    const fullName = useFormGroupName(name);
+    return (_jsx(FormGroupContext.Provider, { value: {
+            name: fullName
+        }, children: children }));
+};

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

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

package/lib/blocks/Form/FormGroupContext.js

@@ -0,0 +1,9 @@
+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]);
+};

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

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

package/lib/blocks/Form/index.js

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

package/lib/blocks/index.d.ts

@@ -0,0 +1 @@
+export * from "./Form";

package/lib/blocks/index.js

@@ -0,0 +1 @@
+export * from "./Form";

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from "./blocks";

package/lib/index.js

@@ -0,0 +1 @@
+export * from "./blocks";

package/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./joinDotNotation";

package/lib/utils/index.js

@@ -0,0 +1 @@
+export * from "./joinDotNotation";

package/lib/utils/joinDotNotation.d.ts

@@ -0,0 +1 @@
+export declare const joinDotNotation: (...names: string[]) => string;

package/lib/utils/joinDotNotation.js

@@ -0,0 +1,8 @@
+export const joinDotNotation = (...names) => {
+    return names.reduce((res, name) => {
+        return [
+            ...res,
+            ...name ? name.split(/(?<!\\)\./) : []
+        ];
+    }, []).join(".");
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "react-compose-form",
+    "version": "0.0.1",
+    "description": "Composable form components built on top of React Hook Form",
+    "author": "Kris Papercut <krispcut@gmail.com>",
+    "license": "MIT",
+    "main": "./lib/index.js",
+    "types": "./lib/index.d.ts",
+    "keywords": [
+        "react",
+        "form",
+        "hooks",
+        "forms",
+        "dashboard"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/kearisp/react-compose-form.git"
+    },
+    "homepage": "https://github.com/kearisp/react-compose-form/blob/master/README.md",
+    "bugs": {
+        "url": "https://github.com/kearisp/react-compose-form/issues"
+    },
+    "scripts": {
+        "prepublishOnly": "npm run build",
+        "start": "npm run watch",
+        "watch": "tsc --watch",
+        "build": "tsc --build",
+        "test": "echo 'error'"
+    },
+    "peerDependencies": {
+        "react": "x.x.x",
+        "react-hook-form": "^7.x.x"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.2",
+        "typescript": "^5.9.3"
+    }
+}