@arturton/react-form-constructor 0.1.3 → 0.1.5

package/dist/index.mjs

@@ -1,4 +1,4 @@
-// src/FormLayout.tsx
+// src/JsonMethod/FormLayout.tsx
 import { useForm } from "react-hook-form";
 
 // src/InputForm/layouts/mainLayout.tsx
@@ -13,7 +13,7 @@ function MainLayout({
   errorClass
 }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("label", { className: labelClass, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: labelClass, children: [
       label,
       " ",
       required ? /* @__PURE__ */ jsx("span", { children: "*" }) : null
@@ -134,26 +134,14 @@ function InputForm({
 }
 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
+// src/JsonMethod/FormLayout.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function FormLayout({
   formData,
   funSubmit,
   formClass,
   buttonClass,
-  children
+  buttonName
 }) {
   const {
     control,
@@ -164,8 +152,8 @@ function FormLayout({
   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(
+  return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit(onSubmit), className: formClass, children: [
+    formData.map((item) => /* @__PURE__ */ jsx5(
       InputForm_default,
       {
         type: item.type,
@@ -188,12 +176,668 @@ function FormLayout({
         labelClass: item.labelClass
       },
       String(item.key)
-    )) : children,
-    /* @__PURE__ */ jsx5("button", { type: "submit", className: buttonClass, children: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C" })
-  ] }) });
+    )),
+    /* @__PURE__ */ jsx5("button", { type: "submit", className: buttonClass, children: buttonName || "Submit" })
+  ] });
+}
+
+// src/ProviderMethod/layouts/FormProvider.tsx
+import { useForm as useForm2, useWatch } from "react-hook-form";
+
+// src/ProviderMethod/context/FormContext.tsx
+import React from "react";
+var FormContext = React.createContext(void 0);
+function useFormContext() {
+  const context = React.useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext \u0434\u043E\u043B\u0436\u0435\u043D \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u0432\u043D\u0443\u0442\u0440\u0438 FormProvider");
+  }
+  return context;
+}
+
+// src/ProviderMethod/layouts/FormProvider.tsx
+import { useEffect } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function FormProvider({
+  setFormApi,
+  children,
+  funSubmit,
+  className
+}) {
+  const {
+    control,
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm2();
+  const onSubmit = (data) => {
+    funSubmit(data);
+  };
+  const values = useWatch({ control });
+  const contextValue = {
+    register,
+    errors,
+    control,
+    values
+  };
+  useEffect(() => {
+    setFormApi && setFormApi({ control, register, errors, values });
+  }, [setFormApi, control, register, errors, values]);
+  return /* @__PURE__ */ jsx6(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx6("form", { onSubmit: handleSubmit(onSubmit), className, children }) });
+}
+
+// src/ProviderMethod/layouts/FormInputLayout.tsx
+import React2 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var FormInputLayoutContext = React2.createContext(void 0);
+function useInputLayoutContext() {
+  const context = React2.useContext(FormInputLayoutContext);
+  if (!context) {
+    throw new Error(
+      "useInputLayoutContext \u0434\u043E\u043B\u0436\u0435\u043D \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u0432\u043D\u0443\u0442\u0440\u0438 FormInputLayout"
+    );
+  }
+  return context;
+}
+function useOptionalInputLayoutContext() {
+  return React2.useContext(FormInputLayoutContext);
+}
+function FormInputLayout({
+  name,
+  minLength,
+  maxLength,
+  pattern,
+  required,
+  validate,
+  children,
+  className,
+  maska
+}) {
+  const contextValue = {
+    name,
+    minLength,
+    maxLength,
+    pattern,
+    required,
+    validate,
+    maska
+  };
+  return /* @__PURE__ */ jsx7(FormInputLayoutContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7("div", { className, children }) });
+}
+var FormInputLayout_default = FormInputLayout;
+
+// src/ProviderMethod/components/FormInput.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function FormInput({
+  placeholder,
+  className,
+  classNameError,
+  type
+}) {
+  const { register, errors } = useFormContext();
+  const { name, required, minLength, maxLength, pattern, validate } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsx8(
+    "input",
+    {
+      id: name,
+      ...register(name, {
+        required,
+        minLength,
+        maxLength,
+        pattern,
+        validate
+      }),
+      type: type ? type : "text",
+      placeholder: placeholder ? placeholder : "",
+      className: `${className} ${isErrorMessage ? classNameError : ""}`
+    }
+  );
+}
+var FormInput_default = FormInput;
+
+// src/ProviderMethod/components/FormPasswordInput.tsx
+import { useState } from "react";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var EyeIcon = ({ className }) => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx9("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+      /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "3" })
+    ]
+  }
+);
+var EyeOffIcon = ({ className }) => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsx9("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+      /* @__PURE__ */ jsx9("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+    ]
+  }
+);
+function FormPasswordInput({
+  placeholder,
+  className,
+  inputClassName,
+  classNameError,
+  visibleIcon = /* @__PURE__ */ jsx9(EyeIcon, {}),
+  hiddenIcon = /* @__PURE__ */ jsx9(EyeOffIcon, {}),
+  iconClassName,
+  iconWrapperClassName = "cursor-pointer"
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const { register, errors } = useFormContext();
+  const { name, required, minLength, maxLength, pattern, validate } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  const toggleVisibility = () => {
+    setIsVisible(!isVisible);
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      style: { display: "flex", alignItems: "center", gap: "8px" },
+      children: [
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            id: name,
+            ...register(name, {
+              required,
+              minLength,
+              maxLength,
+              pattern,
+              validate
+            }),
+            type: isVisible ? "text" : "password",
+            placeholder: placeholder ? placeholder : "",
+            className: `${inputClassName} ${isErrorMessage ? classNameError : ""}`,
+            style: { flex: 1 }
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            onClick: toggleVisibility,
+            className: `${iconClassName ? iconClassName : iconWrapperClassName}`,
+            style: {
+              cursor: "pointer",
+              userSelect: "none",
+              display: "flex",
+              alignItems: "center"
+            },
+            title: isVisible ? "\u0421\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C" : "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C",
+            children: isVisible ? visibleIcon : hiddenIcon
+          }
+        )
+      ]
+    }
+  );
+}
+var FormPasswordInput_default = FormPasswordInput;
+
+// src/ProviderMethod/components/FormTextarea.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function FormTextarea({
+  placeholder,
+  className,
+  classNameError,
+  rows,
+  cols
+}) {
+  const { register, errors } = useFormContext();
+  const { name, required, minLength, maxLength, pattern, validate } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsx10(
+    "textarea",
+    {
+      id: name,
+      ...register(name, {
+        required,
+        minLength,
+        maxLength,
+        pattern,
+        validate
+      }),
+      placeholder: placeholder ? placeholder : "",
+      className: `${className} ${isErrorMessage ? classNameError : ""}`,
+      rows,
+      cols
+    }
+  );
+}
+var FormTextarea_default = FormTextarea;
+
+// src/ProviderMethod/components/FormMaskedInput.tsx
+import { Controller as Controller2 } from "react-hook-form";
+import { PatternFormat as PatternFormat2 } from "react-number-format";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function FormMaskedInput({
+  placeholder,
+  className,
+  classNameError
+}) {
+  const { control, errors } = useFormContext();
+  const { name, required, minLength, maxLength, pattern, validate, maska } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  if (!maska) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx11(
+    Controller2,
+    {
+      name: name || "",
+      control,
+      rules: {
+        required: maska.required ?? required,
+        minLength,
+        maxLength,
+        pattern,
+        validate
+      },
+      render: ({ field }) => /* @__PURE__ */ jsx11(
+        PatternFormat2,
+        {
+          ...field,
+          format: maska.format,
+          mask: maska.mask,
+          placeholder: placeholder ? placeholder : "",
+          className: `${className} ${isErrorMessage ? classNameError : ""}`
+        }
+      )
+    }
+  );
+}
+var FormMaskedInput_default = FormMaskedInput;
+
+// src/ProviderMethod/components/FormSelect.tsx
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+function FormSelect({
+  options,
+  className,
+  classNameError,
+  multiple,
+  placeholder
+}) {
+  const { register, errors } = useFormContext();
+  const { name, required, validate } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsxs4(
+    "select",
+    {
+      id: name,
+      ...register(name, {
+        required,
+        validate
+      }),
+      className: `${className} ${isErrorMessage ? classNameError : ""}`,
+      multiple,
+      children: [
+        placeholder && /* @__PURE__ */ jsx12("option", { value: "", children: placeholder }),
+        options.map((option) => /* @__PURE__ */ jsx12("option", { value: option.value, children: option.label }, option.value))
+      ]
+    }
+  );
+}
+var FormSelect_default = FormSelect;
+
+// src/ProviderMethod/components/FormNumber.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function FormNumber({
+  placeholder,
+  className,
+  classNameError,
+  min,
+  max,
+  step
+}) {
+  const { register, errors } = useFormContext();
+  const { name, required, validate } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsx13(
+    "input",
+    {
+      id: name,
+      type: "number",
+      ...register(name, {
+        required,
+        validate,
+        valueAsNumber: true
+      }),
+      placeholder: placeholder ? placeholder : "",
+      className: `${className} ${isErrorMessage ? classNameError : ""}`,
+      min,
+      max,
+      step
+    }
+  );
+}
+var FormNumber_default = FormNumber;
+
+// src/ProviderMethod/components/FormDate.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function FormDate({
+  placeholder,
+  className,
+  classNameError,
+  min,
+  max,
+  type = "date"
+}) {
+  const { register, errors } = useFormContext();
+  const { name, required, validate } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsx14(
+    "input",
+    {
+      id: name,
+      type,
+      ...register(name, {
+        required,
+        validate
+      }),
+      placeholder: placeholder ? placeholder : "",
+      className: `${className} ${isErrorMessage ? classNameError : ""}`,
+      min,
+      max
+    }
+  );
+}
+var FormDate_default = FormDate;
+
+// src/ProviderMethod/components/FormRange.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+function FormRange({
+  className,
+  classNameError,
+  min = 0,
+  max = 100,
+  step = 1,
+  range = "single",
+  showValue,
+  containerClassName
+}) {
+  const { register, control, errors } = useFormContext();
+  const { name, required, validate } = useInputLayoutContext();
+  const [value, setValue] = useState2(min);
+  const [maxValue, setMaxValue] = useState2(max);
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsx15("div", { className: containerClassName, children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "16px",
+        alignItems: "flex-start",
+        flexWrap: "wrap"
+      },
+      children: [
+        range === "single" && /* @__PURE__ */ jsxs5("div", { style: { flex: 1, minWidth: "200px" }, children: [
+          /* @__PURE__ */ jsx15(
+            "input",
+            {
+              id: name,
+              type: "range",
+              ...register(name, {
+                required,
+                validate
+              }),
+              className: `${className} w-full ${isErrorMessage ? classNameError : ""}`,
+              min,
+              max,
+              step,
+              onChange: (e) => setValue(Number(e.target.value)),
+              style: { cursor: "pointer" }
+            }
+          ),
+          showValue && /* @__PURE__ */ jsx15("div", { style: { marginTop: "8px", fontSize: "14px" }, children: value })
+        ] }),
+        range === "double" && /* @__PURE__ */ jsx15("div", { style: { flex: 1, minWidth: "200px" }, children: /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs5("div", { children: [
+                /* @__PURE__ */ jsx15("label", { style: { fontSize: "12px", marginRight: "8px" }, children: "\u041E\u0442:" }),
+                /* @__PURE__ */ jsx15(
+                  "input",
+                  {
+                    type: "range",
+                    ...register(`${name}_min`, {
+                      required,
+                      validate
+                    }),
+                    className: `${className} w-full ${isErrorMessage ? classNameError : ""}`,
+                    min,
+                    max: maxValue,
+                    step,
+                    onChange: (e) => setValue(Number(e.target.value)),
+                    style: { cursor: "pointer" }
+                  }
+                ),
+                showValue && /* @__PURE__ */ jsx15("div", { style: { marginTop: "4px", fontSize: "12px" }, children: value })
+              ] }),
+              /* @__PURE__ */ jsxs5("div", { children: [
+                /* @__PURE__ */ jsx15("label", { style: { fontSize: "12px", marginRight: "8px" }, children: "\u0414\u043E:" }),
+                /* @__PURE__ */ jsx15(
+                  "input",
+                  {
+                    type: "range",
+                    ...register(`${name}_max`, {
+                      required,
+                      validate
+                    }),
+                    className: `${className} w-full ${isErrorMessage ? classNameError : ""}`,
+                    min: value,
+                    max,
+                    step,
+                    onChange: (e) => setMaxValue(Number(e.target.value)),
+                    style: { cursor: "pointer" }
+                  }
+                ),
+                showValue && /* @__PURE__ */ jsx15("div", { style: { marginTop: "4px", fontSize: "12px" }, children: maxValue })
+              ] }),
+              showValue && /* @__PURE__ */ jsxs5("div", { style: { fontSize: "14px", fontWeight: "bold" }, children: [
+                "\u0414\u0438\u0430\u043F\u0430\u0437\u043E\u043D: ",
+                value,
+                " - ",
+                maxValue
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+var FormRange_default = FormRange;
+
+// src/ProviderMethod/components/FormFileInput.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function FormFileInput({
+  className,
+  classNameError,
+  accept,
+  multiple
+}) {
+  const { register, errors } = useFormContext();
+  const { name, required, validate } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsx16(
+    "input",
+    {
+      id: name,
+      type: "file",
+      ...register(name, {
+        required,
+        validate
+      }),
+      className: `${className} ${isErrorMessage ? classNameError : ""}`,
+      accept,
+      multiple
+    }
+  );
+}
+var FormFileInput_default = FormFileInput;
+
+// src/ProviderMethod/components/FormCheckbox.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function FormCheckbox({
+  className,
+  classNameError,
+  value,
+  defaultChecked,
+  disabled
+}) {
+  const { register, errors } = useFormContext();
+  const { name, required, validate } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsx17(
+    "input",
+    {
+      id: name,
+      type: "checkbox",
+      ...register(name, {
+        required,
+        validate
+      }),
+      className: `${className} ${isErrorMessage ? classNameError : ""}`,
+      value,
+      defaultChecked,
+      disabled
+    }
+  );
+}
+var FormCheckbox_default = FormCheckbox;
+
+// src/ProviderMethod/components/FormRadio.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function FormRadio({
+  className,
+  classNameError,
+  value,
+  defaultChecked,
+  disabled
+}) {
+  const { register, errors } = useFormContext();
+  const { name, required, validate } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsx18(
+    "input",
+    {
+      id: `${name}-${value}`,
+      type: "radio",
+      ...register(name, {
+        required,
+        validate
+      }),
+      className: `${className} ${isErrorMessage ? classNameError : ""}`,
+      value,
+      defaultChecked,
+      disabled
+    }
+  );
+}
+var FormRadio_default = FormRadio;
+
+// src/ProviderMethod/components/FormButton.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function FormButton({
+  children,
+  className,
+  disabledError,
+  ...props
+}) {
+  const { errors } = useFormContext();
+  const errorMessage = errors && Object.keys(errors).length > 0;
+  return /* @__PURE__ */ jsx19(
+    "button",
+    {
+      type: "submit",
+      className: `${className}`,
+      ...props,
+      disabled: errorMessage && disabledError,
+      children
+    }
+  );
+}
+var FormButton_default = FormButton;
+
+// src/ProviderMethod/components/FormError.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function FormError({ ...props }) {
+  const { errors } = useFormContext();
+  const { name } = useInputLayoutContext();
+  const layout = useOptionalInputLayoutContext();
+  const resolvedName = name ?? layout?.name;
+  if (!resolvedName) {
+    return null;
+  }
+  const errorMessage = errors[resolvedName]?.message;
+  return /* @__PURE__ */ jsx20("span", { ...props, children: typeof errorMessage === "string" ? errorMessage : null });
+}
+var FormError_default = FormError;
+
+// src/ProviderMethod/components/FormLabel.tsx
+import { jsxs as jsxs6 } from "react/jsx-runtime";
+function FormLabel({
+  children,
+  className,
+  classNameError
+}) {
+  const { required } = useInputLayoutContext();
+  const { errors } = useFormContext();
+  const { name } = useInputLayoutContext();
+  const isErrorMessage = !!errors[name]?.message;
+  return /* @__PURE__ */ jsxs6("label", { className: `${className} ${isErrorMessage ? classNameError : ""}`, children: [
+    children,
+    !!required && "*"
+  ] });
 }
+var FormLabel_default = FormLabel;
 export {
+  FormButton_default as FormButton,
+  FormCheckbox_default as FormCheckbox,
+  FormDate_default as FormDate,
+  FormError_default as FormError,
+  FormFileInput_default as FormFileInput,
+  FormInput_default as FormInput,
+  FormInputLayout_default as FormInputLayout,
+  FormLabel_default as FormLabel,
   FormLayout,
+  FormMaskedInput_default as FormMaskedInput,
+  FormNumber_default as FormNumber,
+  FormPasswordInput_default as FormPasswordInput,
+  FormProvider,
+  FormRadio_default as FormRadio,
+  FormRange_default as FormRange,
+  FormSelect_default as FormSelect,
+  FormTextarea_default as FormTextarea,
   InputForm_default as InputForm,
   useFormContext
 };