@boostdev/design-system-components 2.4.1 → 2.5.0

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

@@ -1,121 +0,0 @@
-import { Children, ReactNode } from 'react';
-import { StyleSheet, View, Pressable, Text, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, border } from '../../../../native/tokens';
-import { useTheme } from '../../../../native/ThemeContext';
-
-type SegmentedControlSize = 'small' | 'medium' | 'large';
-type SegmentedControlVariant = 'outline' | 'filled';
-
-interface SegmentedControlProps {
-  selectedIndex?: number;
-  disabled?: boolean;
-  size?: SegmentedControlSize;
-  variant?: SegmentedControlVariant;
-  children: ReactNode;
-  accessibilityLabel?: string;
-  onValueChange?: (index: number) => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-const sizeTokens: Record<SegmentedControlSize, { height: number; fontSize: number; px: number }> = {
-  small:  { height: 32, fontSize: font.size.bodyS, px: spacing.s },
-  medium: { height: 40, fontSize: font.size.body,  px: spacing.m },
-  large:  { height: 48, fontSize: font.size.body,  px: spacing.l },
-};
-
-const styles = StyleSheet.create({
-  track: {
-    flexDirection: 'row',
-    borderRadius: border.radius.full,
-    overflow: 'hidden',
-  },
-  item: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 44,
-  },
-  label: {
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-    textAlign: 'center',
-  },
-});
-
-export function SegmentedControl({
-  selectedIndex = 0,
-  disabled = false,
-  size = 'medium',
-  variant = 'outline',
-  children,
-  accessibilityLabel,
-  onValueChange,
-  style,
-}: Readonly<SegmentedControlProps>) {
-  const { colors } = useTheme();
-  const { height, fontSize, px } = sizeTokens[size];
-  const items = Children.toArray(children);
-
-  const trackStyle: ViewStyle = variant === 'filled'
-    ? { backgroundColor: colors.colorBgSubtle }
-    : { backgroundColor: 'transparent', borderWidth: 1, borderColor: colors.colorBgSubtle };
-
-  return (
-    <View
-      style={[styles.track, trackStyle, { borderRadius: border.radius.full }, style]}
-      accessibilityRole="tablist"
-      accessibilityLabel={accessibilityLabel}
-    >
-      {items.map((child, index) => {
-        const isActive = index === selectedIndex;
-
-        const activeStyle: ViewStyle = variant === 'filled'
-          ? { backgroundColor: colors.colorInteractive }
-          : { borderWidth: 2, borderColor: colors.colorInteractive };
-
-        const inactiveStyle: ViewStyle = variant === 'filled'
-          ? {}
-          : {};
-
-        const textColor = variant === 'filled' && isActive
-          ? colors.colorOnInteractive
-          : isActive
-            ? colors.colorInteractive
-            : colors.colorOnBgSubtle;
-
-        // Extract label from child: if it's a string, use it directly.
-        // Otherwise render the child as-is.
-        const label = typeof child === 'string' || typeof child === 'number'
-          ? String(child)
-          : null;
-
-        return (
-          <Pressable
-            key={index}
-            onPress={() => !disabled && onValueChange?.(index)}
-            disabled={disabled}
-            accessibilityRole="tab"
-            accessibilityLabel={label ?? undefined}
-            accessibilityState={{ selected: isActive, disabled }}
-            style={({ pressed }) => [
-              styles.item,
-              { height, paddingHorizontal: px },
-              isActive ? activeStyle : inactiveStyle,
-              variant === 'filled' && isActive && { borderRadius: border.radius.full },
-              pressed && !disabled && { opacity: 0.7 },
-              disabled && { opacity: 0.4 },
-            ]}
-          >
-            {label !== null ? (
-              <Text style={[styles.label, { fontSize, color: textColor }]}>
-                {label}
-              </Text>
-            ) : (
-              child
-            )}
-          </Pressable>
-        );
-      })}
-    </View>
-  );
-}

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

@@ -1,85 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Select.native.stories';
-
-<Meta of={Stories} />
-
-# Select (React Native)
-
-Dropdown-style select component. Renders a trigger button that opens a bottom sheet modal with a scrollable list of options.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Select } 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 (
-    <Select
-      label="Fruit"
-      name="fruit"
-      options={options}
-      placeholder="Choose a fruit..."
-      value={value}
-      onChange={setValue}
-    />
-  );
-}
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With placeholder
-<Canvas of={Stories.WithPlaceholder} />
-
-### With selected value
-<Canvas of={Stories.WithValue} />
-
-### With error
-<Canvas of={Stories.WithError} />
-
-### With hint
-<Canvas of={Stories.WithHint} />
-
-### Disabled
-<Canvas of={Stories.Disabled} />
-
-### Interactive
-<Canvas of={Stories.Interactive} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | ReactNode | — | Visible label text |
-| `name` | string | — | Field name (used for accessibility) |
-| `options` | `SelectOption[]` | — | Array of `{ value, label, disabled? }` |
-| `placeholder` | string | `'Select an option'` | Placeholder when no value is selected |
-| `value` | string | — | Currently selected value |
-| `error` | string | — | Error message displayed below the trigger |
-| `hint` | string | — | Hint text displayed below the trigger |
-| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
-| `onChange` | `(value: string) => void` | — | Called with the selected option value |
-
-## Accessibility
-
-- Trigger announces the label and current value via `accessibilityLabel`
-- `accessibilityState.expanded` reflects whether the modal is open
-- Each option announces its label and selected state
-- Disabled options are communicated via `accessibilityState.disabled`

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

@@ -1,64 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Select } from './Select.native';
-
-const options = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-];
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Select (native)', () => {
-  it('renders the label', () => {
-    renderWithTheme(<Select label="Fruit" name="fruit" options={options} />);
-    expect(screen.getByText('Fruit')).toBeInTheDocument();
-  });
-
-  it('shows placeholder when no value is selected', () => {
-    renderWithTheme(
-      <Select label="Fruit" name="fruit" options={options} placeholder="Choose..." />,
-    );
-    expect(screen.getByText('Choose...')).toBeInTheDocument();
-  });
-
-  it('shows the selected option label', () => {
-    renderWithTheme(
-      <Select label="Fruit" name="fruit" options={options} value="cherry" />,
-    );
-    expect(screen.getByText('Cherry')).toBeInTheDocument();
-  });
-
-  it('shows error message', () => {
-    renderWithTheme(
-      <Select label="Fruit" name="fruit" options={options} error="Required." />,
-    );
-    expect(screen.getByRole('alert')).toHaveTextContent('Required.');
-  });
-
-  it('shows hint message', () => {
-    renderWithTheme(
-      <Select label="Fruit" name="fruit" options={options} hint="Pick one." />,
-    );
-    expect(screen.getByText('Pick one.')).toBeInTheDocument();
-  });
-
-  it('renders the trigger button with correct accessibility', () => {
-    renderWithTheme(
-      <Select label="Fruit" name="fruit" options={options} />,
-    );
-    const trigger = screen.getByRole('button', { name: /Fruit/ });
-    expect(trigger).toBeInTheDocument();
-  });
-
-  it('applies disabled opacity', () => {
-    renderWithTheme(
-      <Select label="Fruit" name="fruit" options={options} disabled value="banana" />,
-    );
-    const trigger = screen.getByRole('button', { name: /Fruit/ });
-    expect(trigger).toBeDisabled();
-  });
-});

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

@@ -1,75 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Select } from './Select.native';
-
-const fruitOptions = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'dragonfruit', label: 'Dragonfruit' },
-  { value: 'elderberry', label: 'Elderberry' },
-];
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/Select',
-  component: Select,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Select>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Fruit', name: 'fruit', options: fruitOptions },
-};
-
-export const WithPlaceholder: Story = {
-  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, placeholder: 'Choose a fruit...' },
-};
-
-export const WithValue: Story = {
-  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, value: 'cherry' },
-};
-
-export const WithError: Story = {
-  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, error: 'Please select a fruit.' },
-};
-
-export const WithHint: Story = {
-  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, hint: 'Pick your favourite.' },
-};
-
-export const Disabled: Story = {
-  args: { label: 'Fruit', name: 'fruit', options: fruitOptions, disabled: true, value: 'banana' },
-};
-
-export const WithDisabledOption: Story = {
-  args: {
-    label: 'Fruit',
-    name: 'fruit',
-    options: [
-      { value: 'apple', label: 'Apple' },
-      { value: 'banana', label: 'Banana', disabled: true },
-      { value: 'cherry', label: 'Cherry' },
-    ],
-  },
-};
-
-export const Interactive: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-    return (
-      <Select
-        label="Favourite fruit"
-        name="fruit"
-        options={fruitOptions}
-        placeholder="Choose a fruit..."
-        value={value}
-        onChange={setValue}
-      />
-    );
-  },
-};

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

@@ -1,252 +0,0 @@
-import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  Modal,
-  FlatList,
-  SafeAreaView,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../../native/tokens';
-import { useTheme } from '../../../../native/ThemeContext';
-import { Label } from '../atoms/Label.native';
-import { Message } from '../atoms/Message.native';
-
-export interface SelectOption {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-interface SelectProps {
-  label: ReactNode;
-  name: string;
-  options: SelectOption[];
-  placeholder?: string;
-  value?: string;
-  error?: string;
-  hint?: string;
-  disabled?: boolean;
-  onChange?: (value: string) => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xxs,
-  },
-  trigger: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44,
-  },
-  triggerText: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-    flex: 1,
-  },
-  chevron: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    marginStart: spacing.xs,
-  },
-  overlay: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  sheet: {
-    maxHeight: '60%',
-    borderTopStartRadius: border.radius.m,
-    borderTopEndRadius: border.radius.m,
-    paddingTop: spacing.m,
-    paddingBottom: spacing.xxxl,
-  },
-  sheetHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: spacing.m,
-    paddingBottom: spacing.s,
-  },
-  sheetTitle: {
-    fontFamily: font.family.body,
-    fontSize: font.size.heading3,
-    fontWeight: font.weight.semibold,
-  },
-  closeText: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    fontWeight: font.weight.semibold,
-  },
-  optionItem: {
-    paddingHorizontal: spacing.m,
-    paddingVertical: spacing.s,
-    minHeight: 44,
-    justifyContent: 'center',
-  },
-  optionText: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-  },
-});
-
-export function Select({
-  label,
-  name,
-  options,
-  placeholder = 'Select an option',
-  value,
-  error,
-  hint,
-  disabled = false,
-  onChange,
-  style,
-}: Readonly<SelectProps>) {
-  const { colors } = useTheme();
-  const [open, setOpen] = useState(false);
-
-  const selectedOption = options.find((o) => o.value === value);
-  const displayText = selectedOption?.label ?? placeholder;
-  const isPlaceholder = !selectedOption;
-
-  const borderColor = error
-    ? colors.colorError
-    : open
-      ? colors.colorInteractive
-      : colors.colorOnBg;
-
-  const handleSelect = (optionValue: string) => {
-    onChange?.(optionValue);
-    setOpen(false);
-  };
-
-  return (
-    <View style={[styles.container, style]}>
-      <Label label={label} />
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={typeof label === 'string' ? `${label}, ${displayText}` : name}
-        accessibilityState={{ disabled, expanded: open }}
-        accessibilityHint="Double tap to open options"
-        disabled={disabled}
-        onPress={() => setOpen(true)}
-        style={[
-          styles.trigger,
-          {
-            borderColor,
-            backgroundColor: colors.colorBg,
-          },
-          disabled && { opacity: 0.4 },
-        ]}
-      >
-        <Text
-          style={[
-            styles.triggerText,
-            {
-              color: isPlaceholder ? colors.colorOnBgSubtle : colors.colorOnBg,
-            },
-          ]}
-        >
-          {displayText}
-        </Text>
-        <Text style={[styles.chevron, { color: colors.colorOnBgSubtle }]} aria-hidden>
-          {'\u25BE'}
-        </Text>
-      </Pressable>
-
-      <Modal
-        visible={open}
-        transparent
-        animationType="slide"
-        onRequestClose={() => setOpen(false)}
-      >
-        <Pressable
-          style={styles.overlay}
-          onPress={() => setOpen(false)}
-          accessibilityRole="button"
-          accessibilityLabel="Close options"
-        >
-          <Pressable
-            style={[styles.sheet, { backgroundColor: colors.colorBg }]}
-            onPress={() => {
-              /* prevent close when tapping sheet */
-            }}
-          >
-            <SafeAreaView>
-              <View style={styles.sheetHeader}>
-                <Text style={[styles.sheetTitle, { color: colors.colorOnBg }]}>
-                  {typeof label === 'string' ? label : 'Select'}
-                </Text>
-                <Pressable
-                  accessibilityRole="button"
-                  accessibilityLabel="Close"
-                  onPress={() => setOpen(false)}
-                  hitSlop={8}
-                >
-                  <Text style={[styles.closeText, { color: colors.colorInteractive }]}>
-                    Done
-                  </Text>
-                </Pressable>
-              </View>
-              <FlatList
-                data={options}
-                keyExtractor={(item) => item.value}
-                renderItem={({ item }) => {
-                  const isSelected = item.value === value;
-                  return (
-                    <Pressable
-                      accessibilityRole="button"
-                      accessibilityLabel={item.label}
-                      accessibilityState={{
-                        selected: isSelected,
-                        disabled: item.disabled,
-                      }}
-                      disabled={item.disabled}
-                      onPress={() => handleSelect(item.value)}
-                      style={({ pressed }) => [
-                        styles.optionItem,
-                        isSelected && { backgroundColor: colors.colorBgSubtle },
-                        pressed && { opacity: 0.7 },
-                        item.disabled && { opacity: 0.4 },
-                      ]}
-                    >
-                      <Text
-                        style={[
-                          styles.optionText,
-                          {
-                            color: isSelected
-                              ? colors.colorInteractive
-                              : colors.colorOnBg,
-                            fontWeight: isSelected
-                              ? font.weight.semibold
-                              : font.weight.body,
-                          },
-                        ]}
-                      >
-                        {item.label}
-                      </Text>
-                    </Pressable>
-                  );
-                }}
-              />
-            </SafeAreaView>
-          </Pressable>
-        </Pressable>
-      </Modal>
-
-      <Message type="error" message={error} />
-      <Message type="hint" message={hint} />
-    </View>
-  );
-}

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

@@ -1,83 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Slider.native.stories';
-
-<Meta of={Stories} />
-
-# Slider (React Native)
-
-Range slider with a draggable track, optional value display, and error/hint messages. Uses touch responders on the track for value selection.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Slider } from '@boostdev/design-system-components';
-import { useState } from 'react';
-
-function Example() {
-  const [volume, setVolume] = useState(50);
-  return (
-    <Slider
-      label="Volume"
-      name="volume"
-      value={volume}
-      onChange={setVolume}
-      showValue
-    />
-  );
-}
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With value display
-<Canvas of={Stories.WithValue} />
-
-### Custom range
-<Canvas of={Stories.CustomRange} />
-
-### With step
-<Canvas of={Stories.WithStep} />
-
-### With error
-<Canvas of={Stories.WithError} />
-
-### With hint
-<Canvas of={Stories.WithHint} />
-
-### Disabled
-<Canvas of={Stories.Disabled} />
-
-### Interactive
-<Canvas of={Stories.Interactive} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | string | — | Visible label text |
-| `name` | string | — | Field name |
-| `value` | number | — | Controlled value |
-| `defaultValue` | number | — | Uncontrolled default value |
-| `min` | number | `0` | Minimum value |
-| `max` | number | `100` | Maximum value |
-| `step` | number | `1` | Value increment |
-| `showValue` | boolean | `false` | Show current value next to the label |
-| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
-| `error` | string | — | Error message displayed below the track |
-| `hint` | string | — | Hint text displayed below the track |
-| `onChange` | `(value: number) => void` | — | Called with the new value |
-
-## Accessibility
-
-- Uses `accessibilityRole="adjustable"` for VoiceOver/TalkBack
-- `accessibilityValue` provides `min`, `max`, `now`, and `text`
-- `disabled` communicates the disabled state via `accessibilityState`