chore: update cc components to material design

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

@@ -59,11 +59,9 @@
   },
   "stableVersion": "1.28.0-ccwidgets.8",
   "peerDependencies": {
-    "@momentum-ui/core": ">=19.16.0",
-    "@momentum-ui/icons": ">=8.28.5",
-    "@momentum-ui/tokens": ">=1.7.1",
-    "@momentum-ui/utils": ">=6.2.15",
-    "@momentum-ui/web-components": ">=2.16.16",
+    "@emotion/react": ">=11.14.0",
+    "@emotion/styled": ">=11.14.0",
+    "@mui/material": ">=6.4.2",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   }

packages/contact-center/cc-components/src/components/UserState/user-state.tsx

@@ -1,52 +1,55 @@
 import React from 'react';
-
-import {IUserState} from './user-state.types';
-import {formatTime} from '../../utils'
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+import { IUserState } from './user-state.types';
+import { formatTime } from '../../utils';
 
 import './user-state.scss';
 
-const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
-  const {idleCodes,setAgentStatus,isSettingAgentStatus, errorMessage, elapsedTime, currentState, currentTheme} = props;
+const UserStateComponent: React.FunctionComponent<Omit<IUserState, "setCurrentState">> = (props) => {
+  const { idleCodes, setAgentStatus, isSettingAgentStatus, errorMessage, elapsedTime, currentState, currentTheme } = props;
 
   return (
     <div className={`box ${currentTheme === 'DARK' ? 'dark-theme' : 'light-theme'}`}>
       <section className='sectionBox'>
         <fieldset className='fieldset'>
           <legend data-testid='user-state-title' className='legendBox'>Agent State</legend>
           <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }} />
-          <select
-            id="idleCodes"
-            value={currentState.id}
-            className='select'
-            onChange={
-              (event) => {
-                const code = idleCodes?.filter(code => code.id === event.target.value)[0];
+
+          <FormControl variant="outlined" fullWidth disabled={isSettingAgentStatus} className='formControl'>
+            <InputLabel id="idleCodes-label">Idle Codes</InputLabel>
+            <Select
+              labelId="idleCodes-label"
+              id="idleCodes"
+              value={currentState?.id || ''}
+              onChange={(event) => {
+                const code = idleCodes?.find(code => code.id === event.target.value);
                 setAgentStatus(code);
-              }
-            }
-            disabled={isSettingAgentStatus}
-          >
-            {idleCodes?.filter(code => !code.isSystem).map((code) => {
-              return (
-                <option
-                  key={code.id}
-                  value={code.id}
-                >
-                    {code.name}
-                </option>
-              );
-          })}
-          </select>
-          {/* @ts-ignore */}
-          <md-button color={`${currentTheme === 'DARK' ? 'white' : 'dark-grey'}`}>Test Button</md-button>
-          <div className={`elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}`}>{formatTime(elapsedTime)}</div>
-          {
-            errorMessage && <div style={{color: 'red'}}>{errorMessage}</div>
-          }
+              }}
+              label="Idle Codes"
+            >
+              {idleCodes?.filter(code => !code.isSystem).map((code) => (
+                <MenuItem key={code.id} value={code.id}>
+                  {code.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <Button style={{ color: currentTheme === 'DARK' ? 'white' : 'dark-grey' }}>
+            Test Button
+          </Button>
+          <div className={`elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}`}>
+            {formatTime(elapsedTime)}
+          </div>
+          {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
         </fieldset>
       </section>
     </div>
   );
 };
 
-export default UserStateComponent;
+export default UserStateComponent;

packages/contact-center/cc-components/src/index.ts

@@ -1,7 +1,4 @@
 import UserStateComponent from './components/UserState/user-state';
 import {IUserState} from './components/UserState/user-state.types';
-import '@momentum-ui/icons/css/momentum-ui-icons.min.css';
-import '@momentum-ui/core/css/momentum-ui.min.css';
-import '@momentum-ui/web-components';
 
 export {UserStateComponent, type IUserState};

packages/contact-center/cc-components/src/wc.ts

@@ -1,8 +1,5 @@
 import r2wc from '@r2wc/react-to-web-component';
 import UserStateComponent from './components/UserState/user-state';
-import '@momentum-ui/web-components';
-import '@momentum-ui/icons/css/momentum-ui-icons.min.css';
-import '@momentum-ui/core/css/momentum-ui.min.css';
 
 const WebUserState = r2wc(UserStateComponent);
 

packages/contact-center/cc-components/tests/components/UserState/user-state.tsx

@@ -5,7 +5,6 @@ import UserStateComponent from '../../../src/components/UserState/user-state';
 
 describe('UserStateComponent', () => {
   const mockSetAgentStatus = jest.fn();
-  const mockSetCurrentState = jest.fn();
   const defaultProps = {
     idleCodes: [
       { id: '1', name: 'Idle Code 1', isSystem: false },
@@ -17,19 +16,19 @@ describe('UserStateComponent', () => {
     errorMessage: '',
     elapsedTime: 3661, // 1 hour, 1 minute, 1 second
     currentState: { id: '1' },
-    setCurrentState: mockSetCurrentState,
     currentTheme: 'LIGHT'
   };
 
   it('should render the component with correct elements', () => {
     render(<UserStateComponent {...defaultProps} />);
     expect(screen.getByTestId('user-state-title')).toHaveTextContent('Agent State');
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByLabelText('Idle Codes')).toBeInTheDocument();
     expect(screen.getByText('01:01:01')).toBeInTheDocument();
   });
 
   it('should render only non-system idle codes in the dropdown', () => {
     render(<UserStateComponent {...defaultProps} />);
+    fireEvent.mouseDown(screen.getByLabelText('Idle Codes')); // Open the dropdown
     const options = screen.getAllByRole('option');
     expect(options).toHaveLength(2);
     expect(options[0]).toHaveTextContent('Idle Code 1');
@@ -38,7 +37,8 @@ describe('UserStateComponent', () => {
 
   it('should call setAgentStatus with correct code when an idle code is selected', () => {
     render(<UserStateComponent {...defaultProps} />);
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: '3' } });
+    fireEvent.mouseDown(screen.getByLabelText('Idle Codes')); // Open the dropdown
+    fireEvent.click(screen.getByText('Idle Code 3')); // Select the option
     expect(mockSetAgentStatus).toHaveBeenCalledWith({ id: '3', name: 'Idle Code 3', isSystem: false });
   });
 
@@ -50,7 +50,8 @@ describe('UserStateComponent', () => {
 
   it('should disable the select box when isSettingAgentStatus is true', () => {
     render(<UserStateComponent {...{ ...defaultProps, isSettingAgentStatus: true }} />);
-    expect(screen.getByRole('combobox')).toBeDisabled();
+    const selectElement = screen.getByLabelText('Idle Codes');
+    expect(selectElement).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('should render elapsed time in correct color based on isSettingAgentStatus', () => {
@@ -60,4 +61,4 @@ describe('UserStateComponent', () => {
     rerender(<UserStateComponent {...{ ...defaultProps, isSettingAgentStatus: true }} />);
     expect(screen.getByText('01:01:01')).toHaveClass('elapsedTime elapsedTime-disabled');
   });
-});
+});

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

@@ -29,53 +29,11 @@ module.exports = mergeWithCustomize({
     react: 'react',
     'react-dom': 'react-dom',
     '@webex/cc-store': '@webex/cc-store',
-    '@momentum-ui/core': '@momentum-ui/core',
-    '@momentum-ui/icons': '@momentum-ui/icons',
-    '@momentum-ui/tokens': '@momentum-ui/tokens',
-    '@momentum-ui/utils': '@momentum-ui/utils',
-    '@momentum-ui/web-components': '@momentum-ui/web-components',
+    "@emotion/react": "@emotion/react",
+    "@emotion/styled": "@emotion/styled",
+    "@mui/material": "@mui/material",
   },
   resolve: {
     fallback: {}
   },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-        include: [
-          resolveMonorepoRoot('node_modules/@momentum-ui'), // Include specific node module
-          path.resolve(__dirname, 'packages') // Include all CSS from the local package
-        ],
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          "style-loader",  // Injects styles into DOM
-          "css-loader",    // Turns CSS into CommonJS
-          "sass-loader"    // Compiles Sass to CSS
-        ],
-        include: [
-          resolveMonorepoRoot('node_modules/@momentum-ui'), // Include specific node module
-          path.resolve(__dirname, 'packages') // Include all CSS from the local package
-        ],
-      },
-      {
-        test: /\.(woff|woff2|eot|ttf|otf)$/,
-        include: [resolveMonorepoRoot('node_modules/@momentum-ui')],
-        type: 'asset/resource',
-        generator: {
-          filename: 'fonts/[name][ext][query]'
-        }
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        include: [resolveMonorepoRoot('node_modules/@momentum-ui')],
-        type: 'asset/resource',
-        generator: {
-          filename: 'images/[name][ext][query]'
-        }
-      }
-    ],
-  },
 });

packages/contact-center/user-state/tests/user-state/index.tsx

@@ -14,8 +14,6 @@ jest.mock('@webex/cc-store', () => {return {
   agentId: 'testAgentId'
 }});
 
-jest.mock('@momentum-ui/web-components', () => {});
-
 describe('UserState Component', () => {
   let workerMock;
 

widgets-samples/cc/samples-cc-react-app/package.json

@@ -15,11 +15,9 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.25.9",
-    "@momentum-ui/core": "19.16.0",
-    "@momentum-ui/icons": "8.28.5",
-    "@momentum-ui/tokens": "1.7.1",
-    "@momentum-ui/utils": "6.2.15",
-    "@momentum-ui/web-components": "^2.16.16",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.2",
     "@webex/cc-widgets": "workspace:*",
     "babel-loader": "^9.2.1",
     "file-loader": "^6.2.0",

widgets-samples/cc/samples-cc-wc-app/package.json

@@ -3,11 +3,9 @@
   "version": "1.0.0",
   "main": "dist/index.js",
   "dependencies": {
-    "@momentum-ui/core": "19.16.0",
-    "@momentum-ui/icons": "8.28.5",
-    "@momentum-ui/tokens": "1.7.1",
-    "@momentum-ui/utils": "6.2.15",
-    "@momentum-ui/web-components": "^2.16.16",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.2",
     "@webex/cc-widgets": "workspace:*",
     "html-webpack-plugin": "^5.6.3",
     "ts-loader": "^9.5.1",