@boostdev/design-system-components 2.4.1 → 2.5.0

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

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

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

@@ -1,188 +0,0 @@
-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.native';
-import { Message } from '../atoms/Message.native';
-
-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.native.spec.tsx

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

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

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

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

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

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

@@ -1,50 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Textarea } from './Textarea.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/Textarea',
-  component: Textarea,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Message', name: 'message' },
-};
-
-export const WithPlaceholder: Story = {
-  args: { label: 'Bio', name: 'bio', placeholder: 'Tell us about yourself...' },
-};
-
-export const WithError: Story = {
-  args: { label: 'Message', name: 'message', error: 'Message is required.' },
-};
-
-export const WithHint: Story = {
-  args: { label: 'Message', name: 'message', hint: 'Minimum 20 characters.' },
-};
-
-export const Disabled: Story = {
-  args: { label: 'Notes', name: 'notes', disabled: true, value: 'Read-only content.' },
-};
-
-export const Interactive: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-    return (
-      <Textarea
-        label="Feedback"
-        name="feedback"
-        placeholder="Share your thoughts..."
-        value={value}
-        onChange={setValue}
-      />
-    );
-  },
-};