feat(phone-input-controller): add phone input controller

uses mui-tel-input package

Author: ruiaraujo012

package.json

@@ -65,6 +65,7 @@
     "eslint-config-ruiaraujo-react": "^3.1.25",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "mui-tel-input": "^5.1.2",
     "publint": "^0.2.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -75,11 +76,12 @@
     "vite-plugin-eslint": "^1.8.1"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11",
-    "@emotion/styled": ">=11",
-    "@mui/material": ">=5",
-    "react": ">=18",
-    "react-dom": ">=18",
-    "react-hook-form": ">=7"
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.16",
+    "mui-tel-input": "^5.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.4"
   }
 }

pnpm-lock.yaml

@@ -1,13 +1,13 @@
 import { Autocomplete, CircularProgress, TextField } from '@mui/material';
 import { Controller } from 'react-hook-form';
-import { useAsyncFieldControllerLabels, useFieldControllerLabels, useFieldControllerWithOptionsLabels } from '../index';
+import { useAsyncFieldControllerLabels, useFieldControllerLabels, useFieldControllerWithOptionsLabels } from '../hooks';
 import { useState } from 'react';
 import type {
   AsyncFieldControllerProps,
   FieldControllerProps,
   FieldControllerWithOptionsProps,
   ObjectLike,
-} from '../index';
+} from '../types';
 import type { AutocompleteProps, AutocompleteValue, ChipTypeMap, TextFieldProps } from '@mui/material';
 import type { FieldValues } from 'react-hook-form';
 

src/components/AutocompleteController.tsx

@@ -0,0 +1,56 @@
+import { FieldValues, useController } from 'react-hook-form';
+import { useFieldControllerLabels, useOnErrorMessage } from '../hooks';
+import { DistributiveOmit, FieldControllerProps } from '../types';
+import { MuiTelInput, type MuiTelInputProps } from 'mui-tel-input';
+
+export type PhoneInputControllerProps<FV extends FieldValues> = FieldControllerProps<FV> &
+  DistributiveOmit<
+    MuiTelInputProps,
+    'onChange' | 'error' | 'helperText' | 'label' | 'name' | 'disabled' | 'value' | 'onBlur'
+  >;
+
+export const PhoneInputController = <FV extends FieldValues>({
+  control,
+  label,
+  name,
+  optional = false,
+  requiredLabel,
+  onErrorMessage,
+  disabled = false,
+  ...muiTelInputProps
+}: PhoneInputControllerProps<FV>) => {
+  const { fieldControllerLabel } = useFieldControllerLabels({ label, optional, requiredLabel });
+  const { fieldOnErrorMessage } = useOnErrorMessage({ onErrorMessage });
+
+  const {
+    field: { onChange, ref, ...restField },
+    fieldState: { invalid, error },
+  } = useController({
+    control,
+    disabled,
+    name,
+  });
+
+  return (
+    <MuiTelInput
+      {...restField}
+      defaultCountry='PT'
+      aria-required={optional ? 'false' : 'true'}
+      error={invalid}
+      helperText={error?.message ? fieldOnErrorMessage(error?.message) : null}
+      inputRef={ref}
+      ref={ref}
+      label={fieldControllerLabel}
+      onChange={(_, info) => {
+        onChange(info.numberValue);
+      }}
+      sx={{
+        ...muiTelInputProps?.sx,
+        '.MuiTelInput-FlagImg': {
+          borderRadius: (theme) => theme.shape.borderRadius / 4,
+        },
+      }}
+      {...muiTelInputProps}
+    />
+  );
+};

src/components/PhoneInputController.tsx

@@ -10,14 +10,14 @@ import {
   Typography,
 } from '@mui/material';
 import { Controller } from 'react-hook-form';
-import { useAsyncFieldControllerLabels, useFieldControllerLabels, useFieldControllerWithOptionsLabels } from '../index';
+import { useAsyncFieldControllerLabels, useFieldControllerLabels, useFieldControllerWithOptionsLabels } from '../hooks';
 import { useMemo } from 'react';
 import type {
   AsyncFieldControllerProps,
   FieldControllerProps,
   FieldControllerWithOptionsProps,
   ObjectLike,
-} from '../index';
+} from '../types';
 import type {
   CircularProgressProps,
   FormControlProps,

src/components/SelectController.tsx

@@ -1,7 +1,7 @@
 import { TextField as MuiTextField } from '@mui/material';
 import { useController } from 'react-hook-form';
 import { useFieldControllerLabels, useOnErrorMessage } from '../hooks';
-import type { FieldControllerProps } from '../index';
+import type { FieldControllerProps } from '../types';
 import type { FieldValues } from 'react-hook-form';
 import type { TextFieldProps } from '@mui/material';
 

src/components/TextFieldController.tsx

@@ -1,3 +1,4 @@
 export * from './TextFieldController';
 export * from './SelectController';
 export * from './AutocompleteController';
+export * from './PhoneInputController';

src/components/index.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { useMuiFormConfig } from '../index';
-import type { AsyncFieldControllerProps } from '../index';
+import { useMuiFormConfig } from '../providers';
+import type { AsyncFieldControllerProps } from '../types';
 
 interface Props extends Omit<AsyncFieldControllerProps, 'isLoading'> {}
 

src/hooks/useAsyncFieldControllerLabels.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { useMuiFormConfig } from '../index';
-import type { FieldControllerProps } from '../index';
+import { useMuiFormConfig } from '../providers';
+import type { FieldControllerProps } from '../types';
 import type { FieldValues } from 'react-hook-form';
 
 interface Props extends Pick<FieldControllerProps<FieldValues>, 'requiredLabel'> {

src/hooks/useFieldControllerLabels.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { useMuiFormConfig } from '../index';
-import type { FieldControllerWithOptionsProps, ObjectLike } from '../index';
+import { useMuiFormConfig } from '../providers';
+import type { FieldControllerWithOptionsProps, ObjectLike } from '../types';
 
 interface Props extends Pick<FieldControllerWithOptionsProps<ObjectLike>, 'noOptionsLabel'> {}