feat: add I18nSelector component

[lemagnetic]

What's the purpose of this pull request?

This PR implements a new I18nSelector component that allows users to select their preferred language and currency. The component provides a seamless experience across devices, using a Popover on desktop and a SlideOver on mobile. All UI texts are configurable through the CMS, making it easy for store administrators to customize the experience for their audience.

How it works?

The implementation consists of several key components and enhancements:

Core Components

1. I18nSelector Component (packages/core/src/components/i18n/I18nSelector/)

   • Responsive component that switches between Popover (desktop) and SlideOver (mobile) based on screen size
   • Manages language and currency selection state
   • Receives all content (languages, currencies, labels, descriptions) via props
   • Includes a reusable I18nSelectorContent subcomponent for the form fields

2. I18nButton Component (updated)

   • Button that triggers the I18nSelector
   • Displays current locale and currency (e.g., "EN/BRL")
   • Receives configuration from CMS via Navbar section
   • Uses default English texts when CMS values are not provided

Library Enhancements

3. Popover Component (enhanced)

   • Added optional portal rendering support via usePortal prop (default: false)
   • Added wrapperProps for customizing the portal wrapper div
   • Uses position: fixed when portal is enabled for accurate viewport positioning
   • Maintains backward compatibility with existing implementations

4. SlideOver Component (enhanced)

   • Added new bottomSide direction for bottom-to-top animations
   • Supports vertical slide animations with proper CSS transitions
   • Works seamlessly with existing leftSide and rightSide directions

CMS Integration

5. CMS Configuration (sections.json)
   • Added i18nSelector object in Navbar navigation schema
   • Configurable fields: title, languageLabel, currencyLabel, description, saveLabel
   • All fields have English defaults
   • Separate from i18nButton configuration for better organization

User Experience

• Desktop: Popover appears below the I18nButton with form fields and save button
• Mobile: SlideOver slides up from the bottom with header, content, and footer

How to test it?

Link Preview

Starters Deploy Preview

References

• Jira Issue: SFS-2889

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[hellofanny]

suggestion: How about using enablePortal instead for this prop?

Suggested change

	usePortal?: boolean
	enablePortal?: boolean

[hellofanny]

I was thinking.. what do you think of creating a new section to handle i18nSelector?
so we may use it separately later. Something similar on what we do for (region) RegionButton

[hellofanny]

question: Is this just for testing purposes right?

Because we already have this information in i18n in discovery.config.
We can retrieve this map from there...

[hellofanny]

👀 we don't have this fallback value pattern in our codebase. I'm not sure about introducing it now because it can mess with theming.. our current patterns seem to be, if not variable found, the default is used and the user might notice if different and add it. 🤔

[hellofanny]

I guess this was a test 🙈

Suggested change

	color: var(--palette-neutral-color-neutral-4, #999);
	color: var(--fs-color-neutral-4, #999);