@boostdev/design-system-components 1.2.2 → 1.2.4

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

@@ -0,0 +1,175 @@
+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.module.css

@@ -22,6 +22,10 @@
     margin: 0;
   }
 
+  .menu li {
+    list-style: none;
+  }
+
   .--placement_bottom-start { inset-inline-start: 0; }
   .--placement_bottom-end   { inset-inline-end: 0; }
 

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

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

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

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

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

@@ -0,0 +1,254 @@
+import React, { ReactElement, ReactNode, useState, useEffect, useRef } from 'react';
+import {
+  Modal,
+  View,
+  Pressable,
+  Text,
+  FlatList,
+  Animated,
+  StyleSheet,
+  Dimensions,
+  SafeAreaView,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, border, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+export interface DropdownMenuItem {
+  id: string;
+  label: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  icon?: ReactNode;
+  separator?: boolean;
+}
+
+interface DropdownMenuProps {
+  trigger: ReactElement;
+  items: DropdownMenuItem[];
+  title?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    maxHeight: '60%',
+    borderTopStartRadius: border.radius.m,
+    borderTopEndRadius: border.radius.m,
+    paddingTop: spacing.m,
+    paddingBottom: spacing.xxxl,
+  },
+  sheetHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: spacing.m,
+    paddingBottom: spacing.s,
+    borderBottomWidth: 1,
+    marginBottom: spacing.xxs,
+  },
+  sheetTitle: {
+    fontFamily: font.family.body,
+    fontSize: font.size.heading3,
+    fontWeight: font.weight.semibold,
+  },
+  closeText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    fontWeight: font.weight.semibold,
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: spacing.m,
+    marginVertical: spacing.xxs,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: spacing.m,
+    paddingVertical: spacing.s,
+    minHeight: 48,
+    gap: spacing.s,
+  },
+  itemText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+  },
+});
+
+export function DropdownMenu({
+  trigger,
+  items,
+  title = 'Menu',
+  style,
+}: Readonly<DropdownMenuProps>) {
+  const { colors } = useTheme();
+  const [open, setOpen] = useState(false);
+  const screenHeight = Dimensions.get('window').height;
+
+  const slideAnim = useRef(new Animated.Value(screenHeight)).current;
+  const backdropAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (open) {
+      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();
+    }
+  }, [open, slideAnim, backdropAnim, screenHeight]);
+
+  const handleItemPress = (item: DropdownMenuItem) => {
+    item.onPress?.();
+    setOpen(false);
+  };
+
+  return (
+    <View style={style}>
+      {React.cloneElement(trigger as ReactElement<Record<string, unknown>>, {
+        onPress: () => setOpen(true),
+        accessibilityRole: 'button',
+        accessibilityLabel: title,
+      })}
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="none"
+        onRequestClose={() => setOpen(false)}
+      >
+        <View style={styles.overlay}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFill,
+              { backgroundColor: 'rgba(0, 0, 0, 0.5)', opacity: backdropAnim },
+            ]}
+          >
+            <Pressable
+              style={StyleSheet.absoluteFill}
+              onPress={() => setOpen(false)}
+              accessibilityRole="button"
+              accessibilityLabel="Close menu"
+            />
+          </Animated.View>
+          <Animated.View
+            style={[
+              styles.sheet,
+              {
+                backgroundColor: colors.colorBg,
+                transform: [{ translateY: slideAnim }],
+              },
+            ]}
+          >
+            <Pressable
+              onPress={() => {
+                /* prevent close when pressing sheet */
+              }}
+            >
+              <SafeAreaView>
+                <View
+                  style={[
+                    styles.sheetHeader,
+                    { borderBottomColor: colors.colorBgSubtle },
+                  ]}
+                >
+                  <Text style={[styles.sheetTitle, { color: colors.colorOnBg }]}>
+                    {title}
+                  </Text>
+                  <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel="Close"
+                    onPress={() => setOpen(false)}
+                    hitSlop={8}
+                  >
+                    <Text
+                      style={[
+                        styles.closeText,
+                        { color: colors.colorInteractive },
+                      ]}
+                    >
+                      Done
+                    </Text>
+                  </Pressable>
+                </View>
+                <FlatList
+                  data={items}
+                  keyExtractor={(item) => item.id}
+                  renderItem={({ item }) => (
+                    <>
+                      {item.separator && (
+                        <View
+                          style={[
+                            styles.separator,
+                            { backgroundColor: colors.colorBgSubtle },
+                          ]}
+                          accessibilityRole="none"
+                        />
+                      )}
+                      <Pressable
+                        accessibilityRole="menuitem"
+                        accessibilityLabel={item.label}
+                        accessibilityState={{ disabled: item.disabled }}
+                        disabled={item.disabled}
+                        onPress={() => handleItemPress(item)}
+                        style={({ pressed }) => [
+                          styles.item,
+                          pressed && { backgroundColor: colors.colorBgSubtle },
+                          item.disabled && { opacity: 0.4 },
+                        ]}
+                      >
+                        {!!item.icon && (
+                          <View
+                            importantForAccessibility="no-hide-descendants"
+                            accessibilityElementsHidden={true}
+                          >
+                            {item.icon}
+                          </View>
+                        )}
+                        <Text
+                          style={[
+                            styles.itemText,
+                            { color: colors.colorOnBg },
+                          ]}
+                        >
+                          {item.label}
+                        </Text>
+                      </Pressable>
+                    </>
+                  )}
+                />
+              </SafeAreaView>
+            </Pressable>
+          </Animated.View>
+        </View>
+      </Modal>
+    </View>
+  );
+}

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

@@ -26,14 +26,14 @@ export const Default: Story = {
     ],
   },
   render: args => (
-    <DropdownMenu {...args} trigger={<Button variant="ghost">Actions ▾</Button>} />
+    <DropdownMenu {...args} trigger={<Button variant="outline">Actions ▾</Button>} />
   ),
 };
 
 export const WithDisabledItem: Story = {
   render: () => (
     <DropdownMenu
-      trigger={<Button variant="ghost">Options ▾</Button>}
+      trigger={<Button variant="outline">Options ▾</Button>}
       items={[
         { id: 'view', label: 'View' },
         { id: 'edit', label: 'Edit' },
@@ -46,7 +46,7 @@ export const WithDisabledItem: Story = {
 export const WithSeparator: Story = {
   render: () => (
     <DropdownMenu
-      trigger={<Button variant="ghost">File ▾</Button>}
+      trigger={<Button variant="outline">File ▾</Button>}
       items={[
         { id: 'new', label: 'New' },
         { id: 'open', label: 'Open' },
@@ -60,7 +60,7 @@ export const WithSeparator: Story = {
 export const AlignedEnd: Story = {
   render: () => (
     <DropdownMenu
-      trigger={<Button variant="ghost">⋮</Button>}
+      trigger={<Button variant="outline">⋮</Button>}
       items={[{ id: 'copy', label: 'Copy link' }, { id: 'report', label: 'Report' }]}
       placement="bottom-end"
     />