@boostdev/design-system-components 2.4.1 → 2.5.0

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

@@ -1,52 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Breadcrumb.native.stories';
-
-<Meta of={Stories} />
-
-# Breadcrumb (React Native)
-
-React Native breadcrumb navigation showing the user's location within a hierarchy. Items are separated by "/" and the last item is non-interactive (current page).
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Breadcrumb } from '@boostdev/design-system-components';
-
-<Breadcrumb
-  items={[
-    { label: 'Home', onPress: () => navigation.navigate('Home') },
-    { label: 'Products', onPress: () => navigation.navigate('Products') },
-    { label: 'Shoes' },
-  ]}
-/>
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### Two items
-<Canvas of={Stories.TwoItems} />
-
-### Many items
-<Canvas of={Stories.ManyItems} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `Array<{ label: string, onPress?: () => void }>` | — | Breadcrumb items; last item is current page |
-| `style` | `StyleProp<ViewStyle>` | — | Override container styles |
-
-## Accessibility
-
-- Container uses `accessibilityRole="navigation"` with `accessibilityLabel="Breadcrumb"`
-- Interactive items use `accessibilityRole="link"`
-- Separator characters are hidden from assistive technologies

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

@@ -1,49 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Breadcrumb } from './Breadcrumb.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Breadcrumb (native)', () => {
-  const items = [
-    { label: 'Home', onPress: vi.fn() },
-    { label: 'Products', onPress: vi.fn() },
-    { label: 'Shoes' },
-  ];
-
-  it('has navigation role with Breadcrumb label', () => {
-    renderWithTheme(<Breadcrumb items={items} />);
-    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument();
-  });
-
-  it('renders all item labels', () => {
-    renderWithTheme(<Breadcrumb items={items} />);
-    expect(screen.getByText('Home')).toBeInTheDocument();
-    expect(screen.getByText('Products')).toBeInTheDocument();
-    expect(screen.getByText('Shoes')).toBeInTheDocument();
-  });
-
-  it('renders separator characters between items', () => {
-    renderWithTheme(<Breadcrumb items={items} />);
-    const separators = screen.getAllByText('/');
-    expect(separators).toHaveLength(2);
-  });
-
-  it('calls onPress when an interactive item is pressed', () => {
-    const onPress = vi.fn();
-    renderWithTheme(
-      <Breadcrumb items={[{ label: 'Home', onPress }, { label: 'Current' }]} />,
-    );
-    fireEvent.click(screen.getByRole('link'));
-    expect(onPress).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders last item as non-interactive text', () => {
-    renderWithTheme(<Breadcrumb items={items} />);
-    const links = screen.getAllByRole('link');
-    const linkTexts = links.map(l => l.textContent);
-    expect(linkTexts).not.toContain('Shoes');
-  });
-});

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

@@ -1,46 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Breadcrumb } from './Breadcrumb.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Breadcrumb',
-  component: Breadcrumb,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Breadcrumb>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    items: [
-      { label: 'Home', onPress: () => {} },
-      { label: 'Products', onPress: () => {} },
-      { label: 'Shoes' },
-    ],
-  },
-};
-
-export const TwoItems: Story = {
-  args: {
-    items: [
-      { label: 'Home', onPress: () => {} },
-      { label: 'Settings' },
-    ],
-  },
-};
-
-export const ManyItems: Story = {
-  args: {
-    items: [
-      { label: 'Home', onPress: () => {} },
-      { label: 'Category', onPress: () => {} },
-      { label: 'Subcategory', onPress: () => {} },
-      { label: 'Product', onPress: () => {} },
-      { label: 'Details' },
-    ],
-  },
-};

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

@@ -1,83 +0,0 @@
-import { AccessibilityRole, StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-export interface BreadcrumbItem {
-  label: string;
-  onPress?: () => void;
-}
-
-interface BreadcrumbProps {
-  items: BreadcrumbItem[];
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-  },
-  separator: {
-    marginHorizontal: spacing.xs,
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.body,
-  },
-  itemText: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.body,
-  },
-  pressed: {
-    opacity: 0.75,
-  },
-});
-
-export function Breadcrumb({ items, style }: Readonly<BreadcrumbProps>) {
-  const { colors } = useTheme();
-
-  return (
-    <View
-      style={[styles.container, style]}
-      accessibilityRole={'navigation' as AccessibilityRole}
-      accessibilityLabel="Breadcrumb"
-    >
-      {items.map((item, index) => {
-        const isLast = index === items.length - 1;
-
-        return (
-          <View key={index} style={{ flexDirection: 'row', alignItems: 'center', minHeight: 44 }}>
-            {isLast ? (
-              <Text
-                style={[styles.itemText, { color: colors.colorOnBg }]}
-                accessibilityRole="text"
-              >
-                {item.label}
-              </Text>
-            ) : (
-              <>
-                <Pressable
-                  onPress={item.onPress}
-                  accessibilityRole="link"
-                  style={({ pressed }) => pressed && styles.pressed}
-                >
-                  <Text style={[styles.itemText, { color: colors.colorInteractiveOnBg }]}>
-                    {item.label}
-                  </Text>
-                </Pressable>
-                <Text
-                  style={[styles.separator, { color: colors.colorOnBgSubtle }]}
-                  importantForAccessibility="no"
-                  accessibilityElementsHidden={true}
-                >
-                  /
-                </Text>
-              </>
-            )}
-          </View>
-        );
-      })}
-    </View>
-  );
-}

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

@@ -1,58 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Calendar.native.stories';
-
-<Meta of={Stories} />
-
-# Calendar (React Native)
-
-React Native calendar component for date selection. Renders a month grid with Previous/Next navigation, day-of-week headers, and a 6x7 day grid. Supports controlled and uncontrolled modes, and optional min/max date constraints.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { Calendar } from '@boostdev/design-system-components';
-
-<Calendar
-  defaultValue={new Date(2026, 3, 15)}
-  onChange={(date) => console.log(date)}
-/>
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With default value
-<Canvas of={Stories.WithDefaultValue} />
-
-### With min/max range
-<Canvas of={Stories.WithMinMax} />
-
-### Controlled
-<Canvas of={Stories.Controlled} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `Date` | -- | Controlled selected date |
-| `defaultValue` | `Date` | -- | Uncontrolled initial selected date |
-| `min` | `Date` | -- | Earliest selectable date |
-| `max` | `Date` | -- | Latest selectable date |
-| `onChange` | `(date: Date) => void` | -- | Called when a date is selected |
-| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the container |
-
-## Accessibility
-
-- Month/year header uses `polite` live region to announce month changes
-- Each day button has a descriptive label (e.g. "April 15, 2026")
-- Selected and disabled states are exposed via accessibility state
-- Today's date is visually distinguished with a border
-- Disabled (out-of-range) dates have reduced opacity

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

@@ -1,92 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Calendar } from './Calendar.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Calendar (native)', () => {
-  it('renders the month and year header', () => {
-    renderWithTheme(<Calendar defaultValue={new Date(2026, 3, 15)} />);
-    expect(screen.getByText('April 2026')).toBeInTheDocument();
-  });
-
-  it('renders day-of-week headers', () => {
-    renderWithTheme(<Calendar />);
-    expect(screen.getByText('Su')).toBeInTheDocument();
-    expect(screen.getByText('Mo')).toBeInTheDocument();
-    expect(screen.getByText('Fr')).toBeInTheDocument();
-    expect(screen.getByText('Sa')).toBeInTheDocument();
-  });
-
-  it('renders day numbers for the current month', () => {
-    renderWithTheme(<Calendar defaultValue={new Date(2026, 3, 1)} />);
-    expect(screen.getByText('1')).toBeInTheDocument();
-    expect(screen.getByText('15')).toBeInTheDocument();
-    expect(screen.getByText('30')).toBeInTheDocument();
-  });
-
-  it('renders the selected date button', () => {
-    renderWithTheme(<Calendar defaultValue={new Date(2026, 3, 10)} />);
-    expect(
-      screen.getByRole('button', { name: 'April 10, 2026' }),
-    ).toBeInTheDocument();
-  });
-
-  it('calls onChange when a date is pressed', () => {
-    const onChange = vi.fn();
-    renderWithTheme(
-      <Calendar defaultValue={new Date(2026, 3, 1)} onChange={onChange} />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'April 15, 2026' }));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    const selectedDate = onChange.mock.calls[0][0] as Date;
-    expect(selectedDate.getDate()).toBe(15);
-    expect(selectedDate.getMonth()).toBe(3);
-  });
-
-  it('navigates to the previous month', () => {
-    renderWithTheme(<Calendar defaultValue={new Date(2026, 3, 15)} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Previous month' }));
-    expect(screen.getByText('March 2026')).toBeInTheDocument();
-  });
-
-  it('navigates to the next month', () => {
-    renderWithTheme(<Calendar defaultValue={new Date(2026, 3, 15)} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Next month' }));
-    expect(screen.getByText('May 2026')).toBeInTheDocument();
-  });
-
-  it('disables dates outside min/max range', () => {
-    renderWithTheme(
-      <Calendar
-        defaultValue={new Date(2026, 3, 10)}
-        min={new Date(2026, 3, 5)}
-        max={new Date(2026, 3, 20)}
-      />,
-    );
-    expect(
-      screen.getByRole('button', { name: 'April 3, 2026' }),
-    ).toHaveAttribute('aria-disabled', 'true');
-    expect(
-      screen.getByRole('button', { name: 'April 25, 2026' }),
-    ).toHaveAttribute('aria-disabled', 'true');
-    expect(
-      screen.getByRole('button', { name: 'April 10, 2026' }),
-    ).not.toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('does not call onChange for disabled dates', () => {
-    const onChange = vi.fn();
-    renderWithTheme(
-      <Calendar
-        defaultValue={new Date(2026, 3, 10)}
-        min={new Date(2026, 3, 5)}
-        onChange={onChange}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'April 3, 2026' }));
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});

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

@@ -1,45 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Calendar } from './Calendar.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Calendar',
-  component: Calendar,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Calendar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const WithDefaultValue: Story = {
-  args: {
-    defaultValue: new Date(2026, 3, 15),
-  },
-};
-
-export const WithMinMax: Story = {
-  args: {
-    defaultValue: new Date(2026, 3, 10),
-    min: new Date(2026, 3, 5),
-    max: new Date(2026, 3, 25),
-  },
-};
-
-function ControlledDemo() {
-  const [date, setDate] = useState(new Date(2026, 3, 6));
-  return (
-    <Calendar value={date} onChange={setDate} />
-  );
-}
-
-export const Controlled: Story = {
-  args: {},
-  render: () => <ControlledDemo />,
-};