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

package/docs/stories/components/AccordionAdapter.stories.tsx

@@ -0,0 +1,201 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import AccordionAdapter from '@components/AccordionAdapter'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof AccordionAdapter> = {
+  title: 'Components/AccordionAdapter',
+  component: AccordionAdapter,
+  tags: ['autodocs'],
+  argTypes: {
+    defaultExpanded: { control: 'boolean', description: 'Expanded by default' },
+    disabled: { control: 'boolean' },
+    Header: { table: { disable: true } },
+    Footer: { table: { disable: true } },
+    children: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ maxWidth: 640, mx: 'auto', width: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof AccordionAdapter>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: {
+    defaultExpanded: false,
+    Header: <Typography variant="subtitle1">Section Title</Typography>,
+    children: (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="body2" color="text.secondary">
+          This is the accordion body content. It can contain any layout or components.
+        </Typography>
+      </Box>
+    ),
+  },
+}
+
+export const DefaultExpanded: Story = {
+  name: 'default expanded',
+  args: {
+    defaultExpanded: true,
+    Header: <Typography variant="subtitle1">Already Open</Typography>,
+    children: (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="body2" color="text.secondary">
+          This accordion starts in the expanded state.
+        </Typography>
+      </Box>
+    ),
+  },
+}
+
+export const WithFooter: Story = {
+  name: 'with footer',
+  args: {
+    defaultExpanded: true,
+    Header: <Typography variant="subtitle1">With Footer Actions</Typography>,
+    children: (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="body2" color="text.secondary">
+          Accordion body with footer action buttons below.
+        </Typography>
+      </Box>
+    ),
+    Footer: (
+      <Box sx={{ display: 'flex', gap: 1 }}>
+        <Button size="small" variant="outlined">
+          Cancel
+        </Button>
+        <Button size="small" variant="contained">
+          Save
+        </Button>
+      </Box>
+    ),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    Header: <Typography variant="subtitle1">Disabled Section</Typography>,
+    children: (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="body2">Not accessible when disabled.</Typography>
+      </Box>
+    ),
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['VARIANT', 'PREVIEW'] as const
+
+const accordionRows: Array<{
+  label: string
+  props: Partial<React.ComponentProps<typeof AccordionAdapter>>
+}> = [
+  {
+    label: 'Collapsed',
+    props: {
+      defaultExpanded: false,
+      Header: <Typography variant="body2">Collapsed accordion</Typography>,
+      children: (
+        <Box sx={{ p: 2 }}>
+          <Typography variant="body2">Content here.</Typography>
+        </Box>
+      ),
+    },
+  },
+  {
+    label: 'Expanded',
+    props: {
+      defaultExpanded: true,
+      Header: <Typography variant="body2">Expanded accordion</Typography>,
+      children: (
+        <Box sx={{ p: 2 }}>
+          <Typography variant="body2">Content here.</Typography>
+        </Box>
+      ),
+    },
+  },
+  {
+    label: 'With Footer',
+    props: {
+      defaultExpanded: true,
+      Header: <Typography variant="body2">With footer</Typography>,
+      children: (
+        <Box sx={{ p: 2 }}>
+          <Typography variant="body2">Content here.</Typography>
+        </Box>
+      ),
+      Footer: (
+        <Button size="small" variant="contained">
+          Save
+        </Button>
+      ),
+    },
+  },
+  {
+    label: 'Disabled',
+    props: {
+      disabled: true,
+      Header: <Typography variant="body2">Disabled</Typography>,
+      children: (
+        <Box sx={{ p: 2 }}>
+          <Typography variant="body2">Content here.</Typography>
+        </Box>
+      ),
+    },
+  },
+]
+
+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>
+          {accordionRows.map(({ label, props }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell sx={{ width: '75%' }}>
+                <Box sx={{ width: '100%', maxWidth: 500 }}>
+                  <AccordionAdapter {...(props as React.ComponentProps<typeof AccordionAdapter>)} />
+                </Box>
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Click any accordion header to toggle the expanded state.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/AccountDropdown.stories.tsx

@@ -0,0 +1,113 @@
+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 AccountDropdown from '@components/AccountDropdown'
+
+const meta: Meta<typeof AccountDropdown> = {
+  title: 'Components/AccountDropdown',
+  component: AccountDropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    anchorEl: { table: { disable: true } },
+    children: { table: { disable: true } },
+    onOpen: { table: { disable: true } },
+    onClose: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'centered',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AccountDropdown>
+
+function BaseRender() {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const open = Boolean(anchorEl)
+
+  return (
+    <Box sx={{ width: 320 }}>
+      <AccountDropdown
+        open={open}
+        anchorEl={anchorEl}
+        onOpen={(e) => setAnchorEl(e.currentTarget)}
+        onClose={() => setAnchorEl(null)}
+        trigger={<Typography variant="body2">Main merchant account</Typography>}
+      >
+        <Box sx={{ p: 1.5, minWidth: 260 }}>
+          <Typography variant="body2">Main merchant account</Typography>
+          <Typography variant="body2">Operations account</Typography>
+          <Typography variant="body2">Settlement account</Typography>
+        </Box>
+      </AccountDropdown>
+    </Box>
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const open = Boolean(anchorEl)
+
+<AccountDropdown
+  open={open}
+  anchorEl={anchorEl}
+  onOpen={(e) => setAnchorEl(e.currentTarget)}
+  onClose={() => setAnchorEl(null)}
+  trigger={<Typography variant="body2">Main merchant account</Typography>}
+>
+  <Box sx={{ p: 1.5, minWidth: 260 }}>
+    <Typography variant="body2">Main merchant account</Typography>
+    <Typography variant="body2">Operations account</Typography>
+    <Typography variant="body2">Settlement account</Typography>
+  </Box>
+</AccountDropdown>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Box sx={{ width: 320 }}>
+      <AccountDropdown
+        open={false}
+        anchorEl={null}
+        disabled
+        onOpen={() => {}}
+        onClose={() => {}}
+        trigger={<Typography variant="body2">Main merchant account</Typography>}
+      >
+        <Box />
+      </AccountDropdown>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<AccountDropdown
+  open={false}
+  anchorEl={null}
+  disabled
+  onOpen={() => {}}
+  onClose={() => {}}
+  trigger={<Typography variant="body2">Main merchant account</Typography>}
+>
+  <Box />
+</AccountDropdown>
+        `.trim(),
+      },
+    },
+  },
+}

package/docs/stories/components/AnimatedSpinnerIcon.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import AnimatedSpinnerIcon from '@components/AnimatedSpinnerIcon'
+import Box from '@mui/material/Box'
+
+const meta: Meta<typeof AnimatedSpinnerIcon> = {
+  title: 'Components/AnimatedSpinnerIcon',
+  component: AnimatedSpinnerIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    width: { control: 'text', description: 'CSS width  (e.g. "24px", "2rem")' },
+    height: { control: 'text', description: 'CSS height (e.g. "24px", "2rem")' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Animated spinner used for loading states. Fades in/out via framer-motion.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof AnimatedSpinnerIcon>
+
+export const Base: Story = {
+  args: {},
+}
+
+export const Small: Story = {
+  args: { width: '16px', height: '16px' },
+}
+
+export const Large: Story = {
+  args: { width: '64px', height: '64px' },
+}
+
+export const AllSizes: Story = {
+  name: 'All variants',
+  render: () => (
+    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
+      <AnimatedSpinnerIcon width="16px" height="16px" />
+      <AnimatedSpinnerIcon width="24px" height="24px" />
+      <AnimatedSpinnerIcon width="40px" height="40px" />
+      <AnimatedSpinnerIcon width="64px" height="64px" />
+    </div>
+  ),
+}

package/docs/stories/components/BackgroundAnimation.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import BackgroundAnimation from '@components/BackgroundAnimation'
+import type { BlobGradient } from '@components/BackgroundAnimation/Blob/type'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell } from '@storybook-utils'
+
+const meta: Meta<typeof BackgroundAnimation> = {
+  title: 'Components/BackgroundAnimation',
+  component: BackgroundAnimation,
+  tags: ['autodocs'],
+  argTypes: {
+    gradient: {
+      control: 'select',
+      options: ['blueGreen', 'greenYellow', 'yellowOrange', 'orangeRed', 'redPurple', 'purpleBlue'] as BlobGradient[],
+      description: 'Gradient color scheme for the blob shapes',
+    },
+    blobWidth: { control: 'text', description: 'Width of each blob (number or CSS string)' },
+    blobHeight: { control: 'text', description: 'Height of each blob (number or CSS string)' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof BackgroundAnimation>
+
+// BackgroundAnimation is absolutely positioned with zIndex: -1.
+// Wrap it in a relative container so it is visible in Storybook.
+const BgPreview = ({ gradient, blobWidth = '150px', blobHeight = '150px' }: { gradient?: BlobGradient; blobWidth?: string; blobHeight?: string }) => (
+  <Box sx={{ position: 'relative', height: 200, overflow: 'hidden', borderRadius: 1 }}>
+    <BackgroundAnimation gradient={gradient} blobWidth={blobWidth} blobHeight={blobHeight} />
+  </Box>
+)
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Default: Story = {
+  args: { gradient: 'purpleBlue' },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<BackgroundAnimation gradient="purpleBlue" />
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => (
+    <Box sx={{ position: 'relative', height: 400, overflow: 'hidden' }}>
+      <BackgroundAnimation {...args} />
+    </Box>
+  ),
+}
+
+export const BlueGreen: Story = {
+  args: { gradient: 'blueGreen' },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<BackgroundAnimation gradient="blueGreen" />
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => (
+    <Box sx={{ position: 'relative', height: 400, overflow: 'hidden' }}>
+      <BackgroundAnimation {...args} />
+    </Box>
+  ),
+}
+
+export const OrangeRed: Story = {
+  args: { gradient: 'orangeRed' },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<BackgroundAnimation gradient="orangeRed" />
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => (
+    <Box sx={{ position: 'relative', height: 400, overflow: 'hidden' }}>
+      <BackgroundAnimation {...args} />
+    </Box>
+  ),
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const gradientRows: Array<{ label: string; gradient: BlobGradient }> = [
+  { label: 'purpleBlue', gradient: 'purpleBlue' },
+  { label: 'blueGreen', gradient: 'blueGreen' },
+  { label: 'greenYellow', gradient: 'greenYellow' },
+  { label: 'yellowOrange', gradient: 'yellowOrange' },
+  { label: 'orangeRed', gradient: 'orangeRed' },
+  { label: 'redPurple', gradient: 'redPurple' },
+]
+
+const tableColumns = ['GRADIENT', 'PREVIEW'] as const
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  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>
+          {gradientRows.map(({ label, gradient }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <BgPreview gradient={gradient} />
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+    </Box>
+  ),
+}

package/docs/stories/components/BetaBanner.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import BetaBanner from '@components/BetaBanner'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof BetaBanner> = {
+  title: 'Components/BetaBanner',
+  component: BetaBanner,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+    docs: {
+      description: {
+        component:
+          'A compact informational banner shown while a feature is in beta. No props are required, so stories demonstrate recommended layout contexts.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 2 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof BetaBanner>
+
+export const Base: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<BetaBanner />
+        `.trim(),
+      },
+    },
+  },
+}
+
+function NarrowContainerRender() {
+  return (
+    <Box sx={{ width: 260 }}>
+      <BetaBanner />
+    </Box>
+  )
+}
+
+export const NarrowContainer: Story = {
+  name: 'narrow container',
+  render: NarrowContainerRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Box sx={{ width: 260 }}>
+  <BetaBanner />
+</Box>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function WithSectionHeadingRender() {
+  return (
+    <Box sx={{ width: 440, display: 'grid', gap: 1 }}>
+      <Typography variant="subtitle2" color="text.secondary">
+        Insights
+      </Typography>
+      <BetaBanner />
+    </Box>
+  )
+}
+
+export const WithSectionHeading: Story = {
+  name: 'with section heading',
+  render: WithSectionHeadingRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Box sx={{ width: 440, display: 'grid', gap: 1 }}>
+  <Typography variant="subtitle2" color="text.secondary">Insights</Typography>
+  <BetaBanner />
+</Box>
+        `.trim(),
+      },
+    },
+  },
+}
+
+const tableColumns = ['CONTEXT', 'PREVIEW'] as const
+
+const contextRows = [
+  {
+    label: 'Default width',
+    content: <BetaBanner />,
+  },
+  {
+    label: 'Constrained width (260px)',
+    content: (
+      <Box sx={{ width: 260 }}>
+        <BetaBanner />
+      </Box>
+    ),
+  },
+  {
+    label: 'Inside section heading',
+    content: (
+      <Box sx={{ width: 440, display: 'grid', gap: 1 }}>
+        <Typography variant="subtitle2" color="text.secondary">
+          Insights
+        </Typography>
+        <BetaBanner />
+      </Box>
+    ),
+  },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: () => (
+    <Box sx={{ maxWidth: 760, mx: 'auto' }}>
+      <StoryTable>
+        <StoryThead>
+          <StoryRow>
+            {tableColumns.map((header, index) => (
+              <StoryHeaderCell key={header} first={index === 0}>
+                {header}
+              </StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          {contextRows.map(({ label, content }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell sx={{ textAlign: 'left' }}>{content}</StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Use this component near page or section headers to indicate beta availability.</StoryHint>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Box sx={{ width: 440, display: 'grid', gap: 1 }}>
+  <Typography variant="subtitle2" color="text.secondary">Insights</Typography>
+  <BetaBanner />
+</Box>
+        `.trim(),
+      },
+    },
+  },
+}