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

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

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

package/src/components/interaction/form/Slider/Slider.spec.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Slider } from './Slider';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Slider (native)', () => {
+  it('renders the label', () => {
+    renderWithTheme(<Slider label="Volume" name="volume" />);
+    expect(screen.getByText('Volume')).toBeInTheDocument();
+  });
+
+  it('shows current value when showValue is true', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" value={75} showValue />,
+    );
+    expect(screen.getByText('75')).toBeInTheDocument();
+  });
+
+  it('hides value display when showValue is false', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" value={50} />,
+    );
+    // Only "Volume" text should be present, not the value
+    expect(screen.queryByText('50')).not.toBeInTheDocument();
+  });
+
+  it('shows error message', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" error="Too low." />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Too low.');
+  });
+
+  it('shows hint message', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" hint="Adjust volume." />,
+    );
+    expect(screen.getByText('Adjust volume.')).toBeInTheDocument();
+  });
+
+  it('uses default min value when no value is provided', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" showValue />,
+    );
+    // Default min is 0, which becomes the initial value
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Slider } from './Slider';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Slider',
+  component: Slider,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { label: 'Volume', name: 'volume', value: 50 },
+};
+
+export const WithValue: Story = {
+  args: { label: 'Brightness', name: 'brightness', value: 75, showValue: true },
+};
+
+export const CustomRange: Story = {
+  args: { label: 'Temperature', name: 'temp', min: 16, max: 30, value: 21, showValue: true },
+};
+
+export const WithStep: Story = {
+  args: { label: 'Quantity', name: 'qty', min: 0, max: 50, step: 5, value: 25, showValue: true },
+};
+
+export const WithError: Story = {
+  args: { label: 'Volume', name: 'volume', value: 0, error: 'Volume must be at least 10.' },
+};
+
+export const WithHint: Story = {
+  args: { label: 'Volume', name: 'volume', value: 50, hint: 'Adjust playback volume.' },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Volume', name: 'volume', value: 30, disabled: true, showValue: true },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+    return (
+      <Slider
+        label="Volume"
+        name="volume"
+        value={value}
+        onChange={setValue}
+        showValue
+      />
+    );
+  },
+};

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

@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, lineHeight } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label';
+import { Message } from '../atoms/Message';
+
+interface SliderProps {
+  label: string;
+  name: string;
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  showValue?: boolean;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  onChange?: (value: number) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TRACK_HEIGHT = 6;
+const THUMB_SIZE = 24;
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  labelRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  valueText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.bodyS,
+    lineHeight: lineHeight.bodyS,
+    fontWeight: font.weight.semibold,
+  },
+  trackContainer: {
+    height: THUMB_SIZE + spacing.xs * 2,
+    justifyContent: 'center',
+    paddingHorizontal: THUMB_SIZE / 2,
+  },
+  track: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+  },
+  thumb: {
+    position: 'absolute',
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    top: '50%',
+    marginTop: -(THUMB_SIZE / 2),
+    borderWidth: 2,
+  },
+});
+
+function clampValue(v: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, v));
+}
+
+function snapToStep(v: number, min: number, step: number): number {
+  return Math.round((v - min) / step) * step + min;
+}
+
+export function Slider({
+  label,
+  name: _name, // eslint-disable-line @typescript-eslint/no-unused-vars
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = false,
+  disabled = false,
+  error,
+  hint,
+  onChange,
+  style,
+}: Readonly<SliderProps>) {
+  const { colors } = useTheme();
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? min);
+  const [trackWidth, setTrackWidth] = useState(0);
+
+  const currentValue = isControlled ? value : internalValue;
+  const fillPct = max > min ? ((currentValue - min) / (max - min)) * 100 : 0;
+
+  const updateValue = (v: number) => {
+    const clamped = clampValue(v, min, max);
+    const snapped = snapToStep(clamped, min, step);
+    if (!isControlled) setInternalValue(snapped);
+    onChange?.(snapped);
+  };
+
+  const handleTrackLayout = (e: LayoutChangeEvent) => {
+    setTrackWidth(e.nativeEvent.layout.width);
+  };
+
+  const valueFromTouch = (pageX: number, layoutX: number): number => {
+    const x = pageX - layoutX;
+    const pct = clampValue(x / trackWidth, 0, 1);
+    return pct * (max - min) + min;
+  };
+
+  const handleStartShouldSetResponder = () => !disabled;
+  const handleResponderGrant = (e: GestureResponderEvent) => {
+    const target = e.currentTarget as unknown as { measure: (cb: (x: number, y: number, w: number, h: number, px: number, py: number) => void) => void };
+    target.measure((_x, _y, _w, _h, pageX) => {
+      updateValue(valueFromTouch(e.nativeEvent.pageX, pageX));
+    });
+  };
+  const handleResponderMove = (e: GestureResponderEvent) => {
+    const target = e.currentTarget as unknown as { measure: (cb: (x: number, y: number, w: number, h: number, px: number, py: number) => void) => void };
+    target.measure((_x, _y, _w, _h, pageX) => {
+      updateValue(valueFromTouch(e.nativeEvent.pageX, pageX));
+    });
+  };
+
+  return (
+    <View
+      style={[styles.container, style]}
+      accessibilityRole="adjustable"
+      accessibilityLabel={label}
+      accessibilityValue={{ min, max, now: currentValue, text: String(currentValue) }}
+      accessibilityState={{ disabled }}
+    >
+      <View style={styles.labelRow}>
+        <Label label={label} />
+        {showValue && (
+          <Text style={[styles.valueText, { color: colors.colorOnBg }]}>
+            {currentValue}
+          </Text>
+        )}
+      </View>
+      <View
+        style={[styles.trackContainer, disabled && { opacity: 0.4 }]}
+        onLayout={handleTrackLayout}
+        onStartShouldSetResponder={handleStartShouldSetResponder}
+        onMoveShouldSetResponder={handleStartShouldSetResponder}
+        onResponderGrant={handleResponderGrant}
+        onResponderMove={handleResponderMove}
+      >
+        <View style={[styles.track, { backgroundColor: colors.colorBgSubtle }]}>
+          <View
+            style={[
+              styles.fill,
+              {
+                width: `${fillPct}%`,
+                backgroundColor: error ? colors.colorError : colors.colorInteractive,
+              },
+            ]}
+          />
+        </View>
+        <View
+          style={[
+            styles.thumb,
+            {
+              start: `${fillPct}%`,
+              marginStart: -(THUMB_SIZE / 2),
+              backgroundColor: colors.colorBg,
+              borderColor: error ? colors.colorError : colors.colorInteractive,
+            },
+          ]}
+        />
+      </View>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

package/src/components/interaction/form/Switch/Switch.spec.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Switch } from './Switch';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+// react-native-web renders RNSwitch as two role="switch" elements: an outer div
+// (for visual rendering) and an inner hidden <input type="checkbox"> for a11y.
+// The input carries the aria-label and aria-checked state.
+function getSwitchInput(container: HTMLElement): HTMLInputElement {
+  const input = container.querySelector<HTMLInputElement>('input[role="switch"]');
+  if (!input) throw new Error('Switch input not found');
+  return input;
+}
+
+describe('Switch (native)', () => {
+  it('renders a switch input with the correct label', () => {
+    const { container } = renderWithTheme(
+      <Switch label="Notifications" name="notifications" />,
+    );
+    const input = getSwitchInput(container);
+    expect(input).toHaveAttribute('aria-label', 'Notifications');
+  });
+
+  it('reflects off state', () => {
+    const { container } = renderWithTheme(
+      <Switch label="Notifications" name="notifications" value={false} />,
+    );
+    expect(getSwitchInput(container)).not.toBeChecked();
+  });
+
+  it('reflects on state', () => {
+    const { container } = renderWithTheme(
+      <Switch label="Notifications" name="notifications" value={true} />,
+    );
+    expect(getSwitchInput(container)).toBeChecked();
+  });
+
+  it('renders thumb in both on and off states without error (thumb always uses colorInteractive)', () => {
+    // thumbColor is always colorInteractive — interactive affordance is visible in both states.
+    // Track color provides the on/off visual feedback instead.
+    const { container: offContainer } = renderWithTheme(
+      <Switch label="Toggle" name="toggle" value={false} />,
+    );
+    const { container: onContainer } = renderWithTheme(
+      <Switch label="Toggle2" name="toggle2" value={true} />,
+    );
+    expect(offContainer.querySelector('[style*="background-color"]')).toBeInTheDocument();
+    expect(onContainer.querySelector('[style*="background-color"]')).toBeInTheDocument();
+  });
+
+  it('renders hint message', () => {
+    renderWithTheme(
+      <Switch label="Marketing" name="marketing" hint="Unsubscribe anytime." />,
+    );
+    expect(screen.getByText('Unsubscribe anytime.')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Switch } from './Switch';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Switch',
+  component: Switch,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Off: Story = { args: { label: 'Notifications', name: 'notifications', value: false } };
+export const On: Story = { args: { label: 'Notifications', name: 'notifications', value: true } };
+export const Disabled: Story = { args: { label: 'Notifications', name: 'notifications', disabled: true } };
+export const WithError: Story = {
+  args: { label: 'Accept terms', name: 'terms', error: 'You must accept the terms.' },
+};
+export const WithHint: Story = {
+  args: { label: 'Marketing emails', name: 'marketing', hint: 'You can unsubscribe at any time.' },
+};
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = useState(false);
+    return (
+      <Switch label="Enable feature" name="feature" value={value} onChange={setValue} />
+    );
+  },
+};

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

@@ -0,0 +1,59 @@
+import { Switch as RNSwitch, View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { spacing } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label';
+import { Message } from '../atoms/Message';
+
+interface SwitchProps {
+  label: string;
+  name: string;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+});
+
+export function Switch({
+  label,
+  value = false,
+  onChange,
+  disabled = false,
+  error,
+  hint,
+  style,
+}: Readonly<SwitchProps>) {
+  const { colors } = useTheme();
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.row}>
+        <RNSwitch
+          value={value}
+          onValueChange={onChange}
+          disabled={disabled}
+          accessibilityLabel={label}
+          accessibilityRole="switch"
+          accessibilityState={{ checked: value, disabled }}
+          thumbColor={colors.colorInteractive}
+          trackColor={{ false: colors.colorBgSubtle, true: colors.colorBlueSubtle }}
+        />
+        <Label label={label} />
+      </View>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

package/src/components/interaction/form/Textarea/Textarea.mdx

@@ -0,0 +1,76 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Textarea.stories';
+
+<Meta of={Stories} />
+
+# Textarea (React Native)
+
+Multiline text input with label, optional hint, and error state. Uses a `TextInput` with `multiline` enabled and `textAlignVertical: 'top'`.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Textarea } from '@boostdev/design-system-components';
+import { useState } from 'react';
+
+function Example() {
+  const [bio, setBio] = useState('');
+  return (
+    <Textarea
+      label="Bio"
+      name="bio"
+      placeholder="Tell us about yourself..."
+      value={bio}
+      onChange={setBio}
+    />
+  );
+}
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With placeholder
+<Canvas of={Stories.WithPlaceholder} />
+
+### 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) |
+| `value` | string | — | Controlled value |
+| `defaultValue` | string | — | Uncontrolled default value |
+| `placeholder` | string | — | Placeholder text |
+| `numberOfLines` | number | `4` | Number of visible lines |
+| `error` | string | — | Error message displayed below the input |
+| `hint` | string | — | Hint text displayed below the input |
+| `required` | boolean | `false` | Marks the field as required |
+| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
+| `onChange` | `(value: string) => void` | — | Called with the new text value |
+
+## Accessibility
+
+- The label is announced by screen readers via `accessibilityLabel`
+- Hint text is announced via `accessibilityHint`
+- `disabled` communicates the disabled state via `accessibilityState`

package/src/components/interaction/form/Textarea/Textarea.spec.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Textarea } from './Textarea';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Textarea (native)', () => {
+  it('renders the label', () => {
+    renderWithTheme(<Textarea label="Message" name="message" />);
+    expect(screen.getByText('Message')).toBeInTheDocument();
+  });
+
+  it('renders with placeholder text', () => {
+    renderWithTheme(
+      <Textarea label="Bio" name="bio" placeholder="Tell us about yourself..." />,
+    );
+    expect(screen.getByPlaceholderText('Tell us about yourself...')).toBeInTheDocument();
+  });
+
+  it('renders with a value', () => {
+    renderWithTheme(
+      <Textarea label="Notes" name="notes" value="Some content" />,
+    );
+    expect(screen.getByDisplayValue('Some content')).toBeInTheDocument();
+  });
+
+  it('shows error message', () => {
+    renderWithTheme(
+      <Textarea label="Message" name="message" error="Message is required." />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Message is required.');
+  });
+
+  it('shows hint message', () => {
+    renderWithTheme(
+      <Textarea label="Message" name="message" hint="Minimum 20 characters." />,
+    );
+    expect(screen.getByText('Minimum 20 characters.')).toBeInTheDocument();
+  });
+
+  it('applies disabled opacity', () => {
+    const { container } = renderWithTheme(
+      <Textarea label="Notes" name="notes" disabled />,
+    );
+    const inputs = container.querySelectorAll('textarea, [style*="opacity"]');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+});