@boostdev/design-system-components 2.4.2 → 2.5.0

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

@@ -1,84 +0,0 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type ProgressSize = 'small' | 'medium' | 'large';
-
-interface ProgressProps {
-  value: number;
-  max?: number;
-  label: string;
-  showLabel?: boolean;
-  size?: ProgressSize;
-  style?: StyleProp<ViewStyle>;
-}
-
-const trackHeight: Record<ProgressSize, number> = {
-  small:  4,
-  medium: 8,
-  large:  12,
-};
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  labelRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: spacing.xxs,
-  },
-  labelText: {
-    fontSize: font.size.bodyS,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.bodyS,
-  },
-  track: {
-    width: '100%',
-    borderRadius: border.radius.full,
-    overflow: 'hidden',
-  },
-  fill: {
-    height: '100%',
-    borderRadius: border.radius.full,
-  },
-});
-
-export function Progress({
-  value,
-  max = 100,
-  label,
-  showLabel = false,
-  size = 'medium',
-  style,
-}: Readonly<ProgressProps>) {
-  const { colors } = useTheme();
-  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
-  const height = trackHeight[size];
-
-  return (
-    <View style={[styles.container, style]}>
-      {showLabel && (
-        <View style={styles.labelRow}>
-          <Text style={[styles.labelText, { color: colors.colorOnBg }]}>{label}</Text>
-          <Text style={[styles.labelText, { color: colors.colorOnBgSubtle }]}>
-            {Math.round(percentage)}%
-          </Text>
-        </View>
-      )}
-      <View
-        style={[styles.track, { height, backgroundColor: colors.colorBgSubtle }]}
-        accessibilityRole="progressbar"
-        accessibilityLabel={label}
-        accessibilityValue={{ min: 0, max, now: value }}
-      >
-        <View
-          style={[
-            styles.fill,
-            { width: `${percentage}%`, backgroundColor: colors.colorInteractive },
-          ]}
-        />
-      </View>
-    </View>
-  );
-}

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

@@ -1,63 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './ProgressCircle.native.stories';
-
-<Meta of={Stories} />
-
-# ProgressCircle (React Native)
-
-React Native circular progress indicator. Displays progress as a ring with an optional percentage label in the center.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { ProgressCircle } from '@boostdev/design-system-components';
-
-<ProgressCircle value={75} label="Upload progress" showValue />
-<ProgressCircle value={50} label="Loading" size="large" />
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### With value label
-<Canvas of={Stories.WithValue} />
-
-### Small
-<Canvas of={Stories.Small} />
-
-### Large
-<Canvas of={Stories.Large} />
-
-### Complete
-<Canvas of={Stories.Complete} />
-
-### Empty
-<Canvas of={Stories.Empty} />
-
-### All sizes
-<Canvas of={Stories.AllSizes} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number` | — | Current progress value |
-| `max` | `number` | `100` | Maximum value |
-| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Circle dimensions (40, 64, 96px) |
-| `label` | `string` | — | Accessible label for the progress indicator |
-| `showValue` | `boolean` | `false` | Show percentage text in the center |
-| `style` | `StyleProp<ViewStyle>` | — | Override container styles |
-
-## Accessibility
-
-- Uses `accessibilityRole="progressbar"` with `accessibilityValue` for min, max, and current
-- `label` prop provides the screen reader description
-- Percentage text is hidden from assistive technologies when `showValue` is true

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

@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { ProgressCircle } from './ProgressCircle.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('ProgressCircle (native)', () => {
-  it('has progressbar role with accessible label', () => {
-    renderWithTheme(<ProgressCircle value={60} label="Upload progress" />);
-    expect(screen.getByRole('progressbar', { name: 'Upload progress' })).toBeInTheDocument();
-  });
-
-  it('renders the progressbar element', () => {
-    renderWithTheme(<ProgressCircle value={75} max={100} label="Loading" />);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-  });
-
-  it('shows percentage text when showValue is true', () => {
-    renderWithTheme(<ProgressCircle value={60} label="Progress" showValue />);
-    expect(screen.getByText('60%')).toBeInTheDocument();
-  });
-
-  it('does not show percentage text by default', () => {
-    renderWithTheme(<ProgressCircle value={60} label="Progress" />);
-    expect(screen.queryByText('60%')).not.toBeInTheDocument();
-  });
-
-  it('clamps value at 100%', () => {
-    renderWithTheme(<ProgressCircle value={150} max={100} label="Overflow" showValue />);
-    expect(screen.getByText('100%')).toBeInTheDocument();
-  });
-
-  it('clamps value at 0%', () => {
-    renderWithTheme(<ProgressCircle value={-10} max={100} label="Underflow" showValue />);
-    expect(screen.getByText('0%')).toBeInTheDocument();
-  });
-});

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { ProgressCircle } from './ProgressCircle.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/ProgressCircle',
-  component: ProgressCircle,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
-    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
-  },
-} satisfies Meta<typeof ProgressCircle>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = { args: { value: 60, label: 'Progress' } };
-export const WithValue: Story = { args: { value: 75, label: 'Upload progress', showValue: true } };
-export const Small: Story = { args: { value: 50, label: 'Small progress', size: 'small' } };
-export const Large: Story = { args: { value: 80, label: 'Large progress', size: 'large', showValue: true } };
-export const Complete: Story = { args: { value: 100, label: 'Complete', showValue: true } };
-export const Empty: Story = { args: { value: 0, label: 'Not started', showValue: true } };
-
-export const AllSizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-      {(['small', 'medium', 'large'] as const).map(s => (
-        <ProgressCircle key={s} value={65} label={`${s} progress`} size={s} showValue={s !== 'small'} />
-      ))}
-    </div>
-  ),
-};

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

@@ -1,176 +0,0 @@
-import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
-import { font } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type ProgressCircleSize = 'small' | 'medium' | 'large';
-
-interface ProgressCircleProps {
-  value: number;
-  max?: number;
-  size?: ProgressCircleSize;
-  label: string;
-  showValue?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-const SIZE_PX: Record<ProgressCircleSize, number> = {
-  small: 40,
-  medium: 64,
-  large: 96,
-};
-
-const STROKE_WIDTH: Record<ProgressCircleSize, number> = {
-  small: 3,
-  medium: 4,
-  large: 5,
-};
-
-const FONT_SIZE: Record<ProgressCircleSize, number> = {
-  small: font.size.bodyS - 2,
-  medium: font.size.bodyS,
-  large: font.size.body,
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  valueText: {
-    position: 'absolute',
-    fontFamily: font.family.body,
-    fontWeight: font.weight.semibold,
-  },
-});
-
-function HalfCircle({
-  size,
-  stroke,
-  color,
-  rotation,
-}: {
-  size: number;
-  stroke: number;
-  color: string;
-  rotation: number;
-}) {
-  return (
-    <View
-      style={{
-        width: size / 2,
-        height: size,
-        overflow: 'hidden',
-      }}
-    >
-      <View
-        style={{
-          width: size,
-          height: size,
-          borderRadius: size / 2,
-          borderWidth: stroke,
-          borderColor: color,
-          transform: [{ rotate: `${rotation}deg` }],
-        }}
-      />
-    </View>
-  );
-}
-
-export function ProgressCircle({
-  value,
-  max = 100,
-  size = 'medium',
-  label,
-  showValue = false,
-  style,
-}: Readonly<ProgressCircleProps>) {
-  const { colors } = useTheme();
-  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
-  const px = SIZE_PX[size];
-  const stroke = STROKE_WIDTH[size];
-  const fillColor = colors.colorInteractive;
-  const trackColor = colors.colorBgSubtle;
-
-  // Convert percentage to degrees (0-360)
-  const degrees = (percentage / 100) * 360;
-
-  return (
-    <View
-      style={[
-        styles.wrapper,
-        { width: px, height: px },
-        style,
-      ]}
-      accessibilityRole="progressbar"
-      accessibilityLabel={label}
-      accessibilityValue={{ min: 0, max, now: value }}
-    >
-      {/* Track: full circle background */}
-      <View
-        style={{
-          position: 'absolute',
-          width: px,
-          height: px,
-          borderRadius: px / 2,
-          borderWidth: stroke,
-          borderColor: trackColor,
-        }}
-      />
-
-      {/* Fill: right half (0-180°) */}
-      <View
-        style={{
-          position: 'absolute',
-          width: px / 2,
-          height: px,
-          start: px / 2,
-          overflow: 'hidden',
-        }}
-      >
-        <HalfCircle
-          size={px}
-          stroke={stroke}
-          color={percentage > 0 ? fillColor : 'transparent'}
-          rotation={Math.min(degrees, 180) - 180}
-        />
-      </View>
-
-      {/* Fill: left half (180-360°) */}
-      {degrees > 180 && (
-        <View
-          style={{
-            position: 'absolute',
-            width: px / 2,
-            height: px,
-            start: 0,
-            overflow: 'hidden',
-          }}
-        >
-          <View
-            style={{
-              position: 'absolute',
-              end: 0,
-            }}
-          >
-            <HalfCircle
-              size={px}
-              stroke={stroke}
-              color={fillColor}
-              rotation={Math.min(degrees - 180, 180)}
-            />
-          </View>
-        </View>
-      )}
-
-      {showValue && (
-        <Text
-          style={[styles.valueText, { fontSize: FONT_SIZE[size], color: colors.colorOnBg }]}
-          importantForAccessibility="no"
-          accessibilityElementsHidden={true}
-        >
-          {Math.round(percentage)}%
-        </Text>
-      )}
-    </View>
-  );
-}

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

@@ -1,39 +0,0 @@
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Separator } from './Separator.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Separator (native)', () => {
-  it('renders with presentation role', () => {
-    const { container } = renderWithTheme(<Separator />);
-    const element = container.firstChild as HTMLElement;
-    // react-native-web maps accessibilityRole="none" to role="presentation"
-    expect(element).toHaveAttribute('role', 'presentation');
-  });
-
-  it('renders a single element', () => {
-    const { container } = renderWithTheme(<Separator />);
-    expect(container.firstChild).toBeInTheDocument();
-    expect(container.childElementCount).toBe(1);
-  });
-
-  it('renders differently for vertical orientation', () => {
-    const { container: hContainer } = renderWithTheme(<Separator />);
-    const { container: vContainer } = renderWithTheme(<Separator orientation="vertical" />);
-    const hEl = hContainer.firstChild as HTMLElement;
-    const vEl = vContainer.firstChild as HTMLElement;
-    // Both render but with distinct class/style sets
-    expect(hEl.className).not.toBe(vEl.className);
-  });
-
-  it('applies custom style', () => {
-    const { container } = renderWithTheme(
-      <Separator style={{ marginTop: 16 }} />,
-    );
-    const element = container.firstChild as HTMLElement;
-    expect(element.style.marginTop).toBe('16px');
-  });
-});

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Separator } from './Separator.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Separator',
-  component: Separator,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    orientation: { control: 'select', options: ['horizontal', 'vertical'] },
-  },
-} satisfies Meta<typeof Separator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Horizontal: Story = {
-  render: (args) => (
-    <div style={{ width: 300 }}>
-      <Separator {...args} orientation="horizontal" />
-    </div>
-  ),
-};
-
-export const Vertical: Story = {
-  render: (args) => (
-    <div style={{ display: 'flex', height: 60, alignItems: 'stretch' }}>
-      <span>Left</span>
-      <div style={{ display: 'flex', margin: '0 8px' }}>
-        <Separator {...args} orientation="vertical" />
-      </div>
-      <span>Right</span>
-    </div>
-  ),
-};

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

@@ -1,32 +0,0 @@
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../../native/ThemeContext';
-
-interface SeparatorProps {
-  orientation?: 'horizontal' | 'vertical';
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  horizontal: {
-    height: StyleSheet.hairlineWidth,
-    width: '100%',
-  },
-  vertical: {
-    width: StyleSheet.hairlineWidth,
-    alignSelf: 'stretch',
-  },
-});
-
-export function Separator({ orientation = 'horizontal', style }: Readonly<SeparatorProps>) {
-  const { colors } = useTheme();
-  return (
-    <View
-      accessibilityRole="none"
-      style={[
-        orientation === 'vertical' ? styles.vertical : styles.horizontal,
-        { backgroundColor: colors.colorBgSubtle },
-        style,
-      ]}
-    />
-  );
-}

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

@@ -1,39 +0,0 @@
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Skeleton } from './Skeleton.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Skeleton (native)', () => {
-  it('renders without crashing', () => {
-    const { container } = renderWithTheme(<Skeleton />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('marks content as not important for accessibility', () => {
-    const { container } = renderWithTheme(<Skeleton />);
-    const element = container.firstChild as HTMLElement;
-    // importantForAccessibility="no-hide-descendants" hides descendants from a11y tree
-    // In react-native-web this renders as aria-hidden on the element
-    expect(element).toBeTruthy();
-    // The element should not have any accessible role
-    expect(element.getAttribute('role')).toBeNull();
-  });
-
-  it('applies custom style', () => {
-    const { container } = renderWithTheme(
-      <Skeleton style={{ width: 200, height: 20 }} />,
-    );
-    const element = container.firstChild as HTMLElement;
-    expect(element.style.width).toBe('200px');
-    expect(element.style.height).toBe('20px');
-  });
-
-  it('has a background color from the theme', () => {
-    const { container } = renderWithTheme(<Skeleton />);
-    const element = container.firstChild as HTMLElement;
-    expect(element.style.backgroundColor).toBeTruthy();
-  });
-});

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Skeleton } from './Skeleton.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Skeleton',
-  component: Skeleton,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Skeleton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Text: Story = {
-  render: (args) => <Skeleton {...args} style={{ width: 200, height: 16 }} />,
-};
-export const Avatar: Story = {
-  render: (args) => <Skeleton {...args} style={{ width: 48, height: 48, borderRadius: 999 }} />,
-};
-export const Card: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: 280 }}>
-      <Skeleton style={{ width: 280, height: 160 }} />
-      <Skeleton style={{ width: 200, height: 16 }} />
-      <Skeleton style={{ width: 140, height: 14 }} />
-    </div>
-  ),
-};

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

@@ -1,42 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { border } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-interface SkeletonProps {
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  skeleton: {
-    borderRadius: border.radius.xs,
-    overflow: 'hidden',
-  },
-});
-
-export function Skeleton({ style }: SkeletonProps) {
-  const { colors } = useTheme();
-  const opacity = useRef(new Animated.Value(1)).current;
-
-  useEffect(() => {
-    const anim = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, { toValue: 0.4, duration: 700, useNativeDriver: true }),
-        Animated.timing(opacity, { toValue: 1,   duration: 700, useNativeDriver: true }),
-      ]),
-    );
-    anim.start();
-    return () => anim.stop();
-  }, [opacity]);
-
-  return (
-    <Animated.View
-      importantForAccessibility="no-hide-descendants"
-      style={[
-        styles.skeleton,
-        { backgroundColor: colors.colorBgSubtle, opacity },
-        style,
-      ]}
-    />
-  );
-}