form power

src/components/form-wrapper/providers/form-context.ts

+import { createContext } from "react";
+
+export const FormContext = createContext<Record<string, any>>({});

src/components/form-wrapper/providers/form-provider.tsx

+import { FormContext } from "./form-context";
+
+export function FormProvider({
+  children,
+  value,
+}: {
+  value: Record<string, any>;
+  children: React.ReactNode;
+}) {
+  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
+}

src/components/form-wrapper/providers/index.ts

+export { FormProvider } from "./form-provider";
+export { useForm } from "./use-form";

src/components/form-wrapper/providers/use-form.ts

+import { useContext } from "react";
+import { FormContext } from "./form-context";
+
+export function useForm() {
+  const context = useContext(FormContext);
+  return context;
+}

src/components/form-wrapper/form-wrapper.tsx

 import { Button } from "uikit";
 import styles from "./form-wrapper.module.scss";
-import { useRef } from "react";
+import { useRef, useState } from "react";
+import { FormProvider } from "./providers";
 
-export function FormWrapper({ children }: { children: React.ReactNode }) {
+export function FormWrapper({
+  children,
+  onClickNext,
+  config,
+}: {
+  children: React.ReactNode;
+  onClickNext: (
+    payload: Record<
+      string,
+      | string
+      | File
+      | {
+          error: boolean;
+        }
+      | null
+    >
+  ) => void;
+  config: Record<
+    string,
+    { validation?: (value?: unknown) => boolean; errorMessage?: string }
+  >;
+}) {
   const ref = useRef<HTMLFormElement>(null);
+
+  const [formValue, setFormValue] = useState({});
+
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    let isValid = true;
+
     event.preventDefault();
     if (!ref.current) return;
-    const data = new FormData(ref.current);
-    console.log(data.get("name"));
+
+    const form = new FormData(ref.current);
+
+    const formData = Object.fromEntries(
+      Object.entries(config).map(([field, configField]) => {
+        const validation =
+          configField.validation && configField.validation(form.get(field));
+
+        if (!validation) isValid = false;
+
+        return [
+          field,
+          validation
+            ? form.get(field)
+            : {
+                error: true,
+                message: configField?.errorMessage || "Некорректное значение",
+              },
+        ];
+      })
+    );
+    setFormValue(formData);
+    isValid && onClickNext(formData);
   };
   return (
-    <form onSubmit={onSubmit} ref={ref}>
-      <div className={styles["form-wrapper"]}>
-        <div>{children}</div>
-        <Button onClick={() => {}} title="Далее" />
-      </div>
-    </form>
+    <FormProvider value={formValue}>
+      <form onSubmit={onSubmit} ref={ref}>
+        <div className={styles["form-wrapper"]}>
+          <div>{children}</div>
+          <Button title="Далее" />
+        </div>
+      </form>
+    </FormProvider>
   );
 }

src/components/form-wrapper/index.ts

 export { FormWrapper } from "./form-wrapper";
+export { useForm } from "./providers";

src/components/index.ts

-export { FormWrapper } from "./form-wrapper";
+export { FormWrapper, useForm } from "./form-wrapper";

src/modules/contacts-info-block/contacts-info-block.tsx

+import { useForm } from "@/components";
 import { TextField, Typography } from "uikit";
 
 export function ContactsInfoBlock() {
+  const form = useForm();
+  console.log(form);
+
   return (
     <div>
       <Typography>Имя</Typography>
@@ -10,6 +14,9 @@ export function ContactsInfoBlock() {
         name="name"
         onChange={() => {}}
       />
+      {form["name"]?.error && (
+        <Typography variant="error">{form["name"]?.message}</Typography>
+      )}
 
       <Typography marginTop={"30px"}>Фамилия</Typography>
       <TextField
@@ -18,6 +25,9 @@ export function ContactsInfoBlock() {
         placeholder="Фамилия"
         onChange={() => {}}
       />
+      {form["surname"]?.error && (
+        <Typography variant="error">{form["surname"]?.message}</Typography>
+      )}
 
       <Typography marginTop={"30px"}>Номер телефона</Typography>
       <TextField
@@ -26,6 +36,9 @@ export function ContactsInfoBlock() {
         onChange={() => {}}
         name="telephone"
       />
+      {form["telephone"]?.error && (
+        <Typography variant="error">{form["telephone"]?.message}</Typography>
+      )}
     </div>
   );
 }

src/modules/credit-type-select/credit-type-select.tsx

@@ -4,12 +4,14 @@ import styles from "./credit-type-select.module.scss";
 export function CreditTypeSelect() {
   return (
     <ul>
-      <li className={styles["list-item"]}>
-        <Checkbox title={"Автокредит"} onChange={() => {}} value />
-      </li>
-      <li className={styles["list-item"]}>
-        <Checkbox title={"Ипотека"} onChange={() => {}} value={false} />
-      </li>
+      <fieldset id="type">
+        <li className={styles["list-item"]}>
+          <Checkbox value="Автокредит" title={"Автокредит"} name="type" />
+        </li>
+        <li className={styles["list-item"]}>
+          <Checkbox value="Ипотека" title={"Ипотека"} name="type" />
+        </li>
+      </fieldset>
     </ul>
   );
 }

src/modules/main-info-block/main-info-block.tsx

+import { useForm } from "@/components";
 import { Slider, TextField, Typography } from "uikit";
 
 export function MainInfoBlock() {
+  const form = useForm();
+
+  console.log(form);
+
   return (
     <div>
       <Typography>Срок кредита</Typography>
       <Slider
         max={12}
-        onChange={() => {}}
-        value={0}
         width={330}
         marginTop={"20px"}
         min={1}
         step={1}
+        name="term"
       />
 
       <Typography marginTop={"30px"}>Сумма кредита</Typography>
-      <TextField placeholder="500 000" marginTop={"20px"} onChange={() => {}} />
+      <TextField name="sum" placeholder="500 000" marginTop={"20px"} />
+      {form["sum"]?.error && (
+        <Typography variant="error">{form["sum"]?.message}</Typography>
+      )}
 
       <Typography marginTop={"30px"}>Первоначальный взнос</Typography>
-      <TextField placeholder="500 000" marginTop={"20px"} onChange={() => {}} />
+      <TextField name="initial" placeholder="500 000" marginTop={"20px"} />
+      {form["sum"]?.error && (
+        <Typography variant="error">{form["initial"]?.message}</Typography>
+      )}
     </div>
   );
 }

src/shared/uikit/button/button.tsx

@@ -4,7 +4,7 @@ import styles from "./button.module.scss";
 interface ButtonProps extends CommonUIProps {
   title: string;
   variant?: string;
-  onClick: () => void;
+  onClick?: () => void;
   disabled?: boolean;
 }
 

src/shared/uikit/checkbox/checkbox.tsx

@@ -4,17 +4,28 @@ import { useId } from "react";
 export function Checkbox({
   title,
   onChange,
+  checked,
+  name,
   value,
 }: {
-  title: string;
-  onChange: (event?: React.ChangeEvent<HTMLInputElement>) => void;
-  value: boolean;
+  title?: string;
+  onChange?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
+  checked?: boolean;
+  name?: string;
+  value?: string;
 }) {
   const id = useId();
 
   return (
     <label className={styles.checkbox} htmlFor={id}>
-      <input type="radio" id={id} onChange={onChange} checked={value} />
+      <input
+        type="radio"
+        name={name}
+        id={id}
+        onChange={onChange}
+        value={value}
+        checked={checked}
+      />
       <span>{title}</span>
     </label>
   );