feat: renamed the library from RNInAppDevTools to BugBubbleDebugger

Author: Shivangi-Lokal-26

PUBLISHING.md

@@ -1,6 +1,6 @@
-# Publishing Guide for react-native-in-app-devtools
+# Publishing Guide for @lokal-dev/react-native-bugbubble
 
-This guide will walk you through the steps to publish `react-native-in-app-devtools` to npm.
+This guide will walk you through the steps to publish `@lokal-dev/react-native-bugbubble` to npm.
 
 ## Prerequisites
 
@@ -29,7 +29,7 @@ Example:
   "author": "Your Name <your.email@example.com>",
   "repository": {
     "type": "git",
-    "url": "https://github.com/your-username/react-native-in-app-devtools.git"
+    "url": "https://github.com/lokal-app/react-native-bugbubble.git"
   },
   "version": "1.0.0"
 }
@@ -87,15 +87,15 @@ yarn lint
 ```bash
 git init
 git add .
-git commit -m "Initial commit: react-native-in-app-devtools"
+git commit -m "Initial commit: @lokal-dev/react-native-bugbubble"
 ```
 
 ### 9. Create GitHub Repository (optional but recommended)
 
 1. Create a new repository on GitHub
 2. Add the remote:
 ```bash
-git remote add origin https://github.com/your-username/react-native-in-app-devtools.git
+git remote add origin https://github.com/lokal-app/react-native-bugbubble.git
 git branch -M main
 git push -u origin main
 ```
@@ -122,8 +122,8 @@ npm whoami
 npm publish
 ```
 
-#### For Scoped Package (if you want @your-username/react-native-in-app-devtools):
-First, update `package.json` name to `@your-username/react-native-in-app-devtools`, then:
+#### For Scoped Package:
+Since this is a scoped package (`@lokal-dev/react-native-bugbubble`), publish with:
 ```bash
 npm publish --access public
 ```
@@ -134,10 +134,10 @@ npm publish --access public
 
 Check that your package is published:
 ```bash
-npm view react-native-in-app-devtools
+npm view @lokal-dev/react-native-bugbubble
 ```
 
-Or visit: `https://www.npmjs.com/package/react-native-in-app-devtools`
+Or visit: `https://www.npmjs.com/package/@lokal-dev/react-native-bugbubble`
 
 ## Version Management
 
@@ -172,8 +172,8 @@ npm publish
 ## Troubleshooting
 
 ### "Package name already exists"
-- The package name `react-native-in-app-devtools` might be taken
-- Choose a different name or use a scoped package (`@your-username/react-native-in-app-devtools`)
+- The package name `@lokal-dev/react-native-bugbubble` might be taken
+- Make sure you have access to the `@lokal-dev` npm organization
 
 ### "You do not have permission"
 - Make sure you're logged in: `npm whoami`
@@ -211,7 +211,7 @@ npm publish
 ⚠️ **Warning**: Unpublishing should be done within 72 hours of publishing and only if absolutely necessary.
 
 ```bash
-npm unpublish react-native-in-app-devtools@1.0.0
+npm unpublish @lokal-dev/react-native-bugbubble@1.0.0
 ```
 
 For packages older than 72 hours, you'll need to contact npm support.

README.md

@@ -1,4 +1,4 @@
-# React Native In-App DevTools
+# BugBubble - React Native In-App DevTools
 
 An in-app debugging tool for React Native development. Monitor network requests, WebSocket events, console logs, and analytics events in real-time with a beautiful, draggable UI. Built with TypeScript, zero configuration required, and designed to never crash your app.
 
@@ -9,7 +9,7 @@ This library currently supports logging for the following:
 - ✅ **Network Requests**: Automatically intercepts all `fetch()` and `XMLHttpRequest` calls
 - ✅ **Console Logs**: Automatically intercepts all console methods (`log`, `debug`, `info`, `warn`, `error`)
 - ✅ **WebSocket Events**: Automatically intercepts WebSocket connections and events (`open`, `message`, `close`, `error`)
-- ✅ **Analytics Events**: Requires explicit logging using `InAppDevToolsLogger.logAnalytics()`
+- ✅ **Analytics Events**: Requires explicit logging using `BugBubbleLogger.logAnalytics()`
 
 ## Features
 
@@ -42,11 +42,11 @@ This library currently supports logging for the following:
 ## Installation
 
 ```bash
-npm install react-native-in-app-devtools
+npm install @lokal-dev/react-native-bugbubble
 # or
-yarn add react-native-in-app-devtools
+yarn add @lokal-dev/react-native-bugbubble
 # or
-pnpm add react-native-in-app-devtools
+pnpm add @lokal-dev/react-native-bugbubble
 ```
 
 **No peer dependencies required!** This library is pure JavaScript/TypeScript and only requires React Native.
@@ -55,10 +55,10 @@ pnpm add react-native-in-app-devtools
 
 ### 1. Add the Debugger UI Component
 
-Add the `RNInAppDevTools` component to your app's root component. **All configuration options are completely optional** - the component works with sensible defaults:
+Add the `BugBubble` component to your app's root component. **All configuration options are completely optional** - the component works with sensible defaults:
 
 ```tsx
-import { RNInAppDevTools } from 'react-native-in-app-devtools';
+import { BugBubble } from '@lokal-dev/react-native-bugbubble';
 
 export default function App() {
   return (
@@ -67,10 +67,10 @@ export default function App() {
       <YourAppContent />
 
       {/* Minimal setup - works with defaults */}
-      <RNInAppDevTools />
+      <BugBubble />
 
       {/* Or customize with optional config */}
-      <RNInAppDevTools
+      <BugBubble
         config={{
           maxLogs: 1000,
           floatingButtonPosition: {
@@ -100,7 +100,7 @@ The debugger will automatically start intercepting:
 - ✅ **Network Requests**: All `fetch()` and `XMLHttpRequest` calls (automatic)
 - ✅ **Console Logs**: All console methods (`log`, `debug`, `info`, `warn`, `error`) (automatic)
 - ✅ **WebSocket Events**: All WebSocket connections and events (automatic)
-- ⚠️ **Analytics Events**: Must be explicitly logged using `InAppDevToolsLogger.logAnalytics()` (see below)
+- ⚠️ **Analytics Events**: Must be explicitly logged using `BugBubbleLogger.logAnalytics()` (see below)
 
 **Note**: While network, console, and WebSocket logs are automatically intercepted, you can also use explicit logging methods if needed for custom scenarios.
 
@@ -115,23 +115,23 @@ A floating button will appear on your screen. **Tap it to open the debugger, or
 - **Network Requests**: Automatically intercepted - no code changes needed
 - **Console Logs**: Automatically intercepted - no code changes needed  
 - **WebSocket Events**: Automatically intercepted - no code changes needed
-- **Analytics Events**: **Must be explicitly logged** - use `InAppDevToolsLogger.logAnalytics()`
+- **Analytics Events**: **Must be explicitly logged** - use `BugBubbleLogger.logAnalytics()`
 
 While network, console, and WebSocket logs are automatically captured, explicit logging methods are also available for all log types if you need to manually log events in custom scenarios.
 
 ### Explicit Logging API
 
-**Analytics events must be explicitly logged**. For network, console, and WebSocket, explicit logging is optional but available for custom scenarios. Use the `InAppDevToolsLogger` API:
+**Analytics events must be explicitly logged**. For network, console, and WebSocket, explicit logging is optional but available for custom scenarios. Use the `BugBubbleLogger` API:
 
 ```tsx
-import { InAppDevToolsLogger } from 'react-native-in-app-devtools';
+import { BugBubbleLogger } from '@lokal-dev/react-native-bugbubble';
 ```
 
 #### Log Analytics Events
 
 ```tsx
 // Log an analytics event
-InAppDevToolsLogger.logAnalytics('user_login', {
+BugBubbleLogger.logAnalytics('user_login', {
   userId: '123',
   method: 'email',
   timestamp: Date.now(),
@@ -142,7 +142,7 @@ InAppDevToolsLogger.logAnalytics('user_login', {
 
 ```tsx
 // Log a network request explicitly
-InAppDevToolsLogger.logNetwork(
+BugBubbleLogger.logNetwork(
   'POST',
   'https://api.example.com/users',
   201, // status code
@@ -158,7 +158,7 @@ InAppDevToolsLogger.logNetwork(
 
 ```tsx
 // Log a WebSocket event
-InAppDevToolsLogger.logWebSocket('message', 'wss://api.example.com/ws', {
+BugBubbleLogger.logWebSocket('message', 'wss://api.example.com/ws', {
   type: 'ping',
   data: 'hello',
 });
@@ -168,23 +168,23 @@ InAppDevToolsLogger.logWebSocket('message', 'wss://api.example.com/ws', {
 
 ```tsx
 // Log console messages explicitly
-InAppDevToolsLogger.logConsole('info', 'User logged in', { userId: '123' });
-InAppDevToolsLogger.logConsole('error', 'Failed to fetch data', error);
-InAppDevToolsLogger.logConsole('warn', 'Deprecated API used');
+BugBubbleLogger.logConsole('info', 'User logged in', { userId: '123' });
+BugBubbleLogger.logConsole('error', 'Failed to fetch data', error);
+BugBubbleLogger.logConsole('warn', 'Deprecated API used');
 ```
 
 ### Configuration
 
-**All configuration options are completely optional**. The library works with sensible defaults out of the box. Configuration is passed as a prop to the `RNInAppDevTools` component:
+**All configuration options are completely optional**. The library works with sensible defaults out of the box. Configuration is passed as a prop to the `BugBubble` component:
 
 ```tsx
-import { RNInAppDevTools } from 'react-native-in-app-devtools';
+import { BugBubble } from '@lokal-dev/react-native-bugbubble';
 
 // Minimal setup - all config is optional
-<RNInAppDevTools />
+<BugBubble />
 
 // Or customize with optional config
-<RNInAppDevTools
+<BugBubble
   config={{
     maxLogs: 1000, // Optional: defaults to 1000
     floatingButtonPosition: {
@@ -215,7 +215,7 @@ You can disable tracking for specific log types or disable all tracking. When tr
 
 ```tsx
 // Disable network tracking only
-<RNInAppDevTools
+<BugBubble
   config={{
     trackingOptions: {
       enabled: true,
@@ -227,7 +227,7 @@ You can disable tracking for specific log types or disable all tracking. When tr
 />
 
 // Disable multiple log types
-<RNInAppDevTools
+<BugBubble
   config={{
     trackingOptions: {
       enabled: true,
@@ -240,7 +240,7 @@ You can disable tracking for specific log types or disable all tracking. When tr
 />
 
 // Disable all tracking (button will also be hidden)
-<RNInAppDevTools
+<BugBubble
   config={{
     trackingOptions: {
       enabled: false, // All tracking disabled and floating button hidden
@@ -253,33 +253,33 @@ You can disable tracking for specific log types or disable all tracking. When tr
 
 ## API Reference
 
-### `RNInAppDevTools`
+### `BugBubble`
 
 Root component that renders the debugger UI. Should be added at the root level of your app.
 
 #### Props
 
 ```typescript
-interface RNInAppDevToolsProps {
-  config?: Partial<InspectorConfig>;
+interface BugBubbleProps {
+  config?: Partial<BugBubbleConfig>;
 }
 ```
 
 - `config` (optional): Partial configuration object. If not provided, default configuration will be used.
 
-### `InAppDevToolsLogger`
+### `BugBubbleLogger`
 
 Explicit logging API for manual event logging.
 
-- `InAppDevToolsLogger.logAnalytics(eventName, properties?)` - Log analytics event
-- `InAppDevToolsLogger.logNetwork(method, url, statusCode?, requestHeaders?, responseHeaders?, requestBody?, responseBody?, duration?)` - Log network request
-- `InAppDevToolsLogger.logWebSocket(event, url?, data?)` - Log WebSocket event
-- `InAppDevToolsLogger.logConsole(level, ...args)` - Log console message
+- `BugBubbleLogger.logAnalytics(eventName, properties?)` - Log analytics event
+- `BugBubbleLogger.logNetwork(method, url, statusCode?, requestHeaders?, responseHeaders?, requestBody?, responseBody?, duration?)` - Log network request
+- `BugBubbleLogger.logWebSocket(event, url?, data?)` - Log WebSocket event
+- `BugBubbleLogger.logConsole(level, ...args)` - Log console message
 
 ### Types
 
 ```typescript
-interface InspectorConfig {
+interface BugBubbleConfig {
   maxLogs: number;
   floatingButtonPosition: {
     top: number;
@@ -408,24 +408,24 @@ This library is designed to **never crash your app**. All operations are wrapped
 
 ## Best Practices
 
-1. **Minimal Setup Works**: All configuration is optional - you can use `<RNInAppDevTools />` without any config:
+1. **Minimal Setup Works**: All configuration is optional - you can use `<BugBubble />` without any config:
 
 ```tsx
-{__DEV__ && <RNInAppDevTools />}
+{__DEV__ && <BugBubble />}
 ```
 
-2. **Analytics Requires Explicit Logging**: Remember that analytics events must be explicitly logged using `InAppDevToolsLogger.logAnalytics()`. Network, console, and WebSocket logs are automatically intercepted.
+2. **Analytics Requires Explicit Logging**: Remember that analytics events must be explicitly logged using `BugBubbleLogger.logAnalytics()`. Network, console, and WebSocket logs are automatically intercepted.
 
 3. **Initialize in Development Only**: Only include the debugger in non-production environments:
 
 ```tsx
-{__DEV__ && <RNInAppDevTools />}
+{__DEV__ && <BugBubble />}
 ```
 
 4. **Customize Only When Needed**: Only pass config options when you need to override defaults:
 
 ```tsx
-<RNInAppDevTools
+<BugBubble
   config={{
     maxLogs: 500, // Only if you want to change from default 1000
     trackingOptions: {
@@ -442,7 +442,7 @@ This library is designed to **never crash your app**. All operations are wrapped
 
 ### Debugger Not Appearing
 
-- Ensure you've added `<RNInAppDevTools />` component to your app
+- Ensure you've added `<BugBubble />` component to your app
 - Check that you're not in production mode (consider wrapping with `__DEV__`)
 - Verify that `trackingOptions.enabled` is set to `true` in config (default: true)
 

example/README.md

@@ -1,6 +1,6 @@
 # Example App
 
-This example app demonstrates all the features of `react-native-in-app-devtools` library. It showcases automatic interception of console logs, network requests, and WebSocket events, as well as explicit logging capabilities.
+This example app demonstrates all the features of `@lokal-dev/react-native-bugbubble` library. It showcases automatic interception of console logs, network requests, and WebSocket events, as well as explicit logging capabilities.
 
 ## Prerequisites
 
@@ -60,7 +60,7 @@ When you run the example app, you'll see:
 
 1. **Title and Subtitle**: "React Native In-App DevTools" with "Comprehensive Feature Demo"
 
-2. **Info Banner**: A blue banner explaining that automatic interception works out of the box, and explicit logging is available via `InAppDevToolsLogger`
+2. **Info Banner**: A blue banner explaining that automatic interception works out of the box, and explicit logging is available via `BugBubbleLogger`
 
 3. **Four Demo Sections**:
    - **💬 Console Logs**: Demonstrates automatic console log interception
@@ -87,7 +87,7 @@ When you run the example app, you'll see:
   - These are automatically intercepted and logged in the debugger
 
 - **"Manual Console Log" Button**:
-  - Uses `InAppDevToolsLogger.logConsole()` to explicitly log messages
+  - Uses `BugBubbleLogger.logConsole()` to explicitly log messages
   - Demonstrates manual logging with different log levels
 
 ### Network Requests Section
@@ -101,7 +101,7 @@ When you run the example app, you'll see:
   - Automatically intercepted and logged with request body and response
 
 - **"Manual Network Log" Button**:
-  - Uses `InAppDevToolsLogger.logNetwork()` to explicitly log a network request
+  - Uses `BugBubbleLogger.logNetwork()` to explicitly log a network request
   - Shows how to manually log network events with full details
 
 ### WebSocket Events Section
@@ -115,13 +115,13 @@ When you run the example app, you'll see:
   - Message events are automatically intercepted
 
 - **"Manual WebSocket Log" Button**:
-  - Uses `InAppDevToolsLogger.logWebSocket()` to explicitly log WebSocket events
+  - Uses `BugBubbleLogger.logWebSocket()` to explicitly log WebSocket events
   - Demonstrates manual WebSocket event logging
 
 ### Analytics Events Section
 
 - **"Log Analytics Events" Button**:
-  - Uses `InAppDevToolsLogger.logAnalytics()` to log analytics events
+  - Uses `BugBubbleLogger.logAnalytics()` to log analytics events
   - Shows examples of button clicks and screen views
   - Note: Analytics events must be logged explicitly (not automatically intercepted)
 
@@ -216,5 +216,5 @@ Try these scenarios to see the library in action:
 - The example app uses Expo for easy cross-platform development
 - All configuration options are demonstrated in `App.tsx`
 - The library automatically intercepts network, console, and WebSocket events without any additional setup
-- Analytics events require explicit logging using `InAppDevToolsLogger.logAnalytics()`
+- Analytics events require explicit logging using `BugBubbleLogger.logAnalytics()`
 

example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-native-in-app-devtools-example",
+  "name": "react-native-bugbubble-example",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {