@boostdev/design-system-components 2.4.2 → 2.5.0

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

@@ -1,54 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { FormInput } from './FormInput.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/FormInput',
-  component: FormInput,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof FormInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Full name', name: 'fullName' },
-};
-
-export const WithPlaceholder: Story = {
-  args: { label: 'Email', name: 'email', type: 'email', placeholder: 'you@example.com' },
-};
-
-export const Password: Story = {
-  args: { label: 'Password', name: 'password', type: 'password' },
-};
-
-export const WithError: Story = {
-  args: { label: 'Email', name: 'email', type: 'email', error: 'Please enter a valid email address.' },
-};
-
-export const WithHint: Story = {
-  args: { label: 'Username', name: 'username', hint: 'Must be at least 3 characters.' },
-};
-
-export const Disabled: Story = {
-  args: { label: 'Full name', name: 'fullName', disabled: true, value: 'Jane Doe' },
-};
-
-export const Interactive: Story = {
-  render: () => {
-    const [value, setValue] = useState('');
-    return (
-      <FormInput
-        label="Your name"
-        name="name"
-        placeholder="Enter your name"
-        value={value}
-        onChange={setValue}
-      />
-    );
-  },
-};

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

@@ -1,122 +0,0 @@
-import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  KeyboardTypeOptions,
-  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';
-
-type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'search';
-
-interface FormInputProps {
-  label: ReactNode;
-  name: string;
-  type?: InputType;
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-  error?: string;
-  hint?: string;
-  disabled?: boolean;
-  onChange?: (value: string) => void;
-  onBlur?: () => void;
-  onFocus?: () => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-const keyboardTypeMap: Record<InputType, KeyboardTypeOptions> = {
-  text: 'default',
-  email: 'email-address',
-  password: 'default',
-  tel: 'phone-pad',
-  url: 'url',
-  number: 'numeric',
-  search: 'default',
-};
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xxs,
-  },
-  input: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-    paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44,
-  },
-});
-
-export function FormInput({
-  label,
-  name,
-  type = 'text',
-  value,
-  defaultValue,
-  placeholder,
-  error,
-  hint,
-  disabled = false,
-  onChange,
-  onBlur,
-  onFocus,
-  style,
-}: Readonly<FormInputProps>) {
-  const { colors } = useTheme();
-  const [focused, setFocused] = useState(false);
-
-  const borderColor = error
-    ? colors.colorError
-    : focused
-      ? colors.colorInteractive
-      : colors.colorOnBg;
-
-  return (
-    <View style={[styles.container, style]}>
-      <Label label={label} />
-      <TextInput
-        accessibilityLabel={typeof label === 'string' ? label : name}
-        accessibilityState={{ disabled }}
-        accessibilityHint={hint}
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        placeholderTextColor={colors.colorOnBgSubtle}
-        keyboardType={keyboardTypeMap[type]}
-        secureTextEntry={type === 'password'}
-        autoCapitalize={type === 'email' || type === 'url' ? 'none' : 'sentences'}
-        autoComplete={type === 'email' ? 'email' : type === 'tel' ? 'tel' : undefined}
-        editable={!disabled}
-        onChangeText={onChange}
-        onFocus={() => {
-          setFocused(true);
-          onFocus?.();
-        }}
-        onBlur={() => {
-          setFocused(false);
-          onBlur?.();
-        }}
-        style={[
-          styles.input,
-          {
-            borderColor,
-            color: colors.colorOnBg,
-            backgroundColor: colors.colorBg,
-          },
-          disabled && { opacity: 0.4 },
-        ]}
-      />
-      <Message type="error" message={error} />
-      <Message type="hint" message={hint} />
-    </View>
-  );
-}

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

@@ -1,87 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './NumberInput.native.stories';
-
-<Meta of={Stories} />
-
-# NumberInput (React Native)
-
-Numeric input with stepper buttons on each side. Supports min/max clamping, configurable step, and controlled or uncontrolled usage.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { NumberInput } from '@boostdev/design-system-components';
-import { useState } from 'react';
-
-function Example() {
-  const [qty, setQty] = useState(1);
-  return (
-    <NumberInput
-      label="Quantity"
-      name="qty"
-      value={qty}
-      min={1}
-      max={20}
-      onChange={setQty}
-    />
-  );
-}
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With min and max
-<Canvas of={Stories.WithMinMax} />
-
-### With step
-<Canvas of={Stories.WithStep} />
-
-### At minimum
-<Canvas of={Stories.AtMinimum} />
-
-### At maximum
-<Canvas of={Stories.AtMaximum} />
-
-### 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 (defaults to `0`) |
-| `min` | number | — | Minimum allowed value |
-| `max` | number | — | Maximum allowed value |
-| `step` | number | `1` | Increment/decrement amount |
-| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
-| `error` | string | — | Error message displayed below the input |
-| `hint` | string | — | Hint text displayed below the input |
-| `onChange` | `(value: number) => void` | — | Called with the clamped value |
-
-## Accessibility
-
-- Decrease and Increase buttons have `accessibilityLabel` and `accessibilityRole="button"`
-- Stepper buttons are automatically disabled at min/max boundaries
-- `accessibilityValue` on the input provides `min`, `max`, `now`, and `text`
-- `disabled` communicates the disabled state via `accessibilityState`

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

@@ -1,63 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { NumberInput } from './NumberInput.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('NumberInput (native)', () => {
-  it('renders the label', () => {
-    renderWithTheme(<NumberInput label="Quantity" name="qty" />);
-    expect(screen.getByText('Quantity')).toBeInTheDocument();
-  });
-
-  it('renders the current value in the input', () => {
-    renderWithTheme(<NumberInput label="Quantity" name="qty" value={5} />);
-    expect(screen.getByDisplayValue('5')).toBeInTheDocument();
-  });
-
-  it('renders decrease and increase buttons', () => {
-    renderWithTheme(<NumberInput label="Quantity" name="qty" value={5} />);
-    expect(screen.getByRole('button', { name: 'Decrease' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Increase' })).toBeInTheDocument();
-  });
-
-  it('disables decrease button at min boundary', () => {
-    renderWithTheme(
-      <NumberInput label="Quantity" name="qty" value={0} min={0} max={10} />,
-    );
-    expect(screen.getByRole('button', { name: 'Decrease' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Increase' })).not.toBeDisabled();
-  });
-
-  it('disables increase button at max boundary', () => {
-    renderWithTheme(
-      <NumberInput label="Quantity" name="qty" value={10} min={0} max={10} />,
-    );
-    expect(screen.getByRole('button', { name: 'Increase' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Decrease' })).not.toBeDisabled();
-  });
-
-  it('shows error message', () => {
-    renderWithTheme(
-      <NumberInput label="Quantity" name="qty" error="Minimum is 1." />,
-    );
-    expect(screen.getByRole('alert')).toHaveTextContent('Minimum is 1.');
-  });
-
-  it('shows hint message', () => {
-    renderWithTheme(
-      <NumberInput label="Guests" name="guests" hint="Including yourself." />,
-    );
-    expect(screen.getByText('Including yourself.')).toBeInTheDocument();
-  });
-
-  it('disables all controls when disabled', () => {
-    renderWithTheme(
-      <NumberInput label="Quantity" name="qty" value={5} disabled />,
-    );
-    expect(screen.getByRole('button', { name: 'Decrease' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Increase' })).toBeDisabled();
-  });
-});

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

@@ -1,63 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { NumberInput } from './NumberInput.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/NumberInput',
-  component: NumberInput,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof NumberInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Quantity', name: 'qty', value: 1 },
-};
-
-export const WithMinMax: Story = {
-  args: { label: 'Quantity', name: 'qty', value: 1, min: 0, max: 10 },
-};
-
-export const WithStep: Story = {
-  args: { label: 'Amount', name: 'amount', value: 0, step: 5, min: 0, max: 100 },
-};
-
-export const AtMinimum: Story = {
-  args: { label: 'Quantity', name: 'qty', value: 0, min: 0, max: 10 },
-};
-
-export const AtMaximum: Story = {
-  args: { label: 'Quantity', name: 'qty', value: 10, min: 0, max: 10 },
-};
-
-export const WithError: Story = {
-  args: { label: 'Quantity', name: 'qty', value: 0, error: 'Minimum quantity is 1.' },
-};
-
-export const WithHint: Story = {
-  args: { label: 'Guests', name: 'guests', value: 2, hint: 'Including yourself.' },
-};
-
-export const Disabled: Story = {
-  args: { label: 'Quantity', name: 'qty', value: 3, disabled: true },
-};
-
-export const Interactive: Story = {
-  render: () => {
-    const [value, setValue] = useState(1);
-    return (
-      <NumberInput
-        label="Guests"
-        name="guests"
-        value={value}
-        min={1}
-        max={20}
-        onChange={setValue}
-      />
-    );
-  },
-};

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

@@ -1,198 +0,0 @@
-import { useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  Text,
-  Pressable,
-  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';
-
-interface NumberInputProps {
-  label: string;
-  name: string;
-  value?: number;
-  defaultValue?: number;
-  min?: number;
-  max?: number;
-  step?: number;
-  disabled?: boolean;
-  error?: string;
-  hint?: string;
-  onChange?: (value: number) => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-const STEPPER_SIZE = 44;
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xxs,
-  },
-  inputRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  stepper: {
-    width: STEPPER_SIZE,
-    height: STEPPER_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-  },
-  stepperStart: {
-    borderTopStartRadius: border.radius.full,
-    borderBottomStartRadius: border.radius.full,
-    borderEndWidth: 0,
-  },
-  stepperEnd: {
-    borderTopEndRadius: border.radius.full,
-    borderBottomEndRadius: border.radius.full,
-    borderStartWidth: 0,
-  },
-  stepperText: {
-    fontSize: 20,
-    fontWeight: font.weight.semibold,
-    lineHeight: 24,
-  },
-  input: {
-    flex: 1,
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-    textAlign: 'center',
-    paddingHorizontal: spacing.xs,
-    paddingVertical: spacing.xs,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    minHeight: STEPPER_SIZE,
-  },
-});
-
-export function NumberInput({
-  label,
-  name: _name, // eslint-disable-line @typescript-eslint/no-unused-vars
-  value,
-  defaultValue,
-  min,
-  max,
-  step = 1,
-  disabled = false,
-  error,
-  hint,
-  onChange,
-  style,
-}: Readonly<NumberInputProps>) {
-  const { colors } = useTheme();
-  const isControlled = value !== undefined;
-  const [internalValue, setInternalValue] = useState(defaultValue ?? 0);
-
-  const currentValue = isControlled ? value : internalValue;
-
-  const clamp = (v: number): number => {
-    const withMin = min !== undefined ? Math.max(min, v) : v;
-    return max !== undefined ? Math.min(max, withMin) : withMin;
-  };
-
-  const update = (next: number) => {
-    const clamped = clamp(next);
-    if (!isControlled) setInternalValue(clamped);
-    onChange?.(clamped);
-  };
-
-  const canDecrease = min === undefined || currentValue > min;
-  const canIncrease = max === undefined || currentValue < max;
-
-  const borderColor = error ? colors.colorError : colors.colorOnBg;
-
-  return (
-    <View style={[styles.container, style]}>
-      <Label label={label} />
-      <View style={[styles.inputRow, disabled && { opacity: 0.4 }]}>
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel="Decrease"
-          accessibilityState={{ disabled: disabled || !canDecrease }}
-          disabled={disabled || !canDecrease}
-          onPress={() => update(currentValue - step)}
-          style={({ pressed }) => [
-            styles.stepper,
-            styles.stepperStart,
-            {
-              borderColor,
-              backgroundColor: colors.colorBgSubtle,
-            },
-            pressed && { opacity: 0.7 },
-            (disabled || !canDecrease) && { opacity: 0.4 },
-          ]}
-        >
-          <Text
-            style={[styles.stepperText, { color: colors.colorOnBg }]}
-            aria-hidden
-          >
-            {'\u2212'}
-          </Text>
-        </Pressable>
-
-        <TextInput
-          accessibilityLabel={label}
-          accessibilityState={{ disabled }}
-          accessibilityValue={{
-            min,
-            max,
-            now: currentValue,
-            text: String(currentValue),
-          }}
-          keyboardType="numeric"
-          value={String(currentValue)}
-          editable={!disabled}
-          onChangeText={(text) => {
-            const parsed = parseFloat(text);
-            const safe = isNaN(parsed) ? 0 : parsed;
-            update(safe);
-          }}
-          style={[
-            styles.input,
-            {
-              borderColor,
-              color: colors.colorOnBg,
-              backgroundColor: colors.colorBg,
-            },
-          ]}
-        />
-
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel="Increase"
-          accessibilityState={{ disabled: disabled || !canIncrease }}
-          disabled={disabled || !canIncrease}
-          onPress={() => update(currentValue + step)}
-          style={({ pressed }) => [
-            styles.stepper,
-            styles.stepperEnd,
-            {
-              borderColor,
-              backgroundColor: colors.colorBgSubtle,
-            },
-            pressed && { opacity: 0.7 },
-            (disabled || !canIncrease) && { opacity: 0.4 },
-          ]}
-        >
-          <Text
-            style={[styles.stepperText, { color: colors.colorOnBg }]}
-            aria-hidden
-          >
-            +
-          </Text>
-        </Pressable>
-      </View>
-      <Message type="error" message={error} />
-      <Message type="hint" message={hint} />
-    </View>
-  );
-}

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

@@ -1,79 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Radio } from './Radio.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Radio (native)', () => {
-  it('has radio role with label', () => {
-    renderWithTheme(<Radio label="Option A" name="choice" />);
-    expect(screen.getByRole('radio', { name: 'Option A' })).toBeInTheDocument();
-  });
-
-  it('renders unchecked by default (no inner dot)', () => {
-    renderWithTheme(<Radio label="Option A" name="choice" />);
-    // The outer circle is always present; the inner dot only renders when checked
-    const radio = screen.getByRole('radio');
-    // When unchecked, the inner filled circle should not be rendered
-    // The outer has 1 child (no inner dot) vs 2 when checked
-    expect(radio).toBeInTheDocument();
-  });
-
-  it('renders inner dot when checked', () => {
-    const { container: uncheckedContainer } = renderWithTheme(
-      <Radio label="Unchecked" name="choice" />,
-    );
-    const { container: checkedContainer } = renderWithTheme(
-      <Radio label="Checked" name="choice" checked />,
-    );
-    // The checked variant has more DOM nodes (the inner filled circle)
-    expect(checkedContainer.innerHTML.length).toBeGreaterThan(
-      uncheckedContainer.innerHTML.length,
-    );
-  });
-
-  it('reflects disabled state', () => {
-    renderWithTheme(<Radio label="Option A" name="choice" disabled />);
-    const radio = screen.getByRole('radio');
-    expect(radio).toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('calls onChange when clicked', () => {
-    const handleChange = vi.fn();
-    renderWithTheme(
-      <Radio label="Option A" name="choice" onChange={handleChange} />,
-    );
-    fireEvent.click(screen.getByRole('radio'));
-    expect(handleChange).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not call onChange when disabled', () => {
-    const handleChange = vi.fn();
-    renderWithTheme(
-      <Radio label="Option A" name="choice" disabled onChange={handleChange} />,
-    );
-    fireEvent.click(screen.getByRole('radio'));
-    expect(handleChange).not.toHaveBeenCalled();
-  });
-
-  it('renders error message', () => {
-    renderWithTheme(
-      <Radio label="Option A" name="choice" error="Selection required." />,
-    );
-    expect(screen.getByRole('alert')).toHaveTextContent('Selection required.');
-  });
-
-  it('renders hint message', () => {
-    renderWithTheme(
-      <Radio label="Option A" name="choice" hint="Select your preference." />,
-    );
-    expect(screen.getByText('Select your preference.')).toBeInTheDocument();
-  });
-
-  it('uses name as accessibility label when label is not a string', () => {
-    renderWithTheme(<Radio label={<span>Custom</span>} name="fallback" />);
-    expect(screen.getByRole('radio', { name: 'fallback' })).toBeInTheDocument();
-  });
-});