@tap-payments/os-micro-frontend-shared 0.1.491 → 0.1.492-test.2

package/docs/stories/components/inputs/MerchantCurrencyDropdown.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import { MerchantCurrencyDropdown } from '@components/MerchantCurrencyDropdown'
+import type { Currency } from '@types'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+// The component only reads code.english and symbol — stub the rest for story purposes
+const currencies = [
+  { code: { english: 'KWD' }, symbol: 'KD' },
+  { code: { english: 'SAR' }, symbol: 'SR' },
+  { code: { english: 'USD' }, symbol: '$' },
+  { code: { english: 'EUR' }, symbol: '€' },
+] as unknown as Currency[]
+
+const meta: Meta<typeof MerchantCurrencyDropdown> = {
+  title: 'Components/Inputs/MerchantCurrencyDropdown',
+  component: MerchantCurrencyDropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    isLoading: { control: 'boolean', description: 'Show loading spinner instead of currency' },
+    isDisabled: { control: 'boolean', description: 'Prevent opening the dropdown' },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof MerchantCurrencyDropdown>
+
+// ──────────────────────────────────────────────
+// Named wrapper component for stateful story
+
+const MerchantCurrencyDropdownInteractive = ({ isLoading, isDisabled }: { isLoading?: boolean; isDisabled?: boolean }) => {
+  const [selected, setSelected] = useState<Currency>(currencies[0])
+  return (
+    <MerchantCurrencyDropdown
+      merchantCurrencies={currencies}
+      selectedCurrency={selected}
+      onChangeCurrency={setSelected}
+      isLoading={isLoading}
+      isDisabled={isDisabled}
+    />
+  )
+}
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: { isLoading: false, isDisabled: false },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [selected, setSelected] = useState(currencies[0])
+
+<MerchantCurrencyDropdown
+  merchantCurrencies={currencies}
+  selectedCurrency={selected}
+  onChangeCurrency={setSelected}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => <MerchantCurrencyDropdownInteractive isLoading={args.isLoading} isDisabled={args.isDisabled} />,
+}
+
+export const SingleCurrency: Story = {
+  name: 'single currency (no dropdown)',
+  args: { isLoading: false, isDisabled: false },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `<MerchantCurrencyDropdown merchantCurrencies={[currency]} selectedCurrency={currency} />`,
+      },
+    },
+  },
+  render: (args) => <MerchantCurrencyDropdown {...args} merchantCurrencies={[currencies[0]]} selectedCurrency={currencies[0]} />,
+}
+
+export const Empty: Story = {
+  name: 'empty (no currencies)',
+  args: { isLoading: false, isDisabled: false },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `<MerchantCurrencyDropdown merchantCurrencies={[]} />`,
+      },
+    },
+  },
+  render: (args) => <MerchantCurrencyDropdown {...args} merchantCurrencies={[]} />,
+}
+
+export const Loading: Story = {
+  args: { isLoading: true, isDisabled: false },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `<MerchantCurrencyDropdown merchantCurrencies={currencies} isLoading />`,
+      },
+    },
+  },
+  render: (args) => <MerchantCurrencyDropdown {...args} merchantCurrencies={currencies} selectedCurrency={currencies[0]} />,
+}
+
+export const Disabled: Story = {
+  args: { isLoading: false, isDisabled: true },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `<MerchantCurrencyDropdown merchantCurrencies={currencies} selectedCurrency={currencies[0]} isDisabled />`,
+      },
+    },
+  },
+  render: (args) => <MerchantCurrencyDropdown {...args} merchantCurrencies={currencies} selectedCurrency={currencies[0]} />,
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['STATE', 'PREVIEW'] as const
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: () => (
+    <Box sx={{ maxWidth: 960, mx: 'auto' }}>
+      <StoryTable sx={{ width: 'auto' }}>
+        <StoryThead>
+          <StoryRow>
+            {tableColumns.map((header, index) => (
+              <StoryHeaderCell key={header} first={index === 0}>
+                {header}
+              </StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          <StoryRow>
+            <StoryRowLabel>Multi (dropdown)</StoryRowLabel>
+            <StoryCell>
+              <MerchantCurrencyDropdownInteractive />
+            </StoryCell>
+          </StoryRow>
+          <StoryRow>
+            <StoryRowLabel>Single (static)</StoryRowLabel>
+            <StoryCell>
+              <MerchantCurrencyDropdown merchantCurrencies={[currencies[0]]} selectedCurrency={currencies[0]} />
+            </StoryCell>
+          </StoryRow>
+          <StoryRow>
+            <StoryRowLabel>Loading</StoryRowLabel>
+            <StoryCell>
+              <MerchantCurrencyDropdown merchantCurrencies={currencies} isLoading />
+            </StoryCell>
+          </StoryRow>
+          <StoryRow>
+            <StoryRowLabel>Disabled</StoryRowLabel>
+            <StoryCell>
+              <MerchantCurrencyDropdown merchantCurrencies={currencies} selectedCurrency={currencies[0]} isDisabled />
+            </StoryCell>
+          </StoryRow>
+          <StoryRow>
+            <StoryRowLabel>Empty</StoryRowLabel>
+            <StoryCell>
+              <MerchantCurrencyDropdown merchantCurrencies={[]} />
+            </StoryCell>
+          </StoryRow>
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Click the dropdown in the "Multi" row to select a different currency.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/inputs/MultiSelect.stories.tsx

@@ -0,0 +1,369 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import SvgIcon from '@mui/material/SvgIcon'
+import Typography from '@mui/material/Typography'
+import { FormProvider, useForm } from 'react-hook-form'
+
+import { MultiSelect } from '@components'
+
+type PlatformOption = {
+  id: string
+  label: string
+  sublabel?: string
+}
+
+const platformOptions: PlatformOption[] = [
+  { id: '1', label: 'Agelient Technologies', sublabel: 'Commerce Platform' },
+  { id: '2', label: 'Apple', sublabel: 'Commerce Platform' },
+  { id: '3', label: 'Artech LLC', sublabel: 'Commerce Platform' },
+  { id: '4', label: 'Artik Technologies', sublabel: 'Commerce Platform' },
+  { id: '5', label: 'Stripe', sublabel: 'Payment Platform' },
+  { id: '6', label: 'Adyen', sublabel: 'Payment Platform' },
+]
+
+type StoryFormValues = {
+  selection: PlatformOption[]
+}
+
+/** Custom dropdown arrow for `IconComponent` demos (MUI passes `className` for rotation when open). */
+function StoryChevronIcon({ className }: Readonly<{ className?: string }>) {
+  return (
+    <SvgIcon className={className} viewBox="0 0 24 24" fontSize="small" sx={{ color: 'text.secondary' }}>
+      <path d="M7 10l5 5 5-5H7z" />
+    </SvgIcon>
+  )
+}
+
+/** Alternate clear glyph for `ClearIconComponent` demos. */
+function StoryResetClearIcon({ className }: Readonly<{ className?: string }>) {
+  return (
+    <SvgIcon className={className} viewBox="0 0 24 24" sx={{ fontSize: 18 }}>
+      <path d="M12 5V1L7 6l5 5V7c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5H6c0 3.31 2.69 6 6 6s6-2.69 6-6-2.69-6-6-6z" />
+    </SvgIcon>
+  )
+}
+
+function FormWrapper({
+  children,
+  initialSelection = [platformOptions[0], platformOptions[3]],
+}: Readonly<{
+  children: React.ReactNode
+  initialSelection?: PlatformOption[]
+}>) {
+  const methods = useForm<StoryFormValues>({
+    defaultValues: {
+      selection: initialSelection,
+    },
+  })
+
+  return (
+    <FormProvider {...methods}>
+      <Box component="form" sx={{ width: 340 }} onSubmit={(e) => e.preventDefault()}>
+        {children}
+      </Box>
+    </FormProvider>
+  )
+}
+
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/Inputs/MultiSelect (RFH)',
+  component: MultiSelect,
+  tags: ['autodocs'],
+  args: {
+    label: 'Platform',
+    disabled: false,
+    required: false,
+    isLoading: false,
+    showSearchInput: false,
+    searchPlaceholder: 'Search platforms',
+    showCheckbox: true,
+    showClearIcon: false,
+  },
+  argTypes: {
+    label: { control: 'text' },
+    helperText: { control: 'text' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    showSearchInput: { control: 'boolean' },
+    searchPlaceholder: { control: 'text' },
+    showCheckbox: { control: 'boolean' },
+    showClearIcon: { control: 'boolean' },
+    IconComponent: { table: { disable: true } },
+    ClearIconComponent: { table: { disable: true } },
+    name: { table: { disable: true } },
+    options: { table: { disable: true } },
+    getOptionValue: { table: { disable: true } },
+    getOptionLabel: { table: { disable: true } },
+    renderOption: { table: { disable: true } },
+    getOptionDisabled: { table: { disable: true } },
+    isOptionEqualToValue: { table: { disable: true } },
+    MenuProps: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: {
+      expanded: true,
+      include: [
+        'label',
+        'helperText',
+        'disabled',
+        'required',
+        'isLoading',
+        'showSearchInput',
+        'searchPlaceholder',
+        'showCheckbox',
+        'showClearIcon',
+      ],
+    },
+    docs: {
+      description: {
+        component: [
+          'Multi-select bound to react-hook-form via `Controller`. Wrap with `FormProvider` and pass a field `name` that matches your form values (array of selected option objects).',
+          '',
+          '- **showSearchInput** / **searchPlaceholder**: filter options inside the menu.',
+          '- **showCheckbox**: toggle row checkboxes.',
+          '- **showClearIcon** / **ClearIconComponent**: clear all selections from the field adornment.',
+          '- **IconComponent**: replace the default MUI expand arrow.',
+        ].join('\n'),
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof MultiSelect>
+
+export const Base: Story = {
+  render: (args) => (
+    <FormWrapper>
+      <MultiSelect
+        {...args}
+        name="selection"
+        options={platformOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+      />
+    </FormWrapper>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const methods = useForm({ defaultValues: { selection: [] } })
+
+<FormProvider {...methods}>
+  <MultiSelect
+    name="selection"
+    label="Platform"
+    options={platformOptions}
+    getOptionValue={(opt) => opt.id}
+    getOptionLabel={(opt) => opt.label}
+  />
+</FormProvider>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const WithSearch: Story = {
+  args: {
+    showSearchInput: true,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <MultiSelect
+        {...args}
+        name="selection"
+        options={platformOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+      />
+    </FormWrapper>
+  ),
+}
+
+export const WithoutCheckbox: Story = {
+  args: {
+    showCheckbox: false,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <MultiSelect
+        {...args}
+        name="selection"
+        options={platformOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+      />
+    </FormWrapper>
+  ),
+}
+
+export const CustomOptionContent: Story = {
+  name: 'Custom option (renderOption)',
+  args: {
+    showSearchInput: true,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <MultiSelect
+        {...args}
+        name="selection"
+        options={platformOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+        renderOption={(option) => (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, width: '100%' }}>
+            <Box
+              sx={{
+                width: 24,
+                height: 24,
+                borderRadius: '50%',
+                bgcolor: 'grey.300',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 10,
+                fontWeight: 600,
+                color: 'grey.700',
+              }}
+            >
+              {(option.label ?? '').slice(0, 2).toUpperCase()}
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+              <Typography variant="body2" sx={{ fontSize: 12, fontWeight: 500 }}>
+                {option.label}
+              </Typography>
+              <Typography variant="caption" color="text.secondary" sx={{ fontSize: 10 }}>
+                {option.sublabel ?? 'Platform'}
+              </Typography>
+            </Box>
+          </Box>
+        )}
+      />
+    </FormWrapper>
+  ),
+}
+
+export const WithDisabledOptions: Story = {
+  args: {
+    showSearchInput: true,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <MultiSelect
+        {...args}
+        name="selection"
+        options={platformOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+        getOptionDisabled={(opt) => opt.id === '2' || opt.id === '6'}
+      />
+    </FormWrapper>
+  ),
+}
+
+export const WithClearIcon: Story = {
+  args: {
+    showClearIcon: true,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <MultiSelect
+        {...args}
+        name="selection"
+        options={platformOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+      />
+    </FormWrapper>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Clears the field to an empty array `[]`. The clear control is hidden when there is no selection, while loading, or when disabled.',
+      },
+    },
+  },
+}
+
+export const WithCustomIcons: Story = {
+  name: 'Custom IconComponent & ClearIconComponent',
+  args: {
+    showClearIcon: true,
+    showSearchInput: true,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <MultiSelect
+        {...args}
+        name="selection"
+        options={platformOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+        IconComponent={StoryChevronIcon}
+        ClearIconComponent={StoryResetClearIcon}
+      />
+    </FormWrapper>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pass any React element type MUI can render as the menu icon and as the clear button icon.',
+      },
+    },
+  },
+}
+
+export const ClearIconEmptyDefault: Story = {
+  name: 'Clear icon (starts empty)',
+  args: {
+    showClearIcon: true,
+  },
+  render: (args) => (
+    <FormWrapper initialSelection={[]}>
+      <MultiSelect
+        {...args}
+        name="selection"
+        options={platformOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+      />
+    </FormWrapper>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'No clear control until at least one option is selected.',
+      },
+    },
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <MultiSelect
+        {...args}
+        name="selection"
+        options={platformOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+      />
+    </FormWrapper>
+  ),
+}

package/docs/stories/components/inputs/MultiSelectWithSearch.stories.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import MultiSelectWithSearch from '@components/MultiSelectWithSearch'
+import type { MultiSelectWithSearchProps, Option } from '@components/MultiSelectWithSearch/type'
+
+const nestedOptions: MultiSelectWithSearchProps['nestedOptions'] = [
+  {
+    label: 'Payments',
+    options: [
+      {
+        label: 'Methods',
+        options: [
+          { label: 'Card', value: 'card' },
+          { label: 'Apple Pay', value: 'apple_pay' },
+          { label: 'KNET', value: 'knet' },
+        ],
+      },
+      {
+        label: 'Status',
+        options: [
+          { label: 'Captured', value: 'captured' },
+          { label: 'Failed', value: 'failed' },
+        ],
+      },
+    ],
+  },
+]
+
+const meta: Meta<typeof MultiSelectWithSearch> = {
+  title: 'Components/Inputs/MultiSelectWithSearch',
+  component: MultiSelectWithSearch,
+  tags: ['autodocs'],
+  argTypes: {
+    nestedOptions: { table: { disable: true } },
+    selectedOptions: { table: { disable: true } },
+    onChangeOptions: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof MultiSelectWithSearch>
+
+function BaseRender(args: Partial<MultiSelectWithSearchProps>) {
+  const [selectedOptions, setSelectedOptions] = useState<Option[]>([])
+
+  return (
+    <Box sx={{ width: 340 }}>
+      <MultiSelectWithSearch
+        nestedOptions={nestedOptions}
+        selectedOptions={selectedOptions}
+        onChangeOptions={setSelectedOptions}
+        placeholder={args.placeholder ?? 'Search options'}
+        isLoading={args.isLoading}
+        disabled={args.disabled}
+      />
+    </Box>
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [selectedOptions, setSelectedOptions] = useState<Option[]>([])
+
+<MultiSelectWithSearch
+  nestedOptions={nestedOptions}
+  selectedOptions={selectedOptions}
+  onChangeOptions={setSelectedOptions}
+  placeholder="Search options"
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const Loading: Story = {
+  render: BaseRender,
+  args: {
+    isLoading: true,
+    placeholder: 'Searching...',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [selectedOptions, setSelectedOptions] = useState<Option[]>([])
+
+<MultiSelectWithSearch
+  nestedOptions={nestedOptions}
+  selectedOptions={selectedOptions}
+  onChangeOptions={setSelectedOptions}
+  placeholder="Searching..."
+  isLoading
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const Disabled: Story = {
+  render: BaseRender,
+  args: {
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<MultiSelectWithSearch
+  nestedOptions={nestedOptions}
+  selectedOptions={[]}
+  onChangeOptions={() => {}}
+  placeholder="Search options"
+  disabled
+/>
+        `.trim(),
+      },
+    },
+  },
+}