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

package/docs/stories/components/TooltipChip.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import { TooltipChip } from '@components/TooltipChip'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof TooltipChip> = {
+  title: 'Components/TooltipChip',
+  component: TooltipChip,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'Tooltip content shown on hover' },
+    children: { control: 'text', description: 'Label displayed inside the chip' },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', minHeight: 80 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof TooltipChip>
+
+// ──────────────────────────────────────────────
+// Focused / named stories
+
+export const Base: Story = {
+  args: {
+    title: 'Tooltip content',
+    children: 'Hover me',
+  },
+}
+
+export const LongLabel: Story = {
+  args: {
+    title: 'This is a longer tooltip with more detail',
+    children: 'Transaction ID: abc123',
+  },
+}
+
+export const RichTooltip: Story = {
+  args: {
+    title: (
+      <Box>
+        <strong>Status:</strong> Captured
+        <br />
+        <span>Last updated: Today</span>
+      </Box>
+    ),
+    children: 'Status info',
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['USE CASE', 'CHIP'] as const
+
+const rows: Array<{ label: string; title: string; content: string }> = [
+  { label: 'Short label', title: 'Short tooltip', content: 'Label' },
+  { label: 'Transaction ID', title: 'Click to copy the full ID', content: 'abc123...xyz' },
+  { label: 'Status', title: 'Payment was captured successfully', content: 'CAPTURED' },
+  { label: 'Error code', title: 'Insufficient funds — contact your bank', content: 'ERR-402' },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: () => (
+    <Box sx={{ maxWidth: 640, mx: 'auto' }}>
+      <StoryTable>
+        <StoryThead>
+          <StoryRow>
+            {tableColumns.map((header, index) => (
+              <StoryHeaderCell key={header} first={index === 0}>
+                {header}
+              </StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          {rows.map(({ label, title, content }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <TooltipChip title={title}>{content}</TooltipChip>
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Hover any chip to see its tooltip. The title prop accepts any ReactNode.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/WindowAppIcon.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import WindowAppIcon from '@components/WindowAppIcon'
+
+const meta: Meta<typeof WindowAppIcon> = {
+  title: 'Components/WindowAppIcon',
+  component: WindowAppIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    icon: { control: 'text' },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof WindowAppIcon>
+
+export const Brand: Story = {
+  args: {
+    title: 'Brand',
+    icon: 'brand',
+  },
+  render: (args) => (
+    <Box sx={{ width: 180 }}>
+      <WindowAppIcon {...args} />
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<WindowAppIcon title="Brand" icon="brand" />
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const CustomIconUrl: Story = {
+  name: 'custom icon url',
+  args: {
+    title: 'Custom app',
+    icon: 'https://dummyimage.com/32x32/1976d2/ffffff.png&text=A',
+  },
+  render: (args) => (
+    <Box sx={{ width: 180 }}>
+      <WindowAppIcon {...args} />
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<WindowAppIcon
+  title="Custom app"
+  icon="https://dummyimage.com/32x32/1976d2/ffffff.png&text=A"
+/>
+        `.trim(),
+      },
+    },
+  },
+}

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

@@ -0,0 +1,125 @@
+import { 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 { CurrencyCodes } from '@types'
+import ActionMenu from '@components/ActionMenu'
+import type { ActionMenuProps } from '@components/ActionMenu/type'
+
+const options: NonNullable<ActionMenuProps['options']> = [
+  { name: 'KWD', value: 24.5, currency: CurrencyCodes.KWD },
+  { name: 'SAR', value: 302.1, currency: CurrencyCodes.SAR },
+]
+
+const meta: Meta<typeof ActionMenu> = {
+  title: 'Components/Inputs/ActionMenu',
+  component: ActionMenu,
+  tags: ['autodocs'],
+  argTypes: {
+    anchorEl: { table: { disable: true } },
+    handleClose: { table: { disable: true } },
+    onConfirm: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'centered',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ActionMenu>
+
+function BaseRender(args: Partial<ActionMenuProps>) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const [confirmed, setConfirmed] = useState('No amount confirmed yet')
+
+  return (
+    <Box sx={{ display: 'grid', gap: 1.5 }}>
+      <Button variant="outlined" onClick={(e) => setAnchorEl(e.currentTarget)}>
+        Open action menu
+      </Button>
+      <Typography variant="caption" color="text.secondary">
+        {confirmed}
+      </Typography>
+
+      <ActionMenu
+        anchorEl={anchorEl}
+        initialAmount={24.5}
+        currency={CurrencyCodes.KWD}
+        options={options}
+        isCheckMarkHighlighted={args.isCheckMarkHighlighted}
+        handleClose={() => setAnchorEl(null)}
+        onConfirm={(amount, currency) => {
+          setConfirmed(`Confirmed amount: ${amount} ${currency}`)
+        }}
+      />
+    </Box>
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const [confirmed, setConfirmed] = useState('No amount confirmed yet')
+
+<Button variant="outlined" onClick={(e) => setAnchorEl(e.currentTarget)}>
+  Open action menu
+</Button>
+
+<ActionMenu
+  anchorEl={anchorEl}
+  initialAmount={24.5}
+  currency={CurrencyCodes.KWD}
+  options={options}
+  handleClose={() => setAnchorEl(null)}
+  onConfirm={(amount, currency) => {
+    setConfirmed('Confirmed amount: ' + amount + ' ' + currency)
+  }}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const HighlightedCheck: Story = {
+  name: 'highlighted check',
+  render: BaseRender,
+  args: {
+    isCheckMarkHighlighted: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const [confirmed, setConfirmed] = useState('No amount confirmed yet')
+
+<Button variant="outlined" onClick={(e) => setAnchorEl(e.currentTarget)}>
+  Open action menu
+</Button>
+
+<ActionMenu
+  anchorEl={anchorEl}
+  initialAmount={24.5}
+  currency={CurrencyCodes.KWD}
+  options={options}
+  isCheckMarkHighlighted
+  handleClose={() => setAnchorEl(null)}
+  onConfirm={(amount, currency) => {
+    setConfirmed('Confirmed amount: ' + amount + ' ' + currency)
+  }}
+/>
+        `.trim(),
+      },
+    },
+  },
+}

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

@@ -0,0 +1,103 @@
+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 type { Currency } from '@types'
+import AmountInput from '@components/AmountInput'
+
+const selectedCurrency: Currency = {
+  created: 0,
+  updated: 0,
+  currencyId: 'kwd',
+  name: { created: 0, updated: 0, textId: 'KWD', english: 'Kuwaiti Dinar' },
+  code: { created: 0, updated: 0, textId: 'KWD', english: 'KWD' },
+  decimals: 3,
+  country: 'Kuwait',
+  symbol: 'KD',
+  logo: '',
+}
+
+const meta: Meta<typeof AmountInput> = {
+  title: 'Components/Inputs/AmountInput',
+  component: AmountInput,
+  tags: ['autodocs'],
+  argTypes: {
+    amount: { table: { disable: true } },
+    setAmount: { table: { disable: true } },
+    selectedCurrency: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'centered',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AmountInput>
+
+function BaseRender(args: { maxAmount?: number; isError?: boolean }) {
+  const [amount, setAmount] = useState<number>(12.5)
+
+  return (
+    <Box sx={{ display: 'grid', gap: 1.5 }}>
+      <Box sx={{ width: 260 }}>
+        <AmountInput
+          amount={amount}
+          setAmount={(value) => setAmount(value || 0)}
+          maxAmount={args.maxAmount}
+          isError={args.isError}
+          selectedCurrency={selectedCurrency}
+        />
+      </Box>
+      <Typography variant="caption" color="text.secondary">
+        Amount: {amount}
+      </Typography>
+    </Box>
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [amount, setAmount] = useState(12.5)
+
+<AmountInput
+  amount={amount}
+  setAmount={(value) => setAmount(value || 0)}
+  selectedCurrency={selectedCurrency}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const WithMaxAmount: Story = {
+  name: 'with max amount',
+  render: BaseRender,
+  args: {
+    maxAmount: 50,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [amount, setAmount] = useState(12.5)
+
+<AmountInput
+  amount={amount}
+  setAmount={(value) => setAmount(value || 0)}
+  maxAmount={50}
+  selectedCurrency={selectedCurrency}
+/>
+        `.trim(),
+      },
+    },
+  },
+}

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

@@ -0,0 +1,209 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import { Autocomplete } from '@components/Autocomplete'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const fruitOptions = ['Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry', 'Fig', 'Grape']
+
+const meta: Meta<typeof Autocomplete> = {
+  title: 'Components/Inputs/Autocomplete',
+  component: Autocomplete,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text', description: 'Label shown inside the text field' },
+    disabled: { control: 'boolean' },
+    multiple: { control: 'boolean', description: 'Allow multiple selections' },
+    freeSolo: { control: 'boolean', description: 'Allow arbitrary input values' },
+  },
+  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 Autocomplete>
+
+// ──────────────────────────────────────────────
+// Named wrapper components (required so React hooks rules are satisfied)
+
+const AutocompleteBase = () => {
+  const [value, setValue] = useState<string | null>(null)
+  return <Autocomplete label="Fruit" options={fruitOptions} value={value} onChange={(_, v) => setValue(v as string | null)} sx={{ width: 300 }} />
+}
+
+const AutocompleteMultiple = () => {
+  const [value, setValue] = useState<string[]>([])
+  return (
+    <Autocomplete label="Fruits" options={fruitOptions} value={value} onChange={(_, v) => setValue(v as string[])} multiple sx={{ width: 300 }} />
+  )
+}
+
+const AutocompleteFreeSolo = () => {
+  const [value, setValue] = useState<string | null>(null)
+  return (
+    <Autocomplete
+      label="Type anything"
+      options={fruitOptions}
+      value={value}
+      onChange={(_, v) => setValue(v as string | null)}
+      freeSolo
+      sx={{ width: 300 }}
+    />
+  )
+}
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [value, setValue] = useState<string | null>(null)
+
+<Autocomplete
+  label="Fruit"
+  options={['Apple', 'Banana', 'Cherry']}
+  value={value}
+  onChange={(_, v) => setValue(v)}
+  sx={{ width: 300 }}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <AutocompleteBase />,
+}
+
+export const Multiple: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [value, setValue] = useState<string[]>([])
+
+<Autocomplete
+  label="Fruits"
+  options={fruitOptions}
+  value={value}
+  onChange={(_, v) => setValue(v)}
+  multiple
+  sx={{ width: 300 }}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <AutocompleteMultiple />,
+}
+
+export const FreeSolo: Story = {
+  name: 'free solo',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [value, setValue] = useState<string | null>(null)
+
+<Autocomplete
+  label="Type anything"
+  options={fruitOptions}
+  value={value}
+  onChange={(_, v) => setValue(v)}
+  freeSolo
+  sx={{ width: 300 }}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <AutocompleteFreeSolo />,
+}
+
+export const Disabled: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Autocomplete
+  label="Fruit"
+  options={fruitOptions}
+  value={null}
+  onChange={() => {}}
+  disabled
+  sx={{ width: 300 }}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <Autocomplete label="Fruit" options={fruitOptions} value={null} onChange={() => {}} disabled sx={{ width: 300 }} />,
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['VARIANT', 'PREVIEW'] as const
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: () => (
+    <Box sx={{ maxWidth: 960, mx: 'auto' }}>
+      <StoryTable>
+        <StoryThead>
+          <StoryRow>
+            {tableColumns.map((header, index) => (
+              <StoryHeaderCell key={header} first={index === 0}>
+                {header}
+              </StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          <StoryRow>
+            <StoryRowLabel>Single</StoryRowLabel>
+            <StoryCell>
+              <AutocompleteBase />
+            </StoryCell>
+          </StoryRow>
+          <StoryRow>
+            <StoryRowLabel>Multiple</StoryRowLabel>
+            <StoryCell>
+              <AutocompleteMultiple />
+            </StoryCell>
+          </StoryRow>
+          <StoryRow>
+            <StoryRowLabel>Free Solo</StoryRowLabel>
+            <StoryCell>
+              <AutocompleteFreeSolo />
+            </StoryCell>
+          </StoryRow>
+          <StoryRow>
+            <StoryRowLabel>Disabled</StoryRowLabel>
+            <StoryCell>
+              <Autocomplete label="Fruit" options={fruitOptions} value={null} onChange={() => {}} disabled sx={{ width: 300 }} />
+            </StoryCell>
+          </StoryRow>
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Use the Controls panel to explore additional MUI Autocomplete props.</StoryHint>
+    </Box>
+  ),
+}