fix: Refactor PhoneInputRoot component in phone-input.tsx to improve …

…code readability and maintainability

.storybook/main.js

@@ -9,6 +9,7 @@ const config = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@storybook/addon-jest',
   ],
   framework: {
     name: '@storybook/react-vite',

package.json

@@ -39,12 +39,15 @@
     "@semantic-release/release-notes-generator": "^12.1.0",
     "@storybook/addon-essentials": "^7.6.12",
     "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-jest": "^8.0.9",
     "@storybook/addon-links": "^7.6.12",
     "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/blocks": "^7.6.12",
+    "@storybook/icons": "^1.2.9",
     "@storybook/react": "^7.6.12",
     "@storybook/react-vite": "^7.6.12",
     "@storybook/test": "^7.6.12",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.5",
     "@types/jest": "^29.5.12",
     "@types/react-dom": "^18.2.18",
@@ -68,8 +71,8 @@
     "lint-staged": "^15.2.1",
     "prettier": "^3.2.4",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.50.0",
     "react-spring": "^9.7.3",
     "react-test-renderer": "^18.3.1",

src/phone-input/phone-input-item.tsx

@@ -1,5 +1,7 @@
 import clsx from 'clsx';
+import { CountryCode, getCountryCallingCode } from 'libphonenumber-js';
 import React, { useCallback } from 'react';
+import { UseControllerProps, useController } from 'react-hook-form';
 
 import styles from './phone-input.module.scss';
 import { usePhoneInput } from './phone-input-provider';
@@ -52,6 +54,34 @@ export function PhoneInputItem(
   );
 }
 
+export function PhoneInputItemWithForm(
+  props: React.LiHTMLAttributes<HTMLLIElement> & {
+    country: string;
+  } & UseControllerProps
+) {
+  const { country, name } = props;
+  const {
+    field: { ref, ...fieldProps },
+  } = useController({
+    ...props,
+  });
+
+  return (
+    <PhoneInputItem
+      {...props}
+      {...fieldProps}
+      onClick={() => {
+        fieldProps.onChange({
+          target: {
+            name,
+            value: `+${getCountryCallingCode(country as CountryCode)}`,
+          },
+        });
+      }}
+    />
+  );
+}
+
 // Расширение типов пропсов для хука
 type UsePhoneInputItemProps = {
   selected: string;