@boostdev/design-system-components 1.2.2 → 1.2.4

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

@@ -0,0 +1,81 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './FormInput.native.stories';
+
+<Meta of={Stories} />
+
+# FormInput (React Native)
+
+Text input field with label, optional hint, and error state. Maps the `type` prop to the appropriate keyboard type and secure text entry mode.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { FormInput } from '@boostdev/components';
+import { useState } from 'react';
+
+function Example() {
+  const [email, setEmail] = useState('');
+  return (
+    <FormInput
+      label="Email"
+      name="email"
+      type="email"
+      placeholder="you@example.com"
+      value={email}
+      onChange={setEmail}
+    />
+  );
+}
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With placeholder
+<Canvas of={Stories.WithPlaceholder} />
+
+### Password
+<Canvas of={Stories.Password} />
+
+### 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) |
+| `type` | `'text' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'number' \| 'search'` | `'text'` | Input type, maps to keyboard type |
+| `value` | string | — | Controlled value |
+| `defaultValue` | string | — | Uncontrolled default value |
+| `placeholder` | string | — | Placeholder text |
+| `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`
+- Password type uses `secureTextEntry` for input masking

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

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

package/src/components/interaction/form/FormInput/FormInput.native.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.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

@@ -0,0 +1,122 @@
+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.module.css

@@ -9,7 +9,7 @@
     align-items: stretch;
     border: var(--numberInput_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
 
     --_radius: var(--numberInput_radius, var(--bdc-outline_radius));
 

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

@@ -0,0 +1,87 @@
+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/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

@@ -0,0 +1,63 @@
+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

@@ -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.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}
+      />
+    );
+  },
+};