@boostdev/design-system-components 2.4.2 → 2.5.1

package/src/components/interaction/Button/Button.native.mdx

@@ -1,91 +0,0 @@
-import { Meta, Canvas, ArgTypes, Controls } from '@storybook/blocks';
-import * as Stories from './Button.native.stories';
-
-<Meta of={Stories} />
-
-# Button (React Native)
-
-React Native button component using `Pressable`. Matches the web `Button` API as closely as possible, replacing `onClick` with `onPress` and `aria-label` with `accessibilityLabel`.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Button } from '@boostdev/design-system-components';
-
-<Button variant="default" size="medium" onPress={() => console.log('pressed')}>
-  Save
-</Button>
-```
-
-Wrap your tree in `ThemeProvider` (once, at the app root):
-
-```tsx
-import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
-
-export default function App() {
-  return <ThemeProvider><YourApp /></ThemeProvider>;
-}
-```
-
-## Playground
-
-<Canvas of={Stories.Playground} />
-<Controls of={Stories.Playground} />
-
-## Variants
-
-<Canvas of={Stories.Default} />
-<Canvas of={Stories.Outline} />
-
-## Sizes
-
-<Canvas of={Stories.Small} />
-<Canvas of={Stories.Medium} />
-<Canvas of={Stories.Large} />
-
-## Icons
-
-<Canvas of={Stories.WithIconStart} />
-<Canvas of={Stories.WithIconEnd} />
-
-### Icon-only (1:1 aspect ratio)
-
-Set `isIconOnly` to render a square button with equal `spacing.xs` padding on both axes. Composable with any `variant`. Always pair with `accessibilityLabel` for assistive tech.
-
-<Canvas of={Stories.IconOnly} />
-<Canvas of={Stories.IconOnlyOutline} />
-<Canvas of={Stories.AllIconOnly} />
-
-## All variants × sizes
-
-<Canvas of={Stories.AllVariants} />
-
-## Disabled
-
-<Canvas of={Stories.Disabled} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"default" \| "outline"` | `"default"` | Visual style (`"ghost"` is a deprecated alias for `"outline"`) |
-| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Height and horizontal padding |
-| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
-| `onPress` | `() => void` | — | Called when the button is pressed |
-| `iconStart` | `ReactNode` | — | Icon before the label |
-| `iconEnd` | `ReactNode` | — | Icon after the label |
-| `isIconOnly` | boolean | `false` | 1:1 aspect ratio with equal `spacing.xs` padding on both axes. Requires `accessibilityLabel`. |
-| `accessibilityLabel` | string | — | Screen-reader label (required for icon-only buttons) |
-| `style` | `StyleProp<ViewStyle>` | — | Override container styles |
-
-## Accessibility
-
-- Provide `accessibilityLabel` for icon-only buttons
-- `disabled` communicates the disabled state to assistive technologies
-- Pressed state reduces opacity to 0.75 for visual feedback

package/src/components/interaction/Button/Button.native.spec.tsx

@@ -1,55 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Button } from './Button.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Button (native)', () => {
-  it('has button role', () => {
-    renderWithTheme(<Button>Save</Button>);
-    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
-  });
-
-  it('exposes disabled state', () => {
-    renderWithTheme(<Button disabled>Save</Button>);
-    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('renders with icon-start without throwing', () => {
-    // Icon wrappers have importantForAccessibility="no-hide-descendants" (Android)
-    // and accessibilityElementsHidden={true} (iOS) so decorative icons are hidden on device.
-    const icon = <span data-testid="icon">★</span>;
-    renderWithTheme(<Button iconStart={icon}>Save</Button>);
-    expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByTestId('icon')).toBeInTheDocument();
-  });
-
-  it('renders with icon-end without throwing', () => {
-    const icon = <span data-testid="icon-end">→</span>;
-    renderWithTheme(<Button iconEnd={icon}>Next</Button>);
-    expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByTestId('icon-end')).toBeInTheDocument();
-  });
-
-  it('renders icon-only button with accessibilityLabel and icon as children (not wrapped in Text)', () => {
-    renderWithTheme(
-      <Button isIconOnly accessibilityLabel="Confirm">
-        <span data-testid="icon-only">✓</span>
-      </Button>
-    );
-    expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
-    expect(screen.getByTestId('icon-only')).toBeInTheDocument();
-  });
-
-  it('renders icon-only with outline variant', () => {
-    renderWithTheme(
-      <Button isIconOnly variant="outline" accessibilityLabel="Confirm">
-        <span data-testid="icon-only-outline">✓</span>
-      </Button>
-    );
-    expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
-    expect(screen.getByTestId('icon-only-outline')).toBeInTheDocument();
-  });
-});

package/src/components/interaction/Button/Button.native.stories.tsx

@@ -1,141 +0,0 @@
-import React from 'react';
-import type { ReactNode } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Button, type ButtonProps } from './Button.native';
-
-const CheckIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden>
-    <path d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm6.93 8.2-6.85 9.29a1 1 0 0 1-1.43.19l-4.89-3.91a1 1 0 0 1-.15-1.41A1 1 0 0 1 7 12.21l4.08 3.26L17.32 7a1 1 0 0 1 1.39-.21 1 1 0 0 1 .22 1.41Z" fill="currentColor"/>
-  </svg>
-);
-
-const ArrowRight = <span aria-hidden>→</span>;
-const ArrowLeft = <span aria-hidden>←</span>;
-
-const iconMap = {
-  none: undefined,
-  check: CheckIcon,
-  arrowRight: ArrowRight,
-  arrowLeft: ArrowLeft,
-};
-
-type IconKey = keyof typeof iconMap;
-
-type ButtonStoryArgs = Omit<ButtonProps, 'iconStart' | 'iconEnd' | 'children'> & {
-  iconStart?: IconKey;
-  iconEnd?: IconKey;
-  children?: ReactNode;
-};
-
-const meta: Meta<ButtonStoryArgs> = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Interaction/Button',
-  component: Button,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'outline'],
-      description: 'Visual style. `default` is filled; `outline` is transparent with a border.',
-      table: { defaultValue: { summary: 'default' } },
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Height + horizontal padding.',
-      table: { defaultValue: { summary: 'medium' } },
-    },
-    iconStart: {
-      control: 'select',
-      options: Object.keys(iconMap) as IconKey[],
-      mapping: iconMap,
-      description: 'Icon rendered before the label.',
-    },
-    iconEnd: {
-      control: 'select',
-      options: Object.keys(iconMap) as IconKey[],
-      mapping: iconMap,
-      description: 'Icon rendered after the label.',
-    },
-    isIconOnly: {
-      control: 'boolean',
-      description: 'Forces 1:1 aspect ratio with minimal xs padding. Composable with any `variant`. Requires `accessibilityLabel`.',
-      table: { defaultValue: { summary: 'false' } },
-    },
-    disabled: { control: 'boolean' },
-    onPress: { action: 'pressed' },
-  },
-  args: { variant: 'default', size: 'medium' },
-};
-
-export default meta;
-type Story = StoryObj<ButtonStoryArgs>;
-
-export const Playground: Story = {
-  args: { children: 'Button', iconStart: 'none', iconEnd: 'none' },
-};
-
-export const Default: Story = { args: { children: 'Default' } };
-export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } };
-export const Small: Story = { args: { children: 'Small', size: 'small' } };
-export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
-export const Large: Story = { args: { children: 'Large', size: 'large' } };
-export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
-
-export const WithIconStart: Story = { args: { children: 'Confirm', iconStart: 'check' } };
-export const WithIconEnd: Story = { args: { children: 'Continue', iconEnd: 'arrowRight' } };
-
-export const IconOnly: Story = {
-  args: {
-    isIconOnly: true,
-    accessibilityLabel: 'Confirm',
-    children: CheckIcon,
-  },
-};
-
-export const IconOnlyOutline: Story = {
-  args: {
-    variant: 'outline',
-    isIconOnly: true,
-    accessibilityLabel: 'Confirm',
-    children: CheckIcon,
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      {(['default', 'outline'] as const).map(v => (
-        <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-          {(['small', 'medium', 'large'] as const).map(s => (
-            <Button key={s} variant={v} size={s}>{v} {s}</Button>
-          ))}
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-export const AllIconOnly: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      {(['default', 'outline'] as const).map(v => (
-        <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-          {(['small', 'medium', 'large'] as const).map(s => (
-            <Button
-              key={s}
-              variant={v}
-              size={s}
-              isIconOnly
-              accessibilityLabel={`${v} ${s}`}
-            >
-              {CheckIcon}
-            </Button>
-          ))}
-        </div>
-      ))}
-    </div>
-  ),
-};

package/src/components/interaction/Button/Button.native.tsx

@@ -1,105 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, Pressable, Text, View, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, border } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type ButtonVariant = 'default' | 'outline' | 'ghost'; // 'ghost' is deprecated, use 'outline'
-type ButtonSize = 'small' | 'medium' | 'large';
-
-export interface ButtonProps {
-  children?: ReactNode;
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  iconStart?: ReactNode;
-  iconEnd?: ReactNode;
-  disabled?: boolean;
-  /** Forces a 1:1 aspect ratio with minimal padding for icon-only buttons. Requires `accessibilityLabel`. */
-  isIconOnly?: boolean;
-  onPress?: () => void;
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const sizeTokens: Record<ButtonSize, { height: number; px: number; fontSize: number; radius: number }> = {
-  small:  { height: 36,  px: spacing.m,   fontSize: font.size.bodyS,    radius: border.radius.full },
-  medium: { height: 48,  px: spacing.m,   fontSize: font.size.body,     radius: border.radius.full },
-  large:  { height: 56,  px: spacing.xxl, fontSize: font.size.heading3, radius: border.radius.full },
-};
-
-const styles = StyleSheet.create({
-  pressable: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: spacing.xs,
-    alignSelf: 'flex-start',
-  },
-  label: {
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-    includeFontPadding: false,
-  },
-});
-
-export function Button({
-  children,
-  variant = 'default',
-  size = 'medium',
-  iconStart,
-  iconEnd,
-  disabled = false,
-  isIconOnly = false,
-  onPress,
-  accessibilityLabel,
-  style,
-}: Readonly<ButtonProps>) {
-  const { colors } = useTheme();
-  const { height, px, fontSize, radius } = sizeTokens[size];
-
-  // Color model: filled = interactive bg, outline = transparent bg + interactive_on-bg border/text
-  const primaryColor = colors.colorInteractive;
-  const onPrimaryColor = colors.colorOnInteractive;
-  // Outline uses colorInteractiveOnBg for text/border — colorInteractive may not meet 3:1 on white
-  const outlineTextColor = colors.colorInteractiveOnBg;
-
-  const isOutline = variant === 'outline' || variant === 'ghost';
-  const containerStyle: ViewStyle = {
-    height,
-    paddingHorizontal: isIconOnly ? spacing.xs : px,
-    borderRadius: radius,
-    opacity: disabled ? 0.4 : 1,
-    // Icon-only: square with equal xs padding on both axes.
-    ...(isIconOnly && { aspectRatio: 1, paddingVertical: spacing.xs }),
-    ...(variant === 'default' && { backgroundColor: primaryColor }),
-    ...(isOutline && {
-      backgroundColor: 'transparent',
-      borderWidth: 1,
-      borderColor: outlineTextColor,
-    }),
-  };
-
-  const textColor = variant === 'default' ? onPrimaryColor : outlineTextColor;
-
-  return (
-    <Pressable
-      onPress={onPress}
-      disabled={disabled}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      accessibilityState={{ disabled }}
-      style={({ pressed }) => [styles.pressable, containerStyle, pressed && { opacity: 0.75 }, style]}
-    >
-      {iconStart && <View importantForAccessibility="no-hide-descendants" accessibilityElementsHidden={true}>{iconStart}</View>}
-      {children && (
-        isIconOnly
-          ? children
-          : (
-            <Text style={[styles.label, { fontSize, color: textColor }]}>
-              {children}
-            </Text>
-          )
-      )}
-      {iconEnd && <View importantForAccessibility="no-hide-descendants">{iconEnd}</View>}
-    </Pressable>
-  );
-}

package/src/components/interaction/Dialog/Dialog.native.mdx

@@ -1,61 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Dialog.native.stories';
-
-<Meta of={Stories} />
-
-# Dialog (React Native)
-
-A modal dialog overlay that centers content on screen with a semi-transparent backdrop. Built on React Native `Modal` with `transparent` background.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Dialog } from '@boostdev/design-system-components';
-
-const [open, setOpen] = useState(false);
-
-<Button onPress={() => setOpen(true)}>Open</Button>
-<Dialog isOpen={open} onClose={() => setOpen(false)} title="Confirm">
-  <Text>Are you sure?</Text>
-</Dialog>
-```
-
-Wrap your tree in `ThemeProvider` (once, at the app root):
-
-```tsx
-import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
-
-export default function App() {
-  return <ThemeProvider><YourApp /></ThemeProvider>;
-}
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### Without title
-<Canvas of={Stories.WithoutTitle} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | `boolean` | `false` | Controls visibility of the dialog |
-| `onClose` | `() => void` | — | Called when backdrop or close button is pressed |
-| `title` | `string` | — | Optional title displayed at the top |
-| `children` | `ReactNode` | — | Dialog body content |
-| `style` | `StyleProp<ViewStyle>` | — | Override panel styles |
-
-## Accessibility
-
-- Backdrop press and close button both call `onClose`
-- Close button has `accessibilityLabel="Close dialog"`
-- Android back button triggers `onRequestClose` which calls `onClose`

package/src/components/interaction/Dialog/Dialog.native.spec.tsx

@@ -1,73 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Dialog } from './Dialog.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Dialog (native)', () => {
-  it('renders children when open', () => {
-    renderWithTheme(
-      <Dialog isOpen>
-        <span>Dialog body</span>
-      </Dialog>,
-    );
-    expect(screen.getByText('Dialog body')).toBeInTheDocument();
-  });
-
-  it('does not render children when closed', () => {
-    renderWithTheme(
-      <Dialog isOpen={false}>
-        <span>Hidden content</span>
-      </Dialog>,
-    );
-    expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
-  });
-
-  it('renders the title when provided', () => {
-    renderWithTheme(
-      <Dialog isOpen title="Confirm action">
-        <span>Body</span>
-      </Dialog>,
-    );
-    expect(screen.getByText('Confirm action')).toBeInTheDocument();
-  });
-
-  it('renders a close button with accessible label', () => {
-    renderWithTheme(
-      <Dialog isOpen onClose={() => {}}>
-        <span>Body</span>
-      </Dialog>,
-    );
-    const closeButtons = screen.getAllByRole('button', { name: 'Close dialog' });
-    expect(closeButtons.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('calls onClose when close button is pressed', () => {
-    const onClose = vi.fn();
-    renderWithTheme(
-      <Dialog isOpen onClose={onClose}>
-        <span>Body</span>
-      </Dialog>,
-    );
-    const closeButtons = screen.getAllByRole('button', { name: 'Close dialog' });
-    // The inner close button (not the backdrop)
-    const innerClose = closeButtons[closeButtons.length - 1];
-    fireEvent.click(innerClose);
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onClose when backdrop is pressed', () => {
-    const onClose = vi.fn();
-    renderWithTheme(
-      <Dialog isOpen onClose={onClose}>
-        <span>Body</span>
-      </Dialog>,
-    );
-    const closeButtons = screen.getAllByRole('button', { name: 'Close dialog' });
-    // The first one is the backdrop
-    fireEvent.click(closeButtons[0]);
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/interaction/Dialog/Dialog.native.stories.tsx

@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import { Text, View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Dialog } from './Dialog.native';
-import { Button } from '../Button/Button.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Interaction/Dialog',
-  component: Dialog,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-} satisfies Meta<typeof Dialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-function DialogDemo() {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <Button onPress={() => setOpen(true)}>Open Dialog</Button>
-      <Dialog isOpen={open} onClose={() => setOpen(false)} title="Confirmation">
-        <Text>Are you sure you want to proceed with this action?</Text>
-        <View style={{ flexDirection: 'row', gap: 8, marginTop: 16 }}>
-          <Button variant="outline" onPress={() => setOpen(false)}>Cancel</Button>
-          <Button onPress={() => setOpen(false)}>Confirm</Button>
-        </View>
-      </Dialog>
-    </>
-  );
-}
-
-function DialogWithoutTitleDemo() {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <Button onPress={() => setOpen(true)}>Open Dialog (no title)</Button>
-      <Dialog isOpen={open} onClose={() => setOpen(false)}>
-        <Text>This dialog has no title, just content.</Text>
-      </Dialog>
-    </>
-  );
-}
-
-export const Default: Story = {
-  render: () => <DialogDemo />,
-};
-
-export const WithoutTitle: Story = {
-  render: () => <DialogWithoutTitleDemo />,
-};