@arturton/react-form-constructor 0.1.3 → 0.1.5

package/README.md

@@ -15,10 +15,319 @@
 ## Установка
 
 ```bash
-npm i react-form-constructor
+npm install @arturton/react-form-constructor
 ```
 
-## Быстрый старт
+## Метод 1: Provider (рекомендуется)
+
+Используйте `FormProvider` и набор компонентов для построения формы через `children`.
+
+### Пример
+
+```tsx
+import {
+  FormProvider,
+  FormInputLayout,
+  FormLabel,
+  FormInput,
+  FormPasswordInput,
+  FormTextarea,
+  FormMaskedInput,
+  FormSelect,
+  FormNumber,
+  FormDate,
+  FormRange,
+  FormFileInput,
+  FormCheckbox,
+  FormRadio,
+  FormError,
+  FormButton,
+} from "react-form-constructor";
+
+type ProfileForm = {
+  name: string;
+  password: string;
+  description?: string;
+  phone?: string;
+  country?: string;
+  age?: number;
+  birthDate?: string;
+  rating?: number;
+  avatar?: FileList;
+  terms?: boolean;
+  gender?: string;
+};
+
+export function Profile() {
+  return (
+    <FormProvider<ProfileForm>
+      funSubmit={(data) => console.log(data)}
+      className="flex flex-col gap-4"
+    >
+      <FormInputLayout name="name" required="Введите имя">
+        <FormLabel>Имя</FormLabel>
+        <FormInput placeholder="Введите имя" className="input" />
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout name="password" required="Введите пароль">
+        <FormLabel>Пароль</FormLabel>
+        <FormPasswordInput
+          placeholder="Введите пароль"
+          className="input-wrap"
+          inputClassName="input"
+        />
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout name="description">
+        <FormLabel>Описание</FormLabel>
+        <FormTextarea rows={4} className="textarea" />
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout
+        name="phone"
+        maska={{
+          required: "Телефон обязателен",
+          format: "+7 (###) ###-##-##",
+          mask: "_",
+        }}
+      >
+        <FormLabel>Телефон</FormLabel>
+        <FormMaskedInput className="input" />
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout name="country" required="Выберите страну">
+        <FormLabel>Страна</FormLabel>
+        <FormSelect
+          placeholder="Выберите"
+          options={[
+            { value: "ru", label: "Россия" },
+            { value: "kz", label: "Казахстан" },
+          ]}
+          className="select"
+        />
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout name="age">
+        <FormLabel>Возраст</FormLabel>
+        <FormNumber min={1} max={120} step={1} className="input" />
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout name="birthDate">
+        <FormLabel>Дата рождения</FormLabel>
+        <FormDate type="date" className="input" />
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout name="rating">
+        <FormLabel>Рейтинг</FormLabel>
+        <FormRange range="single" min={0} max={10} showValue className="w-60" />
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout name="avatar">
+        <FormLabel>Аватар</FormLabel>
+        <FormFileInput accept="image/*" className="input" />
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout name="gender" required="Выберите пол">
+        <FormLabel>Пол</FormLabel>
+        <div className="flex gap-4">
+          <label className="flex items-center gap-2">
+            <FormRadio value="male" /> Мужской
+          </label>
+          <label className="flex items-center gap-2">
+            <FormRadio value="female" /> Женский
+          </label>
+        </div>
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormInputLayout name="terms">
+        <label className="flex items-center gap-2">
+          <FormCheckbox value={true} /> Я согласен с условиями
+        </label>
+        <FormError className="error" />
+      </FormInputLayout>
+
+      <FormButton className="btn" disabledError>
+        Отправить
+      </FormButton>
+    </FormProvider>
+  );
+}
+```
+
+### Компоненты (Provider)
+
+#### FormProvider
+
+**Props**
+
+- `funSubmit: (data) => void` — обработчик отправки формы.
+- `children: React.ReactNode` — поля формы.
+- `className?: string` — класс формы.
+- `setFormApi?: (formMethods) => void` — доступ к `register`, `errors`, `control`, `values`.
+
+#### FormInputLayout
+
+**Props**
+
+- `name: string` — имя поля (ключ в данных).
+- `required?: string` — сообщение об обязательности.
+- `minLength?: { value: number; message: string }` — минимальная длина.
+- `maxLength?: { value: number; message: string }` — максимальная длина.
+- `pattern?: { value: RegExp; message: string }` — регулярное выражение.
+- `validate?: (value) => boolean | string` — кастомная проверка.
+- `maska?: { required: string; format: string; mask: string }` — маска ввода (для `FormMaskedInput`).
+- `className?: string` — класс контейнера.
+
+#### FormInput
+
+**Props**
+
+- `placeholder?: string` — плейсхолдер.
+- `className?: string` — класс инпута.
+- `classNameError?: string` — класс ошибки.
+- `type?: string` — тип (`text`, `email`, `password`, …).
+
+#### FormPasswordInput
+
+**Props**
+
+- `placeholder?: string`
+- `className?: string` — класс контейнера.
+- `inputClassName?: string` — класс инпута.
+- `classNameError?: string` — класс ошибки.
+- `visibleIcon?: ReactNode` — иконка видимого пароля.
+- `hiddenIcon?: ReactNode` — иконка скрытого пароля.
+- `iconClassName?: string` — класс иконки.
+- `iconWrapperClassName?: string` — класс контейнера иконки.
+
+#### FormTextarea
+
+**Props**
+
+- `placeholder?: string`
+- `className?: string`
+- `classNameError?: string`
+- `rows?: number`
+- `cols?: number`
+
+#### FormMaskedInput
+
+**Props**
+
+- `placeholder?: string`
+- `className?: string`
+- `classNameError?: string`
+
+> Использует `maska` из `FormInputLayout`.
+
+#### FormSelect
+
+**Props**
+
+- `options: { value: string | number; label: string }[]` — список опций.
+- `multiple?: boolean` — множественный выбор.
+- `placeholder?: string` — пустой вариант.
+- `className?: string`
+- `classNameError?: string`
+
+#### FormNumber
+
+**Props**
+
+- `placeholder?: string`
+- `className?: string`
+- `classNameError?: string`
+- `min?: number`
+- `max?: number`
+- `step?: number`
+
+#### FormDate
+
+**Props**
+
+- `type?: "date" | "datetime-local" | "time" | "month" | "week"`
+- `min?: string`
+- `max?: string`
+- `className?: string`
+- `classNameError?: string`
+
+#### FormRange
+
+**Props**
+
+- `range?: "single" | "double"` — один ползунок или два.
+- `min?: number`
+- `max?: number`
+- `step?: number`
+- `showValue?: boolean` — показать значения.
+- `className?: string` — класс слайдера.
+- `containerClassName?: string` — класс контейнера.
+- `classNameError?: string`
+
+#### FormFileInput
+
+**Props**
+
+- `accept?: string` — MIME типы/расширения.
+- `multiple?: boolean`
+- `className?: string`
+- `classNameError?: string`
+
+#### FormCheckbox
+
+**Props**
+
+- `value?: string | number | boolean`
+- `defaultChecked?: boolean`
+- `disabled?: boolean`
+- `className?: string`
+- `classNameError?: string`
+
+#### FormRadio
+
+**Props**
+
+- `value: string | number`
+- `defaultChecked?: boolean`
+- `disabled?: boolean`
+- `className?: string`
+- `classNameError?: string`
+
+#### FormButton
+
+**Props**
+
+- `className?: string`
+- `disabledError?: boolean` — отключить кнопку, если есть ошибки.
+
+#### FormError
+
+**Props**
+
+- `className?: string`
+
+#### FormLabel
+
+**Props**
+
+- `className?: string`
+- `classNameError?: string`
+
+## Метод 2: JSON (FormLayout)
+
+`FormLayout` рендерит форму по массиву `formData` и сам регистрирует поля.
+
+### Пример
 
 ```tsx
 import { FormLayout, type FormField } from "react-form-constructor";
@@ -62,92 +371,33 @@ export function Login() {
 }
 ```
 
-## Как это работает
-
-- **`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`.
+### FormField
+
+**Поля**
+
+- `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` — textarea вместо input.
+- `register?: object` — доп. настройки `react-hook-form`.
+- `inputClass?: any` — класс инпута.
+- `labelClass?: any` — класс лейбла.
+- `errorClass?: any` — класс ошибки.
+
+### FormLayoutProps
+
+- `funSubmit: (data: T) => void` — submit.
+- `formClass?: string` — класс формы.
+- `buttonClass?: string` — класс кнопки.
+- `buttonName?: string` — текст кнопки.
+- `formData: FormField<T>[]` — массив полей.
 
 ## Требования
 

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Control, UseFormRegister, FieldErrors } from 'react-hook-form';
+import { FieldValues, UseFormRegister, FieldErrors, Control } from 'react-hook-form';
+import React$1, { ReactNode } from 'react';
 
 type FormField<T extends object = any> = {
     label: string;
@@ -37,22 +38,24 @@ type FormLayoutProps<T extends object = any> = {
     funSubmit: (data: T) => void;
     formClass?: string;
     buttonClass?: string;
-} & ({
+    buttonName?: string;
     formData: FormField<T>[];
-    children?: never;
-} | {
-    formData?: never;
+};
+type FormProviderProps<T extends object = any> = {
+    setFormApi?: (formMethods: any) => void;
     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>;
+    funSubmit: (data: T) => void;
+    className?: string;
+};
+type FormContextType<T extends FieldValues = any> = {
     register: UseFormRegister<T>;
     errors: FieldErrors<T>;
-}
-declare function useFormContext<T extends object = any>(): FormContextValue<T>;
+    control: Control<T>;
+    defaultValues?: T;
+    values?: T;
+};
+
+declare function FormLayout<T extends object = any>({ formData, funSubmit, formClass, buttonClass, buttonName, }: FormLayoutProps<T>): react_jsx_runtime.JSX.Element;
 
 declare function InputForm({ register, type, placeholder, error, name, label, required, control, maska, inputClass, labelClass, errorClass, }: {
     register: any;
@@ -73,4 +76,150 @@ declare function InputForm({ register, type, placeholder, error, name, label, re
     errorClass?: any;
 }): react_jsx_runtime.JSX.Element;
 
-export { type FormContextValue, type FormField, FormLayout, type FormLayoutProps, InputForm, useFormContext };
+declare function FormProvider<T extends object = any>({ setFormApi, children, funSubmit, className, }: FormProviderProps<T>): react_jsx_runtime.JSX.Element;
+
+declare function useFormContext<T extends Record<string, any> = any>(): FormContextType<T>;
+
+interface FormInputProps {
+    name: string;
+    minLength?: {
+        value: number;
+        message: string;
+    };
+    maxLength?: {
+        value: number;
+        message: string;
+    };
+    pattern?: {
+        value: RegExp;
+        message: string;
+    };
+    required?: string;
+    validate?: (value: any) => boolean | string;
+    children: React$1.ReactNode;
+    labelClass?: string;
+    errorClass?: string;
+    className?: string;
+    maska?: {
+        required: string;
+        format: string;
+        mask: string;
+    };
+}
+declare function FormInputLayout({ name, minLength, maxLength, pattern, required, validate, children, className, maska, }: FormInputProps): react_jsx_runtime.JSX.Element;
+
+declare function FormInput({ placeholder, className, classNameError, type, }: {
+    placeholder?: string;
+    className?: string;
+    classNameError?: string;
+    type?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface FormPasswordInputProps {
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+    classNameError?: string;
+    visibleIcon?: ReactNode;
+    hiddenIcon?: ReactNode;
+    iconClassName?: string;
+    iconWrapperClassName?: string;
+}
+declare function FormPasswordInput({ placeholder, className, inputClassName, classNameError, visibleIcon, hiddenIcon, iconClassName, iconWrapperClassName, }: FormPasswordInputProps): react_jsx_runtime.JSX.Element;
+
+declare function FormTextarea({ placeholder, className, classNameError, rows, cols, }: {
+    placeholder?: string;
+    className?: string;
+    classNameError?: string;
+    rows?: number;
+    cols?: number;
+}): react_jsx_runtime.JSX.Element;
+
+declare function FormMaskedInput({ placeholder, className, classNameError, }: {
+    placeholder?: string;
+    className?: string;
+    classNameError?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+interface SelectOption {
+    value: string | number;
+    label: string;
+}
+declare function FormSelect({ options, className, classNameError, multiple, placeholder, }: {
+    options: SelectOption[];
+    className?: string;
+    classNameError?: string;
+    multiple?: boolean;
+    placeholder?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function FormNumber({ placeholder, className, classNameError, min, max, step, }: {
+    placeholder?: string;
+    className?: string;
+    classNameError?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+}): react_jsx_runtime.JSX.Element;
+
+declare function FormDate({ placeholder, className, classNameError, min, max, type, }: {
+    placeholder?: string;
+    className?: string;
+    classNameError?: string;
+    min?: string;
+    max?: string;
+    type?: "date" | "datetime-local" | "time" | "month" | "week";
+}): react_jsx_runtime.JSX.Element;
+
+declare function FormRange({ className, classNameError, min, max, step, range, showValue, containerClassName, }: {
+    className?: string;
+    classNameError?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    range?: "single" | "double";
+    showValue?: boolean;
+    containerClassName?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function FormFileInput({ className, classNameError, accept, multiple, }: {
+    className?: string;
+    classNameError?: string;
+    accept?: string;
+    multiple?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function FormCheckbox({ className, classNameError, value, defaultChecked, disabled, }: {
+    className?: string;
+    classNameError?: string;
+    value?: string | number | boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function FormRadio({ className, classNameError, value, defaultChecked, disabled, }: {
+    className?: string;
+    classNameError?: string;
+    value: string | number;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function FormButton({ children, className, disabledError, ...props }: {
+    children?: React.ReactNode;
+    className?: string;
+    disabledError?: boolean;
+    [key: string]: any;
+}): react_jsx_runtime.JSX.Element;
+
+declare function FormError({ ...props }: {
+    [x: string]: any;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function FormLabel({ children, className, classNameError, }: {
+    children: React.ReactNode;
+    className?: string;
+    classNameError?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { FormButton, FormCheckbox, type FormContextType, FormDate, FormError, type FormField, FormFileInput, FormInput, FormInputLayout, FormLabel, FormLayout, type FormLayoutProps, FormMaskedInput, FormNumber, FormPasswordInput, FormProvider, FormRadio, FormRange, FormSelect, FormTextarea, InputForm, useFormContext };