@khester/create-dynamics-app 2.1.0 → 2.2.0

package/templates/react-custom-page/src/components/Logging/LoggingContext.tsx

@@ -1,166 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  ReactNode,
-} from 'react';
-import { Logger } from './logger';
-
-/**
- * Log entry interface
- */
-export interface LogEntry {
-  timestamp: string;
-  message: string;
-  source?: string;
-}
-
-/**
- * Logging context properties
- */
-interface LoggingContextProps {
-  logs: LogEntry[];
-  addLog: (message: string, source?: string) => void;
-  clearLogs: () => void;
-}
-
-/**
- * Logging context
- */
-const LoggingContext = createContext<LoggingContextProps | undefined>(
-  undefined
-);
-
-/**
- * Props for LoggingProvider
- */
-interface LoggingProviderProps {
-  children: ReactNode;
-  interceptConsole?: boolean;
-}
-
-/**
- * Logging provider component that manages logging state and provides context
- */
-export const LoggingProvider: React.FC<LoggingProviderProps> = ({
-  children,
-  interceptConsole = false,
-}) => {
-  const [logs, setLogs] = useState<LogEntry[]>([]);
-
-  /**
-   * Add a new log entry
-   */
-  const addLog = (message: string, source?: string) => {
-    const timestamp = new Date().toISOString();
-    const newLog: LogEntry = {
-      timestamp,
-      message,
-      source,
-    };
-
-    setLogs((prevLogs) => [...prevLogs, newLog]);
-  };
-
-  /**
-   * Clear all logs
-   */
-  const clearLogs = () => {
-    setLogs([]);
-  };
-
-  /**
-   * Setup logger integration and optional console interception
-   */
-  useEffect(() => {
-    // Set the logger function to use our addLog method
-    Logger.setLoggerFunction(addLog);
-
-    // Optional console interception
-    if (interceptConsole) {
-      const originalConsoleLog = console.log;
-      const originalConsoleError = console.error;
-      const originalConsoleWarn = console.warn;
-
-      console.log = (...args: any[]) => {
-        const message = args
-          .map((arg) =>
-            typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
-          )
-          .join(' ');
-        addLog(message, 'console.log');
-        originalConsoleLog(...args);
-      };
-
-      console.error = (...args: any[]) => {
-        const message = args
-          .map((arg) =>
-            typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
-          )
-          .join(' ');
-        addLog(`ERROR: ${message}`, 'console.error');
-        originalConsoleError(...args);
-      };
-
-      console.warn = (...args: any[]) => {
-        const message = args
-          .map((arg) =>
-            typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
-          )
-          .join(' ');
-        addLog(`WARNING: ${message}`, 'console.warn');
-        originalConsoleWarn(...args);
-      };
-
-      // Cleanup function to restore original console methods
-      return () => {
-        console.log = originalConsoleLog;
-        console.error = originalConsoleError;
-        console.warn = originalConsoleWarn;
-      };
-    }
-  }, [interceptConsole]);
-
-  const contextValue: LoggingContextProps = {
-    logs,
-    addLog,
-    clearLogs,
-  };
-
-  return (
-    <LoggingContext.Provider value={contextValue}>
-      {children}
-    </LoggingContext.Provider>
-  );
-};
-
-/**
- * Hook to use logging context
- */
-export const useLogging = (): LoggingContextProps => {
-  const context = useContext(LoggingContext);
-  if (!context) {
-    throw new Error('useLogging must be used within a LoggingProvider');
-  }
-  return context;
-};
-
-/**
- * Higher-order component to wrap components with logging
- */
-export const withLogging = <P extends object>(
-  Component: React.ComponentType<P>
-): React.FC<P & { enableConsoleInterception?: boolean }> => {
-  const EnhancedComponent = ({
-    enableConsoleInterception = false,
-    ...props
-  }) => (
-    <LoggingProvider interceptConsole={enableConsoleInterception}>
-      <Component {...(props as P)} />
-    </LoggingProvider>
-  );
-
-  EnhancedComponent.displayName = `withLogging(${Component.displayName || Component.name})`;
-  return EnhancedComponent;
-};

package/templates/react-custom-page/src/components/Logging/LoggingDebugPanel.css

@@ -1,192 +0,0 @@
-.logging-debug-panel {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  width: 90vw;
-  height: 80vh;
-  max-width: 1000px;
-  max-height: 600px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.logging-debug-panel__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #edebe9;
-  background: #f8f8f8;
-}
-
-.logging-debug-panel__header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #323130;
-}
-
-.logging-debug-panel__controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px;
-  border-bottom: 1px solid #edebe9;
-  gap: 16px;
-}
-
-.logging-debug-panel__filters {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex: 1;
-}
-
-.logging-debug-panel__filters .ms-TextField {
-  min-width: 200px;
-}
-
-.level-filter {
-  padding: 6px 12px;
-  border: 1px solid #8a8886;
-  border-radius: 2px;
-  font-size: 14px;
-  background: white;
-  color: #323130;
-}
-
-.level-filter:focus {
-  outline: none;
-  border-color: #0078d4;
-}
-
-.logging-debug-panel__actions {
-  display: flex;
-  gap: 8px;
-}
-
-.logging-debug-panel__content {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.logging-debug-panel__logs {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.no-logs {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
-  color: #605e5c;
-  font-style: italic;
-}
-
-.log-entry {
-  padding: 8px 12px;
-  border-bottom: 1px solid #f3f2f1;
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  font-size: 12px;
-}
-
-.log-entry:hover {
-  background-color: #faf9f8;
-}
-
-.log-entry__header {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.log-entry__timestamp {
-  color: #605e5c;
-  font-weight: 500;
-  min-width: 80px;
-}
-
-.log-entry__level {
-  font-weight: 600;
-  min-width: 60px;
-}
-
-.log-entry__context {
-  color: #0078d4;
-  font-weight: 500;
-  background: #deecf9;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 11px;
-}
-
-.log-entry__message {
-  color: #323130;
-  line-height: 1.4;
-  margin-left: 96px;
-}
-
-.log-entry__data {
-  margin-left: 96px;
-  margin-top: 4px;
-}
-
-.log-entry__data pre {
-  background: #f8f8f8;
-  padding: 8px;
-  border-radius: 4px;
-  border-left: 3px solid #0078d4;
-  font-size: 11px;
-  overflow-x: auto;
-  margin: 0;
-}
-
-.logging-debug-panel__footer {
-  padding: 8px 20px;
-  border-top: 1px solid #edebe9;
-  background: #f8f8f8;
-  text-align: center;
-}
-
-.logging-debug-panel__footer small {
-  color: #605e5c;
-}
-
-/* Mobile responsiveness */
-@media (max-width: 768px) {
-  .logging-debug-panel {
-    width: 95vw;
-    height: 90vh;
-  }
-  
-  .logging-debug-panel__controls {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 8px;
-  }
-  
-  .logging-debug-panel__filters {
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  .logging-debug-panel__filters .ms-TextField {
-    min-width: auto;
-  }
-  
-  .log-entry__message,
-  .log-entry__data {
-    margin-left: 0;
-    margin-top: 4px;
-  }
-  
-  .log-entry__header {
-    flex-wrap: wrap;
-  }
-}

package/templates/react-custom-page/src/components/Logging/LoggingDebugPanel.tsx

@@ -1,177 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { Button, TextField } from '@khester/dynamics-ui-components';
-import { Logger } from './logger';
-import './LoggingDebugPanel.css';
-
-interface LoggingDebugPanelProps {
-  onClose: () => void;
-}
-
-interface LogEntry {
-  timestamp: string;
-  level: string;
-  message: string;
-  context?: string;
-  data?: any;
-}
-
-/**
- * Debug panel component for viewing application logs
- */
-export const LoggingDebugPanel: React.FC<LoggingDebugPanelProps> = ({
-  onClose,
-}) => {
-  const [filter, setFilter] = useState('');
-  const [selectedLevel, setSelectedLevel] = useState('all');
-
-  // Get logs from the Logger (this is a simplified version)
-  const [logs] = useState<LogEntry[]>(() => {
-    // In a real implementation, you'd get logs from the Logger class
-    // For now, create some sample logs to demonstrate the UI
-    return [
-      {
-        timestamp: new Date().toISOString(),
-        level: 'info',
-        message: 'Application initialized',
-        context: 'App',
-      },
-      {
-        timestamp: new Date().toISOString(),
-        level: 'debug',
-        message: 'ServiceFactory: Running in mock environment',
-        context: 'ServiceFactory',
-      },
-      {
-        timestamp: new Date().toISOString(),
-        level: 'user',
-        message: 'Contact Management loaded',
-        context: 'ContactManagement',
-      },
-    ];
-  });
-
-  const filteredLogs = logs.filter((log) => {
-    const matchesFilter =
-      !filter ||
-      log.message.toLowerCase().includes(filter.toLowerCase()) ||
-      log.context?.toLowerCase().includes(filter.toLowerCase());
-
-    const matchesLevel = selectedLevel === 'all' || log.level === selectedLevel;
-
-    return matchesFilter && matchesLevel;
-  });
-
-  const clearLogs = useCallback(() => {
-    Logger.log('Debug panel: Logs cleared', 'LoggingDebugPanel');
-    // In a real implementation, you'd clear the actual logs
-  }, []);
-
-  const exportLogs = useCallback(() => {
-    const logData = JSON.stringify(logs, null, 2);
-    const blob = new Blob([logData], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `dynamics-logs-${new Date().toISOString().split('T')[0]}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-    Logger.log('Debug panel: Logs exported', 'LoggingDebugPanel');
-  }, [logs]);
-
-  const getLevelColor = (level: string) => {
-    switch (level) {
-      case 'error':
-        return '#d13438';
-      case 'warn':
-        return '#ff8c00';
-      case 'info':
-        return '#0078d4';
-      case 'debug':
-        return '#605e5c';
-      case 'user':
-        return '#107c10';
-      default:
-        return '#323130';
-    }
-  };
-
-  const formatTimestamp = (timestamp: string) => {
-    return new Date(timestamp).toLocaleTimeString();
-  };
-
-  return (
-    <div className="logging-debug-panel">
-      <div className="logging-debug-panel__header">
-        <h3>Debug Console</h3>
-        <Button text="✕" onClick={onClose} variant="default" />
-      </div>
-
-      <div className="logging-debug-panel__controls">
-        <div className="logging-debug-panel__filters">
-          <TextField
-            placeholder="Filter logs..."
-            value={filter}
-            onChange={(_, value) => setFilter(value || '')}
-          />
-
-          <select
-            value={selectedLevel}
-            onChange={(e) => setSelectedLevel(e.target.value)}
-            className="level-filter"
-          >
-            <option value="all">All Levels</option>
-            <option value="error">Error</option>
-            <option value="warn">Warning</option>
-            <option value="info">Info</option>
-            <option value="debug">Debug</option>
-            <option value="user">User Action</option>
-          </select>
-        </div>
-
-        <div className="logging-debug-panel__actions">
-          <Button text="Clear" onClick={clearLogs} variant="default" />
-          <Button text="Export" onClick={exportLogs} variant="default" />
-        </div>
-      </div>
-
-      <div className="logging-debug-panel__content">
-        <div className="logging-debug-panel__logs">
-          {filteredLogs.length === 0 ? (
-            <div className="no-logs">No logs match the current filter</div>
-          ) : (
-            filteredLogs.map((log, index) => (
-              <div key={index} className="log-entry">
-                <div className="log-entry__header">
-                  <span className="log-entry__timestamp">
-                    {formatTimestamp(log.timestamp)}
-                  </span>
-                  <span
-                    className="log-entry__level"
-                    style={{ color: getLevelColor(log.level) }}
-                  >
-                    [{log.level.toUpperCase()}]
-                  </span>
-                  {log.context && (
-                    <span className="log-entry__context">{log.context}</span>
-                  )}
-                </div>
-                <div className="log-entry__message">{log.message}</div>
-                {log.data && (
-                  <div className="log-entry__data">
-                    <pre>{JSON.stringify(log.data, null, 2)}</pre>
-                  </div>
-                )}
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      <div className="logging-debug-panel__footer">
-        <small>
-          Showing {filteredLogs.length} of {logs.length} log entries
-        </small>
-      </div>
-    </div>
-  );
-};

package/templates/react-custom-page/src/components/Logging/LoggingProvider.tsx

@@ -1,3 +0,0 @@
-// Re-export the LoggingProvider and useLogging from LoggingContext
-// This provides a cleaner import path for the main application
-export { LoggingProvider, useLogging } from './LoggingContext';