@boostdev/design-system-components 2.4.1 → 2.5.0

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

@@ -1,211 +0,0 @@
-import { useState, useMemo } from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  Pressable,
-  Text,
-  ScrollView,
-  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';
-
-export interface ComboboxOption {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-interface ComboboxProps {
-  label: string;
-  name: string;
-  options: ComboboxOption[];
-  placeholder?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  error?: string;
-  hint?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const MAX_DROPDOWN_HEIGHT = 200;
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xxs,
-  },
-  inputWrapper: {
-    position: 'relative',
-  },
-  input: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-    paddingVertical: spacing.xs,
-    paddingHorizontal: spacing.s,
-    borderWidth: 1,
-    borderRadius: border.radius.full,
-    minHeight: 44,
-  },
-  dropdown: {
-    position: 'absolute',
-    top: '100%',
-    start: 0,
-    end: 0,
-    maxHeight: MAX_DROPDOWN_HEIGHT,
-    borderWidth: 1,
-    borderTopWidth: 0,
-    borderBottomStartRadius: border.radius.xs,
-    borderBottomEndRadius: border.radius.xs,
-    zIndex: 10,
-  },
-  option: {
-    paddingVertical: spacing.xs,
-    paddingHorizontal: spacing.s,
-    minHeight: 44,
-    justifyContent: 'center',
-  },
-  optionText: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-  },
-});
-
-export function Combobox({
-  label,
-  name,
-  options,
-  placeholder,
-  value,
-  onChange,
-  disabled = false,
-  error,
-  hint,
-  style,
-}: Readonly<ComboboxProps>) {
-  const { colors } = useTheme();
-
-  const selectedOption = useMemo(
-    () => options.find((o) => o.value === value),
-    [options, value],
-  );
-
-  const [inputValue, setInputValue] = useState(selectedOption?.label ?? '');
-  const [isOpen, setIsOpen] = useState(false);
-
-  const filtered = useMemo(
-    () =>
-      options.filter((o) =>
-        o.label.toLowerCase().includes(inputValue.toLowerCase()),
-      ),
-    [options, inputValue],
-  );
-
-  const selectOption = (option: ComboboxOption) => {
-    setInputValue(option.label);
-    setIsOpen(false);
-    onChange?.(option.value);
-  };
-
-  const handleChangeText = (text: string) => {
-    setInputValue(text);
-    setIsOpen(true);
-  };
-
-  const handleFocus = () => {
-    setIsOpen(true);
-  };
-
-  const handleBlur = () => {
-    // Delay closing so onPress on an option can fire first
-    setTimeout(() => setIsOpen(false), 150);
-  };
-
-  const borderColor = error ? colors.colorError : colors.colorOnBg;
-
-  return (
-    <View style={[styles.container, style]}>
-      <Label label={label} />
-      <View style={styles.inputWrapper}>
-        <TextInput
-          value={inputValue}
-          onChangeText={handleChangeText}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          placeholder={placeholder}
-          placeholderTextColor={colors.colorOnBgSubtle}
-          editable={!disabled}
-          accessibilityRole="combobox"
-          accessibilityLabel={typeof label === 'string' ? label : name}
-          accessibilityState={{ disabled, expanded: isOpen }}
-          style={[
-            styles.input,
-            {
-              borderColor,
-              color: colors.colorOnBg,
-              backgroundColor: colors.colorBg,
-            },
-            disabled && { opacity: 0.4 },
-          ]}
-        />
-        {isOpen && filtered.length > 0 && (
-          <ScrollView
-            style={[
-              styles.dropdown,
-              {
-                borderColor: colors.colorBgSubtle,
-                backgroundColor: colors.colorBg,
-              },
-            ]}
-            keyboardShouldPersistTaps="handled"
-            nestedScrollEnabled
-          >
-            {filtered.map((option) => {
-              const isSelected = option.value === value;
-              const isDisabled = option.disabled;
-
-              return (
-                <Pressable
-                  key={option.value}
-                  onPress={() => !isDisabled && selectOption(option)}
-                  disabled={isDisabled}
-                  accessibilityRole="menuitem"
-                  accessibilityLabel={option.label}
-                  accessibilityState={{ selected: isSelected, disabled: isDisabled }}
-                  style={({ pressed }) => [
-                    styles.option,
-                    isSelected && { backgroundColor: colors.colorBlueSubtle },
-                    pressed && !isDisabled && { backgroundColor: colors.colorBgSubtle },
-                    isDisabled && { opacity: 0.4 },
-                  ]}
-                >
-                  <Text
-                    style={[
-                      styles.optionText,
-                      {
-                        color: isSelected
-                          ? colors.colorInteractive
-                          : colors.colorOnBg,
-                      },
-                      isSelected && { fontWeight: font.weight.semibold },
-                    ]}
-                  >
-                    {option.label}
-                  </Text>
-                </Pressable>
-              );
-            })}
-          </ScrollView>
-        )}
-      </View>
-      <Message type="error" message={error} />
-      <Message type="hint" message={hint} />
-    </View>
-  );
-}

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

@@ -1,86 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './FileInput.native.stories';
-
-<Meta of={Stories} />
-
-# FileInput (React Native)
-
-A file selection area that displays an upload prompt. In React Native, actual file picking requires a native module (e.g. `expo-document-picker`). This component provides the UI trigger and displays selected file names.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { FileInput } from '@boostdev/design-system-components';
-import { useState } from 'react';
-import * as DocumentPicker from 'expo-document-picker';
-
-function Example() {
-  const [fileNames, setFileNames] = useState<string[]>([]);
-
-  const handleSelect = async () => {
-    const result = await DocumentPicker.getDocumentAsync({ multiple: true });
-    if (!result.canceled) {
-      setFileNames(result.assets.map(a => a.name));
-    }
-  };
-
-  return (
-    <FileInput
-      label="Upload document"
-      name="document"
-      fileNames={fileNames}
-      onSelect={handleSelect}
-    />
-  );
-}
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With accepted file types
-<Canvas of={Stories.WithAccept} />
-
-### With selected files
-<Canvas of={Stories.WithFiles} />
-
-### Required
-<Canvas of={Stories.Required} />
-
-### With hint
-<Canvas of={Stories.WithHint} />
-
-### With error
-<Canvas of={Stories.WithError} />
-
-### Disabled
-<Canvas of={Stories.Disabled} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | string | -- | Visible label text |
-| `name` | string | -- | Field name |
-| `accept` | string | -- | Accepted file types hint (display only) |
-| `multiple` | boolean | `false` | Whether multiple files can be selected |
-| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
-| `required` | boolean | -- | Appends asterisk to label |
-| `error` | string | -- | Error message displayed below |
-| `hint` | string | -- | Helper text displayed below |
-| `onSelect` | `() => void` | -- | Called when the file area is pressed |
-| `fileNames` | `string[]` | `[]` | File names to display |
-
-## Accessibility
-
-- Uses `accessibilityRole="button"` for the pressable area
-- `accessibilityLabel` includes the label text and action prompt
-- Disabled state is communicated via `accessibilityState`

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

@@ -1,73 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { FileInput } from './FileInput.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('FileInput (native)', () => {
-  it('renders with label', () => {
-    renderWithTheme(<FileInput label="Upload document" name="document" />);
-    expect(screen.getByText('Upload document')).toBeInTheDocument();
-  });
-
-  it('renders the tap-to-select prompt when no files are selected', () => {
-    renderWithTheme(<FileInput label="Upload" name="upload" />);
-    expect(screen.getByText('Tap to select file')).toBeInTheDocument();
-  });
-
-  it('displays file names when provided', () => {
-    renderWithTheme(
-      <FileInput label="Upload" name="upload" fileNames={['report.pdf', 'data.csv']} />,
-    );
-    expect(screen.getByText('report.pdf')).toBeInTheDocument();
-    expect(screen.getByText('data.csv')).toBeInTheDocument();
-  });
-
-  it('displays accept hint', () => {
-    renderWithTheme(
-      <FileInput label="Upload" name="upload" accept=".png, .jpg" />,
-    );
-    expect(screen.getByText('.png, .jpg')).toBeInTheDocument();
-  });
-
-  it('calls onSelect when clicked', () => {
-    const onSelect = vi.fn();
-    renderWithTheme(
-      <FileInput label="Upload" name="upload" onSelect={onSelect} />,
-    );
-    fireEvent.click(screen.getByRole('button'));
-    expect(onSelect).toHaveBeenCalledOnce();
-  });
-
-  it('does not call onSelect when disabled', () => {
-    const onSelect = vi.fn();
-    renderWithTheme(
-      <FileInput label="Upload" name="upload" onSelect={onSelect} disabled />,
-    );
-    fireEvent.click(screen.getByRole('button'));
-    expect(onSelect).not.toHaveBeenCalled();
-  });
-
-  it('renders error message', () => {
-    renderWithTheme(
-      <FileInput label="Upload" name="upload" error="File required." />,
-    );
-    expect(screen.getByRole('alert')).toHaveTextContent('File required.');
-  });
-
-  it('renders hint message', () => {
-    renderWithTheme(
-      <FileInput label="Upload" name="upload" hint="Max 5MB." />,
-    );
-    expect(screen.getByText('Max 5MB.')).toBeInTheDocument();
-  });
-
-  it('appends asterisk to label when required', () => {
-    renderWithTheme(
-      <FileInput label="Resume" name="resume" required />,
-    );
-    expect(screen.getByText('Resume *')).toBeInTheDocument();
-  });
-});

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

@@ -1,69 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { FileInput } from './FileInput.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/FileInput',
-  component: FileInput,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof FileInput>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Upload document', name: 'document' },
-};
-
-export const WithAccept: Story = {
-  args: { label: 'Upload image', name: 'image', accept: '.png, .jpg, .jpeg' },
-};
-
-export const WithFiles: Story = {
-  args: {
-    label: 'Upload document',
-    name: 'document',
-    fileNames: ['report.pdf', 'summary.docx'],
-  },
-};
-
-export const Required: Story = {
-  args: { label: 'Upload resume', name: 'resume', required: true },
-};
-
-export const Disabled: Story = {
-  args: { label: 'Upload document', name: 'document', disabled: true },
-};
-
-export const WithError: Story = {
-  args: {
-    label: 'Upload document',
-    name: 'document',
-    error: 'Please upload a file.',
-  },
-};
-
-export const WithHint: Story = {
-  args: {
-    label: 'Upload photo',
-    name: 'photo',
-    hint: 'Max file size: 5MB.',
-  },
-};
-
-export const Interactive: Story = {
-  render: () => {
-    const [files, setFiles] = useState<string[]>([]);
-    return (
-      <FileInput
-        label="Upload document"
-        name="document"
-        fileNames={files}
-        onSelect={() => setFiles(['example.pdf'])}
-      />
-    );
-  },
-};

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

@@ -1,129 +0,0 @@
-import { StyleSheet, View, Pressable, Text, 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 FileInputProps {
-  label: string;
-  name: string;
-  accept?: string;
-  multiple?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  error?: string;
-  hint?: string;
-  /** Called when the file area is pressed. Wire up a native file picker (e.g. expo-document-picker). */
-  onSelect?: () => void;
-  /** File names to display (managed externally after picker resolves). */
-  fileNames?: string[];
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xxs,
-  },
-  dropZone: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: spacing.xs,
-    paddingVertical: spacing.xl,
-    paddingHorizontal: spacing.m,
-    borderWidth: 2,
-    borderStyle: 'dashed',
-    borderRadius: border.radius.s,
-    minHeight: 120,
-  },
-  icon: {
-    fontSize: 28,
-    lineHeight: 32,
-  },
-  prompt: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-    textAlign: 'center',
-  },
-  acceptHint: {
-    fontFamily: font.family.body,
-    fontSize: font.size.bodyS,
-    lineHeight: lineHeight.bodyS,
-    textAlign: 'center',
-  },
-  fileList: {
-    gap: spacing.xxs,
-    alignItems: 'center',
-  },
-  fileName: {
-    fontFamily: font.family.body,
-    fontSize: font.size.bodyS,
-    lineHeight: lineHeight.bodyS,
-  },
-});
-
-export function FileInput({
-  label,
-  name,
-  accept,
-  disabled = false,
-  required,
-  error,
-  hint,
-  onSelect,
-  fileNames = [],
-  style,
-}: Readonly<FileInputProps>) {
-  const { colors } = useTheme();
-
-  const borderColor = error
-    ? colors.colorError
-    : colors.colorBgSubtle;
-
-  return (
-    <View style={[styles.container, style]} testID={name}>
-      <Label
-        label={required ? `${label} *` : label}
-      />
-      <Pressable
-        onPress={() => !disabled && onSelect?.()}
-        disabled={disabled}
-        accessibilityRole="button"
-        accessibilityLabel={`${label}, tap to select file`}
-        accessibilityState={{ disabled }}
-        style={({ pressed }) => [
-          styles.dropZone,
-          {
-            borderColor,
-            backgroundColor: 'transparent',
-          },
-          pressed && { opacity: 0.7 },
-          disabled && { opacity: 0.4 },
-        ]}
-      >
-        <Text style={[styles.icon, { color: colors.colorInteractive }]}>
-          {'\u2191'}
-        </Text>
-        <Text style={[styles.prompt, { color: colors.colorOnBgSubtle }]}>
-          {fileNames.length > 0 ? 'Selected files:' : 'Tap to select file'}
-        </Text>
-        {fileNames.length > 0 && (
-          <View style={styles.fileList}>
-            {fileNames.map((fileName) => (
-              <Text key={fileName} style={[styles.fileName, { color: colors.colorOnBg }]}>
-                {fileName}
-              </Text>
-            ))}
-          </View>
-        )}
-        {accept && (
-          <Text style={[styles.acceptHint, { color: colors.colorOnBgSubtle }]}>
-            {accept}
-          </Text>
-        )}
-      </Pressable>
-      <Message type="error" message={error} />
-      <Message type="hint" message={hint} />
-    </View>
-  );
-}

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

@@ -1,81 +0,0 @@
-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/design-system-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

@@ -1,51 +0,0 @@
-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);
-  });
-});