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

package/docs/stories/components/IconWithBadge.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import IconWithBadge from '@components/IconWithBadge'
+import CountryFlag from '@components/CountryFlag'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+// Simple placeholder icon used in stories
+const DEMO_ICON = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%231976d2"/></svg>`
+
+const meta: Meta<typeof IconWithBadge> = {
+  title: 'Components/IconWithBadge',
+  component: IconWithBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    mainIcon: { control: 'text', description: 'URL of the main icon image' },
+    label: { control: 'text', description: 'Tooltip label' },
+    mainIconSize: { control: 'number' },
+    containerSize: { control: 'number' },
+    borderColor: { control: 'color' },
+    overlayIcon: { table: { disable: true } },
+    overlayPosition: { table: { disable: true } },
+    sx: { table: { disable: true } },
+    containerSx: { table: { disable: true } },
+    onError: { table: { disable: true } },
+  },
+  args: {
+    mainIcon: DEMO_ICON,
+    mainIconSize: 20,
+    containerSize: 24,
+    borderColor: '#F2F2F2',
+    label: '',
+  },
+  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 IconWithBadge>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {}
+
+export const WithOverlay: Story = {
+  name: 'with overlay badge',
+  args: {
+    overlayIcon: <CountryFlag countryCode="SA" width={10} />,
+  },
+}
+
+export const WithLabel: Story = {
+  name: 'with tooltip label',
+  args: { label: 'Merchant Logo' },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const sizeRows: Array<{ label: string; containerSize: number; mainIconSize: number }> = [
+  { label: 'Small (24)', containerSize: 24, mainIconSize: 18 },
+  { label: 'Medium (32)', containerSize: 32, mainIconSize: 22 },
+  { label: 'Large (40)', containerSize: 40, mainIconSize: 28 },
+]
+
+const tableColumns = ['SIZE', 'NO BADGE', 'WITH BADGE'] as const
+
+export const AllSizes: Story = {
+  name: 'all sizes',
+  decorators: [],
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+{/* No badge */}
+<IconWithBadge mainIcon={iconUrl} containerSize={24} mainIconSize={18} />
+
+{/* With overlay badge */}
+<IconWithBadge
+  mainIcon={iconUrl}
+  containerSize={24}
+  mainIconSize={18}
+  overlayIcon={<CountryFlag countryCode="SA" width={10} />}
+  overlayPosition={{ top: 13, left: 13 }}
+/>`.trim(),
+      },
+    },
+  },
+  render: () => (
+    <Box sx={{ maxWidth: 480, mx: 'auto' }}>
+      <StoryTable>
+        <StoryThead>
+          <StoryRow>
+            {tableColumns.map((header, index) => (
+              <StoryHeaderCell key={header} first={index === 0}>
+                {header}
+              </StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          {sizeRows.map(({ label, containerSize, mainIconSize }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <IconWithBadge mainIcon={DEMO_ICON} containerSize={containerSize} mainIconSize={mainIconSize} />
+              </StoryCell>
+              <StoryCell>
+                <IconWithBadge
+                  mainIcon={DEMO_ICON}
+                  containerSize={containerSize}
+                  mainIconSize={mainIconSize}
+                  overlayIcon={<CountryFlag countryCode="SA" width={Math.round(containerSize * 0.4)} />}
+                  overlayPosition={{ top: Math.round(containerSize * 0.55), left: Math.round(containerSize * 0.55) }}
+                />
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>The overlay badge position scales with container size.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/JSONViewer.stories.tsx

@@ -0,0 +1,92 @@
+import { useContext, useEffect } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { JsonViewerDialogContext, JsonViewerDialogContextProvider } from '@components/JSONViewer'
+import { StoryHint } from '@storybook-utils'
+
+const responsePayload = {
+  id: 'chg_story_001',
+  status: 'CAPTURED',
+  amount: 9,
+  currency: 'KWD',
+  customer: {
+    id: 'cus_story_001',
+    email: 'user@example.com',
+    phone: { country_code: '965', number: '50001234' },
+  },
+  metadata: {
+    order_id: 'ORD-1001',
+    note: 'Payment transaction for monthly subscription',
+  },
+  activities: [
+    { id: 'activity_1', status: 'INITIATED' },
+    { id: 'activity_2', status: 'CAPTURED' },
+  ],
+}
+
+const requestPayload = {
+  amount: 9,
+  currency: 'KWD',
+  description: 'Storybook search demo request',
+  customer: {
+    first_name: 'Omar',
+    last_name: 'Saber',
+    email: 'user@example.com',
+  },
+  metadata: {
+    order_id: 'ORD-1001',
+    source: 'storybook',
+  },
+}
+
+const meta: Meta = {
+  title: 'Components/JSONViewer',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+function OpenOnMount({ withRequest = false }: { withRequest?: boolean }) {
+  const { handleJsonViewerDialogOpen } = useContext(JsonViewerDialogContext)
+
+  useEffect(() => {
+    handleJsonViewerDialogOpen({
+      json: responsePayload,
+      requestJson: withRequest ? requestPayload : undefined,
+    })
+  }, [handleJsonViewerDialogOpen, withRequest])
+
+  return null
+}
+
+function StoryLayout({ withRequest = false }: { withRequest?: boolean }) {
+  return (
+    <JsonViewerDialogContextProvider>
+      <Box sx={{ minHeight: '90vh', p: 3, bgcolor: '#f8f9fb' }}>
+        <Typography variant="h6" sx={{ mb: 1 }}>
+          JSON Viewer
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Use the search icon in the viewer header to test key/value search highlight and next/previous navigation.
+        </Typography>
+        <StoryHint>
+          Try searching for: `captured`, `order_id`, `storybook`, or `50001234`.
+        </StoryHint>
+      </Box>
+      <OpenOnMount withRequest={withRequest} />
+    </JsonViewerDialogContextProvider>
+  )
+}
+
+export const ResponseOnly: Story = {
+  render: () => <StoryLayout />,
+}
+
+export const RequestAndResponse: Story = {
+  render: () => <StoryLayout withRequest />,
+}

package/docs/stories/components/LeftPeekRightExpandingChip.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { LeftPeekRightExpandingChip } from '@components/LeftPeekRightExpandingChip'
+import CountryFlag from '@components/CountryFlag'
+import { StoryFlexRow, StoryHint } from '@storybook-utils'
+
+// Simple chip-like icon node used in stories
+const makeFlag = (code: string) => (
+  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+    <CountryFlag countryCode={code} width={14} />
+    <Typography variant="caption" sx={{ fontSize: '0.65rem', fontWeight: 600 }}>
+      {code}
+    </Typography>
+  </Box>
+)
+
+const twoIcons = [makeFlag('AE'), makeFlag('SA')]
+const threeIcons = [makeFlag('AE'), makeFlag('GB'), makeFlag('SA')]
+const fiveIcons = [makeFlag('AE'), makeFlag('GB'), makeFlag('DE'), makeFlag('FR'), makeFlag('SA')]
+
+const meta: Meta<typeof LeftPeekRightExpandingChip> = {
+  title: 'Components/LeftPeekRightExpandingChip',
+  component: LeftPeekRightExpandingChip,
+  tags: ['autodocs'],
+  argTypes: {
+    expandedZIndex: { control: 'number', description: 'z-index of the expanded state' },
+    icons: { table: { disable: true } },
+    sx: { table: { disable: true } },
+  },
+  args: {
+    icons: threeIcons,
+    expandedZIndex: 1000,
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 6 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof LeftPeekRightExpandingChip>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+const docSource = (count: number) => ({
+  docs: {
+    source: {
+      language: 'tsx' as const,
+      code: `
+<LeftPeekRightExpandingChip
+  icons={Array.from({ length: ${count} }, (_, i) => (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+      <CountryFlag countryCode={countryCode} width={14} />
+      <Typography variant="caption">{countryCode}</Typography>
+    </Box>
+  ))}
+/>`.trim(),
+    },
+  },
+})
+
+export const TwoIcons: Story = {
+  name: '2 icons',
+  args: { icons: twoIcons },
+  parameters: docSource(2),
+}
+
+export const ThreeIcons: Story = {
+  name: '3 icons',
+  args: { icons: threeIcons },
+  parameters: docSource(3),
+}
+
+export const FiveIcons: Story = {
+  name: '5 icons',
+  args: { icons: fiveIcons },
+  parameters: docSource(5),
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+export const AllCounts: Story = {
+  name: 'all counts',
+  decorators: [],
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+{/* 2 icons */}
+<LeftPeekRightExpandingChip icons={[<FlagIcon />, <FlagIcon />]} />
+
+{/* 5 icons */}
+<LeftPeekRightExpandingChip icons={[icon1, icon2, icon3, icon4, icon5]} />`.trim(),
+      },
+    },
+  },
+  render: () => (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 5, alignItems: 'center', py: 4 }}>
+      <StoryFlexRow spacing={8} sx={{ flexWrap: 'wrap', justifyContent: 'center' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+          <Box sx={{ fontSize: '0.7rem', color: 'text.secondary', textTransform: 'uppercase' }}>2 icons</Box>
+          <LeftPeekRightExpandingChip icons={twoIcons} />
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+          <Box sx={{ fontSize: '0.7rem', color: 'text.secondary', textTransform: 'uppercase' }}>3 icons</Box>
+          <LeftPeekRightExpandingChip icons={threeIcons} />
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+          <Box sx={{ fontSize: '0.7rem', color: 'text.secondary', textTransform: 'uppercase' }}>5 icons</Box>
+          <LeftPeekRightExpandingChip icons={fiveIcons} />
+        </Box>
+      </StoryFlexRow>
+      <StoryHint>Hover the rightmost chip to expand the peek stack.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/Loader.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Loader from '@components/Loader'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof Loader> = {
+  title: 'Components/Loader',
+  component: Loader,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'error', 'warning', 'info', 'success', 'inherit'],
+      description: 'Spinner colour — maps to MUI palette tokens',
+    },
+    size: {
+      control: 'number',
+      description: 'Override the pixel size (default is 24 px via the styled wrapper)',
+    },
+    thickness: {
+      control: { type: 'number', min: 1, max: 10, step: 0.5 },
+      description: 'Stroke thickness of the circle',
+    },
+    variant: {
+      control: 'select',
+      options: ['indeterminate', 'determinate'],
+    },
+    value: {
+      control: { type: 'number', min: 0, max: 100 },
+      description: 'Progress 0–100 (only used when variant = "determinate")',
+    },
+  },
+  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 Loader>
+
+// ──────────────────────────────────────────────
+// Focused / named stories
+
+export const Base: Story = {
+  args: {},
+}
+
+export const Large: Story = {
+  args: { size: 48, thickness: 3 },
+}
+
+export const Small: Story = {
+  args: { size: 16 },
+}
+
+export const Determinate: Story = {
+  args: { variant: 'determinate', value: 65 },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['SIZE', 'DEFAULT', 'PRIMARY', 'SUCCESS', 'ERROR'] as const
+
+const sizeRows: Array<{ label: string; size: number }> = [
+  { label: 'Small', size: 16 },
+  { label: 'Default (24 px)', size: 24 },
+  { label: 'Large', size: 48 },
+]
+
+type LoaderColor = 'inherit' | 'primary' | 'success' | 'error'
+const colorCols: LoaderColor[] = ['inherit', 'primary', 'success', 'error']
+
+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>
+          {sizeRows.map(({ label, size }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              {colorCols.map((color) => (
+                <StoryCell key={color}>
+                  <Loader size={size} color={color} />
+                </StoryCell>
+              ))}
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Loader wraps MUI CircularProgress with a fixed 24 px default size. Use the Controls panel to try determinate mode.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/NoInternet.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import NoInternet from '@components/NoInternet'
+
+const meta: Meta<typeof NoInternet> = {
+  title: 'Components/NoInternet',
+  component: NoInternet,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'Message shown below the icon' },
+  },
+  args: {
+    title: 'No internet connection',
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    // `position: fixed` inside NoInternet escapes normal flow.
+    // A CSS transform on the parent creates a new containing block that traps it.
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 4, transform: 'translateZ(0)' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof NoInternet>
+
+export const Base: Story = {}
+
+export const CustomMessage: Story = {
+  name: 'custom message',
+  args: { title: 'Please check your network and try again.' },
+}
+
+export const ShortMessage: Story = {
+  name: 'short message',
+  args: { title: 'Offline' },
+}

package/docs/stories/components/ProgressBar.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import ProgressBar from '@components/ProgressBar'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Progress percentage (0–100)',
+    },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ width: '50%', mx: 'auto', borderRadius: 1, p: 2, bgcolor: 'divider', minHeight: '30vh' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ProgressBar>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: { value: 50 },
+}
+
+export const Empty: Story = {
+  args: { value: 0 },
+}
+
+export const Complete: Story = {
+  args: { value: 100 },
+}
+
+export const Decimal: Story = {
+  name: 'decimal value',
+  args: { value: 66.7 },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['VALUE', 'PROGRESS BAR'] as const
+
+const valueRows: Array<{ label: string; value: number }> = [
+  { label: '0%', value: 0 },
+  { label: '25%', value: 25 },
+  { label: '50%', value: 50 },
+  { label: '75%', value: 75 },
+  { label: '99.9%', value: 99.9 },
+  { label: '100%', value: 100 },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  render: (args) => (
+    <Box sx={{ maxWidth: 960, mx: 'auto' }}>
+      <StoryTable>
+        <StoryThead>
+          <StoryRow>
+            {tableColumns.map((header, index) => (
+              <StoryHeaderCell key={header} first={index === 0}>
+                {header}
+              </StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          {valueRows.map(({ label, value }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <Box sx={{ width: 300 }}>
+                  <ProgressBar {...args} value={value} />
+                </Box>
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Use the range slider in Controls to scrub through progress values.</StoryHint>
+    </Box>
+  ),
+  args: { value: 50 },
+}