@boostdev/design-system-components 2.4.2 → 2.5.1

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

@@ -1,294 +0,0 @@
-import { useState } 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';
-
-const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-const DAY_LABELS: Record<string, string> = {
-  Su: 'Sunday', Mo: 'Monday', Tu: 'Tuesday', We: 'Wednesday',
-  Th: 'Thursday', Fr: 'Friday', Sa: 'Saturday',
-};
-const MONTHS = [
-  'January', 'February', 'March', 'April', 'May', 'June',
-  'July', 'August', 'September', 'October', 'November', 'December',
-];
-
-interface CalendarProps {
-  value?: Date;
-  defaultValue?: Date;
-  min?: Date;
-  max?: Date;
-  onChange?: (date: Date) => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-function isSameDay(a: Date, b: Date): boolean {
-  return (
-    a.getFullYear() === b.getFullYear() &&
-    a.getMonth() === b.getMonth() &&
-    a.getDate() === b.getDate()
-  );
-}
-
-function toMidnight(date: Date): Date {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-}
-
-function isOutOfRange(date: Date, min?: Date, max?: Date): boolean {
-  const d = toMidnight(date);
-  if (min && d < toMidnight(min)) return true;
-  return !!(max && d > toMidnight(max));
-}
-
-function getDaysInMonth(year: number, month: number): number {
-  return new Date(year, month + 1, 0).getDate();
-}
-
-function getFirstDayOfMonth(year: number, month: number): number {
-  return new Date(year, month, 1).getDay();
-}
-
-const DAY_SIZE = 44;
-
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'flex-start',
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: spacing.xs,
-    paddingHorizontal: spacing.xxs,
-  },
-  navButton: {
-    minWidth: DAY_SIZE,
-    minHeight: DAY_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: border.radius.full,
-  },
-  navText: {
-    fontSize: font.size.heading3,
-    fontWeight: font.weight.semibold,
-  },
-  monthYear: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-    lineHeight: lineHeight.body,
-  },
-  weekRow: {
-    flexDirection: 'row',
-  },
-  weekday: {
-    width: DAY_SIZE,
-    height: DAY_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  weekdayText: {
-    fontSize: font.size.bodyS,
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-    lineHeight: lineHeight.bodyS,
-  },
-  grid: {
-    gap: spacing.xxxs,
-  },
-  dayRow: {
-    flexDirection: 'row',
-  },
-  dayCell: {
-    width: DAY_SIZE,
-    height: DAY_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: border.radius.full,
-  },
-  dayText: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.body,
-  },
-  today: {
-    borderWidth: 1,
-  },
-  pressed: {
-    opacity: 0.75,
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-});
-
-export function Calendar({
-  value,
-  defaultValue,
-  min,
-  max,
-  onChange,
-  style,
-}: Readonly<CalendarProps>) {
-  const { colors } = useTheme();
-  const today = new Date();
-  const controlled = value !== undefined;
-  const [internal, setInternal] = useState<Date | undefined>(defaultValue);
-  const selected = controlled ? value : internal;
-
-  const [viewYear, setViewYear] = useState(
-    selected?.getFullYear() ?? today.getFullYear(),
-  );
-  const [viewMonth, setViewMonth] = useState(
-    selected?.getMonth() ?? today.getMonth(),
-  );
-
-  const daysInMonth = getDaysInMonth(viewYear, viewMonth);
-  const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
-
-  const navigate = (delta: number) => {
-    const d = new Date(viewYear, viewMonth + delta, 1);
-    setViewYear(d.getFullYear());
-    setViewMonth(d.getMonth());
-  };
-
-  const selectDay = (day: number) => {
-    const date = new Date(viewYear, viewMonth, day);
-    if (isOutOfRange(date, min, max)) return;
-    if (!controlled) setInternal(date);
-    onChange?.(date);
-  };
-
-  // Build grid cells
-  const cells: Array<{ day: number } | null> = [
-    ...Array.from({ length: firstDay }, () => null),
-    ...Array.from({ length: daysInMonth }, (_, i) => ({ day: i + 1 })),
-  ];
-  while (cells.length % 7 !== 0) cells.push(null);
-
-  // Build rows
-  const rows = Array.from(
-    { length: cells.length / 7 },
-    (_, i) => cells.slice(i * 7, i * 7 + 7),
-  );
-
-  return (
-    <View
-      style={[styles.container, style]}
-      accessibilityRole="none"
-      accessibilityLabel={`${MONTHS[viewMonth]} ${viewYear} calendar`}
-    >
-      <View style={styles.header}>
-        <Pressable
-          onPress={() => navigate(-1)}
-          accessibilityRole="button"
-          accessibilityLabel="Previous month"
-          style={({ pressed }) => [styles.navButton, pressed && styles.pressed]}
-        >
-          <Text style={[styles.navText, { color: colors.colorOnBg }]}>‹</Text>
-        </Pressable>
-
-        <Text
-          style={[styles.monthYear, { color: colors.colorOnBg }]}
-          accessibilityRole="text"
-          accessibilityLiveRegion="polite"
-        >
-          {MONTHS[viewMonth]} {viewYear}
-        </Text>
-
-        <Pressable
-          onPress={() => navigate(1)}
-          accessibilityRole="button"
-          accessibilityLabel="Next month"
-          style={({ pressed }) => [styles.navButton, pressed && styles.pressed]}
-        >
-          <Text style={[styles.navText, { color: colors.colorOnBg }]}>›</Text>
-        </Pressable>
-      </View>
-
-      <View style={styles.weekRow}>
-        {DAYS.map(d => (
-          <View key={d} style={styles.weekday}>
-            <Text
-              style={[styles.weekdayText, { color: colors.colorOnBgSubtle }]}
-              accessibilityLabel={DAY_LABELS[d]}
-            >
-              {d}
-            </Text>
-          </View>
-        ))}
-      </View>
-
-      <View style={styles.grid}>
-        {rows.map((row, rowIndex) => (
-          <View key={rowIndex} style={styles.dayRow}>
-            {row.map((cell, colIndex) => {
-              if (!cell) {
-                return <View key={colIndex} style={styles.dayCell} />;
-              }
-
-              const date = new Date(viewYear, viewMonth, cell.day);
-              const isSelected = selected ? isSameDay(date, selected) : false;
-              const isToday = isSameDay(date, today);
-              const disabled = isOutOfRange(date, min, max);
-
-              return (
-                <Pressable
-                  key={colIndex}
-                  onPress={() => selectDay(cell.day)}
-                  disabled={disabled}
-                  accessibilityRole="button"
-                  accessibilityLabel={date.toLocaleDateString('en', {
-                    month: 'long',
-                    day: 'numeric',
-                    year: 'numeric',
-                  })}
-                  accessibilityState={{
-                    selected: isSelected,
-                    disabled,
-                  }}
-                  style={({ pressed }) => [
-                    styles.dayCell,
-                    isSelected && {
-                      backgroundColor: colors.colorInteractive,
-                    },
-                    isToday &&
-                      !isSelected && [
-                        styles.today,
-                        { borderColor: colors.colorInteractive },
-                      ],
-                    disabled && styles.disabled,
-                    pressed && !disabled && styles.pressed,
-                  ]}
-                >
-                  <Text
-                    style={[
-                      styles.dayText,
-                      {
-                        color: isSelected
-                          ? colors.colorOnInteractive
-                          : colors.colorOnBg,
-                        fontWeight: isToday
-                          ? font.weight.semibold
-                          : font.weight.body,
-                      },
-                    ]}
-                  >
-                    {cell.day}
-                  </Text>
-                </Pressable>
-              );
-            })}
-          </View>
-        ))}
-      </View>
-    </View>
-  );
-}

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

@@ -1,55 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Carousel.native.stories';
-
-<Meta of={Stories} />
-
-# Carousel (React Native)
-
-React Native carousel component using a horizontally paging ScrollView with dot indicators and Previous/Next navigation. Tracks the active slide via scroll position.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { Carousel } from '@boostdev/design-system-components';
-import { View, Text } from 'react-native';
-
-<Carousel
-  label="Product images"
-  items={[
-    <View><Text>Slide 1</Text></View>,
-    <View><Text>Slide 2</Text></View>,
-    <View><Text>Slide 3</Text></View>,
-  ]}
-/>
-```
-
-## Examples
-
-### Default (5 slides)
-<Canvas of={Stories.Default} />
-
-### Two slides
-<Canvas of={Stories.TwoSlides} />
-
-### Single slide
-<Canvas of={Stories.SingleSlide} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `ReactNode[]` | -- | Array of slide content |
-| `label` | `string` | -- | Accessible label for the carousel |
-| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the container |
-
-## Accessibility
-
-- Container has an accessible label describing the carousel
-- Previous/Next buttons have descriptive labels and disabled states at bounds
-- Dot indicators have `button` role with `selected` state and descriptive labels (e.g. "Go to slide 2")

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

@@ -1,55 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Carousel } from './Carousel.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Carousel (native)', () => {
-  const items = [
-    <span key="1">Slide 1</span>,
-    <span key="2">Slide 2</span>,
-    <span key="3">Slide 3</span>,
-  ];
-
-  it('renders all slide items', () => {
-    renderWithTheme(<Carousel items={items} label="Test carousel" />);
-    expect(screen.getByText('Slide 1')).toBeInTheDocument();
-    expect(screen.getByText('Slide 2')).toBeInTheDocument();
-    expect(screen.getByText('Slide 3')).toBeInTheDocument();
-  });
-
-  it('renders Previous and Next buttons', () => {
-    renderWithTheme(<Carousel items={items} label="Test carousel" />);
-    expect(screen.getByRole('button', { name: 'Previous' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
-  });
-
-  it('renders dot indicators for each slide', () => {
-    renderWithTheme(<Carousel items={items} label="Test carousel" />);
-    expect(screen.getByRole('button', { name: 'Go to slide 1' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Go to slide 2' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Go to slide 3' })).toBeInTheDocument();
-  });
-
-  it('has accessible label on the container', () => {
-    renderWithTheme(<Carousel items={items} label="Product images" />);
-    expect(screen.getByLabelText('Product images')).toBeInTheDocument();
-  });
-
-  it('disables Previous button at the first slide', () => {
-    renderWithTheme(<Carousel items={items} label="Test carousel" />);
-    expect(screen.getByRole('button', { name: 'Previous' })).toHaveAttribute(
-      'aria-disabled',
-      'true',
-    );
-  });
-
-  it('renders a single slide without errors', () => {
-    renderWithTheme(
-      <Carousel items={[<span key="1">Only slide</span>]} label="Single" />,
-    );
-    expect(screen.getByText('Only slide')).toBeInTheDocument();
-  });
-});

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

@@ -1,59 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Carousel } from './Carousel.native';
-
-const slideStyles = StyleSheet.create({
-  slide: {
-    height: 200,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 12,
-  },
-  text: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#fff',
-  },
-});
-
-const slideColors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
-
-const sampleItems = slideColors.map((color, i) => (
-  <View key={i} style={[slideStyles.slide, { backgroundColor: color }]}>
-    <Text style={slideStyles.text}>Slide {i + 1}</Text>
-  </View>
-));
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Carousel',
-  component: Carousel,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Carousel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    items: sampleItems,
-    label: 'Demo carousel',
-  },
-};
-
-export const TwoSlides: Story = {
-  args: {
-    items: sampleItems.slice(0, 2),
-    label: 'Two-slide carousel',
-  },
-};
-
-export const SingleSlide: Story = {
-  args: {
-    items: sampleItems.slice(0, 1),
-    label: 'Single-slide carousel',
-  },
-};

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

@@ -1,184 +0,0 @@
-import { ReactNode, useCallback, useRef, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  ScrollView,
-  NativeSyntheticEvent,
-  NativeScrollEvent,
-  Dimensions,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { spacing, border } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-interface CarouselProps {
-  items: ReactNode[];
-  label: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const DOT_SIZE = 8;
-const DOT_HIT_SIZE = 44;
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  scrollView: {
-    flexGrow: 0,
-  },
-  slide: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  nav: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: spacing.xs,
-    paddingVertical: spacing.s,
-  },
-  navButton: {
-    minWidth: 44,
-    minHeight: 44,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: border.radius.s,
-  },
-  navText: {
-    fontSize: 20,
-    fontWeight: '600',
-  },
-  dots: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.xs,
-  },
-  dotWrapper: {
-    minWidth: DOT_HIT_SIZE,
-    minHeight: DOT_HIT_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  dot: {
-    width: DOT_SIZE,
-    height: DOT_SIZE,
-    borderRadius: DOT_SIZE / 2,
-  },
-  pressed: {
-    opacity: 0.75,
-  },
-});
-
-export function Carousel({
-  items,
-  label,
-  style,
-}: Readonly<CarouselProps>) {
-  const { colors } = useTheme();
-  const scrollRef = useRef<ScrollView>(null);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [slideWidth, setSlideWidth] = useState(Dimensions.get('window').width);
-
-  const handleScroll = useCallback(
-    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const offset = e.nativeEvent.contentOffset.x;
-      const width = e.nativeEvent.layoutMeasurement.width;
-      if (width > 0) {
-        const index = Math.round(offset / width);
-        setActiveIndex(index);
-      }
-    },
-    [],
-  );
-
-  const scrollTo = (index: number) => {
-    const clamped = Math.max(0, Math.min(index, items.length - 1));
-    scrollRef.current?.scrollTo({ x: clamped * slideWidth, animated: true });
-  };
-
-  return (
-    <View
-      style={[styles.container, style]}
-      accessibilityRole="none"
-      accessibilityLabel={label}
-    >
-      <ScrollView
-        ref={scrollRef}
-        horizontal
-        pagingEnabled
-        showsHorizontalScrollIndicator={false}
-        onScroll={handleScroll}
-        scrollEventThrottle={16}
-        onLayout={e => setSlideWidth(e.nativeEvent.layout.width)}
-        style={styles.scrollView}
-      >
-        {items.map((item, index) => (
-          <View key={index} style={[styles.slide, { width: slideWidth }]}>
-            {item}
-          </View>
-        ))}
-      </ScrollView>
-
-      <View style={styles.nav}>
-        <Pressable
-          onPress={() => scrollTo(activeIndex - 1)}
-          disabled={activeIndex <= 0}
-          accessibilityRole="button"
-          accessibilityLabel="Previous"
-          accessibilityState={{ disabled: activeIndex <= 0 }}
-          style={({ pressed }) => [
-            styles.navButton,
-            activeIndex <= 0 && { opacity: 0.4 },
-            pressed && styles.pressed,
-          ]}
-        >
-          <Text style={[styles.navText, { color: colors.colorOnBg }]}>‹</Text>
-        </Pressable>
-
-        <View style={styles.dots}>
-          {items.map((_, index) => (
-            <Pressable
-              key={index}
-              onPress={() => scrollTo(index)}
-              accessibilityRole="button"
-              accessibilityLabel={`Go to slide ${index + 1}`}
-              accessibilityState={{ selected: activeIndex === index }}
-              style={styles.dotWrapper}
-            >
-              <View
-                style={[
-                  styles.dot,
-                  {
-                    backgroundColor:
-                      activeIndex === index
-                        ? colors.colorInteractive
-                        : colors.colorBgSubtle,
-                  },
-                ]}
-              />
-            </Pressable>
-          ))}
-        </View>
-
-        <Pressable
-          onPress={() => scrollTo(activeIndex + 1)}
-          disabled={activeIndex >= items.length - 1}
-          accessibilityRole="button"
-          accessibilityLabel="Next"
-          accessibilityState={{ disabled: activeIndex >= items.length - 1 }}
-          style={({ pressed }) => [
-            styles.navButton,
-            activeIndex >= items.length - 1 && { opacity: 0.4 },
-            pressed && styles.pressed,
-          ]}
-        >
-          <Text style={[styles.navText, { color: colors.colorOnBg }]}>›</Text>
-        </Pressable>
-      </View>
-    </View>
-  );
-}

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

@@ -1,53 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Collapsible.native.stories';
-
-<Meta of={Stories} />
-
-# Collapsible (React Native)
-
-React Native collapsible section with an animated chevron and smooth expand/collapse transitions. Supports both controlled and uncontrolled modes.
-
-> **Status: alpha** -- API may change before stable release.
-
-## Usage
-
-```tsx
-import { Collapsible } from '@boostdev/design-system-components';
-
-<Collapsible summary="More details">
-  <Text>Hidden content revealed on press.</Text>
-</Collapsible>
-```
-
-## Examples
-
-### Default (collapsed)
-<Canvas of={Stories.Default} />
-
-### Default open
-<Canvas of={Stories.DefaultOpen} />
-
-### Multiple sections
-<Canvas of={Stories.Multiple} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `summary` | `string` | -- | The trigger label, always visible |
-| `children` | `ReactNode` | -- | Content revealed when expanded |
-| `open` | `boolean` | -- | Controlled open state |
-| `defaultOpen` | `boolean` | `false` | Uncontrolled initial open state |
-| `onToggle` | `(open: boolean) => void` | -- | Called after each toggle with the new open state |
-| `name` | `string` | -- | Grouping name (informational in native) |
-| `style` | `StyleProp<ViewStyle>` | -- | Custom style for the container |
-
-## Accessibility
-
-- Header has `button` role with `expanded` state
-- Chevron icon is hidden from the accessibility tree
-- Content appears/disappears with LayoutAnimation for smooth transitions