Add address composite form field

[thomtrp]

• Create FormCountrySelectInput using the existing FormSelectFieldInput
• Create AddressFormFieldInput component
• Fix FormSelectFieldInput dropdown + add leftIcon

[greptile-apps]

PR Summary

This PR adds comprehensive address form field functionality with country selection support. Here's a concise summary of the key changes:

• Created new FormAddressFieldInput component with fields for street address, city, state, postal code and country
• Added FormCountrySelectInput with flag icons and country selection dropdown
• Modified FormSelectFieldInput to support icons and transparent backgrounds for country selection
• Updated Tag and MenuItemSelectTag components to handle country flag icons and transparent backgrounds
• Potential issue: Using countryName instead of countryCode in FormCountrySelectInput could cause internationalization problems

The implementation appears solid overall but should consider using countryCode as the value identifier for better data consistency and internationalization support.

_{14 file(s) reviewed, 16 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: Flag component is being recreated on every render. Consider memoizing the icon function or moving it outside the map.

[Devessier]

Instead, I would create a wrapper component outside of the FormCountrySelectInput. Here, we'll recreate the React component on every render unecessarily.

const FlagIcon = (props: IconComponentProps) => {
  return Flag({ width: props.size, height: props.size })
}

// ...

icon: FlagIcon,

[thomtrp]

Flag comes from useCountries. It cannot be extracted. I cannot memoize either because this is inside a function

[Devessier]

Understandable. I didn't see where the Flag function was coming from!

[Devessier]

Great work! Works well. We can merge.

[Devessier]

Dissociating the field definition from the input is excellent. I'm unsure if it will "scale" well as the other fields make extensive use of the useNumberField-like functions and get access to the field definition that way.

[thomtrp]

let's see. If it becomes too complex we will still be able to come back to full field!

[Devessier]

Instead, I would create a wrapper component outside of the FormCountrySelectInput. Here, we'll recreate the React component on every render unecessarily.

const FlagIcon = (props: IconComponentProps) => {
  return Flag({ width: props.size, height: props.size })
}

// ...

icon: FlagIcon,

[Devessier]

I don't know much about addresses, but are we sure we want to store an empty string vs. null?

[thomtrp]

yep default values have to be string