@campxdev/react-native-blueprint 0.1.8 → 0.1.11

package/README.md

@@ -21,7 +21,13 @@ This library requires **NativeWind v4+** to be configured in your React Native p
 
 ## Installation
 
-### 1. Install the package
+This library works with **both Expo and Bare React Native CLI** projects. Choose the installation method for your project type.
+
+### For Bare React Native CLI Projects (Recommended)
+
+Perfect for apps like **CampxMobileApp** using React Native CLI without Expo.
+
+#### 1. Install the package
 
 ```sh
 npm install @campxdev/react-native-blueprint
@@ -29,15 +35,80 @@ npm install @campxdev/react-native-blueprint
 yarn add @campxdev/react-native-blueprint
 ```
 
-### 2. Install required peer dependencies
+#### 2. Install required peer dependencies
 
 ```sh
-npm install nativewind tailwindcss tailwindcss-animate react-native-reanimated react-native-gesture-handler react-native-svg react-native-safe-area-context
+npm install nativewind tailwindcss tailwindcss-animate react-native-reanimated react-native-gesture-handler react-native-svg react-native-safe-area-context react-native-screens
 # or
-yarn add nativewind tailwindcss tailwindcss-animate react-native-reanimated react-native-gesture-handler react-native-svg react-native-safe-area-context
+yarn add nativewind tailwindcss tailwindcss-animate react-native-reanimated react-native-gesture-handler react-native-svg react-native-safe-area-context react-native-screens
+```
+
+#### 3. Install optional peer dependencies (as needed)
+
+```sh
+# For bottom sheet components (optional)
+npm install @gorhom/bottom-sheet
+
+# For advanced animations (optional)
+npm install react-native-worklets
+
+# For specific UI primitives (install only what you need)
+npm install @rn-primitives/accordion @rn-primitives/dialog @rn-primitives/avatar
+# ... add other @rn-primitives packages as needed
+```
+
+#### 4. For iOS, install CocoaPods
+
+```sh
+cd ios && pod install && cd ..
+```
+
+#### 5. Add Reanimated Babel plugin
+
+Update your `babel.config.js`:
+
+```js
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    'react-native-reanimated/plugin', // Must be listed last!
+  ],
+};
+```
+
+### For Expo Projects
+
+If you're using Expo, the installation is simpler:
+
+#### 1. Install the package and peer dependencies
+
+```sh
+npx expo install @campxdev/react-native-blueprint nativewind tailwindcss tailwindcss-animate react-native-reanimated react-native-gesture-handler react-native-svg
+# Expo will automatically install compatible versions
 ```
 
-### 3. Import the global styles
+#### 2. Install optional fonts (for custom fonts)
+
+```sh
+npx expo install expo-font @expo-google-fonts/poppins @expo-google-fonts/heebo
+```
+
+Then load fonts in your app:
+
+```tsx
+import { useFonts } from 'expo-font';
+import { Poppins_400Regular, Poppins_600SemiBold } from '@expo-google-fonts/poppins';
+
+function App() {
+  const [fontsLoaded] = useFonts({ Poppins_400Regular, Poppins_600SemiBold });
+  if (!fontsLoaded) return null;
+  // Your app
+}
+```
+
+### Common Setup (Required for Both)
+
+#### Import the global styles
 
 In your app entry point (e.g., `App.tsx` or `_layout.tsx`):
 
@@ -45,7 +116,7 @@ In your app entry point (e.g., `App.tsx` or `_layout.tsx`):
 import '@campxdev/react-native-blueprint/global.css';
 ```
 
-### 4. Configure NativeWind
+#### Configure NativeWind
 
 Create or update `tailwind.config.js`:
 
@@ -105,9 +176,9 @@ module.exports = {
 };
 ```
 
-### 5. Configure Bundler (Metro or Re.Pack)
+#### Configure Bundler (Metro or Re.Pack)
 
-**Option A: Metro (Standard)**
+**For Expo Projects:**
 
 Update `metro.config.js`:
 
@@ -120,23 +191,41 @@ const config = getDefaultConfig(__dirname);
 module.exports = withNativeWind(config, { input: './global.css' });
 ```
 
-**Option B: Re.Pack + Rspack (5x Faster - Used in Example App)**
+**For Bare React Native CLI Projects:**
+
+Update `metro.config.js`:
+
+```js
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = mergeConfig(getDefaultConfig(__dirname), {
+  // Your custom Metro config
+});
+
+module.exports = withNativeWind(config, { input: './global.css' });
+```
+
+**Alternative: 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';
 
@@ -158,7 +247,13 @@ If you want to use Re.Pack in your project:
 // 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() {
@@ -167,7 +262,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" />
@@ -181,9 +278,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>
   );
@@ -193,12 +288,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
@@ -209,12 +306,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
@@ -224,18 +323,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
@@ -246,10 +348,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 */
 }
 ```
 
@@ -300,6 +402,7 @@ 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**
@@ -320,6 +423,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
@@ -348,15 +452,31 @@ content: [
 ],
 ```
 
-## Migration from v0.1.x to v0.2.x
+## Migration Guides
 
-**Breaking Change**: CSS must now be manually imported.
+### Migration from v0.1.x to v0.2.x
 
-### What changed?
+**Breaking Changes**:
+1. CSS must now be manually imported
+2. Expo is no longer a direct dependency (but still supported!)
+3. Many dependencies moved to peer dependencies
 
-In v0.1.x, the CSS was automatically imported when you used `RootLayout`. In v0.2.x, you need to explicitly import the CSS file.
+#### What changed?
 
-### Migration steps
+**v0.1.x**:
+- Included Expo as direct dependency
+- CSS auto-imported via `RootLayout`
+- All packages bundled as direct dependencies
+
+**v0.2.x**:
+- ✅ Works with both Expo and bare React Native CLI
+- ✅ CSS must be explicitly imported (better tree-shaking)
+- ✅ Most packages are now peer dependencies (smaller bundle, less conflicts)
+- ✅ CommonJS and ESM support (fixes module warnings)
+
+#### Migration Steps
+
+##### For ALL Projects (Expo & Bare RN CLI)
 
 1. **Add CSS import** to your app entry point (e.g., `App.tsx` or `_layout.tsx`):
 
@@ -364,25 +484,54 @@ In v0.1.x, the CSS was automatically imported when you used `RootLayout`. In v0.
 import '@campxdev/react-native-blueprint/global.css';
 ```
 
-2. **Install peer dependencies** (if not already installed):
+2. **Install peer dependencies**:
 
 ```sh
-npm install nativewind tailwindcss tailwindcss-animate
-# or
-yarn add nativewind tailwindcss tailwindcss-animate
+# Required peer dependencies
+npm install nativewind tailwindcss tailwindcss-animate react-native-reanimated react-native-gesture-handler react-native-svg react-native-safe-area-context react-native-screens
+
+# Optional (install as needed)
+npm install @gorhom/bottom-sheet react-native-worklets
+npm install @rn-primitives/accordion @rn-primitives/dialog # ... etc
 ```
 
-3. **Update imports** (if using the old package name):
+##### For Expo Projects ONLY
 
-```tsx
-// Old
-import { Button } from 'react-native-blueprint';
+3. **Install Expo-specific packages** (if you want custom fonts):
 
-// New
-import { Button } from '@campxdev/react-native-blueprint';
+```sh
+npx expo install expo-font @expo-google-fonts/poppins @expo-google-fonts/heebo
 ```
 
-That's it! Your app should work as before.
+##### For Bare React Native CLI ONLY
+
+3. **Add Reanimated plugin** to `babel.config.js`:
+
+```js
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    'react-native-reanimated/plugin', // Must be last!
+  ],
+};
+```
+
+4. **For iOS, run pod install**:
+
+```sh
+cd ios && pod install && cd ..
+```
+
+#### Font Handling Changes
+
+**v0.1.x**: Fonts were loaded via Expo automatically
+
+**v0.2.x**:
+- Uses system fonts by default (works everywhere!)
+- Expo users can still use `expo-font` (see installation guide)
+- Bare RN CLI users can add custom fonts manually (see fonts.ts documentation)
+
+That's it! Your app should work as before with better compatibility.
 
 ## Contributing
 
@@ -397,6 +546,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
@@ -406,6 +556,7 @@ Contributions are welcome! Please follow these steps:
 2. Run the example app:
 
    **Normal App Mode:**
+
    ```sh
    yarn example:app          # Start dev server
    cd example && yarn app:ios     # Or run on iOS
@@ -413,6 +564,7 @@ Contributions are welcome! Please follow these steps:
    ```
 
    **Storybook Mode (Component Library):**
+
    ```sh
    yarn example:storybook         # Start Storybook
    cd example && yarn storybook:ios      # Or run on iOS
@@ -422,6 +574,7 @@ Contributions are welcome! Please follow these steps:
 3. Make your changes in `/src`
 
 4. Run type checking and linting:
+
    ```sh
    yarn typecheck
    yarn lint
@@ -435,66 +588,12 @@ Contributions are welcome! Please follow these steps:
 ### 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.
-
-### 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:
-
-- 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
-
-For detailed troubleshooting, run the script and follow the error resolution steps provided.
-
 ## License
 
 MIT © [CAMPX](https://github.com/campx-org)

package/lib/commonjs/app/_layout.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RootLayout;
+var _portal = require("@rn-primitives/portal");
+var _reactNative = require("react-native");
+var _theme = require("../lib/theme");
+var _native = require("@react-navigation/native");
+var _nativewind = require("nativewind");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * RootLayout component - provides theme and navigation setup
+ *
+ * NOTE: CSS import intentionally removed for library export.
+ * Consumers must import '@campxdev/react-native-blueprint/global.css'
+ * in their app entry point.
+ */
+
+function RootLayout({
+  children
+}) {
+  const {
+    colorScheme
+  } = (0, _nativewind.useColorScheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_native.ThemeProvider, {
+    value: _theme.NAV_THEME[colorScheme ?? 'light'],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
+      barStyle: colorScheme === 'dark' ? 'light-content' : 'dark-content'
+    }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.PortalHost, {})]
+  });
+}
+//# sourceMappingURL=_layout.js.map

package/lib/commonjs/app/_layout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_portal","require","_reactNative","_theme","_native","_nativewind","_jsxRuntime","RootLayout","children","colorScheme","useColorScheme","jsxs","ThemeProvider","value","NAV_THEME","jsx","StatusBar","barStyle","PortalHost"],"sourceRoot":"../../../src","sources":["app/_layout.tsx"],"mappings":";;;;;;AAOA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAA4C,IAAAK,WAAA,GAAAL,OAAA;AAX5C;AACA;AACA;AACA;AACA;AACA;AACA;;AAYe,SAASM,UAAUA,CAAC;EAAEC;AAA0B,CAAC,EAAE;EAChE,MAAM;IAAEC;EAAY,CAAC,GAAG,IAAAC,0BAAc,EAAC,CAAC;EAExC,oBACE,IAAAJ,WAAA,CAAAK,IAAA,EAACP,OAAA,CAAAQ,aAAa;IAACC,KAAK,EAAEC,gBAAS,CAACL,WAAW,IAAI,OAAO,CAAE;IAAAD,QAAA,gBACtD,IAAAF,WAAA,CAAAS,GAAA,EAACb,YAAA,CAAAc,SAAS;MACRC,QAAQ,EAAER,WAAW,KAAK,MAAM,GAAG,eAAe,GAAG;IAAe,CACrE,CAAC,EACDD,QAAQ,eACT,IAAAF,WAAA,CAAAS,GAAA,EAACf,OAAA,CAAAkB,UAAU,IAAE,CAAC;EAAA,CACD,CAAC;AAEpB","ignoreList":[]}