@boostdev/design-system-components 2.4.1 → 2.5.0

package/src/components/interaction/form/Radio/Radio.native.stories.tsx

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Radio } from './Radio.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/Radio',
-  component: Radio,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Radio>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Unchecked: Story = { args: { label: 'Option A', name: 'option', checked: false } };
-export const Checked: Story = { args: { label: 'Option A', name: 'option', checked: true } };
-export const Disabled: Story = { args: { label: 'Option A', name: 'option', disabled: true } };
-export const WithError: Story = {
-  args: { label: 'Option A', name: 'option', error: 'Please select an option.' },
-};
-export const WithHint: Story = {
-  args: { label: 'Option A', name: 'option', hint: 'This is the recommended option.' },
-};
-export const Group: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<string | null>(null);
-    const options = ['Option A', 'Option B', 'Option C'];
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-        {options.map(o => (
-          <Radio
-            key={o}
-            label={o}
-            name="group"
-            checked={selected === o}
-            onChange={() => setSelected(o)}
-          />
-        ))}
-      </div>
-    );
-  },
-};

package/src/components/interaction/form/Radio/Radio.native.tsx

@@ -1,79 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { spacing } from '../../../../native/tokens';
-import { useTheme } from '../../../../native/ThemeContext';
-import { Label } from '../atoms/Label.native';
-import { Message } from '../atoms/Message.native';
-
-interface RadioProps {
-  label: ReactNode;
-  name: string;
-  checked?: boolean;
-  onChange?: () => void;
-  disabled?: boolean;
-  error?: string;
-  hint?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const DOT = 22;
-const INNER = 10;
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xxs,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.xs,
-    minHeight: 44,
-  },
-  outer: {
-    width: DOT,
-    height: DOT,
-    borderRadius: DOT / 2,
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  inner: {
-    width: INNER,
-    height: INNER,
-    borderRadius: INNER / 2,
-  },
-});
-
-export function Radio({
-  label,
-  name,
-  checked = false,
-  onChange,
-  disabled = false,
-  error,
-  hint,
-  style,
-}: RadioProps) {
-  const { colors } = useTheme();
-  const borderColor = error ? colors.colorError : checked ? colors.colorInteractive : colors.colorOnBg;
-
-  return (
-    <View style={[styles.container, style]}>
-      <Pressable
-        onPress={() => !disabled && onChange?.()}
-        accessibilityRole="radio"
-        accessibilityLabel={typeof label === 'string' ? label : name}
-        accessibilityState={{ checked, disabled }}
-        disabled={disabled}
-        style={({ pressed }) => [styles.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }]}
-      >
-        <View style={[styles.outer, { borderColor }]}>
-          {checked && <View style={[styles.inner, { backgroundColor: colors.colorInteractive }]} />}
-        </View>
-        <Label label={label} />
-      </Pressable>
-      <Message type="error" message={error} />
-      <Message type="hint" message={hint} />
-    </View>
-  );
-}

package/src/components/interaction/form/RadioGroup/RadioGroup.native.mdx

@@ -1,79 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './RadioGroup.native.stories';
-
-<Meta of={Stories} />
-
-# RadioGroup (React Native)
-
-Groups related radio buttons under a common legend with optional hint and error messages. Uses `accessibilityRole="radiogroup"` for proper screen reader semantics.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { RadioGroup, Radio } from '@boostdev/design-system-components';
-import { useState } from 'react';
-
-function Example() {
-  const [selected, setSelected] = useState('standard');
-
-  return (
-    <RadioGroup legend="Shipping method">
-      <Radio
-        label="Standard"
-        name="shipping"
-        checked={selected === 'standard'}
-        onChange={() => setSelected('standard')}
-      />
-      <Radio
-        label="Express"
-        name="shipping"
-        checked={selected === 'express'}
-        onChange={() => setSelected('express')}
-      />
-    </RadioGroup>
-  );
-}
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### Required
-<Canvas of={Stories.Required} />
-
-### With hint
-<Canvas of={Stories.WithHint} />
-
-### With error
-<Canvas of={Stories.WithError} />
-
-### Disabled
-<Canvas of={Stories.Disabled} />
-
-### Interactive
-<Canvas of={Stories.Interactive} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `legend` | string | -- | Group label displayed above the radio buttons |
-| `children` | ReactNode | -- | Radio components |
-| `error` | string | -- | Error message displayed below the group |
-| `hint` | string | -- | Helper text displayed below the group |
-| `required` | boolean | -- | Appends asterisk to legend |
-| `disabled` | boolean | `false` | Reduces opacity of the entire group |
-
-## Accessibility
-
-- Uses `accessibilityRole="radiogroup"` for proper grouping semantics
-- The group is labelled via `accessibilityLabel` matching the legend text
-- Error messages use `accessibilityRole="alert"` for screen reader announcement

package/src/components/interaction/form/RadioGroup/RadioGroup.native.spec.tsx

@@ -1,66 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { RadioGroup } from './RadioGroup.native';
-import { Radio } from '../Radio/Radio.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('RadioGroup (native)', () => {
-  it('renders the legend text', () => {
-    renderWithTheme(
-      <RadioGroup legend="Shipping method">
-        <Radio label="Standard" name="shipping" />
-      </RadioGroup>,
-    );
-    expect(screen.getByText('Shipping method')).toBeInTheDocument();
-  });
-
-  it('has radiogroup role', () => {
-    renderWithTheme(
-      <RadioGroup legend="Shipping">
-        <Radio label="Standard" name="shipping" />
-      </RadioGroup>,
-    );
-    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    renderWithTheme(
-      <RadioGroup legend="Options">
-        <Radio label="Option A" name="opt" />
-        <Radio label="Option B" name="opt" />
-      </RadioGroup>,
-    );
-    expect(screen.getByText('Option A')).toBeInTheDocument();
-    expect(screen.getByText('Option B')).toBeInTheDocument();
-  });
-
-  it('appends asterisk when required', () => {
-    renderWithTheme(
-      <RadioGroup legend="Payment" required>
-        <Radio label="Card" name="payment" />
-      </RadioGroup>,
-    );
-    expect(screen.getByText('*', { exact: false })).toBeInTheDocument();
-  });
-
-  it('renders error message', () => {
-    renderWithTheme(
-      <RadioGroup legend="Shipping" error="Please select one.">
-        <Radio label="Standard" name="shipping" />
-      </RadioGroup>,
-    );
-    expect(screen.getByRole('alert')).toHaveTextContent('Please select one.');
-  });
-
-  it('renders hint message', () => {
-    renderWithTheme(
-      <RadioGroup legend="Shipping" hint="Choose your preferred method.">
-        <Radio label="Standard" name="shipping" />
-      </RadioGroup>,
-    );
-    expect(screen.getByText('Choose your preferred method.')).toBeInTheDocument();
-  });
-});

package/src/components/interaction/form/RadioGroup/RadioGroup.native.stories.tsx

@@ -1,96 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { RadioGroup } from './RadioGroup.native';
-import { Radio } from '../Radio/Radio.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/RadioGroup',
-  component: RadioGroup,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    legend: 'Shipping method',
-    children: (
-      <>
-        <Radio label="Standard" name="shipping" />
-        <Radio label="Express" name="shipping" />
-        <Radio label="Next day" name="shipping" />
-      </>
-    ),
-  },
-};
-
-export const Required: Story = {
-  args: {
-    legend: 'Payment method',
-    required: true,
-    children: (
-      <>
-        <Radio label="Credit card" name="payment" />
-        <Radio label="iDEAL" name="payment" />
-      </>
-    ),
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    legend: 'Shipping method',
-    disabled: true,
-    children: (
-      <>
-        <Radio label="Standard" name="shipping" checked disabled />
-        <Radio label="Express" name="shipping" disabled />
-      </>
-    ),
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    legend: 'Select one',
-    error: 'Please select a shipping method.',
-    children: (
-      <>
-        <Radio label="Standard" name="shipping" />
-        <Radio label="Express" name="shipping" />
-      </>
-    ),
-  },
-};
-
-export const WithHint: Story = {
-  args: {
-    legend: 'Delivery speed',
-    hint: 'Express adds a surcharge.',
-    children: (
-      <>
-        <Radio label="Standard" name="delivery" />
-        <Radio label="Express" name="delivery" />
-      </>
-    ),
-  },
-};
-
-function InteractiveComponent() {
-  const [selected, setSelected] = useState('standard');
-  return (
-    <RadioGroup legend="Shipping method">
-      <Radio label="Standard" name="shipping" checked={selected === 'standard'} onChange={() => setSelected('standard')} />
-      <Radio label="Express" name="shipping" checked={selected === 'express'} onChange={() => setSelected('express')} />
-      <Radio label="Next day" name="shipping" checked={selected === 'nextday'} onChange={() => setSelected('nextday')} />
-    </RadioGroup>
-  );
-}
-
-export const Interactive: Story = {
-  render: () => <InteractiveComponent />,
-};

package/src/components/interaction/form/RadioGroup/RadioGroup.native.tsx

@@ -1,61 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, lineHeight } from '../../../../native/tokens';
-import { useTheme } from '../../../../native/ThemeContext';
-import { Message } from '../atoms/Message.native';
-
-interface RadioGroupProps {
-  legend: string;
-  children: ReactNode;
-  error?: string;
-  hint?: string;
-  required?: boolean;
-  disabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xs,
-  },
-  legend: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-    fontWeight: font.weight.semibold,
-  },
-  required: {
-    fontWeight: font.weight.body,
-  },
-  items: {
-    gap: spacing.xxs,
-  },
-});
-
-export function RadioGroup({
-  legend,
-  children,
-  error,
-  hint,
-  required,
-  disabled = false,
-  style,
-}: Readonly<RadioGroupProps>) {
-  const { colors } = useTheme();
-
-  return (
-    <View
-      style={[styles.container, disabled && { opacity: 0.4 }, style]}
-      accessibilityRole="radiogroup"
-      accessibilityLabel={legend}
-    >
-      <Text style={[styles.legend, { color: colors.colorOnBg }]}>
-        {legend}
-        {required && <Text style={[styles.required, { color: colors.colorOnBgSubtle }]}> *</Text>}
-      </Text>
-      <View style={styles.items}>{children}</View>
-      <Message type="error" message={error} />
-      <Message type="hint" message={hint} />
-    </View>
-  );
-}

package/src/components/interaction/form/SegmentedControl/SegmentedControl.native.mdx

@@ -1,78 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './SegmentedControl.native.stories';
-
-<Meta of={Stories} />
-
-# SegmentedControl (React Native)
-
-A horizontal control with multiple segments, where each segment acts as a tab. Supports `outline` and `filled` variants with three size options.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { SegmentedControl } from '@boostdev/design-system-components';
-import { useState } from 'react';
-
-function Example() {
-  const [index, setIndex] = useState(0);
-
-  return (
-    <SegmentedControl
-      selectedIndex={index}
-      onValueChange={setIndex}
-      accessibilityLabel="View mode"
-    >
-      {'Day'}
-      {'Week'}
-      {'Month'}
-    </SegmentedControl>
-  );
-}
-```
-
-## Examples
-
-### Outline (default)
-<Canvas of={Stories.Outline} />
-
-### Filled
-<Canvas of={Stories.Filled} />
-
-### Small
-<Canvas of={Stories.Small} />
-
-### Large
-<Canvas of={Stories.Large} />
-
-### Disabled
-<Canvas of={Stories.Disabled} />
-
-### Interactive
-<Canvas of={Stories.Interactive} />
-
-### Interactive filled
-<Canvas of={Stories.InteractiveFilled} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `selectedIndex` | number | `0` | Zero-based index of the active segment |
-| `disabled` | boolean | `false` | Disables all segments |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Controls height and font size |
-| `variant` | `'outline' \| 'filled'` | `'outline'` | Visual style of the control |
-| `children` | ReactNode | -- | Segment labels (strings or elements) |
-| `accessibilityLabel` | string | -- | Label for the tab group |
-| `onValueChange` | `(index: number) => void` | -- | Called with the tapped segment index |
-
-## Accessibility
-
-- Uses `accessibilityRole="tablist"` on the container
-- Each segment uses `accessibilityRole="tab"` with `accessibilityState.selected`
-- Disabled state is communicated via `accessibilityState`

package/src/components/interaction/form/SegmentedControl/SegmentedControl.native.spec.tsx

@@ -1,82 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { SegmentedControl } from './SegmentedControl.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('SegmentedControl (native)', () => {
-  it('renders all segments', () => {
-    renderWithTheme(
-      <SegmentedControl accessibilityLabel="View">
-        {'Day'}
-        {'Week'}
-        {'Month'}
-      </SegmentedControl>,
-    );
-    expect(screen.getByText('Day')).toBeInTheDocument();
-    expect(screen.getByText('Week')).toBeInTheDocument();
-    expect(screen.getByText('Month')).toBeInTheDocument();
-  });
-
-  it('has tablist role', () => {
-    renderWithTheme(
-      <SegmentedControl accessibilityLabel="View">
-        {'Day'}
-        {'Week'}
-      </SegmentedControl>,
-    );
-    expect(screen.getByRole('tablist')).toBeInTheDocument();
-  });
-
-  it('renders tab roles for each segment', () => {
-    renderWithTheme(
-      <SegmentedControl accessibilityLabel="View">
-        {'Day'}
-        {'Week'}
-      </SegmentedControl>,
-    );
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs).toHaveLength(2);
-  });
-
-  it('calls onValueChange with the clicked index', () => {
-    const onValueChange = vi.fn();
-    renderWithTheme(
-      <SegmentedControl accessibilityLabel="View" onValueChange={onValueChange}>
-        {'Day'}
-        {'Week'}
-        {'Month'}
-      </SegmentedControl>,
-    );
-    fireEvent.click(screen.getByText('Week'));
-    expect(onValueChange).toHaveBeenCalledWith(1);
-  });
-
-  it('does not call onValueChange when disabled', () => {
-    const onValueChange = vi.fn();
-    renderWithTheme(
-      <SegmentedControl accessibilityLabel="View" onValueChange={onValueChange} disabled>
-        {'Day'}
-        {'Week'}
-      </SegmentedControl>,
-    );
-    fireEvent.click(screen.getByText('Week'));
-    expect(onValueChange).not.toHaveBeenCalled();
-  });
-
-  it('renders the selected segment with distinct styling', () => {
-    renderWithTheme(
-      <SegmentedControl accessibilityLabel="View" selectedIndex={1}>
-        {'Day'}
-        {'Week'}
-      </SegmentedControl>,
-    );
-    // Verify both tabs render and the selected one exists
-    const tabs = screen.getAllByRole('tab');
-    expect(tabs).toHaveLength(2);
-    // The selected tab text is rendered
-    expect(screen.getByText('Week')).toBeInTheDocument();
-  });
-});

package/src/components/interaction/form/SegmentedControl/SegmentedControl.native.stories.tsx

@@ -1,99 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { SegmentedControl } from './SegmentedControl.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/SegmentedControl',
-  component: SegmentedControl,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof SegmentedControl>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Outline: Story = {
-  args: {
-    variant: 'outline',
-    selectedIndex: 0,
-    children: ['Day', 'Week', 'Month'],
-    accessibilityLabel: 'View mode',
-  },
-};
-
-export const Filled: Story = {
-  args: {
-    variant: 'filled',
-    selectedIndex: 1,
-    children: ['Day', 'Week', 'Month'],
-    accessibilityLabel: 'View mode',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    selectedIndex: 0,
-    children: ['On', 'Off'],
-    accessibilityLabel: 'Toggle',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    selectedIndex: 2,
-    children: ['First', 'Second', 'Third'],
-    accessibilityLabel: 'Selection',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    selectedIndex: 0,
-    disabled: true,
-    children: ['Day', 'Week', 'Month'],
-    accessibilityLabel: 'View mode',
-  },
-};
-
-function InteractiveComponent() {
-  const [index, setIndex] = useState(0);
-  return (
-    <SegmentedControl
-      selectedIndex={index}
-      onValueChange={setIndex}
-      accessibilityLabel="View mode"
-    >
-      {'Day'}
-      {'Week'}
-      {'Month'}
-    </SegmentedControl>
-  );
-}
-
-export const Interactive: Story = {
-  render: () => <InteractiveComponent />,
-};
-
-function InteractiveFilledComponent() {
-  const [index, setIndex] = useState(0);
-  return (
-    <SegmentedControl
-      variant="filled"
-      selectedIndex={index}
-      onValueChange={setIndex}
-      accessibilityLabel="Category"
-    >
-      {'All'}
-      {'Active'}
-      {'Completed'}
-    </SegmentedControl>
-  );
-}
-
-export const InteractiveFilled: Story = {
-  render: () => <InteractiveFilledComponent />,
-};