Формы

package.json

@@ -64,11 +64,18 @@
     "webpack-dev-server": "^4.15.0"
   },
   "dependencies": {
+    "@apollo/client": "^4.0.1",
+    "@hookform/resolvers": "^5.2.2",
+    "antd": "^5.27.1",
     "clsx": "^1.2.1",
+    "formik": "^2.4.6",
+    "graphql": "^16.11.0",
     "i18next": "^25.3.2",
     "i18next-browser-languagedetector": "^8.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^15.6.0"
+    "react-hook-form": "^7.62.0",
+    "react-i18next": "^15.6.0",
+    "zod": "^4.1.8"
   }
 }

src/app/App.scss → src/app/App.css

@@ -1,4 +1,11 @@
-@import "Variables.scss";
+
+:root{
+    --grey: #C2C8DA;
+    --brown: #D5621D;
+    --darkColor: #210E09;
+    --yellow: #E6C744;
+}
+
 
 button{
     font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -9,7 +16,7 @@ button{
     display: inline-block;
     line-height: 1;
     color: black;
-    background-color: $yellow;
+    background-color: var(--yellow);
     font-size: 12px;
     padding: 10px 16px;
 }
@@ -25,12 +32,12 @@ button{
 .button-light{
     border: 0.01em solid black;
     color: black;
-    background-color: $yellow;
+    background-color: var(--yellow);
 }
 .button-dark{
-    border: 0.01em solid $brown;
+    border: 0.01em solid var(--brown);
     color: white;
-    background-color: $darkColor;
+    background-color: var(--darkColor);
 }
 
 .select-light, .select-dark{
@@ -46,17 +53,56 @@ button{
 .select-light{
     border: 0.01em solid black;
     color: black;
-    background-color: $yellow;;
+    background-color: var(--yellow);
 }
 .select-dark{
-    border: 0.01em solid $brown;
+    border: 0.01em solid var(--brown);
     color: white;
-    background-color: $darkColor;
+    background-color: var(--darkColor);
 }
 
 .h1-light, .p-light {
     color: black
 }
 .h1-dark, .p-dark {
     color: white
+}
+
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+.App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
+
+.App-link {
+    color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }

src/app/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import logo from './logo.svg';
-import './App.scss';
+import './App.css';
 
 function App() {
   return (

src/components/ProductCreator.ts

@@ -1,14 +1,14 @@
 import { v4 as uuidv4 } from 'uuid';
 
-const categories : string[] = ["fruits", "vegetables", "clothes", "shoes"];
+export const categories : string[] = ["fruits", "vegetables", "clothes", "shoes"];
 const CNT_CATEGORIES = 4;
 
 export type Product = {
     id: string,
     name: string,
     price: number,
     categoryName: string,
-    image?: string,
+    image?: FileList,
     description?: string,
 }
 

src/components/common/ChangeLanguageComponent/ChangeLanguage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import "../../../app/App.scss";
+import "../../../app/App.css";
 import { useTheme } from "../../ThemeProvider";
 import { useLanguage } from "../../LanguageProvider";
 

src/components/common/FillInputModalComponent/FillInputModal.tsx

@@ -1,4 +1,4 @@
-import "../../../app/App.scss"
+import "../../../app/App.css"
 import React, { useState } from "react"
 import { Modal } from "../Modal/Modal"
 import { Button } from "../Button/Button";

src/components/common/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react"
 import "./Modal.scss"
-import "../../../app/App.scss"
+import "../../../app/App.css"
 import { createPortal } from "react-dom"
 import { Button } from "../Button/Button";
 

src/components/common/ProfileForm/Profile.stories.ts

@@ -0,0 +1,11 @@
+import { Meta } from "@storybook/react";
+import { ProfileForm } from "./ProfileForm";
+
+const meta: Meta<typeof ProfileForm> = {
+    title: "components/ProfileForm",
+    component: ProfileForm,
+}
+
+export default meta;
+
+export const Primary = {}

src/components/common/ProfileForm/ProfileForm.css

@@ -0,0 +1,45 @@
+form {
+  display: flex;
+  flex-direction: column;
+  padding: 40px 40px 60px 40px;
+  border-radius: 20px;
+  background: #fff;
+  color: #1a1a1a;
+  gap: 4px;
+  text-align: left;
+
+  h2 {
+    margin: 0 0 10px 0;
+  }
+
+  & > input,
+  textarea {
+    min-width: 260px;
+    padding: 6px 0 6px 10px;
+  }
+
+  button {
+    margin-top: 24px;
+  }
+
+  fieldset {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+  }
+
+  .input-error,
+  fieldset:has(input.input-error) {
+    border-color: #ff0202;
+  }
+
+  .error {
+    margin: -4px 0 0 0;
+    font-size: 14px;
+    color: #bd0000;
+  }
+
+  fieldset:has(p.error) p {
+    margin-top: 4px;
+  }
+}

src/components/common/ProfileForm/ProfileForm.tsx

@@ -0,0 +1,109 @@
+
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import clsx from 'clsx';
+import React from 'react';
+import { z } from 'zod';
+
+
+const formSchema = z
+  .object({
+    name: z.string()
+      .min(2, { message: 'Min Value 2' })
+      .max(50, 'Max Value 50'),
+    email: z.email('Wrong email format'),
+    message: z.string()
+        .min(10, { message: 'Message must be at least 10 characters' })
+        .max(500, 'Message must be less than 500 characters'), 
+    preference: z.enum(['newsletters', 'updates', 'offers' ], {
+        message: 'Please select one option'
+    })
+  })
+
+type FormData = z.infer<typeof formSchema>;
+
+export const ProfileForm: React.FC = () => {
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm<FormData>({ resolver: zodResolver(formSchema) });
+
+    const onSubmit: SubmitHandler<FormData> = (data: FormData) => {
+        console.log('Form submitted:', data);
+    };
+
+
+    return(    
+        <form onSubmit={handleSubmit(onSubmit)}>
+        <h2>Contact Form</h2>
+
+        <label htmlFor="name">Name:</label>
+        <input
+            id = "name"
+            type="text"
+            placeholder="Enter your name"
+            className={clsx({ 'input-error': errors.name })}
+            {...register('name')}
+        />
+        {errors.name && <p className="error">{errors.name.message}</p>}
+
+        <label htmlFor="email">Email:</label>
+        <input
+            type="email"
+            id="email"
+            className={clsx({ 'input-error': errors.email })}
+            placeholder="Enter your email"
+            {...register('email')}
+        />
+        {errors.email && <p className="error">{errors.email.message}</p>}
+
+        <label htmlFor="message">Message:</label>
+        <textarea
+            id="message"
+            className={clsx({ 'input-error': errors.message })}
+            placeholder="Enter your message"
+            {...register('message')}
+        />
+        {errors.message && <p className="error">{errors.message.message}</p>}
+
+        <fieldset>
+            <legend>How did you hear about us?</legend>
+
+            <label>
+            <input
+                type="radio"
+                value="newsletters"
+                className={clsx({ 'input-error': errors.preference })}
+                {...register('preference')}
+            />
+            Search Engine (Yandex, Google, Bing)
+            </label>
+
+            <label>
+            <input
+                type="radio"
+                value="updates"
+                className={clsx({ 'input-error': errors.preference })}
+                {...register('preference')}
+            />
+            Social Media
+            </label>
+
+            <label>
+            <input
+                type="radio"
+                value="offers"
+                className={clsx({ 'input-error': errors.preference })}
+                {...register('preference')}
+            />
+            Friend or Colleague
+            </label>
+
+            {errors.preference && <p className="error">{errors.preference.message}</p>}
+        </fieldset>
+
+        <button type="submit">Submit</button>
+        </form>
+    )
+}

src/components/common/RegistrationForm/RegistrationForm.scss

@@ -0,0 +1,53 @@
+form {
+  display: flex;
+  flex-direction: column;
+  padding: 40px 40px 60px 40px;
+  border-radius: 20px;
+  background: #fff;
+  color: #1a1a1a;
+  gap: 4px;
+  text-align: left;
+
+  a {
+    text-decoration: underline;
+  }
+
+  a:hover {
+    color: grey;
+  }
+
+  h2 {
+    margin: 0 0 10px 0;
+  }
+
+  & > input,
+  textarea, select {
+    min-width: 260px;
+    padding: 6px 0 6px 10px;
+  }
+
+  button {
+    margin-top: 24px;
+  }
+
+  fieldset {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+  }
+
+  .input-error,
+  fieldset:has(input.input-error) {
+    border-color: #ff0202;
+  }
+
+  .error {
+    margin: -4px 0 0 0;
+    font-size: 14px;
+    color: #bd0000;
+  }
+
+  fieldset:has(p.error) p {
+    margin-top: 4px;
+  }
+}