@boostdev/design-system-components 2.4.2 → 2.5.0

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

@@ -1,78 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './CheckboxGroup.native.stories';
-
-<Meta of={Stories} />
-
-# CheckboxGroup (React Native)
-
-Groups related checkboxes under a common legend with optional hint and error messages.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { CheckboxGroup, Checkbox } from '@boostdev/design-system-components';
-import { useState } from 'react';
-
-function Example() {
-  const [checked, setChecked] = useState({ email: false, sms: false });
-
-  return (
-    <CheckboxGroup legend="Notifications">
-      <Checkbox
-        label="Email"
-        name="email"
-        checked={checked.email}
-        onChange={(v) => setChecked(s => ({ ...s, email: v }))}
-      />
-      <Checkbox
-        label="SMS"
-        name="sms"
-        checked={checked.sms}
-        onChange={(v) => setChecked(s => ({ ...s, sms: v }))}
-      />
-    </CheckboxGroup>
-  );
-}
-```
-
-## 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 checkboxes |
-| `children` | ReactNode | -- | Checkbox 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
-
-- The group is labelled via `accessibilityLabel` matching the legend text
-- Error messages use `accessibilityRole="alert"` for screen reader announcement

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

@@ -1,57 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { CheckboxGroup } from './CheckboxGroup.native';
-import { Checkbox } from '../Checkbox/Checkbox.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('CheckboxGroup (native)', () => {
-  it('renders the legend text', () => {
-    renderWithTheme(
-      <CheckboxGroup legend="Notifications">
-        <Checkbox label="Email" name="email" />
-      </CheckboxGroup>,
-    );
-    expect(screen.getByText('Notifications')).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    renderWithTheme(
-      <CheckboxGroup legend="Preferences">
-        <Checkbox label="Option A" name="a" />
-        <Checkbox label="Option B" name="b" />
-      </CheckboxGroup>,
-    );
-    expect(screen.getByText('Option A')).toBeInTheDocument();
-    expect(screen.getByText('Option B')).toBeInTheDocument();
-  });
-
-  it('appends asterisk when required', () => {
-    renderWithTheme(
-      <CheckboxGroup legend="Accept" required>
-        <Checkbox label="Terms" name="terms" />
-      </CheckboxGroup>,
-    );
-    expect(screen.getByText('*', { exact: false })).toBeInTheDocument();
-  });
-
-  it('renders error message', () => {
-    renderWithTheme(
-      <CheckboxGroup legend="Options" error="Select at least one.">
-        <Checkbox label="A" name="a" />
-      </CheckboxGroup>,
-    );
-    expect(screen.getByRole('alert')).toHaveTextContent('Select at least one.');
-  });
-
-  it('renders hint message', () => {
-    renderWithTheme(
-      <CheckboxGroup legend="Options" hint="Select all that apply.">
-        <Checkbox label="A" name="a" />
-      </CheckboxGroup>,
-    );
-    expect(screen.getByText('Select all that apply.')).toBeInTheDocument();
-  });
-});

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.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 { CheckboxGroup } from './CheckboxGroup.native';
-import { Checkbox } from '../Checkbox/Checkbox.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/CheckboxGroup',
-  component: CheckboxGroup,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof CheckboxGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    legend: 'Notifications',
-    children: (
-      <>
-        <Checkbox label="Email" name="email" />
-        <Checkbox label="SMS" name="sms" />
-        <Checkbox label="Push" name="push" />
-      </>
-    ),
-  },
-};
-
-export const Required: Story = {
-  args: {
-    legend: 'Accept terms',
-    required: true,
-    children: (
-      <>
-        <Checkbox label="Terms of service" name="tos" />
-        <Checkbox label="Privacy policy" name="privacy" />
-      </>
-    ),
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    legend: 'Notifications',
-    disabled: true,
-    children: (
-      <>
-        <Checkbox label="Email" name="email" checked disabled />
-        <Checkbox label="SMS" name="sms" disabled />
-      </>
-    ),
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    legend: 'Select at least one',
-    error: 'Please select at least one option.',
-    children: (
-      <>
-        <Checkbox label="Option A" name="a" />
-        <Checkbox label="Option B" name="b" />
-      </>
-    ),
-  },
-};
-
-export const WithHint: Story = {
-  args: {
-    legend: 'Preferences',
-    hint: 'Select all that apply.',
-    children: (
-      <>
-        <Checkbox label="Newsletter" name="newsletter" />
-        <Checkbox label="Product updates" name="updates" />
-      </>
-    ),
-  },
-};
-
-function InteractiveComponent() {
-  const [checked, setChecked] = useState({ email: false, sms: false, push: false });
-  return (
-    <CheckboxGroup legend="Notifications">
-      <Checkbox label="Email" name="email" checked={checked.email} onChange={(v) => setChecked(s => ({ ...s, email: v }))} />
-      <Checkbox label="SMS" name="sms" checked={checked.sms} onChange={(v) => setChecked(s => ({ ...s, sms: v }))} />
-      <Checkbox label="Push" name="push" checked={checked.push} onChange={(v) => setChecked(s => ({ ...s, push: v }))} />
-    </CheckboxGroup>
-  );
-}
-
-export const Interactive: Story = {
-  render: () => <InteractiveComponent />,
-};

package/src/components/interaction/form/CheckboxGroup/CheckboxGroup.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 CheckboxGroupProps {
-  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 CheckboxGroup({
-  legend,
-  children,
-  error,
-  hint,
-  required,
-  disabled = false,
-  style,
-}: Readonly<CheckboxGroupProps>) {
-  const { colors } = useTheme();
-
-  return (
-    <View
-      style={[styles.container, disabled && { opacity: 0.4 }, style]}
-      accessibilityRole="none"
-      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/Combobox/Combobox.native.mdx

@@ -1,86 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Combobox.native.stories';
-
-<Meta of={Stories} />
-
-# Combobox (React Native)
-
-A text input with a filterable dropdown list. Type to filter options, tap to select. Supports error and hint messages.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { Combobox } from '@boostdev/design-system-components';
-import { useState } from 'react';
-
-const options = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-];
-
-function Example() {
-  const [value, setValue] = useState('');
-
-  return (
-    <Combobox
-      label="Fruit"
-      name="fruit"
-      options={options}
-      placeholder="Search fruit..."
-      value={value}
-      onChange={setValue}
-    />
-  );
-}
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With value
-<Canvas of={Stories.WithValue} />
-
-### With hint
-<Canvas of={Stories.WithHint} />
-
-### With error
-<Canvas of={Stories.WithError} />
-
-### Disabled
-<Canvas of={Stories.Disabled} />
-
-### With disabled option
-<Canvas of={Stories.WithDisabledOption} />
-
-### Interactive
-<Canvas of={Stories.Interactive} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | string | -- | Visible label text |
-| `name` | string | -- | Field name |
-| `options` | `ComboboxOption[]` | -- | Array of `{ value, label, disabled? }` |
-| `placeholder` | string | -- | Input placeholder text |
-| `value` | string | -- | Currently selected option value |
-| `onChange` | `(value: string) => void` | -- | Called with the selected option value |
-| `disabled` | boolean | `false` | Disables the entire input |
-| `error` | string | -- | Error message displayed below |
-| `hint` | string | -- | Helper text displayed below |
-
-## Accessibility
-
-- Uses `accessibilityRole="combobox"` on the input
-- Options use `accessibilityRole="menuitem"` with selected/disabled states
-- Selected option is highlighted with `accessibilityState.selected`
-- Disabled options are communicated via `accessibilityState.disabled`

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

@@ -1,60 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Combobox } from './Combobox.native';
-import type { ComboboxOption } from './Combobox.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-const fruits: ComboboxOption[] = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-];
-
-describe('Combobox (native)', () => {
-  it('renders with label', () => {
-    renderWithTheme(
-      <Combobox label="Fruit" name="fruit" options={fruits} />,
-    );
-    expect(screen.getByText('Fruit')).toBeInTheDocument();
-  });
-
-  it('has combobox role', () => {
-    renderWithTheme(
-      <Combobox label="Fruit" name="fruit" options={fruits} />,
-    );
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-  });
-
-  it('shows placeholder text', () => {
-    renderWithTheme(
-      <Combobox label="Fruit" name="fruit" options={fruits} placeholder="Search..." />,
-    );
-    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
-  });
-
-  it('displays the selected option label when value is set', () => {
-    renderWithTheme(
-      <Combobox label="Fruit" name="fruit" options={fruits} value="cherry" />,
-    );
-    // react-native-web renders TextInput as <input>, so we can check the DOM value
-    const input = screen.getByRole('combobox') as HTMLInputElement;
-    expect(input.value).toBe('Cherry');
-  });
-
-  it('renders error message', () => {
-    renderWithTheme(
-      <Combobox label="Fruit" name="fruit" options={fruits} error="Required." />,
-    );
-    expect(screen.getByRole('alert')).toHaveTextContent('Required.');
-  });
-
-  it('renders hint message', () => {
-    renderWithTheme(
-      <Combobox label="Fruit" name="fruit" options={fruits} hint="Type to filter." />,
-    );
-    expect(screen.getByText('Type to filter.')).toBeInTheDocument();
-  });
-});

package/src/components/interaction/form/Combobox/Combobox.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 { Combobox } from './Combobox.native';
-import type { ComboboxOption } from './Combobox.native';
-
-const fruits: ComboboxOption[] = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'date', label: 'Date' },
-  { value: 'elderberry', label: 'Elderberry' },
-];
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/Combobox',
-  component: Combobox,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Combobox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: 'Fruit',
-    name: 'fruit',
-    options: fruits,
-    placeholder: 'Search fruit...',
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    label: 'Fruit',
-    name: 'fruit',
-    options: fruits,
-    value: 'cherry',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Fruit',
-    name: 'fruit',
-    options: fruits,
-    disabled: true,
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    label: 'Fruit',
-    name: 'fruit',
-    options: fruits,
-    error: 'Please select a fruit.',
-  },
-};
-
-export const WithHint: Story = {
-  args: {
-    label: 'Fruit',
-    name: 'fruit',
-    options: fruits,
-    hint: 'Type to filter the list.',
-  },
-};
-
-export const WithDisabledOption: Story = {
-  args: {
-    label: 'Fruit',
-    name: 'fruit',
-    options: [
-      { value: 'apple', label: 'Apple' },
-      { value: 'banana', label: 'Banana', disabled: true },
-      { value: 'cherry', label: 'Cherry' },
-    ],
-  },
-};
-
-function InteractiveComponent() {
-  const [value, setValue] = useState('');
-  return (
-    <Combobox
-      label="Fruit"
-      name="fruit"
-      options={fruits}
-      placeholder="Search fruit..."
-      value={value}
-      onChange={setValue}
-    />
-  );
-}
-
-export const Interactive: Story = {
-  render: () => <InteractiveComponent />,
-};