@boostdev/design-system-components 2.4.2 → 2.5.0

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

@@ -1,29 +0,0 @@
-import { ActivityIndicator, StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../../native/ThemeContext';
-
-type LoadingSize = 'small' | 'medium' | 'large';
-
-interface LoadingProps {
-  size?: LoadingSize;
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const rnSize: Record<LoadingSize, 'small' | 'large'> = {
-  small:  'small',
-  medium: 'large',
-  large:  'large',
-};
-
-export function Loading({ size = 'medium', accessibilityLabel = 'Loading', style }: LoadingProps) {
-  const { colors } = useTheme();
-  return (
-    <ActivityIndicator
-      size={rnSize[size]}
-      color={colors.colorInteractive}
-      style={style}
-      accessibilityRole="progressbar"
-      accessibilityLabel={accessibilityLabel}
-    />
-  );
-}

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

@@ -1,85 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Text } from 'react-native';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { NotificationBanner } from './NotificationBanner.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('NotificationBanner (native)', () => {
-  it('renders children text', () => {
-    renderWithTheme(<NotificationBanner>Update available</NotificationBanner>);
-    expect(screen.getByText('Update available')).toBeInTheDocument();
-  });
-
-  it('has alert role for error variant', () => {
-    renderWithTheme(
-      <NotificationBanner variant="error">Something went wrong</NotificationBanner>,
-    );
-    expect(screen.getByRole('alert')).toBeInTheDocument();
-  });
-
-  it('has alert role for warning variant', () => {
-    renderWithTheme(
-      <NotificationBanner variant="warning">Attention needed</NotificationBanner>,
-    );
-    expect(screen.getByRole('alert')).toBeInTheDocument();
-  });
-
-  it('does not have alert role for info variant', () => {
-    renderWithTheme(
-      <NotificationBanner variant="info">FYI</NotificationBanner>,
-    );
-    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-  });
-
-  it('does not have alert role for success variant', () => {
-    renderWithTheme(
-      <NotificationBanner variant="success">All good</NotificationBanner>,
-    );
-    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-  });
-
-  it('renders an action element when provided', () => {
-    renderWithTheme(
-      <NotificationBanner action={<Text>Retry</Text>}>
-        Failed to save
-      </NotificationBanner>,
-    );
-    expect(screen.getByText('Retry')).toBeInTheDocument();
-    expect(screen.getByText('Failed to save')).toBeInTheDocument();
-  });
-
-  it('renders a dismiss button when onDismiss is provided', () => {
-    renderWithTheme(
-      <NotificationBanner onDismiss={() => {}}>Dismissable</NotificationBanner>,
-    );
-    expect(
-      screen.getByRole('button', { name: 'Dismiss notification' }),
-    ).toBeInTheDocument();
-  });
-
-  it('calls onDismiss when dismiss button is pressed', () => {
-    const onDismiss = vi.fn();
-    renderWithTheme(
-      <NotificationBanner onDismiss={onDismiss}>Dismissable</NotificationBanner>,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss notification' }));
-    expect(onDismiss).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not render a dismiss button when onDismiss is omitted', () => {
-    renderWithTheme(<NotificationBanner>No dismiss</NotificationBanner>);
-    expect(
-      screen.queryByRole('button', { name: 'Dismiss notification' }),
-    ).not.toBeInTheDocument();
-  });
-
-  it('accepts custom style', () => {
-    renderWithTheme(
-      <NotificationBanner style={{ marginTop: 10 }}>Styled</NotificationBanner>,
-    );
-    expect(screen.getByText('Styled')).toBeInTheDocument();
-  });
-});

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

@@ -1,37 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { NotificationBanner } from './NotificationBanner.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/NotificationBanner',
-  component: NotificationBanner,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    variant: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
-  },
-} satisfies Meta<typeof NotificationBanner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Info: Story = { args: { children: 'New update available.', variant: 'info' } };
-export const Success: Story = { args: { children: 'Changes saved successfully.', variant: 'success' } };
-export const Warning: Story = { args: { children: 'Your session will expire soon.', variant: 'warning' } };
-export const Error: Story = { args: { children: 'Failed to load data. Please retry.', variant: 'error' } };
-export const Dismissible: Story = {
-  args: { children: 'You can dismiss this notification.', variant: 'info', onDismiss: () => {} },
-};
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-      {(['info', 'success', 'warning', 'error'] as const).map(v => (
-        <NotificationBanner key={v} variant={v}>
-          {v.charAt(0).toUpperCase() + v.slice(1)} notification
-        </NotificationBanner>
-      ))}
-    </div>
-  ),
-};

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

@@ -1,76 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type BannerVariant = 'info' | 'success' | 'warning' | 'error';
-
-interface NotificationBannerProps {
-  variant?: BannerVariant;
-  children: ReactNode;
-  action?: ReactNode;
-  onDismiss?: () => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  banner: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: spacing.s,
-    paddingHorizontal: spacing.m,
-    gap: spacing.xs,
-  },
-  content: {
-    flex: 1,
-    fontSize: font.size.bodyS,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.bodyS,
-  },
-  dismiss: {
-    padding: spacing.xxs,
-    flexShrink: 0,
-  },
-});
-
-export function NotificationBanner({
-  variant = 'info',
-  children,
-  action,
-  onDismiss,
-  style,
-}: Readonly<NotificationBannerProps>) {
-  const { colors } = useTheme();
-  const isUrgent = variant === 'error' || variant === 'warning';
-
-  const variantColors: Record<BannerVariant, { bg: string; text: string; border: string }> = {
-    info:    { bg: colors.colorBlueSubtle,    text: colors.colorOnBlueSubtle,    border: colors.colorBlue },
-    success: { bg: colors.colorSuccessSubtle, text: colors.colorOnSuccessSubtle, border: colors.colorSuccess },
-    warning: { bg: colors.colorOrangeSubtle,  text: colors.colorOnOrangeSubtle,  border: colors.colorWarning },
-    error:   { bg: colors.colorRedSubtle,     text: colors.colorOnBg,            border: colors.colorError },
-  };
-
-  const { bg, text, border: borderColor } = variantColors[variant];
-
-  return (
-    <View
-      accessibilityRole={isUrgent ? 'alert' : 'none'}
-      accessibilityLiveRegion={isUrgent ? 'assertive' : 'polite'}
-      style={[styles.banner, { backgroundColor: bg, borderBottomWidth: 3, borderBottomColor: borderColor }, style]}
-    >
-      <Text style={[styles.content, { color: text }]}>{children}</Text>
-      {action}
-      {onDismiss && (
-        <Pressable
-          onPress={onDismiss}
-          style={styles.dismiss}
-          accessibilityLabel="Dismiss notification"
-          accessibilityRole="button"
-          hitSlop={8}
-        >
-          <Text style={{ color: text, fontSize: 16 }}>✕</Text>
-        </Pressable>
-      )}
-    </View>
-  );
-}

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

@@ -1,62 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Pagination.native.stories';
-
-<Meta of={Stories} />
-
-# Pagination (React Native)
-
-React Native pagination component for navigating between pages of content. Shows page numbers with ellipsis for large ranges, with Previous/Next navigation buttons.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { Pagination } from '@boostdev/design-system-components';
-
-<Pagination
-  currentPage={3}
-  totalPages={10}
-  onPageChange={(page) => setPage(page)}
-/>
-```
-
-## Examples
-
-### Default (first page)
-<Canvas of={Stories.Default} />
-
-### Middle page
-<Canvas of={Stories.MiddlePage} />
-
-### Last page
-<Canvas of={Stories.LastPage} />
-
-### Many pages (with ellipsis)
-<Canvas of={Stories.ManyPages} />
-
-### Single page
-<Canvas of={Stories.SinglePage} />
-
-### Interactive
-<Canvas of={Stories.Interactive} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `currentPage` | `number` | -- | The currently active page (1-based) |
-| `totalPages` | `number` | -- | Total number of pages |
-| `onPageChange` | `(page: number) => void` | -- | Called when a page button is pressed |
-| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the container |
-
-## Accessibility
-
-- Container has `navigation` role with "Pagination" label
-- Previous/Next buttons are disabled at bounds
-- Active page is indicated with `selected` accessibility state
-- Each page button has a descriptive label (e.g. "Page 3")

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

@@ -1,86 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Pagination } from './Pagination.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Pagination (native)', () => {
-  it('renders the navigation container', () => {
-    renderWithTheme(
-      <Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />,
-    );
-    expect(screen.getByRole('navigation', { name: 'Pagination' })).toBeInTheDocument();
-  });
-
-  it('renders page buttons', () => {
-    renderWithTheme(
-      <Pagination currentPage={1} totalPages={3} onPageChange={() => {}} />,
-    );
-    expect(screen.getByRole('button', { name: 'Page 1' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Page 2' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Page 3' })).toBeInTheDocument();
-  });
-
-  it('renders the current page button', () => {
-    renderWithTheme(
-      <Pagination currentPage={2} totalPages={3} onPageChange={() => {}} />,
-    );
-    expect(screen.getByRole('button', { name: 'Page 2' })).toBeInTheDocument();
-  });
-
-  it('disables Previous on first page', () => {
-    renderWithTheme(
-      <Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />,
-    );
-    expect(screen.getByRole('button', { name: 'Previous page' })).toHaveAttribute(
-      'aria-disabled',
-      'true',
-    );
-  });
-
-  it('disables Next on last page', () => {
-    renderWithTheme(
-      <Pagination currentPage={5} totalPages={5} onPageChange={() => {}} />,
-    );
-    expect(screen.getByRole('button', { name: 'Next page' })).toHaveAttribute(
-      'aria-disabled',
-      'true',
-    );
-  });
-
-  it('calls onPageChange with the next page when Next is pressed', () => {
-    const onPageChange = vi.fn();
-    renderWithTheme(
-      <Pagination currentPage={2} totalPages={5} onPageChange={onPageChange} />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Next page' }));
-    expect(onPageChange).toHaveBeenCalledWith(3);
-  });
-
-  it('calls onPageChange with the previous page when Previous is pressed', () => {
-    const onPageChange = vi.fn();
-    renderWithTheme(
-      <Pagination currentPage={3} totalPages={5} onPageChange={onPageChange} />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Previous page' }));
-    expect(onPageChange).toHaveBeenCalledWith(2);
-  });
-
-  it('calls onPageChange when a page number is pressed', () => {
-    const onPageChange = vi.fn();
-    renderWithTheme(
-      <Pagination currentPage={1} totalPages={5} onPageChange={onPageChange} />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Page 2' }));
-    expect(onPageChange).toHaveBeenCalledWith(2);
-  });
-
-  it('shows ellipsis for large page ranges', () => {
-    renderWithTheme(
-      <Pagination currentPage={5} totalPages={20} onPageChange={() => {}} />,
-    );
-    expect(screen.getAllByText('...').length).toBeGreaterThanOrEqual(1);
-  });
-});

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

@@ -1,47 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Pagination } from './Pagination.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Pagination',
-  component: Pagination,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Pagination>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { currentPage: 1, totalPages: 5 },
-};
-
-export const MiddlePage: Story = {
-  args: { currentPage: 3, totalPages: 5 },
-};
-
-export const LastPage: Story = {
-  args: { currentPage: 5, totalPages: 5 },
-};
-
-export const ManyPages: Story = {
-  args: { currentPage: 5, totalPages: 20 },
-};
-
-export const SinglePage: Story = {
-  args: { currentPage: 1, totalPages: 1 },
-};
-
-function InteractiveDemo() {
-  const [page, setPage] = useState(1);
-  return (
-    <Pagination currentPage={page} totalPages={10} onPageChange={setPage} />
-  );
-}
-
-export const Interactive: Story = {
-  args: { currentPage: 1, totalPages: 10 },
-  render: () => <InteractiveDemo />,
-};

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

@@ -1,157 +0,0 @@
-import { AccessibilityRole, StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-function getPageRange(current: number, total: number): (number | '...')[] {
-  const delta = 1;
-  const range: (number | '...')[] = [];
-
-  for (let i = 1; i <= total; i++) {
-    if (i === 1 || i === total || (i >= current - delta && i <= current + delta)) {
-      range.push(i);
-    } else if (range[range.length - 1] !== '...') {
-      range.push('...');
-    }
-  }
-
-  return range;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.xxs,
-  },
-  button: {
-    minWidth: 44,
-    minHeight: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: border.radius.full,
-    paddingHorizontal: spacing.xs,
-    paddingVertical: spacing.xxs,
-  },
-  buttonText: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.body,
-    fontWeight: font.weight.body,
-  },
-  navText: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.body,
-    fontWeight: font.weight.semibold,
-  },
-  ellipsis: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.body,
-    minWidth: 44,
-    minHeight: 44,
-    textAlign: 'center',
-    textAlignVertical: 'center',
-  },
-  pressed: {
-    opacity: 0.75,
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-});
-
-export function Pagination({
-  currentPage,
-  totalPages,
-  onPageChange,
-  style,
-}: Readonly<PaginationProps>) {
-  const { colors } = useTheme();
-  const pages = getPageRange(currentPage, totalPages);
-
-  return (
-    <View
-      style={[styles.container, style]}
-      accessibilityRole={'navigation' as AccessibilityRole}
-      accessibilityLabel="Pagination"
-    >
-      <Pressable
-        onPress={() => onPageChange(currentPage - 1)}
-        disabled={currentPage <= 1}
-        accessibilityRole="button"
-        accessibilityLabel="Previous page"
-        accessibilityState={{ disabled: currentPage <= 1 }}
-        style={({ pressed }) => [
-          styles.button,
-          currentPage <= 1 && styles.disabled,
-          pressed && !currentPage && styles.pressed,
-        ]}
-      >
-        <Text style={[styles.navText, { color: colors.colorOnBg }]}>‹</Text>
-      </Pressable>
-
-      {pages.map((page, index) =>
-        page === '...' ? (
-          <Text
-            key={`ellipsis-${index}`}
-            style={[styles.ellipsis, { color: colors.colorOnBgSubtle }]}
-            importantForAccessibility="no"
-            accessibilityElementsHidden={true}
-          >
-            ...
-          </Text>
-        ) : (
-          <Pressable
-            key={page}
-            onPress={() => onPageChange(page)}
-            accessibilityRole="button"
-            accessibilityLabel={`Page ${page}`}
-            accessibilityState={{ selected: currentPage === page }}
-            style={({ pressed }) => [
-              styles.button,
-              currentPage === page && { backgroundColor: colors.colorInteractive },
-              pressed && styles.pressed,
-            ]}
-          >
-            <Text
-              style={[
-                styles.buttonText,
-                {
-                  color: currentPage === page
-                    ? colors.colorOnInteractive
-                    : colors.colorOnBg,
-                },
-                currentPage === page && { fontWeight: font.weight.semibold },
-              ]}
-            >
-              {page}
-            </Text>
-          </Pressable>
-        ),
-      )}
-
-      <Pressable
-        onPress={() => onPageChange(currentPage + 1)}
-        disabled={currentPage >= totalPages}
-        accessibilityRole="button"
-        accessibilityLabel="Next page"
-        accessibilityState={{ disabled: currentPage >= totalPages }}
-        style={({ pressed }) => [
-          styles.button,
-          currentPage >= totalPages && styles.disabled,
-          pressed && styles.pressed,
-        ]}
-      >
-        <Text style={[styles.navText, { color: colors.colorOnBg }]}>›</Text>
-      </Pressable>
-    </View>
-  );
-}

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

@@ -1,56 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Progress } from './Progress.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Progress (native)', () => {
-  it('has progressbar role with accessible label', () => {
-    renderWithTheme(<Progress value={50} label="Upload progress" />);
-    expect(screen.getByRole('progressbar', { name: 'Upload progress' })).toBeInTheDocument();
-  });
-
-  it('renders progressbar for various values', () => {
-    renderWithTheme(<Progress value={30} max={100} label="Loading" />);
-    expect(screen.getByRole('progressbar', { name: 'Loading' })).toBeInTheDocument();
-  });
-
-  it('respects a custom max value in percentage display', () => {
-    renderWithTheme(<Progress value={5} max={10} label="Steps" showLabel />);
-    expect(screen.getByText('50%')).toBeInTheDocument();
-  });
-
-  it('does not show label by default', () => {
-    renderWithTheme(<Progress value={60} label="Progress" />);
-    expect(screen.queryByText('Progress')).not.toBeInTheDocument();
-    expect(screen.queryByText('60%')).not.toBeInTheDocument();
-  });
-
-  it('shows label text and percentage when showLabel is true', () => {
-    renderWithTheme(<Progress value={60} label="Progress" showLabel />);
-    expect(screen.getByText('Progress')).toBeInTheDocument();
-    expect(screen.getByText('60%')).toBeInTheDocument();
-  });
-
-  it('clamps percentage display at 100%', () => {
-    renderWithTheme(<Progress value={150} max={100} label="Overflow" showLabel />);
-    expect(screen.getByText('100%')).toBeInTheDocument();
-  });
-
-  it('clamps percentage display at 0%', () => {
-    renderWithTheme(<Progress value={-10} max={100} label="Underflow" showLabel />);
-    expect(screen.getByText('0%')).toBeInTheDocument();
-  });
-
-  it('rounds the percentage to the nearest integer', () => {
-    renderWithTheme(<Progress value={33} max={100} label="Loading" showLabel />);
-    expect(screen.getByText('33%')).toBeInTheDocument();
-  });
-
-  it('defaults to medium size', () => {
-    renderWithTheme(<Progress value={50} label="Loading" />);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-  });
-});

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Progress } from './Progress.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Progress',
-  component: Progress,
-  decorators: [
-    (Story) => (
-      <ThemeProvider colorScheme="light">
-        <div style={{ width: 300 }}>
-          <Story />
-        </div>
-      </ThemeProvider>
-    ),
-  ],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
-    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
-  },
-} satisfies Meta<typeof Progress>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = { args: { value: 60, label: 'Progress' } };
-export const WithLabel: Story = { args: { value: 40, label: 'Loading', showLabel: true } };
-export const Small: Story = { args: { value: 70, label: 'Small progress', size: 'small' } };
-export const Large: Story = { args: { value: 50, label: 'Large progress', size: 'large', showLabel: true } };
-export const Complete: Story = { args: { value: 100, label: 'Complete', showLabel: true } };
-export const Empty: Story = { args: { value: 0, label: 'Not started', showLabel: true } };