@campxdev/react-native-blueprint 0.1.2 → 0.1.4

package/README.md

@@ -13,25 +13,39 @@ A production-ready React Native UI component library built with NativeWind (Tail
 - 🔧 **Customizable** - Easy to theme and extend with Tailwind utilities
 - ⚡ **Performant** - Built on React Native Reanimated for smooth animations
 
+## ⚠️ Prerequisites
+
+This library requires **NativeWind v4+** to be configured in your React Native project. NativeWind provides Tailwind CSS styling for React Native.
+
+**Not using NativeWind?** This library is designed specifically for NativeWind-based projects. If you're not using NativeWind, you'll need to configure it first or consider an alternative component library.
+
 ## Installation
 
+### 1. Install the package
+
 ```sh
-npm install react-native-blueprint
+npm install @campxdev/react-native-blueprint
 # or
-yarn add react-native-blueprint
+yarn add @campxdev/react-native-blueprint
 ```
 
-### Peer Dependencies
-
-This library requires the following peer dependencies:
+### 2. Install required peer dependencies
 
 ```sh
-npm install react react-native nativewind tailwindcss react-native-reanimated react-native-gesture-handler react-native-svg
+npm install nativewind tailwindcss tailwindcss-animate react-native-reanimated react-native-gesture-handler react-native-svg react-native-safe-area-context
+# or
+yarn add nativewind tailwindcss tailwindcss-animate react-native-reanimated react-native-gesture-handler react-native-svg react-native-safe-area-context
 ```
 
-### Setup
+### 3. Import the global styles
+
+In your app entry point (e.g., `App.tsx` or `_layout.tsx`):
 
-1. **Configure NativeWind:**
+```tsx
+import '@campxdev/react-native-blueprint/global.css';
+```
+
+### 4. Configure NativeWind
 
 Create or update `tailwind.config.js`:
 
@@ -42,7 +56,7 @@ module.exports = {
   darkMode: 'class',
   content: [
     './src/**/*.{ts,tsx}',
-    './node_modules/react-native-blueprint/src/**/*.{ts,tsx}',
+    './node_modules/@campxdev/react-native-blueprint/src/**/*.{ts,tsx}',
   ],
   presets: [require('nativewind/preset')],
   theme: {
@@ -91,64 +105,7 @@ module.exports = {
 };
 ```
 
-2. **Import global styles:**
-
-Create `global.css` and import the theme:
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-  }
-}
-```
-
-3. **Configure Metro:**
+### 5. Configure Metro
 
 Update `metro.config.js`:
 
@@ -166,7 +123,10 @@ module.exports = withNativeWind(config, { input: './global.css' });
 ### Basic Example
 
 ```tsx
-import { Button, Card, Text, Input, Alert } from 'react-native-blueprint';
+// 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 { View } from 'react-native';
 
 function App() {
@@ -295,9 +255,78 @@ npm run android # Run on Android emulator
 All components are fully typed with TypeScript. Import types as needed:
 
 ```tsx
-import type { ButtonProps, CardProps } from 'react-native-blueprint';
+import type { ButtonProps, CardProps } from '@campxdev/react-native-blueprint';
+```
+
+## Troubleshooting
+
+### "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
+
+### "CSS import is not supported"
+
+Your Metro bundler needs the NativeWind plugin. Update `metro.config.js`:
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });
+```
+
+### Components not styling correctly
+
+Ensure your `tailwind.config.js` includes the package path in the content array:
+
+```js
+content: [
+  './src/**/*.{ts,tsx}',
+  './node_modules/@campxdev/react-native-blueprint/src/**/*.{ts,tsx}',
+],
+```
+
+## Migration from v0.1.x to v0.2.x
+
+**Breaking Change**: CSS must now be manually imported.
+
+### What changed?
+
+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
+
+1. **Add CSS import** to your app entry point (e.g., `App.tsx` or `_layout.tsx`):
+
+```tsx
+import '@campxdev/react-native-blueprint/global.css';
+```
+
+2. **Install peer dependencies** (if not already installed):
+
+```sh
+npm install nativewind tailwindcss tailwindcss-animate
+# or
+yarn add nativewind tailwindcss tailwindcss-animate
+```
+
+3. **Update imports** (if using the old package name):
+
+```tsx
+// Old
+import { Button } from 'react-native-blueprint';
+
+// New
+import { Button } from '@campxdev/react-native-blueprint';
 ```
 
+That's it! Your app should work as before.
+
 ## Contributing
 
 Contributions are welcome! Please follow these steps:

package/lib/module/app/_layout.js

@@ -1,6 +1,12 @@
 "use strict";
 
-import '../../global.css';
+/**
+ * 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.
+ */
 import { PortalHost } from '@rn-primitives/portal';
 import { StatusBar } from 'react-native';
 import { NAV_THEME } from "../lib/theme.js";

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

@@ -1 +1 @@
-{"version":3,"names":["PortalHost","StatusBar","NAV_THEME","ThemeProvider","useColorScheme","jsx","_jsx","jsxs","_jsxs","RootLayout","children","colorScheme","value","barStyle"],"sourceRoot":"../../../src","sources":["app/_layout.tsx"],"mappings":";;AAAA,OAAO,kBAAkB;AACzB,SAASA,UAAU,QAAQ,uBAAuB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,cAAc,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAO5C,eAAe,SAASC,UAAUA,CAAC;EAAEC;AAA0B,CAAC,EAAE;EAChE,MAAM;IAAEC;EAAY,CAAC,GAAGP,cAAc,CAAC,CAAC;EAExC,oBACEI,KAAA,CAACL,aAAa;IAACS,KAAK,EAAEV,SAAS,CAACS,WAAW,IAAI,OAAO,CAAE;IAAAD,QAAA,gBACtDJ,IAAA,CAACL,SAAS;MACRY,QAAQ,EAAEF,WAAW,KAAK,MAAM,GAAG,eAAe,GAAG;IAAe,CACrE,CAAC,EACDD,QAAQ,eACTJ,IAAA,CAACN,UAAU,IAAE,CAAC;EAAA,CACD,CAAC;AAEpB","ignoreList":[]}
+{"version":3,"names":["PortalHost","StatusBar","NAV_THEME","ThemeProvider","useColorScheme","jsx","_jsx","jsxs","_jsxs","RootLayout","children","colorScheme","value","barStyle"],"sourceRoot":"../../../src","sources":["app/_layout.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,uBAAuB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,cAAc,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAO5C,eAAe,SAASC,UAAUA,CAAC;EAAEC;AAA0B,CAAC,EAAE;EAChE,MAAM;IAAEC;EAAY,CAAC,GAAGP,cAAc,CAAC,CAAC;EAExC,oBACEI,KAAA,CAACL,aAAa;IAACS,KAAK,EAAEV,SAAS,CAACS,WAAW,IAAI,OAAO,CAAE;IAAAD,QAAA,gBACtDJ,IAAA,CAACL,SAAS;MACRY,QAAQ,EAAEF,WAAW,KAAK,MAAM,GAAG,eAAe,GAAG;IAAe,CACrE,CAAC,EACDD,QAAQ,eACTJ,IAAA,CAACN,UAAU,IAAE,CAAC;EAAA,CACD,CAAC;AAEpB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-native-blueprint",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "This is a react-native package for mobile apps",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -10,6 +10,7 @@
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
+    "./global.css": "./src/global.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -20,7 +21,6 @@
     "cpp",
     "*.podspec",
     "react-native.config.js",
-    "global.css",
     "!ios/build",
     "!android/build",
     "!android/gradle",
@@ -78,17 +78,22 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "jest": "^29.7.0",
+    "nativewind": "^4.2.1",
     "prettier": "^3.6.2",
     "react": "19.1.0",
     "react-native": "0.81.4",
     "react-native-builder-bob": "^0.40.13",
     "release-it": "^19.0.4",
     "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
+    "nativewind": "^4.0.0",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.0"
   },
   "workspaces": [
     "example"
@@ -185,8 +190,7 @@
     "expo": "^54.0.12",
     "expo-font": "^14.0.9",
     "figma-squircle": "^1.1.0",
-    "lucide-react-native": "^0.486.0",
-    "nativewind": "^4.2.1",
+    "lucide-react-native": "^0.546.0",
     "react-native-figma-squircle": "^0.4.0",
     "react-native-floating-action": "^1.22.0",
     "react-native-gesture-handler": "^2.28.0",
@@ -195,7 +199,6 @@
     "react-native-screens": "^4.7.1",
     "react-native-svg": "^15.14.0",
     "react-native-worklets": "0.5.1",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwind-merge": "^3.3.1"
   }
 }

package/src/app/_layout.tsx

@@ -1,4 +1,10 @@
-import '../../global.css';
+/**
+ * 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.
+ */
 import { PortalHost } from '@rn-primitives/portal';
 import { StatusBar } from 'react-native';
 import { NAV_THEME } from '../lib/theme';