@boostdev/design-system-components 2.4.1 → 2.5.0

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

@@ -1,72 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Table.native.stories';
-
-<Meta of={Stories} />
-
-# Table (React Native)
-
-React Native table component for displaying structured data in rows and columns. Supports optional sortable columns, captions, and horizontal scrolling for wide tables. Alternating row backgrounds improve readability.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { Table } from '@boostdev/design-system-components';
-
-<Table
-  columns={[
-    { key: 'name', header: 'Name' },
-    { key: 'email', header: 'Email' },
-  ]}
-  rows={[
-    { name: 'Alice', email: 'alice@example.com' },
-    { name: 'Bob', email: 'bob@example.com' },
-  ]}
-/>
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With caption
-<Canvas of={Stories.WithCaption} />
-
-### Sortable columns
-<Canvas of={Stories.Sortable} />
-
-### Empty table
-<Canvas of={Stories.Empty} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `columns` | `TableColumn<Row>[]` | -- | Column definitions |
-| `rows` | `Row[]` | -- | Data rows |
-| `caption` | `string` | -- | Optional table caption |
-| `sortKey` | `string` | -- | Currently sorted column key |
-| `sortDirection` | `"asc" \| "desc"` | -- | Current sort direction |
-| `onSort` | `(key: string, direction: "asc" \| "desc") => void` | -- | Called when a sortable header is pressed |
-| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the scroll wrapper |
-
-### TableColumn
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `key` | `string` | Column key matching row property |
-| `header` | `ReactNode` | Header cell content |
-| `sortable` | `boolean` | Enables sort button on header |
-| `render` | `(row: Row) => ReactNode` | Custom cell renderer |
-
-## Accessibility
-
-- Sortable headers have `button` role with descriptive labels
-- Sort indicators are hidden from the accessibility tree
-- Table scrolls horizontally when content exceeds the viewport width

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

@@ -1,83 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Table } from './Table.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-const columns = [
-  { key: 'name', header: 'Name' },
-  { key: 'age', header: 'Age' },
-];
-
-const rows = [
-  { name: 'Alice', age: 29 },
-  { name: 'Bob', age: 34 },
-];
-
-describe('Table (native)', () => {
-  it('renders column headers', () => {
-    renderWithTheme(<Table columns={columns} rows={rows} />);
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Age')).toBeInTheDocument();
-  });
-
-  it('renders row data', () => {
-    renderWithTheme(<Table columns={columns} rows={rows} />);
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-    expect(screen.getByText('29')).toBeInTheDocument();
-    expect(screen.getByText('Bob')).toBeInTheDocument();
-    expect(screen.getByText('34')).toBeInTheDocument();
-  });
-
-  it('renders a caption when provided', () => {
-    renderWithTheme(<Table columns={columns} rows={rows} caption="Team" />);
-    expect(screen.getByText('Team')).toBeInTheDocument();
-  });
-
-  it('renders an empty table without errors', () => {
-    renderWithTheme(<Table columns={columns} rows={[]} />);
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Age')).toBeInTheDocument();
-  });
-
-  it('calls onSort when a sortable column header is pressed', () => {
-    const onSort = vi.fn();
-    const sortableColumns = [
-      { key: 'name', header: 'Name', sortable: true },
-      { key: 'age', header: 'Age' },
-    ];
-    renderWithTheme(
-      <Table columns={sortableColumns} rows={rows} onSort={onSort} />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: /Sort by Name/ }));
-    expect(onSort).toHaveBeenCalledWith('name', 'asc');
-  });
-
-  it('toggles sort direction on subsequent presses', () => {
-    const onSort = vi.fn();
-    const sortableColumns = [
-      { key: 'name', header: 'Name', sortable: true },
-    ];
-    renderWithTheme(
-      <Table
-        columns={sortableColumns}
-        rows={rows}
-        sortKey="name"
-        sortDirection="asc"
-        onSort={onSort}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: /Sort by Name/ }));
-    expect(onSort).toHaveBeenCalledWith('name', 'desc');
-  });
-
-  it('uses custom render function for cells', () => {
-    const customColumns = [
-      { key: 'name', header: 'Name', render: (row: { name: string }) => `Mr. ${row.name}` },
-    ];
-    renderWithTheme(<Table columns={customColumns} rows={[{ name: 'Alice' }]} />);
-    expect(screen.getByText('Mr. Alice')).toBeInTheDocument();
-  });
-});

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Table } from './Table.native';
-
-interface Person { name: string; role: string; age: number }
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Table',
-  component: Table<Person>,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Table<Person>>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const columns = [
-  { key: 'name', header: 'Name' },
-  { key: 'role', header: 'Role' },
-  { key: 'age', header: 'Age' },
-];
-
-const rows: Person[] = [
-  { name: 'Alice Johnson', role: 'Engineer', age: 29 },
-  { name: 'Bob Smith', role: 'Designer', age: 34 },
-  { name: 'Carol White', role: 'Manager', age: 41 },
-  { name: 'Dave Brown', role: 'Analyst', age: 26 },
-];
-
-export const Default: Story = {
-  args: { columns, rows },
-};
-
-export const WithCaption: Story = {
-  args: { columns, rows, caption: 'Team Members' },
-};
-
-export const Sortable: Story = {
-  args: {
-    columns: [
-      { key: 'name', header: 'Name', sortable: true },
-      { key: 'role', header: 'Role' },
-      { key: 'age', header: 'Age', sortable: true },
-    ],
-    rows,
-    sortKey: 'name',
-    sortDirection: 'asc',
-  },
-};
-
-export const Empty: Story = {
-  args: { columns, rows: [] },
-};

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

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

@@ -1,65 +0,0 @@
-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/design-system-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

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

@@ -1,57 +0,0 @@
-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> },
-    ],
-  },
-};