@boostdev/design-system-react-native 0.1.0 → 0.2.1

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

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { SegmentedControl } from './SegmentedControl';
+
+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 />,
+};

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

@@ -0,0 +1,121 @@
+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.mdx

@@ -0,0 +1,85 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Select.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.spec.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Select } from './Select';
+
+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.stories.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Select } from './Select';
+
+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.tsx

@@ -0,0 +1,252 @@
+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';
+import { Message } from '../atoms/Message';
+
+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>
+  );
+}