@amit_mandal/smart-logger-devtools 1.0.0

package/SmartLogger DevTools.md

@@ -0,0 +1,156 @@
+# SmartLogger DevTools
+
+A reusable JavaScript/TypeScript package that intercepts console logs and provides a floating UI with a modal log viewer
+
+## Features
+
+- **Console Interception**: Intercepts `console.log`, `warn`, `error`, `info`, and `debug` methods.
+- **Configurable Logging**: Control log suppression, timestamp display, component name display, and active log levels.
+- **Log History**: Stores a configurable number of recent log entries in memory.
+- **Floating UI**: A discreet floating button to open the log viewer modal.
+- **Interactive Log Modal**: Displays logs with filtering by level, search functionality, and the ability to clear logs.
+- **Production Suppression**: Automatically suppresses logs in production environments by default.
+- **Type-safe**: Written in TypeScript with comprehensive type definitions.
+- **Framework Compatible**: Designed for seamless integration with React and Next.js projects.
+- **Clean Up**: Provides a method to restore original console behavior.
+
+## Installation
+
+```bash
+npm install @amit_mandal/smart-logger-devtools
+# or
+yarn add @amit_mandal/smart-logger-devtools
+```
+
+## Usage
+
+### 1. Initialize SmartLogger
+
+Initialize the `SmartLogger` early in your application, for example, in `_app.tsx` (Next.js) or `main.tsx` (React).
+
+```typescript
+// src/main.tsx or pages/_app.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { SmartLogger } from '@amit_mandal/smart-logger-devtools';
+
+// Initialize SmartLogger before your application renders
+SmartLogger.init({
+  enabled: true, // Set to false to suppress all logs
+  showTimestamp: true, // Prepend timestamp to logs
+  showComponentName: true, // Prepend component name if provided
+  maxHistory: 100, // Store last 100 logs
+  level: ['log', 'warn', 'error', 'info', 'debug'], // Only show these log levels
+});
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+
+// Example logs after initialization
+console.log('[App] Application started.');
+console.warn('[Auth] User session expiring soon.');
+console.error('[API] Failed to fetch data.', { status: 500 });
+console.info('This is an info message.');
+console.debug('This is a debug message.');
+```
+
+### 2. Add the DevTools Component to Your App
+
+Place the `SmartLoggerDevTools` component at the root level of your React application. This component renders the floating button and the log modal.
+
+```typescript
+// src/App.tsx
+import React from 'react';
+import { SmartLoggerDevTools } from '@amit_mandal/smart-logger-devtools';
+
+function App() {
+  return (
+    <div>
+      <h1>My Application</h1>
+      {/* Your application content goes here */}
+
+      {/* Add the DevTools component, ideally at the root of your app */}
+      <SmartLoggerDevTools />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Configuration Options
+
+These options are passed to `SmartLogger.init(config)`:
+
+| Option            | Type         | Default                                       | Description                                                               |
+| :---------------- | :----------- | :-------------------------------------------- | :------------------------------------------------------------------------ |
+| `enabled`         | `boolean`    | `process.env.NODE_ENV !== 'production'`       | If `false`, all logs are suppressed and not stored.                       |
+| `showTimestamp`   | `boolean`    | `true`                                        | Prepends an ISO-formatted timestamp to each log in the console.           |
+| `showComponentName` | `boolean`    | `false`                                       | Prepends a component/module name (e.g., `[ComponentName]`) to logs in the console.       |
+| `maxHistory`      | `number`     | `100`                                         | The maximum number of log entries to store in memory and display in the modal. |
+| `level`           | `LogLevel[]` | `['log', 'warn', 'error', 'info', 'debug']` | An array of log levels to enable. Other levels will be suppressed from history and console output. |
+
+### Utility Methods
+
+#### `SmartLogger.getHistory()`
+
+Retrieves the array of stored log entries.
+
+```typescript
+import { SmartLogger, LogEntry } from '@amit_mandal/smart-logger-devtools';
+
+const history: LogEntry[] = SmartLogger.getHistory();
+console.log('Current log history:', history);
+```
+
+#### `SmartLogger.clearHistory()`
+
+Clears all stored log entries from the history and the modal display.
+
+```typescript
+import { SmartLogger } from '@amit_mandal/smart-logger-devtools';
+
+SmartLogger.clearHistory();
+console.log('History after clearing:', SmartLogger.getHistory());
+```
+
+#### `SmartLogger.destroy()`
+
+Restores the original `console` methods and cleans up the logger's internal state. This is useful for testing or when you no longer need `SmartLogger`.
+
+```typescript
+import { SmartLogger } from '@amit_mandal/smart-logger-devtools';
+
+SmartLogger.destroy();
+console.log('SmartLogger destroyed. Original console behavior restored.');
+```
+
+## Log Entry Structure
+
+Each log entry stored in the history has the following structure:
+
+```typescript
+interface LogEntry {
+  id: string;        // Unique ID for the log entry
+  timestamp: string; // ISO-formatted timestamp
+  level: 'log' | 'warn' | 'error' | 'info' | 'debug';
+  message: string;   // The main log message
+  args: any[];       // Additional arguments passed to the console method
+}
+```
+
+## Development vs. Production
+
+By default, `SmartLogger` is `enabled` in development environments (`process.env.NODE_ENV !== 'production'`) and `disabled` in production. When disabled, all console logs are suppressed from history and the modal, and only the original console methods are called (if `enabled` is explicitly `false`, even original calls might be suppressed depending on the `level` configuration). You can override this behavior with the `enabled` configuration option.
+
+## Contributing
+
+Feel free to open issues or pull requests on the GitHub repository.
+
+## License
+
+This project is licensed under the MIT License.

package/SmartLogger.md

@@ -0,0 +1,113 @@
+# SmartLogger
+
+A reusable JavaScript/TypeScript package that intercepts console logs and provides configurable logging with history management.
+
+## Features
+
+- **Configurable Logging**: Control log suppression, timestamp display, component name display, and active log levels.
+- **Log History**: Stores a configurable number of recent log entries in memory.
+- **Production Suppression**: Automatically suppresses logs in production environments by default.
+- **Type-safe**: Written in TypeScript with comprehensive type definitions.
+- **Framework Compatible**: Designed to be compatible with modern JavaScript frameworks like React and Next.js.
+- **Clean Up**: Provides a method to restore original console behavior.
+
+## Installation
+
+```bash
+npm install @amit_mandal/smart-logger-devtools
+# or
+yarn add @amit_mandal/smart-logger-devtools
+```
+
+## Usage
+
+### Initialization
+
+Initialize the `SmartLogger` early in your application, for example, in `app.tsx` or `main.tsx`.
+
+```typescript
+import { SmartLogger } from '@amit_mandal/smart-logger-devtools';
+
+SmartLogger.init({
+  enabled: true, // or false to suppress all logs
+  showTimestamp: true, // prepend timestamp to logs
+  showComponentName: true, // prepend component name if provided
+  maxHistory: 50, // store last 50 logs
+  level: ['log', 'warn', 'error'], // only show these log levels
+});
+
+// Now, your console methods are intercepted
+console.log('[App] Application started.');
+console.warn('[Auth] User session expiring soon.');
+console.error('[API] Failed to fetch data.', { status: 500 });
+```
+
+### Configuration Options
+
+| Option            | Type      | Default                                       | Description                                                               |
+| :---------------- | :-------- | :-------------------------------------------- | :------------------------------------------------------------------------ |
+| `enabled`         | `boolean` | `process.env.NODE_ENV !== 'production'`       | If `false`, all logs are suppressed.                                      |
+| `showTimestamp`   | `boolean` | `true`                                        | Prepends an ISO-formatted timestamp to each log.                          |
+| `showComponentName` | `boolean` | `false`                                       | Prepends a component/module name (e.g., `[ComponentName]`) to logs.       |
+| `maxHistory`      | `number`  | `100`                                         | The maximum number of log entries to store in memory.                     |
+| `level`           | `LogLevel[]` | `['log', 'warn', 'error', 'info', 'debug']` | An array of log levels to enable. Other levels will be suppressed.        |
+
+### Utility Methods
+
+#### `SmartLogger.getHistory()`
+
+Retrieves the array of stored log entries.
+
+```typescript
+import { SmartLogger, LogEntry } from '@amit_mandal/smart-logger-devtools';
+
+const history: LogEntry[] = SmartLogger.getHistory();
+console.log('Current log history:', history);
+```
+
+#### `SmartLogger.clearHistory()`
+
+Clears all stored log entries from the history.
+
+```typescript
+import { SmartLogger } from '@amit_mandal/smart-logger-devtools';
+
+SmartLogger.clearHistory();
+console.log('History after clearing:', SmartLogger.getHistory());
+```
+
+#### `SmartLogger.destroy()`
+
+Restores the original `console` methods and cleans up the logger's internal state. This is useful for testing or when you no longer need `SmartLogger`.
+
+```typescript
+import { SmartLogger } from '@amit_mandal/smart-logger-devtools';
+
+SmartLogger.destroy();
+console.log('SmartLogger destroyed. Original console behavior restored.');
+```
+
+## Log Entry Structure
+
+Each log entry stored in the history has the following structure:
+
+```typescript
+interface LogEntry {
+  timestamp: string; // ISO-formatted timestamp
+  level: 'log' | 'warn' | 'error' | 'info' | 'debug';
+  message: string;   // The main log message
+  args: any[];       // Additional arguments passed to the console method
+}
+```
+
+## Development vs. Production
+
+By default, `SmartLogger` is `enabled` in development environments (`process.env.NODE_ENV !== 'production'`) and `disabled` in production. When disabled, all console logs are suppressed, and no history is stored. You can override this behavior with the `enabled` configuration option.
+
+## Contributing
+
+Feel free to open issues or pull requests on the GitHub repository.
+
+## License
+
+This project is licensed under the MIT License.

package/dist/index.d.mts

@@ -0,0 +1,55 @@
+import React from 'react';
+
+type LogLevel = "log" | "warn" | "error" | "info" | "debug";
+interface SmartLoggerConfig {
+    enabled?: boolean;
+    showTimestamp?: boolean;
+    showComponentName?: boolean;
+    maxHistory?: number;
+    level?: LogLevel[];
+}
+interface LogEntry {
+    id: string;
+    timestamp: string;
+    level: LogLevel;
+    message: string;
+    args: any[];
+}
+interface EventEmitter {
+    on(event: string, listener: Function): () => void;
+    emit(event: string, ...args: any[]): void;
+}
+
+declare class SmartLogger {
+    #private;
+    static getConfig(): SmartLoggerConfig;
+    static init(config?: SmartLoggerConfig): void;
+    static getHistory(): LogEntry[];
+    static clearHistory(): void;
+    static destroy(): void;
+    static subscribeToLogs(callback: (log: LogEntry) => void): () => void;
+}
+
+/**
+ * SmartLoggerDevTools is the main component that combines the floating button and log modal.
+ * It should be placed at the root level of your React application.
+ *
+ * Usage:
+ * ```tsx
+ * import { SmartLoggerDevTools } from 'smart-logger-devtools';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <YourApp />
+ *       <SmartLoggerDevTools />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare const SmartLoggerDevTools: React.FC;
+
+declare const useLogHistory: () => LogEntry[];
+
+export { type EventEmitter, type LogEntry, type LogLevel, SmartLogger, type SmartLoggerConfig, SmartLoggerDevTools, useLogHistory };

package/dist/index.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+
+type LogLevel = "log" | "warn" | "error" | "info" | "debug";
+interface SmartLoggerConfig {
+    enabled?: boolean;
+    showTimestamp?: boolean;
+    showComponentName?: boolean;
+    maxHistory?: number;
+    level?: LogLevel[];
+}
+interface LogEntry {
+    id: string;
+    timestamp: string;
+    level: LogLevel;
+    message: string;
+    args: any[];
+}
+interface EventEmitter {
+    on(event: string, listener: Function): () => void;
+    emit(event: string, ...args: any[]): void;
+}
+
+declare class SmartLogger {
+    #private;
+    static getConfig(): SmartLoggerConfig;
+    static init(config?: SmartLoggerConfig): void;
+    static getHistory(): LogEntry[];
+    static clearHistory(): void;
+    static destroy(): void;
+    static subscribeToLogs(callback: (log: LogEntry) => void): () => void;
+}
+
+/**
+ * SmartLoggerDevTools is the main component that combines the floating button and log modal.
+ * It should be placed at the root level of your React application.
+ *
+ * Usage:
+ * ```tsx
+ * import { SmartLoggerDevTools } from 'smart-logger-devtools';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <YourApp />
+ *       <SmartLoggerDevTools />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare const SmartLoggerDevTools: React.FC;
+
+declare const useLogHistory: () => LogEntry[];
+
+export { type EventEmitter, type LogEntry, type LogLevel, SmartLogger, type SmartLoggerConfig, SmartLoggerDevTools, useLogHistory };