@boostdev/design-system-components 2.4.2 → 2.5.1

package/src/components/layout/Card/Card.native.tsx

@@ -1,89 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { spacing, border } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type CardVariant = 'default' | 'elevated' | 'outlined';
-type CardPadding = 'none' | 'small' | 'medium' | 'large';
-type CardAlign = 'start' | 'center' | 'end';
-
-interface CardProps {
-  children: ReactNode;
-  variant?: CardVariant;
-  padding?: CardPadding;
-  textAlign?: CardAlign;
-  style?: StyleProp<ViewStyle>;
-  onPress?: () => void;
-  accessibilityLabel?: string;
-}
-
-const paddingMap: Record<CardPadding, number> = {
-  none:   0,
-  small:  spacing.s,
-  medium: spacing.m,
-  large:  spacing.xxl,
-};
-
-const alignMap: Record<CardAlign, 'flex-start' | 'center' | 'flex-end'> = {
-  start:  'flex-start',
-  center: 'center',
-  end:    'flex-end',
-};
-
-const styles = StyleSheet.create({
-  card: {
-    borderRadius: border.radius.m,
-    overflow: 'hidden',
-  },
-});
-
-export function Card({
-  children,
-  variant = 'default',
-  padding = 'medium',
-  textAlign = 'start',
-  style,
-  onPress,
-  accessibilityLabel,
-}: CardProps) {
-  const { colors } = useTheme();
-
-  const variantStyle: ViewStyle = {
-    backgroundColor: colors.colorBg,
-    ...(variant === 'elevated' && {
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 4,
-    }),
-    ...(variant === 'outlined' && {
-      borderWidth: 1,
-      borderColor: colors.colorBgSubtle,
-    }),
-  };
-
-  const inner: ViewStyle = {
-    padding: paddingMap[padding],
-    alignItems: alignMap[textAlign],
-  };
-
-  if (onPress) {
-    return (
-      <Pressable
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
-        style={({ pressed }) => [styles.card, variantStyle, inner, pressed && { opacity: 0.8 }, style]}
-      >
-        {children}
-      </Pressable>
-    );
-  }
-
-  return (
-    <View style={[styles.card, variantStyle, inner, style]}>
-      {children}
-    </View>
-  );
-}

package/src/components/layout/IconWrapper/IconWrapper.native.spec.tsx

@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { IconWrapper } from './IconWrapper.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('IconWrapper (native)', () => {
-  it('renders children', () => {
-    renderWithTheme(
-      <IconWrapper>
-        <span data-testid="icon">★</span>
-      </IconWrapper>,
-    );
-    expect(screen.getByTestId('icon')).toBeInTheDocument();
-  });
-
-  it('renders without error when accessibilityElementsHidden is true', () => {
-    // accessibilityElementsHidden={true} hides the element from iOS VoiceOver.
-    // importantForAccessibility="no-hide-descendants" hides it from Android TalkBack.
-    // Both are applied when this prop is set.
-    renderWithTheme(
-      <IconWrapper accessibilityElementsHidden>
-        <span data-testid="icon">★</span>
-      </IconWrapper>,
-    );
-    expect(screen.getByTestId('icon')).toBeInTheDocument();
-  });
-
-  it('renders without error when accessibilityElementsHidden is false', () => {
-    renderWithTheme(
-      <IconWrapper accessibilityElementsHidden={false}>
-        <span data-testid="icon">★</span>
-      </IconWrapper>,
-    );
-    expect(screen.getByTestId('icon')).toBeInTheDocument();
-  });
-});

package/src/components/layout/IconWrapper/IconWrapper.native.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { IconWrapper } from './IconWrapper.native';
-
-// Simple SVG icon for demonstration
-const StarIcon = () => (
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-  </svg>
-);
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Layout/IconWrapper',
-  component: IconWrapper,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-} satisfies Meta<typeof IconWrapper>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <IconWrapper {...args}>
-      <StarIcon />
-    </IconWrapper>
-  ),
-};
-export const HiddenFromAccessibility: Story = {
-  render: (args) => (
-    <IconWrapper {...args} accessibilityElementsHidden>
-      <StarIcon />
-    </IconWrapper>
-  ),
-};

package/src/components/layout/IconWrapper/IconWrapper.native.tsx

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { View, StyleProp, ViewStyle } from 'react-native';
-
-export interface IconWrapperProps {
-  children: ReactNode;
-  style?: StyleProp<ViewStyle>;
-  accessibilityElementsHidden?: boolean;
-}
-
-export function IconWrapper({ children, style, accessibilityElementsHidden }: IconWrapperProps) {
-  return (
-    <View
-      style={[{ alignItems: 'center', justifyContent: 'center' }, style]}
-      importantForAccessibility={accessibilityElementsHidden ? 'no-hide-descendants' : 'auto'}
-      accessibilityElementsHidden={accessibilityElementsHidden}
-    >
-      {children}
-    </View>
-  );
-}

package/src/components/layout/SectionHeader/SectionHeader.native.spec.tsx

@@ -1,51 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { SectionHeader } from './SectionHeader.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('SectionHeader (native)', () => {
-  it('renders the title with header role', () => {
-    renderWithTheme(<SectionHeader title="Overview" />);
-    expect(screen.getByRole('heading', { name: 'Overview' })).toBeInTheDocument();
-  });
-
-  it('renders the subtitle when provided', () => {
-    renderWithTheme(<SectionHeader title="Overview" subtitle="A brief summary" />);
-    expect(screen.getByText('A brief summary')).toBeInTheDocument();
-  });
-
-  it('does not render subtitle when not provided', () => {
-    renderWithTheme(<SectionHeader title="Overview" />);
-    expect(screen.queryByText('A brief summary')).not.toBeInTheDocument();
-  });
-
-  it('aligns content to flex-start by default', () => {
-    const { container } = renderWithTheme(<SectionHeader title="Overview" />);
-    expect(container.firstChild).toHaveStyle({ alignItems: 'flex-start' });
-  });
-
-  it('aligns content to center when alignment is center', () => {
-    const { container } = renderWithTheme(
-      <SectionHeader title="Overview" alignment="center" />,
-    );
-    expect(container.firstChild).toHaveStyle({ alignItems: 'center' });
-  });
-
-  it('aligns content to flex-end when alignment is end', () => {
-    const { container } = renderWithTheme(
-      <SectionHeader title="Overview" alignment="end" />,
-    );
-    expect(container.firstChild).toHaveStyle({ alignItems: 'flex-end' });
-  });
-
-  it('renders title and subtitle together', () => {
-    renderWithTheme(
-      <SectionHeader title="Settings" subtitle="Manage your preferences" />,
-    );
-    expect(screen.getByRole('heading', { name: 'Settings' })).toBeInTheDocument();
-    expect(screen.getByText('Manage your preferences')).toBeInTheDocument();
-  });
-});

package/src/components/layout/SectionHeader/SectionHeader.native.stories.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { SectionHeader } from './SectionHeader.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Layout/SectionHeader',
-  component: SectionHeader,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
-    alignment: { control: 'select', options: ['start', 'center', 'end'] },
-  },
-} satisfies Meta<typeof SectionHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = { args: { title: 'Section Title' } };
-export const WithSubtitle: Story = { args: { title: 'Section Title', subtitle: 'Optional subtitle text.' } };
-export const Small: Story = { args: { title: 'Small Section', size: 'small' } };
-export const Large: Story = { args: { title: 'Large Section', size: 'large' } };
-export const Centered: Story = {
-  args: { title: 'Centered Header', subtitle: 'Centered subtitle text.', alignment: 'center' },
-};
-export const AllSizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-      <SectionHeader size="large" title="Large Heading" subtitle="Large section subtitle." />
-      <SectionHeader size="medium" title="Medium Heading" subtitle="Medium section subtitle." />
-      <SectionHeader size="small" title="Small Heading" subtitle="Small section subtitle." />
-    </div>
-  ),
-};

package/src/components/layout/SectionHeader/SectionHeader.native.tsx

@@ -1,79 +0,0 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type SectionHeaderAlignment = 'start' | 'center' | 'end';
-type SectionHeaderSize = 'small' | 'medium' | 'large';
-
-interface SectionHeaderProps {
-  title: string;
-  subtitle?: string;
-  alignment?: SectionHeaderAlignment;
-  size?: SectionHeaderSize;
-  style?: StyleProp<ViewStyle>;
-}
-
-const alignMap: Record<SectionHeaderAlignment, 'flex-start' | 'center' | 'flex-end'> = {
-  start:  'flex-start',
-  center: 'center',
-  end:    'flex-end',
-};
-
-const titleStyles = StyleSheet.create({
-  small: {
-    fontSize: font.size.heading3,
-    fontFamily: font.family.heading,
-    fontWeight: font.weight.heading,
-    lineHeight: lineHeight.heading3,
-  },
-  medium: {
-    fontSize: font.size.heading2,
-    fontFamily: font.family.heading,
-    fontWeight: font.weight.heading,
-    lineHeight: lineHeight.heading2,
-  },
-  large: {
-    fontSize: font.size.heading1,
-    fontFamily: font.family.heading,
-    fontWeight: font.weight.heading,
-    lineHeight: lineHeight.heading1,
-  },
-});
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xxs,
-  },
-  subtitle: {
-    fontSize: font.size.bodyS,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.bodyS,
-  },
-});
-
-export function SectionHeader({
-  title,
-  subtitle,
-  alignment = 'start',
-  size = 'medium',
-  style,
-}: Readonly<SectionHeaderProps>) {
-  const { colors } = useTheme();
-  const align = alignMap[alignment];
-
-  return (
-    <View style={[styles.container, { alignItems: align }, style]}>
-      <Text
-        accessibilityRole="header"
-        style={[titleStyles[size], { color: colors.colorOnBg }]}
-      >
-        {title}
-      </Text>
-      {subtitle && (
-        <Text style={[styles.subtitle, { color: colors.colorOnBgSubtle }]}>
-          {subtitle}
-        </Text>
-      )}
-    </View>
-  );
-}

package/src/components/ui/Accordion/Accordion.native.mdx

@@ -1,65 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Accordion.native.stories';
-
-<Meta of={Stories} />
-
-# Accordion (React Native)
-
-React Native accordion component for stacked collapsible sections. By default only one section can be open at a time (exclusive mode). Set `allowMultiple` to permit multiple open sections.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { Accordion } from '@boostdev/design-system-components';
-
-<Accordion
-  items={[
-    { id: '1', title: 'Section one', content: <Text>First section content.</Text> },
-    { id: '2', title: 'Section two', content: <Text>Second section content.</Text> },
-  ]}
-/>
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With default open section
-<Canvas of={Stories.WithDefaultOpen} />
-
-### Allow multiple
-<Canvas of={Stories.AllowMultiple} />
-
-### With disabled item
-<Canvas of={Stories.WithDisabledItem} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `AccordionItem[]` | -- | Array of accordion sections |
-| `allowMultiple` | `boolean` | `false` | Allow multiple sections open simultaneously |
-| `defaultOpen` | `string[]` | `[]` | IDs of sections open initially |
-| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the container |
-
-### AccordionItem
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `id` | `string` | Unique identifier |
-| `title` | `ReactNode` | Header label |
-| `content` | `ReactNode` | Panel content |
-| `disabled` | `boolean` | Prevents toggling |
-
-## Accessibility
-
-- Each header has `button` role with `expanded` state
-- Disabled items have `disabled` accessibility state and reduced opacity
-- Chevron indicators are hidden from the accessibility tree

package/src/components/ui/Accordion/Accordion.native.spec.tsx

@@ -1,69 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Accordion } from './Accordion.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-const items = [
-  { id: '1', title: 'Section 1', content: <span>Content 1</span> },
-  { id: '2', title: 'Section 2', content: <span>Content 2</span> },
-  { id: '3', title: 'Section 3', content: <span>Content 3</span> },
-];
-
-describe('Accordion (native)', () => {
-  it('renders all section headers', () => {
-    renderWithTheme(<Accordion items={items} />);
-    expect(screen.getByText('Section 1')).toBeInTheDocument();
-    expect(screen.getByText('Section 2')).toBeInTheDocument();
-    expect(screen.getByText('Section 3')).toBeInTheDocument();
-  });
-
-  it('hides all content by default', () => {
-    renderWithTheme(<Accordion items={items} />);
-    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
-    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();
-  });
-
-  it('opens a section with defaultOpen', () => {
-    renderWithTheme(<Accordion items={items} defaultOpen={['2']} />);
-    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-    expect(screen.getByText('Content 2')).toBeInTheDocument();
-  });
-
-  it('toggles a section on press (exclusive mode)', () => {
-    renderWithTheme(<Accordion items={items} />);
-    fireEvent.click(screen.getByText('Section 1'));
-    expect(screen.getByText('Content 1')).toBeInTheDocument();
-
-    fireEvent.click(screen.getByText('Section 2'));
-    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-    expect(screen.getByText('Content 2')).toBeInTheDocument();
-  });
-
-  it('allows multiple open sections when allowMultiple is true', () => {
-    renderWithTheme(<Accordion items={items} allowMultiple />);
-    fireEvent.click(screen.getByText('Section 1'));
-    fireEvent.click(screen.getByText('Section 2'));
-    expect(screen.getByText('Content 1')).toBeInTheDocument();
-    expect(screen.getByText('Content 2')).toBeInTheDocument();
-  });
-
-  it('does not toggle disabled items', () => {
-    const withDisabled = [
-      ...items,
-      { id: '4', title: 'Disabled', content: <span>Disabled content</span>, disabled: true },
-    ];
-    renderWithTheme(<Accordion items={withDisabled} />);
-    fireEvent.click(screen.getByText('Disabled'));
-    expect(screen.queryByText('Disabled content')).not.toBeInTheDocument();
-  });
-
-  it('shows content of open sections and has button role on headers', () => {
-    renderWithTheme(<Accordion items={items} defaultOpen={['1']} />);
-    expect(screen.getByText('Content 1')).toBeInTheDocument();
-    expect(screen.getByText('Section 1')).toBeInTheDocument();
-  });
-});

package/src/components/ui/Accordion/Accordion.native.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Accordion } from './Accordion.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Accordion',
-  component: Accordion,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const sampleItems = [
-  { id: '1', title: 'What is this library?', content: <Text>A design system component library built for React, React Native, and Web Components.</Text> },
-  { id: '2', title: 'How do I install it?', content: <Text>Run pnpm add @boostdev/design-system-components to add it to your project.</Text> },
-  { id: '3', title: 'Is it production ready?', content: <Text>The React components are stable. React Native components are in alpha.</Text> },
-];
-
-export const Default: Story = {
-  args: {
-    items: sampleItems,
-  },
-};
-
-export const WithDefaultOpen: Story = {
-  args: {
-    items: sampleItems,
-    defaultOpen: ['1'],
-  },
-};
-
-export const AllowMultiple: Story = {
-  args: {
-    items: sampleItems,
-    allowMultiple: true,
-    defaultOpen: ['1', '2'],
-  },
-};
-
-export const WithDisabledItem: Story = {
-  args: {
-    items: [
-      ...sampleItems,
-      { id: '4', title: 'Disabled section', content: <Text>You cannot see this.</Text>, disabled: true },
-    ],
-  },
-};

package/src/components/ui/Accordion/Accordion.native.tsx

@@ -1,141 +0,0 @@
-import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  LayoutAnimation,
-  Platform,
-  UIManager,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-if (
-  Platform.OS === 'android' &&
-  UIManager.setLayoutAnimationEnabledExperimental
-) {
-  UIManager.setLayoutAnimationEnabledExperimental(true);
-}
-
-export interface AccordionItem {
-  id: string;
-  title: ReactNode;
-  content: ReactNode;
-  disabled?: boolean;
-}
-
-interface AccordionProps {
-  items: AccordionItem[];
-  allowMultiple?: boolean;
-  defaultOpen?: string[];
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-    borderRadius: border.radius.s,
-  },
-  item: {
-    borderBottomWidth: 1,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    minHeight: 44,
-    paddingVertical: spacing.s,
-    paddingHorizontal: spacing.m,
-  },
-  titleText: {
-    flex: 1,
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-    lineHeight: lineHeight.body,
-  },
-  chevron: {
-    fontSize: font.size.bodyS,
-    marginStart: spacing.xs,
-  },
-  panel: {
-    paddingHorizontal: spacing.m,
-    paddingBottom: spacing.m,
-  },
-  pressed: {
-    opacity: 0.75,
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-});
-
-export function Accordion({
-  items,
-  allowMultiple = false,
-  defaultOpen = [],
-  style,
-}: Readonly<AccordionProps>) {
-  const { colors } = useTheme();
-  const [openIds, setOpenIds] = useState<string[]>(defaultOpen);
-
-  const toggle = (id: string) => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setOpenIds(prev => {
-      const isOpen = prev.includes(id);
-      if (isOpen) return prev.filter(i => i !== id);
-      return allowMultiple ? [...prev, id] : [id];
-    });
-  };
-
-  return (
-    <View style={[styles.container, style]}>
-      {items.map((item, index) => {
-        const isOpen = openIds.includes(item.id);
-        const isLast = index === items.length - 1;
-
-        return (
-          <View
-            key={item.id}
-            style={[
-              styles.item,
-              { borderBottomColor: colors.colorBgSubtle },
-              isLast && { borderBottomWidth: 0 },
-            ]}
-          >
-            <Pressable
-              onPress={() => toggle(item.id)}
-              disabled={item.disabled}
-              accessibilityRole="button"
-              accessibilityState={{ expanded: isOpen, disabled: item.disabled }}
-              style={({ pressed }) => [
-                styles.header,
-                item.disabled && styles.disabled,
-                pressed && !item.disabled && styles.pressed,
-              ]}
-            >
-              <Text style={[styles.titleText, { color: colors.colorOnBg }]}>
-                {typeof item.title === 'string' ? item.title : item.title}
-              </Text>
-              <Text
-                style={[styles.chevron, { color: colors.colorOnBgSubtle }]}
-                importantForAccessibility="no"
-                accessibilityElementsHidden={true}
-              >
-                {isOpen ? '▾' : '▸'}
-              </Text>
-            </Pressable>
-            {isOpen && (
-              <View style={styles.panel} accessibilityRole="summary">
-                {item.content}
-              </View>
-            )}
-          </View>
-        );
-      })}
-    </View>
-  );
-}