add React Select and create CustonSelect

Author: stepan10andreev

package-lock.json

@@ -23,6 +23,7 @@
     "react-dom": "18.2.0",
     "react-input-mask": "^3.0.0-alpha.2",
     "react-redux": "^8.1.1",
+    "react-select": "^5.7.4",
     "typescript": "5.1.3"
   },
   "devDependencies": {

package.json

@@ -8,3 +8,13 @@
     max-width: 80px;
   }
 }
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  & > button {
+    max-width: 75px;
+  }
+}

src/components/StepOneForm/StepOneForm.module.scss

@@ -1,10 +1,30 @@
-import React from 'react'
+'use client'
+import React, { FormEventHandler } from 'react'
 import { UIInput } from '../ui-components/UIInput/UIInput'
 import styles from './StepOneForm.module.scss'
+import { CustomSelect } from '../ui-components/CustomSelect/CustomSelect'
+import { UIButton } from '../ui-components/UIButton/UIButton'
 
 export const StepOneForm = () => {
+
+  const handleSubmit: FormEventHandler = (event) => {
+    event.preventDefault();
+
+    const form = event.target as HTMLFormElement;
+
+    const formData = new FormData(form);
+    const formJson = Object.fromEntries(formData.entries());
+    console.log(formJson)
+    // if (validateMaxLength(formJson.fullName as string, 30) && isCyrillic(formJson.fullName as string) && isValidEmail(formJson.email as string)) {
+    //   console.log(formJson)
+    //   router.push('/step-1')
+    // } else {
+    //   console.log('Проверьте поля на корректность введенных данных')
+    // }
+  };
+
   return (
-    <form className={styles.form}>
+    <form className={styles.form} onSubmit={handleSubmit}>
       <UIInput
         type={'text'}
         heading={'Nickname'}
@@ -29,6 +49,18 @@ export const StepOneForm = () => {
         formName={'StepOneForm'}
       />
 
+      <CustomSelect
+        heading={'Sex'}
+        name={'sex'}
+        formName={'StepOneForm'}
+      />
+
+      <div className={styles.wrapper}>
+        <UIButton text={'Назад'} type={'button'}/>
+
+        <UIButton text={'Далее'} type={'submit'}/>
+      </div>
+
     </form>
   )
 }

src/components/StepOneForm/StepOneForm.tsx

@@ -0,0 +1,12 @@
+.label {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.heading {
+  margin: 0;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 20px;
+}

src/components/ui-components/CustomSelect/CustomSelect.module.scss

@@ -0,0 +1,34 @@
+'use client'
+import React, { FC, useState } from 'react'
+import Select, { OnChangeValue } from 'react-select'
+import styles from './CustomSelect.module.scss'
+import { IUIInputProps } from '../UIInput/UIInput'
+import { IOptions } from './customSelect.interface'
+
+type ICustomSelect = Pick<IUIInputProps, 'As' | 'heading' | 'name' | 'formName'>
+
+const options: IOptions[] = [
+  { value: 'man', label: 'man' },
+  { value: 'woman', label: 'woman' },
+]
+
+export const CustomSelect: FC<ICustomSelect> = ({ As ='h2', heading, name, formName}) => {
+  const [selectValue, setSelectValue] = useState('');
+
+  const onChange = (newValue: OnChangeValue<IOptions, boolean>) => {
+    // console.log(newValue)
+    setSelectValue((newValue as IOptions).value)
+  }
+
+  return (
+    <label className={styles.label}>
+      <As className={styles.heading}>{heading}</As>
+      <Select
+        options={options}
+        name={name}
+        form={formName}
+        onChange={onChange}
+      />
+    </label>
+  )
+}

src/components/ui-components/CustomSelect/CustomSelect.tsx

@@ -0,0 +1,4 @@
+export interface IOptions {
+  value: string;
+  label: string;
+}

src/components/ui-components/CustomSelect/customSelect.interface.ts

@@ -21,5 +21,17 @@
 }
 
 .back {
+  color: var(--btn-bg);
   background-color: var(--white);
+  border: 2px solid var(--btn-bg);
+
+  &:focus-visible,
+  &:hover {
+    outline: none;
+    background-color: var(--input-hover);
+  }
+
+  &:active {
+    background-color: var(--input-active);
+  }
 }