№222 create form return

package.json

@@ -57,6 +57,7 @@
     "@storybook/blocks": "^7.5.1",
     "@storybook/react": "^7.5.1",
     "@storybook/react-webpack5": "^7.5.1",
+    "@storybook/test": "^7.6.16",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
     "@types/react": "18.2.20",

src/app/router/AppRouter/ui/AppRouter.tsx

@@ -6,6 +6,7 @@ import { CategoryPage } from '@/pages/CategoryPage/CategoryPage'
 import ComparePage from '@/pages/ComparePage/ComparePage'
 import ErrorPage from '@/pages/ErrorPage/ErrorPage'
 import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
+import HelpPage from '@/pages/HelpPage/HelpPage'
 import LoginPage from '@/pages/LoginPage/LoginPage'
 import MainPage from '@/pages/MainPage/MainPage'
 import { ProductPage } from '@/pages/ProductPage/ProductPage'
@@ -88,6 +89,10 @@ export const AppRouter = createBrowserRouter([
         path: Routes.SEARCH,
         element: <SearchResultsPage />
       },
+      {
+        path: Routes.HELP,
+        element: <HelpPage />
+      },
       {
         path: Routes.STORE_REVIEWS,
         element: <ProductsPage /> // временная заглушка нужна страница с отзывами о магазине
@@ -104,6 +109,10 @@ export const AppRouter = createBrowserRouter([
         path: Routes.PRODUCT,
         element: <ProductPage />
       }
+      /*       {
+        path: Routes.CERTIFICATE,
+        element: <Certificate />
+      } */
     ]
   }
 ])

src/features/Contacts/Contacts.tsx

@@ -34,7 +34,6 @@ const Contacts: FC<PropsContacts> = ({ messenger }) => {
           ))}
         </ul>
       </div>
-
       <Button
         theme={ButtonTheme.PRIMARY}
         design={ButtonDesign.ROUND}

src/features/login/model/validation/validation.ts

@@ -6,6 +6,21 @@ export const validationSchema = Yup.object().shape({
     .email('Укажите корректный адрес электронной почты'),
   password: Yup.string()
     .required('Введите пароль')
-    .min(3, 'Минимальная длина пароля 8 символов') // поменял для тестового юзера
-    .max(64, 'Максимальная длина пароля 64 символа')
+    .min(6, 'Минимальная длина пароля 6 символов') // поменял для тестового юзера
+    .max(64, 'Максимальная длина пароля 64 символа'),
+  name: Yup.string()
+    .required('Введите имя')
+    .min(6, 'Минимальная длина имени 6 символов')
+    .max(64, 'Максимальная длина имени 64 символа'),
+  surname: Yup.string()
+    .required('Введите фамилию')
+    .min(1, 'Минимальная длина фамилии 1 символ')
+    .max(64, 'Максимальная длина фамилии 64 символа'),
+  tel: Yup.string()
+    .required('Введите номер телефона')
+    .matches(/^\+7\d{10}$/, 'Номер телефона должен быть в формате +7XXXXXXXXXX (X - цифра)'),
+  numberOrder: Yup.string().required('Введите номер заказа'),
+  dateOrder: Yup.string().required('Введите дату заказа'),
+  itemInfo: Yup.string().required('Введите наименование товара'),
+  model: Yup.string().required('Введите название модели')
 })

src/pages/HelpPage/HelpPage.module.scss

@@ -0,0 +1,34 @@
+@use '../../shared/styles/utils/variables' as var;
+
+.help {
+  align-self: flex-start;
+
+  &__path {
+    text-align: left;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__cats {
+    display: flex;
+    flex-direction: column;
+    max-width: 340px;
+    padding: 40px 30px 65px;
+    align-items: flex-start;
+    border-radius: 10px;
+    background: var.$white;
+    max-height: 300px;
+  }
+
+  &__wrapper {
+    display: flex;
+    gap: 30px;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    gap: 30px;
+  }
+}

src/pages/HelpPage/HelpPage.tsx

@@ -0,0 +1,31 @@
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Subheading from '@/shared/ui/Subheading/Subheading'
+import FormReturn from '@/widgets/FormReturn/FormReturn'
+import HelpCategories from '@/widgets/HelpCategories/HelpCategories'
+
+import WrapperForMainContent from '../../components/WrapperForMainContent/WrapperForMainContent'
+
+import styles from './HelpPage.module.scss'
+
+const HelpPage = () => {
+  return (
+    <WrapperForMainContent>
+      <div className={styles.help__wrapper}>
+        <div className={styles.help__container}>
+          <Heading type={HeadingType.NORMAL}>Помощь</Heading>
+          <Subheading className={styles.help__path}>Главная/Помощь</Subheading>
+          <div className={styles.help__cats}>
+            <Heading type={HeadingType.NORMAL}>Категории</Heading>
+            <HelpCategories />
+          </div>
+        </div>
+        <div className={styles.help__container}>
+          <Heading type={HeadingType.NORMAL}>Форма возврата</Heading>
+          <FormReturn />
+        </div>
+      </div>
+    </WrapperForMainContent>
+  )
+}
+
+export default HelpPage

src/shared/config/routerConfig/routes.ts

@@ -20,5 +20,6 @@ export enum Routes {
   STORE_REVIEWS = '/store-reviews',
   TERMS = '/terms',
   VOUCHERS = '/vouchers',
-  PRODUCT = '/product/:slug'
+  PRODUCT = '/product/:slug',
+  HELP = '/help'
 }

src/shared/model/types/common.ts

@@ -20,10 +20,32 @@ export enum ECardView {
   COMPACT = 'compact'
 }
 
+export enum ECheckboxSize {
+  M = 'medium'
+}
+
+export enum ECheckboxTheme {
+  PRIMARY = 'primary'
+}
+
 export type TOrder = {
   amount: number
   productsSum: number
   currency: string
   productsSumWithoutDiscount: number
   total: number
 }
+
+export type TFormReturn = {
+  name: string
+  surname: string
+  email: string
+  tel: string
+  numberOrder: string
+  dateOrder: string
+  itemInfo: string
+  model: string
+  amount: string
+  textArea: string
+  myChoice: string
+}

src/shared/ui/Button/Button.module.scss

@@ -47,6 +47,10 @@
   color: color.$white;
 }
 
+.previous {
+  background: color.$bg-no-image;
+}
+
 .big {
   font-size: 32px;
   line-height: 40px;

src/shared/ui/Button/Button.stories.tsx

@@ -77,3 +77,9 @@ export const Secondary: Story = {
     theme: ButtonTheme.SECONDARY
   }
 }
+export const Previous: Story = {
+  args: {
+    children: 'Text',
+    theme: ButtonTheme.PREVIOUS
+  }
+}

src/shared/ui/Button/Button.tsx

@@ -7,7 +7,8 @@ export enum ButtonTheme {
   OUTLINED = 'outlined',
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
-  SUCCESS = 'success'
+  SUCCESS = 'success',
+  PREVIOUS = 'previous'
 }
 
 export enum ButtonSize {

src/shared/ui/Checkbox/Checkbox.module.scss

@@ -0,0 +1,32 @@
+@use '../../../shared/styles/utils/variables' as var;
+
+.formReturn {
+  &__checkbox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:first-child {
+      margin-top: 10px;
+    }
+  }
+
+  &__radio {
+    height: 20px;
+    width: 20px;
+    background-color: var.$theme-primary-color;
+    margin: 10px 15px 10px 0;
+    border-color: var.$body-color;
+    cursor: pointer;
+    accent-color: var.$theme-primary-color;
+  }
+}
+
+.primary {
+  accent-color: var.$theme-primary-color;
+}
+
+.medium {
+  height: 20px;
+  width: 20px;
+}

src/shared/ui/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,39 @@
+import { Formik, Form } from 'formik'
+import { Meta, StoryObj } from '@storybook/react'
+import Checkbox, { CheckboxProps } from './Checkbox'
+import { ECheckboxTheme, ECheckboxSize } from '@/shared/model/types/common'
+
+export default {
+  title: 'shared/Checkbox',
+  component: Checkbox,
+  decorators: [
+    Story => (
+      <Formik initialValues={{ myChoice: false }} onSubmit={values => console.log(values)}>
+        <Form>
+          <Story />
+        </Form>
+      </Formik>
+    )
+  ],
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    checked: { control: 'boolean' }
+  }
+} as Meta<CheckboxProps>
+
+const Template: StoryObj<CheckboxProps> = {
+  render: args => <Checkbox {...args} />
+}
+
+export const Primary = {
+  ...Template,
+  args: {
+    name: 'Text',
+    value: 'Text',
+    label: 'Text',
+    theme: ECheckboxTheme.PRIMARY,
+    size: ECheckboxSize.M
+  }
+}

src/shared/ui/Checkbox/Checkbox.tsx

@@ -0,0 +1,59 @@
+import { FC } from 'react'
+import { Field, useField } from 'formik'
+import style from './Checkbox.module.scss'
+import { Input } from '@/shared/ui/Input/Input'
+import classNames from 'classnames'
+import { ECheckboxTheme, ECheckboxSize } from '@/shared/model/types/common'
+
+export interface CheckboxProps {
+  name: string
+  value?: string
+  label?: string
+  htmlFor: string
+  theme?: ECheckboxTheme
+  size?: ECheckboxSize
+  className?: string
+}
+
+/**
+ * компонент Button
+ * @param {string} props.name - имя для привязки к htmlFor
+ * @param {string} props.value - значение выбранного поля
+ * @param {string} props.label - название поля
+ * @param {string} props.htmlFor - для привязки к field
+ * @param {ECheckboxTheme} props.theme - тема представления
+ * @param {ECheckboxSize} props.size - размер
+ */
+
+const Checkbox: FC<CheckboxProps> = props => {
+  const {
+    className,
+    value,
+    htmlFor,
+    label,
+    name,
+    theme = ECheckboxTheme.PRIMARY,
+    size = ECheckboxSize.M
+  } = props
+
+  const additionalClasses = [className, theme && style[theme], style[size]]
+
+  const [field] = useField({ name, type: 'radio', value })
+
+  return (
+    <label className={style.formReturn__checkbox} htmlFor={htmlFor}>
+      <Field
+        checked={field.checked}
+        className={classNames(style.formReturn__radio, additionalClasses)}
+        as={Input}
+        label={label}
+        name={name}
+        type="radio"
+        value={value}
+      />
+      <span>{label}</span>
+    </label>
+  )
+}
+
+export default Checkbox

src/shared/ui/Label/Label.tsx

@@ -10,6 +10,7 @@ type TLabelProps = React.HTMLAttributes<HTMLElement> & {
 /**
  * @param {string} className - для передачи дополнительных параметров стиля
  */
+
 const Label: FC<TLabelProps> = ({ htmlFor, children, className, ...props }) => {
   return (
     <label htmlFor={htmlFor} className={`${styles.label} ${className}`} {...props}>

src/stories/Configure.mdx

@@ -126,7 +126,7 @@ export const RightArrow = () => (
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/react/writing-tests/introduction"
+          href="https://storybook.js.org/docs/react/writing-tests"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>

src/stories/button.css

@@ -7,28 +7,23 @@
   display: inline-block;
   line-height: 1;
 }
-
 .storybook-button--primary {
   color: white;
   background-color: #1ea7fd;
 }
-
 .storybook-button--secondary {
   color: #333;
   background-color: transparent;
-  box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
 }
-
 .storybook-button--small {
   font-size: 12px;
   padding: 10px 16px;
 }
-
 .storybook-button--medium {
   font-size: 14px;
   padding: 11px 20px;
 }
-
 .storybook-button--large {
   font-size: 16px;
   padding: 12px 24px;

src/stories/header.css

@@ -1,6 +1,6 @@
 .storybook-header {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgb(0 0 0 / 10%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;
   align-items: center;