@webex/cc-ui-logging 1.28.0-ccwidgets.108

package/dist/index.js

@@ -0,0 +1,98 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./src/index.ts":
+/*!**********************!*\
+  !*** ./src/index.ts ***!
+  \**********************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.withMetrics = void 0;\nconst withMetrics_1 = __importDefault(__webpack_require__(/*! ./withMetrics */ \"./src/withMetrics.tsx\"));\nexports.withMetrics = withMetrics_1.default;\n\n\n//# sourceURL=webpack://@webex/cc-ui-logging/./src/index.ts?");
+
+/***/ }),
+
+/***/ "./src/metricsLogger.ts":
+/*!******************************!*\
+  !*** ./src/metricsLogger.ts ***!
+  \******************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.logMetrics = void 0;\nexports.havePropsChanged = havePropsChanged;\nconst cc_store_1 = __importDefault(__webpack_require__(/*! @webex/cc-store */ \"@webex/cc-store\"));\n/**\n * Logs UI metrics for contact center widgets.\n *\n * This function logs widget lifecycle events and errors to help monitor\n * widget performance and user interactions. If no logger is available,\n * it will emit a warning and skip logging.\n *\n * @param metric - The metrics data to be logged\n * @param metric.widgetName - Name of the widget generating the metric\n * @param metric.event - Type of event being logged\n * @param metric.props - Optional properties associated with the widget\n * @param metric.timestamp - Unix timestamp when the event occurred\n * @param metric.additionalContext - Optional additional context data\n *\n * @example\n * ```typescript\n * logMetrics({\n *   widgetName: 'CallControl',\n *   event: 'WIDGET_MOUNTED',\n *   props: { callId: '123' },\n *   timestamp: Date.now(),\n *   additionalContext: { userId: 'user123' }\n * });\n * ```\n */\nconst logMetrics = (metric) => {\n    if (!cc_store_1.default.logger) {\n        console.warn('CC-Widgets: UI Metrics: No logger found');\n        return;\n    }\n    cc_store_1.default.logger.log(`CC-Widgets: UI Metrics: ${JSON.stringify(metric, null, 2)}`, {\n        module: 'metricsLogger.tsx',\n        method: 'logMetrics',\n    });\n};\nexports.logMetrics = logMetrics;\n/**\n * Determines if props have changed between two objects using shallow comparison.\n *\n * This function performs a shallow comparison between two objects to detect changes.\n * It compares object keys and primitive values, but does not recursively compare\n * nested objects. This is useful for determining when to log metrics based on prop changes.\n *\n * @param prev - The previous props object\n * @param next - The next props object to compare against\n * @returns `true` if the props have changed, `false` otherwise\n *\n * @example\n * ```typescript\n * const oldProps = { name: 'John', age: 30 };\n * const newProps = { name: 'John', age: 31 };\n *\n * if (havePropsChanged(oldProps, newProps)) {\n *   // Props have changed, log metrics\n *   logMetrics({\n *     widgetName: 'UserProfile',\n *     event: 'WIDGET_MOUNTED',\n *     props: newProps,\n *     timestamp: Date.now()\n *   });\n * } * ```\n *\n * @remarks\n * The function is important as we dont sanitize our props right now.\n * Once we start sanitizing we can do a deep comparison. This is used to only re-render\n * the HOC if the props have changed.\n */\nfunction havePropsChanged(prev, next) {\n    if (prev === next)\n        return false;\n    // Do shallow comparison\n    if (typeof prev !== typeof next)\n        return true;\n    if (!prev || !next)\n        return prev !== next;\n    const prevKeys = Object.keys(prev);\n    const nextKeys = Object.keys(next);\n    if (prevKeys.length !== nextKeys.length)\n        return true;\n    // Check if any primitive values changed\n    for (const key of prevKeys) {\n        const prevVal = prev[key];\n        const nextVal = next[key];\n        if (prevVal === nextVal)\n            continue;\n        if (typeof prevVal !== 'object' || prevVal === null)\n            return true;\n        if (typeof nextVal !== 'object' || nextVal === null)\n            return true;\n    }\n    // All shallow comparisons passed, consider props unchanged\n    return false;\n}\n\n\n//# sourceURL=webpack://@webex/cc-ui-logging/./src/metricsLogger.ts?");
+
+/***/ }),
+
+/***/ "./src/withMetrics.tsx":
+/*!*****************************!*\
+  !*** ./src/withMetrics.tsx ***!
+  \*****************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    var desc = Object.getOwnPropertyDescriptor(m, k);\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n      desc = { enumerable: true, get: function() { return m[k]; } };\n    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n    o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || (function () {\n    var ownKeys = function(o) {\n        ownKeys = Object.getOwnPropertyNames || function (o) {\n            var ar = [];\n            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\n            return ar;\n        };\n        return ownKeys(o);\n    };\n    return function (mod) {\n        if (mod && mod.__esModule) return mod;\n        var result = {};\n        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\n        __setModuleDefault(result, mod);\n        return result;\n    };\n})();\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = withMetrics;\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst metricsLogger_1 = __webpack_require__(/*! ./metricsLogger */ \"./src/metricsLogger.ts\");\nfunction withMetrics(Component, widgetName) {\n    return react_1.default.memo((props) => {\n        (0, react_1.useEffect)(() => {\n            (0, metricsLogger_1.logMetrics)({\n                widgetName,\n                event: 'WIDGET_MOUNTED',\n                timestamp: Date.now(),\n            });\n            return () => {\n                (0, metricsLogger_1.logMetrics)({\n                    widgetName,\n                    event: 'WIDGET_UNMOUNTED',\n                    timestamp: Date.now(),\n                });\n            };\n        }, []);\n        // TODO: https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6890 PROPS_UPDATED event\n        return react_1.default.createElement(Component, Object.assign({}, props));\n    }, (prevProps, nextProps) => !(0, metricsLogger_1.havePropsChanged)(prevProps, nextProps));\n}\n\n\n//# sourceURL=webpack://@webex/cc-ui-logging/./src/withMetrics.tsx?");
+
+/***/ }),
+
+/***/ "@webex/cc-store":
+/*!**********************************!*\
+  !*** external "@webex/cc-store" ***!
+  \**********************************/
+/***/ ((module) => {
+
+module.exports = require("@webex/cc-store");
+
+/***/ }),
+
+/***/ "react":
+/*!************************!*\
+  !*** external "react" ***!
+  \************************/
+/***/ ((module) => {
+
+module.exports = require("react");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module is referenced by other modules so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.ts");
+/******/ 	module.exports = __webpack_exports__;
+/******/ 	
+/******/ })()
+;

package/dist/types/index.d.ts

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

package/dist/types/metricsLogger.d.ts

@@ -0,0 +1,65 @@
+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 declare const logMetrics: (metric: WidgetMetrics) => void;
+/**
+ * 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 declare function havePropsChanged(prev: any, next: any): boolean;

package/dist/types/withMetrics.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function withMetrics<P extends object>(Component: any, widgetName: string): React.MemoExoticComponent<(props: P) => React.JSX.Element>;

package/jest.config.js

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

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@webex/cc-ui-logging",
+  "version": "1.28.0-ccwidgets.108",
+  "description": "UI metrics tracking for Webex widgets",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build:src": "webpack --mode=development",
+    "clean": "rm -rf dist",
+    "clean:dist": "rm -rf dist",
+    "test:unit": "jest --coverage",
+    "test:styles": "echo 'No styles to test'"
+  },
+  "dependencies": {
+    "@webex/cc-store": "1.28.0-ccwidgets.108"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/react": "16.0.1",
+    "@types/jest": "29.5.14",
+    "@types/react-test-renderer": "18",
+    "@webex/test-fixtures": "0.0.0",
+    "babel-jest": "29.7.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "typescript": "^5.6.3",
+    "uuid": "^9.0.0",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
+  }
+}

package/src/index.ts

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

package/src/metricsLogger.ts

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,105 @@
+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

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

package/tsconfig.test.json

@@ -0,0 +1,9 @@
+// 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

@@ -0,0 +1,17 @@
+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',
+  },
+});