@campxdev/react-native-blueprint 0.1.9 → 0.1.12

package/README.md

@@ -21,7 +21,29 @@ 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.
+
+### Quick Start
+
+```bash
+# Install the package
+npm install @campxdev/react-native-blueprint
+# or
+yarn add @campxdev/react-native-blueprint
+
+# Install required peer dependencies (minimum)
+npm install @rn-primitives/slot @rn-primitives/types nativewind tailwindcss tailwindcss-animate
+# or
+yarn add @rn-primitives/slot @rn-primitives/types nativewind tailwindcss tailwindcss-animate
+```
+
+**Note:** Only install the `@rn-primitives` packages for components you actually use. See the [Component Dependencies](#component-dependencies) table below.
+
+### 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 +51,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!
+  ],
+};
 ```
 
-### 3. Import the global styles
+### 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
+```
+
+#### 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 +132,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 +192,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,7 +207,22 @@ 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.
 
@@ -155,7 +257,11 @@ If you want to use Re.Pack in your project:
 
 ## Usage
 
-### Basic Example
+The library supports two import methods:
+
+### Option 1: Main Package Import (Default)
+
+Import all components from the main package. You only need to install the `@rn-primitives` packages for components you actually use.
 
 ```tsx
 // Import CSS at the top of your app entry point (do this ONCE)
@@ -199,6 +305,50 @@ function App() {
 }
 ```
 
+### Option 2: Tree-Shakeable Imports (Recommended for Production)
+
+Import components individually for better tree-shaking and smaller bundle sizes. This ensures you only bundle what you use.
+
+```tsx
+// Import CSS at the top of your app entry point (do this ONCE)
+import '@campxdev/react-native-blueprint/global.css';
+
+import { Button } from '@campxdev/react-native-blueprint/Button';
+import { Card } from '@campxdev/react-native-blueprint/Card';
+import { Text } from '@campxdev/react-native-blueprint/Text';
+import { Input } from '@campxdev/react-native-blueprint/Input';
+import { Alert } from '@campxdev/react-native-blueprint/Alert';
+import { View } from 'react-native';
+
+function App() {
+  return (
+    <View className="flex-1 p-4 bg-background">
+      <Card>
+        <Card.Header>
+          <Card.Title>Welcome</Card.Title>
+          <Card.Description>
+            Get started with react-native-blueprint
+          </Card.Description>
+        </Card.Header>
+        <Card.Content>
+          <Input placeholder="Enter your name" />
+        </Card.Content>
+        <Card.Footer>
+          <Button>
+            <Text>Submit</Text>
+          </Button>
+        </Card.Footer>
+      </Card>
+
+      <Alert>
+        <Alert.Title>Info</Alert.Title>
+        <Alert.Description>This is a sample alert component.</Alert.Description>
+      </Alert>
+    </View>
+  );
+}
+```
+
 ## Available Components
 
 ### Layout & Structure
@@ -256,6 +406,72 @@ function App() {
 - **Toggle** - Toggle button
 - **Toggle Group** - Group of toggle buttons
 
+## Component Dependencies
+
+All peer dependencies are **optional** - only install what you need based on the components you use.
+
+### Core Dependencies (Required for Most Components)
+
+```bash
+npm install @rn-primitives/slot @rn-primitives/types
+```
+
+### Component-Specific Dependencies
+
+| Component | Required Packages | Notes |
+|-----------|------------------|-------|
+| **Accordion** | `@rn-primitives/accordion`<br/>`@rn-primitives/collapsible` | Collapsible content sections |
+| **Alert** | None | Always available |
+| **Alert-Dialog** | `@rn-primitives/alert-dialog`<br/>`@rn-primitives/portal` | Confirmation dialogs |
+| **AppBar** | None | Always available |
+| **Aspect-Ratio** | `@rn-primitives/aspect-ratio` | Fixed aspect ratio containers |
+| **Avatar** | `@rn-primitives/avatar` | User avatars with fallback |
+| **Badge** | None | Always available |
+| **Bottom-Sheet** | `@gorhom/bottom-sheet`<br/>`react-native-reanimated`<br/>`react-native-gesture-handler` | Bottom sheet modals |
+| **Button** | `@rn-primitives/slot` | Always available with slot |
+| **Card** | None | Always available |
+| **Checkbox** | `@rn-primitives/checkbox` | Checkbox inputs |
+| **Collapsible** | `@rn-primitives/collapsible` | Expandable content |
+| **Context-Menu** | `@rn-primitives/context-menu` | Right-click menus |
+| **Custom-Card** | None | Always available |
+| **Dialog** | `@rn-primitives/dialog`<br/>`@rn-primitives/portal` | Modal dialogs |
+| **Dropdown-Menu** | `@rn-primitives/dropdown-menu` | Dropdown menus |
+| **Floating-Action** | `react-native-floating-action` | Floating action button |
+| **Greeting-Card** | None | Always available |
+| **Hover-Card** | `@rn-primitives/hover-card` | Hover-triggered cards |
+| **Icon** | `lucide-react-native`<br/>`react-native-svg` | Icon library |
+| **Input** | None | Always available |
+| **Label** | `@rn-primitives/label` | Form labels |
+| **Menubar** | `@rn-primitives/menubar` | Menu bars |
+| **Native-Only-Animated-View** | `react-native-reanimated` | Animated views |
+| **NavBar** | None | Always available |
+| **Popover** | `@rn-primitives/popover` | Floating popovers |
+| **Progress** | `@rn-primitives/progress` | Progress bars |
+| **Radio-Group** | `@rn-primitives/radio-group` | Radio button groups |
+| **Select** | `@rn-primitives/select` | Dropdown selects |
+| **Separator** | None | Always available |
+| **SizedBox** | None | Always available |
+| **Skeleton** | None | Always available (loading states) |
+| **Slider** | `@rn-primitives/slider` | Range sliders |
+| **Switch** | `@rn-primitives/switch` | Toggle switches |
+| **Table** | None | Always available |
+| **Tabs** | `@rn-primitives/tabs` | Tab navigation |
+| **Text** | None | Always available |
+| **Textarea** | None | Always available |
+| **Theme-Toggle** | None | Always available |
+| **Toast** | Custom implementation | Toast notifications |
+| **Toggle** | `@rn-primitives/toggle` | Toggle buttons |
+| **Toggle-Group** | `@rn-primitives/toggle-group` | Toggle button groups |
+| **Tooltip** | `@rn-primitives/tooltip` | Hover tooltips |
+
+### Install All Optional Dependencies (For All Components)
+
+If you want to use all components without worrying about individual dependencies:
+
+```bash
+npm install @rn-primitives/accordion @rn-primitives/alert-dialog @rn-primitives/aspect-ratio @rn-primitives/avatar @rn-primitives/checkbox @rn-primitives/collapsible @rn-primitives/context-menu @rn-primitives/dialog @rn-primitives/dropdown-menu @rn-primitives/hover-card @rn-primitives/label @rn-primitives/menubar @rn-primitives/popover @rn-primitives/portal @rn-primitives/progress @rn-primitives/radio-group @rn-primitives/select @rn-primitives/separator @rn-primitives/slider @rn-primitives/slot @rn-primitives/switch @rn-primitives/tabs @rn-primitives/toggle @rn-primitives/toggle-group @rn-primitives/tooltip @rn-primitives/types @gorhom/bottom-sheet react-native-worklets
+```
+
 ## Theming
 
 Components use CSS variables for theming. Customize your app's appearance by modifying the CSS variables in `global.css`:
@@ -366,15 +582,31 @@ content: [
 ],
 ```
 
-## Migration from v0.1.x to v0.2.x
+## Migration Guides
+
+### Migration from v0.1.x to v0.2.x
+
+**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
+
+#### What changed?
 
-**Breaking Change**: CSS must now be manually imported.
+**v0.1.x**:
+- Included Expo as direct dependency
+- CSS auto-imported via `RootLayout`
+- All packages bundled as direct dependencies
 
-### What changed?
+**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)
 
-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.
+#### Migration Steps
 
-### 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`):
 
@@ -382,25 +614,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
 

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":[]}