@boostdev/design-system-components 2.4.2 → 2.5.1

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

@@ -1,254 +0,0 @@
-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/Popover/Popover.native.mdx

@@ -1,61 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Popover.native.stories';
-
-<Meta of={Stories} />
-
-# Popover (React Native)
-
-A popover overlay that displays content in a centered modal. The trigger element opens the popover on press; tapping the backdrop dismisses it.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Popover } from '@boostdev/design-system-components';
-
-<Popover
-  content={<Text>Additional information here.</Text>}
-  accessibilityLabel="More info"
->
-  <Button>Show Info</Button>
-</Popover>
-```
-
-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} />
-
-### Rich content
-<Canvas of={Stories.RichContent} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | — | Trigger element that opens the popover on press |
-| `content` | `ReactNode` | — | Content displayed inside the popover panel |
-| `accessibilityLabel` | `string` | `'Open popover'` | Label for the trigger and panel |
-| `style` | `StyleProp<ViewStyle>` | — | Override wrapper styles |
-
-## Accessibility
-
-- Trigger has `accessibilityRole="button"` with `expanded` state
-- Backdrop press closes the popover
-- Android back button triggers `onRequestClose` to dismiss
-- Panel has shadow elevation for visual depth

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

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

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

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

@@ -1,55 +0,0 @@
-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/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.native.spec.tsx

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

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