@arturton/react-form-constructor 0.1.3 → 0.2.0

package/dist/index.d.mts

@@ -1,11 +1,22 @@
 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> = {
+type FormFieldType = "text" | "password" | "email" | "number" | "date" | "textarea" | "select" | "checkbox" | "radio" | "file" | "range" | "mask";
+interface SelectOption$1 {
+    value: string | number;
+    label: string;
+}
+interface RadioOption {
+    value: string | number;
     label: string;
-    placeholder: string;
+}
+type FormField<T extends object = any> = {
     key: keyof T;
-    required?: string;
+    label?: string;
+    placeholder?: string;
+    type?: FormFieldType;
+    required?: string | boolean;
     minLength?: {
         value: number;
         message: string;
@@ -18,41 +29,79 @@ type FormField<T extends object = any> = {
         value: RegExp;
         message: string;
     };
-    validate?: any;
-    type?: string;
+    validate?: (value: any) => boolean | string;
     maska?: {
         required: string;
         format: string;
         mask: string;
     };
-    textarea?: boolean;
-    register?: {
-        [key: string]: any;
-    };
-    inputClass?: any;
-    errorClass?: any;
-    labelClass?: any;
+    options?: SelectOption$1[];
+    multiple?: boolean;
+    radioOptions?: RadioOption[];
+    defaultChecked?: boolean;
+    accept?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    showValue?: boolean;
+    containerClass?: string;
+    labelClass?: string;
+    inputClass?: string;
+    errorClass?: string;
+    classNameError?: string;
+    render?: (props: any) => React.ReactNode;
+    disabled?: boolean;
+    [key: string]: any;
 };
 type FormLayoutProps<T extends object = any> = {
+    formData: FormField<T>[];
     funSubmit: (data: T) => void;
+    defaultValues?: T | Partial<T>;
+    onError?: (errors: any) => void;
     formClass?: string;
+    containerClass?: string;
     buttonClass?: string;
-} & ({
-    formData: FormField<T>[];
-    children?: never;
-} | {
-    formData?: never;
+    buttonName?: string;
+    labelClass?: string;
+    inputClass?: string;
+    errorClass?: string;
+    submitButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    disabledOnError?: boolean;
+};
+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;
+};
+
+/**
+ * FormLayout - конфигурационный способ создания форм через JSON
+ * @example
+ * const fields: FormField<LoginForm>[] = [
+ *   {
+ *     key: "email",
+ *     label: "Email",
+ *     type: "email",
+ *     placeholder: "your@email.com",
+ *     required: "Email is required",
+ *   },
+ * ];
+ *
+ * <FormLayout<LoginForm>
+ *   formData={fields}
+ *   funSubmit={(data) => console.log(data)}
+ *   buttonName="Login"
+ * />
+ */
+declare function FormLayout<T extends object = any>({ formData, funSubmit, defaultValues, onError, formClass, containerClass, buttonClass, buttonName, labelClass, inputClass, errorClass, submitButtonProps, disabledOnError, }: 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 +122,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, type RadioOption, type SelectOption$1 as SelectOption, useFormContext };

package/dist/index.d.ts

@@ -1,11 +1,22 @@
 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> = {
+type FormFieldType = "text" | "password" | "email" | "number" | "date" | "textarea" | "select" | "checkbox" | "radio" | "file" | "range" | "mask";
+interface SelectOption$1 {
+    value: string | number;
+    label: string;
+}
+interface RadioOption {
+    value: string | number;
     label: string;
-    placeholder: string;
+}
+type FormField<T extends object = any> = {
     key: keyof T;
-    required?: string;
+    label?: string;
+    placeholder?: string;
+    type?: FormFieldType;
+    required?: string | boolean;
     minLength?: {
         value: number;
         message: string;
@@ -18,41 +29,79 @@ type FormField<T extends object = any> = {
         value: RegExp;
         message: string;
     };
-    validate?: any;
-    type?: string;
+    validate?: (value: any) => boolean | string;
     maska?: {
         required: string;
         format: string;
         mask: string;
     };
-    textarea?: boolean;
-    register?: {
-        [key: string]: any;
-    };
-    inputClass?: any;
-    errorClass?: any;
-    labelClass?: any;
+    options?: SelectOption$1[];
+    multiple?: boolean;
+    radioOptions?: RadioOption[];
+    defaultChecked?: boolean;
+    accept?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    showValue?: boolean;
+    containerClass?: string;
+    labelClass?: string;
+    inputClass?: string;
+    errorClass?: string;
+    classNameError?: string;
+    render?: (props: any) => React.ReactNode;
+    disabled?: boolean;
+    [key: string]: any;
 };
 type FormLayoutProps<T extends object = any> = {
+    formData: FormField<T>[];
     funSubmit: (data: T) => void;
+    defaultValues?: T | Partial<T>;
+    onError?: (errors: any) => void;
     formClass?: string;
+    containerClass?: string;
     buttonClass?: string;
-} & ({
-    formData: FormField<T>[];
-    children?: never;
-} | {
-    formData?: never;
+    buttonName?: string;
+    labelClass?: string;
+    inputClass?: string;
+    errorClass?: string;
+    submitButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    disabledOnError?: boolean;
+};
+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;
+};
+
+/**
+ * FormLayout - конфигурационный способ создания форм через JSON
+ * @example
+ * const fields: FormField<LoginForm>[] = [
+ *   {
+ *     key: "email",
+ *     label: "Email",
+ *     type: "email",
+ *     placeholder: "your@email.com",
+ *     required: "Email is required",
+ *   },
+ * ];
+ *
+ * <FormLayout<LoginForm>
+ *   formData={fields}
+ *   funSubmit={(data) => console.log(data)}
+ *   buttonName="Login"
+ * />
+ */
+declare function FormLayout<T extends object = any>({ formData, funSubmit, defaultValues, onError, formClass, containerClass, buttonClass, buttonName, labelClass, inputClass, errorClass, submitButtonProps, disabledOnError, }: 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 +122,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, type RadioOption, type SelectOption$1 as SelectOption, useFormContext };