@boostdev/design-system-components 1.2.2 → 1.2.4

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

@@ -0,0 +1,53 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Collapsible.native.stories';
+
+<Meta of={Stories} />
+
+# Collapsible (React Native)
+
+React Native collapsible section with an animated chevron and smooth expand/collapse transitions. Supports both controlled and uncontrolled modes.
+
+> **Status: alpha** -- API may change before stable release.
+
+## Usage
+
+```tsx
+import { Collapsible } from '@boostdev/components';
+
+<Collapsible summary="More details">
+  <Text>Hidden content revealed on press.</Text>
+</Collapsible>
+```
+
+## Examples
+
+### Default (collapsed)
+<Canvas of={Stories.Default} />
+
+### Default open
+<Canvas of={Stories.DefaultOpen} />
+
+### Multiple sections
+<Canvas of={Stories.Multiple} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `summary` | `string` | -- | The trigger label, always visible |
+| `children` | `ReactNode` | -- | Content revealed when expanded |
+| `open` | `boolean` | -- | Controlled open state |
+| `defaultOpen` | `boolean` | `false` | Uncontrolled initial open state |
+| `onToggle` | `(open: boolean) => void` | -- | Called after each toggle with the new open state |
+| `name` | `string` | -- | Grouping name (informational in native) |
+| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the container |
+
+## Accessibility
+
+- Header has `button` role with `expanded` state
+- Chevron icon is hidden from the accessibility tree
+- Content appears/disappears with LayoutAnimation for smooth transitions

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

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

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

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

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

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

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

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

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

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

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

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