add: currency-dropdown ui/components and icons

libs/features/settings/src/lib/GlobalSettings/CurrencyDropdownClient.tsx

@@ -1,10 +1,10 @@
+import { getCurrencyPreference, setCurrencyPreference } from '@next/currency';
 import { usePathname, useRouter } from '@next/navigation';
+import '@next/types';
 import { CurrencyDropdown, type CurrencyDropdownProps } from '@ui/components';
 import { Check } from '@ui/icons';
 import { useLocale } from 'next-intl';
 import { useMemo, useTransition } from 'react';
-import { setCurrencyPreference, getCurrencyPreference } from '@next/currency';
-import '@next/types';
 
 export interface CurrencyDropdownClientProps {
   currencySelectText: {

libs/ui/components/src/index.ts

@@ -47,6 +47,10 @@ export {
   CommandSeparator,
   CommandShortcut,
 } from './lib/command/Command';
+export {
+  CurrencyDropdown,
+  type CurrencyDropdownProps,
+} from './lib/currency-dropdown/CurrencyDropdown';
 export {
   Dialog,
   DialogContent,

libs/ui/components/src/lib/currency-dropdown/CurrencyDropdown.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { screen, userEvent } from '@storybook/testing-library';
+import { CurrencyDropdown } from './CurrencyDropdown';
+import { CurrencyDropdownExample, currencyItems } from './examples';
+
+const helperText = 'Select a language';
+
+const meta = {
+  title: 'Molecules/CurrencyDropdown',
+  component: CurrencyDropdown,
+  render: CurrencyDropdownExample,
+  args: {
+    items: currencyItems,
+    helperText,
+  },
+} satisfies Meta<typeof CurrencyDropdown>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const button = screen.getByRole('button');
+    await userEvent.hover(button);
+    // Check that the helper text is present
+    await screen.findByText((content, element) => {
+      return (
+        element?.getAttribute('data-state') === 'delayed-open' &&
+        content.includes(helperText)
+      );
+    });
+    await userEvent.click(button);
+    // Check that the language items are present
+    await screen.findByText('EUR');
+    await screen.findByText('USD');
+  },
+};

libs/ui/components/src/lib/currency-dropdown/CurrencyDropdown.tsx

@@ -0,0 +1,33 @@
+import { Button, ButtonProps } from '../button/Button';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+} from '../dropdown-menu/DropdownMenu';
+import {
+  DropdownMenuItems,
+  DropdownMenuItemsProps,
+} from '../dropdown-menu/DropdownMenuItems';
+
+import { CurrencySettings } from '@ui/icons';
+
+export interface CurrencyDropdownProps
+  extends DropdownMenuItemsProps,
+    ButtonProps {}
+
+export function CurrencyDropdown({ items, ...props }: CurrencyDropdownProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          aria-label={props.helperText as string}
+          icon={<CurrencySettings />}
+          {...props}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuItems items={items} className="w-auto" />
+    </DropdownMenu>
+  );
+}
+
+export default CurrencyDropdown;

libs/ui/components/src/lib/currency-dropdown/examples.tsx

@@ -0,0 +1,23 @@
+import { Check } from '@ui/icons';
+import { CurrencyDropdown, CurrencyDropdownProps } from './CurrencyDropdown';
+
+export const currencyItems: CurrencyDropdownProps['items'] = [
+  {
+    type: 'item',
+    text: 'EUR',
+    icon: <Check />,
+    disabled: true,
+  },
+  {
+    type: 'item',
+    text: 'USD',
+  },
+];
+
+export function CurrencyDropdownExample(props: CurrencyDropdownProps) {
+  return (
+    <div className="flex">
+      <CurrencyDropdown {...props} />
+    </div>
+  );
+}

libs/ui/icons/src/lib/icons.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react-icons/ai';
 import { BiCircle, BiHelpCircle, BiXCircle } from 'react-icons/bi';
 import {
+  BsCurrencyExchange,
   BsDownload,
   BsQrCode,
   BsQrCodeScan,
@@ -138,6 +139,14 @@ export const MenuActions: FC<IconProps> = (props) => (
   />
 );
 
+export const CurrencySettings: FC<IconProps> = (props) => (
+  <AccessibleIcon
+    IconComponent={BsCurrencyExchange}
+    label={'CurrencySettings'}
+    {...props}
+  />
+);
+
 export const Download: FC<IconProps> = (props) => (
   <AccessibleIcon IconComponent={BsDownload} label={'Download'} {...props} />
 );