@webex/cc-ui-logging 1.28.0-ccwidgets.121 → 1.28.0-ccwidgets.122

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@webex/cc-ui-logging",
-  "version": "1.28.0-ccwidgets.121",
+  "version": "1.28.0-ccwidgets.122",
   "description": "UI metrics tracking for Webex widgets",
+  "license": "Cisco's General Terms (https://www.cisco.com/site/us/en/about/legal/contract-experience/index.html)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist/",
+    "package.json"
+  ],
   "scripts": {
     "build:src": "webpack --mode=development",
     "clean": "rm -rf dist",
@@ -15,7 +20,7 @@
     "test:styles": "echo 'No styles to test'"
   },
   "dependencies": {
-    "@webex/cc-store": "1.28.0-ccwidgets.121"
+    "@webex/cc-store": "1.28.0-ccwidgets.122"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.0",

package/jest.config.js

@@ -1,6 +0,0 @@
-const jestConfig = require('../../../jest.config.js');
-
-jestConfig.rootDir = '../../../';
-jestConfig.testMatch = ['**/ui-logging/tests/**/*.ts', '**/ui-logging/tests/**/*.tsx'];
-
-module.exports = jestConfig;

package/src/index.ts

@@ -1,5 +0,0 @@
-import withMetrics from './withMetrics';
-import {WidgetMetrics} from './metricsLogger';
-
-export {withMetrics};
-export type {WidgetMetrics};

package/src/metricsLogger.ts

@@ -1,102 +0,0 @@
-import store from '@webex/cc-store';
-
-export type WidgetMetrics = {
-  widgetName: string;
-  event: 'WIDGET_MOUNTED' | 'ERROR' | 'WIDGET_UNMOUNTED' | 'PROPS_UPDATED';
-  props?: Record<string, any>;
-  timestamp: number;
-  additionalContext?: Record<string, any>;
-};
-
-/**
- * Logs UI metrics for contact center widgets.
- *
- * This function logs widget lifecycle events and errors to help monitor
- * widget performance and user interactions. If no logger is available,
- * it will emit a warning and skip logging.
- *
- * @param metric - The metrics data to be logged
- * @param metric.widgetName - Name of the widget generating the metric
- * @param metric.event - Type of event being logged
- * @param metric.props - Optional properties associated with the widget
- * @param metric.timestamp - Unix timestamp when the event occurred
- * @param metric.additionalContext - Optional additional context data
- *
- * @example
- * ```typescript
- * logMetrics({
- *   widgetName: 'CallControl',
- *   event: 'WIDGET_MOUNTED',
- *   props: { callId: '123' },
- *   timestamp: Date.now(),
- *   additionalContext: { userId: 'user123' }
- * });
- * ```
- */
-export const logMetrics = (metric: WidgetMetrics) => {
-  if (!store.logger) {
-    console.warn('CC-Widgets: UI Metrics: No logger found');
-    return;
-  }
-  store.logger.log(`CC-Widgets: UI Metrics: ${JSON.stringify(metric, null, 2)}`, {
-    module: 'metricsLogger.tsx',
-    method: 'logMetrics',
-  });
-};
-
-/**
- * Determines if props have changed between two objects using shallow comparison.
- *
- * This function performs a shallow comparison between two objects to detect changes.
- * It compares object keys and primitive values, but does not recursively compare
- * nested objects. This is useful for determining when to log metrics based on prop changes.
- *
- * @param prev - The previous props object
- * @param next - The next props object to compare against
- * @returns `true` if the props have changed, `false` otherwise
- *
- * @example
- * ```typescript
- * const oldProps = { name: 'John', age: 30 };
- * const newProps = { name: 'John', age: 31 };
- *
- * if (havePropsChanged(oldProps, newProps)) {
- *   // Props have changed, log metrics
- *   logMetrics({
- *     widgetName: 'UserProfile',
- *     event: 'WIDGET_MOUNTED',
- *     props: newProps,
- *     timestamp: Date.now()
- *   });
- * } * ```
- *
- * @remarks
- * The function is important as we dont sanitize our props right now.
- * Once we start sanitizing we can do a deep comparison. This is used to only re-render
- * the HOC if the props have changed.
- */
-export function havePropsChanged(prev: any, next: any): boolean {
-  if (prev === next) return false;
-
-  // Do shallow comparison
-  if (typeof prev !== typeof next) return true;
-  if (!prev || !next) return prev !== next;
-
-  const prevKeys = Object.keys(prev);
-  const nextKeys = Object.keys(next);
-
-  if (prevKeys.length !== nextKeys.length) return true;
-
-  // Check if any primitive values changed
-  for (const key of prevKeys) {
-    const prevVal = prev[key];
-    const nextVal = next[key];
-
-    if (prevVal === nextVal) continue;
-    if (typeof prevVal !== 'object' || prevVal === null) return true;
-    if (typeof nextVal !== 'object' || nextVal === null) return true;
-  }
-
-  // All shallow comparisons passed, consider props unchanged
-  return false;
-}

package/src/withMetrics.tsx

@@ -1,29 +0,0 @@
-import React, {useEffect, useRef} from 'react';
-import {havePropsChanged, logMetrics} from './metricsLogger';
-
-export default function withMetrics<P extends object>(Component: any, widgetName: string) {
-  return React.memo(
-    (props: P) => {
-      useEffect(() => {
-        logMetrics({
-          widgetName,
-          event: 'WIDGET_MOUNTED',
-          timestamp: Date.now(),
-        });
-
-        return () => {
-          logMetrics({
-            widgetName,
-            event: 'WIDGET_UNMOUNTED',
-            timestamp: Date.now(),
-          });
-        };
-      }, []);
-
-      // TODO: https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6890 PROPS_UPDATED event
-
-      return <Component {...props} />;
-    },
-    (prevProps, nextProps) => !havePropsChanged(prevProps, nextProps)
-  );
-}

package/tests/metricsLogger.test.ts

@@ -1,86 +0,0 @@
-import store from '@webex/cc-store';
-import {logMetrics, havePropsChanged, WidgetMetrics} from '../src/metricsLogger';
-
-describe('metricsLogger', () => {
-  store.store.logger = {
-    log: jest.fn(),
-    info: jest.fn(),
-    warn: jest.fn(),
-    error: jest.fn(),
-    trace: jest.fn(),
-  };
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('logMetrics', () => {
-    it('should log metrics when logger is available', () => {
-      const metric: WidgetMetrics = {
-        widgetName: 'TestWidget',
-        event: 'WIDGET_MOUNTED',
-        timestamp: 1234567890,
-        props: {test: 'prop'},
-        additionalContext: {context: 'test'},
-      };
-
-      logMetrics(metric);
-
-      expect(store.logger.log).toHaveBeenCalledWith(`CC-Widgets: UI Metrics: ${JSON.stringify(metric, null, 2)}`, {
-        module: 'metricsLogger.tsx',
-        method: 'logMetrics',
-      });
-    });
-
-    it('should handle case when logger is not available', () => {
-      const consoleSpy = jest.spyOn(console, 'warn');
-      store.store.logger = undefined;
-
-      const metric: WidgetMetrics = {
-        widgetName: 'TestWidget',
-        event: 'WIDGET_MOUNTED',
-        timestamp: 1234567890,
-      };
-
-      logMetrics(metric);
-
-      expect(consoleSpy).toHaveBeenCalledWith('CC-Widgets: UI Metrics: No logger found');
-      consoleSpy.mockRestore();
-    });
-  });
-
-  describe('havePropsChanged', () => {
-    it('should return false for identical primitives', () => {
-      expect(havePropsChanged(1, 1)).toBe(false);
-      expect(havePropsChanged('test', 'test')).toBe(false);
-      expect(havePropsChanged(true, true)).toBe(false);
-    });
-
-    it('should return true for different primitives', () => {
-      expect(havePropsChanged('test', 'test2')).toBe(true);
-      expect(havePropsChanged(true, false)).toBe(true);
-    });
-
-    it('should return true for different types', () => {
-      expect(havePropsChanged(1, '1')).toBe(true);
-      expect(havePropsChanged(null, undefined)).toBe(true);
-    });
-
-    it('should return true when object keys differ', () => {
-      const obj1 = {a: 1, b: 2};
-      const obj2 = {a: 1};
-      expect(havePropsChanged(obj1, obj2)).toBe(true);
-    });
-
-    it('should return false when nested values differ', () => {
-      const obj1 = {a: {b: 1}};
-      const obj2 = {a: {b: 2}};
-      expect(havePropsChanged(obj1, obj2)).toBe(false);
-    });
-
-    it('should handle null and undefined', () => {
-      expect(havePropsChanged(null, null)).toBe(false);
-      expect(havePropsChanged(undefined, undefined)).toBe(false);
-      expect(havePropsChanged(null, undefined)).toBe(true);
-    });
-  });
-});

package/tests/withMetrics.test.tsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import {render} from '@testing-library/react';
-import '@testing-library/jest-dom';
-import withMetrics from '../src/withMetrics';
-import store from '@webex/cc-store';
-import * as metricsLogger from '../src/metricsLogger';
-
-interface TestComponentProps {
-  name?: string;
-  [key: string]: any;
-}
-
-describe('withMetrics HOC', () => {
-  store.store.logger = {
-    log: jest.fn(),
-    info: jest.fn(),
-    warn: jest.fn(),
-    error: jest.fn(),
-    trace: jest.fn(),
-  };
-  const logMetricsSpy = jest.spyOn(metricsLogger, 'logMetrics');
-
-  const TestComponent: React.FC<TestComponentProps> = (props) => <div>Test Component {props.name}</div>;
-  const WrappedComponent = withMetrics<TestComponentProps>(TestComponent, 'TestWidget');
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  it('should log metrics on mount', () => {
-    const mockTime = 1234567890;
-    jest.setSystemTime(mockTime);
-
-    render(<WrappedComponent name="test" />);
-
-    expect(logMetricsSpy).toHaveBeenCalledWith({
-      widgetName: 'TestWidget',
-      event: 'WIDGET_MOUNTED',
-      timestamp: mockTime,
-    });
-  });
-
-  it('should log metrics on unmount', () => {
-    const mockTime = 1234567890;
-    jest.setSystemTime(mockTime);
-
-    const {unmount} = render(<WrappedComponent name="test" />);
-
-    // Clear the mount log
-    logMetricsSpy.mockClear();
-
-    // Unmount the component
-    unmount();
-
-    expect(logMetricsSpy).toHaveBeenCalledWith({
-      widgetName: 'TestWidget',
-      event: 'WIDGET_UNMOUNTED',
-      timestamp: mockTime,
-    });
-  });
-
-  it('should pass through props to wrapped component', () => {
-    const {getByText} = render(<WrappedComponent name="test-name" />);
-    expect(getByText('Test Component test-name')).toBeInTheDocument();
-  });
-
-  it('should not re-render when props have not changed', () => {
-    const renderSpy = jest.fn();
-    const SpyComponent: React.FC<TestComponentProps> = (props) => {
-      renderSpy();
-      return <div>Test Component {props.name}</div>;
-    };
-
-    const WrappedSpy = withMetrics<TestComponentProps>(SpyComponent, 'TestWidget');
-
-    const {rerender} = render(<WrappedSpy name="test" />);
-    expect(renderSpy).toHaveBeenCalledTimes(1);
-
-    // Re-render with same props
-    rerender(<WrappedSpy name="test" />);
-    expect(renderSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it('should re-render when props have changed', () => {
-    const renderSpy = jest.fn();
-    const SpyComponent: React.FC<TestComponentProps> = (props) => {
-      renderSpy();
-      return <div>Test Component {props.name}</div>;
-    };
-
-    const WrappedSpy = withMetrics<TestComponentProps>(SpyComponent, 'TestWidget');
-
-    const {rerender} = render(<WrappedSpy name="test" />);
-    expect(renderSpy).toHaveBeenCalledTimes(1);
-
-    // Re-render with different props
-    rerender(<WrappedSpy name="different" />);
-    expect(renderSpy).toHaveBeenCalledTimes(2);
-  });
-});

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": [
-      "./src"
-  ],
-  "compilerOptions": {
-      "outDir": "./dist",
-      "declaration": true,
-      "declarationDir": "./dist/types"
-  },
-}

package/tsconfig.test.json

@@ -1,9 +0,0 @@
-// This config is to do type checking in our files while running tests.
-{
-  "extends": "./tsconfig.json",
-  "include": ["./tests"],
-  "exclude": ["node_modules"],
-  "compilerOptions": {
-    "noEmit": true // Don't output any files
-  }
-}

package/webpack.config.js

@@ -1,17 +0,0 @@
-const {merge} = require('webpack-merge');
-const path = require('path');
-
-const baseConfig = require('../../../webpack.config');
-
-module.exports = merge(baseConfig, {
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'index.js', // Set the output filename to index.js
-    libraryTarget: 'commonjs2',
-  },
-  externals: {
-    react: 'react',
-    'react-dom': 'react-dom',
-    '@webex/cc-store': '@webex/cc-store',
-  },
-});