@arturton/react-form-constructor 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Artur Tonoyan
+
+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,160 @@
+# React Form Constructor
+
+> Минималистичный конструктор форм для React на базе **react-hook-form**, с удобной декларацией полей, валидацией и масками ввода.
+
+## Зачем это нужно
+
+Когда форма состоит из набора однотипных полей, удобнее описывать её **данными**, а не JSX-шаблонами. Библиотека помогает:
+
+- быстро собрать форму из массива полей;
+- подключить валидацию `react-hook-form` без лишнего кода;
+- использовать маски ввода через `react-number-format`;
+- гибко стилизовать форму через классы;
+- при необходимости перейти на «ручной» рендер через `children`.
+
+## Установка
+
+```bash
+npm i react-form-constructor
+```
+
+## Быстрый старт
+
+```tsx
+import { FormLayout, type FormField } from "react-form-constructor";
+
+type LoginForm = {
+  phone: string;
+  password: string;
+};
+
+const fields: FormField<LoginForm>[] = [
+  {
+    label: "Телефон",
+    placeholder: "+7 (___) ___-__-__",
+    key: "phone",
+    required: "Введите телефон",
+    maska: {
+      required: "Введите телефон",
+      format: "+7 (###) ###-##-##",
+      mask: "_",
+    },
+  },
+  {
+    label: "Пароль",
+    placeholder: "••••••••",
+    key: "password",
+    required: "Введите пароль",
+    minLength: { value: 6, message: "Минимум 6 символов" },
+    type: "password",
+  },
+];
+
+export function Login() {
+  return (
+    <FormLayout<LoginForm>
+      formData={fields}
+      funSubmit={(data) => console.log(data)}
+      formClass="form"
+      buttonClass="btn"
+    />
+  );
+}
+```
+
+## Как это работает
+
+- **`FormLayout`** создаёт форму и сам регистрирует поля через `react-hook-form`.
+- Каждое поле описывается типом `FormField<T>` и привязывается к ключу `keyof T`.
+- Если передан `formData`, библиотека сама отрисует поля и кнопку отправки.
+- Если `formData` не передан — можно рендерить **свои поля** через `children` и использовать `useFormContext()`.
+
+## Пример с кастомной разметкой (children)
+
+```tsx
+import { FormLayout, useFormContext } from "react-form-constructor";
+
+function CustomField() {
+  const { register, errors } = useFormContext<{ email: string }>();
+
+  return (
+    <div>
+      <input {...register("email", { required: "Введите email" })} />
+      {errors.email && <span>{errors.email.message}</span>}
+    </div>
+  );
+}
+
+export function CustomForm() {
+  return (
+    <FormLayout funSubmit={(data) => console.log(data)}>
+      <CustomField />
+    </FormLayout>
+  );
+}
+```
+
+## Валидация
+
+Поддерживаются стандартные правила `react-hook-form`:
+
+- `required`
+- `minLength`
+- `maxLength`
+- `pattern`
+- `validate`
+
+Пример:
+
+```ts
+{
+  key: "username",
+  label: "Имя",
+  required: "Обязательное поле",
+  minLength: { value: 3, message: "Минимум 3 символа" },
+  pattern: { value: /^[a-z]+$/i, message: "Только буквы" },
+}
+```
+
+## Маски ввода
+
+Поле с маской задаётся через `maska`:
+
+```ts
+{
+  key: "phone",
+  label: "Телефон",
+  maska: {
+    required: "Введите телефон",
+    format: "+7 (###) ###-##-##",
+    mask: "_",
+  },
+}
+```
+
+## Стилизация
+
+Доступны классы для быстрого оформления:
+
+- `formClass` — класс формы
+- `buttonClass` — класс кнопки
+- `inputClass` — класс поля
+- `labelClass` — класс лейбла
+- `errorClass` — класс текста ошибки
+
+## Публичный API
+
+- `FormLayout` — рендерит форму по массиву `formData` или принимает `children`.
+- `InputForm` — базовый элемент поля (экспортируется по умолчанию).
+- `useFormContext` — доступ к `react-hook-form` контексту внутри ваших компонентов.
+- Типы: `FormField`, `FormLayoutProps`, `FormContextValue`.
+
+## Требования
+
+- React `^18` или `^19`
+- react-hook-form `^7`
+- react-number-format `^5`
+
+## Лицензия
+
+MIT — см. файл LICENSE.

package/dist/index.d.mts

@@ -0,0 +1,76 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Control, UseFormRegister, FieldErrors } from 'react-hook-form';
+
+type FormField<T extends object = any> = {
+    label: string;
+    placeholder: string;
+    key: keyof T;
+    required?: string;
+    minLength?: {
+        value: number;
+        message: string;
+    };
+    maxLength?: {
+        value: number;
+        message: string;
+    };
+    pattern?: {
+        value: RegExp;
+        message: string;
+    };
+    validate?: any;
+    type?: string;
+    maska?: {
+        required: string;
+        format: string;
+        mask: string;
+    };
+    textarea?: boolean;
+    register?: {
+        [key: string]: any;
+    };
+    inputClass?: any;
+    errorClass?: any;
+    labelClass?: any;
+};
+type FormLayoutProps<T extends object = any> = {
+    funSubmit: (data: T) => void;
+    formClass?: string;
+    buttonClass?: string;
+} & ({
+    formData: FormField<T>[];
+    children?: never;
+} | {
+    formData?: never;
+    children: React.ReactNode;
+});
+
+declare function FormLayout<T extends object = any>({ formData, funSubmit, formClass, buttonClass, children, }: FormLayoutProps<T>): react_jsx_runtime.JSX.Element;
+
+interface FormContextValue<T extends object = any> {
+    control: Control<T>;
+    register: UseFormRegister<T>;
+    errors: FieldErrors<T>;
+}
+declare function useFormContext<T extends object = any>(): FormContextValue<T>;
+
+declare function InputForm({ register, type, placeholder, error, name, label, required, control, maska, inputClass, labelClass, errorClass, }: {
+    register: any;
+    type?: string;
+    placeholder?: string;
+    error: any;
+    name: string;
+    label?: string;
+    required?: string | boolean;
+    control?: any;
+    maska?: {
+        required: string;
+        format: string;
+        mask: string;
+    };
+    inputClass?: any;
+    labelClass?: any;
+    errorClass?: any;
+}): react_jsx_runtime.JSX.Element;
+
+export { type FormContextValue, type FormField, FormLayout, type FormLayoutProps, InputForm, useFormContext };

package/dist/index.d.ts

@@ -0,0 +1,76 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Control, UseFormRegister, FieldErrors } from 'react-hook-form';
+
+type FormField<T extends object = any> = {
+    label: string;
+    placeholder: string;
+    key: keyof T;
+    required?: string;
+    minLength?: {
+        value: number;
+        message: string;
+    };
+    maxLength?: {
+        value: number;
+        message: string;
+    };
+    pattern?: {
+        value: RegExp;
+        message: string;
+    };
+    validate?: any;
+    type?: string;
+    maska?: {
+        required: string;
+        format: string;
+        mask: string;
+    };
+    textarea?: boolean;
+    register?: {
+        [key: string]: any;
+    };
+    inputClass?: any;
+    errorClass?: any;
+    labelClass?: any;
+};
+type FormLayoutProps<T extends object = any> = {
+    funSubmit: (data: T) => void;
+    formClass?: string;
+    buttonClass?: string;
+} & ({
+    formData: FormField<T>[];
+    children?: never;
+} | {
+    formData?: never;
+    children: React.ReactNode;
+});
+
+declare function FormLayout<T extends object = any>({ formData, funSubmit, formClass, buttonClass, children, }: FormLayoutProps<T>): react_jsx_runtime.JSX.Element;
+
+interface FormContextValue<T extends object = any> {
+    control: Control<T>;
+    register: UseFormRegister<T>;
+    errors: FieldErrors<T>;
+}
+declare function useFormContext<T extends object = any>(): FormContextValue<T>;
+
+declare function InputForm({ register, type, placeholder, error, name, label, required, control, maska, inputClass, labelClass, errorClass, }: {
+    register: any;
+    type?: string;
+    placeholder?: string;
+    error: any;
+    name: string;
+    label?: string;
+    required?: string | boolean;
+    control?: any;
+    maska?: {
+        required: string;
+        format: string;
+        mask: string;
+    };
+    inputClass?: any;
+    labelClass?: any;
+    errorClass?: any;
+}): react_jsx_runtime.JSX.Element;
+
+export { type FormContextValue, type FormField, FormLayout, type FormLayoutProps, InputForm, useFormContext };

package/dist/index.js

@@ -0,0 +1,228 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FormLayout: () => FormLayout,
+  InputForm: () => InputForm_default,
+  useFormContext: () => useFormContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/FormLayout.tsx
+var import_react_hook_form2 = require("react-hook-form");
+
+// src/InputForm/layouts/mainLayout.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function MainLayout({
+  children,
+  label,
+  required,
+  error,
+  name,
+  labelClass,
+  errorClass
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: labelClass, children: [
+      label,
+      " ",
+      required ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "*" }) : null
+    ] }),
+    children,
+    error?.[name] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: errorClass, children: error?.[name]?.message })
+  ] });
+}
+var mainLayout_default = MainLayout;
+
+// src/InputForm/components/MaskedField.tsx
+var import_react_hook_form = require("react-hook-form");
+var import_react_number_format = require("react-number-format");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MaskedField({
+  placeholder,
+  name,
+  control,
+  maska,
+  inputClass
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_hook_form.Controller,
+    {
+      name: name || "",
+      control,
+      rules: { required: maska.required },
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_number_format.PatternFormat,
+        {
+          ...field,
+          format: maska.format,
+          mask: maska.mask,
+          placeholder: placeholder ? placeholder : "",
+          className: inputClass
+        }
+      )
+    }
+  );
+}
+var MaskedField_default = MaskedField;
+
+// src/InputForm/components/InputField.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function InputField({
+  register,
+  type,
+  placeholder,
+  inputClass,
+  name
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      id: name,
+      ...register,
+      type: type ? type : "text",
+      placeholder: placeholder ? placeholder : "",
+      className: inputClass
+    }
+  );
+}
+var InputField_default = InputField;
+
+// src/InputForm/InputForm.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function InputForm({
+  register,
+  type,
+  placeholder,
+  error,
+  name,
+  label,
+  required,
+  control,
+  maska,
+  inputClass,
+  labelClass,
+  errorClass
+}) {
+  const renderChildren = () => {
+    if (maska) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        MaskedField_default,
+        {
+          name,
+          placeholder,
+          control,
+          maska,
+          inputClass
+        }
+      );
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        InputField_default,
+        {
+          name,
+          type,
+          placeholder,
+          register,
+          inputClass
+        }
+      );
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    mainLayout_default,
+    {
+      label,
+      required,
+      error,
+      name,
+      labelClass,
+      errorClass,
+      children: renderChildren()
+    }
+  );
+}
+var InputForm_default = InputForm;
+
+// src/FormContext.tsx
+var import_react = require("react");
+var FormContext = (0, import_react.createContext)(null);
+var FormProvider = FormContext.Provider;
+function useFormContext() {
+  const context = (0, import_react.useContext)(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within FormLayout");
+  }
+  return context;
+}
+
+// src/FormLayout.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function FormLayout({
+  formData,
+  funSubmit,
+  formClass,
+  buttonClass,
+  children
+}) {
+  const {
+    control,
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = (0, import_react_hook_form2.useForm)();
+  const onSubmit = (data) => {
+    funSubmit(data);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormProvider, { value: { control, register, errors }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit: handleSubmit(onSubmit), className: formClass, children: [
+    formData ? formData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      InputForm_default,
+      {
+        type: item.type,
+        placeholder: item.placeholder,
+        error: errors,
+        name: String(item.key),
+        label: item.label,
+        control,
+        maska: item.maska,
+        register: register(item.key, {
+          required: item.required,
+          minLength: item.minLength,
+          maxLength: item.maxLength,
+          pattern: item.pattern,
+          validate: item.validate
+        }),
+        required: item.required,
+        inputClass: item.inputClass,
+        errorClass: item.errorClass,
+        labelClass: item.labelClass
+      },
+      String(item.key)
+    )) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: buttonClass, children: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C" })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormLayout,
+  InputForm,
+  useFormContext
+});

package/dist/index.mjs

@@ -0,0 +1,199 @@
+// src/FormLayout.tsx
+import { useForm } from "react-hook-form";
+
+// src/InputForm/layouts/mainLayout.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function MainLayout({
+  children,
+  label,
+  required,
+  error,
+  name,
+  labelClass,
+  errorClass
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("label", { className: labelClass, children: [
+      label,
+      " ",
+      required ? /* @__PURE__ */ jsx("span", { children: "*" }) : null
+    ] }),
+    children,
+    error?.[name] && /* @__PURE__ */ jsx("span", { className: errorClass, children: error?.[name]?.message })
+  ] });
+}
+var mainLayout_default = MainLayout;
+
+// src/InputForm/components/MaskedField.tsx
+import { Controller } from "react-hook-form";
+import { PatternFormat } from "react-number-format";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MaskedField({
+  placeholder,
+  name,
+  control,
+  maska,
+  inputClass
+}) {
+  return /* @__PURE__ */ jsx2(
+    Controller,
+    {
+      name: name || "",
+      control,
+      rules: { required: maska.required },
+      render: ({ field }) => /* @__PURE__ */ jsx2(
+        PatternFormat,
+        {
+          ...field,
+          format: maska.format,
+          mask: maska.mask,
+          placeholder: placeholder ? placeholder : "",
+          className: inputClass
+        }
+      )
+    }
+  );
+}
+var MaskedField_default = MaskedField;
+
+// src/InputForm/components/InputField.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function InputField({
+  register,
+  type,
+  placeholder,
+  inputClass,
+  name
+}) {
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      id: name,
+      ...register,
+      type: type ? type : "text",
+      placeholder: placeholder ? placeholder : "",
+      className: inputClass
+    }
+  );
+}
+var InputField_default = InputField;
+
+// src/InputForm/InputForm.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function InputForm({
+  register,
+  type,
+  placeholder,
+  error,
+  name,
+  label,
+  required,
+  control,
+  maska,
+  inputClass,
+  labelClass,
+  errorClass
+}) {
+  const renderChildren = () => {
+    if (maska) {
+      return /* @__PURE__ */ jsx4(
+        MaskedField_default,
+        {
+          name,
+          placeholder,
+          control,
+          maska,
+          inputClass
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsx4(
+        InputField_default,
+        {
+          name,
+          type,
+          placeholder,
+          register,
+          inputClass
+        }
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx4(
+    mainLayout_default,
+    {
+      label,
+      required,
+      error,
+      name,
+      labelClass,
+      errorClass,
+      children: renderChildren()
+    }
+  );
+}
+var InputForm_default = InputForm;
+
+// src/FormContext.tsx
+import { createContext, useContext } from "react";
+var FormContext = createContext(null);
+var FormProvider = FormContext.Provider;
+function useFormContext() {
+  const context = useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within FormLayout");
+  }
+  return context;
+}
+
+// src/FormLayout.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function FormLayout({
+  formData,
+  funSubmit,
+  formClass,
+  buttonClass,
+  children
+}) {
+  const {
+    control,
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm();
+  const onSubmit = (data) => {
+    funSubmit(data);
+  };
+  return /* @__PURE__ */ jsx5(FormProvider, { value: { control, register, errors }, children: /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit(onSubmit), className: formClass, children: [
+    formData ? formData.map((item) => /* @__PURE__ */ jsx5(
+      InputForm_default,
+      {
+        type: item.type,
+        placeholder: item.placeholder,
+        error: errors,
+        name: String(item.key),
+        label: item.label,
+        control,
+        maska: item.maska,
+        register: register(item.key, {
+          required: item.required,
+          minLength: item.minLength,
+          maxLength: item.maxLength,
+          pattern: item.pattern,
+          validate: item.validate
+        }),
+        required: item.required,
+        inputClass: item.inputClass,
+        errorClass: item.errorClass,
+        labelClass: item.labelClass
+      },
+      String(item.key)
+    )) : children,
+    /* @__PURE__ */ jsx5("button", { type: "submit", className: buttonClass, children: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C" })
+  ] }) });
+}
+export {
+  FormLayout,
+  InputForm_default as InputForm,
+  useFormContext
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@arturton/react-form-constructor",
+  "version": "0.1.2",
+  "description": "Flexible form constructor with React Hook Form integration",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react,react-dom,react-hook-form,react-number-format,zod",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
+  },
+  "keywords": [
+    "react",
+    "forms",
+    "form-builder",
+    "validation",
+    "hooks"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArturTonoyan/react-form-constructor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ArturTonoyan/react-form-constructor/issues"
+  },
+  "homepage": "https://github.com/ArturTonoyan/react-form-constructor#readme",
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-hook-form": "^7.0.0",
+    "react-number-format": "^5.4.4"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^19.2.10",
+    "react-number-format": "^5.4.4"
+  },
+  "dependencies": {
+    "zod": "^3.22.0"
+  }
+}