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

package/docs/stories/components/DisplayAmount.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import DisplayAmount from '@components/DisplayAmount'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof DisplayAmount> = {
+  title: 'Components/DisplayAmount',
+  component: DisplayAmount,
+  tags: ['autodocs'],
+  argTypes: {
+    amount: {
+      control: { type: 'number' },
+      description: 'Numeric amount value',
+    },
+    currencyCode: {
+      control: 'text',
+      description: 'ISO currency code (e.g. USD, EUR, SAR)',
+    },
+  },
+  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 DisplayAmount>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: { amount: 1234.56, currencyCode: 'USD' },
+}
+
+export const Zero: Story = {
+  args: { amount: 0, currencyCode: 'USD' },
+}
+
+export const LargeAmount: Story = {
+  name: 'large amount',
+  args: { amount: 999999.99, currencyCode: 'EUR' },
+}
+
+export const SAR: Story = {
+  name: 'SAR currency',
+  args: { amount: 5000.0, currencyCode: 'SAR' },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['CURRENCY', 'AMOUNT'] as const
+
+const currencyRows: Array<{ label: string; currencyCode: string; amount: number }> = [
+  { label: 'USD', currencyCode: 'USD', amount: 1234.56 },
+  { label: 'EUR', currencyCode: 'EUR', amount: 9876.5 },
+  { label: 'SAR', currencyCode: 'SAR', amount: 500.0 },
+  { label: 'GBP', currencyCode: 'GBP', amount: 299.99 },
+  { label: 'Zero', currencyCode: 'USD', amount: 0 },
+  { label: 'Large', currencyCode: 'USD', amount: 1000000.0 },
+]
+
+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>
+          {currencyRows.map(({ label, currencyCode, amount }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <DisplayAmount amount={amount} currencyCode={currencyCode} />
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Use the Controls panel to try different amounts and currency codes.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/DockButton.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import DockButton from '@components/DockButton'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+// Simple colored-square SVG used as a stand-in icon in all stories
+const DEMO_ICON = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><rect width="22" height="22" rx="4" fill="%231976d2"/></svg>`
+const DEMO_ICON_2 = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><rect width="22" height="22" rx="4" fill="%23e53935"/></svg>`
+
+const meta: Meta<typeof DockButton> = {
+  title: 'Components/DockButton',
+  component: DockButton,
+  tags: ['autodocs'],
+  argTypes: {
+    iconUrl: { control: 'text', description: 'URL of the icon image' },
+    title: { control: 'text' },
+    isActive: { control: 'boolean' },
+    tooltipTitle: { control: 'boolean', description: 'Show title in a Tooltip instead of below the icon' },
+    height: { control: 'number' },
+    width: { control: 'number' },
+    iconSize: { control: 'number' },
+    onClick: { table: { disable: true } },
+    onContextMenu: { table: { disable: true } },
+  },
+  args: {
+    iconUrl: DEMO_ICON,
+    title: 'App',
+    isActive: false,
+    height: 51,
+    width: 51,
+    iconSize: 22,
+  },
+  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 DockButton>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {}
+
+export const Active: Story = {
+  args: { isActive: true },
+}
+
+export const WithTooltip: Story = {
+  name: 'with tooltip',
+  args: { tooltipTitle: true, title: 'Dashboard' },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['STATE', 'DEFAULT', 'ACTIVE'] as const
+
+const iconRows = [
+  { label: 'App 1', iconUrl: DEMO_ICON },
+  { label: 'App 2', iconUrl: DEMO_ICON_2 },
+]
+
+export const AllStates: Story = {
+  name: 'all states',
+  decorators: [],
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<DockButton iconUrl={iconUrl} title="App" />
+<DockButton iconUrl={iconUrl} title="App" isActive />
+<DockButton iconUrl={iconUrl} title="Dashboard" tooltipTitle />`.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>
+          {iconRows.map(({ label, iconUrl }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <DockButton iconUrl={iconUrl} title={label} />
+              </StoryCell>
+              <StoryCell>
+                <DockButton iconUrl={iconUrl} title={label} isActive />
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>The active dot appears below the icon when isActive is true.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/ExpandableSideBar.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import ExpandableSideBar from '@components/ExpandableSideBar'
+import type { Section } from '@components/ExpandableSideBar/type'
+
+const sections: Section[] = [
+  {
+    id: 'dashboard',
+    title: 'Dashboard',
+    subSections: [
+      { id: 'overview', title: 'Overview' },
+      { id: 'analytics', title: 'Analytics' },
+    ],
+  },
+  {
+    id: 'transactions',
+    title: 'Transactions',
+    subSections: [
+      { id: 'all', title: 'All Transactions' },
+      { id: 'pending', title: 'Pending' },
+      { id: 'refunds', title: 'Refunds' },
+    ],
+  },
+  {
+    id: 'settings',
+    title: 'Settings',
+    subSections: [
+      { id: 'profile', title: 'Profile' },
+      { id: 'security', title: 'Security' },
+    ],
+  },
+]
+
+const meta: Meta<typeof ExpandableSideBar> = {
+  title: 'Components/ExpandableSideBar',
+  component: ExpandableSideBar,
+  tags: ['autodocs'],
+  argTypes: {
+    isMaximized: { control: 'boolean', description: 'Expand the sidebar to show section titles' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ExpandableSideBar>
+
+// ──────────────────────────────────────────────
+// Named wrapper component
+
+const SidebarDemo = ({ isMaximized = true }: { isMaximized?: boolean }) => {
+  const [activeSection, setActiveSection] = useState('dashboard')
+  const [activeSubSection, setActiveSubSection] = useState('overview')
+
+  return (
+    <Box sx={{ display: 'flex', height: '100vh' }}>
+      <ExpandableSideBar
+        sections={sections}
+        isMaximized={isMaximized}
+        activeSection={activeSection}
+        activeSubSection={activeSubSection}
+        onClick={(sectionId, subSectionId) => {
+          setActiveSection(sectionId)
+          if (subSectionId) setActiveSubSection(subSectionId)
+        }}
+      />
+      <Box sx={{ flex: 1, p: 4, color: 'text.secondary' }}>
+        Active: <strong>{activeSection}</strong> → {activeSubSection}
+      </Box>
+    </Box>
+  )
+}
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Expanded: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<ExpandableSideBar
+  sections={sections}
+  isMaximized={true}
+  activeSection={activeSection}
+  activeSubSection={activeSubSection}
+  onClick={(sectionId, subSectionId) => {
+    setActiveSection(sectionId)
+    if (subSectionId) setActiveSubSection(subSectionId)
+  }}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <SidebarDemo isMaximized />,
+}
+
+export const Collapsed: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `<ExpandableSideBar sections={sections} isMaximized={false} onClick={handleClick} />`.trim(),
+      },
+    },
+  },
+  render: () => <SidebarDemo isMaximized={false} />,
+}

package/docs/stories/components/FlippingCard.stories.tsx

@@ -0,0 +1,122 @@
+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 FlippingCard from '@components/FlippingCard'
+import { StoryHint } from '@storybook-utils'
+
+const FrontFace = () => (
+  <Box
+    sx={{
+      width: 220,
+      height: 140,
+      borderRadius: 2,
+      background: 'linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}
+  >
+    <Typography variant="h6" color="white" fontWeight={700}>
+      Front
+    </Typography>
+  </Box>
+)
+
+const BackFace = () => (
+  <Box
+    sx={{
+      width: 220,
+      height: 140,
+      borderRadius: 2,
+      background: 'linear-gradient(135deg, #e53935 0%, #ef9a9a 100%)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}
+  >
+    <Typography variant="h6" color="white" fontWeight={700}>
+      Back
+    </Typography>
+  </Box>
+)
+
+const meta: Meta<typeof FlippingCard> = {
+  title: 'Components/FlippingCard',
+  component: FlippingCard,
+  tags: ['autodocs'],
+  argTypes: {
+    isFlipped: { control: 'boolean', description: 'When true the back face is shown' },
+    frontCard: { table: { disable: true } },
+    backCard: { table: { disable: true } },
+  },
+  args: {
+    isFlipped: false,
+    frontCard: <FrontFace />,
+    backCard: <BackFace />,
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box id="sehrish-box" sx={{ display: 'flex', justifyContent: 'center', width: '100%', py: 4 }}>
+        <Box sx={{ width: 'max-content' }}>
+          <Story />
+        </Box>
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof FlippingCard>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Front: Story = {
+  args: { isFlipped: false },
+}
+
+export const Flipped: Story = {
+  args: { isFlipped: true },
+}
+
+// ──────────────────────────────────────────────
+// Interactive
+
+export const Interactive: Story = {
+  name: 'interactive flip',
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [flipped, setFlipped] = useState(false)
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
+        <FlippingCard isFlipped={flipped} frontCard={<FrontFace />} backCard={<BackFace />} />
+        <Button variant="outlined" size="small" onClick={() => setFlipped((v) => !v)}>
+          {flipped ? 'Show Front' : 'Flip Card'}
+        </Button>
+        <StoryHint>Click the button to animate the 3D flip.</StoryHint>
+      </Box>
+    )
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [flipped, setFlipped] = useState(false)
+
+<FlippingCard
+  isFlipped={flipped}
+  frontCard={<MyFrontContent />}
+  backCard={<MyBackContent />}
+/>
+<Button onClick={() => setFlipped(v => !v)}>Flip</Button>`.trim(),
+      },
+    },
+  },
+}

package/docs/stories/components/HeatMap.stories.tsx

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import HeatMap from '@components/HeatMap'
+import type { HeatMapProps, Data } from '@components/HeatMap/type'
+import { StoryHint } from '@storybook-utils'
+
+// ── Mock data ──────────────────────────────────────────────────────────────────
+const hours = ['00', '04', '08', '12', '16', '20']
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+// Fixed intensity values so the story is deterministic
+const intensityMatrix: number[][] = [
+  [10, 20, 55, 80, 60, 30, 5],
+  [15, 35, 70, 95, 75, 45, 10],
+  [5, 25, 60, 85, 65, 35, 8],
+  [20, 40, 75, 100, 80, 50, 15],
+  [12, 30, 65, 90, 70, 40, 10],
+  [8, 18, 50, 75, 55, 25, 5],
+]
+
+const buildSeries = (matrix: number[][]): HeatMapProps['series'] => {
+  const series: HeatMapProps['series'] = {}
+  hours.forEach((hour, hi) => {
+    series[hour] = {}
+    days.forEach((day, di) => {
+      const v = matrix[hi][di]
+      series[hour][day] = { value: v, percentage: `${v}%`, colorOpacityDegree: v }
+    })
+  })
+  return series
+}
+
+const mockSeries = buildSeries(intensityMatrix)
+
+const meta: Meta<typeof HeatMap> = {
+  title: 'Components/HeatMap',
+  component: HeatMap,
+  tags: ['autodocs'],
+  argTypes: {
+    isLoading: { control: 'boolean', description: 'Show skeleton loading state instead of data cells' },
+  },
+  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 HeatMap>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: {
+    isLoading: false,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<HeatMap
+  xAxis={{ labels: ['00', '04', '08', '12', '16', '20'] }}
+  yAxis={{ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }}
+  series={series}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => <HeatMap {...args} xAxis={{ labels: hours }} yAxis={{ labels: days }} series={mockSeries} />,
+}
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `<HeatMap xAxis={xAxis} yAxis={yAxis} series={series} isLoading />`,
+      },
+    },
+  },
+  render: (args) => <HeatMap {...args} xAxis={{ labels: hours }} yAxis={{ labels: days }} series={mockSeries} />,
+}
+
+export const WithTooltip: Story = {
+  args: {
+    isLoading: false,
+  },
+  name: 'with custom tooltip',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<HeatMap
+  xAxis={xAxis}
+  yAxis={yAxis}
+  series={series}
+  tooltip={{
+    render: (data, x, y) => (
+      <Box sx={{ p: 1, fontSize: 12 }}>
+        <strong>{y} at {x}:00</strong>
+        <div>Value: {data.value}</div>
+      </Box>
+    ),
+  }}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => (
+    <HeatMap
+      {...args}
+      xAxis={{ labels: hours }}
+      yAxis={{ labels: days }}
+      series={mockSeries}
+      tooltip={{
+        render: (data: Data, x, y) => (
+          <Box sx={{ p: 1, fontSize: 12 }}>
+            <div>
+              <strong>
+                {y} at {x}:00
+              </strong>
+            </div>
+            <div>Value: {data.value}</div>
+            <div>Intensity: {data.colorOpacityDegree}%</div>
+          </Box>
+        ),
+      }}
+    />
+  ),
+}
+
+export const WithCustomLabels: Story = {
+  args: {
+    isLoading: false,
+  },
+  name: 'with custom label renderers',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<HeatMap
+  xAxis={{ labels: hours, render: (label) => <strong>{label}h</strong> }}
+  yAxis={{ labels: days, render: (label) => <em>{label}</em> }}
+  series={series}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => (
+    <HeatMap
+      {...args}
+      xAxis={{
+        labels: hours,
+        render: (label) => <strong>{label}h</strong>,
+      }}
+      yAxis={{
+        labels: days,
+        render: (label) => <em>{label}</em>,
+      }}
+      series={mockSeries}
+    />
+  ),
+}
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  render: () => (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 960, mx: 'auto' }}>
+      <Box>
+        <Box sx={{ mb: 1, fontWeight: 600 }}>Default</Box>
+        <HeatMap xAxis={{ labels: hours }} yAxis={{ labels: days }} series={mockSeries} />
+      </Box>
+
+      <Box>
+        <Box sx={{ mb: 1, fontWeight: 600 }}>Loading</Box>
+        <HeatMap xAxis={{ labels: hours }} yAxis={{ labels: days }} series={mockSeries} isLoading />
+      </Box>
+
+      <StoryHint>Hover cells in the "with custom tooltip" story to see tooltip content.</StoryHint>
+    </Box>
+  ),
+}