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

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

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { FormInput } from './FormInput';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('FormInput (native)', () => {
+  it('renders the label', () => {
+    renderWithTheme(<FormInput label="Full name" name="fullName" />);
+    expect(screen.getByText('Full name')).toBeInTheDocument();
+  });
+
+  it('renders with placeholder text', () => {
+    renderWithTheme(
+      <FormInput label="Email" name="email" placeholder="you@example.com" />,
+    );
+    expect(screen.getByPlaceholderText('you@example.com')).toBeInTheDocument();
+  });
+
+  it('renders with a value', () => {
+    renderWithTheme(
+      <FormInput label="Name" name="name" value="Jane" />,
+    );
+    expect(screen.getByDisplayValue('Jane')).toBeInTheDocument();
+  });
+
+  it('shows error message', () => {
+    renderWithTheme(
+      <FormInput label="Email" name="email" error="Invalid email." />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Invalid email.');
+  });
+
+  it('shows hint message', () => {
+    renderWithTheme(
+      <FormInput label="Username" name="username" hint="At least 3 characters." />,
+    );
+    expect(screen.getByText('At least 3 characters.')).toBeInTheDocument();
+  });
+
+  it('applies disabled opacity', () => {
+    const { container } = renderWithTheme(
+      <FormInput label="Name" name="name" disabled />,
+    );
+    // The TextInput should have opacity 0.4 when disabled
+    const inputs = container.querySelectorAll('input, [style*="opacity"]');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  /**
+   * Style-contract invariant: single-line TextInput must NOT have lineHeight set.
+   *
+   * On iOS, an explicit lineHeight on a single-line TextInput causes the text to
+   * render vertically clipped — descenders and ascenders are cut off at the line box
+   * boundary. The minHeight: 44 token satisfies the touch-target requirement without
+   * needing lineHeight. This test pins that invariant so it can't silently regress.
+   *
+   * react-native-web applies token-based styles as atomic CSS classes. getComputedStyle
+   * resolves those classes in jsdom and returns "normal" when lineHeight is absent.
+   */
+  it('does not set lineHeight on the TextInput (iOS clipping prevention)', () => {
+    renderWithTheme(<FormInput label="Email" name="email" value="bjorn@boonen.eu" />);
+    const input = screen.getByDisplayValue('bjorn@boonen.eu');
+    // "normal" means no explicit lineHeight was applied; a numeric value means it was.
+    expect(getComputedStyle(input).lineHeight).toBe('normal');
+  });
+
+  /**
+   * Touch-target invariant: single-line input must meet the 44pt minimum touch target.
+   * This is the replacement constraint that makes lineHeight safe to omit.
+   */
+  it('has minHeight of at least 44pt on the TextInput', () => {
+    renderWithTheme(<FormInput label="Email" name="email" />);
+    const input = screen.getByRole('textbox');
+    // getComputedStyle resolves the atomic CSS class to a pixel value.
+    const minHeightPx = parseFloat(getComputedStyle(input).minHeight);
+    expect(minHeightPx).toBeGreaterThanOrEqual(44);
+  });
+});

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

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

@@ -0,0 +1,123 @@
+import { ReactNode, useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  TextInput,
+  KeyboardTypeOptions,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, border } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label';
+import { Message } from '../atoms/Message';
+
+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,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
+    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.mdx

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

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

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

@@ -0,0 +1,199 @@
+import { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  TextInput,
+  Text,
+  Pressable,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, border } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label';
+import { Message } from '../atoms/Message';
+
+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,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: STEPPER_SIZE (44) covers the touch target.
+    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>
+  );
+}