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

package/CHANGELOG.md

@@ -0,0 +1,42 @@
+# Changelog
+
+All notable changes to `@boostdev/design-system-react-native` are documented here.
+## [0.2.0] - 2026-06-10
+### Added
+- Feat: rename Drawer to SideSheet, optional @react-navigation/native peer, nav theme docs, git-cliff ([`42e165d`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/42e165d6df397876df8b721122259af640eeaa98))
+- Feat(theme): tokens override prop on ThemeProvider, widen ThemeColors to string ([`6fd6e79`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/6fd6e7966f9fb7d5040ba15e748cae02a8d3f023))
+
+### Changed
+- Update .gitignore to exclude IntelliJ IDEA project files ([`006a8c2`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/006a8c2a44611a64f82ec3e1eaf5f03469ab40c4))
+- Refactor CI pipeline, add `git-cliff` for changelog generation
+
+- Overhauled `.gitlab-ci.yml` with new stages: install, validate, deploy
+- Replaced `default` job with reusable `.pnpm_setup` and validation rules
+- Added `git-cliff` for automated changelog updates and `auto-tag` workflow
+- Updated dependencies in `package.json` and `pnpm-lock.yaml` ([`004050f`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/004050fb18b2f0ee1c65c44c769faf92bced3222))
+
+### Other
+- Initial commit ([`1b50bbf`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/1b50bbfcda43e91e580c94ed793979b458fecb1f))
+- Extract @boostdev/design-system-react-native from boostcomponents
+
+Extracts the React Native subset (50+ components, theme, tokens) from
+@boostdev/design-system-components into a standalone npm package.
+
+- src/native/ThemeContext + tokens
+- *.native.tsx implementations across ui, layout, interaction, form, atoms
+- *.native.spec.tsx (297 tests, all passing)
+- tsup build (esm + cjs + dts)
+- vitest via react-native-web alias ([`5927caf`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/5927cafd024c3f9697b7a723fd9cad07777cdd2c))
+- Rename .native.* to .*, add stories/mdx, Storybook, CI, LICENSE
+
+- Drop .native suffix from all files (everything here is native)
+- Restore *.stories.tsx and *.mdx from boostcomponents history
+- Storybook 8 (react-vite) with react-native-web alias, ThemeProvider decorator, light/dark toolbar toggle
+- .gitlab-ci.yml: typecheck, test, build stages
+- LICENSE (ISC)
+- tsconfig: exclude stories from typecheck
+- gitignore: storybook-static, .pnpm-store ([`f19ba7f`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/f19ba7fa558dba4b26128898020c50d00e58cf0a))
+- Test(theme): pin nav theme inheritance of token overrides ([`8c2fbc8`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/8c2fbc8a789ca43604cdc498bbadf2185e8f6433))
+- Docs: brand theming via tokens overrides, expo-router nav theme recipe ([`3a23e97`](https://gitlab.com/b00stdev/boostdev-design-system-react-native/-/commit/3a23e9730cc05fa3917f5237c88a55c50b57617b))
+
+

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 Boostdev
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -15,8 +15,11 @@ Peer dependencies:
 - `react` >= 18
 - `react-native` >= 0.70
 - `@boostdev/design-system-foundation` >= 2.0.0
+- `@react-navigation/native` >= 6.0.0 *(optional — only needed if you use the React Navigation bridge below)*
 
-## Usage
+## Standalone usage
+
+The library is fully self-contained. Wrap your app in `ThemeProvider` and use components directly — no other dependencies required.
 
 ```tsx
 import { ThemeProvider, Button, Typography } from '@boostdev/design-system-react-native';
@@ -31,7 +34,106 @@ export default function App() {
 }
 ```
 
-Wrap your app in `ThemeProvider`. It auto-detects system color scheme (light/dark) via `useColorScheme`, or you can pass `colorScheme="light" | "dark"` to force one.
+`ThemeProvider` auto-detects the system color scheme (light/dark) via `useColorScheme`, or you can pass `colorScheme="light" | "dark"` to force one. Inside the tree, `useTheme()` exposes `{ colors, isDark }` where `colors` is the full foundation token palette (`colorBg`, `colorOnBg`, `colorInteractive`, …).
+
+## Brand theming (token overrides)
+
+Override any semantic color per scheme — the React Native equivalent of the web
+`boostdev.tokens.override` CSS layer. One prop recolors every component **and**
+`useReactNavigationTheme`:
+
+```tsx
+import { ThemeProvider } from '@boostdev/design-system-react-native';
+
+<ThemeProvider
+  tokens={{
+    light: { colorInteractive: '#00c853', colorInteractiveOnBg: '#2d5a1e' },
+    dark:  { colorInteractive: '#00c853', colorInteractiveOnBg: '#a8d48a' },
+  }}
+>
+  <App />
+</ThemeProvider>;
+```
+
+Unspecified tokens keep their foundation values. Available token names are the keys of
+`colors.light` from `@boostdev/design-system-foundation/native` (`colorBg`,
+`colorInteractive`, `colorError`, …) — see the `ThemeColorName` type.
+
+Pass a stable `tokens` reference (a module-level constant, not an inline object
+literal) — the provider memoizes the merged colors on that reference.
+
+## React Navigation compatibility
+
+The library also ships a thin, **opt-in** bridge that produces a [React Navigation](https://reactnavigation.org/) `Theme` from the same foundation tokens. The bridge is purely additive — nothing about the standalone API changes when you use it, and `@react-navigation/native` is only required if you actually consume the bridge.
+
+### Hook variant — when you wrap in `ThemeProvider`
+
+```tsx
+import { NavigationContainer } from '@react-navigation/native';
+import { ThemeProvider, useReactNavigationTheme } from '@boostdev/design-system-react-native';
+
+function NavRoot({ children }) {
+  const theme = useReactNavigationTheme();
+  return <NavigationContainer theme={theme}>{children}</NavigationContainer>;
+}
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <NavRoot>{/* screens */}</NavRoot>
+    </ThemeProvider>
+  );
+}
+```
+
+`useReactNavigationTheme()` reads from our `ThemeProvider` and reflects light/dark switches automatically. It accepts optional `{ colors, fonts }` overrides.
+
+### Builder variant — standalone or outside React
+
+```tsx
+import { NavigationContainer } from '@react-navigation/native';
+import { createReactNavigationTheme } from '@boostdev/design-system-react-native';
+
+const theme = createReactNavigationTheme({ dark: false });
+
+<NavigationContainer theme={theme}>{/* … */}</NavigationContainer>;
+```
+
+`createReactNavigationTheme(options)` is a pure function. Use it when you do not wrap in `ThemeProvider`, or when you need a theme outside React (tests, navigators created at module scope, etc.).
+
+Options:
+
+| Option   | Type                                | Description                                                              |
+| -------- | ----------------------------------- | ------------------------------------------------------------------------ |
+| `dark`   | `boolean`                           | Selects the dark token set. Default `false`.                             |
+| `tokens` | `colors.light \| colors.dark` shape | Bring your own foundation token set. Defaults to `colors[dark ? 'dark' : 'light']` from the foundation. |
+| `colors` | `Partial<ReactNavigationThemeColors>` | Override individual Navigation colors (e.g. `{ primary: '#ff0' }`).      |
+| `fonts`  | `Partial<ReactNavigationThemeFonts>`  | Override individual Navigation font styles.                              |
+
+### Token mapping
+
+The bridge maps foundation tokens to React Navigation's six-color palette. The mapping lives in this repo (`src/native/ReactNavigationTheme.ts`) — the foundation package stays generic.
+
+| React Navigation | Foundation token                              |
+| ---------------- | --------------------------------------------- |
+| `primary`        | `colorInteractive`                            |
+| `background`     | `colorBg`                                     |
+| `card`           | `colorBgSubtle`                               |
+| `text`           | `colorOnBg`                                   |
+| `border`         | `palette.grey200` (light) / `grey700` (dark)  |
+| `notification`   | `colorError`                                  |
+
+Fonts use `font.family.body` with weights from `font.weight` (`body`, `medium`, `bold`, `heading`).
+
+Override any of these per-call via the `colors` / `fonts` options without changing the foundation.
+
+### Custom themes
+
+Both standalone (`useTheme`) and Navigation (`useReactNavigationTheme` / `createReactNavigationTheme`) consume the same foundation tokens. To build a custom theme:
+
+1. Author a token set matching the foundation's `colors.light` / `colors.dark` shape.
+2. Pass it as `tokens` to `createReactNavigationTheme({ tokens, dark })` for the Navigation layer.
+3. For the standalone layer — and to have overrides flow through to the Navigation theme automatically — use the `tokens` prop on `ThemeProvider` (see [Brand theming](#brand-theming-token-overrides) above).
 
 ## Development