fix: add phone-input

src/shared/ui/index.ts

@@ -3,3 +3,4 @@ export { Mark } from './mark';
 export { Input } from './input';
 export { AdvancedPhoneInput } from './advanced-phone-input';
 export { TextArea } from './text-area';
+export { PhoneInput } from './phone-input';

src/shared/ui/input/input.module.scss

@@ -41,6 +41,10 @@
     transition: border-color ease .5s;
   }
 
+  &_error {
+    border-color: $color-error;
+  }
+
   &_fullWidth{
     width: 100%;
   }

src/shared/ui/input/input.tsx

@@ -10,10 +10,17 @@ type InputProps = {
   className?: string;
   fullWidth?: boolean;
   variant?: 'default' | 'ghost';
+  error?: string | boolean;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
 const Input = forwardRef(function Input(
-  { className, fullWidth = false, variant = 'default', ...props }: InputProps,
+  {
+    className,
+    fullWidth = false,
+    variant = 'default',
+    error = false,
+    ...props
+  }: InputProps,
   ref: Ref<HTMLInputElement>,
 ) {
   return (
@@ -24,6 +31,7 @@ const Input = forwardRef(function Input(
         s.Input,
         s['Input_' + variant],
         fullWidth && s.Input_fullWidth,
+        error && s.Input_error,
         className,
       )}
     />

src/shared/ui/phone-input/index.ts

@@ -0,0 +1 @@
+export { default as PhoneInput } from './phone-input';

src/shared/ui/phone-input/phone-input.tsx

@@ -1,10 +1,25 @@
 //import s from './phone-input.module.scss';
 import { Input } from '@shared/ui';
+import { useMaskito } from '@maskito/react';
+
+import { maskitoPhoneOptionsGenerator } from '@maskito/phone';
+import metadata from 'libphonenumber-js/min/metadata';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+
+type PhoneInput = {
+  className?: string;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+export default function PhoneInput({ ...props }: PhoneInput) {
+  const options = maskitoPhoneOptionsGenerator({
+    countryIsoCode: 'RU',
+    metadata,
+  });
+  const maskedInputRef = useMaskito({ options });
 
-export default function PhoneInput() {
   return (
     <>
-      <Input />
+      <Input {...props} ref={maskedInputRef} type='tel' />
     </>
   );
 }

src/widgets/offer-form/ui.tsx

@@ -1,16 +1,22 @@
 'use client';
 
 import s from './styles.module.scss';
-import { Button, Input } from '@shared/ui';
+import { Button, Input, PhoneInput } from '@shared/ui';
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import toast from 'react-hot-toast';
 import { sendFormFn } from '@shared/api/api.service';
+import { isValidPhoneNumber } from 'libphonenumber-js/min';
 
 const FormSchema = z.object({
-  name: z.string().min(3),
-  phone: z.string(),
+  name: z
+    .string()
+    .min(3, { message: 'Поле должно содержать не менее 3-х букв' })
+    .regex(/^[A-Za-zА-Яа-яЁё]+(?:[ '-][A-Za-zА-Яа-яЁё]+)*$/, {
+      message: 'Поле содержит некорректные символы',
+    }),
+  phone: z.string().refine(isValidPhoneNumber, 'Некорректный номер телефона'),
 });
 type TForm = z.infer<typeof FormSchema>;
 
@@ -67,11 +73,11 @@ export default function OfferForm() {
         control={control}
         name={'phone'}
         render={({ field }) => (
-          <Input
+          <PhoneInput
             {...field}
             className={s.Unit}
             type='text'
-            placeholder='+7 (999) 123 45 67'
+            placeholder='+7 999 123-45-67'
           />
         )}
       />