feat: add forms logic

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

@@ -1,5 +1,5 @@
 import s from './advancedPhoneInput.module.scss';
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, Ref } from 'react';
 import { clsx } from 'clsx';
 import { Button, Input } from '@shared/ui';
 
@@ -11,17 +11,20 @@ type AdvancedPhoneInputProps = {
   text: string;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
-export default function AdvancedPhoneInput({
-  containerClassName,
-  inputClassName,
-  buttonClassName,
-  onClick,
-  text,
-  ...props
-}: AdvancedPhoneInputProps) {
+const AdvancedPhoneInput = forwardRef(function AdvancedPhoneInput(
+  {
+    containerClassName,
+    inputClassName,
+    buttonClassName,
+    onClick,
+    text,
+    ...props
+  }: AdvancedPhoneInputProps,
+  ref: Ref<HTMLInputElement>,
+) {
   return (
     <div className={clsx(containerClassName, s.Container)}>
-      <Input {...props} className={clsx(inputClassName, s.Phone)} />
+      <Input {...props} ref={ref} className={clsx(inputClassName, s.Phone)} />
       <Button
         className={clsx(buttonClassName, s.Button)}
         onClick={onClick}
@@ -31,4 +34,6 @@ export default function AdvancedPhoneInput({
       </Button>
     </div>
   );
-}
+});
+
+export default AdvancedPhoneInput;

src/shared/ui/input/input.tsx

@@ -2,7 +2,7 @@
 
 import s from './input.module.scss';
 
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, Ref } from 'react';
 import { clsx } from 'clsx';
 
 type InputProps = {
@@ -12,15 +12,14 @@ type InputProps = {
   variant?: 'default' | 'ghost';
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 
-const Input = ({
-  className,
-  fullWidth = false,
-  variant = 'default',
-  ...props
-}: InputProps) => {
+const Input = forwardRef(function Input(
+  { className, fullWidth = false, variant = 'default', ...props }: InputProps,
+  ref: Ref<HTMLInputElement>,
+) {
   return (
     <input
       {...props}
+      ref={ref}
       className={clsx(
         s.Input,
         s['Input_' + variant],
@@ -29,6 +28,6 @@ const Input = ({
       )}
     />
   );
-};
+});
 
 export default Input;

src/shared/ui/text-area/text-area.tsx

@@ -1,5 +1,11 @@
 import s from './text-area.module.scss';
-import { DetailedHTMLProps, ReactNode, TextareaHTMLAttributes } from 'react';
+import {
+  DetailedHTMLProps,
+  forwardRef,
+  ReactNode,
+  Ref,
+  TextareaHTMLAttributes,
+} from 'react';
 import { clsx } from 'clsx';
 
 type TextAreaProps = {
@@ -12,21 +18,27 @@ type TextAreaProps = {
   HTMLTextAreaElement
 >;
 
-export default function TextArea({
-  className,
-  children,
-  variant = 'default',
-  fullWidth = false,
-  ...props
-}: TextAreaProps) {
+const TextArea = forwardRef(function TextArea(
+  {
+    className,
+    children,
+    variant = 'default',
+    fullWidth = false,
+    ...props
+  }: TextAreaProps,
+  ref: Ref<HTMLTextAreaElement>,
+) {
   return (
     <div className={clsx(s.Container, fullWidth && s.Container_fullWidth)}>
       <textarea
         {...props}
+        ref={ref}
         className={clsx(className, s.Area, s['Area_' + variant])}
       >
         {children}
       </textarea>
     </div>
   );
-}
+});
+
+export default TextArea;