@boostdev/design-system-components 2.4.2 → 2.5.0

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

@@ -1,128 +0,0 @@
-import { ReactNode } from 'react';
-import {
-  Modal,
-  View,
-  Pressable,
-  Text,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { spacing, font, border } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-interface DialogProps {
-  isOpen?: boolean;
-  onClose?: () => void;
-  title?: string;
-  children?: ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    padding: spacing.m,
-  },
-  panel: {
-    width: '100%',
-    maxWidth: 480,
-    borderRadius: border.radius.m,
-    padding: spacing.l,
-    paddingTop: spacing.xl,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    elevation: 8,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: spacing.m,
-  },
-  title: {
-    fontFamily: font.family.body,
-    fontSize: font.size.heading3,
-    fontWeight: font.weight.semibold,
-    flex: 1,
-  },
-  closeButton: {
-    position: 'absolute',
-    top: spacing.s,
-    end: spacing.s,
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 1,
-  },
-  closeText: {
-    fontFamily: font.family.body,
-    fontSize: 20,
-    lineHeight: 24,
-  },
-});
-
-export function Dialog({
-  isOpen = false,
-  onClose,
-  title,
-  children,
-  style,
-}: Readonly<DialogProps>) {
-  const { colors } = useTheme();
-
-  return (
-    <Modal
-      visible={isOpen}
-      transparent
-      animationType="fade"
-      onRequestClose={onClose}
-    >
-      <Pressable
-        style={styles.overlay}
-        onPress={onClose}
-        accessibilityRole="button"
-        accessibilityLabel="Close dialog"
-      >
-        <Pressable
-          style={[styles.panel, { backgroundColor: colors.colorGreySubtle }, style]}
-          onPress={() => {
-            /* prevent close when pressing content */
-          }}
-          accessibilityRole="none"
-        >
-          <Pressable
-            style={styles.closeButton}
-            onPress={onClose}
-            accessibilityRole="button"
-            accessibilityLabel="Close dialog"
-            hitSlop={8}
-          >
-            <Text
-              style={[styles.closeText, { color: colors.colorOnBgSubtle }]}
-              aria-hidden
-            >
-              {'\u2715'}
-            </Text>
-          </Pressable>
-
-          {!!title && (
-            <View style={styles.header}>
-              <Text style={[styles.title, { color: colors.colorOnGreySubtle }]}>
-                {title}
-              </Text>
-            </View>
-          )}
-
-          {children}
-        </Pressable>
-      </Pressable>
-    </Modal>
-  );
-}

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

@@ -1,58 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Drawer.native.stories';
-
-<Meta of={Stories} />
-
-# Drawer (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.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Drawer } from '@boostdev/design-system-components';
-
-const [open, setOpen] = useState(false);
-
-<Button onPress={() => setOpen(true)}>Open</Button>
-<Drawer isOpen={open} onClose={() => setOpen(false)} title="Settings">
-  <Text>Drawer content here.</Text>
-</Drawer>
-```
-
-Wrap your tree in `ThemeProvider` (once, at the app root):
-
-```tsx
-import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
-
-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 drawer |
-| `onClose` | `() => void` | — | Called when backdrop or close button is pressed |
-| `title` | `ReactNode` | — | Title displayed in the drawer header |
-| `children` | `ReactNode` | — | Drawer body content |
-| `style` | `StyleProp<ViewStyle>` | — | Override panel styles |
-
-## Accessibility
-
-- Backdrop press and close button both call `onClose`
-- Close button has `accessibilityLabel="Close drawer"`
-- Android back button triggers `onRequestClose` which calls `onClose`
-- Backdrop fades in, panel slides from bottom

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

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

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

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

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

@@ -1,175 +0,0 @@
-import { ReactNode, useEffect, useRef } from 'react';
-import {
-  Modal,
-  View,
-  Pressable,
-  Text,
-  Animated,
-  StyleSheet,
-  Dimensions,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { spacing, font, border } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-interface DrawerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: ReactNode;
-  children?: ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    justifyContent: 'flex-end',
-  },
-  panel: {
-    maxHeight: '90%',
-    borderTopStartRadius: border.radius.m,
-    borderTopEndRadius: border.radius.m,
-    paddingTop: spacing.m,
-    paddingHorizontal: spacing.m,
-    paddingBottom: spacing.m,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: -4 },
-    shadowOpacity: 0.15,
-    shadowRadius: 16,
-    elevation: 16,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingBottom: spacing.m,
-    borderBottomWidth: 1,
-    marginBottom: spacing.m,
-  },
-  title: {
-    fontFamily: font.family.body,
-    fontSize: font.size.heading3,
-    fontWeight: font.weight.semibold,
-    flex: 1,
-  },
-  closeButton: {
-    width: 44,
-    height: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  closeText: {
-    fontFamily: font.family.body,
-    fontSize: 20,
-    lineHeight: 24,
-  },
-  body: {
-    flex: 1,
-  },
-});
-
-export function Drawer({
-  isOpen,
-  onClose,
-  title,
-  children,
-  style,
-}: Readonly<DrawerProps>) {
-  const { colors } = useTheme();
-  const screenHeight = Dimensions.get('window').height;
-
-  const slideAnim = useRef(new Animated.Value(screenHeight)).current;
-  const backdropAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (isOpen) {
-      Animated.parallel([
-        Animated.timing(slideAnim, {
-          toValue: 0,
-          duration: 250,
-          useNativeDriver: true,
-        }),
-        Animated.timing(backdropAnim, {
-          toValue: 1,
-          duration: 250,
-          useNativeDriver: true,
-        }),
-      ]).start();
-    } else {
-      Animated.parallel([
-        Animated.timing(slideAnim, {
-          toValue: screenHeight,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-        Animated.timing(backdropAnim, {
-          toValue: 0,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-      ]).start();
-    }
-  }, [isOpen, slideAnim, backdropAnim, screenHeight]);
-
-  return (
-    <Modal
-      visible={isOpen}
-      transparent
-      animationType="none"
-      onRequestClose={onClose}
-    >
-      <View style={styles.overlay}>
-        <Animated.View
-          style={[
-            StyleSheet.absoluteFill,
-            { backgroundColor: 'rgba(0, 0, 0, 0.5)', opacity: backdropAnim },
-          ]}
-        >
-          <Pressable
-            style={StyleSheet.absoluteFill}
-            onPress={onClose}
-            accessibilityRole="button"
-            accessibilityLabel="Close drawer"
-          />
-        </Animated.View>
-        <Animated.View
-          style={[
-            styles.panel,
-            {
-              backgroundColor: colors.colorBg,
-              transform: [{ translateY: slideAnim }],
-            },
-            style,
-          ]}
-          accessibilityRole="none"
-        >
-          <View
-            style={[styles.header, { borderBottomColor: colors.colorBgSubtle }]}
-          >
-            {!!title && (
-              <Text style={[styles.title, { color: colors.colorOnBg }]}>
-                {title}
-              </Text>
-            )}
-            <Pressable
-              style={styles.closeButton}
-              onPress={onClose}
-              accessibilityRole="button"
-              accessibilityLabel="Close drawer"
-              hitSlop={8}
-            >
-              <Text
-                style={[styles.closeText, { color: colors.colorOnBgSubtle }]}
-                aria-hidden
-              >
-                {'\u2715'}
-              </Text>
-            </Pressable>
-          </View>
-          <View style={styles.body}>{children}</View>
-        </Animated.View>
-      </View>
-    </Modal>
-  );
-}

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

@@ -1,74 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './DropdownMenu.native.stories';
-
-<Meta of={Stories} />
-
-# DropdownMenu (React Native)
-
-A dropdown menu that opens as a bottom sheet modal on mobile. Accepts a trigger element and a list of menu items.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { DropdownMenu } from '@boostdev/design-system-components';
-
-<DropdownMenu
-  trigger={<Button>Actions</Button>}
-  title="Actions"
-  items={[
-    { id: 'edit', label: 'Edit', onPress: () => console.log('edit') },
-    { id: 'delete', label: 'Delete', onPress: () => console.log('delete') },
-  ]}
-/>
-```
-
-Wrap your tree in `ThemeProvider` (once, at the app root):
-
-```tsx
-import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
-
-export default function App() {
-  return <ThemeProvider><YourApp /></ThemeProvider>;
-}
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With disabled items
-<Canvas of={Stories.WithDisabledItems} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `trigger` | `ReactElement` | — | Element that opens the menu on press |
-| `items` | `DropdownMenuItem[]` | — | Array of menu items to display |
-| `title` | `string` | `'Menu'` | Title displayed in the sheet header |
-| `style` | `StyleProp<ViewStyle>` | — | Override wrapper styles |
-
-### DropdownMenuItem
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `id` | `string` | — | Unique identifier |
-| `label` | `string` | — | Display text |
-| `onPress` | `() => void` | — | Called when item is pressed |
-| `disabled` | `boolean` | `false` | Prevents interaction |
-| `icon` | `ReactNode` | — | Optional icon before the label |
-| `separator` | `boolean` | `false` | Renders a separator line above the item |
-
-## Accessibility
-
-- Trigger has `accessibilityRole="button"` with `expanded` state
-- Menu items have `accessibilityRole="menuitem"`
-- Disabled items communicate their state to assistive technologies
-- Android back button closes the menu

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

@@ -1,78 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Text, Pressable } from 'react-native';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { DropdownMenu } from './DropdownMenu.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>;
-}
-
-const items = [
-  { id: 'edit', label: 'Edit' },
-  { id: 'delete', label: 'Delete' },
-];
-
-const itemsWithDisabled = [
-  { id: 'view', label: 'View' },
-  { id: 'share', label: 'Share', disabled: true },
-];
-
-describe('DropdownMenu (native)', () => {
-  it('renders the trigger', () => {
-    renderWithTheme(
-      <DropdownMenu trigger={<Trigger>Open</Trigger>} items={items} />,
-    );
-    expect(screen.getByText('Open')).toBeInTheDocument();
-  });
-
-  it('opens the menu on trigger press', () => {
-    renderWithTheme(
-      <DropdownMenu trigger={<Trigger>Menu</Trigger>} items={items} title="Actions" />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Actions' }));
-    expect(screen.getByText('Edit')).toBeInTheDocument();
-    expect(screen.getByText('Delete')).toBeInTheDocument();
-  });
-
-  it('calls item onPress and closes menu when item is pressed', () => {
-    const onEdit = vi.fn();
-    const menuItems = [
-      { id: 'edit', label: 'Edit', onPress: onEdit },
-      { id: 'delete', label: 'Delete' },
-    ];
-    renderWithTheme(
-      <DropdownMenu trigger={<Trigger>Actions</Trigger>} items={menuItems} title="Actions" />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Actions' }));
-    fireEvent.click(screen.getByRole('menuitem', { name: 'Edit' }));
-    expect(onEdit).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders disabled items with disabled state', () => {
-    renderWithTheme(
-      <DropdownMenu trigger={<Trigger>Options</Trigger>} items={itemsWithDisabled} title="Options" />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Options' }));
-    expect(screen.getByRole('menuitem', { name: 'Share' })).toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('renders a close button in the sheet header', () => {
-    renderWithTheme(
-      <DropdownMenu trigger={<Trigger>Menu</Trigger>} items={items} title="Menu" />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Menu' }));
-    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-  });
-
-  it('renders the title in the sheet header', () => {
-    renderWithTheme(
-      <DropdownMenu trigger={<Trigger>Trigger</Trigger>} items={items} title="My Menu" />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'My Menu' }));
-    expect(screen.getByText('My Menu')).toBeInTheDocument();
-  });
-});

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { DropdownMenu } from './DropdownMenu.native';
-import { Button } from '../Button/Button.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Interaction/DropdownMenu',
-  component: DropdownMenu,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-} satisfies Meta<typeof DropdownMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const defaultItems = [
-  { id: 'edit', label: 'Edit' },
-  { id: 'duplicate', label: 'Duplicate' },
-  { id: 'archive', label: 'Archive', separator: true },
-  { id: 'delete', label: 'Delete' },
-];
-
-const withDisabledItems = [
-  { id: 'view', label: 'View details' },
-  { id: 'edit', label: 'Edit' },
-  { id: 'share', label: 'Share', disabled: true },
-  { id: 'delete', label: 'Delete', separator: true },
-];
-
-export const Default: Story = {
-  render: () => (
-    <DropdownMenu
-      trigger={<Button>Actions</Button>}
-      items={defaultItems}
-      title="Actions"
-    />
-  ),
-};
-
-export const WithDisabledItems: Story = {
-  render: () => (
-    <DropdownMenu
-      trigger={<Text>{'More \u2026'}</Text>}
-      items={withDisabledItems}
-      title="Options"
-    />
-  ),
-};