@boostdev/design-system-components 1.2.3 → 1.2.5

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

@@ -0,0 +1,73 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Text, Pressable } from 'react-native';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Popover } from './Popover.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+function Trigger({ children, ...rest }: { children: string; onPress?: () => void }) {
+  return <Pressable {...rest}><Text>{children}</Text></Pressable>;
+}
+
+describe('Popover (native)', () => {
+  it('renders the trigger element', () => {
+    renderWithTheme(
+      <Popover content={<Text>Popover content</Text>}>
+        <Trigger>Trigger</Trigger>
+      </Popover>,
+    );
+    expect(screen.getByText('Trigger')).toBeInTheDocument();
+  });
+
+  it('does not show content initially', () => {
+    renderWithTheme(
+      <Popover content={<Text>Hidden content</Text>}>
+        <Trigger>Trigger</Trigger>
+      </Popover>,
+    );
+    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
+  });
+
+  it('shows content when trigger is pressed', () => {
+    renderWithTheme(
+      <Popover content={<Text>Visible content</Text>} accessibilityLabel="Info">
+        <Trigger>Trigger</Trigger>
+      </Popover>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Info' }));
+    expect(screen.getByText('Visible content')).toBeInTheDocument();
+  });
+
+  it('renders trigger with button role and custom accessibility label', () => {
+    renderWithTheme(
+      <Popover content={<Text>Content</Text>} accessibilityLabel="Details">
+        <Trigger>Trigger</Trigger>
+      </Popover>,
+    );
+    const trigger = screen.getByRole('button', { name: 'Details' });
+    expect(trigger).toBeInTheDocument();
+  });
+
+  it('renders backdrop with close label when open', () => {
+    renderWithTheme(
+      <Popover content={<Text>Closable</Text>} accessibilityLabel="Test">
+        <Trigger>Trigger</Trigger>
+      </Popover>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Test' }));
+    expect(screen.getByText('Closable')).toBeInTheDocument();
+    // Verify the close backdrop button exists
+    expect(screen.getByRole('button', { name: 'Close popover' })).toBeInTheDocument();
+  });
+
+  it('uses default accessibility label when none provided', () => {
+    renderWithTheme(
+      <Popover content={<Text>Content</Text>}>
+        <Trigger>Trigger</Trigger>
+      </Popover>,
+    );
+    expect(screen.getByRole('button', { name: 'Open popover' })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Popover } from './Popover.native';
+import { Button } from '../Button/Button.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Interaction/Popover',
+  component: Popover,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Popover
+      content={<Text>This is popover content displayed in a modal overlay.</Text>}
+      accessibilityLabel="More info"
+    >
+      <Button>Show Popover</Button>
+    </Popover>
+  ),
+};
+
+export const RichContent: Story = {
+  render: () => (
+    <Popover
+      content={
+        <View style={{ gap: 8 }}>
+          <Text style={{ fontWeight: '600', fontSize: 16 }}>Help</Text>
+          <Text>Press the button below to submit your response. You can edit your answer before submitting.</Text>
+        </View>
+      }
+      accessibilityLabel="Help information"
+    >
+      <Button variant="outline">Help</Button>
+    </Popover>
+  ),
+};

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

@@ -0,0 +1,87 @@
+import React, { ReactElement, ReactNode, useState } from 'react';
+import {
+  Modal,
+  View,
+  Pressable,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, border } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface PopoverProps {
+  children: ReactElement;
+  content: ReactNode;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignSelf: 'flex-start',
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+    padding: spacing.m,
+  },
+  panel: {
+    width: '100%',
+    maxWidth: 360,
+    borderRadius: border.radius.s,
+    padding: spacing.m,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+});
+
+export function Popover({
+  children,
+  content,
+  accessibilityLabel,
+  style,
+}: Readonly<PopoverProps>) {
+  const { colors } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      {React.cloneElement(children as ReactElement<Record<string, unknown>>, {
+        onPress: () => setIsOpen(true),
+        accessibilityRole: 'button',
+        accessibilityLabel: accessibilityLabel ?? 'Open popover',
+      })}
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <Pressable
+          style={styles.overlay}
+          onPress={() => setIsOpen(false)}
+          accessibilityRole="button"
+          accessibilityLabel="Close popover"
+        >
+          <Pressable
+            style={[styles.panel, { backgroundColor: colors.colorBg }]}
+            onPress={() => {
+              /* prevent close when pressing panel */
+            }}
+            accessibilityRole="none"
+            accessibilityLabel={accessibilityLabel}
+          >
+            {content}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Rating.native.stories';
+
+<Meta of={Stories} />
+
+# Rating (React Native)
+
+React Native read-only star rating display using text characters. Shows filled and empty stars based on the `value` prop.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Rating } from '@boostdev/components';
+
+<Rating value={4} />
+<Rating value={7} max={10} />
+```
+
+## Examples
+
+### Default (3 of 5)
+<Canvas of={Stories.Default} />
+
+### Full rating
+<Canvas of={Stories.Full} />
+
+### Empty rating
+<Canvas of={Stories.Empty} />
+
+### Custom max
+<Canvas of={Stories.CustomMax} />
+
+### All variants
+<Canvas of={Stories.AllVariants} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `number` | — | Number of filled stars |
+| `max` | `number` | `5` | Total number of stars |
+| `accessibilityLabel` | `string` | `"{value} out of {max} stars"` | Screen reader label |
+| `style` | `StyleProp<ViewStyle>` | — | Override container styles |
+
+## Accessibility
+
+- Uses `accessibilityRole="image"` since the rating is a visual representation
+- Auto-generates an accessibility label like "3 out of 5 stars" when not provided
+- Individual stars are hidden from assistive technologies

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

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Rating } from './Rating.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Rating (native)', () => {
+  it('has image role with auto-generated accessible label', () => {
+    renderWithTheme(<Rating value={3} />);
+    expect(screen.getByRole('img', { name: '3 out of 5 stars' })).toBeInTheDocument();
+  });
+
+  it('renders the correct number of filled stars', () => {
+    renderWithTheme(<Rating value={3} />);
+    const stars = screen.getAllByText('\u2605');
+    expect(stars).toHaveLength(5);
+  });
+
+  it('renders all stars as filled characters', () => {
+    renderWithTheme(<Rating value={2} />);
+    const stars = screen.getAllByText('\u2605');
+    expect(stars).toHaveLength(5);
+  });
+
+  it('uses custom max value', () => {
+    renderWithTheme(<Rating value={7} max={10} />);
+    expect(screen.getByRole('img', { name: '7 out of 10 stars' })).toBeInTheDocument();
+    const stars = screen.getAllByText('\u2605');
+    expect(stars).toHaveLength(10);
+  });
+
+  it('uses custom accessibilityLabel when provided', () => {
+    renderWithTheme(<Rating value={4} accessibilityLabel="Excellent rating" />);
+    expect(screen.getByRole('img', { name: 'Excellent rating' })).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Rating } from './Rating.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Interaction/Rating',
+  component: Rating,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    value: { control: { type: 'range', min: 0, max: 5, step: 1 } },
+    max: { control: { type: 'number', min: 1, max: 10 } },
+  },
+} satisfies Meta<typeof Rating>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 3 } };
+export const Full: Story = { args: { value: 5 } };
+export const Empty: Story = { args: { value: 0 } };
+export const CustomMax: Story = { args: { value: 7, max: 10 } };
+export const WithLabel: Story = {
+  args: { value: 4, accessibilityLabel: 'Customer rating: 4 out of 5' },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      {[0, 1, 2, 3, 4, 5].map(v => (
+        <Rating key={v} value={v} />
+      ))}
+    </div>
+  ),
+};

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

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

@@ -0,0 +1,81 @@
+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/components';
+import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <ToastProvider>
+        <YourApp />
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+Then use `useToast` in any descendant:
+
+```tsx
+import { useToast } from '@boostdev/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

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

@@ -0,0 +1,47 @@
+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 />,
+};