@boostdev/design-system-components 2.4.1 → 2.5.0

package/src/stories/ReactNative.mdx

@@ -1,156 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="React Native/Overview" />
-
-# React Native
-
-> **Status: alpha** — components and APIs may change before stable release.
-
-`@boostdev/design-system-components` ships native implementations for 47 components — near-complete parity with the React web library. These use React Native primitives (`View`, `Text`, `Pressable`, `StyleSheet`, `Modal`, `Animated`) rather than HTML elements, and consume a dedicated token layer instead of CSS custom properties.
-
-## Installation
-
-```bash
-npm install @boostdev/design-system-components
-# or
-pnpm add @boostdev/design-system-components
-```
-
-Metro automatically resolves the native entry point via the `"react-native"` export condition in `package.json` — no extra configuration needed.
-
-```ts
-// Import is identical to the web version:
-import { Button, Alert, Badge, Avatar, Typography } from '@boostdev/design-system-components';
-```
-
-## Setup — ThemeProvider
-
-Wrap your app (or the relevant subtree) in `ThemeProvider` to give native components access to the design token context:
-
-```tsx
-import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
-
-export default function App() {
-  return (
-    <ThemeProvider>
-      {/* your app */}
-    </ThemeProvider>
-  );
-}
-```
-
-`ThemeProvider` reads the current colour scheme via `useColorScheme()` and applies the corresponding dark/light token set automatically.
-
-## Design Tokens
-
-Native components consume tokens from `src/native/tokens.ts` — a JS object mirroring the CSS custom properties from `@boostdev/design-system-foundation`. Token categories:
-
-| Category | Example |
-|----------|---------|
-| `colors` | `tokens.colors.bg`, `tokens.colors.interactive` |
-| `spacing` | `tokens.spacing.xs`, `tokens.spacing.m` |
-| `font` | `tokens.font.sizeBody`, `tokens.font.weightBold` |
-| `border` | `tokens.border.radiusS`, `tokens.border.radiusM` |
-| `zIndex` | `tokens.zIndex.modal` |
-| `animation` | `tokens.animation.duration` |
-
-Tokens are accessed inside components via `useTheme()`:
-
-```tsx
-import { useTheme } from '@boostdev/design-system-components/native/ThemeContext';
-
-function MyComponent() {
-  const { tokens } = useTheme();
-  return <View style={{ backgroundColor: tokens.colors.bg }} />;
-}
-```
-
-## Available Components (47)
-
-### UI (22)
-
-| Component | Description |
-|-----------|-------------|
-| `Accordion` | Expandable sections, exclusive or multi-open mode |
-| `Alert` | Inline status message with optional title and dismiss |
-| `Avatar` | Initials-based avatar with 3 sizes |
-| `Badge` | Short status label with 5 semantic variants |
-| `Breadcrumb` | Navigation trail with pressable items |
-| `Calendar` | Month grid date picker with min/max constraints |
-| `Carousel` | Horizontal paging scroll with dot indicators |
-| `Collapsible` | Animated expand/collapse section |
-| `DescriptionList` | Key-value pair display |
-| `Link` | Pressable text that opens URLs via `Linking` |
-| `Loading` | Animated loading spinner |
-| `NotificationBanner` | Full-width banner notification |
-| `Pagination` | Page navigation with prev/next and page buttons |
-| `Progress` | Linear progress bar |
-| `ProgressCircle` | Circular progress indicator |
-| `Rating` | Read-only star rating display |
-| `Separator` | Visual divider |
-| `Skeleton` | Loading placeholder |
-| `Table` | Scrollable data table with sortable columns |
-| `Tabs` | Tabbed interface with pressable tab headers |
-| `Tooltip` | Long-press tooltip overlay |
-| `Typography` | Text with semantic variants: `h1`, `h2`, `h3`, `body`, `body_s` |
-
-### Layout (4)
-
-| Component | Description |
-|-----------|-------------|
-| `ButtonGroup` | Horizontal or vertical button row |
-| `Card` | Elevated content container |
-| `IconWrapper` | Consistent icon sizing wrapper |
-| `SectionHeader` | Section heading with optional action |
-
-### Interaction (8)
-
-| Component | Description |
-|-----------|-------------|
-| `Button` | Primary action element with `onPress` |
-| `Dialog` | Modal dialog with backdrop and close button |
-| `Drawer` | Sliding side panel with animated transitions |
-| `DropdownMenu` | Bottom-sheet menu with pressable items |
-| `Popover` | Modal-based popover overlay |
-| `ToastProvider` / `useToast` | Toast notification system with auto-dismiss |
-
-### Form (13)
-
-| Component | Description |
-|-----------|-------------|
-| `Checkbox` | Controlled checkbox with label, hint, and error |
-| `CheckboxGroup` | Group wrapper with legend for multiple checkboxes |
-| `Combobox` | Text input with filtered dropdown options |
-| `FileInput` | File selection button with file name display |
-| `FormInput` | Labeled text input with hint/error support |
-| `NumberInput` | Numeric input with stepper buttons |
-| `Radio` | Controlled radio button |
-| `RadioGroup` | Group wrapper with legend for radio buttons |
-| `SegmentedControl` | Horizontal segmented button group |
-| `Select` | Bottom-sheet option picker |
-| `Slider` | Draggable range input with value display |
-| `Switch` | Toggle switch |
-| `Textarea` | Multiline text input |
-| `Label` | Form field label atom |
-| `Message` | Form field hint/error atom |
-
-### Not available (deferred)
-
-| Component | Reason |
-|-----------|--------|
-| `Command` | Depends on cmdk library (browser-only) |
-| `SkipLink` | Browser-only accessibility pattern |
-
-## Key differences from the web components
-
-| Web | React Native |
-|-----|-------------|
-| `onClick` | `onPress` |
-| `aria-label` | `accessibilityLabel` |
-| CSS `className` | `StyleSheet` / `style` prop |
-| `children` as string/HTML | `children` must be `<Text>` nodes (RN restriction) |
-| Design tokens via CSS custom properties | Design tokens via `useTheme()` JS object |
-
-## Dark mode
-
-`ThemeProvider` subscribes to `useColorScheme()` automatically. No extra work is needed — components adapt their colours when the device switches between light and dark mode.