fix: base component dirs, remove duplicate component instance

src/features/authentication/components/AuthenticationSteps/CompleteSignUp.tsx

@@ -3,7 +3,7 @@ import parsePhoneNumberFromString from 'libphonenumber-js';
 import { useRef, useState, type Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AuthenticationCard } from '../AuthenticationCard';
-import { CountryCodeSelector } from '../CountryCodeSelector';
+import { CountryCodeSelector } from '../../../../components/CountryCodeSelector';
 import { sendSmsOtp } from '../../api/authorizationAPI';
 import type { CountryCode } from '@/types/commonTypes';
 import { useApi } from '@/hooks/useApi';

src/features/authentication/components/AuthenticationSteps/LoginRegiserForm.tsx

@@ -5,7 +5,7 @@ import { isNumeric } from '@/utils/regexes/isNumeric';
 import type { AuthFactory, AuthType } from '../../types/authTypes';
 import { isEmail } from '@/utils/regexes/isEmail';
 import { AuthenticationCard } from '../AuthenticationCard';
-import { CountryCodeSelector } from '../CountryCodeSelector';
+import { CountryCodeSelector } from '../../../../components/CountryCodeSelector';
 import type { LoginResult, UserStatus } from '../../types/userTypes';
 import { getUserStatusByPhoneNumberOrEmail } from '../../api/authorizationAPI';
 import type { CountryCode } from '@/types/commonTypes';

src/features/authentication/components/CountryCodeSelector.tsx

@@ -1,224 +0,0 @@
-import {
-  Box,
-  InputAdornment,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  TextField,
-} from '@mui/material';
-import { useMemo, useRef, useState, type RefObject } from 'react';
-import { ArrowDown2 } from 'iconsax-react';
-import ReactCountryFlag from 'react-country-flag';
-import { useTranslation } from 'react-i18next';
-import { countries, type Country } from '../../../data/countries';
-import type { CountryCode } from '@/types/commonTypes';
-import { Icon } from '@rkheftan/harmony-ui';
-import { LTRTypography } from '@/components/common/LTRTypography';
-import { Virtuoso } from 'react-virtuoso';
-
-interface CountryCodeSelectorProps {
-  show: boolean;
-  value: CountryCode;
-  onChange: (newValue: CountryCode) => void;
-  menuAnchor: HTMLElement | null;
-  onCloseFocusRef: RefObject<HTMLInputElement | null>;
-  disabled?: boolean;
-}
-
-export function CountryCodeSelector({
-  show,
-  value,
-  onChange,
-  menuAnchor,
-  onCloseFocusRef,
-  disabled = false,
-}: CountryCodeSelectorProps) {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [searchTerm, setSearchTerm] = useState('');
-  const open = Boolean(anchorEl);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const menuWidth = menuAnchor ? menuAnchor.clientWidth : 'auto';
-  const { t } = useTranslation(['country', 'common']);
-
-  const selectedCountry =
-    countries.find((c) => c.phone === value) || countries[0];
-
-  const handleClick = () => {
-    if (disabled) return;
-    setAnchorEl(menuAnchor);
-  };
-
-  const handleClose = () => {
-    setTimeout(() => setAnchorEl(null), 0);
-    setTimeout(() => {
-      onCloseFocusRef.current?.focus();
-    }, 100);
-    setSearchTerm('');
-  };
-
-  const handleSelect = (country: Country) => {
-    onChange(country.phone);
-    handleClose();
-  };
-
-  const handleMenuEntered = () => {
-    searchInputRef.current?.focus();
-  };
-
-  const filteredCountries = useMemo(
-    () =>
-      countries.filter(
-        (country) =>
-          t(country.label, { ns: 'country' })
-            .toLowerCase()
-            .includes(searchTerm.toLowerCase()) ||
-          country.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          country.phone.includes(searchTerm),
-      ),
-    [searchTerm, t],
-  );
-
-  const initialIndex = Math.max(
-    0,
-    filteredCountries.findIndex((c) => c.phone === value),
-  );
-
-  return (
-    <InputAdornment
-      position={'end'}
-      sx={{
-        mx: 0,
-      }}
-    >
-      <Box
-        onClick={handleClick}
-        sx={{
-          width: show ? 'auto' : 0,
-          opacity: show ? 1 : 0,
-          transition: (theme) =>
-            theme.transitions.create(['width', 'opacity'], {
-              duration: theme.transitions.duration.standard,
-            }),
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          flexDirection: 'row-reverse',
-          gap: 0.25,
-          pl: show ? 0.25 : 0,
-
-          '&:hover': {
-            cursor: disabled ? 'default' : 'pointer',
-          },
-        }}
-      >
-        {/* This inner Box prevents the content from being squeezed during the transition */}
-        <Icon
-          Component={ArrowDown2}
-          color={disabled ? 'text.disabled' : undefined}
-          size="medium"
-          variant="Bold"
-        />
-
-        <LTRTypography
-          variant="body1"
-          color={disabled ? 'text.disabled' : 'text.primary'}
-        >
-          {value}
-        </LTRTypography>
-
-        <ReactCountryFlag
-          countryCode={selectedCountry.code}
-          svg
-          style={{
-            height: '1.5rem',
-            width: '1.5rem',
-            marginTop: '-2px',
-            marginRight: '4px',
-            opacity: disabled ? 0.4 : 1,
-          }}
-        />
-
-        <Menu
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          slotProps={{
-            list: {
-              sx: {
-                width: menuWidth,
-                height: '18.75rem',
-                p: 0,
-              },
-            },
-            transition: { onEntered: handleMenuEntered },
-          }}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-        >
-          <Box
-            sx={{
-              position: 'sticky',
-              top: 0,
-              zIndex: 1,
-              p: 1,
-              backgroundColor: 'background.paper',
-            }}
-          >
-            <TextField
-              inputRef={searchInputRef}
-              size="small"
-              fullWidth
-              label={t('labels.search', { ns: 'common' })}
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-          </Box>
-
-          <Box sx={{ width: '100%', height: '14.75rem' }}>
-            {filteredCountries.length === 0 ? (
-              <MenuItem disabled>
-                <ListItem>
-                  <ListItemText>
-                    {t('messages.noResualtFound', { ns: 'common' })}
-                  </ListItemText>
-                </ListItem>
-              </MenuItem>
-            ) : (
-              <Virtuoso
-                style={{ height: '100%', width: '100%' }}
-                data={filteredCountries}
-                initialTopMostItemIndex={initialIndex}
-                itemContent={(_, country) => (
-                  <MenuItem
-                    key={country.code}
-                    selected={country.phone === value}
-                    onClick={() => handleSelect(country)}
-                  >
-                    <ListItemIcon>
-                      <ReactCountryFlag
-                        countryCode={country.code}
-                        svg
-                        style={{ height: '1.125rem', width: '1.125rem' }}
-                      />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={t(country.label, { ns: 'country' })}
-                    />
-                    <LTRTypography color="text.secondary">
-                      {country.phone}
-                    </LTRTypography>
-                  </MenuItem>
-                )}
-                computeItemKey={(_, c) => c.code}
-              />
-            )}
-          </Box>
-        </Menu>
-      </Box>
-    </InputAdornment>
-  );
-}

src/features/authentication/components/ForgetPassword/ForgettedPasswordInfo.tsx

@@ -5,7 +5,7 @@ import { isNumeric } from '@/utils/regexes/isNumeric';
 import type { AuthType } from '../../types/authTypes';
 import { isEmail } from '@/utils/regexes/isEmail';
 import { AuthenticationCard } from '../AuthenticationCard';
-import { CountryCodeSelector } from '../CountryCodeSelector';
+import { CountryCodeSelector } from '../../../../components/CountryCodeSelector';
 import type { CountryCode } from '@/types/commonTypes';
 import { sendForgetPassCode } from '../../api/authorizationAPI';
 import type { SendForgetPassCodeRequest } from '../../types/userTypes';