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

package/docs/stories/components/CountBadge.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import CountBadge from '@components/CountBadge'
+import { BadgeVariants } from '@components/CountBadge/type'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof CountBadge> = {
+  title: 'Components/CountBadge',
+  component: CountBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.values(BadgeVariants),
+      description: 'Color variant of the badge',
+    },
+    compact: { control: 'boolean', description: 'Smaller padding' },
+    round: { control: 'boolean', description: 'Fully rounded pill shape' },
+    pointer: { control: 'boolean', description: 'Shows pointer cursor' },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 2 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof CountBadge>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: { variant: BadgeVariants.DEFAULT, children: '12' },
+}
+
+export const Compact: Story = {
+  args: { variant: BadgeVariants.PRIMARY, compact: true, children: '5' },
+}
+
+export const Round: Story = {
+  args: { variant: BadgeVariants.DARK, round: true, children: '99' },
+}
+
+export const Inactive: Story = {
+  args: { variant: BadgeVariants.INACTIVE, children: '0' },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['VARIANT', 'DEFAULT', 'COMPACT', 'ROUND'] as const
+
+const variantRows: Array<{ label: string; variant: BadgeVariants }> = [
+  { label: 'Default', variant: BadgeVariants.DEFAULT },
+  { label: 'Primary', variant: BadgeVariants.PRIMARY },
+  { label: 'Secondary', variant: BadgeVariants.SECONDARY },
+  { label: 'Dark', variant: BadgeVariants.DARK },
+  { label: 'Inactive', variant: BadgeVariants.INACTIVE },
+  { label: 'Active', variant: BadgeVariants.ACTIVE },
+  { label: 'Neutral', variant: BadgeVariants.NEUTRAL },
+  { label: 'Gray', variant: BadgeVariants.GRAY },
+  { label: 'Orange', variant: BadgeVariants.ORANGE },
+  { label: 'Red', variant: BadgeVariants.RED },
+]
+
+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>
+          {variantRows.map(({ label, variant }) => (
+            <StoryRow key={variant}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <CountBadge variant={variant}>42</CountBadge>
+              </StoryCell>
+              <StoryCell>
+                <CountBadge variant={variant} compact>
+                  42
+                </CountBadge>
+              </StoryCell>
+              <StoryCell>
+                <CountBadge variant={variant} round>
+                  42
+                </CountBadge>
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Use the Controls panel to change variant, compact, and round props.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/CountryFlag.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import CountryFlag from '@components/CountryFlag'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof CountryFlag> = {
+  title: 'Components/CountryFlag',
+  component: CountryFlag,
+  tags: ['autodocs'],
+  argTypes: {
+    countryCode: { control: 'text', description: 'ISO 3166-1 alpha-2 country code (e.g. "US", "GB")' },
+    currencyCode: { control: 'text', description: 'ISO 4217 currency code (e.g. "USD", "EUR")' },
+    width: { control: 'number', description: 'Width in px (default 16)' },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 2 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof CountryFlag>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const ByCountryCode: Story = {
+  name: 'by country code',
+  args: { countryCode: 'KW', width: 24 },
+}
+
+export const ByCurrencyCode: Story = {
+  name: 'by currency code',
+  args: { currencyCode: 'BHD', width: 24 },
+}
+
+export const FallbackOnUnknown: Story = {
+  name: 'fallback on unknown code',
+  args: { countryCode: 'XX', width: 24 },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const commonCountries: Array<{ label: string; code: string }> = [
+  { label: 'Saudi Arabia', code: 'SA' },
+  { label: 'United Arab Emirates', code: 'AE' },
+]
+
+const sizeOptions = [16, 24, 32] as const
+
+export const AllFlags: Story = {
+  name: 'all flags',
+  decorators: [],
+  render: () => (
+    <Box sx={{ maxWidth: 640, mx: 'auto' }}>
+      <StoryTable>
+        <StoryThead>
+          <StoryRow>
+            <StoryHeaderCell first>COUNTRY</StoryHeaderCell>
+            {sizeOptions.map((size) => (
+              <StoryHeaderCell key={size}>{size}px</StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          {commonCountries.map(({ label, code }) => (
+            <StoryRow key={code}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              {sizeOptions.map((size) => (
+                <StoryCell key={size}>
+                  <CountryFlag countryCode={code} width={size} />
+                </StoryCell>
+              ))}
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Falls back to a default icon when the country code is unrecognised.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/CurrencySymbol.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import CurrencySymbol from '@components/CurrencySymbol'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof CurrencySymbol> = {
+  title: 'Components/CurrencySymbol',
+  component: CurrencySymbol,
+  tags: ['autodocs'],
+  argTypes: {
+    currency: { control: 'text', description: 'ISO 4217 currency code (e.g. "SAR", "AED")' },
+    fontSize: { control: 'number', description: 'Icon height in px' },
+    color: { control: 'color', description: 'Tint color — uses CSS mask when set' },
+  },
+  args: {
+    currency: 'SAR',
+    fontSize: 16,
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 2 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof CurrencySymbol>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const SAR: Story = {
+  args: { currency: 'SAR' },
+}
+
+export const AED: Story = {
+  args: { currency: 'AED' },
+}
+
+export const WithColor: Story = {
+  name: 'with color tint',
+  args: { currency: 'SAR', color: '#1976d2', fontSize: 20 },
+}
+
+export const Unknown: Story = {
+  name: 'unknown currency (text fallback)',
+  args: { currency: 'USD' },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const currencies = ['SAR', 'AED', 'USD', 'EUR'] as const
+const sizes = [12, 16, 20, 24] as const
+
+const tableColumns = ['CURRENCY', ...sizes.map((s) => `${s}px`)] as const
+
+export const AllSymbols: Story = {
+  name: 'all symbols',
+  decorators: [],
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<CurrencySymbol currency="SAR" fontSize={16} />
+<CurrencySymbol currency="AED" fontSize={16} />
+<CurrencySymbol currency="USD" fontSize={16} /> {/* text fallback */}`.trim(),
+      },
+    },
+  },
+  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>
+          {currencies.map((currency) => (
+            <StoryRow key={currency}>
+              <StoryRowLabel>{currency}</StoryRowLabel>
+              {sizes.map((fontSize) => (
+                <StoryCell key={fontSize}>
+                  <CurrencySymbol currency={currency} fontSize={fontSize} />
+                </StoryCell>
+              ))}
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>USD and EUR have no icon — they render as plain text fallback.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/DeviceIcon.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import DeviceIcon from '@components/DeviceIcon'
+import { DEVICE_ICON } from '@components/DeviceIcon/constants'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+type DeviceType = keyof typeof DEVICE_ICON
+
+const meta: Meta<typeof DeviceIcon> = {
+  title: 'Components/DeviceIcon',
+  component: DeviceIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['DESKTOP', 'PHONE', 'TABLET'] as DeviceType[],
+      description: 'Device type — determines which icon is shown',
+    },
+    isTextShown: { control: 'boolean', description: 'Render a text label instead of an 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 DeviceIcon>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Desktop: Story = {
+  args: { type: 'DESKTOP' },
+  parameters: {
+    docs: {
+      source: { language: 'tsx', code: `<DeviceIcon type="DESKTOP" />` },
+    },
+  },
+}
+
+export const Phone: Story = {
+  args: { type: 'PHONE' },
+  parameters: {
+    docs: {
+      source: { language: 'tsx', code: `<DeviceIcon type="PHONE" />` },
+    },
+  },
+}
+
+export const Tablet: Story = {
+  args: { type: 'TABLET' },
+  parameters: {
+    docs: {
+      source: { language: 'tsx', code: `<DeviceIcon type="TABLET" />` },
+    },
+  },
+}
+
+export const TextLabel: Story = {
+  name: 'text label',
+  args: { type: 'DESKTOP', isTextShown: true },
+  parameters: {
+    docs: {
+      source: { language: 'tsx', code: `<DeviceIcon type="DESKTOP" isTextShown />` },
+    },
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const deviceRows: Array<{ label: string; type: DeviceType }> = [
+  { label: 'Desktop', type: 'DESKTOP' },
+  { label: 'Phone', type: 'PHONE' },
+  { label: 'Tablet', type: 'TABLET' },
+]
+
+const tableColumns = ['TYPE', 'ICON', 'TEXT LABEL'] 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>
+          {deviceRows.map(({ label, type }) => (
+            <StoryRow key={type}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <DeviceIcon type={type} />
+              </StoryCell>
+              <StoryCell>
+                <DeviceIcon type={type} isTextShown />
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Hover an icon to see its device tooltip.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/Dialog.stories.tsx

@@ -0,0 +1,270 @@
+import { useMemo, useRef, 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 { useDragControls } from 'framer-motion'
+import Dialog, { DialogContent, DialogFooter, DialogHeader, DialogToolbar } from '@components/Dialog'
+import { StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { table: { disable: true } },
+    dialogRef: { table: { disable: true } },
+    dragControls: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+    style: { table: { disable: true } },
+    index: { control: { type: 'number', min: 0, step: 1 } },
+    order: { control: { type: 'number', min: 0, step: 1 } },
+    height: { control: { type: 'number', min: 200, step: 10 } },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ minHeight: '85vh', width: '100%', position: 'relative' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Dialog>
+
+type DialogPreviewProps = {
+  title: string
+  subtitle: string
+  index: number
+  order: number
+  height?: number
+  onBringToFront: () => void
+}
+
+function DraggableDialogPreview({ title, subtitle, index, order, height, onBringToFront }: DialogPreviewProps) {
+  const dialogRef = useRef<HTMLDivElement | null>(null)
+  const dragControls = useDragControls()
+  const [closed, setClosed] = useState(false)
+
+  if (closed) {
+    return (
+      <Box sx={{ position: 'fixed', top: 24, left: '50%', transform: 'translateX(-50%)' }}>
+        <Button variant="outlined" size="small" onClick={() => setClosed(false)}>
+          Re-open {title}
+        </Button>
+      </Box>
+    )
+  }
+
+  return (
+    <Dialog
+      index={index}
+      order={order}
+      height={height}
+      dialogRef={dialogRef}
+      onClick={onBringToFront}
+      dragControls={dragControls}
+      style={{ zIndex: 2 + order }}
+    >
+      <Box onPointerDown={dragControls.start} sx={{ cursor: 'grab' }}>
+        <DialogToolbar title={title} onCloseDialog={() => setClosed(true)} />
+      </Box>
+
+      <DialogHeader>
+        <Typography variant="subtitle1" fontWeight={600}>
+          {title}
+        </Typography>
+        <Typography variant="caption" color="text.secondary">
+          {subtitle}
+        </Typography>
+      </DialogHeader>
+
+      <DialogContent>
+        <Box sx={{ px: 3, width: '100%' }}>
+          <Typography variant="body2" color="text.secondary">
+            Drag this dialog from the top toolbar. Click the close icon to hide it, then re-open from the top-right button.
+          </Typography>
+        </Box>
+      </DialogContent>
+
+      <DialogFooter>
+        <Box sx={{ display: 'flex', width: '100%', justifyContent: 'flex-end', gap: 1 }}>
+          <Button variant="outlined" size="small" onClick={() => setClosed(true)}>
+            Cancel
+          </Button>
+          <Button variant="contained" size="small">
+            Save
+          </Button>
+        </Box>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+function BaseRender(args: Parameters<typeof Dialog>[0]) {
+  const [order, setOrder] = useState(args.order)
+
+  return (
+    <>
+      <DraggableDialogPreview
+        title="Edit filters"
+        subtitle="Single draggable dialog preview"
+        index={args.index}
+        order={order}
+        height={args.height}
+        onBringToFront={() => setOrder(5)}
+      />
+      <StoryHint>Drag from the toolbar area. Clicking the dialog brings it to front.</StoryHint>
+    </>
+  )
+}
+
+export const Base: Story = {
+  args: {
+    index: 0,
+    order: 1,
+    height: 420,
+  },
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const dragControls = useDragControls()
+
+<Dialog index={0} order={1} onClick={() => {}} dragControls={dragControls}>
+  <Box onPointerDown={dragControls.start}>
+    <DialogToolbar title="Edit filters" onCloseDialog={() => {}} />
+  </Box>
+  <DialogHeader>...</DialogHeader>
+  <DialogContent>...</DialogContent>
+  <DialogFooter>...</DialogFooter>
+</Dialog>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function StackedRender() {
+  const [active, setActive] = useState<'first' | 'second'>('second')
+
+  const orders = useMemo(
+    () => ({
+      first: active === 'first' ? 6 : 2,
+      second: active === 'second' ? 6 : 2,
+    }),
+    [active]
+  )
+
+  return (
+    <>
+      <DraggableDialogPreview
+        title="Transactions"
+        subtitle="Click to bring this dialog to front"
+        index={0}
+        order={orders.first}
+        height={390}
+        onBringToFront={() => setActive('first')}
+      />
+      <DraggableDialogPreview
+        title="Filter settings"
+        subtitle="Second dialog in the stack"
+        index={1}
+        order={orders.second}
+        height={420}
+        onBringToFront={() => setActive('second')}
+      />
+      <StoryHint>Two dialogs are rendered together to demonstrate stack order handling.</StoryHint>
+    </>
+  )
+}
+
+export const Stacked: Story = {
+  name: 'stacked dialogs',
+  render: StackedRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [active, setActive] = useState<'first' | 'second'>('second')
+
+<Dialog index={0} order={active === 'first' ? 6 : 2} ... />
+<Dialog index={1} order={active === 'second' ? 6 : 2} ... />
+        `.trim(),
+      },
+    },
+  },
+}
+
+function TallContentRender() {
+  const dragControls = useDragControls()
+  const dialogRef = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <Dialog index={0} order={3} height={520} dialogRef={dialogRef} onClick={() => {}} dragControls={dragControls} style={{ zIndex: 8 }}>
+      <Box onPointerDown={dragControls.start} sx={{ cursor: 'grab' }}>
+        <DialogToolbar title="Large content" onCloseDialog={() => {}} />
+      </Box>
+      <DialogHeader>
+        <Typography variant="subtitle1" fontWeight={600}>
+          Scrollable content area
+        </Typography>
+      </DialogHeader>
+      <DialogContent>
+        <Box sx={{ px: 3, display: 'grid', gap: 1.5, width: '100%' }}>
+          {Array.from({ length: 18 }).map((_, idx) => (
+            <Typography key={idx} variant="body2" color="text.secondary">
+              Row {idx + 1}: This row simulates long content in the dialog body.
+            </Typography>
+          ))}
+        </Box>
+      </DialogContent>
+      <DialogFooter>
+        <Typography variant="caption" color="text.secondary">
+          Footer stays visible while content scrolls.
+        </Typography>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+export const TallContent: Story = {
+  name: 'tall content',
+  render: TallContentRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const dragControls = useDragControls()
+
+<Dialog index={0} order={3} height={520} onClick={() => {}} dragControls={dragControls}>
+  <Box onPointerDown={dragControls.start}>
+    <DialogToolbar title="Large content" onCloseDialog={() => {}} />
+  </Box>
+  <DialogHeader>
+    <Typography variant="subtitle1" fontWeight={600}>Scrollable content area</Typography>
+  </DialogHeader>
+  <DialogContent>
+    {Array.from({ length: 18 }).map((_, idx) => (
+      <Typography key={idx} variant="body2">Row {idx + 1}</Typography>
+    ))}
+  </DialogContent>
+  <DialogFooter>
+    <Typography variant="caption">Footer stays visible while content scrolls.</Typography>
+  </DialogFooter>
+</Dialog>
+        `.trim(),
+      },
+    },
+  },
+}