@boostdev/design-system-components 1.2.3 → 1.2.4

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { ProgressCircle } from './ProgressCircle.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/ProgressCircle',
+  component: ProgressCircle,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+  },
+} satisfies Meta<typeof ProgressCircle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 60, label: 'Progress' } };
+export const WithValue: Story = { args: { value: 75, label: 'Upload progress', showValue: true } };
+export const Small: Story = { args: { value: 50, label: 'Small progress', size: 'small' } };
+export const Large: Story = { args: { value: 80, label: 'Large progress', size: 'large', showValue: true } };
+export const Complete: Story = { args: { value: 100, label: 'Complete', showValue: true } };
+export const Empty: Story = { args: { value: 0, label: 'Not started', showValue: true } };
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      {(['small', 'medium', 'large'] as const).map(s => (
+        <ProgressCircle key={s} value={65} label={`${s} progress`} size={s} showValue={s !== 'small'} />
+      ))}
+    </div>
+  ),
+};

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

@@ -0,0 +1,176 @@
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import { font } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type ProgressCircleSize = 'small' | 'medium' | 'large';
+
+interface ProgressCircleProps {
+  value: number;
+  max?: number;
+  size?: ProgressCircleSize;
+  label: string;
+  showValue?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZE_PX: Record<ProgressCircleSize, number> = {
+  small: 40,
+  medium: 64,
+  large: 96,
+};
+
+const STROKE_WIDTH: Record<ProgressCircleSize, number> = {
+  small: 3,
+  medium: 4,
+  large: 5,
+};
+
+const FONT_SIZE: Record<ProgressCircleSize, number> = {
+  small: font.size.bodyS - 2,
+  medium: font.size.bodyS,
+  large: font.size.body,
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  valueText: {
+    position: 'absolute',
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+  },
+});
+
+function HalfCircle({
+  size,
+  stroke,
+  color,
+  rotation,
+}: {
+  size: number;
+  stroke: number;
+  color: string;
+  rotation: number;
+}) {
+  return (
+    <View
+      style={{
+        width: size / 2,
+        height: size,
+        overflow: 'hidden',
+      }}
+    >
+      <View
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: stroke,
+          borderColor: color,
+          transform: [{ rotate: `${rotation}deg` }],
+        }}
+      />
+    </View>
+  );
+}
+
+export function ProgressCircle({
+  value,
+  max = 100,
+  size = 'medium',
+  label,
+  showValue = false,
+  style,
+}: Readonly<ProgressCircleProps>) {
+  const { colors } = useTheme();
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+  const px = SIZE_PX[size];
+  const stroke = STROKE_WIDTH[size];
+  const fillColor = colors.colorInteractive;
+  const trackColor = colors.colorBgSubtle;
+
+  // Convert percentage to degrees (0-360)
+  const degrees = (percentage / 100) * 360;
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        { width: px, height: px },
+        style,
+      ]}
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      accessibilityValue={{ min: 0, max, now: value }}
+    >
+      {/* Track: full circle background */}
+      <View
+        style={{
+          position: 'absolute',
+          width: px,
+          height: px,
+          borderRadius: px / 2,
+          borderWidth: stroke,
+          borderColor: trackColor,
+        }}
+      />
+
+      {/* Fill: right half (0-180°) */}
+      <View
+        style={{
+          position: 'absolute',
+          width: px / 2,
+          height: px,
+          start: px / 2,
+          overflow: 'hidden',
+        }}
+      >
+        <HalfCircle
+          size={px}
+          stroke={stroke}
+          color={percentage > 0 ? fillColor : 'transparent'}
+          rotation={Math.min(degrees, 180) - 180}
+        />
+      </View>
+
+      {/* Fill: left half (180-360°) */}
+      {degrees > 180 && (
+        <View
+          style={{
+            position: 'absolute',
+            width: px / 2,
+            height: px,
+            start: 0,
+            overflow: 'hidden',
+          }}
+        >
+          <View
+            style={{
+              position: 'absolute',
+              end: 0,
+            }}
+          >
+            <HalfCircle
+              size={px}
+              stroke={stroke}
+              color={fillColor}
+              rotation={Math.min(degrees - 180, 180)}
+            />
+          </View>
+        </View>
+      )}
+
+      {showValue && (
+        <Text
+          style={[styles.valueText, { fontSize: FONT_SIZE[size], color: colors.colorOnBg }]}
+          importantForAccessibility="no"
+          accessibilityElementsHidden={true}
+        >
+          {Math.round(percentage)}%
+        </Text>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Separator } from './Separator.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Separator (native)', () => {
+  it('renders with presentation role', () => {
+    const { container } = renderWithTheme(<Separator />);
+    const element = container.firstChild as HTMLElement;
+    // react-native-web maps accessibilityRole="none" to role="presentation"
+    expect(element).toHaveAttribute('role', 'presentation');
+  });
+
+  it('renders a single element', () => {
+    const { container } = renderWithTheme(<Separator />);
+    expect(container.firstChild).toBeInTheDocument();
+    expect(container.childElementCount).toBe(1);
+  });
+
+  it('renders differently for vertical orientation', () => {
+    const { container: hContainer } = renderWithTheme(<Separator />);
+    const { container: vContainer } = renderWithTheme(<Separator orientation="vertical" />);
+    const hEl = hContainer.firstChild as HTMLElement;
+    const vEl = vContainer.firstChild as HTMLElement;
+    // Both render but with distinct class/style sets
+    expect(hEl.className).not.toBe(vEl.className);
+  });
+
+  it('applies custom style', () => {
+    const { container } = renderWithTheme(
+      <Separator style={{ marginTop: 16 }} />,
+    );
+    const element = container.firstChild as HTMLElement;
+    expect(element.style.marginTop).toBe('16px');
+  });
+});

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

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/UI/Separator',
   component: Separator,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
   argTypes: {
     orientation: { control: 'select', options: ['horizontal', 'vertical'] },
@@ -19,24 +19,20 @@ type Story = StoryObj<typeof meta>;
 
 export const Horizontal: Story = {
   render: (args) => (
-    <ThemeProvider>
-      <div style={{ width: 300 }}>
-        <Separator {...args} orientation="horizontal" />
-      </div>
-    </ThemeProvider>
+    <div style={{ width: 300 }}>
+      <Separator {...args} orientation="horizontal" />
+    </div>
   ),
 };
 
 export const Vertical: Story = {
   render: (args) => (
-    <ThemeProvider>
-      <div style={{ display: 'flex', height: 60, alignItems: 'stretch' }}>
-        <span>Left</span>
-        <div style={{ display: 'flex', margin: '0 8px' }}>
-          <Separator {...args} orientation="vertical" />
-        </div>
-        <span>Right</span>
+    <div style={{ display: 'flex', height: 60, alignItems: 'stretch' }}>
+      <span>Left</span>
+      <div style={{ display: 'flex', margin: '0 8px' }}>
+        <Separator {...args} orientation="vertical" />
       </div>
-    </ThemeProvider>
+      <span>Right</span>
+    </div>
   ),
 };

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

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Skeleton } from './Skeleton.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Skeleton (native)', () => {
+  it('renders without crashing', () => {
+    const { container } = renderWithTheme(<Skeleton />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('marks content as not important for accessibility', () => {
+    const { container } = renderWithTheme(<Skeleton />);
+    const element = container.firstChild as HTMLElement;
+    // importantForAccessibility="no-hide-descendants" hides descendants from a11y tree
+    // In react-native-web this renders as aria-hidden on the element
+    expect(element).toBeTruthy();
+    // The element should not have any accessible role
+    expect(element.getAttribute('role')).toBeNull();
+  });
+
+  it('applies custom style', () => {
+    const { container } = renderWithTheme(
+      <Skeleton style={{ width: 200, height: 20 }} />,
+    );
+    const element = container.firstChild as HTMLElement;
+    expect(element.style.width).toBe('200px');
+    expect(element.style.height).toBe('20px');
+  });
+
+  it('has a background color from the theme', () => {
+    const { container } = renderWithTheme(<Skeleton />);
+    const element = container.firstChild as HTMLElement;
+    expect(element.style.backgroundColor).toBeTruthy();
+  });
+});

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

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/UI/Skeleton',
   component: Skeleton,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
 } satisfies Meta<typeof Skeleton>;
 
@@ -22,12 +22,10 @@ export const Avatar: Story = {
 };
 export const Card: Story = {
   render: () => (
-    <ThemeProvider>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: 280 }}>
-        <Skeleton style={{ width: 280, height: 160 }} />
-        <Skeleton style={{ width: 200, height: 16 }} />
-        <Skeleton style={{ width: 140, height: 14 }} />
-      </div>
-    </ThemeProvider>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: 280 }}>
+      <Skeleton style={{ width: 280, height: 160 }} />
+      <Skeleton style={{ width: 200, height: 16 }} />
+      <Skeleton style={{ width: 140, height: 14 }} />
+    </div>
   ),
 };

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
 interface SkeletonProps {
@@ -8,7 +9,7 @@ interface SkeletonProps {
 
 const styles = StyleSheet.create({
   skeleton: {
-    borderRadius: 4,
+    borderRadius: border.radius.xs,
     overflow: 'hidden',
   },
 });

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

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

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

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