@boostdev/design-system-react-native 0.1.0 → 0.2.0

package/src/components/ui/Tabs/Tabs.tsx

@@ -0,0 +1,133 @@
+import { ReactNode, useState } from 'react';
+import {
+  AccessibilityRole,
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+export interface TabItem {
+  id: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+interface TabsProps {
+  tabs: TabItem[];
+  defaultTab?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  tabList: {
+    flexDirection: 'row',
+    borderBottomWidth: 2,
+  },
+  tabButton: {
+    minHeight: 44,
+    paddingHorizontal: spacing.m,
+    paddingVertical: spacing.s,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 2,
+    marginBottom: -2,
+  },
+  tabLabel: {
+    fontSize: font.size.body,
+    fontFamily: font.family.body,
+    lineHeight: lineHeight.body,
+  },
+  panel: {
+    paddingVertical: spacing.m,
+  },
+  pressed: {
+    opacity: 0.75,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});
+
+export function Tabs({
+  tabs,
+  defaultTab,
+  style,
+}: Readonly<TabsProps>) {
+  const { colors } = useTheme();
+  const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0]?.id);
+
+  return (
+    <View style={[styles.container, style]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={[styles.tabList, { borderBottomColor: colors.colorBgSubtle }]}
+        accessibilityRole="tabbar"
+      >
+        {tabs.map(tab => {
+          const isActive = activeTab === tab.id;
+
+          return (
+            <Pressable
+              key={tab.id}
+              onPress={() => setActiveTab(tab.id)}
+              disabled={tab.disabled}
+              accessibilityRole="tab"
+              accessibilityState={{
+                selected: isActive,
+                disabled: tab.disabled,
+              }}
+              accessibilityLabel={typeof tab.label === 'string' ? tab.label : undefined}
+              style={({ pressed }) => [
+                styles.tabButton,
+                {
+                  borderBottomColor: isActive
+                    ? colors.colorInteractive
+                    : 'transparent',
+                },
+                tab.disabled && styles.disabled,
+                pressed && !tab.disabled && styles.pressed,
+              ]}
+            >
+              <Text
+                style={[
+                  styles.tabLabel,
+                  {
+                    color: isActive
+                      ? colors.colorInteractive
+                      : colors.colorOnBgSubtle,
+                    fontWeight: isActive ? font.weight.semibold : font.weight.body,
+                  },
+                ]}
+              >
+                {tab.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+
+      {tabs.map(tab => {
+        const isActive = activeTab === tab.id;
+
+        if (!isActive) return null;
+
+        return (
+          <View key={tab.id} style={styles.panel} accessibilityRole={'tabpanel' as AccessibilityRole}>
+            {tab.content}
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/ui/Tooltip/Tooltip.mdx

@@ -0,0 +1,47 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Tooltip.stories';
+
+<Meta of={Stories} />
+
+# Tooltip (React Native)
+
+React Native tooltip that appears on long press. Wraps children in a `Pressable` and shows the tooltip content above the trigger element.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Tooltip } from '@boostdev/design-system-components';
+import { Text } from 'react-native';
+
+<Tooltip content="Helpful information">
+  <Text>Long press me</Text>
+</Tooltip>
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### Long content
+<Canvas of={Stories.LongContent} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `content` | `string` | — | Tooltip text |
+| `children` | `ReactNode` | — | Trigger element |
+| `style` | `StyleProp<ViewStyle>` | — | Override wrapper styles |
+
+## Accessibility
+
+- Tooltip content is exposed via `accessibilityHint` on the pressable trigger
+- When visible, the tooltip view has `accessibilityRole="text"` and `accessibilityLabel`
+- Tooltip appears on long press and dismisses on press out

package/src/components/ui/Tooltip/Tooltip.spec.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Tooltip } from './Tooltip';
+import { Text } from 'react-native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Tooltip (native)', () => {
+  it('renders children', () => {
+    renderWithTheme(
+      <Tooltip content="Helpful info">
+        <Text>Trigger</Text>
+      </Tooltip>,
+    );
+    expect(screen.getByText('Trigger')).toBeInTheDocument();
+  });
+
+  it('does not show tooltip content by default', () => {
+    renderWithTheme(
+      <Tooltip content="Helpful info">
+        <Text>Trigger</Text>
+      </Tooltip>,
+    );
+    expect(screen.queryByText('Helpful info')).not.toBeInTheDocument();
+  });
+
+  it('renders a wrapper element', () => {
+    const { container } = renderWithTheme(
+      <Tooltip content="Helpful info">
+        <Text>Trigger</Text>
+      </Tooltip>,
+    );
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

package/src/components/ui/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Tooltip } from './Tooltip';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Tooltip',
+  component: Tooltip,
+  decorators: [
+    (Story) => (
+      <ThemeProvider colorScheme="light">
+        <div style={{ padding: '60px 20px 20px' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: 'Helpful tooltip text',
+    children: <Text>Long press me</Text>,
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    content: 'This is a longer tooltip that provides more detailed information about the element.',
+    children: <Text>Long press for details</Text>,
+  },
+};

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -0,0 +1,57 @@
+import { ReactNode, useState } from 'react';
+import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, border } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface TooltipProps {
+  content: string;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+  },
+  tooltip: {
+    position: 'absolute',
+    bottom: '100%',
+    start: 0,
+    marginBottom: spacing.xxs,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.xs,
+    borderRadius: border.radius.full,
+    zIndex: 10,
+    alignSelf: 'flex-start',
+  },
+  text: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+  },
+});
+
+export function Tooltip({ content, children, style }: Readonly<TooltipProps>) {
+  const { colors } = useTheme();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      <Pressable
+        onLongPress={() => setVisible(true)}
+        onPressOut={() => setVisible(false)}
+        accessibilityHint={content}
+      >
+        {children}
+      </Pressable>
+      {visible && (
+        <View
+          style={[styles.tooltip, { backgroundColor: colors.colorOnBg }]}
+          accessibilityRole="text"
+          accessibilityLabel={content}
+        >
+          <Text style={[styles.text, { color: colors.colorBg }]}>{content}</Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/ui/Typography/Typography.mdx

@@ -0,0 +1,56 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Typography.stories';
+
+<Meta of={Stories} />
+
+# Typography (React Native)
+
+React Native typography component wrapping `Text` with semantic variants. Use instead of bare `<Text>` to ensure consistent sizing, weight, and line-height from the design token scale.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Typography } from '@boostdev/design-system-components';
+
+<Typography variant="h1">Page title</Typography>
+<Typography variant="body">Body copy text.</Typography>
+```
+
+## Examples
+
+### All variants
+<Canvas of={Stories.AllVariants} />
+
+### Heading 1
+<Canvas of={Stories.Heading1} />
+
+### Heading 2
+<Canvas of={Stories.Heading2} />
+
+### Heading 3
+<Canvas of={Stories.Heading3} />
+
+### Body
+<Canvas of={Stories.Body} />
+
+### Body small
+<Canvas of={Stories.BodySmall} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"h1" \| "h2" \| "h3" \| "body" \| "body_s"` | `"body"` | Typographic scale |
+| `children` | `ReactNode` | — | Text content |
+| `style` | `StyleProp<TextStyle>` | — | Override text styles |
+
+## Accessibility
+
+- `h1`/`h2`/`h3` variants set `accessibilityRole="header"` automatically
+- Override with the `accessibilityRole` prop if the visual hierarchy doesn't match the semantic hierarchy

package/src/components/ui/Typography/Typography.spec.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Typography } from './Typography';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Typography (native)', () => {
+  it('renders children text', () => {
+    renderWithTheme(<Typography>Hello world</Typography>);
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
+  });
+
+  it('defaults to body variant without heading role', () => {
+    renderWithTheme(<Typography>Body text</Typography>);
+    expect(screen.getByText('Body text')).toBeInTheDocument();
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+
+  it('has heading role for h1 variant', () => {
+    renderWithTheme(<Typography variant="h1">Heading 1</Typography>);
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByText('Heading 1')).toBeInTheDocument();
+  });
+
+  it('has heading role for h2 variant', () => {
+    renderWithTheme(<Typography variant="h2">Heading 2</Typography>);
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByText('Heading 2')).toBeInTheDocument();
+  });
+
+  it('has heading role for h3 variant', () => {
+    renderWithTheme(<Typography variant="h3">Heading 3</Typography>);
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByText('Heading 3')).toBeInTheDocument();
+  });
+
+  it('does not have heading role for body_s variant', () => {
+    renderWithTheme(<Typography variant="body_s">Small body</Typography>);
+    expect(screen.getByText('Small body')).toBeInTheDocument();
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+
+  it('accepts custom style', () => {
+    renderWithTheme(<Typography style={{ marginTop: 10 }}>Styled</Typography>);
+    expect(screen.getByText('Styled')).toBeInTheDocument();
+  });
+});

package/src/components/ui/Typography/Typography.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Typography } from './Typography';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Typography',
+  component: Typography,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Heading1: Story = { args: { children: 'Heading 1', variant: 'h1' } };
+export const Heading2: Story = { args: { children: 'Heading 2', variant: 'h2' } };
+export const Heading3: Story = { args: { children: 'Heading 3', variant: 'h3' } };
+export const Body: Story = { args: { children: 'The quick brown fox jumps over the lazy dog.', variant: 'body' } };
+export const BodySmall: Story = { args: { children: 'The quick brown fox jumps over the lazy dog.', variant: 'body_s' } };
+export const AllVariants: Story = {
+  args: { children: '' },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Typography variant="h1">Heading 1</Typography>
+      <Typography variant="h2">Heading 2</Typography>
+      <Typography variant="h3">Heading 3</Typography>
+      <Typography variant="body">Body — The quick brown fox jumps over the lazy dog.</Typography>
+      <Typography variant="body_s">Body Small — The quick brown fox jumps over the lazy dog.</Typography>
+    </div>
+  ),
+};

package/src/components/ui/Typography/Typography.tsx

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
+import { font, lineHeight } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+
+interface TypographyProps {
+  variant?: TypographyVariant;
+  children: ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    fontFamily: font.family.body,
+    fontWeight: font.weight.body,
+  },
+  h1: {
+    fontSize: font.size.heading1,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading1,
+  },
+  h2: {
+    fontSize: font.size.heading2,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading2,
+  },
+  h3: {
+    fontSize: font.size.heading3,
+    fontFamily: font.family.heading,
+    fontWeight: font.weight.heading,
+    lineHeight: lineHeight.heading3,
+  },
+  body: {
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+  },
+  body_s: {
+    fontSize: font.size.bodyS,
+    lineHeight: lineHeight.bodyS,
+  },
+});
+
+const accessibilityRoles: Record<TypographyVariant, 'header' | 'text'> = {
+  h1: 'header',
+  h2: 'header',
+  h3: 'header',
+  body: 'text',
+  body_s: 'text',
+};
+
+export function Typography({ variant = 'body', children, style }: TypographyProps) {
+  const { colors } = useTheme();
+  return (
+    <Text
+      accessibilityRole={accessibilityRoles[variant]}
+      style={[styles.base, styles[variant], { color: colors.colorOnBg }, style]}
+    >
+      {children}
+    </Text>
+  );
+}

package/src/index.ts

@@ -0,0 +1,86 @@
+// @boostdev/design-system-react-native — public barrel
+
+// Infrastructure
+export { ThemeProvider, useTheme } from './native/ThemeContext';
+export type { ThemeTokenOverrides, ThemeColors, ThemeColorName } from './native/ThemeContext';
+export {
+  createReactNavigationTheme,
+  useReactNavigationTheme,
+} from './native/ReactNavigationTheme';
+export type {
+  ReactNavigationTheme,
+  ReactNavigationThemeColors,
+  ReactNavigationThemeFonts,
+  ReactNavigationFontStyle,
+  CreateReactNavigationThemeOptions,
+} from './native/ReactNavigationTheme';
+
+// UI
+export { Typography } from './components/ui/Typography/Typography';
+export { Badge } from './components/ui/Badge/Badge';
+export { Avatar } from './components/ui/Avatar/Avatar';
+export { Separator } from './components/ui/Separator/Separator';
+export { Loading } from './components/ui/Loading/Loading';
+export { Progress } from './components/ui/Progress/Progress';
+export { Skeleton } from './components/ui/Skeleton/Skeleton';
+export { Alert } from './components/ui/Alert/Alert';
+export { NotificationBanner } from './components/ui/NotificationBanner/NotificationBanner';
+export { Link } from './components/ui/Link/Link';
+export { DescriptionList } from './components/ui/DescriptionList/DescriptionList';
+export type { DescriptionItem } from './components/ui/DescriptionList/DescriptionList';
+export { Breadcrumb } from './components/ui/Breadcrumb/Breadcrumb';
+export type { BreadcrumbItem } from './components/ui/Breadcrumb/Breadcrumb';
+export { ProgressCircle } from './components/ui/ProgressCircle/ProgressCircle';
+export { Tooltip } from './components/ui/Tooltip/Tooltip';
+export { Pagination } from './components/ui/Pagination/Pagination';
+export { Collapsible } from './components/ui/Collapsible/Collapsible';
+export type { CollapsibleProps } from './components/ui/Collapsible/Collapsible';
+export { Accordion } from './components/ui/Accordion/Accordion';
+export type { AccordionItem } from './components/ui/Accordion/Accordion';
+export { Tabs } from './components/ui/Tabs/Tabs';
+export type { TabItem } from './components/ui/Tabs/Tabs';
+export { Table } from './components/ui/Table/Table';
+export type { TableColumn } from './components/ui/Table/Table';
+export { Calendar } from './components/ui/Calendar/Calendar';
+export { Carousel } from './components/ui/Carousel/Carousel';
+
+// Layout
+export { Card } from './components/layout/Card/Card';
+export { SectionHeader } from './components/layout/SectionHeader/SectionHeader';
+export { IconWrapper } from './components/layout/IconWrapper/IconWrapper';
+export type { IconWrapperProps } from './components/layout/IconWrapper/IconWrapper';
+export { ButtonContainer, ButtonGroup } from './components/layout/ButtonGroup/ButtonGroup';
+export type { ButtonContainerProps, ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGroup';
+
+// Interaction
+export { Button } from './components/interaction/Button/Button';
+export { Rating } from './components/interaction/Rating/Rating';
+export type { ButtonProps } from './components/interaction/Button/Button';
+export { Switch } from './components/interaction/form/Switch/Switch';
+export { Checkbox } from './components/interaction/form/Checkbox/Checkbox';
+export { CheckboxGroup } from './components/interaction/form/CheckboxGroup/CheckboxGroup';
+export { Radio } from './components/interaction/form/Radio/Radio';
+export { RadioGroup } from './components/interaction/form/RadioGroup/RadioGroup';
+export { FileInput } from './components/interaction/form/FileInput/FileInput';
+export { Combobox } from './components/interaction/form/Combobox/Combobox';
+export type { ComboboxOption } from './components/interaction/form/Combobox/Combobox';
+export { SegmentedControl } from './components/interaction/form/SegmentedControl/SegmentedControl';
+export { FormInput } from './components/interaction/form/FormInput/FormInput';
+export { Textarea } from './components/interaction/form/Textarea/Textarea';
+export { Select } from './components/interaction/form/Select/Select';
+export type { SelectOption } from './components/interaction/form/Select/Select';
+export { Slider } from './components/interaction/form/Slider/Slider';
+export { NumberInput } from './components/interaction/form/NumberInput/NumberInput';
+export { Dialog } from './components/interaction/Dialog/Dialog';
+export { SideSheet } from './components/interaction/SideSheet/SideSheet';
+export { ToastProvider, useToast } from './components/interaction/Toast/Toast';
+export { DropdownMenu } from './components/interaction/DropdownMenu/DropdownMenu';
+export type { DropdownMenuItem } from './components/interaction/DropdownMenu/DropdownMenu';
+export { Popover } from './components/interaction/Popover/Popover';
+
+// Atoms
+export { Label } from './components/interaction/form/atoms/Label';
+export { Message } from './components/interaction/form/atoms/Message';
+
+// Tokens (re-exported for convenience)
+export { colors, spacing, font, border, zIndex, animation, lineHeight } from './native/tokens';