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

package/docs/stories/components/inputs/NestedDropdown.stories.tsx

@@ -0,0 +1,143 @@
+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 type { ColumnViewProps } from '@types'
+import NestedDropdown from '@components/NestedDropdown'
+
+const menuItems: ColumnViewProps[] = [
+  {
+    name: 'charges',
+    label: 'Charges',
+    selected: false,
+    menuItems: [
+      { name: 'charge_amount', label: 'Charge amount', selected: false },
+      { name: 'charge_status', label: 'Charge status', selected: false },
+    ],
+  },
+  {
+    name: 'refunds',
+    label: 'Refunds',
+    selected: false,
+    menuItems: [
+      { name: 'refund_amount', label: 'Refund amount', selected: false },
+      { name: 'refund_reason', label: 'Refund reason', selected: false },
+    ],
+  },
+]
+
+const meta: Meta<typeof NestedDropdown> = {
+  title: 'Components/Inputs/NestedDropdown',
+  component: NestedDropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    menuItems: { table: { disable: true } },
+    onSelect: { table: { disable: true } },
+    updatedList: { table: { disable: true } },
+    footer: { 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 NestedDropdown>
+
+function getSelectedLeafLabels(items: ColumnViewProps[]): string[] {
+  const labels: string[] = []
+
+  const walk = (nodes: ColumnViewProps[]) => {
+    nodes.forEach((node) => {
+      const hasChildren = Boolean(node.menuItems?.length)
+      if (hasChildren) {
+        walk(node.menuItems || [])
+        return
+      }
+      if (node.selected) {
+        labels.push(String(node.label || node.name))
+      }
+    })
+  }
+
+  walk(items)
+  return labels
+}
+
+function BaseRender(args: { placement?: 'left' | 'right' }) {
+  const [selection, setSelection] = useState('No changes yet')
+
+  return (
+    <Box sx={{ display: 'grid', gap: 1 }}>
+      <NestedDropdown
+        title="Columns"
+        menuItems={menuItems}
+        placement={args.placement}
+        updatedList={(items) => {
+          const selectedLabels = getSelectedLeafLabels(items)
+          setSelection(selectedLabels.length ? `Selected: ${selectedLabels.join(', ')}` : 'No changes yet')
+        }}
+      />
+      <Typography variant="caption" color="text.secondary">
+        {selection}
+      </Typography>
+    </Box>
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<NestedDropdown
+  title="Columns"
+  menuItems={menuItems}
+  placement="right"
+  updatedList={(items) => {
+    const selectedLabels = getSelectedLeafLabels(items)
+    setSelection(selectedLabels.length ? 'Selected: ' + selectedLabels.join(', ') : 'No changes yet')
+  }}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const LeftPlacement: Story = {
+  name: 'left placement',
+  render: BaseRender,
+  args: {
+    placement: 'left',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+<NestedDropdown
+  title="Columns"
+  menuItems={menuItems}
+  placement="left"
+  updatedList={(items) => {
+    const selectedLabels = getSelectedLeafLabels(items)
+    setSelection(selectedLabels.length ? 'Selected: ' + selectedLabels.join(', ') : 'No changes yet')
+  }}
+/>
+        `.trim(),
+      },
+    },
+  },
+}

package/docs/stories/components/inputs/OTPInput.stories.tsx

@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import OTPInput from '@components/OTPInput'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof OTPInput> = {
+  title: 'Components/Inputs/OTPInput',
+  component: OTPInput,
+  tags: ['autodocs'],
+  argTypes: {
+    numInputs: {
+      control: 'select',
+      options: [4, 6, 8],
+      description: 'Total number of OTP digits',
+    },
+    separateAfter: {
+      control: 'number',
+      description: 'Insert separator (–) after this many digits',
+    },
+    isInputSecure: {
+      control: 'boolean',
+      description: 'Mask digits as a password field',
+    },
+    isInputNum: {
+      control: 'boolean',
+      description: 'Restrict input to numbers only',
+    },
+    hasErrored: {
+      control: 'boolean',
+      description: 'Show error styling on all inputs',
+    },
+    onChange: { table: { disable: true } },
+    onSubmitOtp: { table: { disable: true } },
+    inputProps: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+        <Box sx={{ width: 340 }}>
+          <Story />
+        </Box>
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof OTPInput>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: {
+    numInputs: 6,
+    separateAfter: 3,
+    isInputSecure: true,
+    isInputNum: true,
+  },
+}
+
+export const Visible: Story = {
+  name: 'visible digits',
+  args: {
+    numInputs: 6,
+    separateAfter: 3,
+    isInputSecure: false,
+    isInputNum: true,
+  },
+}
+
+export const WithError: Story = {
+  name: 'with error',
+  args: {
+    numInputs: 6,
+    separateAfter: 3,
+    isInputSecure: false,
+    hasErrored: true,
+  },
+}
+
+export const FourDigit: Story = {
+  name: '4-digit',
+  args: {
+    numInputs: 4,
+    separateAfter: 2,
+    isInputSecure: true,
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+type OTPOverride = Partial<Parameters<typeof OTPInput>[0]>
+
+const tableColumns = ['VARIANT', 'PREVIEW'] as const
+
+const stateRows: Array<{ label: string; override: OTPOverride }> = [
+  { label: '6-digit (secure)', override: { numInputs: 6, separateAfter: 3, isInputSecure: true } },
+  { label: '6-digit (visible)', override: { numInputs: 6, separateAfter: 3, isInputSecure: false } },
+  { label: '4-digit', override: { numInputs: 4, separateAfter: 2, isInputSecure: true } },
+  { label: 'Error state', override: { numInputs: 6, separateAfter: 3, isInputSecure: false, hasErrored: true } },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  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>
+          {stateRows.map(({ label, override }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <OTPInput {...args} {...override} />
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Use the Controls panel to change numInputs, security, and error state.</StoryHint>
+    </Box>
+  ),
+  args: {},
+}

package/docs/stories/components/inputs/PartnersFilter.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import { PartnersFilter } from '@components/PartnersFilter'
+
+const filterOptions = [
+  { label: 'Apple Pay', value: 'applePay' },
+  { label: 'Google Pay', value: 'googlePay' },
+  { label: 'Samsung Pay', value: 'samsungPay' },
+  { label: 'Visa', value: 'visa' },
+  { label: 'Mastercard', value: 'mastercard' },
+]
+
+const meta: Meta<typeof PartnersFilter> = {
+  title: 'Components/Inputs/PartnersFilter',
+  component: PartnersFilter,
+  tags: ['autodocs'],
+  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 PartnersFilter>
+
+// ──────────────────────────────────────────────
+// Named wrapper components
+
+const PartnersFilterBase = () => {
+  const [filters, setFilters] = useState<Record<string, boolean | undefined>>({})
+
+  return (
+    <Box sx={{ width: 220, border: '1px solid #F2F2F2', borderRadius: 1 }}>
+      <PartnersFilter
+        options={filterOptions}
+        selectedFilters={filters}
+        onChange={(newFilters) => setFilters((prev) => ({ ...prev, ...newFilters }))}
+      />
+    </Box>
+  )
+}
+
+const PartnersFilterPreSelected = () => {
+  const [filters, setFilters] = useState<Record<string, boolean | undefined>>({
+    applePay: true,
+    visa: false,
+  })
+
+  return (
+    <Box sx={{ width: 220, border: '1px solid #F2F2F2', borderRadius: 1 }}>
+      <PartnersFilter
+        options={filterOptions}
+        selectedFilters={filters}
+        onChange={(newFilters) => setFilters((prev) => ({ ...prev, ...newFilters }))}
+      />
+    </Box>
+  )
+}
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [filters, setFilters] = useState({})
+
+<PartnersFilter
+  options={[
+    { label: 'Apple Pay', value: 'applePay' },
+    { label: 'Google Pay', value: 'googlePay' },
+  ]}
+  selectedFilters={filters}
+  onChange={(newFilters) => setFilters((prev) => ({ ...prev, ...newFilters }))}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <PartnersFilterBase />,
+}
+
+export const PreSelected: Story = {
+  name: 'with pre-selected filters',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+// true = Available, false = Not Available, undefined = All
+const [filters, setFilters] = useState({ applePay: true, visa: false })
+
+<PartnersFilter
+  options={filterOptions}
+  selectedFilters={filters}
+  onChange={(newFilters) => setFilters((prev) => ({ ...prev, ...newFilters }))}
+/>
+        `.trim(),
+      },
+    },
+  },
+  render: () => <PartnersFilterPreSelected />,
+}

package/docs/stories/components/inputs/RadioButton.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import { RadioButton } from '@components/RadioButton'
+import { RadioButtonProps } from '@components/RadioButton/type'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof RadioButton> = {
+  title: 'Components/Inputs/RadioButton',
+  component: RadioButton,
+  tags: ['autodocs'],
+  argTypes: {
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    showRipple: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    iconSize: { control: 'number', description: 'Icon size in px' },
+    checkedColor: { control: 'color' },
+    disabledColor: { control: 'color' },
+    hoverColor: { control: 'color' },
+    onChange: { table: { disable: true } },
+    customCheckedIcon: { 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 RadioButton>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: { checked: false },
+}
+
+export const Checked: Story = {
+  args: { checked: true },
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+}
+
+export const DisabledChecked: Story = {
+  name: 'Disabled (checked)',
+  args: { checked: true, disabled: true },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+type RadioOverride = Partial<RadioButtonProps>
+
+const tableColumns = ['SIZE', 'UNCHECKED', 'CHECKED', 'DISABLED'] as const
+
+const sizeRows: Array<{ label: string; size: 'small' | 'medium' | 'large'; cells: RadioOverride[] }> = [
+  {
+    label: 'Small',
+    size: 'small',
+    cells: [
+      { size: 'small', checked: false },
+      { size: 'small', checked: true },
+      { size: 'small', disabled: true },
+    ],
+  },
+  {
+    label: 'Medium',
+    size: 'medium',
+    cells: [
+      { size: 'medium', checked: false },
+      { size: 'medium', checked: true },
+      { size: 'medium', disabled: true },
+    ],
+  },
+  {
+    label: 'Large',
+    size: 'large',
+    cells: [
+      { size: 'large', checked: false },
+      { size: 'large', checked: true },
+      { size: 'large', disabled: true },
+    ],
+  },
+]
+
+export const AllStates: Story = {
+  name: 'all states',
+  decorators: [],
+  render: (args) => {
+    const renderRadio = (override: RadioOverride = {}) => <RadioButton {...args} {...override} />
+
+    return (
+      <Box sx={{ maxWidth: 600, mx: 'auto' }}>
+        <StoryTable>
+          <StoryThead>
+            <StoryRow>
+              {tableColumns.map((header, index) => (
+                <StoryHeaderCell key={header} first={index === 0}>
+                  {header}
+                </StoryHeaderCell>
+              ))}
+            </StoryRow>
+          </StoryThead>
+
+          <StoryTbody>
+            {sizeRows.map(({ label, cells }) => (
+              <StoryRow key={label}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                {cells.map((override, index) => (
+                  <StoryCell key={`${label}-${index}`}>{renderRadio(override)}</StoryCell>
+                ))}
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Use the Controls panel to change color, size, and ripple.</StoryHint>
+      </Box>
+    )
+  },
+  args: {},
+}

package/docs/stories/components/inputs/RadioGroup.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import { RadioGroup } from '@components/RadioGroup'
+import { RadioOption } from '@components/RadioGroup/type'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const baseOptions: RadioOption[] = [
+  { value: 'option_a', label: 'Option A' },
+  { value: 'option_b', label: 'Option B' },
+  { value: 'option_c', label: 'Option C' },
+]
+
+const optionsWithDisabled: RadioOption[] = [
+  { value: 'option_a', label: 'Option A' },
+  { value: 'option_b', label: 'Option B' },
+  { value: 'option_c', label: 'Option C (disabled)', disabled: true },
+]
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/Inputs/RadioGroup',
+  component: RadioGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    layout: {
+      control: 'radio',
+      options: ['vertical', 'horizontal'],
+    },
+    labelPosition: {
+      control: 'select',
+      options: ['start', 'end', 'top', 'bottom'],
+    },
+    spacing: { control: 'number', description: 'Gap between items (MUI spacing units)' },
+    showHoverEffects: { control: 'boolean' },
+    onOptionChange: { table: { disable: true } },
+    onChange: { table: { disable: true } },
+    options: { table: { disable: true } },
+    customLabelRenderer: { table: { disable: true } },
+    customRadioProps: { table: { disable: true } },
+  },
+  args: {
+    options: baseOptions,
+    defaultValue: 'option_a',
+    size: 'small',
+    layout: 'vertical',
+    labelPosition: 'end',
+    spacing: 0,
+    showHoverEffects: true,
+  },
+  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 RadioGroup>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  name: 'base',
+  args: { defaultValue: 'option_a' },
+}
+
+export const Horizontal: Story = {
+  args: { layout: 'horizontal', spacing: 2 },
+}
+
+export const WithTitle: Story = {
+  name: 'with title',
+  args: { title: 'Choose an option' },
+}
+
+export const WithDisabledOption: Story = {
+  name: 'with disabled option',
+  args: { options: optionsWithDisabled },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['LAYOUT', 'DEFAULT', 'WITH DISABLED'] as const
+
+const layoutRows: Array<{
+  label: string
+  layout: 'vertical' | 'horizontal'
+  spacing?: number
+}> = [
+  { label: 'Vertical', layout: 'vertical' },
+  { label: 'Horizontal', layout: 'horizontal', spacing: 2 },
+]
+
+export const AllLayouts: Story = {
+  name: 'all layouts',
+  decorators: [],
+  render: () => (
+    <Box sx={{ maxWidth: 960, mx: 'auto' }}>
+      <StoryTable>
+        <StoryThead>
+          <StoryRow>
+            {tableColumns.map((header, index) => (
+              <StoryHeaderCell
+                key={header}
+                first={index === 0}
+                sx={{
+                  textAlign: 'center',
+                }}
+              >
+                {header}
+              </StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          {layoutRows.map(({ label, layout, spacing }) => (
+            <StoryRow key={layout}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <RadioGroup options={baseOptions} defaultValue="option_a" layout={layout} spacing={spacing} />
+              </StoryCell>
+              <StoryCell>
+                <RadioGroup options={optionsWithDisabled} defaultValue="option_a" layout={layout} spacing={spacing} />
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Select any option — each group is independently uncontrolled.</StoryHint>
+    </Box>
+  ),
+}