@boostdev/design-system-components 1.2.3 → 1.2.4

package/src/components/interaction/Toast/Toast.native.tsx

@@ -0,0 +1,202 @@
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  createContext,
+  useContext,
+  ReactNode,
+} from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Animated,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, border } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type ToastVariant = 'success' | 'error' | 'info';
+
+interface Toast {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+}
+
+interface ToastContextType {
+  showToast: (message: string, variant: ToastVariant) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    start: 0,
+    end: 0,
+    paddingTop: spacing.xxxl,
+    paddingHorizontal: spacing.m,
+    zIndex: 9999,
+    pointerEvents: 'box-none',
+  },
+  toast: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+    borderRadius: border.radius.s,
+    marginBottom: spacing.xs,
+    minHeight: 48,
+  },
+  message: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    fontWeight: font.weight.semibold,
+    flex: 1,
+  },
+  closeButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginStart: spacing.xs,
+  },
+  closeText: {
+    fontFamily: font.family.body,
+    fontSize: 16,
+    lineHeight: 20,
+  },
+});
+
+function ToastItem({
+  toast,
+  onRemove,
+}: {
+  toast: Toast;
+  onRemove: () => void;
+}) {
+  const { colors } = useTheme();
+  const slideAnim = useRef(new Animated.Value(-100)).current;
+  const opacityAnim = useRef(new Animated.Value(0)).current;
+
+  const variantColors: Record<
+    ToastVariant,
+    { bg: string; text: string }
+  > = useMemo(
+    () => ({
+      success: { bg: colors.colorSuccess, text: colors.colorOnSuccess },
+      error: { bg: colors.colorError, text: colors.colorOnError },
+      info: { bg: colors.colorBgSubtle, text: colors.colorOnBgSubtle },
+    }),
+    [colors],
+  );
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacityAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [slideAnim, opacityAnim]);
+
+  useEffect(() => {
+    const timer = setTimeout(onRemove, 5000);
+    return () => clearTimeout(timer);
+  }, [onRemove]);
+
+  const { bg, text } = variantColors[toast.variant];
+
+  return (
+    <Animated.View
+      style={[
+        styles.toast,
+        {
+          backgroundColor: bg,
+          transform: [{ translateY: slideAnim }],
+          opacity: opacityAnim,
+        },
+      ]}
+      accessibilityRole="alert"
+      accessibilityLiveRegion="polite"
+    >
+      <Text style={[styles.message, { color: text }]}>{toast.message}</Text>
+      <Pressable
+        style={styles.closeButton}
+        onPress={onRemove}
+        accessibilityRole="button"
+        accessibilityLabel="Dismiss"
+        hitSlop={8}
+      >
+        <Text style={[styles.closeText, { color: text }]} aria-hidden>
+          {'\u2715'}
+        </Text>
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+export function ToastProvider({
+  children,
+  style,
+}: {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const showToast = useCallback((message: string, variant: ToastVariant) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { id, message, variant }]);
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const value = useMemo(() => ({ showToast }), [showToast]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      <View style={[{ flex: 1 }, style]}>
+        {children}
+        {toasts.length > 0 && (
+          <View
+            style={styles.container}
+            accessibilityRole="summary"
+            accessibilityLabel="Notifications"
+          >
+            {toasts.map((toast) => (
+              <ToastItem
+                key={toast.id}
+                toast={toast}
+                onRemove={() => removeToast(toast.id)}
+              />
+            ))}
+          </View>
+        )}
+      </View>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextType {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}

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

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Form/Checkbox',
   component: Checkbox,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
 } satisfies Meta<typeof Checkbox>;
 
@@ -28,9 +28,7 @@ export const Interactive: Story = {
   render: () => {
     const [checked, setChecked] = useState(false);
     return (
-      <ThemeProvider>
-        <Checkbox label="Accept terms and conditions" name="terms" checked={checked} onChange={setChecked} />
-      </ThemeProvider>
+      <Checkbox label="Accept terms and conditions" name="terms" checked={checked} onChange={setChecked} />
     );
   },
 };

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

@@ -55,7 +55,7 @@ export function Checkbox({
 }: CheckboxProps) {
   const { colors } = useTheme();
 
-  const borderColor = error ? colors.colorError : checked ? colors.colorInteractive : colors.colorBgSubtle;
+  const borderColor = error ? colors.colorError : checked ? colors.colorInteractive : colors.colorOnBg;
   const bgColor = checked ? colors.colorInteractive : 'transparent';
 
   return (

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

@@ -0,0 +1,78 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './CheckboxGroup.native.stories';
+
+<Meta of={Stories} />
+
+# CheckboxGroup (React Native)
+
+Groups related checkboxes under a common legend with optional hint and error messages.
+
+> **Status: alpha** -- API may change before stable release.
+
+## Usage
+
+```tsx
+import { CheckboxGroup, Checkbox } from '@boostdev/components';
+import { useState } from 'react';
+
+function Example() {
+  const [checked, setChecked] = useState({ email: false, sms: false });
+
+  return (
+    <CheckboxGroup legend="Notifications">
+      <Checkbox
+        label="Email"
+        name="email"
+        checked={checked.email}
+        onChange={(v) => setChecked(s => ({ ...s, email: v }))}
+      />
+      <Checkbox
+        label="SMS"
+        name="sms"
+        checked={checked.sms}
+        onChange={(v) => setChecked(s => ({ ...s, sms: v }))}
+      />
+    </CheckboxGroup>
+  );
+}
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Required
+<Canvas of={Stories.Required} />
+
+### With hint
+<Canvas of={Stories.WithHint} />
+
+### With error
+<Canvas of={Stories.WithError} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+### Interactive
+<Canvas of={Stories.Interactive} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `legend` | string | -- | Group label displayed above the checkboxes |
+| `children` | ReactNode | -- | Checkbox components |
+| `error` | string | -- | Error message displayed below the group |
+| `hint` | string | -- | Helper text displayed below the group |
+| `required` | boolean | -- | Appends asterisk to legend |
+| `disabled` | boolean | `false` | Reduces opacity of the entire group |
+
+## Accessibility
+
+- The group is labelled via `accessibilityLabel` matching the legend text
+- Error messages use `accessibilityRole="alert"` for screen reader announcement

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

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { CheckboxGroup } from './CheckboxGroup.native';
+import { Checkbox } from '../Checkbox/Checkbox.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('CheckboxGroup (native)', () => {
+  it('renders the legend text', () => {
+    renderWithTheme(
+      <CheckboxGroup legend="Notifications">
+        <Checkbox label="Email" name="email" />
+      </CheckboxGroup>,
+    );
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    renderWithTheme(
+      <CheckboxGroup legend="Preferences">
+        <Checkbox label="Option A" name="a" />
+        <Checkbox label="Option B" name="b" />
+      </CheckboxGroup>,
+    );
+    expect(screen.getByText('Option A')).toBeInTheDocument();
+    expect(screen.getByText('Option B')).toBeInTheDocument();
+  });
+
+  it('appends asterisk when required', () => {
+    renderWithTheme(
+      <CheckboxGroup legend="Accept" required>
+        <Checkbox label="Terms" name="terms" />
+      </CheckboxGroup>,
+    );
+    expect(screen.getByText('*', { exact: false })).toBeInTheDocument();
+  });
+
+  it('renders error message', () => {
+    renderWithTheme(
+      <CheckboxGroup legend="Options" error="Select at least one.">
+        <Checkbox label="A" name="a" />
+      </CheckboxGroup>,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Select at least one.');
+  });
+
+  it('renders hint message', () => {
+    renderWithTheme(
+      <CheckboxGroup legend="Options" hint="Select all that apply.">
+        <Checkbox label="A" name="a" />
+      </CheckboxGroup>,
+    );
+    expect(screen.getByText('Select all that apply.')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { CheckboxGroup } from './CheckboxGroup.native';
+import { Checkbox } from '../Checkbox/Checkbox.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/CheckboxGroup',
+  component: CheckboxGroup,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    legend: 'Notifications',
+    children: (
+      <>
+        <Checkbox label="Email" name="email" />
+        <Checkbox label="SMS" name="sms" />
+        <Checkbox label="Push" name="push" />
+      </>
+    ),
+  },
+};
+
+export const Required: Story = {
+  args: {
+    legend: 'Accept terms',
+    required: true,
+    children: (
+      <>
+        <Checkbox label="Terms of service" name="tos" />
+        <Checkbox label="Privacy policy" name="privacy" />
+      </>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    legend: 'Notifications',
+    disabled: true,
+    children: (
+      <>
+        <Checkbox label="Email" name="email" checked disabled />
+        <Checkbox label="SMS" name="sms" disabled />
+      </>
+    ),
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    legend: 'Select at least one',
+    error: 'Please select at least one option.',
+    children: (
+      <>
+        <Checkbox label="Option A" name="a" />
+        <Checkbox label="Option B" name="b" />
+      </>
+    ),
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    legend: 'Preferences',
+    hint: 'Select all that apply.',
+    children: (
+      <>
+        <Checkbox label="Newsletter" name="newsletter" />
+        <Checkbox label="Product updates" name="updates" />
+      </>
+    ),
+  },
+};
+
+function InteractiveComponent() {
+  const [checked, setChecked] = useState({ email: false, sms: false, push: false });
+  return (
+    <CheckboxGroup legend="Notifications">
+      <Checkbox label="Email" name="email" checked={checked.email} onChange={(v) => setChecked(s => ({ ...s, email: v }))} />
+      <Checkbox label="SMS" name="sms" checked={checked.sms} onChange={(v) => setChecked(s => ({ ...s, sms: v }))} />
+      <Checkbox label="Push" name="push" checked={checked.push} onChange={(v) => setChecked(s => ({ ...s, push: v }))} />
+    </CheckboxGroup>
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveComponent />,
+};

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

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, lineHeight } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Message } from '../atoms/Message.native';
+
+interface CheckboxGroupProps {
+  legend: string;
+  children: ReactNode;
+  error?: string;
+  hint?: string;
+  required?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xs,
+  },
+  legend: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    fontWeight: font.weight.semibold,
+  },
+  required: {
+    fontWeight: font.weight.body,
+  },
+  items: {
+    gap: spacing.xxs,
+  },
+});
+
+export function CheckboxGroup({
+  legend,
+  children,
+  error,
+  hint,
+  required,
+  disabled = false,
+  style,
+}: Readonly<CheckboxGroupProps>) {
+  const { colors } = useTheme();
+
+  return (
+    <View
+      style={[styles.container, disabled && { opacity: 0.4 }, style]}
+      accessibilityRole="none"
+      accessibilityLabel={legend}
+    >
+      <Text style={[styles.legend, { color: colors.colorOnBg }]}>
+        {legend}
+        {required && <Text style={[styles.required, { color: colors.colorOnBgSubtle }]}> *</Text>}
+      </Text>
+      <View style={styles.items}>{children}</View>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Combobox.native.stories';
+
+<Meta of={Stories} />
+
+# Combobox (React Native)
+
+A text input with a filterable dropdown list. Type to filter options, tap to select. Supports error and hint messages.
+
+> **Status: alpha** -- API may change before stable release.
+
+## Usage
+
+```tsx
+import { Combobox } from '@boostdev/components';
+import { useState } from 'react';
+
+const options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+];
+
+function Example() {
+  const [value, setValue] = useState('');
+
+  return (
+    <Combobox
+      label="Fruit"
+      name="fruit"
+      options={options}
+      placeholder="Search fruit..."
+      value={value}
+      onChange={setValue}
+    />
+  );
+}
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With value
+<Canvas of={Stories.WithValue} />
+
+### With hint
+<Canvas of={Stories.WithHint} />
+
+### With error
+<Canvas of={Stories.WithError} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+### With disabled option
+<Canvas of={Stories.WithDisabledOption} />
+
+### Interactive
+<Canvas of={Stories.Interactive} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | string | -- | Visible label text |
+| `name` | string | -- | Field name |
+| `options` | `ComboboxOption[]` | -- | Array of `{ value, label, disabled? }` |
+| `placeholder` | string | -- | Input placeholder text |
+| `value` | string | -- | Currently selected option value |
+| `onChange` | `(value: string) => void` | -- | Called with the selected option value |
+| `disabled` | boolean | `false` | Disables the entire input |
+| `error` | string | -- | Error message displayed below |
+| `hint` | string | -- | Helper text displayed below |
+
+## Accessibility
+
+- Uses `accessibilityRole="combobox"` on the input
+- Options use `accessibilityRole="menuitem"` with selected/disabled states
+- Selected option is highlighted with `accessibilityState.selected`
+- Disabled options are communicated via `accessibilityState.disabled`

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

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Combobox } from './Combobox.native';
+import type { ComboboxOption } from './Combobox.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+const fruits: ComboboxOption[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+];
+
+describe('Combobox (native)', () => {
+  it('renders with label', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} />,
+    );
+    expect(screen.getByText('Fruit')).toBeInTheDocument();
+  });
+
+  it('has combobox role', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} />,
+    );
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('shows placeholder text', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} placeholder="Search..." />,
+    );
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+  });
+
+  it('displays the selected option label when value is set', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} value="cherry" />,
+    );
+    // react-native-web renders TextInput as <input>, so we can check the DOM value
+    const input = screen.getByRole('combobox') as HTMLInputElement;
+    expect(input.value).toBe('Cherry');
+  });
+
+  it('renders error message', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} error="Required." />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Required.');
+  });
+
+  it('renders hint message', () => {
+    renderWithTheme(
+      <Combobox label="Fruit" name="fruit" options={fruits} hint="Type to filter." />,
+    );
+    expect(screen.getByText('Type to filter.')).toBeInTheDocument();
+  });
+});