@boostdev/design-system-components 1.2.3 → 1.2.4

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

@@ -0,0 +1,196 @@
+import { ReactNode } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  ScrollView,
+  Pressable,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, border, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+export interface TableColumn<Row> {
+  key: string;
+  header: ReactNode;
+  sortable?: boolean;
+  render?: (row: Row) => ReactNode;
+}
+
+interface TableProps<Row extends Record<string, unknown>> {
+  columns: TableColumn<Row>[];
+  rows: Row[];
+  caption?: string;
+  sortKey?: string;
+  sortDirection?: 'asc' | 'desc';
+  onSort?: (key: string, direction: 'asc' | 'desc') => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: border.radius.s,
+    overflow: 'hidden',
+  },
+  caption: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.bodyS,
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.m,
+  },
+  headerRow: {
+    flexDirection: 'row',
+  },
+  headerCell: {
+    flex: 1,
+    minWidth: 100,
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xxs,
+  },
+  headerText: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    lineHeight: lineHeight.bodyS,
+  },
+  sortIndicator: {
+    fontSize: font.size.bodyS,
+  },
+  row: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    minHeight: 44,
+  },
+  cell: {
+    flex: 1,
+    minWidth: 100,
+    paddingVertical: spacing.s,
+    paddingHorizontal: spacing.m,
+    justifyContent: 'center',
+  },
+  cellText: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    fontWeight: font.weight.body,
+    lineHeight: lineHeight.body,
+  },
+  pressed: {
+    opacity: 0.75,
+  },
+});
+
+export function Table<Row extends Record<string, unknown>>({
+  columns,
+  rows,
+  caption,
+  sortKey,
+  sortDirection,
+  onSort,
+  style,
+}: Readonly<TableProps<Row>>) {
+  const { colors } = useTheme();
+
+  const handleSort = (key: string) => {
+    if (!onSort) return;
+    const nextDirection = sortKey === key && sortDirection === 'asc' ? 'desc' : 'asc';
+    onSort(key, nextDirection);
+  };
+
+  const getSortLabel = (col: TableColumn<Row>): string => {
+    const base = `Sort by ${String(col.header)}`;
+    if (sortKey !== col.key) return base;
+    return `${base}, currently ${sortDirection === 'asc' ? 'ascending' : 'descending'}`;
+  };
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={true}
+      style={[styles.wrapper, { backgroundColor: colors.colorBg }, style]}
+    >
+      <View>
+        {caption && (
+          <Text style={[styles.caption, { color: colors.colorOnBgSubtle }]}>
+            {caption}
+          </Text>
+        )}
+
+        <View style={[styles.headerRow, { backgroundColor: colors.colorBgSubtle }]}>
+          {columns.map(col =>
+            col.sortable ? (
+              <Pressable
+                key={col.key}
+                onPress={() => handleSort(col.key)}
+                accessibilityRole="button"
+                accessibilityLabel={getSortLabel(col)}
+                style={({ pressed }) => [styles.headerCell, pressed && styles.pressed]}
+              >
+                <Text style={[styles.headerText, { color: colors.colorOnBg }]}>
+                  {col.header}
+                </Text>
+                <Text
+                  style={[
+                    styles.sortIndicator,
+                    {
+                      color: sortKey === col.key
+                        ? colors.colorInteractive
+                        : colors.colorOnBgSubtle,
+                    },
+                  ]}
+                  importantForAccessibility="no"
+                  accessibilityElementsHidden={true}
+                >
+                  {sortKey === col.key
+                    ? sortDirection === 'asc' ? '▲' : '▼'
+                    : '▽'}
+                </Text>
+              </Pressable>
+            ) : (
+              <View key={col.key} style={styles.headerCell}>
+                <Text style={[styles.headerText, { color: colors.colorOnBg }]}>
+                  {col.header}
+                </Text>
+              </View>
+            ),
+          )}
+        </View>
+
+        {rows.map((row, rowIndex) => (
+          <View
+            key={rowIndex}
+            style={[
+              styles.row,
+              { borderTopColor: colors.colorBgSubtle },
+              rowIndex % 2 === 1 && { backgroundColor: colors.colorBgSubtle },
+            ]}
+            accessibilityRole="none"
+          >
+            {columns.map(col => (
+              <View key={col.key} style={styles.cell}>
+                {col.render ? (
+                  typeof col.render(row) === 'string' ? (
+                    <Text style={[styles.cellText, { color: colors.colorOnBg }]}>
+                      {col.render(row)}
+                    </Text>
+                  ) : (
+                    col.render(row)
+                  )
+                ) : (
+                  <Text style={[styles.cellText, { color: colors.colorOnBg }]}>
+                    {String(row[col.key] ?? '')}
+                  </Text>
+                )}
+              </View>
+            ))}
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Tabs.native.stories';
+
+<Meta of={Stories} />
+
+# Tabs (React Native)
+
+React Native tabs component with a horizontally scrollable tab bar and content panels. Active tab is indicated with an underline in the interactive color.
+
+> **Status: alpha** -- API may change before stable release.
+
+## Usage
+
+```tsx
+import { Tabs } from '@boostdev/components';
+
+<Tabs
+  tabs={[
+    { id: 'one', label: 'Tab One', content: <Text>Content one</Text> },
+    { id: 'two', label: 'Tab Two', content: <Text>Content two</Text> },
+  ]}
+/>
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With default tab
+<Canvas of={Stories.WithDefaultTab} />
+
+### With disabled tab
+<Canvas of={Stories.WithDisabledTab} />
+
+### Many tabs (scrollable)
+<Canvas of={Stories.ManyTabs} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tabs` | `TabItem[]` | -- | Array of tab definitions |
+| `defaultTab` | `string` | First tab ID | ID of initially active tab |
+| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the container |
+
+### TabItem
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `id` | `string` | Unique identifier |
+| `label` | `ReactNode` | Tab button label |
+| `content` | `ReactNode` | Panel content |
+| `disabled` | `boolean` | Prevents selection |
+
+## Accessibility
+
+- Tab bar uses `tabbar` accessibility role
+- Each tab button uses `tab` role with `selected` state
+- Content area uses `tabpanel` role
+- Disabled tabs have `disabled` accessibility state and reduced opacity

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

@@ -0,0 +1,65 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Tabs } from './Tabs.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+const tabs = [
+  { id: 'one', label: 'Tab One', content: <span>Content One</span> },
+  { id: 'two', label: 'Tab Two', content: <span>Content Two</span> },
+  { id: 'three', label: 'Tab Three', content: <span>Content Three</span> },
+];
+
+describe('Tabs (native)', () => {
+  it('renders all tab labels', () => {
+    renderWithTheme(<Tabs tabs={tabs} />);
+    expect(screen.getByText('Tab One')).toBeInTheDocument();
+    expect(screen.getByText('Tab Two')).toBeInTheDocument();
+    expect(screen.getByText('Tab Three')).toBeInTheDocument();
+  });
+
+  it('shows first tab content by default', () => {
+    renderWithTheme(<Tabs tabs={tabs} />);
+    expect(screen.getByText('Content One')).toBeInTheDocument();
+    expect(screen.queryByText('Content Two')).not.toBeInTheDocument();
+  });
+
+  it('respects defaultTab prop', () => {
+    renderWithTheme(<Tabs tabs={tabs} defaultTab="two" />);
+    expect(screen.queryByText('Content One')).not.toBeInTheDocument();
+    expect(screen.getByText('Content Two')).toBeInTheDocument();
+  });
+
+  it('switches content when a tab is pressed', () => {
+    renderWithTheme(<Tabs tabs={tabs} />);
+    fireEvent.click(screen.getByText('Tab Two'));
+    expect(screen.queryByText('Content One')).not.toBeInTheDocument();
+    expect(screen.getByText('Content Two')).toBeInTheDocument();
+  });
+
+  it('renders tab roles for all tabs', () => {
+    renderWithTheme(<Tabs tabs={tabs} />);
+    expect(screen.getByRole('tab', { name: 'Tab One' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Tab Two' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Tab Three' })).toBeInTheDocument();
+  });
+
+  it('disables tabs with disabled flag', () => {
+    const withDisabled = [
+      ...tabs,
+      { id: 'four', label: 'Disabled Tab', content: <span>Nope</span>, disabled: true },
+    ];
+    renderWithTheme(<Tabs tabs={withDisabled} />);
+    expect(screen.getByRole('tab', { name: 'Disabled Tab' })).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+  });
+
+  it('renders tabpanel role for active content', () => {
+    renderWithTheme(<Tabs tabs={tabs} />);
+    expect(screen.getByRole('tabpanel')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Tabs } from './Tabs.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Tabs',
+  component: Tabs,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleTabs = [
+  { id: 'overview', label: 'Overview', content: <Text>Overview content goes here.</Text> },
+  { id: 'features', label: 'Features', content: <Text>Feature list and descriptions.</Text> },
+  { id: 'pricing', label: 'Pricing', content: <Text>Pricing tiers and plan details.</Text> },
+];
+
+export const Default: Story = {
+  args: {
+    tabs: sampleTabs,
+  },
+};
+
+export const WithDefaultTab: Story = {
+  args: {
+    tabs: sampleTabs,
+    defaultTab: 'features',
+  },
+};
+
+export const WithDisabledTab: Story = {
+  args: {
+    tabs: [
+      ...sampleTabs,
+      { id: 'admin', label: 'Admin', content: <Text>Admin panel.</Text>, disabled: true },
+    ],
+  },
+};
+
+export const ManyTabs: Story = {
+  args: {
+    tabs: [
+      { id: 'home', label: 'Home', content: <Text>Home content</Text> },
+      { id: 'discover', label: 'Discover', content: <Text>Discover content</Text> },
+      { id: 'trending', label: 'Trending', content: <Text>Trending content</Text> },
+      { id: 'saved', label: 'Saved', content: <Text>Saved content</Text> },
+      { id: 'settings', label: 'Settings', content: <Text>Settings content</Text> },
+      { id: 'profile', label: 'Profile', content: <Text>Profile content</Text> },
+    ],
+  },
+};

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

@@ -0,0 +1,133 @@
+import { ReactNode, useState } from 'react';
+import {
+  AccessibilityRole,
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+export interface TabItem {
+  id: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+interface TabsProps {
+  tabs: TabItem[];
+  defaultTab?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  tabList: {
+    flexDirection: 'row',
+    borderBottomWidth: 2,
+  },
+  tabButton: {
+    minHeight: 44,
+    paddingHorizontal: spacing.m,
+    paddingVertical: spacing.s,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 2,
+    marginBottom: -2,
+  },
+  tabLabel: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body,
+  },
+  panel: {
+    paddingVertical: spacing.m,
+  },
+  pressed: {
+    opacity: 0.75,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});
+
+export function Tabs({
+  tabs,
+  defaultTab,
+  style,
+}: Readonly<TabsProps>) {
+  const { colors } = useTheme();
+  const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0]?.id);
+
+  return (
+    <View style={[styles.container, style]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[styles.tabList, { borderBottomColor: colors.colorBgSubtle }]}
+        accessibilityRole="tabbar"
+      >
+        {tabs.map(tab => {
+          const isActive = activeTab === tab.id;
+
+          return (
+            <Pressable
+              key={tab.id}
+              onPress={() => setActiveTab(tab.id)}
+              disabled={tab.disabled}
+              accessibilityRole="tab"
+              accessibilityState={{
+                selected: isActive,
+                disabled: tab.disabled,
+              }}
+              accessibilityLabel={typeof tab.label === 'string' ? tab.label : undefined}
+              style={({ pressed }) => [
+                styles.tabButton,
+                {
+                  borderBottomColor: isActive
+                    ? colors.colorInteractive
+                    : 'transparent',
+                },
+                tab.disabled && styles.disabled,
+                pressed && !tab.disabled && styles.pressed,
+              ]}
+            >
+              <Text
+                style={[
+                  styles.tabLabel,
+                  {
+                    color: isActive
+                      ? colors.colorInteractive
+                      : colors.colorOnBgSubtle,
+                    fontWeight: isActive ? font.weight.semibold : font.weight.body,
+                  },
+                ]}
+              >
+                {tab.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+
+      {tabs.map(tab => {
+        const isActive = activeTab === tab.id;
+
+        if (!isActive) return null;
+
+        return (
+          <View key={tab.id} style={styles.panel} accessibilityRole={'tabpanel' as AccessibilityRole}>
+            {tab.content}
+          </View>
+        );
+      })}
+    </View>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Tooltip.native.stories';
+
+<Meta of={Stories} />
+
+# Tooltip (React Native)
+
+React Native tooltip that appears on long press. Wraps children in a `Pressable` and shows the tooltip content above the trigger element.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Tooltip } from '@boostdev/components';
+import { Text } from 'react-native';
+
+<Tooltip content="Helpful information">
+  <Text>Long press me</Text>
+</Tooltip>
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Long content
+<Canvas of={Stories.LongContent} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `content` | `string` | — | Tooltip text |
+| `children` | `ReactNode` | — | Trigger element |
+| `style` | `StyleProp<ViewStyle>` | — | Override wrapper styles |
+
+## Accessibility
+
+- Tooltip content is exposed via `accessibilityHint` on the pressable trigger
+- When visible, the tooltip view has `accessibilityRole="text"` and `accessibilityLabel`
+- Tooltip appears on long press and dismisses on press out

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

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Tooltip } from './Tooltip.native';
+import { Text } from 'react-native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Tooltip (native)', () => {
+  it('renders children', () => {
+    renderWithTheme(
+      <Tooltip content="Helpful info">
+        <Text>Trigger</Text>
+      </Tooltip>,
+    );
+    expect(screen.getByText('Trigger')).toBeInTheDocument();
+  });
+
+  it('does not show tooltip content by default', () => {
+    renderWithTheme(
+      <Tooltip content="Helpful info">
+        <Text>Trigger</Text>
+      </Tooltip>,
+    );
+    expect(screen.queryByText('Helpful info')).not.toBeInTheDocument();
+  });
+
+  it('renders a wrapper element', () => {
+    const { container } = renderWithTheme(
+      <Tooltip content="Helpful info">
+        <Text>Trigger</Text>
+      </Tooltip>,
+    );
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Tooltip } from './Tooltip.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Tooltip',
+  component: Tooltip,
+  decorators: [
+    (Story) => (
+      <ThemeProvider colorScheme="light">
+        <div style={{ padding: '60px 20px 20px' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: 'Helpful tooltip text',
+    children: <Text>Long press me</Text>,
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    content: 'This is a longer tooltip that provides more detailed information about the element.',
+    children: <Text>Long press for details</Text>,
+  },
+};

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

@@ -0,0 +1,57 @@
+import { ReactNode, useState } from 'react';
+import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, border } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface TooltipProps {
+  content: string;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+  },
+  tooltip: {
+    position: 'absolute',
+    bottom: '100%',
+    start: 0,
+    marginBottom: spacing.xxs,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.xs,
+    borderRadius: border.radius.full,
+    zIndex: 10,
+    alignSelf: 'flex-start',
+  },
+  text: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+  },
+});
+
+export function Tooltip({ content, children, style }: Readonly<TooltipProps>) {
+  const { colors } = useTheme();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      <Pressable
+        onLongPress={() => setVisible(true)}
+        onPressOut={() => setVisible(false)}
+        accessibilityHint={content}
+      >
+        {children}
+      </Pressable>
+      {visible && (
+        <View
+          style={[styles.tooltip, { backgroundColor: colors.colorOnBg }]}
+          accessibilityRole="text"
+          accessibilityLabel={content}
+        >
+          <Text style={[styles.text, { color: colors.colorBg }]}>{content}</Text>
+        </View>
+      )}
+    </View>
+  );
+}