@amit_mandal/smart-logger-devtools 1.0.0

package/src/styles/index.css

@@ -0,0 +1,321 @@
+.smart-logger-floating-button {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      135deg,
+      #667eea 0%,
+      #764ba2 100%);
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  z-index: 9998;
+  font-weight: bold;
+}
+.smart-logger-floating-button:hover,
+.smart-logger-floating-button.hovered {
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+.smart-logger-floating-button:active {
+  transform: scale(0.95);
+}
+.smart-logger-button-icon {
+  position: absolute;
+  font-size: 28px;
+}
+.smart-logger-button-count {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: #ff4757;
+  color: white;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  border: 2px solid white;
+}
+.smart-logger-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  animation: fadeIn 0.3s ease;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.smart-logger-modal {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  width: 90%;
+  max-width: 900px;
+  height: 80vh;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+  animation: slideUp 0.3s ease;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+}
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.smart-logger-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #e0e0e0;
+  background:
+    linear-gradient(
+      135deg,
+      #667eea 0%,
+      #764ba2 100%);
+  color: white;
+  border-radius: 12px 12px 0 0;
+}
+.smart-logger-modal-header h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+.smart-logger-close-button {
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+.smart-logger-close-button:hover {
+  transform: scale(1.2);
+}
+.smart-logger-modal-controls {
+  display: flex;
+  gap: 10px;
+  padding: 15px 20px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f9f9f9;
+  flex-wrap: wrap;
+}
+.smart-logger-search-input,
+.smart-logger-filter-select {
+  padding: 8px 12px;
+  border: 1px solid #d0d0d0;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 0.2s ease;
+}
+.smart-logger-search-input {
+  flex: 1;
+  min-width: 200px;
+}
+.smart-logger-search-input:focus,
+.smart-logger-filter-select:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+.smart-logger-filter-select {
+  min-width: 120px;
+}
+.smart-logger-clear-button {
+  padding: 8px 16px;
+  background: #ff4757;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 0.2s ease;
+}
+.smart-logger-clear-button:hover {
+  background: #ff3838;
+}
+.smart-logger-modal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+.smart-logger-log-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.smart-logger-log-item {
+  padding: 12px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s ease;
+}
+.smart-logger-log-item:hover {
+  background-color: #f9f9f9;
+}
+.smart-logger-log-item.error {
+  background-color: #fff5f5;
+}
+.smart-logger-log-item.warn {
+  background-color: #fffbf0;
+}
+.smart-logger-log-item.info {
+  background-color: #f0f7ff;
+}
+.smart-logger-log-header {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.smart-logger-log-level {
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.smart-logger-log-timestamp {
+  font-size: 12px;
+  color: #999;
+  font-family:
+    "Monaco",
+    "Courier New",
+    monospace;
+}
+.smart-logger-log-message {
+  font-size: 14px;
+  color: #333;
+  word-break: break-word;
+  font-family:
+    "Monaco",
+    "Courier New",
+    monospace;
+}
+.smart-logger-log-details {
+  margin-top: 8px;
+  font-size: 12px;
+}
+.smart-logger-log-details summary {
+  cursor: pointer;
+  color: #667eea;
+  font-weight: 500;
+  padding: 4px 0;
+  user-select: none;
+}
+.smart-logger-log-details summary:hover {
+  text-decoration: underline;
+}
+.smart-logger-log-args {
+  background: #f5f5f5;
+  padding: 10px;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-size: 12px;
+  margin: 8px 0 0 0;
+  border: 1px solid #e0e0e0;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.smart-logger-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  font-size: 16px;
+}
+.smart-logger-modal-footer {
+  padding: 12px 20px;
+  border-top: 1px solid #e0e0e0;
+  background: #f9f9f9;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 0 0 12px 12px;
+}
+.smart-logger-log-count {
+  font-size: 12px;
+  color: #666;
+  font-weight: 500;
+}
+@media (max-width: 768px) {
+  .smart-logger-modal {
+    width: 95%;
+    max-height: 90vh;
+  }
+  .smart-logger-modal-controls {
+    flex-direction: column;
+  }
+  .smart-logger-search-input,
+  .smart-logger-filter-select,
+  .smart-logger-clear-button {
+    width: 100%;
+  }
+  .smart-logger-floating-button {
+    bottom: 10px;
+    right: 10px;
+    width: 50px;
+    height: 50px;
+  }
+}
+.text-red-500 {
+  color: #ff4757;
+}
+.text-yellow-500 {
+  color: #ffa502;
+}
+.text-blue-500 {
+  color: #0984e3;
+}
+.text-purple-500 {
+  color: #a29bfe;
+}
+.text-gray-700 {
+  color: #2d3436;
+}

package/src/types.ts

@@ -0,0 +1,22 @@
+export type LogLevel = "log" | "warn" | "error" | "info" | "debug";
+
+export interface SmartLoggerConfig {
+  enabled?: boolean;
+  showTimestamp?: boolean;
+  showComponentName?: boolean;
+  maxHistory?: number;
+  level?: LogLevel[];
+}
+
+export interface LogEntry {
+  id: string;
+  timestamp: string;
+  level: LogLevel;
+  message: string;
+  args: any[];
+}
+
+export interface EventEmitter {
+  on(event: string, listener: Function): () => void;
+  emit(event: string, ...args: any[]): void;
+}

package/src/ui/FloatingButton.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import "../styles/index.css";
+
+interface FloatingButtonProps {
+  onClick: () => void;
+  logCount: number;
+}
+
+export const FloatingButton: React.FC<FloatingButtonProps> = ({ onClick, logCount }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <button
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className={`smart-logger-floating-button ${isHovered ? "hovered" : ""}`}
+      title="Open SmartLogger DevTools"
+    >
+      <span className="smart-logger-button-icon">📋</span>
+      <span className="smart-logger-button-count">{logCount}</span>
+    </button>
+  );
+};

package/src/ui/LogModal.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import type { LogEntry, LogLevel } from "../types";
+import { getLogLevelColor } from "../utils/formatters";
+import "../styles/index.css";
+
+interface LogModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  logs: LogEntry[];
+  onClearLogs: () => void;
+}
+export const LogModal: React.FC<LogModalProps> = ({ isOpen, onClose, logs, onClearLogs }) => {
+  const [selectedLevel, setSelectedLevel] = useState<LogLevel | "all">("all");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredLogs = logs.filter((log) => {
+    const levelMatch = selectedLevel === "all" || log.level === selectedLevel;
+    const searchMatch = log.message.toLowerCase().includes(searchQuery.toLowerCase());
+    return levelMatch && searchMatch;
+  });
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="smart-logger-modal-overlay" onClick={onClose}>
+      <div className="smart-logger-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="smart-logger-modal-header">
+          <h2>SmartLogger DevTools</h2>
+          <button className="smart-logger-close-button" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        <div className="smart-logger-modal-controls">
+          <input
+            type="text"
+            placeholder="Search logs..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="smart-logger-search-input"
+          />
+
+          <select
+            value={selectedLevel}
+            onChange={(e) => setSelectedLevel(e.target.value as LogLevel | "all")}
+            className="smart-logger-filter-select"
+          >
+            <option value="all">All Levels</option>
+            <option value="log">Log</option>
+            <option value="info">Info</option>
+            <option value="warn">Warn</option>
+            <option value="error">Error</option>
+            <option value="debug">Debug</option>
+          </select>
+
+          <button className="smart-logger-clear-button" onClick={onClearLogs}>
+            Clear Logs
+          </button>
+        </div>
+
+        <div className="smart-logger-modal-content">
+          {filteredLogs.length === 0 ? (
+            <div className="smart-logger-empty-state">
+              <p>No logs to display</p>
+            </div>
+          ) : (
+            <ul className="smart-logger-log-list">
+              {filteredLogs.map((log) => (
+                <li key={log.id} className={`smart-logger-log-item ${log.level}`}>
+                  <div className="smart-logger-log-header">
+                    <span className={`smart-logger-log-level ${getLogLevelColor(log.level)}`}>
+                      [{log.level.toUpperCase()}]
+                    </span>
+                    <span className="smart-logger-log-timestamp">{log.timestamp}</span>
+                  </div>
+                  <div className="smart-logger-log-message">{log.message}</div>
+                  {log.args && log.args.length > 0 && (
+                    <details className="smart-logger-log-details">
+                      <summary>View Arguments</summary>
+                      <pre className="smart-logger-log-args">
+                        {JSON.stringify(log.args, null, 2)}
+                      </pre>
+                    </details>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div className="smart-logger-modal-footer">
+          <span className="smart-logger-log-count">Total: {filteredLogs.length} logs</span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/utils/formatters.ts

@@ -0,0 +1,29 @@
+import type { LogEntry } from "../types";
+export const formatLogMessage = (log: LogEntry): string => {
+  let message = `${log.timestamp} [${log.level.toUpperCase()}] ${log.message}`;
+  if (log.args && log.args.length > 0) {
+    message += ` ${log.args.map(arg => {
+      if (typeof arg === 'object' && arg !== null) {
+        return JSON.stringify(arg);
+      }
+      return String(arg);
+    }).join(' ')}`;
+  }
+  return message;
+};
+
+export const getLogLevelColor = (level: LogEntry["level"]) => {
+  switch (level) {
+    case "error":
+      return "text-red-500";
+    case "warn":
+      return "text-yellow-500";
+    case "info":
+      return "text-blue-500";
+    case "debug":
+      return "text-purple-500";
+    case "log":
+    default:
+      return "text-gray-700";
+  }
+};