@campxdev/react-native-blueprint 0.1.7 → 0.1.9

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,39 @@ 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
@@ -126,7 +161,13 @@ module.exports = withNativeWind(config, { input: './global.css' });
 // Import CSS at the top of your app entry point (do this ONCE)
 import '@campxdev/react-native-blueprint/global.css';
 
-import { Button, Card, Text, Input, Alert } from '@campxdev/react-native-blueprint';
+import {
+  Button,
+  Card,
+  Text,
+  Input,
+  Alert,
+} from '@campxdev/react-native-blueprint';
 import { View } from 'react-native';
 
 function App() {
@@ -135,7 +176,9 @@ function App() {
       <Card>
         <Card.Header>
           <Card.Title>Welcome</Card.Title>
-          <Card.Description>Get started with react-native-blueprint</Card.Description>
+          <Card.Description>
+            Get started with react-native-blueprint
+          </Card.Description>
         </Card.Header>
         <Card.Content>
           <Input placeholder="Enter your name" />
@@ -149,9 +192,7 @@ function App() {
 
       <Alert>
         <Alert.Title>Info</Alert.Title>
-        <Alert.Description>
-          This is a sample alert component.
-        </Alert.Description>
+        <Alert.Description>This is a sample alert component.</Alert.Description>
       </Alert>
     </View>
   );
@@ -161,12 +202,14 @@ function App() {
 ## Available Components
 
 ### Layout & Structure
+
 - **Button** - Customizable button with variants (default, destructive, outline, ghost, link)
 - **Card** - Container with header, content, and footer sections
 - **Separator** - Horizontal or vertical divider
 - **Skeleton** - Loading placeholder with shimmer effect
 
 ### Form Components
+
 - **Input** - Text input field
 - **Textarea** - Multi-line text input
 - **Checkbox** - Checkbox with label support
@@ -177,12 +220,14 @@ function App() {
 - **Slider** - Range slider input
 
 ### Navigation
+
 - **Tabs** - Tab navigation component
 - **Accordion** - Collapsible content sections
 - **Collapsible** - Expandable/collapsible content
 - **Menubar** - Menu bar with nested items
 
 ### Overlays & Dialogs
+
 - **Dialog** - Modal dialog
 - **Alert Dialog** - Alert/confirmation dialog
 - **Popover** - Floating popover
@@ -192,18 +237,21 @@ function App() {
 - **Hover Card** - Card that appears on hover
 
 ### Feedback & Status
+
 - **Alert** - Informational alert box
 - **Toast** - Toast notification
 - **Progress** - Progress bar
 - **Badge** - Status badge
 
 ### Data Display
+
 - **Table** - Data table with sorting
 - **Avatar** - User avatar with fallback
 - **Text** - Typography component with variants
 - **Icon** - Icon component (powered by lucide-react-native)
 
 ### Utilities
+
 - **Aspect Ratio** - Container with fixed aspect ratio
 - **Toggle** - Toggle button
 - **Toggle Group** - Group of toggle buttons
@@ -214,10 +262,10 @@ Components use CSS variables for theming. Customize your app's appearance by mod
 
 ```css
 :root {
-  --primary: 220 90% 56%;        /* Blue */
-  --secondary: 280 70% 60%;      /* Purple */
-  --destructive: 0 84% 60%;      /* Red */
-  --radius: 0.75rem;             /* Border radius */
+  --primary: 220 90% 56%; /* Blue */
+  --secondary: 280 70% 60%; /* Purple */
+  --destructive: 0 84% 60%; /* Red */
+  --radius: 0.75rem; /* Border radius */
 }
 ```
 
@@ -241,15 +289,41 @@ 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
-npm install
-npm run ios     # Run on iOS simulator
-npm run android # Run on Android emulator
+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
+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:
@@ -263,6 +337,7 @@ import type { ButtonProps, CardProps } from '@campxdev/react-native-blueprint';
 ### "Cannot find module '@campxdev/react-native-blueprint/global.css'"
 
 Make sure you've:
+
 1. Installed NativeWind: `npm install nativewind tailwindcss`
 2. Configured Metro with NativeWind plugin (see Installation Step 5)
 3. Imported the CSS in your app entry point
@@ -340,6 +415,7 @@ Contributions are welcome! Please follow these steps:
 ### Development Workflow
 
 1. Clone the repo and install dependencies:
+
    ```sh
    git clone https://github.com/campx-org/react-native-blueprint.git
    cd react-native-blueprint
@@ -347,15 +423,27 @@ 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`
 
 4. Run type checking and linting:
+
    ```sh
    yarn typecheck
    yarn lint
@@ -366,60 +454,14 @@ Contributions are welcome! Please follow these steps:
    yarn prepare
    ```
 
-## Publishing
-
-For maintainers who need to publish new versions of the package, we provide a comprehensive automated script.
-
-### Publishing Script
-
-The [publish.sh](scripts/publish.sh) script handles the entire publishing workflow with comprehensive error handling.
-
-#### What it does:
-
-1. **Cleans cache** - Removes `node_modules`, `lib`, and clears yarn cache
-2. **Installs dependencies** - Runs `yarn install` to ensure everything is up to date
-3. **Checks CLI tools** - Verifies React Native CLI and Reusables CLI availability
-4. **Builds the library** - Runs `yarn prepare` (bob build) - *Note: TypeScript typecheck is skipped due to className issues*
-5. **Verifies build outputs** - Ensures type declarations, source files, and module outputs are correctly generated
-6. **Increments version** - Interactive prompts for patch/minor/major/custom version increments
-7. **Git operations** - Commits changes with proper message and pushes to remote
-8. **Publishes to npm** - Publishes the package with confirmation prompt
-
-#### Usage:
-
-```sh
-# Run directly
-./scripts/publish.sh
-
-# Or via yarn
-yarn publish-package
-```
-
-#### Prerequisites:
-
-- Node.js and yarn installed
-- Git configured with credentials
-- Logged in to npm (`npm login`)
-- Publish permissions for the `@campxdev` scope
-
-#### Error Handling:
-
-The script provides detailed error messages and resolution steps for common failures:
-
-- **Cache/Install Issues** - Guides on cleaning and reinstalling dependencies
-- **CLI Missing** - Instructions to install required CLI tools
-- **Build Failures** - Steps to debug bob build issues
-- **Git Issues** - Help with credentials, permissions, and branch management
-- **NPM Issues** - Authentication and publish permission troubleshooting
-
-#### Important Notes:
+### Example App Tech Stack
 
-- TypeScript typecheck is intentionally skipped due to known className issues
-- Manual confirmation is required before publishing to prevent accidents
-- Commits are made with the configured git user (should be satya@campx.in)
-- The script pushes to your current branch - ensure you're on the correct branch
+The example app showcases modern React Native development with:
 
-For detailed troubleshooting, run the script and follow the error resolution steps provided.
+- **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
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-native-blueprint",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "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",