@boostdev/design-system-components 1.2.3 → 1.2.4

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

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Combobox } from './Combobox.native';
+import type { ComboboxOption } from './Combobox.native';
+
+const fruits: ComboboxOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+];
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Combobox',
+  component: Combobox,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Fruit',
+    name: 'fruit',
+    options: fruits,
+    placeholder: 'Search fruit...',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    label: 'Fruit',
+    name: 'fruit',
+    options: fruits,
+    value: 'cherry',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Fruit',
+    name: 'fruit',
+    options: fruits,
+    disabled: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Fruit',
+    name: 'fruit',
+    options: fruits,
+    error: 'Please select a fruit.',
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    label: 'Fruit',
+    name: 'fruit',
+    options: fruits,
+    hint: 'Type to filter the list.',
+  },
+};
+
+export const WithDisabledOption: Story = {
+  args: {
+    label: 'Fruit',
+    name: 'fruit',
+    options: [
+      { value: 'apple', label: 'Apple' },
+      { value: 'banana', label: 'Banana', disabled: true },
+      { value: 'cherry', label: 'Cherry' },
+    ],
+  },
+};
+
+function InteractiveComponent() {
+  const [value, setValue] = useState('');
+  return (
+    <Combobox
+      label="Fruit"
+      name="fruit"
+      options={fruits}
+      placeholder="Search fruit..."
+      value={value}
+      onChange={setValue}
+    />
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveComponent />,
+};

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

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

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

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

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

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