@campxdev/react-native-blueprint 0.1.6 → 0.1.8

package/README.md

@@ -105,7 +105,9 @@ module.exports = {
 };
 ```
 
-### 5. Configure Metro
+### 5. Configure Bundler (Metro or Re.Pack)
+
+**Option A: Metro (Standard)**
 
 Update `metro.config.js`:
 
@@ -118,6 +120,36 @@ const config = getDefaultConfig(__dirname);
 module.exports = withNativeWind(config, { input: './global.css' });
 ```
 
+**Option B: Re.Pack + Rspack (5x Faster - Used in Example App)**
+
+The example app in this repository uses [Re.Pack 5](https://re-pack.dev) with Rspack for **5x faster builds**. See [MIGRATION_REPACK.md](MIGRATION_REPACK.md) for details.
+
+If you want to use Re.Pack in your project:
+
+1. Install Re.Pack:
+   ```sh
+   npx @callstack/repack-init
+   ```
+
+2. Install NativeWind plugin:
+   ```sh
+   npm install @callstack/repack-plugin-nativewind
+   ```
+
+3. Update `rspack.config.js`:
+   ```js
+   import { NativeWindPlugin } from '@callstack/repack-plugin-nativewind';
+
+   export default (env) => ({
+     // ... other config
+     plugins: [
+       new NativeWindPlugin({
+         input: './global.css',
+       }),
+     ],
+   });
+   ```
+
 ## Usage
 
 ### Basic Example
@@ -241,15 +273,40 @@ function App() {
 
 ## Example App
 
-Check out the `/example` directory for a complete demo app showcasing all components:
+Check out the `/example` directory for a complete demo app showcasing all components with **Storybook integration** and **Re.Pack + Rspack** for 5x faster builds.
+
+### Run Normal App Mode
+
+```sh
+yarn example:app        # From root (recommended)
+# or
+cd example
+yarn app:ios            # Run on iOS simulator
+yarn app:android        # Run on Android emulator
+```
+
+### Run Storybook Mode
+
+The example app includes 16 interactive component stories using [Storybook for React Native](https://storybook.js.org/tutorials/intro-to-storybook/react-native/):
 
 ```sh
+yarn example:storybook  # From root (recommended)
+# or
 cd example
-npm install
-npm run ios     # Run on iOS simulator
-npm run android # Run on Android emulator
+yarn storybook:ios      # Run Storybook on iOS
+yarn storybook:android  # Run Storybook on Android
 ```
 
+### Build Performance
+
+The example app uses **Re.Pack 5 + Rspack** instead of Metro for:
+- ⚡ **5x faster cold builds**
+- ⚡ **5x faster hot module reload (HMR)**
+- 📦 **Zero package duplications**
+- 🎨 **Full NativeWind support**
+
+See [MIGRATION_REPACK.md](MIGRATION_REPACK.md) for complete migration details and architecture.
+
 ## TypeScript Support
 
 All components are fully typed with TypeScript. Import types as needed:
@@ -347,10 +404,19 @@ Contributions are welcome! Please follow these steps:
    ```
 
 2. Run the example app:
+
+   **Normal App Mode:**
    ```sh
-   yarn example ios
-   # or
-   yarn example android
+   yarn example:app          # Start dev server
+   cd example && yarn app:ios     # Or run on iOS
+   cd example && yarn app:android # Or run on Android
+   ```
+
+   **Storybook Mode (Component Library):**
+   ```sh
+   yarn example:storybook         # Start Storybook
+   cd example && yarn storybook:ios      # Or run on iOS
+   cd example && yarn storybook:android  # Or run on Android
    ```
 
 3. Make your changes in `/src`
@@ -366,6 +432,14 @@ Contributions are welcome! Please follow these steps:
    yarn prepare
    ```
 
+### Example App Tech Stack
+
+The example app showcases modern React Native development with:
+- **Re.Pack 5 + Rspack** - 5x faster than Metro bundler
+- **Storybook React Native** - Interactive component development
+- **NativeWind v4** - Tailwind CSS for React Native
+- **Command-based mode switching** - Easy switching between app and Storybook modes
+
 ## Publishing
 
 For maintainers who need to publish new versions of the package, we provide a comprehensive automated script.

package/lib/module/index.js

@@ -1,8 +1,7 @@
 "use strict";
 
 // Type augmentations for NativeWind className support
-import './types/global';
-import './types/rn-primitives';
+// Types are automatically loaded via tsconfig.json typeRoots and include
 
 // Export components
 export * from "./components/ui/index.js";

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","RootLayout","cn","THEME","NAV_THEME","ThemeProvider","useTheme","getRadiusForHeight","getRadiusForDimensions","getCustomRadius","RADIUS","RADIUS_PRESET","CORNER_SMOOTHING","fonts"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA,OAAO,gBAAgB;AACvB,OAAO,uBAAuB;;AAE9B;AACA,cAAc,0BAAiB;;AAE/B;AACA,SAASA,OAAO,IAAIC,UAAU,QAAQ,kBAAe;;AAErD;AACA,SAASC,EAAE,QAAQ,gBAAa;AAChC,SAASC,KAAK,EAAEC,SAAS,QAAQ,gBAAa;AAC9C,SAASC,aAAa,EAAEC,QAAQ,QAAQ,wBAAqB;;AAE7D;AACA,SACEC,kBAAkB,EAClBC,sBAAsB,EACtBC,eAAe,EACfC,MAAM,EACNC,aAAa,EACbC,gBAAgB,QACX,uBAAoB;;AAE3B;AACA,SAASC,KAAK,QAAQ,gBAAa","ignoreList":[]}
+{"version":3,"names":["default","RootLayout","cn","THEME","NAV_THEME","ThemeProvider","useTheme","getRadiusForHeight","getRadiusForDimensions","getCustomRadius","RADIUS","RADIUS_PRESET","CORNER_SMOOTHING","fonts"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA;;AAEA;AACA,cAAc,0BAAiB;;AAE/B;AACA,SAASA,OAAO,IAAIC,UAAU,QAAQ,kBAAe;;AAErD;AACA,SAASC,EAAE,QAAQ,gBAAa;AAChC,SAASC,KAAK,EAAEC,SAAS,QAAQ,gBAAa;AAC9C,SAASC,aAAa,EAAEC,QAAQ,QAAQ,wBAAqB;;AAE7D;AACA,SACEC,kBAAkB,EAClBC,sBAAsB,EACtBC,eAAe,EACfC,MAAM,EACNC,aAAa,EACbC,gBAAgB,QACX,uBAAoB;;AAE3B;AACA,SAASC,KAAK,QAAQ,gBAAa","ignoreList":[]}

package/lib/typescript/src/index.d.ts

@@ -1,5 +1,3 @@
-import './types/global';
-import './types/rn-primitives';
 export * from './components/ui';
 export { default as RootLayout } from './app/_layout';
 export { cn } from './lib/utils';

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,gBAAgB,CAAC;AACxB,OAAO,uBAAuB,CAAC;AAG/B,cAAc,iBAAiB,CAAC;AAGhC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG9D,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,MAAM,EACN,aAAa,EACb,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAGhC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG9D,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,MAAM,EACN,aAAa,EACb,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-native-blueprint",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "This is a react-native package for mobile apps",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -35,15 +35,16 @@
   ],
   "scripts": {
     "example": "yarn workspace react-native-blueprint-example",
+    "example:app": "yarn example app",
+    "example:storybook": "yarn example storybook",
     "test": "jest",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
+    "clean:all": "rm -rf node_modules example/node_modules && yarn install",
     "prepare": "bob build",
     "release": "release-it --only-version",
-    "publish-package": "./scripts/publish.sh",
-    "android": "expo run:android",
-    "ios": "expo run:ios"
+    "publish-package": "./scripts/publish.sh"
   },
   "keywords": [
     "react-native",
@@ -103,6 +104,16 @@
     "example"
   ],
   "packageManager": "yarn@3.6.1",
+  "resolutions": {
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.4",
+    "nativewind": "4.2.1",
+    "tailwindcss": "3.4.17",
+    "tailwindcss-animate": "1.0.7",
+    "@rspack/core": "1.5.8",
+    "@babel/core": "^7.28.4"
+  },
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -202,8 +213,6 @@
     "expo-font": "^14.0.9",
     "figma-squircle": "^1.1.0",
     "lucide-react-native": "^0.546.0",
-    "react": "19.1.0",
-    "react-native": "0.81.4",
     "react-native-figma-squircle": "^0.4.0",
     "react-native-floating-action": "^1.22.0",
     "react-native-gesture-handler": "^2.28.0",

package/src/index.tsx

@@ -1,6 +1,5 @@
 // Type augmentations for NativeWind className support
-import './types/global';
-import './types/rn-primitives';
+// Types are automatically loaded via tsconfig.json typeRoots and include
 
 // Export components
 export * from './components/ui';