@boostdev/design-system-react-native 0.1.0 → 0.2.1

package/src/components/interaction/Popover/Popover.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';
+
+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.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';
+import { Button } from '../Button/Button';
+
+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.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.mdx

@@ -0,0 +1,55 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Rating.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/design-system-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.spec.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Rating } from './Rating';
+
+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.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';
+
+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.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/SideSheet/SideSheet.mdx

@@ -0,0 +1,60 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './SideSheet.stories';
+
+<Meta of={Stories} />
+
+# SideSheet (React Native)
+
+A sliding panel that slides in from the bottom of the screen. Built on React Native `Modal` with `Animated` for smooth slide and backdrop fade transitions.
+
+> **Naming note:** previously called `Drawer`. Renamed to `SideSheet` to avoid collision with `@react-navigation/drawer`, which is a top-level *navigator*, not a UI primitive. This component is a transient side sheet for content (filters, details, forms) — it has nothing to do with screen routing.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { SideSheet } from '@boostdev/design-system-react-native';
+
+const [open, setOpen] = useState(false);
+
+<Button onPress={() => setOpen(true)}>Open</Button>
+<SideSheet isOpen={open} onClose={() => setOpen(false)} title="Settings">
+  <Text>Side sheet content here.</Text>
+</SideSheet>
+```
+
+Wrap your tree in `ThemeProvider` (once, at the app root):
+
+```tsx
+import { ThemeProvider } from '@boostdev/design-system-react-native';
+
+export default function App() {
+  return <ThemeProvider><YourApp /></ThemeProvider>;
+}
+```
+
+## Examples
+
+<Canvas of={Stories.Default} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | — | Controls visibility of the side sheet |
+| `onClose` | `() => void` | — | Called when backdrop or close button is pressed |
+| `title` | `ReactNode` | — | Title displayed in the side sheet header |
+| `children` | `ReactNode` | — | Side sheet body content |
+| `style` | `StyleProp<ViewStyle>` | — | Override panel styles |
+
+## Accessibility
+
+- Backdrop press and close button both call `onClose`
+- Close button has `accessibilityLabel="Close side sheet"`
+- Android back button triggers `onRequestClose` which calls `onClose`
+- Backdrop fades in, panel slides from bottom

package/src/components/interaction/SideSheet/SideSheet.spec.tsx

@@ -0,0 +1,80 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { SideSheet } from './SideSheet';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('SideSheet (native)', () => {
+  it('renders children when open', () => {
+    renderWithTheme(
+      <SideSheet isOpen onClose={() => {}}>
+        <span>SideSheet content</span>
+      </SideSheet>,
+    );
+    expect(screen.getByText('SideSheet content')).toBeInTheDocument();
+  });
+
+  it('does not render children when closed', () => {
+    renderWithTheme(
+      <SideSheet isOpen={false} onClose={() => {}}>
+        <span>Hidden side sheet</span>
+      </SideSheet>,
+    );
+    expect(screen.queryByText('Hidden side sheet')).not.toBeInTheDocument();
+  });
+
+  it('renders the title when provided', () => {
+    renderWithTheme(
+      <SideSheet isOpen onClose={() => {}} title="Settings">
+        <span>Body</span>
+      </SideSheet>,
+    );
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('renders a close button with accessible label', () => {
+    renderWithTheme(
+      <SideSheet isOpen onClose={() => {}}>
+        <span>Body</span>
+      </SideSheet>,
+    );
+    const closeButtons = screen.getAllByRole('button', { name: 'Close side sheet' });
+    expect(closeButtons.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const onClose = vi.fn();
+    renderWithTheme(
+      <SideSheet isOpen onClose={onClose} title="Test">
+        <span>Body</span>
+      </SideSheet>,
+    );
+    const closeButtons = screen.getAllByRole('button', { name: 'Close side sheet' });
+    const innerClose = closeButtons[closeButtons.length - 1];
+    fireEvent.click(innerClose);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when backdrop is pressed', () => {
+    const onClose = vi.fn();
+    renderWithTheme(
+      <SideSheet isOpen onClose={onClose}>
+        <span>Body</span>
+      </SideSheet>,
+    );
+    const closeButtons = screen.getAllByRole('button', { name: 'Close side sheet' });
+    fireEvent.click(closeButtons[0]);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders panel when open', () => {
+    const { container } = renderWithTheme(
+      <SideSheet isOpen onClose={() => {}}>
+        <span>Body</span>
+      </SideSheet>,
+    );
+    expect(container).toBeInTheDocument();
+  });
+});

package/src/components/interaction/SideSheet/SideSheet.stories.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Text } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { SideSheet } from './SideSheet';
+import { Button } from '../Button/Button';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Interaction/SideSheet',
+  component: SideSheet,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof SideSheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SideSheetDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setOpen(true)}>Open side sheet</Button>
+      <SideSheet isOpen={open} onClose={() => setOpen(false)} title="Settings">
+        <Text>Side sheet content slides in from the bottom.</Text>
+      </SideSheet>
+    </>
+  );
+}
+
+export const Default: Story = {
+  render: () => <SideSheetDemo />,
+};