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

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

@@ -0,0 +1,235 @@
+import { useEffect, type ReactNode } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Box } from '@mui/material'
+import { FormProvider, useForm } from 'react-hook-form'
+
+import { FormSelect } from '@components'
+
+type Option = {
+  id: string
+  label: string
+}
+
+const options: Option[] = [
+  { id: '1', label: 'Card' },
+  { id: '2', label: 'Apple Pay' },
+  { id: '3', label: 'KNET' },
+  { id: '4', label: 'Benefit' },
+]
+
+/** Typical “pick one” row; with `showClearIcon`, SelectBase omits empty-value options from the menu. */
+const optionsWithPlaceholder: Option[] = [{ id: '', label: 'Select payment…' }, ...options]
+
+type StoryFormValues = {
+  paymentMethod: Option | undefined
+}
+
+function FormWrapper({
+  children,
+  defaultPaymentMethod = options[1],
+}: Readonly<{
+  children: ReactNode
+  defaultPaymentMethod?: Option | undefined
+}>) {
+  const methods = useForm<StoryFormValues>({
+    defaultValues: {
+      paymentMethod: defaultPaymentMethod,
+    },
+  })
+
+  return (
+    <FormProvider {...methods}>
+      <Box component="form" sx={{ width: 340 }} onSubmit={(e) => e.preventDefault()}>
+        {children}
+      </Box>
+    </FormProvider>
+  )
+}
+
+const meta: Meta<typeof FormSelect> = {
+  title: 'Components/Inputs/FormSelect (RFH)',
+  component: FormSelect,
+  tags: ['autodocs'],
+  args: {
+    label: 'Payment method',
+    disabled: false,
+    required: false,
+    isLoading: false,
+    showClearIcon: false,
+    showSearchInput: false,
+    searchPlaceholder: 'Search',
+  },
+  argTypes: {
+    label: { control: 'text' },
+    helperText: { control: 'text' },
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    showClearIcon: { control: 'boolean' },
+    showSearchInput: { control: 'boolean' },
+    searchPlaceholder: { control: 'text' },
+    name: { table: { disable: true } },
+    options: { table: { disable: true } },
+    getOptionValue: { table: { disable: true } },
+    getOptionLabel: { table: { disable: true } },
+    renderOption: { table: { disable: true } },
+    isOptionEqualToValue: { table: { disable: true } },
+    MenuProps: { table: { disable: true } },
+    startComponent: { table: { disable: true } },
+    IconComponent: { table: { disable: true } },
+    ClearIconComponent: { table: { disable: true } },
+    endAdornment: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: {
+      expanded: true,
+      include: [
+        'label',
+        'helperText',
+        'disabled',
+        'required',
+        'isLoading',
+        'showClearIcon',
+        'showSearchInput',
+        'searchPlaceholder',
+      ],
+    },
+    docs: {
+      description: {
+        component:
+          'Single-value select bound to react-hook-form via `Controller`. Wrap with `FormProvider` and use a `name` that matches a field holding one option object (or `undefined` when cleared). With **showClearIcon**, options whose `getOptionValue` / `id` is empty are not listed (use the clear control instead of a “None” row). With **showSearchInput** / **searchPlaceholder**, the menu includes a filter on option labels.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof FormSelect>
+
+export const Base: Story = {
+  render: (args) => (
+    <FormWrapper>
+      <FormSelect {...args} name="paymentMethod" options={options} getOptionValue={(opt) => opt.id} getOptionLabel={(opt) => opt.label} />
+    </FormWrapper>
+  ),
+}
+
+const searchDemoOptions: Option[] = [
+  ...options,
+  { id: '5', label: 'Visa Debit' },
+  { id: '6', label: 'Mastercard' },
+  { id: '7', label: 'Google Pay' },
+]
+
+export const WithSearch: Story = {
+  args: {
+    showSearchInput: true,
+    searchPlaceholder: 'Search methods',
+  },
+  render: (args) => (
+    <FormWrapper defaultPaymentMethod={searchDemoOptions[0]}>
+      <FormSelect
+        {...args}
+        name="paymentMethod"
+        options={searchDemoOptions}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+      />
+    </FormWrapper>
+  ),
+}
+
+export const Required: Story = {
+  args: {
+    required: true,
+    label: 'Payment method (required)',
+  },
+  render: (args) => (
+    <FormWrapper defaultPaymentMethod={undefined}>
+      <FormSelect {...args} name="paymentMethod" options={options} getOptionValue={(opt) => opt.id} getOptionLabel={(opt) => opt.label} />
+    </FormWrapper>
+  ),
+}
+
+export const WithClearIcon: Story = {
+  args: {
+    showClearIcon: true,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <FormSelect
+        {...args}
+        name="paymentMethod"
+        options={optionsWithPlaceholder}
+        getOptionValue={(opt) => opt.id}
+        getOptionLabel={(opt) => opt.label}
+      />
+    </FormWrapper>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Includes a placeholder option (`id: ""`). With **showClearIcon**, that row is hidden from the menu; clear the field with the icon instead.',
+      },
+    },
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <FormSelect {...args} name="paymentMethod" options={options} getOptionValue={(opt) => opt.id} getOptionLabel={(opt) => opt.label} />
+    </FormWrapper>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => (
+    <FormWrapper>
+      <FormSelect {...args} name="paymentMethod" options={options} getOptionValue={(opt) => opt.id} getOptionLabel={(opt) => opt.label} />
+    </FormWrapper>
+  ),
+}
+
+function FormWrapperWithError({ children }: Readonly<{ children: ReactNode }>) {
+  const methods = useForm<StoryFormValues>({
+    defaultValues: { paymentMethod: options[0] },
+  })
+
+  useEffect(() => {
+    methods.setError('paymentMethod', { type: 'manual', message: 'This payment method is not available for your region.' })
+  }, [methods])
+
+  return (
+    <FormProvider {...methods}>
+      <Box component="form" sx={{ width: 340 }} onSubmit={(e) => e.preventDefault()}>
+        {children}
+      </Box>
+    </FormProvider>
+  )
+}
+
+export const WithFieldError: Story = {
+  name: 'With field error',
+  render: (args) => (
+    <FormWrapperWithError>
+      <FormSelect {...args} name="paymentMethod" options={options} getOptionValue={(opt) => opt.id} getOptionLabel={(opt) => opt.label} />
+    </FormWrapperWithError>
+  ),
+}

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

@@ -0,0 +1,95 @@
+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 FormControlLabel from '@mui/material/FormControlLabel'
+import IOSSwitch from '@components/IOSSwitch'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof IOSSwitch> = {
+  title: 'Components/Inputs/IOSSwitch',
+  component: IOSSwitch,
+  tags: ['autodocs'],
+  argTypes: {
+    checked: { control: 'boolean', description: 'Controlled checked state' },
+    disabled: { control: 'boolean' },
+    defaultChecked: { control: 'boolean', description: 'Initial checked state (uncontrolled)' },
+    size: {
+      control: 'radio',
+      options: ['small', 'medium'],
+    },
+    onChange: { 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 IOSSwitch>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: { checked: false },
+}
+
+export const Checked: Story = {
+  args: { checked: true },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['STATE', 'OFF', 'ON'] as const
+
+const stateRows: Array<{ label: string; extraProps: object }> = [
+  { label: 'Default', extraProps: {} },
+  { label: 'Disabled', extraProps: { disabled: true } },
+  { label: 'Small', extraProps: { size: 'small' as const } },
+]
+
+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>
+          {stateRows.map(({ label, extraProps }) => (
+            <StoryRow key={label}>
+              <StoryRowLabel>{label}</StoryRowLabel>
+              <StoryCell>
+                <IOSSwitch defaultChecked={false} {...extraProps} />
+              </StoryCell>
+              <StoryCell>
+                <IOSSwitch defaultChecked {...extraProps} />
+              </StoryCell>
+            </StoryRow>
+          ))}
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>Click any switch to toggle its state.</StoryHint>
+    </Box>
+  ),
+}

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Input from '@components/Input'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Inputs/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    isError: { control: 'boolean', description: 'Shows error border styling' },
+    disabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    readOnly: { control: 'boolean' },
+    value: { table: { disable: true } },
+    inputRef: { table: { disable: true } },
+    inputComponent: { table: { disable: true } },
+    inputProps: { table: { disable: true } },
+    endAdornment: { table: { disable: true } },
+    startAdornment: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+        <Box sx={{ width: 320 }}>
+          <Story />
+        </Box>
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+// ──────────────────────────────────────────────
+// Focused stories
+
+export const Base: Story = {
+  args: { placeholder: 'Enter value…' },
+}
+
+export const Disabled: Story = {
+  args: { placeholder: 'Disabled input', disabled: true },
+}
+
+export const WithError: Story = {
+  args: { placeholder: 'Invalid value', isError: true },
+}
+
+export const ReadOnly: Story = {
+  args: { value: 'Read-only value', readOnly: true },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+type InputOverride = Partial<Parameters<typeof Input>[0]>
+
+const tableColumns = ['STATE', 'DEFAULT', 'WITH PLACEHOLDER', 'WITH VALUE'] as const
+
+const stateRows: Array<{ label: string; cells: InputOverride[] }> = [
+  {
+    label: 'Default',
+    cells: [{}, { placeholder: 'Enter value…' }, { value: 'Some text' }],
+  },
+  {
+    label: 'Error',
+    cells: [{ isError: true }, { isError: true, placeholder: 'Enter value…' }, { isError: true, value: 'Bad input' }],
+  },
+  {
+    label: 'Disabled',
+    cells: [{ disabled: true }, { disabled: true, placeholder: 'Disabled…' }, { disabled: true, value: 'Locked value' }],
+  },
+  {
+    label: 'Read-only',
+    cells: [{ readOnly: true }, { readOnly: true, placeholder: 'Read-only…' }, { readOnly: true, value: 'Static value' }],
+  },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: (args) => {
+    const renderInput = (override: InputOverride = {}) => <Input {...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>
+            {stateRows.map(({ label, cells }) => (
+              <StoryRow key={label}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                {cells.map((override, index) => (
+                  <StoryCell key={`${label}-${index}`}>{renderInput(override)}</StoryCell>
+                ))}
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Use the Controls panel to toggle isError, disabled, and readOnly.</StoryHint>
+      </Box>
+    )
+  },
+  args: {},
+}

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

@@ -0,0 +1,163 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import InputNumber from '@components/InputNumber'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof InputNumber> = {
+  title: 'Components/Inputs/InputNumber',
+  component: InputNumber,
+  tags: ['autodocs'],
+  argTypes: {
+    isError: { control: 'boolean', description: 'Shows error border styling' },
+    disabled: { control: 'boolean' },
+    hideArrows: { control: 'boolean', description: 'Hides browser numeric spinner controls' },
+    placeholder: { control: 'text' },
+    readOnly: { control: 'boolean' },
+    value: { table: { disable: true } },
+    defaultValue: { control: 'number' },
+    onChange: { table: { disable: true } },
+    onKeyDown: { table: { disable: true } },
+    inputComponent: { table: { disable: true } },
+    inputRef: { 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: 320 }}>
+          <Story />
+        </Box>
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof InputNumber>
+
+export const Base: Story = {
+  args: {
+    placeholder: 'Enter amount',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled amount',
+    disabled: true,
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    placeholder: 'Invalid amount',
+    isError: true,
+  },
+}
+
+function InteractiveRender() {
+  const [value, setValue] = useState<number | ''>('')
+
+  return (
+    <Box>
+      <InputNumber
+        placeholder="Type a number"
+        value={value}
+        onChange={(e) => {
+          const raw = e.target.value
+          setValue(raw === '' ? '' : Number(raw))
+        }}
+      />
+      <StoryHint>Current value: {value === '' ? 'empty' : value}</StoryHint>
+    </Box>
+  )
+}
+
+export const Interactive: Story = {
+  name: 'interactive',
+  render: InteractiveRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [value, setValue] = useState<number | ''>('')
+
+<InputNumber
+  placeholder="Type a number"
+  value={value}
+  onChange={(e) => {
+    const raw = e.target.value
+    setValue(raw === '' ? '' : Number(raw))
+  }}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+type InputNumberOverride = Partial<Parameters<typeof InputNumber>[0]>
+
+const tableColumns = ['STATE', 'EMPTY', 'PLACEHOLDER', 'PREFILLED'] as const
+
+const stateRows: Array<{ label: string; cells: InputNumberOverride[] }> = [
+  {
+    label: 'Default',
+    cells: [{}, { placeholder: 'Enter amount' }, { value: 1250, readOnly: true }],
+  },
+  {
+    label: 'Error',
+    cells: [{ isError: true }, { isError: true, placeholder: 'Invalid amount' }, { isError: true, value: 99999, readOnly: true }],
+  },
+  {
+    label: 'Disabled',
+    cells: [{ disabled: true }, { disabled: true, placeholder: 'Disabled' }, { disabled: true, value: 840, readOnly: true }],
+  },
+]
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: (args) => {
+    const renderInput = (override: InputNumberOverride = {}) => <InputNumber {...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>
+            {stateRows.map(({ label, cells }) => (
+              <StoryRow key={label}>
+                <StoryRowLabel>{label}</StoryRowLabel>
+                {cells.map((override, index) => (
+                  <StoryCell key={`${label}-${index}`}>{renderInput(override)}</StoryCell>
+                ))}
+              </StoryRow>
+            ))}
+          </StoryTbody>
+        </StoryTable>
+
+        <StoryHint>Use Controls to toggle error, disabled, and arrow visibility.</StoryHint>
+      </Box>
+    )
+  },
+  args: {
+    hideArrows: true,
+  },
+}