fix(bundling): fixed the multiple React instance and useRef errors

docs/react-samples/package.json

@@ -3,8 +3,10 @@
   "version": "1.0.0",
   "main": "dist/index.js",
   "scripts": {
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "clean:dist": "rm -rf dist",
     "build": "tsc --project tsconfig.json",
-    "build:src": "webpack && yarn run build",
+    "build:src": "webpack",
     "build:watch": "webpack --watch",
     "serve": "webpack serve"
   },
@@ -17,9 +19,8 @@
     "babel-loader": "^9.2.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.3",
-    "mobx-react": "^9.1.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.6.3",
     "webpack": "^5.94.0",

docs/react-samples/webpack.config.js

@@ -11,17 +11,6 @@ module.exports = merge(baseConfig, {
     filename: 'bundle.js', // Output bundle file name
     clean: true, // Clean dist folder before each build
   },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/, // Match JS and JSX files
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader', // Use Babel to transpile JavaScript and JSX
-        },
-      },
-    ],
-  },
   plugins: [
     new HtmlWebpackPlugin({
       template: './public/index.html', // Template HTML file

docs/web-component-samples/package.json

@@ -12,6 +12,8 @@
     "webpack-merge": "6.0.1"
   },
   "scripts": {
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "clean:dist": "rm -rf dist",
     "serve": "open index.html",
     "build:src": "webpack"
   }

package.json

@@ -18,25 +18,31 @@
     "@semantic-release/github": "^11.0.1",
     "@testing-library/react-hooks": "^8.0.1",
     "crypto-browserify": "^3.12.1",
+    "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
     "jest": "29.7.0",
     "node-gyp": "^10.2.0",
     "os-browserify": "^0.3.0",
     "process": "^0.11.10",
     "querystring-es3": "^0.2.1",
+    "sass": "^1.83.1",
+    "sass-loader": "^16.0.4",
     "semantic-release": "^24.2.0",
     "stream-browserify": "^3.0.0",
+    "style-loader": "^4.0.0",
     "typescript": "^5.6.3",
     "vm-browserify": "^1.1.2",
     "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"
   },
   "scripts": {
+    "clean": "yarn workspaces foreach --all --topological --parallel run clean && rm -rf node_modules",
+    "clean:dist": "yarn workspaces foreach --all --topological --parallel run clean:dist",
     "test:unit": "yarn run test:tooling && yarn run test:cc-widgets",
     "test:tooling": "jest --coverage",
     "test:cc-widgets": "yarn workspaces foreach --all --parallel --exclude webex-widgets --exclude @webex/web-component-samples-app --exclude @webex/react-samples-app run test:unit",
-    "build": "yarn workspaces foreach --all --topological --parallel --exclude webex-widgets  --exclude @webex/web-component-samples-app --exclude @webex/react-samples-app  run build:src",
+    "build": " yarn run clean:dist && yarn workspaces foreach --all --topological --parallel --exclude webex-widgets  --exclude @webex/web-component-samples-app --exclude @webex/react-samples-app  run build:src",
     "samples:build": "yarn workspace @webex/react-samples-app build:src && yarn workspace @webex/web-component-samples-app build:src",
     "samples:serve": "open docs/index.html && yarn workspace @webex/react-samples-app serve",
     "samples:serve-react": "yarn workspace @webex/react-samples-app serve",

packages/contact-center/cc-widgets/package.json

@@ -15,8 +15,10 @@
     "./wc": "./dist/wc.js"
   },
   "scripts": {
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "clean:dist": "rm -rf dist",
     "build": "yarn run -T tsc",
-    "build:src": "webpack && yarn run build",
+    "build:src": "webpack",
     "build:watch": "webpack --watch",
     "test:unit": "jest"
   },
@@ -47,8 +49,6 @@
     "os-browserify": "^0.3.0",
     "process": "^0.11.10",
     "querystring-es3": "^0.2.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
     "stream-browserify": "^3.0.0",
     "ts-loader": "9.5.1",
     "typescript": "5.6.3",

packages/contact-center/cc-widgets/webpack.config.js

@@ -4,9 +4,22 @@ const path = require('path');
 const baseConfig = require('../../../webpack.config');
 
 module.exports = merge(baseConfig, {
+  entry: {
+    wc: {
+      import: './src/wc.ts',
+    },
+    index: {
+      import: './src/index.ts',
+    },
+  },
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'index.js', // Set the output filename to index.js
+    filename: '[name].js', // Set the output filename to index.js
     libraryTarget: 'commonjs2',
   },
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom',
+    '@webex/cc-store': '@webex/cc-store',
+  }
 });

packages/contact-center/station-login/package.json

@@ -11,16 +11,16 @@
     "package.json"
   ],
   "scripts": {
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "clean:dist": "rm -rf dist",
     "build": "yarn run -T tsc",
-    "build:src": "webpack && yarn run build",
+    "build:src": "webpack",
     "build:watch": "webpack --watch",
     "test:unit": "jest"
   },
   "dependencies": {
     "@webex/cc-store": "workspace:*",
-    "mobx-react": "9.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "mobx-react": "9.1.1"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",
@@ -43,6 +43,10 @@
     "webpack-cli": "5.1.4",
     "webpack-merge": "6.0.1"
   },
+  "peerDependencies": {
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
+  },
   "jest": {
     "testEnvironment": "jsdom",
     "testMatch": [

packages/contact-center/station-login/src/station-login/index.tsx

@@ -10,6 +10,9 @@ const StationLogin: React.FunctionComponent<StationLoginProps> = observer(({onLo
   const {cc, teams, loginOptions} = store;
   const result = useStationLogin({cc, onLogin, onLogout});
 
+  console.log('StationLogin: Teams >>', teams);
+  console.log('StationLogin: Login Options >>', loginOptions);
+
   const props = {
     ...result,
     teams,

packages/contact-center/station-login/src/station-login/station-login.presentational.tsx

@@ -1,6 +1,8 @@
 import React, {useEffect} from 'react';
 import {StationLoginPresentationalProps} from './station-login.types';
 
+import './station-login.style.scss';
+
 const StationLoginPresentational: React.FunctionComponent<StationLoginPresentationalProps> = (props) => {
   const {name, teams, loginOptions, login, logout, setDeviceType, setDialNumber, setTeam} = props; // TODO: Use the  loginSuccess, loginFailure, logoutSuccess props returned fromthe API response via helper file to reflect UI changes
 
@@ -48,84 +50,26 @@ const StationLoginPresentational: React.FunctionComponent<StationLoginPresentati
     setDialNumber(dialNumber.value);
   }
 
-  const styles = {
-    box: {
-      backgroundColor: '#ffffff',
-      borderRadius: '8px',
-      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-      padding: '20px',
-      maxWidth: '800px',
-      margin: '0 auto'
-    },
-
-    sectionBox: {
-      padding: '10px',
-      border: '1px solid #ddd',
-      borderRadius: '8px'
-    },
-
-    fieldset:  {
-      border: '1px solid #ccc',
-      borderRadius: '5px',
-      padding: '10px',
-      marginBottom: '20px'
-    },
-
-    legendBox: {
-      fontWeight: 'bold',
-      color: '#0052bf'
-    },
-
-    btn: {
-      padding: '10px 20px',
-      backgroundColor: '#0052bf',
-      color: 'white',
-      border: 'none',
-      borderRadius: '4px',
-      cursor: 'pointer',
-      transition: 'background-color 0.3s',
-      marginRight: '8px' 
-    },
-
-    select: {
-      width: '100%',
-      padding: '8px',
-      marginTop: '8px',
-      marginBottom: '12px',
-      border: '1px solid #ccc',
-      borderRadius: '4px'
-    },
-
-    input: {
-      width: '97%',
-      padding: '8px',
-      marginTop: '8px',
-      marginBottom: '12px',
-      border: '1px solid #ccc',
-      borderRadius: '4px'
-    }
-  }
-
   return (
     <><h1 data-testid="station-login-heading">{name}</h1>
-      <div style={styles.box}>
-      <section style={styles.sectionBox}>
-        <fieldset style={styles.fieldset}>
-        <legend style={styles.legendBox}>Agent</legend>
+      <div className='box'>
+      <section className="section-box">
+        <fieldset className='fieldset'>
+        <legend className='legend-box'>Agent</legend>
           <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
             <div style={{ display: 'flex', gap: '1rem' }}>
               <fieldset style={{border: '1px solid #ccc', borderRadius: '5px', padding: '10px', marginBottom: '20px', flex: 0.69 }}>
-                <legend style={styles.legendBox}>Select Team</legend>
-                <select id="teamsDropdown" style={styles.select}>Teams</select>
+                <legend className='legend-box'>Select Team</legend>
+                <select id="teamsDropdown" className='select'>Teams</select>
               </fieldset>
-              <fieldset style={styles.fieldset}>
-                <legend style={styles.legendBox}>Agent Login</legend>
-                <select name="LoginOption" id="LoginOption" style={styles.select} onChange={selectLoginOption}>
-                  <option value="" selected hidden>Choose Agent Login Option...</option>
+              <fieldset className='fieldset'>
+                <legend className='legend-box'>Agent Login</legend>
+                <select name="LoginOption" id="LoginOption" className='select' onChange={selectLoginOption}>
+                  <option value="" hidden>Choose Agent Login Option...</option>
                 </select>
-                <input style={styles.input} id="dialNumber" name="dialNumber" placeholder="Extension/Dial Number" type="text" onInput={updateDN} />
-                <button id="AgentLogin" style={styles.btn} onClick={login}>Login</button>
-                <button id="logoutAgent" style={styles.btn} onClick={logout}>Logout</button>
+                <input className='input' id="dialNumber" name="dialNumber" placeholder="Extension/Dial Number" type="text" onInput={updateDN} />
+                <button id="AgentLogin" className='btn' onClick={login}>Login</button>
+                <button id="logoutAgent" className='btn' onClick={logout}>Logout</button>
               </fieldset>
             </div>
           </div>

packages/contact-center/station-login/src/station-login/station-login.style.scss

@@ -0,0 +1,55 @@
+.box {
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.section-box {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+}
+
+.fieldset {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 20px;
+}
+
+.legend-box {
+  font-weight: bold;
+  color: #0052bf;
+}
+
+.btn {
+  padding: 10px 20px;
+  background-color: #0052bf;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  margin-right: 8px;
+}
+
+.select {
+  width: 100%;
+  padding: 8px;
+  margin-top: 8px;
+  margin-bottom: 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.input {
+  width: 97%;
+  padding: 8px;
+  margin-top: 8px;
+  margin-bottom: 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}

packages/contact-center/station-login/webpack.config.js

@@ -8,5 +8,10 @@ module.exports = merge(baseConfig, {
     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',
   }
 });

packages/contact-center/store/package.json

@@ -12,15 +12,15 @@
     "package.json"
   ],
   "scripts": {
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "clean:dist": "rm -rf dist",
     "build": "yarn run -T tsc",
-    "build:src": "webpack && yarn run build",
+    "build:src": "webpack",
     "build:watch": "webpack --watch",
     "test:unit": "jest"
   },
   "dependencies": {
     "mobx": "6.13.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
     "typescript": "5.6.3",
     "webex": "3.7.0-wxcc.5"
   },

packages/contact-center/store/src/store.ts

@@ -3,6 +3,7 @@ import Webex from 'webex';
 import {IContactCenter, Profile, Team, WithWebex, IdleCode, InitParams, IStore} from './store.types';
 
 class Store implements IStore {
+  private static instance: Store;
   teams: Team[] = [];
   loginOptions: string[] = [];
   cc: IContactCenter;
@@ -14,6 +15,16 @@ class Store implements IStore {
     makeAutoObservable(this, {cc: observable.ref});
   }
 
+  public static getInstance(): Store {
+    if (!Store.instance) {
+      console.log('Creating new store instance');
+      Store.instance = new Store();
+    }
+
+    console.log('Returning store instance');
+    return Store.instance;
+  }
+
   setSelectedLoginOption(option: string): void {
     this.selectedLoginOption = option;
   }
@@ -66,5 +77,5 @@ class Store implements IStore {
   }
 }
 
-const store = new Store();
+const store = Store.getInstance();
 export default store;