@boostdev/design-system-components 2.4.2 → 2.5.0

package/src/components/interaction/form/Textarea/Textarea.native.tsx

@@ -1,108 +0,0 @@
-import { ReactNode, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { spacing, font, border, lineHeight } from '../../../../native/tokens';
-import { useTheme } from '../../../../native/ThemeContext';
-import { Label } from '../atoms/Label.native';
-import { Message } from '../atoms/Message.native';
-
-interface TextareaProps {
-  label: ReactNode;
-  name: string;
-  value?: string;
-  defaultValue?: string;
-  placeholder?: string;
-  error?: string;
-  hint?: string;
-  disabled?: boolean;
-  numberOfLines?: number;
-  onChange?: (value: string) => void;
-  onBlur?: () => void;
-  onFocus?: () => void;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    gap: spacing.xxs,
-  },
-  textarea: {
-    fontFamily: font.family.body,
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-    paddingHorizontal: spacing.s,
-    paddingVertical: spacing.xs,
-    borderWidth: 1,
-    borderRadius: border.radius.xs,
-    minHeight: 100,
-    textAlignVertical: 'top',
-  },
-});
-
-export function Textarea({
-  label,
-  name,
-  value,
-  defaultValue,
-  placeholder,
-  error,
-  hint,
-  disabled = false,
-  numberOfLines = 4,
-  onChange,
-  onBlur,
-  onFocus,
-  style,
-}: Readonly<TextareaProps>) {
-  const { colors } = useTheme();
-  const [focused, setFocused] = useState(false);
-
-  const borderColor = error
-    ? colors.colorError
-    : focused
-      ? colors.colorInteractive
-      : colors.colorOnBg;
-
-  return (
-    <View style={[styles.container, style]}>
-      <Label label={label} />
-      <TextInput
-        accessibilityLabel={typeof label === 'string' ? label : name}
-        accessibilityState={{ disabled }}
-        accessibilityHint={hint}
-        multiline
-        numberOfLines={numberOfLines}
-        value={value}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        placeholderTextColor={colors.colorOnBgSubtle}
-        editable={!disabled}
-        onChangeText={onChange}
-        onFocus={() => {
-          setFocused(true);
-          onFocus?.();
-        }}
-        onBlur={() => {
-          setFocused(false);
-          onBlur?.();
-        }}
-        style={[
-          styles.textarea,
-          {
-            borderColor,
-            color: colors.colorOnBg,
-            backgroundColor: colors.colorBg,
-          },
-          disabled && { opacity: 0.4 },
-        ]}
-      />
-      <Message type="error" message={error} />
-      <Message type="hint" message={hint} />
-    </View>
-  );
-}

package/src/components/interaction/form/atoms/Label.native.spec.tsx

@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Label } from './Label.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Label (native)', () => {
-  it('renders the label text', () => {
-    renderWithTheme(<Label label="Email address" />);
-    expect(screen.getByText('Email address')).toBeInTheDocument();
-  });
-
-  it('renders ReactNode content as label', () => {
-    renderWithTheme(
-      <Label
-        label={
-          <span data-testid="custom-label">
-            Custom <strong>label</strong>
-          </span>
-        }
-      />,
-    );
-    expect(screen.getByTestId('custom-label')).toBeInTheDocument();
-  });
-
-  it('applies semibold font weight', () => {
-    renderWithTheme(<Label label="Name" />);
-    const label = screen.getByText('Name');
-    expect(label).toHaveStyle({ fontWeight: expect.stringMatching(/600|bold|semibold/) });
-  });
-
-  it('applies custom style when provided', () => {
-    renderWithTheme(<Label label="Name" style={{ marginBottom: 8 }} />);
-    const label = screen.getByText('Name');
-    expect(label).toHaveStyle({ marginBottom: 8 });
-  });
-});

package/src/components/interaction/form/atoms/Label.native.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Label } from './Label.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/Label',
-  component: Label,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'centered' },
-} satisfies Meta<typeof Label>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = { args: { label: 'Email address' } };
-export const LongLabel: Story = { args: { label: 'Please enter your full legal name as it appears on your passport' } };

package/src/components/interaction/form/atoms/Label.native.tsx

@@ -1,29 +0,0 @@
-import { ReactNode } from 'react';
-import { Text, StyleProp, TextStyle } from 'react-native';
-import { font, lineHeight } from '../../../../native/tokens';
-import { useTheme } from '../../../../native/ThemeContext';
-
-interface LabelProps {
-  label: ReactNode;
-  style?: StyleProp<TextStyle>;
-}
-
-export function Label({ label, style }: LabelProps) {
-  const { colors } = useTheme();
-  return (
-    <Text
-      style={[
-        {
-          fontFamily: font.family.body,
-          fontSize: font.size.body,
-          lineHeight: lineHeight.body,
-          fontWeight: font.weight.semibold,
-          color: colors.colorOnBg,
-        },
-        style,
-      ]}
-    >
-      {label}
-    </Text>
-  );
-}

package/src/components/interaction/form/atoms/Message.native.spec.tsx

@@ -1,30 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Message } from './Message.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Message (native)', () => {
-  it('renders nothing when message is undefined', () => {
-    const { container } = renderWithTheme(<Message type="error" message={undefined} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders error message with alert role', () => {
-    renderWithTheme(<Message type="error" message="This field is required." />);
-    expect(screen.getByRole('alert')).toHaveTextContent('This field is required.');
-  });
-
-  it('announces error messages assertively', () => {
-    renderWithTheme(<Message type="error" message="This field is required." />);
-    expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
-  });
-
-  it('announces hint messages politely', () => {
-    renderWithTheme(<Message type="hint" message="Use at least 8 characters." />);
-    const hint = screen.getByText('Use at least 8 characters.');
-    expect(hint).toHaveAttribute('aria-live', 'polite');
-  });
-});

package/src/components/interaction/form/atoms/Message.native.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../../native/ThemeContext';
-import { Message } from './Message.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Form/Message',
-  component: Message,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    type: { control: 'select', options: ['hint', 'error'] },
-  },
-} satisfies Meta<typeof Message>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Hint: Story = { args: { type: 'hint', message: 'Use at least 8 characters.' } };
-export const Error: Story = { args: { type: 'error', message: 'This field is required.' } };
-export const Empty: Story = { args: { type: 'hint', message: undefined } };

package/src/components/interaction/form/atoms/Message.native.tsx

@@ -1,34 +0,0 @@
-import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
-import { font, lineHeight } from '../../../../native/tokens';
-import { useTheme } from '../../../../native/ThemeContext';
-
-interface MessageProps {
-  type: 'hint' | 'error';
-  message: string | undefined;
-  style?: StyleProp<TextStyle>;
-}
-
-const styles = StyleSheet.create({
-  base: {
-    fontFamily: font.family.body,
-    fontSize: font.size.bodyS,
-    lineHeight: lineHeight.bodyS,
-  },
-});
-
-export function Message({ message, type, style }: MessageProps) {
-  const { colors } = useTheme();
-  if (!message) return null;
-
-  const color = type === 'error' ? colors.colorError : colors.colorOnBgSubtle;
-
-  return (
-    <Text
-      accessibilityRole={type === 'error' ? 'alert' : 'none'}
-      accessibilityLiveRegion={type === 'error' ? 'assertive' : 'polite'}
-      style={[styles.base, { color }, style]}
-    >
-      {message}
-    </Text>
-  );
-}

package/src/components/layout/ButtonGroup/ButtonGroup.native.spec.tsx

@@ -1,83 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { ButtonGroup } from './ButtonGroup.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('ButtonGroup (native)', () => {
-  it('renders children', () => {
-    renderWithTheme(
-      <ButtonGroup>
-        <span data-testid="child-a">A</span>
-        <span data-testid="child-b">B</span>
-      </ButtonGroup>,
-    );
-    expect(screen.getByTestId('child-a')).toBeInTheDocument();
-    expect(screen.getByTestId('child-b')).toBeInTheDocument();
-  });
-
-  it('applies accessibilityLabel to the container', () => {
-    const { container } = renderWithTheme(
-      <ButtonGroup accessibilityLabel="Actions">
-        <span>OK</span>
-      </ButtonGroup>,
-    );
-    expect(container.firstChild).toHaveAttribute('aria-label', 'Actions');
-  });
-
-  it('renders without accessibilityLabel when not provided', () => {
-    const { container } = renderWithTheme(
-      <ButtonGroup>
-        <span>OK</span>
-      </ButtonGroup>,
-    );
-    expect(container.firstChild).not.toHaveAttribute('aria-label');
-  });
-
-  it('renders in row direction by default', () => {
-    const { container } = renderWithTheme(
-      <ButtonGroup>
-        <span>A</span>
-      </ButtonGroup>,
-    );
-    expect(container.firstChild).toHaveStyle({ flexDirection: 'row' });
-  });
-
-  it('renders in row direction for flow variant', () => {
-    const { container } = renderWithTheme(
-      <ButtonGroup variant="flow">
-        <span>A</span>
-      </ButtonGroup>,
-    );
-    expect(container.firstChild).toHaveStyle({ flexDirection: 'row' });
-  });
-
-  it('renders in row direction for content variant', () => {
-    const { container } = renderWithTheme(
-      <ButtonGroup variant="content">
-        <span>A</span>
-      </ButtonGroup>,
-    );
-    expect(container.firstChild).toHaveStyle({ flexDirection: 'row' });
-  });
-
-  it('renders in column direction for card variant', () => {
-    const { container } = renderWithTheme(
-      <ButtonGroup variant="card">
-        <span>A</span>
-      </ButtonGroup>,
-    );
-    expect(container.firstChild).toHaveStyle({ flexDirection: 'column' });
-  });
-
-  it('renders in column direction for modal variant', () => {
-    const { container } = renderWithTheme(
-      <ButtonGroup variant="modal">
-        <span>A</span>
-      </ButtonGroup>,
-    );
-    expect(container.firstChild).toHaveStyle({ flexDirection: 'column' });
-  });
-});

package/src/components/layout/ButtonGroup/ButtonGroup.native.stories.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { ButtonGroup } from './ButtonGroup.native';
-import { Button } from '../../interaction/Button/Button.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Layout/ButtonGroup',
-  component: ButtonGroup,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    variant: { control: 'select', options: ['flow', 'card', 'modal', 'content'] },
-  },
-} satisfies Meta<typeof ButtonGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Flow: Story = {
-  render: (args) => (
-    <ButtonGroup {...args} variant="flow">
-      <Button>Primary</Button>
-      <Button variant="ghost">Secondary</Button>
-    </ButtonGroup>
-  ),
-};
-export const Card: Story = {
-  render: (args) => (
-    <ButtonGroup {...args} variant="card">
-      <Button>Confirm</Button>
-      <Button variant="ghost">Cancel</Button>
-    </ButtonGroup>
-  ),
-};
-export const Modal: Story = {
-  render: (args) => (
-    <ButtonGroup {...args} variant="modal">
-      <Button>Save</Button>
-      <Button variant="ghost">Discard</Button>
-    </ButtonGroup>
-  ),
-};

package/src/components/layout/ButtonGroup/ButtonGroup.native.tsx

@@ -1,44 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
-import { spacing } from '../../../native/tokens';
-
-export interface ButtonContainerProps {
-  children: ReactNode;
-  variant?: 'flow' | 'card' | 'modal' | 'content';
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  group: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: spacing.xs,
-  },
-  column: {
-    flexDirection: 'column',
-    gap: spacing.xs,
-  },
-});
-
-export function ButtonContainer({ children, variant, accessibilityLabel, style }: ButtonContainerProps) {
-  const isColumn = variant === 'card' || variant === 'modal';
-  return (
-    <View
-      accessibilityLabel={accessibilityLabel}
-      style={[isColumn ? styles.column : styles.group, style]}
-    >
-      {children}
-    </View>
-  );
-}
-
-/**
- * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
- */
-export const ButtonGroup = ButtonContainer;
-
-/**
- * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
- */
-export type ButtonGroupProps = ButtonContainerProps;

package/src/components/layout/Card/Card.native.spec.tsx

@@ -1,102 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Card } from './Card.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Card (native)', () => {
-  it('renders children', () => {
-    renderWithTheme(
-      <Card>
-        <span data-testid="content">Hello</span>
-      </Card>,
-    );
-    expect(screen.getByTestId('content')).toBeInTheDocument();
-  });
-
-  it('renders as a View when onPress is not provided', () => {
-    const { container } = renderWithTheme(
-      <Card>
-        <span>Content</span>
-      </Card>,
-    );
-    expect(container.firstChild).not.toHaveAttribute('role');
-  });
-
-  it('renders as a Pressable with button role when onPress is provided', () => {
-    const handlePress = vi.fn();
-    renderWithTheme(
-      <Card onPress={handlePress} accessibilityLabel="Tap me">
-        <span>Content</span>
-      </Card>,
-    );
-    expect(screen.getByRole('button', { name: 'Tap me' })).toBeInTheDocument();
-  });
-
-  it('calls onPress when pressed', () => {
-    const handlePress = vi.fn();
-    renderWithTheme(
-      <Card onPress={handlePress} accessibilityLabel="Tap me">
-        <span>Content</span>
-      </Card>,
-    );
-    fireEvent.click(screen.getByRole('button'));
-    expect(handlePress).toHaveBeenCalledOnce();
-  });
-
-  it('applies accessibilityLabel to the pressable card', () => {
-    renderWithTheme(
-      <Card onPress={() => {}} accessibilityLabel="Product card">
-        <span>Content</span>
-      </Card>,
-    );
-    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Product card');
-  });
-
-  it('applies border for outlined variant', () => {
-    const { container } = renderWithTheme(
-      <Card variant="outlined">
-        <span>Content</span>
-      </Card>,
-    );
-    expect(container.firstChild).toHaveStyle({ borderWidth: 1 });
-  });
-
-  it('renders elevated variant without throwing', () => {
-    renderWithTheme(
-      <Card variant="elevated">
-        <span data-testid="elevated-content">Content</span>
-      </Card>,
-    );
-    expect(screen.getByTestId('elevated-content')).toBeInTheDocument();
-  });
-
-  it('renders with no padding when padding is none', () => {
-    const { container } = renderWithTheme(
-      <Card padding="none">
-        <span>Content</span>
-      </Card>,
-    );
-    expect(container.firstChild).toHaveStyle({ padding: 0 });
-  });
-
-  it('centers content when textAlign is center', () => {
-    const { container } = renderWithTheme(
-      <Card textAlign="center">
-        <span>Content</span>
-      </Card>,
-    );
-    expect(container.firstChild).toHaveStyle({ alignItems: 'center' });
-  });
-
-  it('aligns content to flex-end when textAlign is end', () => {
-    const { container } = renderWithTheme(
-      <Card textAlign="end">
-        <span>Content</span>
-      </Card>,
-    );
-    expect(container.firstChild).toHaveStyle({ alignItems: 'flex-end' });
-  });
-});

package/src/components/layout/Card/Card.native.stories.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Card } from './Card.native';
-import { Typography } from '../../ui/Typography/Typography.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/Layout/Card',
-  component: Card,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    variant: { control: 'select', options: ['default', 'elevated', 'outlined'] },
-    padding: { control: 'select', options: ['none', 'small', 'medium', 'large'] },
-    textAlign: { control: 'select', options: ['start', 'center', 'end'] },
-  },
-} satisfies Meta<typeof Card>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { children: <Typography>Card content goes here.</Typography>, variant: 'default', padding: 'medium' },
-};
-export const Elevated: Story = {
-  args: { children: <Typography>Elevated card with shadow.</Typography>, variant: 'elevated', padding: 'medium' },
-};
-export const Outlined: Story = {
-  args: { children: <Typography>Outlined card with border.</Typography>, variant: 'outlined', padding: 'medium' },
-};
-export const Pressable: Story = {
-  args: {
-    children: <Typography>Tap me!</Typography>,
-    variant: 'outlined',
-    padding: 'medium',
-    onPress: () => {},
-  },
-};
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxWidth: 320 }}>
-      {(['default', 'elevated', 'outlined'] as const).map(v => (
-        <Card key={v} variant={v} padding="medium">
-          <Typography variant="h3">{v.charAt(0).toUpperCase() + v.slice(1)}</Typography>
-          <Typography>Card with {v} variant.</Typography>
-        </Card>
-      ))}
-    </div>
-  ),
-};