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

package/docs/stories/components/ProgressRing.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import ProgressRing from '@components/ProgressRing'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof ProgressRing> = {
+  title: 'Components/ProgressRing',
+  component: ProgressRing,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'Progress percentage as a string, e.g. "75" or "75%"',
+    },
+    label: {
+      control: 'text',
+      description: 'Label shown below the percentage inside the ring',
+    },
+    size: {
+      control: { type: 'range', min: 80, max: 300, step: 8 },
+      description: 'Diameter of the ring in pixels (default 172)',
+    },
+    strokeWidth: {
+      control: { type: 'range', min: 8, max: 40, step: 2 },
+      description: 'Thickness of the ring stroke (default 22)',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Shows skeleton loading state inside the ring',
+    },
+  },
+  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 ProgressRing>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: {
+    value: '75',
+    label: 'Completion',
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    value: undefined,
+    label: 'No data',
+  },
+}
+
+export const Complete: Story = {
+  args: {
+    value: '100',
+    label: 'Done',
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    label: 'Loading…',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    value: '60',
+    label: 'Progress',
+    size: 100,
+    strokeWidth: 12,
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+type RingOverride = Partial<Parameters<typeof ProgressRing>[0]>
+
+const tableColumns = ['VALUE', 'DEFAULT SIZE', 'SMALL', 'WITH LABEL'] as const
+
+const valueRows: Array<{ label: string; value: string | undefined }> = [
+  { label: 'Empty', value: undefined },
+  { 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',
+  render: (args) => {
+    const renderRing = (override: RingOverride = {}) => <ProgressRing {...args} {...override} />
+
+    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>
+            {valueRows.map(({ label, value }) => (
+              <StoryRow key={label}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                <StoryCell>{renderRing({ value })}</StoryCell>
+                <StoryCell>{renderRing({ value, size: 100, strokeWidth: 12 })}</StoryCell>
+                <StoryCell>{renderRing({ value, label: 'Completion' })}</StoryCell>
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Use the Controls panel to scrub size, strokeWidth, and toggle isLoading.</StoryHint>
+      </Box>
+    )
+  },
+  args: {},
+}

package/docs/stories/components/SimpleDialog.stories.tsx

@@ -0,0 +1,170 @@
+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 Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
+import SimpleDialog from '@components/SimpleDialog'
+import { StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof SimpleDialog> = {
+  title: 'Components/SimpleDialog',
+  component: SimpleDialog,
+  tags: ['autodocs'],
+  argTypes: {
+    open: { table: { disable: true } },
+    children: { table: { disable: true } },
+    selectedValue: { table: { disable: true } },
+    onClose: { 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 SimpleDialog>
+
+// ──────────────────────────────────────────────
+// Base — button trigger, starts closed
+
+export const Base: Story = {
+  name: 'base',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+import { useState } from 'react'
+import SimpleDialog from '@tapster/os-shared'
+
+const [open, setOpen] = useState(false)
+
+<Button variant="contained" onClick={() => setOpen(true)}>
+  Open Dialog
+</Button>
+
+<SimpleDialog open={open} onClose={() => setOpen(false)}>
+  <Box sx={{ p: 3, minWidth: 320 }}>
+    <Typography variant="h6" mb={2}>Confirm Action</Typography>
+    <Typography variant="body2" color="text.secondary" mb={3}>
+      Are you sure you want to continue? This action cannot be undone.
+    </Typography>
+    <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+      <Button variant="outlined" onClick={() => setOpen(false)}>Cancel</Button>
+      <Button variant="contained" onClick={() => setOpen(false)}>Confirm</Button>
+    </Box>
+  </Box>
+</SimpleDialog>
+        `.trim(),
+      },
+    },
+  },
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [open, setOpen] = useState(false)
+
+    return (
+      <Box sx={{ p: 4 }}>
+        <Button variant="contained" onClick={() => setOpen(true)}>
+          Open Dialog
+        </Button>
+
+        <SimpleDialog open={open} onClose={() => setOpen(false)}>
+          <Box sx={{ p: 3, minWidth: 320 }}>
+            <Typography variant="h6" mb={2}>
+              Confirm Action
+            </Typography>
+            <Typography variant="body2" color="text.secondary" mb={3}>
+              Are you sure you want to continue? This action cannot be undone.
+            </Typography>
+            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+              <Button variant="outlined" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="contained" onClick={() => setOpen(false)}>
+                Confirm
+              </Button>
+            </Box>
+          </Box>
+        </SimpleDialog>
+
+        <StoryHint>Click the button to open. Click outside or Cancel to close.</StoryHint>
+      </Box>
+    )
+  },
+}
+
+// ──────────────────────────────────────────────
+// With form
+
+export const WithForm: Story = {
+  name: 'with form',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+import { useState } from 'react'
+import SimpleDialog from '@tapster/os-shared'
+
+const [open, setOpen] = useState(false)
+
+<Button variant="contained" onClick={() => setOpen(true)}>
+  Open Form Dialog
+</Button>
+
+<SimpleDialog open={open} onClose={() => setOpen(false)}>
+  <Box sx={{ p: 3, minWidth: 360, display: 'flex', flexDirection: 'column', gap: 2 }}>
+    <Typography variant="h6">Add Details</Typography>
+    <TextField label="Name" size="small" fullWidth />
+    <TextField label="Email" size="small" fullWidth type="email" />
+    <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+      <Button variant="outlined" onClick={() => setOpen(false)}>Cancel</Button>
+      <Button variant="contained" onClick={() => setOpen(false)}>Save</Button>
+    </Box>
+  </Box>
+</SimpleDialog>
+        `.trim(),
+      },
+    },
+  },
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [open, setOpen] = useState(false)
+
+    return (
+      <Box sx={{ p: 4 }}>
+        <Button variant="contained" onClick={() => setOpen(true)}>
+          Open Form Dialog
+        </Button>
+
+        <SimpleDialog open={open} onClose={() => setOpen(false)}>
+          <Box sx={{ p: 3, minWidth: 360, display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Typography variant="h6">Add Details</Typography>
+            <TextField label="Name" size="small" fullWidth />
+            <TextField label="Email" size="small" fullWidth type="email" />
+            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+              <Button variant="outlined" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="contained" onClick={() => setOpen(false)}>
+                Save
+              </Button>
+            </Box>
+          </Box>
+        </SimpleDialog>
+
+        <StoryHint>Click the button to open the form dialog.</StoryHint>
+      </Box>
+    )
+  },
+}

package/docs/stories/components/Skeleton.stories.tsx

@@ -0,0 +1,253 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Skeleton from '@components/Skeleton'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+import type { SkeletonProps } from '@mui/material/Skeleton'
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['text', 'rectangular', 'circular', 'rounded'],
+      description: 'Shape of the skeleton placeholder',
+    },
+    animation: {
+      control: 'select',
+      options: ['pulse', 'wave', false],
+      description: '`pulse` fades in/out, `wave` sweeps across, `false` disables animation',
+    },
+    width: { control: 'number' },
+    height: { control: 'number' },
+  },
+  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 Skeleton>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    width: 200,
+  },
+}
+
+export const Circular: Story = {
+  args: {
+    variant: 'circular',
+    width: 48,
+    height: 48,
+  },
+}
+
+export const Rectangular: Story = {
+  args: {
+    variant: 'rectangular',
+    width: 200,
+    height: 80,
+  },
+}
+
+export const Rounded: Story = {
+  args: {
+    variant: 'rounded',
+    width: 200,
+    height: 40,
+  },
+}
+
+export const Wave: Story = {
+  args: {
+    variant: 'rounded',
+    animation: 'wave',
+    width: 200,
+    height: 40,
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+type SkeletonOverride = Partial<SkeletonProps>
+
+const tableColumns = ['VARIANT', 'SMALL', 'MEDIUM', 'LARGE'] as const
+
+const variantRows: Array<{ label: string; base: SkeletonOverride; sizes: SkeletonOverride[] }> = [
+  {
+    label: 'Text',
+    base: { variant: 'text' },
+    sizes: [{ width: 80 }, { width: 160 }, { width: 240 }],
+  },
+  {
+    label: 'Rounded',
+    base: { variant: 'rounded' },
+    sizes: [
+      { width: 60, height: 24 },
+      { width: 120, height: 36 },
+      { width: 200, height: 48 },
+    ],
+  },
+  {
+    label: 'Rectangular',
+    base: { variant: 'rectangular' },
+    sizes: [
+      { width: 60, height: 40 },
+      { width: 120, height: 60 },
+      { width: 200, height: 80 },
+    ],
+  },
+  {
+    label: 'Circular',
+    base: { variant: 'circular' },
+    sizes: [
+      { width: 24, height: 24 },
+      { width: 40, height: 40 },
+      { width: 56, height: 56 },
+    ],
+  },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Skeleton variant="text" width={200} />
+<Skeleton variant="rounded" width={200} height={40} />
+<Skeleton variant="rectangular" width={200} height={80} />
+<Skeleton variant="circular" width={48} height={48} />
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => {
+    const renderSkeleton = (override: SkeletonOverride = {}) => <Skeleton {...args} {...override} />
+
+    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, base, sizes }) => (
+              <StoryRow key={label}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                {sizes.map((size, index) => (
+                  <StoryCell key={`${label}-${index}`}>{renderSkeleton({ ...base, ...size })}</StoryCell>
+                ))}
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Wrap content in Skeleton during loading states to preserve layout.</StoryHint>
+      </Box>
+    )
+  },
+  args: {},
+}
+
+// ──────────────────────────────────────────────
+// Real-world layout examples
+
+export const CardSkeleton: Story = {
+  name: 'card layout',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Box sx={{ width: 300, p: 2, display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+    <Skeleton variant="circular" width={40} height={40} />
+    <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+      <Skeleton variant="text" width="60%" />
+      <Skeleton variant="text" width="40%" />
+    </Box>
+  </Box>
+  <Skeleton variant="rectangular" width="100%" height={120} />
+  <Skeleton variant="text" width="80%" />
+  <Skeleton variant="text" width="60%" />
+</Box>
+        `.trim(),
+      },
+    },
+  },
+  render: () => (
+    <Box sx={{ width: 300, p: 2, display: 'flex', flexDirection: 'column', gap: 1.5, border: '1px solid #eee', borderRadius: 2 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+        <Skeleton variant="circular" width={40} height={40} />
+        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+          <Skeleton variant="text" width="60%" />
+          <Skeleton variant="text" width="40%" />
+        </Box>
+      </Box>
+      <Skeleton variant="rectangular" width="100%" height={120} />
+      <Skeleton variant="text" width="80%" />
+      <Skeleton variant="text" width="60%" />
+    </Box>
+  ),
+}
+
+export const TableRowSkeleton: Story = {
+  name: 'table row layout',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+  {[1, 2, 3, 4].map((row) => (
+    <Box key={row} sx={{ display: 'flex', gap: 2, alignItems: 'center', py: 1, borderBottom: '1px solid #f0f0f0' }}>
+      <Skeleton variant="circular" width={32} height={32} />
+      <Skeleton variant="text" width={120} />
+      <Skeleton variant="rounded" width={80} height={24} />
+      <Box sx={{ flex: 1 }} />
+      <Skeleton variant="text" width={60} />
+    </Box>
+  ))}
+</Box>
+        `.trim(),
+      },
+    },
+  },
+  render: () => (
+    <Box sx={{ width: 600, display: 'flex', flexDirection: 'column', gap: 1 }}>
+      {[1, 2, 3, 4].map((row) => (
+        <Box key={row} sx={{ display: 'flex', gap: 2, alignItems: 'center', py: 1, borderBottom: '1px solid #f0f0f0' }}>
+          <Skeleton variant="circular" width={32} height={32} />
+          <Skeleton variant="text" width={120} />
+          <Skeleton variant="rounded" width={80} height={24} />
+          <Box sx={{ flex: 1 }} />
+          <Skeleton variant="text" width={60} />
+        </Box>
+      ))}
+    </Box>
+  ),
+}

package/docs/stories/components/StatusButton.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import StatusButton from '@components/StatusButton'
+
+const dropdownOptions = [
+  { label: 'All', status: 'all' },
+  { label: 'Captured', status: 'captured' },
+  { label: 'Failed', status: 'failed' },
+]
+
+const meta: Meta<typeof StatusButton> = {
+  title: 'Components/StatusButton',
+  component: StatusButton,
+  tags: ['autodocs'],
+  argTypes: {
+    onButtonBodyClick: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'centered',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof StatusButton>
+
+export const Base: Story = {
+  args: {
+    label: 'Charges',
+    icon: 'captured',
+    variant: 'inActive',
+    badgeCount: 42,
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<StatusButton
+  label="Charges"
+  icon="captured"
+  variant="inActive"
+  badgeCount={42}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const ActiveWithDropdown: Story = {
+  name: 'active with dropdown',
+  args: {
+    label: 'Status',
+    icon: 'captured',
+    variant: 'active',
+    badgeCount: 18,
+    dropdownOptions,
+    selectedStatus: 'captured',
+  },
+  render: (args) => (
+    <Box sx={{ width: 260, display: 'flex', justifyContent: 'center' }}>
+      <StatusButton {...args} />
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<StatusButton
+  label="Status"
+  icon="captured"
+  variant="active"
+  badgeCount={18}
+  dropdownOptions={dropdownOptions}
+  selectedStatus="captured"
+/>
+        `.trim(),
+      },
+    },
+  },
+}