@boostdev/design-system-components 2.4.2 → 2.5.1

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

@@ -1,62 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Alert.native.stories';
-
-<Meta of={Stories} />
-
-# Alert (React Native)
-
-React Native alert component for inline status messages. Supports four semantic variants, an optional title, and a dismissible mode — matching the web `Alert` API.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Alert } from '@boostdev/design-system-components';
-
-<Alert variant="success" title="Saved">
-  Your changes have been saved successfully.
-</Alert>
-```
-
-## Examples
-
-### All variants
-<Canvas of={Stories.AllVariants} />
-
-### Info
-<Canvas of={Stories.Info} />
-
-### Success
-<Canvas of={Stories.Success} />
-
-### Warning
-<Canvas of={Stories.Warning} />
-
-### Error
-<Canvas of={Stories.Error} />
-
-### With title
-<Canvas of={Stories.WithTitle} />
-
-### Dismissible
-<Canvas of={Stories.Dismissible} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"info" \| "success" \| "warning" \| "error"` | `"info"` | Semantic colour and icon |
-| `title` | string | — | Optional heading above body content |
-| `onDismiss` | `() => void` | — | When set, a dismiss button is shown; called on press |
-| `children` | `ReactNode` | — | Alert body content |
-
-## Accessibility
-
-- `error` and `warning` variants announce content as `assertive`
-- `info` and `success` variants announce content as `polite`
-- The dismiss button has a descriptive accessibility label

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

@@ -1,76 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Text } from 'react-native';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Alert } from './Alert.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Alert (native)', () => {
-  it('renders children text', () => {
-    renderWithTheme(<Alert>Something happened</Alert>);
-    expect(screen.getByText('Something happened')).toBeInTheDocument();
-  });
-
-  it('renders the title when provided', () => {
-    renderWithTheme(<Alert title="Heads up">Details here</Alert>);
-    expect(screen.getByText('Heads up')).toBeInTheDocument();
-    expect(screen.getByText('Details here')).toBeInTheDocument();
-  });
-
-  it('does not render a title element when title is omitted', () => {
-    renderWithTheme(<Alert>No title alert</Alert>);
-    expect(screen.getByText('No title alert')).toBeInTheDocument();
-  });
-
-  it('renders an icon when provided', () => {
-    renderWithTheme(
-      <Alert icon={<Text>!</Text>}>With icon</Alert>,
-    );
-    expect(screen.getByText('!')).toBeInTheDocument();
-    expect(screen.getByText('With icon')).toBeInTheDocument();
-  });
-
-  it('has alert role for error variant', () => {
-    renderWithTheme(<Alert variant="error">Error message</Alert>);
-    expect(screen.getByRole('alert')).toBeInTheDocument();
-  });
-
-  it('has alert role for warning variant', () => {
-    renderWithTheme(<Alert variant="warning">Warning message</Alert>);
-    expect(screen.getByRole('alert')).toBeInTheDocument();
-  });
-
-  it('does not have alert role for info variant', () => {
-    renderWithTheme(<Alert variant="info">Info message</Alert>);
-    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-  });
-
-  it('does not have alert role for success variant', () => {
-    renderWithTheme(<Alert variant="success">Success message</Alert>);
-    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-  });
-
-  it('renders a dismiss button when onDismiss is provided', () => {
-    renderWithTheme(<Alert onDismiss={() => {}}>Dismissable</Alert>);
-    expect(screen.getByRole('button', { name: 'Dismiss alert' })).toBeInTheDocument();
-  });
-
-  it('calls onDismiss when dismiss button is pressed', () => {
-    const onDismiss = vi.fn();
-    renderWithTheme(<Alert onDismiss={onDismiss}>Dismissable</Alert>);
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss alert' }));
-    expect(onDismiss).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not render a dismiss button when onDismiss is omitted', () => {
-    renderWithTheme(<Alert>No dismiss</Alert>);
-    expect(screen.queryByRole('button', { name: 'Dismiss alert' })).not.toBeInTheDocument();
-  });
-
-  it('accepts custom style', () => {
-    renderWithTheme(<Alert style={{ marginTop: 10 }}>Styled</Alert>);
-    expect(screen.getByText('Styled')).toBeInTheDocument();
-  });
-});

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Alert } from './Alert.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Alert',
-  component: Alert,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    variant: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
-  },
-} satisfies Meta<typeof Alert>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Info: Story = { args: { children: 'This is an informational message.', variant: 'info' } };
-export const Success: Story = { args: { children: 'Your changes have been saved.', variant: 'success' } };
-export const Warning: Story = { args: { children: 'Please review before continuing.', variant: 'warning' } };
-export const Error: Story = { args: { children: 'Something went wrong. Please try again.', variant: 'error' } };
-export const WithTitle: Story = {
-  args: { children: 'More details about the alert.', variant: 'info', title: 'Heads up' },
-};
-export const Dismissible: Story = {
-  args: { children: 'You can dismiss this alert.', variant: 'success', onDismiss: () => {} },
-};
-export const AllVariants: Story = {
-  args: { children: '' },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 400 }}>
-      {(['info', 'success', 'warning', 'error'] as const).map(v => (
-        <Alert key={v} variant={v} title={v.charAt(0).toUpperCase() + v.slice(1)}>
-          This is a {v} alert.
-        </Alert>
-      ))}
-    </div>
-  ),
-};

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

@@ -1,94 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type AlertVariant = 'info' | 'success' | 'warning' | 'error';
-
-interface AlertProps {
-  variant?: AlertVariant;
-  icon?: ReactNode;
-  title?: string;
-  children: ReactNode;
-  onDismiss?: () => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  alert: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    padding: spacing.m,
-    borderRadius: border.radius.s,
-    gap: spacing.xs,
-  },
-  icon: {
-    flexShrink: 0,
-    marginTop: 2,
-  },
-  content: {
-    flex: 1,
-    gap: spacing.xxs,
-  },
-  title: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-    lineHeight: lineHeight.body,
-  },
-  body: {
-    fontSize: font.size.bodyS,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.bodyS,
-  },
-  dismiss: {
-    padding: spacing.xxs,
-    flexShrink: 0,
-  },
-});
-
-export function Alert({
-  variant = 'info',
-  icon,
-  title,
-  children,
-  onDismiss,
-  style,
-}: Readonly<AlertProps>) {
-  const { colors } = useTheme();
-  const isUrgent = variant === 'error' || variant === 'warning';
-
-  const variantColors: Record<AlertVariant, { 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.alert, { backgroundColor: bg, borderStartWidth: spacing.s, borderStartColor: borderColor }, style]}
-    >
-      {icon && <View style={styles.icon}>{icon}</View>}
-      <View style={styles.content}>
-        {title && <Text style={[styles.title, { color: text }]}>{title}</Text>}
-        <Text style={[styles.body, { color: text }]}>{children}</Text>
-      </View>
-      {onDismiss && (
-        <Pressable
-          onPress={onDismiss}
-          style={styles.dismiss}
-          accessibilityLabel="Dismiss alert"
-          accessibilityRole="button"
-          hitSlop={8}
-        >
-          <Text style={{ color: text, fontSize: 16 }}>✕</Text>
-        </Pressable>
-      )}
-    </View>
-  );
-}

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

@@ -1,50 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Avatar.native.stories';
-
-<Meta of={Stories} />
-
-# Avatar (React Native)
-
-React Native avatar component displaying user initials on a coloured background. Derives initials from the `name` prop (first letter of each word, max 2).
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Avatar } from '@boostdev/design-system-components';
-
-<Avatar name="John Doe" size="medium" />
-```
-
-## Examples
-
-### All sizes
-<Canvas of={Stories.AllSizes} />
-
-### With initials
-<Canvas of={Stories.WithInitials} />
-
-### Small
-<Canvas of={Stories.Small} />
-
-### Large
-<Canvas of={Stories.Large} />
-
-### Single name
-<Canvas of={Stories.SingleName} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | string | — | Full name — initials are derived from this |
-| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Circle diameter |
-
-## Accessibility
-
-- `accessibilityLabel` defaults to the `name` prop so screen readers announce the user's name

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

@@ -1,47 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Avatar } from './Avatar.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Avatar (native)', () => {
-  describe('initials fallback', () => {
-    it('has image role and accessible label on the container', () => {
-      renderWithTheme(<Avatar name="John Doe" />);
-      expect(screen.getByRole('img', { name: 'John Doe' })).toBeInTheDocument();
-    });
-
-    it('derives initials from a two-word name', () => {
-      renderWithTheme(<Avatar name="John Doe" />);
-      expect(screen.getByText('JD')).toBeInTheDocument();
-    });
-
-    it('uses a single-word name as one initial', () => {
-      renderWithTheme(<Avatar name="Alice" />);
-      expect(screen.getByText('A')).toBeInTheDocument();
-    });
-
-    it('uses the alt prop as accessible label when provided', () => {
-      renderWithTheme(<Avatar name="John Doe" alt="Profile picture" />);
-      expect(screen.getByRole('img', { name: 'Profile picture' })).toBeInTheDocument();
-    });
-  });
-
-  describe('image variant', () => {
-    it('has image role and accessible label on the container', () => {
-      renderWithTheme(<Avatar src="https://example.com/avatar.jpg" alt="Jane Smith" />);
-      expect(screen.getByRole('img', { name: 'Jane Smith' })).toBeInTheDocument();
-    });
-
-    it('does not duplicate the accessible label (regression: duplicate label bug)', () => {
-      // Previously, both the outer View and the inner Image had accessibilityLabel={label},
-      // causing screen readers to announce the name twice.
-      renderWithTheme(<Avatar src="https://example.com/avatar.jpg" alt="Jane Smith" />);
-      // Only one element should have aria-label="Jane Smith".
-      const labeled = screen.getAllByLabelText('Jane Smith');
-      expect(labeled).toHaveLength(1);
-    });
-  });
-});

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Avatar } from './Avatar.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Avatar',
-  component: Avatar,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithInitials: Story = { args: { name: 'John Doe', size: 'medium' } };
-export const Small: Story = { args: { name: 'Jane Smith', size: 'small' } };
-export const Large: Story = { args: { name: 'Alex Brown', size: 'large' } };
-export const SingleName: Story = { args: { name: 'Alice', size: 'medium' } };
-export const AllSizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-      {(['small', 'medium', 'large'] as const).map(s => (
-        <Avatar key={s} name="John Doe" size={s} />
-      ))}
-    </div>
-  ),
-};

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

@@ -1,85 +0,0 @@
-import { StyleSheet, View, Text, Image, StyleProp, ViewStyle } from 'react-native';
-import { font, border } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type AvatarSize = 'small' | 'medium' | 'large';
-
-interface AvatarProps {
-  src?: string;
-  alt?: string;
-  name?: string;
-  size?: AvatarSize;
-  style?: StyleProp<ViewStyle>;
-}
-
-const sizeMap: Record<AvatarSize, { container: number; fontSize: number }> = {
-  small:  { container: 32,  fontSize: font.size.bodyS },
-  medium: { container: 48,  fontSize: font.size.body },
-  large:  { container: 72,  fontSize: font.size.heading3 },
-};
-
-function getInitials(name: string): string {
-  return name
-    .split(' ')
-    .filter(Boolean)
-    .slice(0, 2)
-    .map(word => word[0].toUpperCase())
-    .join('');
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: border.radius.full,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
-  initials: {
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-  },
-});
-
-export function Avatar({ src, alt, name, size = 'medium', style }: Readonly<AvatarProps>) {
-  const { colors } = useTheme();
-  const { container, fontSize } = sizeMap[size];
-  const label = alt ?? name ?? 'User avatar';
-
-  if (src) {
-    return (
-      <View
-        style={[styles.container, { width: container, height: container }, style]}
-        accessibilityLabel={label}
-        accessibilityRole="image"
-      >
-        <Image source={{ uri: src }} style={styles.image} />
-      </View>
-    );
-  }
-
-  const initials = name ? getInitials(name) : '';
-
-  return (
-    <View
-      style={[
-        styles.container,
-        { width: container, height: container, backgroundColor: colors.colorBlue },
-        style,
-      ]}
-      accessibilityLabel={label}
-      accessibilityRole="image"
-    >
-      <Text
-        style={[styles.initials, { fontSize, color: colors.colorOnBlue }]}
-        importantForAccessibility="no"
-        accessibilityElementsHidden={true}
-      >
-        {initials}
-      </Text>
-    </View>
-  );
-}

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

@@ -1,54 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Badge.native.stories';
-
-<Meta of={Stories} />
-
-# Badge (React Native)
-
-React Native badge component for short status labels and counts. Five semantic variants matching the web `Badge` API.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Badge } from '@boostdev/design-system-components';
-
-<Badge variant="success">Active</Badge>
-<Badge variant="error">3</Badge>
-```
-
-## Examples
-
-### All variants
-<Canvas of={Stories.AllVariants} />
-
-### Primary
-<Canvas of={Stories.Primary} />
-
-### Secondary
-<Canvas of={Stories.Secondary} />
-
-### Success
-<Canvas of={Stories.Success} />
-
-### Error
-<Canvas of={Stories.Error} />
-
-### Warning
-<Canvas of={Stories.Warning} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"primary" \| "secondary" \| "success" \| "error" \| "warning"` | `"primary"` | Semantic colour |
-| `children` | `ReactNode` | — | Badge label |
-
-## Accessibility
-
-- Badge is decorative — wrap in a component with `accessibilityLabel` when colour alone conveys status (e.g. `accessibilityLabel="3 notifications"`)

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

@@ -1,45 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Badge } from './Badge.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Badge (native)', () => {
-  it('renders children text', () => {
-    renderWithTheme(<Badge>New</Badge>);
-    expect(screen.getByText('New')).toBeInTheDocument();
-  });
-
-  it('defaults to primary variant', () => {
-    const { container } = renderWithTheme(<Badge>Default</Badge>);
-    expect(screen.getByText('Default')).toBeInTheDocument();
-    expect(container).toBeTruthy();
-  });
-
-  it('renders with secondary variant', () => {
-    renderWithTheme(<Badge variant="secondary">Info</Badge>);
-    expect(screen.getByText('Info')).toBeInTheDocument();
-  });
-
-  it('renders with success variant', () => {
-    renderWithTheme(<Badge variant="success">Active</Badge>);
-    expect(screen.getByText('Active')).toBeInTheDocument();
-  });
-
-  it('renders with error variant', () => {
-    renderWithTheme(<Badge variant="error">Failed</Badge>);
-    expect(screen.getByText('Failed')).toBeInTheDocument();
-  });
-
-  it('renders with warning variant', () => {
-    renderWithTheme(<Badge variant="warning">Pending</Badge>);
-    expect(screen.getByText('Pending')).toBeInTheDocument();
-  });
-
-  it('accepts custom style', () => {
-    renderWithTheme(<Badge style={{ marginTop: 10 }}>Styled</Badge>);
-    expect(screen.getByText('Styled')).toBeInTheDocument();
-  });
-});

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

@@ -1,34 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Badge } from './Badge.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Badge',
-  component: Badge,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    variant: { control: 'select', options: ['primary', 'secondary', 'success', 'error', 'warning'] },
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = { args: { children: 'Primary', variant: 'primary' } };
-export const Secondary: Story = { args: { children: 'Secondary', variant: 'secondary' } };
-export const Success: Story = { args: { children: 'Success', variant: 'success' } };
-export const Error: Story = { args: { children: 'Error', variant: 'error' } };
-export const Warning: Story = { args: { children: 'Warning', variant: 'warning' } };
-export const AllVariants: Story = {
-  args: { children: '' },
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-      {(['primary', 'secondary', 'success', 'error', 'warning'] as const).map(v => (
-        <Badge key={v} variant={v}>{v}</Badge>
-      ))}
-    </div>
-  ),
-};

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

@@ -1,50 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, border } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type BadgeVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning';
-
-interface BadgeProps {
-  children: ReactNode;
-  variant?: BadgeVariant;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  badge: {
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: spacing.xxs,
-    paddingHorizontal: spacing.xs,
-    borderRadius: border.radius.full,
-  },
-  text: {
-    fontSize: font.size.bodyS,
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-    lineHeight: font.size.bodyS,
-  },
-});
-
-export function Badge({ children, variant = 'primary', style }: BadgeProps) {
-  const { colors } = useTheme();
-
-  const variantColors: Record<BadgeVariant, { bg: string; text: string }> = {
-    primary:   { bg: colors.colorInteractive,  text: colors.colorOnInteractive },
-    secondary: { bg: colors.colorBgSubtle,     text: colors.colorOnBgSubtle },
-    success:   { bg: colors.colorSuccess,      text: colors.colorOnSuccess },
-    error:     { bg: colors.colorError,        text: colors.colorOnError },
-    warning:   { bg: colors.colorWarning,      text: colors.colorOnWarning },
-  };
-
-  const { bg, text } = variantColors[variant];
-
-  return (
-    <View style={[styles.badge, { backgroundColor: bg }, style]}>
-      <Text style={[styles.text, { color: text }]}>{children}</Text>
-    </View>
-  );
-}