[10] Формы

package.json

@@ -64,8 +64,11 @@
     "webpack-dev-server": "^4.15.0"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.54.2",
+    "zod": "^3.24.1"
   }
 }

src/pages/OperationForm/OperationForm.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { RegularForm } from '../../shared/forms/RegularForm/RegularForm';
+import { Button } from '../../shared/button/Button';
+import { FormInputField } from '../../shared/forms/FormInputField/FormInputField';
+import { FormSelectField, SelectOptionProps } from '../../shared/forms/FormSelectField/FormSelectField';
+
+import { OperationSchemaType, OperationSchema } from './operation-schema';
+
+const costOperationOption: SelectOptionProps = {
+  text: 'Cost',
+  value: 'Cost',
+};
+
+const profitOperationOption: SelectOptionProps = {
+  text: 'Profit',
+  value: 'Profit',
+};
+
+export const OperationForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<OperationSchemaType>({
+    shouldUnregister: true,
+    resolver: zodResolver(OperationSchema),
+  });
+
+  const onSubmit = (data: OperationSchemaType) => {
+    console.log(data);
+  };
+
+  return (
+    <RegularForm title="Операция" onSubmit={handleSubmit(onSubmit)}>
+      <FormSelectField
+        name="type"
+        options={[costOperationOption, profitOperationOption]}
+        register={register}
+        errors={errors.type}
+      >
+        Тип операции
+      </FormSelectField>
+      <FormInputField name="name" register={register} type="text" errors={errors.name}>
+        Название
+      </FormInputField>
+      <FormInputField name="category" register={register} type="text" errors={errors.category}>
+        Категория
+      </FormInputField>
+      <FormInputField name="desc" register={register} type="text" errors={errors.desc}>
+        Описание
+      </FormInputField>
+      <FormInputField name="createdAt" register={register} type="date" errors={errors.createdAt}>
+        Дата
+      </FormInputField>
+      <FormInputField name="amount" register={register} isNumber={true} type="number" errors={errors.amount}>
+        Сумма
+      </FormInputField>
+
+      <Button type="submit">Сохранить</Button>
+    </RegularForm>
+  );
+};

src/pages/OperationForm/operation-schema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const OperationSchema = z.object({
+  name: z.string().nonempty('Обязательное поле'),
+  desc: z.string().optional(),
+  createdAt: z.string().nonempty('Обязательное поле'),
+  amount: z.number({ invalid_type_error: 'Обязательное поле' }).positive('Сумма должна быть больше 0'),
+  category: z.string().nonempty('Обязательное поле'),
+  type: z.enum(['Cost', 'Profit']),
+});
+
+export type OperationSchemaType = z.infer<typeof OperationSchema>;

src/pages/ProductForm/ProductForm.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { RegularForm } from '../../shared/forms/RegularForm/RegularForm';
+import { Button } from '../../shared/button/Button';
+import { FormInputField } from '../../shared/forms/FormInputField/FormInputField';
+
+import { ProductSchema, ProductSchemaType } from './product-schema';
+
+export const ProductForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ProductSchemaType>({
+    shouldUnregister: true,
+    resolver: zodResolver(ProductSchema),
+  });
+
+  const onSubmit = (data: ProductSchemaType) => {
+    console.log(data);
+  };
+
+  return (
+    <RegularForm title="Товар" onSubmit={handleSubmit(onSubmit)}>
+      <FormInputField name="name" register={register} type="text" errors={errors.name}>
+        Название
+      </FormInputField>
+      <FormInputField name="category" register={register} type="text" errors={errors.category}>
+        Категория
+      </FormInputField>
+      <FormInputField name="desc" register={register} type="text" errors={errors.desc}>
+        Описание
+      </FormInputField>
+      <FormInputField name="photo" register={register} type="text" errors={errors.photo}>
+        Фото
+      </FormInputField>
+      <FormInputField name="createdAt" register={register} type="date" errors={errors.createdAt}>
+        Дата
+      </FormInputField>
+      <FormInputField name="oldPrice" register={register} isNumber={true} type="number" errors={errors.oldPrice}>
+        Старая цена
+      </FormInputField>
+      <FormInputField name="price" register={register} isNumber={true} type="number" errors={errors.price}>
+        Цена
+      </FormInputField>
+      <Button type="submit">Сохранить</Button>
+    </RegularForm>
+  );
+};

src/pages/ProductForm/product-schema.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+
+export const ProductSchema = z.object({
+  name: z.string().nonempty('Обязательное поле'),
+  photo: z.string().url('Некорректный URL').nonempty('Обязательное поле'),
+  desc: z.string().optional(),
+  createdAt: z.string().nonempty('Обязательное поле'),
+  oldPrice: z
+    .number({ invalid_type_error: 'Некорректное значение, введите 0 если значение отсутстувет' })
+    .min(0, 'Сумма должна быть 0 или больше')
+    .default(0),
+  price: z.number({ invalid_type_error: 'Обязательное поле' }).positive('Сумма должна быть больше 0'),
+  category: z.string().nonempty('Обязательное поле'),
+});
+
+export type ProductSchemaType = z.infer<typeof ProductSchema>;

src/pages/ProfileForm/ProfileForm.module.scss

@@ -0,0 +1,5 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}

src/pages/ProfileForm/ProfileForm.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import {
+  ChangeProfileSchema,
+  ChangeProfileSchemaType,
+  ChangePasswordSchema,
+  ChangePasswordSchemaType,
+} from './profile-schema';
+import { RegularForm } from '../../shared/forms/RegularForm/RegularForm';
+import { FormInputField } from '../../shared/forms/FormInputField/FormInputField';
+import { FormTextareaField } from '../../shared/forms/FormTextareaField/FormTextareaField';
+import { Button } from '../../shared/button/Button';
+
+import s from './ProfileForm.module.scss';
+
+const ChangeProfileForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ChangeProfileSchemaType>({
+    shouldUnregister: true,
+    resolver: zodResolver(ChangeProfileSchema),
+  });
+
+  const onSubmit = (data: ChangeProfileSchemaType) => {
+    console.log(data);
+  };
+
+  return (
+    <RegularForm title="Изменить профиль" onSubmit={handleSubmit(onSubmit)}>
+      <FormInputField name="name" register={register} type="text" errors={errors.name}>
+        Псевдоним
+      </FormInputField>
+      <FormTextareaField name="description" register={register} errors={errors.description}>
+        О себе
+      </FormTextareaField>
+      <Button type="submit">Сохранить</Button>
+    </RegularForm>
+  );
+};
+
+const ChangePasswordForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ChangePasswordSchemaType>({
+    shouldUnregister: true,
+    resolver: zodResolver(ChangePasswordSchema),
+  });
+
+  const onSubmit = (data: ChangePasswordSchemaType) => {
+    console.log(data);
+  };
+
+  return (
+    <RegularForm title="Изменить пароль" onSubmit={handleSubmit(onSubmit)}>
+      <FormInputField name="password" register={register} type="password" errors={errors.password}>
+        Пароль
+      </FormInputField>
+      <FormInputField name="newPassword" register={register} type="password" errors={errors.newPassword}>
+        Новый пароль
+      </FormInputField>
+      <FormInputField name="confirmPassword" register={register} type="password" errors={errors.confirmPassword}>
+        Повторите пароль
+      </FormInputField>
+      <Button type="submit">Изменить</Button>
+    </RegularForm>
+  );
+};
+
+export const ProfileForm = () => (
+  <div className={s.container}>
+    <ChangeProfileForm />
+    <ChangePasswordForm />
+  </div>
+);

src/pages/ProfileForm/profile-schema.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+export const ChangeProfileSchema = z.object({
+  name: z.string().nonempty('Обязательное поле'),
+  description: z.string(),
+});
+
+export type ChangeProfileSchemaType = z.infer<typeof ChangeProfileSchema>;
+
+const passwordZodType = z.string().nonempty('Обязательное поле').min(6, 'Слишком короткий пароль');
+
+export const ChangePasswordSchema = z
+  .object({
+    password: passwordZodType,
+    newPassword: passwordZodType,
+    confirmPassword: passwordZodType,
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: 'Пароли не совпадают',
+    path: ['confirmPassword'],
+  });
+
+export type ChangePasswordSchemaType = z.infer<typeof ChangePasswordSchema>;