@boostdev/design-system-components 2.4.2 → 2.5.1

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

@@ -1,50 +0,0 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
-import { font } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-interface RatingProps {
-  value: number;
-  max?: number;
-  style?: StyleProp<ViewStyle>;
-  accessibilityLabel?: string;
-}
-
-const STAR_SIZE = 24;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  star: {
-    fontSize: STAR_SIZE,
-    fontFamily: font.family.body,
-  },
-});
-
-export function Rating({ value, max = 5, style, accessibilityLabel }: Readonly<RatingProps>) {
-  const { colors } = useTheme();
-  const label = accessibilityLabel ?? `${value} out of ${max} stars`;
-
-  return (
-    <View
-      style={[styles.container, style]}
-      accessibilityRole="image"
-      accessibilityLabel={label}
-    >
-      {Array.from({ length: max }).map((_, i) => (
-        <Text
-          key={i}
-          style={[
-            styles.star,
-            { color: i < value ? colors.colorWarning : colors.colorBgSubtle },
-          ]}
-          importantForAccessibility="no"
-          accessibilityElementsHidden={true}
-        >
-          {'\u2605'}
-        </Text>
-      ))}
-    </View>
-  );
-}

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

@@ -1,81 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Toast.native.stories';
-
-<Meta of={Stories} />
-
-# Toast (React Native)
-
-A toast notification system using React context. Provides `ToastProvider` and `useToast` hook. Toasts appear at the top of the screen with slide-in animation and auto-dismiss after 5 seconds.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-Wrap your app root in `ToastProvider`:
-
-```tsx
-import { ToastProvider } from '@boostdev/design-system-components';
-import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
-
-export default function App() {
-  return (
-    <ThemeProvider>
-      <ToastProvider>
-        <YourApp />
-      </ToastProvider>
-    </ThemeProvider>
-  );
-}
-```
-
-Then use `useToast` in any descendant:
-
-```tsx
-import { useToast } from '@boostdev/design-system-components';
-
-function SaveButton() {
-  const { showToast } = useToast();
-  return (
-    <Button onPress={() => showToast('Saved successfully!', 'success')}>
-      Save
-    </Button>
-  );
-}
-```
-
-## Variants
-
-- `'success'` — green background
-- `'error'` — red background
-- `'info'` — interactive/blue background
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-## API
-
-### ToastProvider
-
-Wraps the application and renders toast notifications.
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | — | Application content |
-| `style` | `StyleProp<ViewStyle>` | — | Override wrapper styles |
-
-### useToast
-
-Returns an object with:
-
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| `showToast` | `(message: string, variant: 'success' \| 'error' \| 'info') => void` | Displays a toast notification |
-
-## Accessibility
-
-- Toasts have `accessibilityRole="alert"` and `accessibilityLiveRegion="polite"`
-- Dismiss button has `accessibilityLabel="Dismiss"`
-- Toasts auto-dismiss after 5 seconds
-- Throws if `useToast` is called outside `ToastProvider`

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

@@ -1,80 +0,0 @@
-import { render, screen, act, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { ToastProvider, useToast } from './Toast.native';
-
-function ToastTrigger({ message = 'Test toast', variant = 'info' as const }) {
-  const { showToast } = useToast();
-  return <button onClick={() => showToast(message, variant)}>Show Toast</button>;
-}
-
-function setup(props = {}) {
-  return render(
-    <ThemeProvider>
-      <ToastProvider>
-        <ToastTrigger {...props} />
-      </ToastProvider>
-    </ThemeProvider>,
-  );
-}
-
-describe('Toast (native)', () => {
-  it('shows a toast when showToast is called', () => {
-    setup({ message: 'Hello toast' });
-    fireEvent.click(screen.getByRole('button'));
-    expect(screen.getByText('Hello toast')).toBeInTheDocument();
-  });
-
-  it('removes the toast after 5 seconds', () => {
-    vi.useFakeTimers();
-    setup({ message: 'Timed toast' });
-    act(() => {
-      fireEvent.click(screen.getByRole('button'));
-    });
-    expect(screen.getByText('Timed toast')).toBeInTheDocument();
-    act(() => {
-      vi.advanceTimersByTime(5100);
-    });
-    expect(screen.queryByText('Timed toast')).not.toBeInTheDocument();
-    vi.useRealTimers();
-  });
-
-  it('renders dismiss button with accessible label', () => {
-    setup({ message: 'Dismissable' });
-    fireEvent.click(screen.getByRole('button', { name: 'Show Toast' }));
-    expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
-  });
-
-  it('removes the toast when dismiss button is clicked', () => {
-    setup({ message: 'Dismissable toast' });
-    fireEvent.click(screen.getByRole('button', { name: 'Show Toast' }));
-    expect(screen.getByText('Dismissable toast')).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss' }));
-    expect(screen.queryByText('Dismissable toast')).not.toBeInTheDocument();
-  });
-
-  it('throws when useToast is used outside ToastProvider', () => {
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    const Bad = () => {
-      useToast();
-      return null;
-    };
-    expect(() =>
-      render(
-        <ThemeProvider>
-          <Bad />
-        </ThemeProvider>,
-      ),
-    ).toThrow('useToast must be used within a ToastProvider');
-    errorSpy.mockRestore();
-  });
-
-  it('renders multiple toasts simultaneously', () => {
-    setup({ message: 'Toast 1' });
-    const trigger = screen.getByRole('button', { name: 'Show Toast' });
-    fireEvent.click(trigger);
-    fireEvent.click(trigger);
-    // At least one toast should be visible (they share the same message text)
-    const toasts = screen.getAllByText('Toast 1');
-    expect(toasts.length).toBe(2);
-  });
-});

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { ToastProvider, useToast } from './Toast.native';
-import { Button } from '../Button/Button.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Interaction/Toast',
-  component: ToastProvider,
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof ToastProvider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function ToastControls() {
-  const { showToast } = useToast();
-  return (
-    <View style={{ gap: 12, paddingTop: 80 }}>
-      <Button onPress={() => showToast('Item saved successfully.', 'success')}>
-        Show Success Toast
-      </Button>
-      <Button onPress={() => showToast('Something went wrong. Please try again.', 'error')}>
-        Show Error Toast
-      </Button>
-      <Button onPress={() => showToast('Your session will expire in 5 minutes.', 'info')}>
-        Show Info Toast
-      </Button>
-    </View>
-  );
-}
-
-function ToastDemo() {
-  return (
-    <ThemeProvider colorScheme="light">
-      <ToastProvider>
-        <ToastControls />
-      </ToastProvider>
-    </ThemeProvider>
-  );
-}
-
-export const Default: Story = {
-  render: () => <ToastDemo />,
-};

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

@@ -1,202 +0,0 @@
-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.mdx

@@ -1,74 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Checkbox.native.stories';
-
-<Meta of={Stories} />
-
-# Checkbox (React Native)
-
-React Native checkbox component with label, optional hint, and error state. Fully controlled — manage checked state via `checked` + `onChange`.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Checkbox } from '@boostdev/design-system-components';
-import { useState } from 'react';
-
-function Example() {
-  const [checked, setChecked] = useState(false);
-  return (
-    <Checkbox
-      name="terms"
-      label="Accept terms and conditions"
-      checked={checked}
-      onChange={setChecked}
-    />
-  );
-}
-```
-
-## Examples
-
-### Interactive
-<Canvas of={Stories.Interactive} />
-
-### Unchecked
-<Canvas of={Stories.Unchecked} />
-
-### Checked
-<Canvas of={Stories.Checked} />
-
-### With hint
-<Canvas of={Stories.WithHint} />
-
-### With error
-<Canvas of={Stories.WithError} />
-
-### Disabled
-<Canvas of={Stories.Disabled} />
-
-### Disabled + checked
-<Canvas of={Stories.DisabledChecked} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | string | — | Field name (used for accessibility grouping) |
-| `label` | string | — | Visible label text |
-| `checked` | boolean | `false` | Controlled checked state |
-| `onChange` | `(checked: boolean) => void` | — | Called with the new value on press |
-| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
-| `hint` | string | — | Helper text below the label |
-| `error` | string | — | Error message; shown instead of hint when set |
-
-## Accessibility
-
-- The label, hint, and error are announced together by screen readers
-- `disabled` communicates the disabled state via `accessibilityState`
-- Group related checkboxes using a wrapping `View` with `accessibilityRole="radiogroup"` or a labelled `fieldset` equivalent

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

@@ -1,42 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Checkbox } from './Checkbox.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Checkbox (native)', () => {
-  it('has checkbox role with label', () => {
-    renderWithTheme(<Checkbox label="Accept terms" name="terms" />);
-    expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeInTheDocument();
-  });
-
-  it('shows the checkmark when checked', () => {
-    renderWithTheme(<Checkbox label="Accept terms" name="terms" checked={true} />);
-    expect(screen.getByText('✓')).toBeInTheDocument();
-  });
-
-  it('hides the checkmark when unchecked', () => {
-    renderWithTheme(<Checkbox label="Accept terms" name="terms" checked={false} />);
-    expect(screen.queryByText('✓')).not.toBeInTheDocument();
-  });
-
-  it('checkmark uses theme color (contrast regression: was hardcoded #fff)', () => {
-    // Previously the checkmark had color: '#fff' hardcoded in the StyleSheet.
-    // Now it uses colors.colorOnInteractive from the theme, which is #000 in dark
-    // mode — fixing the 2.52:1 contrast failure on the dark interactive blue.
-    renderWithTheme(<Checkbox label="Accept terms" name="terms" checked={true} />);
-    const checkmark = screen.getByText('✓');
-    // The color must be applied as an inline style (overrides StyleSheet), not absent.
-    // In light mode colorOnInteractive=#fff; in dark mode it is #000.
-    expect(checkmark.style.color).toBeTruthy();
-  });
-
-  it('renders with error message', () => {
-    renderWithTheme(
-      <Checkbox label="Accept terms" name="terms" error="You must accept." />,
-    );
-    expect(screen.getByRole('alert')).toHaveTextContent('You must accept.');
-  });
-});

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

@@ -1,34 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Checkbox } from './Checkbox.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/Checkbox',
-  component: Checkbox,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Unchecked: Story = { args: { label: 'Accept terms', name: 'terms', checked: false } };
-export const Checked: Story = { args: { label: 'Accept terms', name: 'terms', checked: true } };
-export const Disabled: Story = { args: { label: 'Accept terms', name: 'terms', disabled: true } };
-export const DisabledChecked: Story = { args: { label: 'Accept terms', name: 'terms', checked: true, disabled: true } };
-export const WithError: Story = {
-  args: { label: 'Accept terms', name: 'terms', error: 'You must accept the terms.' },
-};
-export const WithHint: Story = {
-  args: { label: 'Subscribe to newsletter', name: 'newsletter', hint: 'Max one email per week.' },
-};
-export const Interactive: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    return (
-      <Checkbox label="Accept terms and conditions" name="terms" checked={checked} onChange={setChecked} />
-    );
-  },
-};

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

@@ -1,80 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { spacing, border } from '../../../../native/tokens';
-import { useTheme } from '../../../../native/ThemeContext';
-import { Label } from '../atoms/Label.native';
-import { Message } from '../atoms/Message.native';
-
-interface CheckboxProps {
-  label: ReactNode;
-  name: string;
-  checked?: boolean;
-  onChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  error?: string;
-  hint?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const BOX = 22;
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xxs,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.xs,
-    minHeight: 44,
-  },
-  box: {
-    width: BOX,
-    height: BOX,
-    borderRadius: border.radius.xs,
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  checkmark: {
-    fontSize: 14,
-    fontWeight: '700',
-    lineHeight: 16,
-  },
-});
-
-export function Checkbox({
-  label,
-  name,
-  checked = false,
-  onChange,
-  disabled = false,
-  error,
-  hint,
-  style,
-}: CheckboxProps) {
-  const { colors } = useTheme();
-
-  const borderColor = error ? colors.colorError : checked ? colors.colorInteractive : colors.colorOnBg;
-  const bgColor = checked ? colors.colorInteractive : 'transparent';
-
-  return (
-    <View style={[styles.container, style]}>
-      <Pressable
-        onPress={() => !disabled && onChange?.(!checked)}
-        accessibilityRole="checkbox"
-        accessibilityLabel={typeof label === 'string' ? label : name}
-        accessibilityState={{ checked, disabled }}
-        disabled={disabled}
-        style={({ pressed }) => [styles.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }]}
-      >
-        <View style={[styles.box, { borderColor, backgroundColor: bgColor }]}>
-          {checked && <Label label="✓" style={[styles.checkmark, { color: colors.colorOnInteractive }]} />}
-        </View>
-        <Label label={label} />
-      </Pressable>
-      <Message type="error" message={error} />
-      <Message type="hint" message={hint} />
-    </View>
-  );
-}