@boostdev/design-system-components 1.2.2 → 1.2.4

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

@@ -0,0 +1,294 @@
+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.module.css

@@ -32,7 +32,7 @@
     justify-content: center;
     inline-size: 2.5rem;
     block-size: 2.5rem;
-    border-radius: 50%;
+    border-radius: var(--carousel_indicator-radius, var(--bds-border_radius--circle));
     background-color: var(--bds-color_bg);
     color: var(--bds-color_on-bg);
 

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

@@ -0,0 +1,55 @@
+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/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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,184 @@
+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>
+  );
+}