feat: address composite field (#4492)

Added new Address field input type.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+import { IconComponentProps } from '@/ui/display/icon/types/IconComponent';
+import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
+import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
+import { Select, SelectOption } from '@/ui/input/components/Select';
+
+export const CountrySelect = ({
+  selectedCountryName,
+  onChange,
+}: {
+  selectedCountryName: string;
+  onChange: (countryCode: string) => void;
+}) => {
+  const countries = useCountries();
+
+  const options: SelectOption<string>[] = useMemo(() => {
+    return countries.map<SelectOption<string>>(({ countryName, Flag }) => ({
+      label: countryName,
+      value: countryName,
+      Icon: (props: IconComponentProps) =>
+        Flag({ width: props.size, height: props.size }), // TODO : improve this ?
+    }));
+  }, [countries]);
+
+  return (
+    <Select
+      fullWidth
+      dropdownId={SELECT_COUNTRY_DROPDOWN_ID}
+      options={options}
+      label="COUNTRY"
+      withSearchInput
+      onChange={onChange}
+      value={selectedCountryName}
+    />
+  );
+};

packages/twenty-front/src/modules/ui/input/components/internal/country/constants/SelectCountryDropdownId.ts

@@ -0,0 +1 @@
+export const SELECT_COUNTRY_DROPDOWN_ID = 'select-country-picker';

packages/twenty-front/src/modules/ui/input/components/internal/hooks/useCountries.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { hasFlag } from 'country-flag-icons';
+import * as Flags from 'country-flag-icons/react/3x2';
+import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
+
+import { Country } from '@/ui/input/components/internal/types/Country';
+
+export const useCountries = () => {
+  return useMemo<Country[]>(() => {
+    const regionNamesInEnglish = new Intl.DisplayNames(['en'], {
+      type: 'region',
+    });
+
+    const countryCodes = getCountries();
+
+    return countryCodes.reduce<Country[]>((result, countryCode) => {
+      const countryName = regionNamesInEnglish.of(countryCode);
+
+      if (!countryName) return result;
+
+      if (!hasFlag(countryCode)) return result;
+
+      const Flag = Flags[countryCode];
+
+      const callingCode = getCountryCallingCode(countryCode);
+
+      result.push({
+        countryCode,
+        countryName,
+        callingCode,
+        Flag,
+      });
+
+      return result;
+    }, []);
+  }, []);
+};

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx

@@ -1,19 +1,17 @@
-import { useEffect, useMemo, useState } from 'react';
-import { getCountries, getCountryCallingCode } from 'react-phone-number-input';
+import { useEffect, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { hasFlag } from 'country-flag-icons';
-import * as Flags from 'country-flag-icons/react/3x2';
-import { CountryCallingCode } from 'libphonenumber-js';
 
 import { IconChevronDown, IconWorld } from '@/ui/display/icon';
+import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
+import { Country } from '@/ui/input/components/internal/types/Country';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { isDefined } from '~/utils/isDefined';
 
 import { CountryPickerHotkeyScope } from '../types/CountryPickerHotkeyScope';
 
-import { CountryPickerDropdownSelect } from './CountryPickerDropdownSelect';
+import { PhoneCountryPickerDropdownSelect } from './PhoneCountryPickerDropdownSelect';
 
 import 'react-phone-number-input/style.css';
 
@@ -57,14 +55,7 @@ const StyledIconContainer = styled.div`
   }
 `;
 
-export type Country = {
-  countryCode: string;
-  countryName: string;
-  callingCode: CountryCallingCode;
-  Flag: Flags.FlagComponent;
-};
-
-export const CountryPickerDropdownButton = ({
+export const PhoneCountryPickerDropdownButton = ({
   value,
   onChange,
 }: {
@@ -82,34 +73,7 @@ export const CountryPickerDropdownButton = ({
     closeDropdown();
   };
 
-  const countries = useMemo<Country[]>(() => {
-    const regionNamesInEnglish = new Intl.DisplayNames(['en'], {
-      type: 'region',
-    });
-
-    const countryCodes = getCountries();
-
-    return countryCodes.reduce<Country[]>((result, countryCode) => {
-      const countryName = regionNamesInEnglish.of(countryCode);
-
-      if (!countryName) return result;
-
-      if (!hasFlag(countryCode)) return result;
-
-      const Flag = Flags[countryCode];
-
-      const callingCode = getCountryCallingCode(countryCode);
-
-      result.push({
-        countryCode,
-        countryName,
-        callingCode,
-        Flag,
-      });
-
-      return result;
-    }, []);
-  }, []);
+  const countries = useCountries();
 
   useEffect(() => {
     const country = countries.find(({ countryCode }) => countryCode === value);
@@ -132,7 +96,7 @@ export const CountryPickerDropdownButton = ({
         </StyledDropdownButtonContainer>
       }
       dropdownComponents={
-        <CountryPickerDropdownSelect
+        <PhoneCountryPickerDropdownSelect
           countries={countries}
           selectedCountry={selectedCountry}
           onChange={handleChange}

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 
+import { Country } from '@/ui/input/components/internal/types/Country';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
@@ -8,8 +9,6 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 
-import { Country } from './CountryPickerDropdownButton';
-
 import 'react-phone-number-input/style.css';
 
 const StyledIconContainer = styled.div`
@@ -27,7 +26,7 @@ const StyledIconContainer = styled.div`
   }
 `;
 
-export const CountryPickerDropdownSelect = ({
+export const PhoneCountryPickerDropdownSelect = ({
   countries,
   selectedCountry,
   onChange,

packages/twenty-front/src/modules/ui/input/components/internal/types/Country.ts

@@ -0,0 +1,9 @@
+import * as Flags from 'country-flag-icons/react/3x2';
+import { CountryCallingCode } from 'libphonenumber-js';
+
+export type Country = {
+  countryCode: string;
+  countryName: string;
+  callingCode: CountryCallingCode;
+  Flag: Flags.FlagComponent;
+};