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

package/docs/stories/components/StatusChip.stories.tsx

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import StatusChip from '@components/StatusChip'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+import { ChipProps } from '@components/StatusChip/type'
+
+const meta: Meta<typeof StatusChip> = {
+  title: 'Components/StatusChip',
+  component: StatusChip,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: { control: 'boolean' },
+    isSelected: { control: 'boolean', description: 'Expands chip to reveal copy icon' },
+    fullWidth: { control: 'boolean' },
+    expandDirection: {
+      control: 'radio',
+      options: ['left', 'right'],
+      description: 'Direction the copy icon expands toward',
+    },
+    textColor: { control: 'color' },
+    bgColor: { control: 'color' },
+    borderColor: { control: 'color' },
+    copyText: { control: 'text', description: 'Value copied to clipboard on click' },
+    children: { control: 'text' },
+    chipStyles: { table: { disable: true } },
+    containerStyles: { 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 StatusChip>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: {
+    children: 'Active',
+    bgColor: '#E6F7EE',
+    textColor: '#1A7A45',
+    borderColor: '#B0E4C8',
+  },
+}
+
+export const Selected: Story = {
+  args: {
+    children: 'LIVE-TXN-001',
+    bgColor: '#EFF5FF',
+    textColor: '#1A56DB',
+    borderColor: '#C3D9FF',
+    isSelected: true,
+    copyText: 'LIVE-TXN-001',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: 'Inactive',
+    bgColor: '#F5F5F5',
+    textColor: '#9E9E9E',
+    borderColor: '#E0E0E0',
+    disabled: true,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    children: undefined,
+    unknownText: 'unknown',
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+type ChipOverride = Partial<ChipProps>
+
+const tableColumns = ['STATUS', 'DEFAULT', 'SELECTED + COPY', 'DISABLED'] as const
+
+const statusRows: Array<{ label: string; base: ChipOverride }> = [
+  {
+    label: 'Success',
+    base: { children: 'Paid', bgColor: '#E6F7EE', textColor: '#1A7A45', borderColor: '#B0E4C8' },
+  },
+  {
+    label: 'Error',
+    base: { children: 'Failed', bgColor: '#FFF0F0', textColor: '#D32F2F', borderColor: '#FFCDD2' },
+  },
+  {
+    label: 'Warning',
+    base: { children: 'Pending', bgColor: '#FFF8E1', textColor: '#F57F17', borderColor: '#FFE082' },
+  },
+  {
+    label: 'Info',
+    base: { children: 'Processing', bgColor: '#EFF5FF', textColor: '#1A56DB', borderColor: '#C3D9FF' },
+  },
+  {
+    label: 'Neutral',
+    base: { children: 'Inactive', bgColor: '#F5F5F5', textColor: '#616161', borderColor: '#E0E0E0' },
+  },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  render: (args) => {
+    const renderChip = (override: ChipOverride = {}) => <StatusChip {...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>
+            {statusRows.map(({ label, base }) => (
+              <StoryRow key={label}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                <StoryCell>{renderChip(base)}</StoryCell>
+                <StoryCell>{renderChip({ ...base, isSelected: true, copyText: String(base.children) })}</StoryCell>
+                <StoryCell>{renderChip({ ...base, disabled: true })}</StoryCell>
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Click a chip to see the copy icon expand. Use Controls to toggle isSelected.</StoryHint>
+      </Box>
+    )
+  },
+  args: {},
+}

package/docs/stories/components/StatusLabel.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import StatusLabel from '@components/StatusLabel'
+import { ChargeStatus } from '@components/TableCells'
+
+const meta: Meta<typeof StatusLabel> = {
+  title: 'Components/StatusLabel',
+  component: StatusLabel,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: Object.values(ChargeStatus),
+    },
+    statusCode: {
+      control: 'select',
+      options: Object.values(ChargeStatus),
+    },
+    tooltip: {
+      control: 'text',
+    },
+  },
+  parameters: {
+    layout: 'centered',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof StatusLabel>
+
+export const Captured: Story = {
+  args: {
+    status: ChargeStatus.CAPTURED,
+    statusCode: 'CAPTURED',
+    tooltip: 'Charge captured successfully',
+  },
+  render: (args) => (
+    <Box sx={{ p: 1 }}>
+      <StatusLabel {...args} />
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<StatusLabel
+  status={ChargeStatus.CAPTURED}
+  statusCode="CAPTURED"
+  tooltip="Charge captured successfully"
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const Failed: Story = {
+  args: {
+    status: ChargeStatus.FAILED,
+    statusCode: 'FAILED',
+    tooltip: 'Charge failed',
+  },
+  render: (args) => (
+    <Box sx={{ p: 1 }}>
+      <StatusLabel {...args} />
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<StatusLabel
+  status={ChargeStatus.FAILED}
+  statusCode="FAILED"
+  tooltip="Charge failed"
+/>
+        `.trim(),
+      },
+    },
+  },
+}

package/docs/stories/components/Text.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Text from '@components/Text'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof Text> = {
+  title: 'Components/Text',
+  component: Text,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: 'text' },
+    color: {
+      control: 'select',
+      options: ['text.primary', 'text.secondary', 'text.disabled', 'primary.main', 'error.main', 'success.main'],
+      description: 'MUI color token or any CSS color string',
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right', 'justify'],
+    },
+    noWrap: { control: 'boolean', description: 'Truncate with ellipsis when text overflows' },
+  },
+  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 Text>
+
+// ──────────────────────────────────────────────
+// Focused / named stories
+
+export const Base: Story = {
+  args: { children: 'The quick brown fox jumps over the lazy dog' },
+}
+
+export const Secondary: Story = {
+  args: { children: 'Secondary text color', color: 'text.secondary' },
+}
+
+export const Error: Story = {
+  args: { children: 'Error text color', color: 'error.main' },
+}
+
+export const NoWrap: Story = {
+  args: {
+    children: 'This is a very long line of text that will be truncated with an ellipsis when it exceeds the container width',
+    noWrap: true,
+    sx: { maxWidth: 320 },
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['COLOR', 'SAMPLE'] as const
+
+type ColorRow = { label: string; color: string }
+
+const colorRows: ColorRow[] = [
+  { label: 'text.primary', color: 'text.primary' },
+  { label: 'text.secondary', color: 'text.secondary' },
+  { label: 'text.disabled', color: 'text.disabled' },
+  { label: 'primary.main', color: 'primary.main' },
+  { label: 'error.main', color: 'error.main' },
+  { label: 'success.main', color: 'success.main' },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: () => (
+    <Box sx={{ maxWidth: 720, mx: 'auto' }}>
+      <StoryTable>
+        <StoryThead>
+          <StoryRow>
+            {tableColumns.map((header, index) => (
+              <StoryHeaderCell key={header} first={index === 0}>
+                {header}
+              </StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          {colorRows.map(({ label, color }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell sx={{ textAlign: 'left' }}>
+                <Text color={color}>The quick brown fox jumps over the lazy dog</Text>
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Text is a styled MUI Typography (subtitle2). Use the Controls panel to experiment with color and alignment.</StoryHint>
+    </Box>
+  ),
+}

package/docs/stories/components/Toaster.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+import toast from 'react-hot-toast'
+import Toaster from '@components/Toaster'
+
+const meta: Meta<typeof Toaster> = {
+  title: 'Components/Toaster',
+  component: Toaster,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Toaster>
+
+export const Playground: Story = {
+  render: () => (
+    <Box>
+      <Stack direction="row" spacing={1.5}>
+        <Button
+          variant="contained"
+          onClick={() => {
+            toast.success('Saved successfully')
+          }}
+        >
+          Show success
+        </Button>
+        <Button
+          variant="outlined"
+          color="error"
+          onClick={() => {
+            toast.error('Unable to save changes')
+          }}
+        >
+          Show error
+        </Button>
+      </Stack>
+      <Toaster />
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Button onClick={() => toast.success('Saved successfully')}>
+  Show success
+</Button>
+
+<Button onClick={() => toast.error('Unable to save changes')}>
+  Show error
+</Button>
+
+<Toaster />
+        `.trim(),
+      },
+    },
+  },
+}

package/docs/stories/components/Tooltip.stories.tsx

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Tooltip from '@components/Tooltip'
+import type { TooltipProps } from '@mui/material/Tooltip'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const TriggerBox = ({ label }: { label: string }) => (
+  <Box
+    sx={{
+      px: 2,
+      py: 1,
+      border: '1px dashed #ccc',
+      borderRadius: 1,
+      cursor: 'default',
+      fontSize: 13,
+      color: '#555',
+    }}
+  >
+    {label}
+  </Box>
+)
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text', description: 'Content shown inside the tooltip' },
+    placement: {
+      control: 'select',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end',
+      ] as TooltipProps['placement'][],
+    },
+    children: { table: { disable: true } },
+    wrapperProps: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Tooltip>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: {
+    title: 'This is a tooltip',
+    placement: 'top',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Tooltip title="This is a tooltip" placement="top">
+  <Box>Hover me</Box>
+</Tooltip>
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => (
+    <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+      <Tooltip {...args}>
+        <TriggerBox label="Hover me" />
+      </Tooltip>
+    </Box>
+  ),
+}
+
+export const Bottom: Story = {
+  args: {
+    title: 'Tooltip below',
+    placement: 'bottom',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Tooltip title="Tooltip below" placement="bottom">
+  <Box>Hover me</Box>
+</Tooltip>
+        `.trim(),
+      },
+    },
+  },
+  render: (args) => (
+    <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+      <Tooltip {...args}>
+        <TriggerBox label="Hover me" />
+      </Tooltip>
+    </Box>
+  ),
+}
+
+export const WithRichContent: Story = {
+  name: 'with rich content',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Tooltip
+  placement="top"
+  title={
+    <Box>
+      <Typography variant="body2" fontWeight={600}>Transaction ID</Typography>
+      <Typography variant="caption">TXN-2024-00123</Typography>
+    </Box>
+  }
+>
+  <Box>Hover for details</Box>
+</Tooltip>
+        `.trim(),
+      },
+    },
+  },
+  args: {
+    placement: 'top',
+    title: (
+      <Box>
+        <Typography variant="body2" fontWeight={600}>
+          Transaction ID
+        </Typography>
+        <Typography variant="caption">TXN-2024-00123</Typography>
+      </Box>
+    ),
+  },
+  render: (args) => (
+    <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+      <Tooltip {...args}>
+        <TriggerBox label="Hover for details" />
+      </Tooltip>
+    </Box>
+  ),
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+type Placement = TooltipProps['placement']
+
+const tableColumns = ['PLACEMENT', 'PREVIEW'] as const
+
+const placementRows: Array<{ label: string; placement: Placement }> = [
+  { label: 'Top', placement: 'top' },
+  { label: 'Top-Start', placement: 'top-start' },
+  { label: 'Top-End', placement: 'top-end' },
+  { label: 'Bottom', placement: 'bottom' },
+  { label: 'Left', placement: 'left' },
+  { label: 'Right', placement: 'right' },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<Tooltip title="Top" placement="top"><Box>Hover me</Box></Tooltip>
+<Tooltip title="Bottom" placement="bottom"><Box>Hover me</Box></Tooltip>
+<Tooltip title="Left" placement="left"><Box>Hover me</Box></Tooltip>
+<Tooltip title="Right" placement="right"><Box>Hover me</Box></Tooltip>
+        `.trim(),
+      },
+    },
+  },
+  render: () => (
+    <Box>
+      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+        <StoryTable sx={{ width: 'auto' }}>
+          <StoryThead>
+            <StoryRow>
+              {tableColumns.map((header, index) => (
+                <StoryHeaderCell key={header} first={index === 0}>
+                  {header}
+                </StoryHeaderCell>
+              ))}
+            </StoryRow>
+          </StoryThead>
+
+          <StoryTbody>
+            {placementRows.map(({ label, placement }) => (
+              <StoryRow key={label}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                <StoryCell>
+                  <Tooltip title={`Placement: ${placement}`} placement={placement}>
+                    <TriggerBox label="Hover me" />
+                  </Tooltip>
+                </StoryCell>
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+      </Box>
+      <StoryHint>Hover each trigger to see the tooltip position.</StoryHint>
+    </Box>
+  ),
+}