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

package/docs/stories/components/Button.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Button from '@components/Button'
+import { type Variant } from '@components/Button/Button'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['confirm', 'cancel'],
+      description: '`confirm` = filled primary, `cancel` = outlined secondary',
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'default'],
+    },
+    disabled: { control: 'boolean' },
+    width: { control: 'text', description: 'Custom width — number (px) or any CSS string e.g. `"100%"`' },
+    height: { control: 'text', description: 'Custom height — number (px) or any CSS string e.g. `"3rem"`' },
+  },
+
+  // Makes the AllVariants story the default when opening the Button component
+  // (you can still navigate to others via sidebar)
+  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 Button>
+
+// ──────────────────────────────────────────────
+// Focused / named stories (keep these 3–4)
+
+export const Base: Story = {
+  args: { variant: 'confirm', size: 'default', children: 'Submit' },
+}
+
+export const Small: Story = {
+  args: { variant: 'confirm', size: 'small', children: 'Submit' },
+}
+
+export const Disabled: Story = {
+  args: { variant: 'confirm', disabled: true, children: 'Submit' },
+}
+
+// ──────────────────────────────────────────────
+// The main "kitchen sink" — becomes the landing view
+
+type ButtonOverride = Partial<Parameters<typeof Button>[0]>
+
+const tableColumns = ['VARIANT', 'DEFAULT', 'DISABLED', 'SMALL'] as const
+
+const variantRows: Array<{ variant: Variant; label: string; cells: ButtonOverride[] }> = [
+  {
+    variant: 'confirm',
+    label: 'Confirm',
+    cells: [
+      { variant: 'confirm', size: 'default' },
+      { variant: 'confirm', size: 'default', disabled: true },
+      { variant: 'confirm', size: 'small' },
+    ],
+  },
+  {
+    variant: 'cancel',
+    label: 'Cancel',
+    cells: [
+      { variant: 'cancel', size: 'default' },
+      { variant: 'cancel', size: 'default', disabled: true },
+      { variant: 'cancel', size: 'small' },
+    ],
+  },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: (args) => {
+    // Helper to render a button with combined args + overrides
+    const renderButton = (override: ButtonOverride = {}) => (
+      <Button {...args} {...override}>
+        {override.children || (override.disabled ? 'Disabled' : 'Submit')}
+      </Button>
+    )
+
+    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((buttonOverride, index) => (
+                  <StoryCell key={`${label}-${index}`}>{renderButton(buttonOverride)}</StoryCell>
+                ))}
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Use the Controls panel to change variant, size, label, etc.</StoryHint>
+      </Box>
+    )
+  },
+
+  args: {
+    children: 'Button',
+  },
+}

package/docs/stories/components/CardEmptyState.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CardEmptyState from '@components/CardEmptyState'
+
+const meta: Meta<typeof CardEmptyState> = {
+  title: 'Components/CardEmptyState',
+  component: CardEmptyState,
+  tags: ['autodocs'],
+  argTypes: {
+    heading: {
+      control: 'text',
+      description: 'i18n key (or raw string) rendered as the empty-state heading',
+    },
+    message: {
+      control: 'text',
+      description: 'i18n key (or raw string) rendered as the supporting message',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Shown when a list or section has no data. Accepts any `BoxProps` for layout customisation.',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof CardEmptyState>
+
+export const Base: Story = {
+  args: {
+    heading: 'No results found',
+    message: 'Try adjusting your filters or search terms.',
+  },
+}
+
+export const WithCustomWidth: Story = {
+  args: {
+    heading: 'Nothing here',
+    message: 'This section is empty.',
+    sx: { width: 320 },
+  },
+}

package/docs/stories/components/CardHeadline.stories.tsx

@@ -0,0 +1,208 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import CardHeadline from '@components/CardHeadline'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof CardHeadline> = {
+  title: 'Components/CardHeadline',
+  component: CardHeadline,
+  tags: ['autodocs'],
+  argTypes: {
+    headline: { control: 'text', description: 'Large heading text' },
+    subHeadline: { control: 'text', description: 'Smaller supporting text below the headline' },
+  },
+  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 CardHeadline>
+
+export const Base: Story = {
+  args: {
+    headline: 'Welcome',
+    subHeadline: 'Tap OS Micro Frontend Shared Components',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<CardHeadline
+  headline="Welcome"
+  subHeadline="Tap OS Micro Frontend Shared Components"
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const HeadlineOnly: Story = {
+  args: {
+    headline: 'Charges',
+    subHeadline: '',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<CardHeadline headline="Charges" subHeadline="" />
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const LongText: Story = {
+  args: {
+    headline: 'Transaction Management',
+    subHeadline: 'View, filter and export all payment transactions across your merchant accounts',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<CardHeadline
+  headline="Transaction Management"
+  subHeadline="View, filter and export all payment transactions across your merchant accounts"
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const SubHeadlineOnly: Story = {
+  name: 'sub headline only',
+  args: {
+    headline: '',
+    subHeadline: 'Manage account preferences from a single place.',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<CardHeadline
+  headline=""
+  subHeadline="Manage account preferences from a single place."
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+type HeadlineOverride = Partial<Parameters<typeof CardHeadline>[0]>
+
+const tableColumns = ['CASE', 'DEFAULT', 'LONG COPY'] as const
+
+const headlineRows: Array<{ label: string; defaultState: HeadlineOverride; longState: HeadlineOverride }> = [
+  {
+    label: 'Headline + subheadline',
+    defaultState: {
+      headline: 'Welcome',
+      subHeadline: 'Tap OS Micro Frontend Shared Components',
+    },
+    longState: {
+      headline: 'Transaction Management',
+      subHeadline: 'View, filter and export all payment transactions across your merchant accounts',
+    },
+  },
+  {
+    label: 'Headline only',
+    defaultState: {
+      headline: 'Charges',
+      subHeadline: '',
+    },
+    longState: {
+      headline: 'Payout Reconciliation Dashboard',
+      subHeadline: '',
+    },
+  },
+  {
+    label: 'Subheadline only',
+    defaultState: {
+      headline: '',
+      subHeadline: 'Manage account preferences from a single place.',
+    },
+    longState: {
+      headline: '',
+      subHeadline: 'Configure notification channels, settlement settings, and operational defaults in one place.',
+    },
+  },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: (args) => {
+    const renderHeadline = (override: HeadlineOverride = {}) => (
+      <Box sx={{ minWidth: 280 }}>
+        <CardHeadline {...args} {...override} />
+      </Box>
+    )
+
+    return (
+      <Box sx={{ maxWidth: 980, mx: 'auto' }}>
+        <StoryTable>
+          <StoryThead>
+            <StoryRow>
+              {tableColumns.map((header, index) => (
+                <StoryHeaderCell key={header} first={index === 0}>
+                  {header}
+                </StoryHeaderCell>
+              ))}
+            </StoryRow>
+          </StoryThead>
+
+          <StoryTbody>
+            {headlineRows.map(({ label, defaultState, longState }) => (
+              <StoryRow key={label}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                <StoryCell>{renderHeadline(defaultState)}</StoryCell>
+                <StoryCell>{renderHeadline(longState)}</StoryCell>
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Use the Controls panel to test headline and subheadline copy combinations.</StoryHint>
+      </Box>
+    )
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<CardHeadline
+  headline="Welcome"
+  subHeadline="Tap OS Micro Frontend Shared Components"
+/>
+
+<CardHeadline
+  headline="Charges"
+  subHeadline=""
+/>
+        `.trim(),
+      },
+    },
+  },
+  args: {
+    headline: 'Welcome',
+    subHeadline: 'Tap OS Micro Frontend Shared Components',
+  },
+}

package/docs/stories/components/Chip.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import { Chip } from '@components/Chip'
+import { ChipVariant } from '@components/Chip/type'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+import { Icon } from '@components'
+import { searchBlueIcon } from '@constants'
+
+const meta: Meta<typeof Chip> = {
+  title: 'Components/Chip',
+  component: Chip,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['text', 'circular', 'pill-icon'] as ChipVariant[],
+      description: '`text` = label only, `circular` = rounded badge, `pill-icon` = icon + label pill',
+    },
+    children: { control: 'text' },
+    icon: { table: { disable: true } },
+  },
+  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 Chip>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: { variant: 'text', children: 'Label' },
+}
+
+export const Circular: Story = {
+  args: { variant: 'circular', children: '12' },
+}
+
+const SearchIcon = () => <Icon src={searchBlueIcon} alt="search" />
+
+export const PillWithIcon: Story = {
+  args: { variant: 'pill-icon', icon: <SearchIcon />, children: 'search' },
+}
+
+type ChipOverride = Partial<Parameters<typeof Chip>[0]>
+
+const tableColumns = ['VARIANT', 'WITHOUT ICON', 'WITH ICON'] as const
+
+const variantRows: Array<{ variant: ChipVariant; label: string; value?: string }> = [
+  { variant: 'text', label: 'Text', value: 'text' },
+  { variant: 'circular', label: 'Circular', value: '15' },
+  { variant: 'pill-icon', label: 'Pill-Icon', value: 'search' },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: (args) => {
+    const renderChip = (override: ChipOverride = {}) => (
+      <Chip {...args} {...override}>
+        {override.children ?? 'Chip'}
+      </Chip>
+    )
+
+    return (
+      <Box sx={{ maxWidth: 960, mx: 'auto' }}>
+        <StoryTable>
+          <StoryThead>
+            <StoryRow>
+              {tableColumns.map((header, index) => (
+                <StoryHeaderCell key={header} first={index === 0} sx={{ textAlign: 'left' }}>
+                  {header}
+                </StoryHeaderCell>
+              ))}
+            </StoryRow>
+          </StoryThead>
+
+          <StoryTbody>
+            {variantRows.map(({ variant, label, value }) => (
+              <StoryRow key={variant}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                <StoryCell sx={{ width: '40%' }}>{renderChip({ variant, children: value })}</StoryCell>
+                <StoryCell sx={{ width: '40%' }}>{renderChip({ variant, icon: <SearchIcon />, children: value })}</StoryCell>
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Use the Controls panel to change variant and label text.</StoryHint>
+      </Box>
+    )
+  },
+  args: {
+    children: 'Chip',
+  },
+}

package/docs/stories/components/CircularProgressWithLabel.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import CircularProgressWithLabel from '@components/CircularProgressWithLabel'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof CircularProgressWithLabel> = {
+  title: 'Components/CircularProgressWithLabel',
+  component: CircularProgressWithLabel,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Progress percentage (0–100)',
+    },
+    size: {
+      control: { type: 'number' },
+      description: 'Diameter of the circle in px',
+    },
+    thickness: {
+      control: { type: 'range', min: 1, max: 10, step: 0.5 },
+      description: 'Stroke thickness',
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'error', 'info', 'success', 'warning', 'inherit'],
+      description: 'Color of the progress indicator',
+    },
+    variant: { table: { disable: true }, description: 'Always "determinate" — this component requires a value to display its label' },
+    disableShrink: { 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 CircularProgressWithLabel>
+
+// ──────────────────────────────────────────────
+// 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 Large: Story = {
+  args: { value: 72, size: 80 },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['VALUE', 'INDICATOR'] 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: '100%', value: 100 },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  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>
+                <CircularProgressWithLabel {...args} value={value} />
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Use the range slider in Controls to scrub through progress values.</StoryHint>
+    </Box>
+  ),
+  args: { value: 50 },
+}

package/docs/stories/components/Collapse.stories.tsx

@@ -0,0 +1,100 @@
+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 Collapse from '@components/Collapse'
+import { StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof Collapse> = {
+  title: 'Components/Collapse',
+  component: Collapse,
+  tags: ['autodocs'],
+  argTypes: {
+    in: { control: 'boolean', description: 'Controls visibility' },
+    timeout: { control: 'number', description: 'Transition duration in ms' },
+    unmountOnExit: { control: 'boolean' },
+    orientation: {
+      control: 'radio',
+      options: ['vertical', 'horizontal'],
+    },
+    children: { table: { disable: true } },
+  },
+  args: {
+    in: true,
+    timeout: 500,
+    unmountOnExit: true,
+    orientation: 'vertical',
+  },
+  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 Collapse>
+
+const DemoContent = () => (
+  <Box sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1, width: 280 }}>
+    <Typography variant="body2">This content is revealed by the Collapse transition.</Typography>
+  </Box>
+)
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Open: Story = {
+  args: { in: true },
+  render: (args) => (
+    <Collapse {...args}>
+      <DemoContent />
+    </Collapse>
+  ),
+}
+
+// ──────────────────────────────────────────────
+// Interactive
+
+export const Interactive: Story = {
+  name: 'interactive toggle',
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [open, setOpen] = useState(false)
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+        <Button variant="outlined" size="small" onClick={() => setOpen((v) => !v)}>
+          {open ? 'Collapse' : 'Expand'}
+        </Button>
+        <Collapse in={open}>
+          <DemoContent />
+        </Collapse>
+        <StoryHint>Click the button to toggle the collapse animation.</StoryHint>
+      </Box>
+    )
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [open, setOpen] = useState(false)
+
+<Button onClick={() => setOpen(v => !v)}>
+  {open ? 'Collapse' : 'Expand'}
+</Button>
+
+<Collapse in={open}>
+  <Box>Your content here</Box>
+</Collapse>`.trim(),
+      },
+    },
+  },
+}