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

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

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import RangeCalender from '@components/RangeCalender'
+import type { Timezone } from '@types'
+
+const mockTimezone: Timezone = {
+  countryCode: 'KW',
+  label: 'Kuwait (GMT+3)',
+  timezone: 'Asia/Kuwait',
+  offset: 3,
+}
+
+const today = new Date()
+const lastWeek = new Date(today)
+lastWeek.setDate(today.getDate() - 7)
+
+const meta: Meta<typeof RangeCalender> = {
+  title: 'Components/Inputs/RangeCalender',
+  component: RangeCalender,
+  tags: ['autodocs'],
+  argTypes: {
+    noTimezone: { control: 'boolean', description: 'Hide the timezone selector' },
+    noQuickFilter: { control: 'boolean', description: 'Hide quick-filter shortcut buttons' },
+    mode: {
+      control: 'select',
+      options: ['gregorian', 'hijri'],
+      description: 'Calendar display mode',
+    },
+    numberOfMonths: {
+      control: 'radio',
+      options: [1, 2],
+      description: 'Number of calendar months shown at once',
+    },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof RangeCalender>
+
+// ──────────────────────────────────────────────
+// Named wrapper components
+
+const RangeCalenderBase = () => {
+  const [dates, setDates] = useState<[Date, Date]>([lastWeek, today])
+  const [timezone, setTimezone] = useState<Timezone | null>(null)
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', pt: 2 }}>
+      <RangeCalender
+        defaultDate={dates}
+        onDateChange={setDates}
+        timezone={timezone}
+        onChangeTimezone={setTimezone}
+        browserTimezone="Asia/Kuwait"
+        defaultCountryTimezone={mockTimezone}
+        timezoneCountriesCodes={['KW', 'SA', 'AE', 'EG', 'JO']}
+      />
+    </Box>
+  )
+}
+
+const RangeCalenderMinimal = () => {
+  const [dates, setDates] = useState<[Date, Date]>([lastWeek, today])
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', pt: 2 }}>
+      <RangeCalender
+        defaultDate={dates}
+        onDateChange={setDates}
+        timezone={null}
+        browserTimezone="Asia/Kuwait"
+        defaultCountryTimezone={mockTimezone}
+        timezoneCountriesCodes={[]}
+        noTimezone
+        noQuickFilter
+      />
+    </Box>
+  )
+}
+
+const RangeCalenderTwoMonths = () => {
+  const [dates, setDates] = useState<[Date, Date]>([lastWeek, today])
+  const [timezone, setTimezone] = useState<Timezone | null>(null)
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', pt: 2 }}>
+      <RangeCalender
+        defaultDate={dates}
+        onDateChange={setDates}
+        timezone={timezone}
+        onChangeTimezone={setTimezone}
+        browserTimezone="Asia/Kuwait"
+        defaultCountryTimezone={mockTimezone}
+        timezoneCountriesCodes={['KW', 'SA', 'AE']}
+        numberOfMonths={2}
+      />
+    </Box>
+  )
+}
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [dates, setDates] = useState<[Date, Date]>([lastWeek, today])
+const [timezone, setTimezone] = useState<Timezone | null>(null)
+
+<RangeCalender
+  defaultDate={dates}
+  onDateChange={setDates}
+  timezone={timezone}
+  onChangeTimezone={setTimezone}
+  browserTimezone="Asia/Kuwait"
+  defaultCountryTimezone={mockTimezone}
+  timezoneCountriesCodes={['KW', 'SA', 'AE']}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <RangeCalenderBase />,
+}
+
+export const Minimal: Story = {
+  name: 'without timezone and quick filters',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<RangeCalender
+  defaultDate={dates}
+  onDateChange={setDates}
+  timezone={null}
+  browserTimezone="Asia/Kuwait"
+  defaultCountryTimezone={mockTimezone}
+  timezoneCountriesCodes={[]}
+  noTimezone
+  noQuickFilter
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <RangeCalenderMinimal />,
+}
+
+export const TwoMonths: Story = {
+  name: 'two months side by side',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<RangeCalender
+  defaultDate={dates}
+  onDateChange={setDates}
+  timezone={timezone}
+  browserTimezone="Asia/Kuwait"
+  defaultCountryTimezone={mockTimezone}
+  timezoneCountriesCodes={['KW', 'SA', 'AE']}
+  numberOfMonths={2}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <RangeCalenderTwoMonths />,
+}

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

@@ -0,0 +1,87 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import SearchListInput from '@components/SearchListInput'
+
+const meta: Meta = {
+  title: 'Components/Inputs/SearchListInput',
+  component: SearchListInput,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { table: { disable: true } },
+    onSearchChange: { table: { disable: true } },
+    onSearchReset: { 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<{ initialValue?: string }>
+
+function BaseRender(args: { initialValue?: string }) {
+  const [value, setValue] = useState(args.initialValue ?? '')
+
+  return (
+    <Box sx={{ width: 320 }}>
+      <SearchListInput name="search" placeholder="Search by name" value={value} onSearchChange={setValue} onSearchReset={() => setValue('')} />
+    </Box>
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [value, setValue] = useState('')
+
+<SearchListInput
+  name="search"
+  placeholder="Search by name"
+  value={value}
+  onSearchChange={setValue}
+  onSearchReset={() => setValue('')}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const Prefilled: Story = {
+  render: BaseRender,
+  args: {
+    initialValue: 'Tap Payments',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [value, setValue] = useState('Tap Payments')
+
+<SearchListInput
+  name="search"
+  placeholder="Search by name"
+  value={value}
+  onSearchChange={setValue}
+  onSearchReset={() => setValue('')}
+/>
+        `.trim(),
+      },
+    },
+  },
+}

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

@@ -0,0 +1,153 @@
+import { useState, type MouseEvent } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import SelectDropdown from '@components/SelectDropdown'
+
+const options = ['All', 'Captured', 'Failed', 'Pending'] as const
+
+const meta: Meta<typeof SelectDropdown> = {
+  title: 'Components/Inputs/SelectDropdown',
+  component: SelectDropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    anchorEl: { table: { disable: true } },
+    children: { table: { disable: true } },
+    trigger: { table: { disable: true } },
+    onOpen: { table: { disable: true } },
+    onClose: { table: { disable: true } },
+    onClear: { 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 SelectDropdown>
+
+function BaseRender(args: { hideArrow?: boolean }) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const [selected, setSelected] = useState<(typeof options)[number]>('All')
+  const open = Boolean(anchorEl)
+
+  const handleOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleClear = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation()
+    setSelected('All')
+    handleClose()
+  }
+
+  const handleSelectOption = (option: (typeof options)[number]) => (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation()
+    setSelected(option)
+    handleClose()
+  }
+
+  return (
+    <Box sx={{ width: 280, border: '1px solid', borderColor: 'divider', borderRadius: 1, p: 1 }}>
+      <SelectDropdown
+        open={open}
+        anchorEl={anchorEl}
+        hideArrow={args.hideArrow}
+        hasValue={selected !== 'All'}
+        onOpen={handleOpen}
+        onClose={handleClose}
+        // @ts-ignore - to fix the type error for onClear, we can update the SelectDropdownProps to have a more specific type for onClear that includes the MouseEvent parameter
+        onClear={handleClear}
+        trigger={<Typography variant="body2">{selected}</Typography>}
+      >
+        <Box sx={{ p: 1, minWidth: 220, display: 'grid', gap: 0.5 }}>
+          {options.map((option) => (
+            <Box
+              key={option}
+              onClick={handleSelectOption(option)}
+              sx={{ px: 1, py: 0.75, borderRadius: 1, cursor: 'pointer', '&:hover': { backgroundColor: 'action.hover' } }}
+            >
+              <Typography variant="body2">{option}</Typography>
+            </Box>
+          ))}
+        </Box>
+      </SelectDropdown>
+    </Box>
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const [selected, setSelected] = useState('All')
+const open = Boolean(anchorEl)
+
+const handleClose = () => setAnchorEl(null)
+const handleClear = (event) => {
+  event.stopPropagation()
+  setSelected('All')
+  handleClose()
+}
+
+<SelectDropdown
+  open={open}
+  anchorEl={anchorEl}
+  hasValue={selected !== 'All'}
+  onOpen={(e) => setAnchorEl(e.currentTarget)}
+  onClose={handleClose}
+  onClear={handleClear}
+  trigger={<Typography variant="body2">{selected}</Typography>}
+>
+  <Box>...</Box>
+</SelectDropdown>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const WithoutArrow: Story = {
+  name: 'without arrow',
+  render: BaseRender,
+  args: {
+    hideArrow: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<SelectDropdown
+  open={open}
+  anchorEl={anchorEl}
+  hideArrow
+  hasValue={selected !== 'All'}
+  onOpen={(e) => setAnchorEl(e.currentTarget)}
+  onClose={() => setAnchorEl(null)}
+  trigger={<Typography variant="body2">{selected}</Typography>}
+>
+  <Box onClick={(event) => event.stopPropagation()}>...</Box>
+</SelectDropdown>
+        `.trim(),
+      },
+    },
+  },
+}

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

@@ -0,0 +1,290 @@
+import { useMemo, useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import SelectWithSearch, { type Option } from '@components/SelectWithSearch'
+import { StoryHint } from '@storybook-utils'
+
+const accountOptions: Option[] = [
+  { label: 'All accounts', value: 'all' },
+  { label: 'Main account', value: 'main' },
+  { label: 'Operations account', value: 'ops' },
+  { label: 'Settlement account', value: 'settlement' },
+  { label: 'Refund account', value: 'refund' },
+]
+
+const statusOptions: Option[] = [
+  { label: 'Success', value: 'success' },
+  { label: 'Failed', value: 'failed' },
+  { label: 'Pending', value: 'pending' },
+  { label: 'Voided', value: 'voided' },
+]
+
+const meta: Meta<typeof SelectWithSearch> = {
+  title: 'Components/Inputs/SelectWithSearch',
+  component: SelectWithSearch,
+  tags: ['autodocs'],
+  args: {
+    hideSelectedCheckmark: false,
+  },
+  argTypes: {
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    isLoading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    hideSelectedCheckmark: {
+      control: 'boolean',
+      description: 'When true, the selected option in the list does not show the blue checkmark icon.',
+    },
+    options: { table: { disable: true } },
+    selectedOption: { table: { disable: true } },
+    onChangeOption: { table: { disable: true } },
+    onClearValue: {
+      table: { disable: true },
+      description:
+        'Optional override when the trailing clear is clicked. If omitted, clear runs `onChangeOption(null)` and the chevron is replaced by the close icon while there is a value.',
+    },
+    renderOption: { table: { disable: true } },
+    iconUrl: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 4 }}>
+        <Box sx={{ width: 320 }}>
+          <Story />
+        </Box>
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof SelectWithSearch>
+
+function BaseRender(args: Story['args']) {
+  const [selectedOption, setSelectedOption] = useState<Option | null>(null)
+
+  return (
+    <SelectWithSearch
+      label="Account"
+      placeholder="Search account"
+      options={accountOptions}
+      selectedOption={selectedOption}
+      onChangeOption={setSelectedOption}
+      hideSelectedCheckmark={args?.hideSelectedCheckmark}
+    />
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [selectedOption, setSelectedOption] = useState<Option | null>(null)
+
+<SelectWithSearch
+  label="Account"
+  placeholder="Search account"
+  options={accountOptions}
+  selectedOption={selectedOption}
+  onChangeOption={setSelectedOption}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function WithInitialValueRender(args: Story['args']) {
+  const [selectedOption, setSelectedOption] = useState<Option | null>(accountOptions[1])
+
+  return (
+    <SelectWithSearch
+      label="Account"
+      placeholder="Search account"
+      options={accountOptions}
+      selectedOption={selectedOption}
+      onChangeOption={setSelectedOption}
+      hideSelectedCheckmark={args?.hideSelectedCheckmark}
+    />
+  )
+}
+
+export const WithInitialValue: Story = {
+  name: 'with initial value',
+  render: WithInitialValueRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [selectedOption, setSelectedOption] = useState<Option | null>(accountOptions[1])
+
+<SelectWithSearch
+  label="Account"
+  placeholder="Search account"
+  options={accountOptions}
+  selectedOption={selectedOption}
+  onChangeOption={setSelectedOption}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function LoadingRender(args: Story['args']) {
+  const [selectedOption, setSelectedOption] = useState<Option | null>(null)
+
+  return (
+    <SelectWithSearch
+      label="Transaction status"
+      placeholder="Search status"
+      options={statusOptions}
+      selectedOption={selectedOption}
+      isLoading
+      onChangeOption={setSelectedOption}
+      hideSelectedCheckmark={args?.hideSelectedCheckmark}
+    />
+  )
+}
+
+export const Loading: Story = {
+  render: LoadingRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [selectedOption, setSelectedOption] = useState<Option | null>(null)
+
+<SelectWithSearch
+  label="Transaction status"
+  placeholder="Search status"
+  options={statusOptions}
+  selectedOption={selectedOption}
+  isLoading
+  onChangeOption={setSelectedOption}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function DisabledRender(args: Story['args']) {
+  return (
+    <SelectWithSearch
+      label="Account"
+      placeholder="Search account"
+      options={accountOptions}
+      selectedOption={accountOptions[0]}
+      disabled
+      onChangeOption={() => {}}
+      onClearValue={() => {}}
+      hideSelectedCheckmark={args?.hideSelectedCheckmark}
+    />
+  )
+}
+
+export const Disabled: Story = {
+  render: DisabledRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<SelectWithSearch
+  label="Account"
+  placeholder="Search account"
+  options={accountOptions}
+  selectedOption={accountOptions[0]}
+  disabled
+  onChangeOption={() => {}}
+  onClearValue={() => {}}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function AllVariantsRender(args: Story['args']) {
+  const [selectedAccount, setSelectedAccount] = useState<Option | null>(accountOptions[0])
+  const [selectedStatus, setSelectedStatus] = useState<Option | null>(null)
+  const [selectedDisabled] = useState<Option | null>(accountOptions[2])
+
+  const helperText = useMemo(() => {
+    const account = selectedAccount?.label || 'None'
+    const status = selectedStatus?.label || 'None'
+
+    return `Selected account: ${account} | Selected status: ${status}`
+  }, [selectedAccount, selectedStatus])
+
+  return (
+    <Box sx={{ maxWidth: 860, mx: 'auto', display: 'grid', gap: 2.5 }}>
+      <Box sx={{ flexWrap: 'wrap', alignItems: 'flex-start' }}>
+        <Box sx={{ width: 260 }}>
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
+            Default
+          </Typography>
+          <SelectWithSearch
+            label="Account"
+            placeholder="Search account"
+            options={accountOptions}
+            selectedOption={selectedAccount}
+            onChangeOption={setSelectedAccount}
+            hideSelectedCheckmark={args?.hideSelectedCheckmark}
+          />
+        </Box>
+
+        <Box sx={{ width: 260, marginTop: '24px' }}>
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
+            Loading
+          </Typography>
+          <SelectWithSearch
+            label="Status"
+            placeholder="Search status"
+            options={statusOptions}
+            selectedOption={selectedStatus}
+            isLoading
+            onChangeOption={setSelectedStatus}
+            hideSelectedCheckmark={args?.hideSelectedCheckmark}
+          />
+        </Box>
+
+        <Box sx={{ width: 260, marginTop: '24px' }}>
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
+            Disabled
+          </Typography>
+          <SelectWithSearch
+            label="Read only"
+            placeholder="Search account"
+            options={accountOptions}
+            selectedOption={selectedDisabled}
+            disabled
+            onChangeOption={() => {}}
+            onClearValue={() => {}}
+            hideSelectedCheckmark={args?.hideSelectedCheckmark}
+          />
+        </Box>
+      </Box>
+
+      <StoryHint>{helperText}</StoryHint>
+    </Box>
+  )
+}
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: AllVariantsRender,
+}