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

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

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import type { DateObject } from 'react-multi-date-picker'
+import Calender from '@components/Calender'
+
+const meta: Meta<typeof Calender> = {
+  title: 'Components/Inputs/Calender',
+  component: Calender,
+  tags: ['autodocs'],
+  argTypes: {
+    isAr: { control: 'boolean', description: 'Switch to Arabic locale' },
+    enableTimePicker: { control: 'boolean', description: 'Show a time picker inside the calendar popover' },
+    placement: {
+      control: 'select',
+      options: ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+      description: 'Popper placement relative to the trigger button',
+    },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', pt: 4, minHeight: 200 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Calender>
+
+// ──────────────────────────────────────────────
+// Named wrapper components
+
+const CalenderBase = () => {
+  const [date, setDate] = useState<DateObject | undefined>(undefined)
+  return <Calender value={date} setValue={setDate} />
+}
+
+const CalenderWithTime = () => {
+  const [date, setDate] = useState<DateObject | undefined>(undefined)
+  return <Calender value={date} setValue={setDate} enableTimePicker />
+}
+
+const CalenderArabic = () => {
+  const [date, setDate] = useState<DateObject | undefined>(undefined)
+  return <Calender value={date} setValue={setDate} isAr />
+}
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [date, setDate] = useState<DateObject | undefined>(undefined)
+
+<Calender value={date} setValue={setDate} />
+        `.trim(),
+      },
+    },
+  },
+  render: () => <CalenderBase />,
+}
+
+export const WithTimePicker: Story = {
+  name: 'with time picker',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [date, setDate] = useState<DateObject | undefined>(undefined)
+
+<Calender value={date} setValue={setDate} enableTimePicker />
+        `.trim(),
+      },
+    },
+  },
+  render: () => <CalenderWithTime />,
+}
+
+export const Arabic: Story = {
+  name: 'arabic locale',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [date, setDate] = useState<DateObject | undefined>(undefined)
+
+<Calender value={date} setValue={setDate} isAr />
+        `.trim(),
+      },
+    },
+  },
+  render: () => <CalenderArabic />,
+}

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

@@ -0,0 +1,78 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Checkbox from '@components/Checkbox'
+import { StoryFlexRow, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Inputs/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+  argTypes: {
+    checked: { control: 'boolean' },
+    indeterminate: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+  },
+}
+
+const baseCheckboxSx = {
+  '& .MuiSvgIcon-root': {
+    width: '14px !important',
+    height: '14px !important',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Base: Story = {
+  args: { checked: false },
+}
+
+export const Checked: Story = {
+  args: { checked: true },
+}
+
+export const Indeterminate: Story = {
+  args: { indeterminate: true },
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+}
+
+// Disabled + checked renders the UNCHECKED icon — intentional component behaviour
+export const DisabledChecked: Story = {
+  name: 'Disabled (checked)',
+  args: { checked: true, disabled: true },
+}
+
+export const AllStates: Story = {
+  name: 'all variants',
+  render: () => (
+    <>
+      <StoryFlexRow spacing={1}>
+        <Checkbox checked={false} sx={() => baseCheckboxSx} />
+        <Checkbox checked />
+        <Checkbox indeterminate />
+        <Checkbox disabled />
+        <Checkbox checked disabled />
+      </StoryFlexRow>
+      <StoryHint>unchecked · checked · indeterminate · disabled · disabled (checked)</StoryHint>
+    </>
+  ),
+}

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

@@ -0,0 +1,160 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import ColorPicker from '@components/ColorPicker'
+import { StoryFlexRow, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof ColorPicker> = {
+  title: 'Components/Inputs/ColorPicker',
+  component: ColorPicker,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: 'color', description: 'Current color value (hex/hexa string)' },
+    disabled: { control: 'boolean' },
+
+    onChange: { table: { disable: true } },
+    onReset: { table: { disable: true } },
+    options: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 4 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ColorPicker>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  name: 'base',
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [color, setColor] = useState('#1976d2')
+    return <ColorPicker value={color} onChange={setColor} onReset={() => setColor('#1976d2')} />
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [color, setColor] = useState('#1976d2')
+
+<ColorPicker
+  value={color}
+  onChange={setColor}
+  onReset={() => setColor('#1976d2')}
+/>`.trim(),
+      },
+    },
+  },
+}
+
+export const NoAlpha: Story = {
+  name: 'no alpha',
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [color, setColor] = useState('#e53935')
+    return <ColorPicker value={color} onChange={setColor} options={{ disableAlpha: true }} />
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [color, setColor] = useState('#e53935')
+
+<ColorPicker
+  value={color}
+  onChange={setColor}
+  options={{ disableAlpha: true }}
+/>`.trim(),
+      },
+    },
+  },
+}
+
+export const NoReset: Story = {
+  name: 'no reset button',
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [color, setColor] = useState('#43a047')
+    return <ColorPicker value={color} onChange={setColor} options={{ hideReset: true }} />
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [color, setColor] = useState('#43a047')
+
+<ColorPicker
+  value={color}
+  onChange={setColor}
+  options={{ hideReset: true }}
+/>`.trim(),
+      },
+    },
+  },
+}
+
+export const Disabled: Story = {
+  render: () => <ColorPicker value="#9e9e9e" onChange={() => {}} disabled />,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `<ColorPicker value="#9e9e9e" onChange={() => {}} disabled />`,
+      },
+    },
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [c1, setC1] = useState('#1976d2')
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [c2, setC2] = useState('#e53935')
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [c3, setC3] = useState('#43a047')
+
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, alignItems: 'center' }}>
+        <StoryFlexRow spacing={3} sx={{ flexWrap: 'wrap', justifyContent: 'center' }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, alignItems: 'center' }}>
+            <Box sx={{ fontSize: '0.7rem', color: 'text.secondary', textTransform: 'uppercase' }}>Default</Box>
+            <ColorPicker value={c1} onChange={setC1} onReset={() => setC1('#1976d2')} />
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, alignItems: 'center' }}>
+            <Box sx={{ fontSize: '0.7rem', color: 'text.secondary', textTransform: 'uppercase' }}>No Alpha</Box>
+            <ColorPicker value={c2} onChange={setC2} options={{ disableAlpha: true }} />
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, alignItems: 'center' }}>
+            <Box sx={{ fontSize: '0.7rem', color: 'text.secondary', textTransform: 'uppercase' }}>No Reset</Box>
+            <ColorPicker value={c3} onChange={setC3} options={{ hideReset: true }} />
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, alignItems: 'center' }}>
+            <Box sx={{ fontSize: '0.7rem', color: 'text.secondary', textTransform: 'uppercase' }}>Disabled</Box>
+            <ColorPicker value="#9e9e9e" onChange={() => {}} disabled />
+          </Box>
+        </StoryFlexRow>
+        <StoryHint>Click "Edit" on any swatch to open the color picker panel.</StoryHint>
+      </Box>
+    )
+  },
+}

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

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import CopyImage from '@components/CopyImage'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof CopyImage> = {
+  title: 'Components/Inputs/CopyImage',
+  component: CopyImage,
+  tags: ['autodocs'],
+  argTypes: {
+    isCopyActive: { control: 'boolean', description: 'When true shows the green check (copied); false shows the copy icon' },
+  },
+  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 CopyImage>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Idle: Story = {
+  args: { isCopyActive: false, onClick: () => {} },
+}
+
+export const Copied: Story = {
+  args: { isCopyActive: true, onClick: () => {} },
+}
+
+// Named component so React hooks rules are satisfied
+const CopyImageInteractive = () => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const handleCopy = () => {
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
+
+  return <CopyImage isCopyActive={isCopied} onClick={handleCopy} />
+}
+
+export const Interactive: Story = {
+  name: 'interactive (click to copy)',
+  decorators: [],
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [isCopied, setIsCopied] = useState(false)
+
+const handleCopy = () => {
+  setIsCopied(true)
+  setTimeout(() => setIsCopied(false), 2000)
+}
+
+<CopyImage isCopyActive={isCopied} onClick={handleCopy} />
+        `.trim(),
+      },
+    },
+  },
+  render: () => <CopyImageInteractive />,
+}
+
+// ──────────────────────────────────────────────
+// 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>Idle</StoryRowLabel>
+            <StoryCell>
+              <CopyImage isCopyActive={false} onClick={() => {}} />
+            </StoryCell>
+          </StoryRow>
+          <StoryRow>
+            <StoryRowLabel>Copied</StoryRowLabel>
+            <StoryCell>
+              <CopyImage isCopyActive={true} onClick={() => {}} />
+            </StoryCell>
+          </StoryRow>
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Click the icon in the Interactive story to see the animated transition.</StoryHint>
+    </Box>
+  ),
+}

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

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import { CountryFilter } from '@components/CountryFilter'
+
+// Icon URLs — replace with locally-imported flag assets in production
+const countryOptions = [
+  { label: 'Kuwait', value: 'KW', icon: 'https://flagcdn.com/w20/kw.png' },
+  { label: 'Saudi Arabia', value: 'SA', icon: 'https://flagcdn.com/w20/sa.png' },
+  { label: 'UAE', value: 'AE', icon: 'https://flagcdn.com/w20/ae.png' },
+  { label: 'Egypt', value: 'EG', icon: 'https://flagcdn.com/w20/eg.png' },
+  { label: 'Jordan', value: 'JO', icon: 'https://flagcdn.com/w20/jo.png' },
+]
+
+const meta: Meta<typeof CountryFilter> = {
+  title: 'Components/Inputs/CountryFilter',
+  component: CountryFilter,
+  tags: ['autodocs'],
+  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 CountryFilter>
+
+// ──────────────────────────────────────────────
+// Named wrapper components
+
+const CountryFilterBase = () => {
+  const [selected, setSelected] = useState<string[]>([])
+
+  return (
+    <Box sx={{ width: 220, border: '1px solid #F2F2F2', borderRadius: 1 }}>
+      <CountryFilter countriesOptions={countryOptions} selectedCountries={selected} onCountriesChange={setSelected} />
+    </Box>
+  )
+}
+
+const CountryFilterPreSelected = () => {
+  const [selected, setSelected] = useState<string[]>(['KW', 'SA'])
+
+  return (
+    <Box sx={{ width: 220, border: '1px solid #F2F2F2', borderRadius: 1 }}>
+      <CountryFilter countriesOptions={countryOptions} selectedCountries={selected} onCountriesChange={setSelected} />
+    </Box>
+  )
+}
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [selected, setSelected] = useState<string[]>([])
+
+<CountryFilter
+  countriesOptions={countryOptions}
+  selectedCountries={selected}
+  onCountriesChange={setSelected}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <CountryFilterBase />,
+}
+
+export const PreSelected: Story = {
+  name: 'with pre-selected countries',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [selected, setSelected] = useState(['KW', 'SA'])
+
+<CountryFilter
+  countriesOptions={countryOptions}
+  selectedCountries={selected}
+  onCountriesChange={setSelected}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <CountryFilterPreSelected />,
+}

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

@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import { CurrencyFilter } from '@components/CurrencyFilter'
+
+const merchantCurrencies = [
+  { currencyCode: 'KWD' },
+  { currencyCode: 'SAR' },
+  { currencyCode: 'USD' },
+  { currencyCode: 'EUR' },
+  { currencyCode: 'AED' },
+]
+
+const meta: Meta<typeof CurrencyFilter> = {
+  title: 'Components/Inputs/CurrencyFilter',
+  component: CurrencyFilter,
+  tags: ['autodocs'],
+  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 CurrencyFilter>
+
+// ──────────────────────────────────────────────
+// Named wrapper components
+// CurrencyFilter is anchor-driven — it must be opened by an external element.
+
+const CurrencyFilterDemo = () => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const [selected, setSelected] = useState<string[]>([])
+
+  const handleClose = () => setAnchorEl(null)
+
+  return (
+    <Box>
+      <Button variant="outlined" onClick={(e) => setAnchorEl(e.currentTarget)}>
+        {`Currency filter${selected.length > 0 ? ` (${selected.length})` : ''}`}
+      </Button>
+      <CurrencyFilter
+        anchorEl={anchorEl}
+        setAnchorEl={setAnchorEl}
+        onCloseDropdown={handleClose}
+        merchantCurrencies={merchantCurrencies}
+        selectedCurrencies={selected}
+        onCurrenciesChange={(currencies) => setSelected(currencies ?? [])}
+        onConfirm={handleClose}
+      />
+    </Box>
+  )
+}
+
+const CurrencyFilterPreSelected = () => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const [selected, setSelected] = useState<string[]>(['KWD', 'USD'])
+
+  const handleClose = () => setAnchorEl(null)
+
+  return (
+    <Box>
+      <Button variant="outlined" onClick={(e) => setAnchorEl(e.currentTarget)}>
+        {`Currency filter (${selected.length})`}
+      </Button>
+      <CurrencyFilter
+        anchorEl={anchorEl}
+        setAnchorEl={setAnchorEl}
+        onCloseDropdown={handleClose}
+        merchantCurrencies={merchantCurrencies}
+        selectedCurrencies={selected}
+        onCurrenciesChange={(currencies) => setSelected(currencies ?? [])}
+        onConfirm={handleClose}
+      />
+    </Box>
+  )
+}
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const [selected, setSelected] = useState<string[]>([])
+
+<Button onClick={(e) => setAnchorEl(e.currentTarget)}>Currency filter</Button>
+
+<CurrencyFilter
+  anchorEl={anchorEl}
+  setAnchorEl={setAnchorEl}
+  onCloseDropdown={() => setAnchorEl(null)}
+  merchantCurrencies={[{ currencyCode: 'KWD' }, { currencyCode: 'SAR' }]}
+  selectedCurrencies={selected}
+  onCurrenciesChange={setSelected}
+  onConfirm={() => setAnchorEl(null)}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <CurrencyFilterDemo />,
+}
+
+export const PreSelected: Story = {
+  name: 'with pre-selected currencies',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [selected, setSelected] = useState(['KWD', 'USD'])
+
+<CurrencyFilter
+  anchorEl={anchorEl}
+  setAnchorEl={setAnchorEl}
+  onCloseDropdown={() => setAnchorEl(null)}
+  merchantCurrencies={merchantCurrencies}
+  selectedCurrencies={selected}
+  onCurrenciesChange={setSelected}
+  onConfirm={() => setAnchorEl(null)}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <CurrencyFilterPreSelected />,
+}