@boostdev/design-system-components 2.4.2 → 2.5.1

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

@@ -1,68 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Collapsible } from './Collapsible.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Collapsible (native)', () => {
-  it('renders the summary text', () => {
-    renderWithTheme(
-      <Collapsible summary="Details">
-        <span>Content</span>
-      </Collapsible>,
-    );
-    expect(screen.getByText('Details')).toBeInTheDocument();
-  });
-
-  it('hides content by default', () => {
-    renderWithTheme(
-      <Collapsible summary="Details">
-        <span>Hidden content</span>
-      </Collapsible>,
-    );
-    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
-  });
-
-  it('shows content when defaultOpen is true', () => {
-    renderWithTheme(
-      <Collapsible summary="Details" defaultOpen>
-        <span>Visible content</span>
-      </Collapsible>,
-    );
-    expect(screen.getByText('Visible content')).toBeInTheDocument();
-  });
-
-  it('toggles content on press', () => {
-    renderWithTheme(
-      <Collapsible summary="Toggle me">
-        <span>Toggled content</span>
-      </Collapsible>,
-    );
-    expect(screen.queryByText('Toggled content')).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: 'Toggle me' }));
-    expect(screen.getByText('Toggled content')).toBeInTheDocument();
-  });
-
-  it('shows content when defaultOpen is set and has button role', () => {
-    renderWithTheme(
-      <Collapsible summary="Expandable" defaultOpen>
-        <span>Content</span>
-      </Collapsible>,
-    );
-    expect(screen.getByRole('button', { name: 'Expandable' })).toBeInTheDocument();
-    expect(screen.getByText('Content')).toBeInTheDocument();
-  });
-
-  it('calls onToggle with the new open state', () => {
-    const onToggle = vi.fn();
-    renderWithTheme(
-      <Collapsible summary="Toggle" onToggle={onToggle}>
-        <span>Content</span>
-      </Collapsible>,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Toggle' }));
-    expect(onToggle).toHaveBeenCalledWith(true);
-  });
-});

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Collapsible } from './Collapsible.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Collapsible',
-  component: Collapsible,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Collapsible>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    summary: 'Click to expand',
-    children: <Text>This is the collapsible content that is revealed when expanded.</Text>,
-  },
-};
-
-export const DefaultOpen: Story = {
-  args: {
-    summary: 'Already open',
-    defaultOpen: true,
-    children: <Text>This content is visible by default.</Text>,
-  },
-};
-
-export const Multiple: Story = {
-  args: { summary: '', children: null },
-  render: () => (
-    <>
-      <Collapsible summary="Section 1">
-        <Text>Content for section 1.</Text>
-      </Collapsible>
-      <Collapsible summary="Section 2">
-        <Text>Content for section 2.</Text>
-      </Collapsible>
-      <Collapsible summary="Section 3" defaultOpen>
-        <Text>Content for section 3 (open by default).</Text>
-      </Collapsible>
-    </>
-  ),
-};

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

@@ -1,139 +0,0 @@
-import { ReactNode, useCallback, useRef, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  Animated,
-  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 CollapsibleProps {
-  /** The trigger label -- always visible */
-  summary: string;
-  /** The content revealed when expanded */
-  children: ReactNode;
-  /** Controlled open state */
-  open?: boolean;
-  /** Uncontrolled initial open state */
-  defaultOpen?: boolean;
-  /** Called after each toggle with the new open state */
-  onToggle?: (open: boolean) => void;
-  /** Grouping name (informational in native) */
-  name?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: border.radius.m,
-    overflow: 'hidden',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    minHeight: 44,
-    paddingVertical: spacing.s,
-    paddingHorizontal: spacing.m,
-  },
-  summaryText: {
-    flex: 1,
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-    lineHeight: lineHeight.body,
-  },
-  chevron: {
-    fontSize: font.size.body,
-    marginStart: spacing.xs,
-  },
-  content: {
-    paddingHorizontal: spacing.m,
-    paddingBottom: spacing.m,
-  },
-  pressed: {
-    opacity: 0.75,
-  },
-});
-
-export function Collapsible({
-  summary,
-  children,
-  open: controlledOpen,
-  defaultOpen = false,
-  onToggle,
-  name: _name, // eslint-disable-line @typescript-eslint/no-unused-vars
-  style,
-}: Readonly<CollapsibleProps>) {
-  const { colors } = useTheme();
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const isControlled = controlledOpen !== undefined;
-  const isOpen = isControlled ? controlledOpen : internalOpen;
-
-  const rotation = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
-
-  const toggle = useCallback(() => {
-    const next = !isOpen;
-
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-
-    Animated.timing(rotation, {
-      toValue: next ? 1 : 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-
-    if (!isControlled) {
-      setInternalOpen(next);
-    }
-    onToggle?.(next);
-  }, [isOpen, isControlled, onToggle, rotation]);
-
-  const rotateZ = rotation.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '90deg'],
-  });
-
-  return (
-    <View
-      style={[styles.container, { borderBottomWidth: 1, borderBottomColor: colors.colorBgSubtle }, style]}
-      accessibilityRole="summary"
-    >
-      <Pressable
-        onPress={toggle}
-        accessibilityRole="button"
-        accessibilityLabel={summary}
-        accessibilityState={{ expanded: isOpen }}
-        style={({ pressed }) => [styles.header, pressed && styles.pressed]}
-      >
-        <Text style={[styles.summaryText, { color: colors.colorOnBg }]}>{summary}</Text>
-        <Animated.Text
-          style={[styles.chevron, { color: colors.colorOnBgSubtle, transform: [{ rotateZ }] }]}
-          importantForAccessibility="no"
-          accessibilityElementsHidden={true}
-        >
-          ▸
-        </Animated.Text>
-      </Pressable>
-      {isOpen && (
-        <View style={styles.content}>
-          {children}
-        </View>
-      )}
-    </View>
-  );
-}

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

@@ -1,50 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './DescriptionList.native.stories';
-
-<Meta of={Stories} />
-
-# DescriptionList (React Native)
-
-React Native description list for displaying key-value pairs. Each item has a bold term and a description.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { DescriptionList } from '@boostdev/design-system-components';
-
-<DescriptionList
-  items={[
-    { term: 'Name', description: 'Jane Doe' },
-    { term: 'Email', description: 'jane@example.com' },
-  ]}
-/>
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### Two items
-<Canvas of={Stories.TwoItems} />
-
-### Single item
-<Canvas of={Stories.SingleItem} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `Array<{ term: string, description: ReactNode }>` | — | List of term-description pairs |
-| `style` | `StyleProp<ViewStyle>` | — | Override container styles |
-
-## Accessibility
-
-- Container uses `accessibilityRole="list"`, each group uses `accessibilityRole="listitem"`
-- Terms render as bold text for visual distinction

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

@@ -1,37 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { DescriptionList } from './DescriptionList.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('DescriptionList (native)', () => {
-  const items = [
-    { term: 'Name', description: 'Jane Doe' },
-    { term: 'Email', description: 'jane@example.com' },
-  ];
-
-  it('renders all term texts', () => {
-    renderWithTheme(<DescriptionList items={items} />);
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Email')).toBeInTheDocument();
-  });
-
-  it('renders all description texts', () => {
-    renderWithTheme(<DescriptionList items={items} />);
-    expect(screen.getByText('Jane Doe')).toBeInTheDocument();
-    expect(screen.getByText('jane@example.com')).toBeInTheDocument();
-  });
-
-  it('has list role on the container', () => {
-    renderWithTheme(<DescriptionList items={items} />);
-    expect(screen.getByRole('list')).toBeInTheDocument();
-  });
-
-  it('renders a single item', () => {
-    renderWithTheme(<DescriptionList items={[{ term: 'Version', description: '1.0' }]} />);
-    expect(screen.getByText('Version')).toBeInTheDocument();
-    expect(screen.getByText('1.0')).toBeInTheDocument();
-  });
-});

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { DescriptionList } from './DescriptionList.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/DescriptionList',
-  component: DescriptionList,
-  decorators: [
-    (Story) => (
-      <ThemeProvider colorScheme="light">
-        <div style={{ width: 300 }}>
-          <Story />
-        </div>
-      </ThemeProvider>
-    ),
-  ],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof DescriptionList>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    items: [
-      { term: 'Name', description: 'Jane Doe' },
-      { term: 'Email', description: 'jane@example.com' },
-      { term: 'Role', description: 'Administrator' },
-    ],
-  },
-};
-
-export const TwoItems: Story = {
-  args: {
-    items: [
-      { term: 'Status', description: 'Active' },
-      { term: 'Plan', description: 'Enterprise' },
-    ],
-  },
-};
-
-export const SingleItem: Story = {
-  args: {
-    items: [{ term: 'Version', description: '1.0.0' }],
-  },
-};

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

@@ -1,54 +0,0 @@
-import { ReactNode } from 'react';
-import { AccessibilityRole, StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-export interface DescriptionItem {
-  term: string;
-  description: ReactNode;
-}
-
-interface DescriptionListProps {
-  items: DescriptionItem[];
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  list: {
-    gap: spacing.m,
-  },
-  group: {
-    gap: spacing.xxs,
-  },
-  term: {
-    fontSize: font.size.bodyS,
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-    lineHeight: lineHeight.bodyS,
-  },
-  description: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    fontWeight: font.weight.body,
-    lineHeight: lineHeight.body,
-  },
-});
-
-export function DescriptionList({ items, style }: Readonly<DescriptionListProps>) {
-  const { colors } = useTheme();
-
-  return (
-    <View style={[styles.list, style]} accessibilityRole="list">
-      {items.map((item, i) => (
-        <View key={i} style={styles.group} accessibilityRole={'listitem' as AccessibilityRole}>
-          <Text style={[styles.term, { color: colors.colorOnBgSubtle }]}>{item.term}</Text>
-          {typeof item.description === 'string' ? (
-            <Text style={[styles.description, { color: colors.colorOnBg }]}>{item.description}</Text>
-          ) : (
-            <View>{item.description}</View>
-          )}
-        </View>
-      ))}
-    </View>
-  );
-}

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

@@ -1,53 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Link.native.stories';
-
-<Meta of={Stories} />
-
-# Link (React Native)
-
-React Native link component using `Pressable` + `Text`. Opens URLs via `Linking.openURL` or calls a custom `onPress` handler.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Link } from '@boostdev/design-system-components';
-
-<Link href="https://example.com">Visit website</Link>
-<Link onPress={() => navigation.navigate('Settings')}>Settings</Link>
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With onPress callback
-<Canvas of={Stories.WithOnPress} />
-
-### With accessibility label
-<Canvas of={Stories.WithAccessibilityLabel} />
-
-### All variants
-<Canvas of={Stories.AllVariants} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `href` | `string` | — | URL to open via `Linking.openURL` |
-| `children` | `ReactNode` | — | Link label |
-| `onPress` | `() => void` | — | Custom press handler (used when `href` is not provided) |
-| `accessibilityLabel` | `string` | — | Screen reader label |
-| `style` | `StyleProp<TextStyle>` | — | Override text styles |
-
-## Accessibility
-
-- Uses `accessibilityRole="link"` for assistive technologies
-- Provide `accessibilityLabel` when the visible text is not self-descriptive
-- Pressed state reduces opacity for visual feedback

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

@@ -1,35 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Link } from './Link.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Link (native)', () => {
-  it('renders children text', () => {
-    renderWithTheme(<Link href="https://example.com">Visit</Link>);
-    expect(screen.getByText('Visit')).toBeInTheDocument();
-  });
-
-  it('has link role', () => {
-    renderWithTheme(<Link href="https://example.com">Visit</Link>);
-    expect(screen.getByRole('link')).toBeInTheDocument();
-  });
-
-  it('calls onPress when provided without href', () => {
-    const onPress = vi.fn();
-    renderWithTheme(<Link onPress={onPress}>Navigate</Link>);
-    fireEvent.click(screen.getByRole('link'));
-    expect(onPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('uses accessibilityLabel when provided', () => {
-    renderWithTheme(
-      <Link href="https://example.com" accessibilityLabel="Read more about products">
-        Read more
-      </Link>,
-    );
-    expect(screen.getByLabelText('Read more about products')).toBeInTheDocument();
-  });
-});

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

@@ -1,46 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Link } from './Link.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Link',
-  component: Link,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    onPress: { action: 'pressed' },
-  },
-} satisfies Meta<typeof Link>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { children: 'Visit website', href: 'https://example.com' },
-};
-
-export const WithOnPress: Story = {
-  args: { children: 'Navigate', onPress: () => {} },
-};
-
-export const WithAccessibilityLabel: Story = {
-  args: {
-    children: 'Read more',
-    href: 'https://example.com',
-    accessibilityLabel: 'Read more about our products',
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      <Link href="https://example.com">Default link</Link>
-      <Link onPress={() => {}}>Callback link</Link>
-      <Link href="https://example.com" accessibilityLabel="Accessible link">
-        With accessibility label
-      </Link>
-    </div>
-  ),
-};

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

@@ -1,48 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, Text, Pressable, Linking, StyleProp, TextStyle } from 'react-native';
-import { font } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-interface LinkProps {
-  href?: string;
-  children: ReactNode;
-  accessibilityLabel?: string;
-  style?: StyleProp<TextStyle>;
-  onPress?: () => void;
-}
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    textDecorationLine: 'underline',
-  },
-  pressed: {
-    opacity: 0.75,
-  },
-});
-
-export function Link({ href, children, accessibilityLabel, style, onPress }: Readonly<LinkProps>) {
-  const { colors } = useTheme();
-
-  const handlePress = () => {
-    if (onPress) {
-      onPress();
-    } else if (href) {
-      Linking.openURL(href);
-    }
-  };
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      accessibilityRole="link"
-      accessibilityLabel={accessibilityLabel}
-      style={({ pressed }) => pressed && styles.pressed}
-    >
-      <Text style={[styles.text, { color: colors.colorInteractiveOnBg }, style]}>
-        {children}
-      </Text>
-    </Pressable>
-  );
-}

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

@@ -1,24 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Loading } from './Loading.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Loading (native)', () => {
-  it('has progressbar role', () => {
-    renderWithTheme(<Loading />);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-  });
-
-  it('has default accessible label "Loading"', () => {
-    renderWithTheme(<Loading />);
-    expect(screen.getByRole('progressbar', { name: 'Loading' })).toBeInTheDocument();
-  });
-
-  it('accepts a custom accessibilityLabel', () => {
-    renderWithTheme(<Loading accessibilityLabel="Laden…" />);
-    expect(screen.getByRole('progressbar', { name: 'Laden…' })).toBeInTheDocument();
-  });
-});

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Loading } from './Loading.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Loading',
-  component: Loading,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
-  },
-} satisfies Meta<typeof Loading>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Small: Story = { args: { size: 'small' } };
-export const Medium: Story = { args: { size: 'medium' } };
-export const Large: Story = { args: { size: 'large' } };
-export const AllSizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
-      <Loading size="small" />
-      <Loading size="medium" />
-      <Loading size="large" />
-    </div>
-  ),
-};