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

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

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import { DateFilter } from '@components/DateFilter'
+import type { Timezone } from '@types'
+
+const mockTimezone: Timezone = {
+  countryCode: 'KW',
+  label: 'Kuwait (GMT+3)',
+  timezone: 'Asia/Kuwait',
+  offset: 3,
+}
+
+const meta: Meta<typeof DateFilter> = {
+  title: 'Components/Inputs/DateFilter',
+  component: DateFilter,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'Label displayed on the filter trigger' },
+    calendarMode: {
+      control: 'select',
+      options: ['gregorian', 'hijri'],
+      description: 'Calendar display mode',
+    },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof DateFilter>
+
+// ──────────────────────────────────────────────
+// Named wrapper components
+
+const DateFilterBase = () => {
+  const [dateRange, setDateRange] = useState<[Date, Date] | undefined>(undefined)
+  const [calendarMode, setCalendarMode] = useState<'gregorian' | 'hijri'>('gregorian')
+  const [timezone, setTimezone] = useState<Timezone | null>(null)
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', pt: 2 }}>
+      <DateFilter
+        title="Date"
+        dateRange={dateRange}
+        onDateRangeChange={(range) => setDateRange(range as [Date, Date])}
+        onConfirm={(range) => setDateRange(range)}
+        onClear={() => setDateRange(undefined)}
+        calendarMode={calendarMode}
+        onCalendarModeChange={setCalendarMode}
+        timezone={timezone}
+        onTimezoneChange={setTimezone}
+        browserTimezone="Asia/Kuwait"
+        defaultCountryTimezone={mockTimezone}
+        timezoneCountriesCodes={['KW', 'SA', 'AE', 'EG', 'JO']}
+      />
+    </Box>
+  )
+}
+
+const DateFilterPreSelected = () => {
+  const today = new Date()
+  const lastWeek = new Date(today)
+  lastWeek.setDate(today.getDate() - 7)
+
+  const [dateRange, setDateRange] = useState<[Date, Date] | undefined>([lastWeek, today])
+  const [calendarMode, setCalendarMode] = useState<'gregorian' | 'hijri'>('gregorian')
+  const [timezone, setTimezone] = useState<Timezone | null>(null)
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', pt: 2 }}>
+      <DateFilter
+        title="Date"
+        dateRange={dateRange}
+        onDateRangeChange={(range) => setDateRange(range as [Date, Date])}
+        onConfirm={(range) => setDateRange(range)}
+        onClear={() => setDateRange(undefined)}
+        calendarMode={calendarMode}
+        onCalendarModeChange={setCalendarMode}
+        timezone={timezone}
+        onTimezoneChange={setTimezone}
+        browserTimezone="Asia/Kuwait"
+        defaultCountryTimezone={mockTimezone}
+        timezoneCountriesCodes={['KW', 'SA', 'AE', 'EG', 'JO']}
+      />
+    </Box>
+  )
+}
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [dateRange, setDateRange] = useState<[Date, Date] | undefined>(undefined)
+const [timezone, setTimezone] = useState<Timezone | null>(null)
+
+<DateFilter
+  title="Date"
+  dateRange={dateRange}
+  onDateRangeChange={setDateRange}
+  onConfirm={setDateRange}
+  onClear={() => setDateRange(undefined)}
+  calendarMode="gregorian"
+  onCalendarModeChange={() => {}}
+  timezone={timezone}
+  onTimezoneChange={setTimezone}
+  browserTimezone="Asia/Kuwait"
+  defaultCountryTimezone={mockTimezone}
+  timezoneCountriesCodes={['KW', 'SA', 'AE']}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <DateFilterBase />,
+}
+
+export const WithDateRange: Story = {
+  name: 'with pre-selected date range',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const today = new Date()
+const lastWeek = new Date(today)
+lastWeek.setDate(today.getDate() - 7)
+
+const [dateRange, setDateRange] = useState<[Date, Date]>([lastWeek, today])
+
+<DateFilter dateRange={dateRange} onConfirm={setDateRange} ... />
+        `.trim(),
+      },
+    },
+  },
+  render: () => <DateFilterPreSelected />,
+}

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

@@ -0,0 +1,187 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import DropdownButton from '@components/DropdownButton'
+import type { MenuItemI } from '@components/DropdownMenu'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const makeMenuItems = (onSelect?: (label: string) => void): MenuItemI[] => [
+  {
+    label: 'Newest first',
+    onClick: () => onSelect?.('Newest first'),
+  },
+  {
+    label: 'Oldest first',
+    onClick: () => onSelect?.('Oldest first'),
+  },
+  {
+    name: 'divider',
+  },
+  {
+    label: 'Reset sorting',
+    onClick: () => onSelect?.('Reset sorting'),
+  },
+]
+
+const meta: Meta<typeof DropdownButton> = {
+  title: 'Components/Inputs/DropdownButton',
+  component: DropdownButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['active', 'inActive'],
+      description: 'Visual style of the button body',
+    },
+    label: { control: 'text' },
+    disabled: { control: 'boolean' },
+    dropdownOptions: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+    onButtonBodyClick: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', minHeight: 180, pt: 4 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof DropdownButton>
+
+export const Base: Story = {
+  args: {
+    variant: 'inActive',
+    label: 'Status',
+  },
+}
+
+export const Active: Story = {
+  args: {
+    variant: 'active',
+    label: 'Status',
+  },
+}
+
+export const WithDropdown: Story = {
+  args: {
+    variant: 'inActive',
+    label: 'Sort by',
+    dropdownOptions: makeMenuItems(),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    variant: 'inActive',
+    label: 'Disabled',
+    disabled: true,
+    dropdownOptions: makeMenuItems(),
+  },
+}
+
+type DropdownButtonOverride = Partial<Parameters<typeof DropdownButton>[0]>
+
+const tableColumns = ['STYLE', 'NO DROPDOWN', 'WITH DROPDOWN', 'DISABLED'] as const
+
+const variantRows: Array<{ label: string; cells: DropdownButtonOverride[] }> = [
+  {
+    label: 'InActive',
+    cells: [
+      { variant: 'inActive', label: 'Filter' },
+      { variant: 'inActive', label: 'Filter', dropdownOptions: makeMenuItems() },
+      { variant: 'inActive', label: 'Filter', dropdownOptions: makeMenuItems(), disabled: true },
+    ],
+  },
+  {
+    label: 'Active',
+    cells: [
+      { variant: 'active', label: 'Filter' },
+      { variant: 'active', label: 'Filter', dropdownOptions: makeMenuItems() },
+      { variant: 'active', label: 'Filter', dropdownOptions: makeMenuItems(), disabled: true },
+    ],
+  },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: (args) => {
+    const renderButton = (override: DropdownButtonOverride = {}) => <DropdownButton {...args} {...override} />
+
+    return (
+      <Box sx={{ maxWidth: 960, mx: 'auto' }}>
+        <StoryTable>
+          <StoryThead>
+            <StoryRow>
+              {tableColumns.map((header, index) => (
+                <StoryHeaderCell key={header} first={index === 0}>
+                  {header}
+                </StoryHeaderCell>
+              ))}
+            </StoryRow>
+          </StoryThead>
+
+          <StoryTbody>
+            {variantRows.map(({ label, cells }) => (
+              <StoryRow key={label}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                {cells.map((override, index) => (
+                  <StoryCell key={`${label}-${index}`}>{renderButton(override)}</StoryCell>
+                ))}
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Buttons with dropdown options show the chevron and open the menu on click.</StoryHint>
+      </Box>
+    )
+  },
+  args: {},
+}
+
+function InteractiveRender() {
+  const [lastSelection, setLastSelection] = useState('None')
+
+  return (
+    <Box sx={{ display: 'grid', gap: 1.5, justifyItems: 'center' }}>
+      <DropdownButton variant="active" label="Sort transactions" dropdownOptions={makeMenuItems(setLastSelection)} />
+      <Typography variant="caption" color="text.secondary">
+        Last selected: {lastSelection}
+      </Typography>
+    </Box>
+  )
+}
+
+export const Interactive: Story = {
+  name: 'interactive',
+  render: InteractiveRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [lastSelection, setLastSelection] = useState('None')
+
+<DropdownButton
+  variant="active"
+  label="Sort transactions"
+  dropdownOptions={[
+    { label: 'Newest first', onClick: () => setLastSelection('Newest first') },
+    { label: 'Oldest first', onClick: () => setLastSelection('Oldest first') },
+  ]}
+/>
+        `.trim(),
+      },
+    },
+  },
+}

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

@@ -0,0 +1,282 @@
+import { useMemo, useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import DropdownMenu, { type MenuItemI } from '@components/DropdownMenu'
+import { StoryFlexRow, StoryHint } from '@storybook-utils'
+
+const baseMenuItems: MenuItemI[] = [{ label: 'Newest first' }, { label: 'Oldest first' }, { name: 'divider' }, { label: 'Reset filters' }]
+
+const iconMenuItems: MenuItemI[] = [
+  { label: 'Open', icon: <span>O</span> },
+  { label: 'Duplicate', icon: <span>D</span> },
+  { label: 'Archive', icon: <span>A</span>, rightAction: <span>cmd+k</span> },
+]
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Components/Inputs/DropdownMenu',
+  component: DropdownMenu,
+  tags: ['autodocs'],
+  argTypes: {
+    open: { table: { disable: true } },
+    anchorEl: { table: { disable: true } },
+    menuItems: { table: { disable: true } },
+    onClose: { table: { disable: true } },
+    footer: { table: { disable: true } },
+    selected: { control: { type: 'number', min: 0, step: 1 } },
+    multiple: { control: 'boolean' },
+    allowShadows: { control: 'boolean' },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 4, minHeight: 220 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof DropdownMenu>
+
+function BaseRender() {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const [lastAction, setLastAction] = useState('None')
+
+  const open = Boolean(anchorEl)
+
+  const items = useMemo(
+    () =>
+      baseMenuItems.map((item) => ({
+        ...item,
+        onClick: () => {
+          if (item.label) {
+            setLastAction(String(item.label))
+          }
+          setAnchorEl(null)
+        },
+      })),
+    []
+  )
+
+  return (
+    <Box sx={{ display: 'grid', justifyItems: 'center', gap: 1.5 }}>
+      <Button variant="outlined" sx={{ minWidth: 160, height: 36 }} onClick={(e) => setAnchorEl(open ? null : e.currentTarget)}>
+        Toggle menu
+      </Button>
+
+      <DropdownMenu open={open} anchorEl={anchorEl} menuItems={items} onClose={() => setAnchorEl(null)} />
+
+      <Typography variant="caption" color="text.secondary">
+        Last action: {lastAction}
+      </Typography>
+    </Box>
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const open = Boolean(anchorEl)
+
+<Button onClick={(e) => setAnchorEl(open ? null : e.currentTarget)}>Toggle menu</Button>
+
+<DropdownMenu
+  open={open}
+  anchorEl={anchorEl}
+  menuItems={menuItems}
+  onClose={() => setAnchorEl(null)}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function WithIconsRender() {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <Box sx={{ display: 'grid', justifyItems: 'center', gap: 1.5 }}>
+      <Button variant="contained" sx={{ minWidth: 160, height: 36 }} onClick={(e) => setAnchorEl(open ? null : e.currentTarget)}>
+        Open icon menu
+      </Button>
+      <DropdownMenu open={open} anchorEl={anchorEl} menuItems={iconMenuItems} onClose={() => setAnchorEl(null)} />
+    </Box>
+  )
+}
+
+export const WithIcons: Story = {
+  name: 'with icons',
+  render: WithIconsRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const open = Boolean(anchorEl)
+
+const menuItems = [
+  { label: 'Open', icon: <OpenIcon /> },
+  { label: 'Duplicate', icon: <DuplicateIcon /> },
+  { label: 'Archive', icon: <ArchiveIcon />, rightAction: <span>cmd+k</span> },
+]
+
+<Button onClick={(e) => setAnchorEl(open ? null : e.currentTarget)}>Open icon menu</Button>
+
+<DropdownMenu
+  open={open}
+  anchorEl={anchorEl}
+  menuItems={menuItems}
+  onClose={() => setAnchorEl(null)}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function MultipleRender() {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const [selectedValues, setSelectedValues] = useState<string[]>(['success'])
+
+  const open = Boolean(anchorEl)
+
+  const options = useMemo(
+    () =>
+      [
+        { label: 'Success', value: 'success' },
+        { label: 'Failed', value: 'failed' },
+        { label: 'Pending', value: 'pending' },
+      ].map((option) => ({
+        label: option.label,
+        selected: selectedValues.includes(option.value),
+        onClick: () => {
+          setSelectedValues((prev) => {
+            if (prev.includes(option.value)) {
+              return prev.filter((value) => value !== option.value)
+            }
+
+            return [...prev, option.value]
+          })
+        },
+      })),
+    [selectedValues]
+  )
+
+  return (
+    <Box sx={{ display: 'grid', justifyItems: 'center', gap: 1.5 }}>
+      <Button variant="outlined" sx={{ minWidth: 160, height: 36 }} onClick={(e) => setAnchorEl(open ? null : e.currentTarget)}>
+        Open multi-select menu
+      </Button>
+      <DropdownMenu open={open} anchorEl={anchorEl} menuItems={options} multiple onClose={() => setAnchorEl(null)} />
+      <Typography variant="caption" color="text.secondary">
+        Selected: {selectedValues.join(', ') || 'none'}
+      </Typography>
+    </Box>
+  )
+}
+
+export const MultipleSelection: Story = {
+  name: 'multiple selection',
+  render: MultipleRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const [selected, setSelected] = useState<string[]>(['success'])
+const open = Boolean(anchorEl)
+
+const options = ['Success', 'Failed', 'Pending'].map((label) => ({
+  label,
+  selected: selected.includes(label.toLowerCase()),
+  onClick: () =>
+    setSelected((prev) =>
+      prev.includes(label.toLowerCase())
+        ? prev.filter((v) => v !== label.toLowerCase())
+        : [...prev, label.toLowerCase()]
+    ),
+}))
+
+<Button onClick={(e) => setAnchorEl(open ? null : e.currentTarget)}>Open multi-select menu</Button>
+
+<DropdownMenu
+  open={open}
+  anchorEl={anchorEl}
+  menuItems={options}
+  multiple
+  onClose={() => setAnchorEl(null)}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function AllVariantsRender() {
+  const [anchors, setAnchors] = useState<Record<string, HTMLElement | null>>({
+    basic: null,
+    icon: null,
+    multi: null,
+  })
+
+  const setAnchor = (key: keyof typeof anchors, value: HTMLElement | null) => {
+    setAnchors((prev) => ({ ...prev, [key]: value }))
+  }
+
+  return (
+    <Box sx={{ maxWidth: 860, mx: 'auto', display: 'grid', gap: 2.5 }}>
+      <StoryFlexRow sx={{ flexWrap: 'wrap', justifyContent: 'center' }}>
+        <Button variant="outlined" sx={{ minWidth: 140, height: 36 }} onClick={(e) => setAnchor('basic', anchors.basic ? null : e.currentTarget)}>
+          Basic
+        </Button>
+        <Button variant="outlined" sx={{ minWidth: 140, height: 36 }} onClick={(e) => setAnchor('icon', anchors.icon ? null : e.currentTarget)}>
+          Icon menu
+        </Button>
+        <Button variant="outlined" sx={{ minWidth: 140, height: 36 }} onClick={(e) => setAnchor('multi', anchors.multi ? null : e.currentTarget)}>
+          Multi-select
+        </Button>
+      </StoryFlexRow>
+
+      <DropdownMenu open={Boolean(anchors.basic)} anchorEl={anchors.basic} menuItems={baseMenuItems} onClose={() => setAnchor('basic', null)} />
+      <DropdownMenu
+        open={Boolean(anchors.icon)}
+        anchorEl={anchors.icon}
+        menuItems={iconMenuItems}
+        onClose={() => setAnchor('icon', null)}
+        allowShadows={false}
+      />
+      <DropdownMenu
+        open={Boolean(anchors.multi)}
+        anchorEl={anchors.multi}
+        menuItems={[{ label: 'Card' }, { label: 'Bank transfer' }, { label: 'Apple Pay' }]}
+        multiple
+        onClose={() => setAnchor('multi', null)}
+      />
+
+      <StoryHint>This story shows basic, icon, and multi-select menu modes side by side.</StoryHint>
+    </Box>
+  )
+}
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: AllVariantsRender,
+}