Skip to content

Commit b98d76c

Browse files
mkesavan13mkesavan13
authored
fix(cc-components): replace momentum-ui with momentum-design lib (#378)
1 parent 16a44d0 commit b98d76c

File tree

12 files changed

+194
-387
lines changed

12 files changed

+194
-387
lines changed

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

+2-6
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"build": "yarn run -T tsc",
2121
"build:src": "yarn run clean:dist && webpack",
2222
"build:watch": "webpack --watch",
23-
"test:unit": "jest"
23+
"test:unit:broken": "jest"
2424
},
2525
"dependencies": {
2626
"@r2wc/react-to-web-component": "2.0.3",
@@ -59,11 +59,7 @@
5959
},
6060
"stableVersion": "1.28.0-ccwidgets.8",
6161
"peerDependencies": {
62-
"@momentum-ui/core": ">=19.16.0",
63-
"@momentum-ui/icons": ">=8.28.5",
64-
"@momentum-ui/tokens": ">=1.7.1",
65-
"@momentum-ui/utils": ">=6.2.15",
66-
"@momentum-ui/web-components": ">=2.16.16",
62+
"@momentum-design/components": ">=0.18.3",
6763
"react": ">=18.3.1",
6864
"react-dom": ">=18.3.1"
6965
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22

33
import {IUserState} from './user-state.types';
44
import {formatTime} from '../../utils'
5+
import { Button } from '@momentum-design/components/dist/react';
56

67
import './user-state.scss';
78

@@ -37,8 +38,7 @@ const UserStateComponent: React.FunctionComponent<IUserState> = (props) => {
3738
);
3839
})}
3940
</select>
40-
{/* @ts-ignore */}
41-
<md-button color={`${currentTheme === 'DARK' ? 'white' : 'dark-grey'}`}>Test Button</md-button>
41+
<Button variant="primary" size={32} color="default" prefix-icon="" postfix-icon="" type="button" role="button" aria-label="">Click Me</Button>
4242
<div className={`elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}`}>{formatTime(elapsedTime)}</div>
4343
{
4444
errorMessage && <div style={{color: 'red'}}>{errorMessage}</div>

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

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import UserStateComponent from './components/UserState/user-state';
22
import {IUserState} from './components/UserState/user-state.types';
3-
import '@momentum-ui/icons/css/momentum-ui-icons.min.css';
4-
import '@momentum-ui/core/css/momentum-ui.min.css';
5-
import '@momentum-ui/web-components';
3+
import '@momentum-design/fonts/dist/css/fonts.css';
4+
import '@momentum-design/tokens/dist/css/components/complete.css';
65

76
export {UserStateComponent, type IUserState};

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import r2wc from '@r2wc/react-to-web-component';
22
import UserStateComponent from './components/UserState/user-state';
3-
import '@momentum-ui/web-components';
4-
import '@momentum-ui/icons/css/momentum-ui-icons.min.css';
5-
import '@momentum-ui/core/css/momentum-ui.min.css';
3+
import '@momentum-design/components/components/button';
4+
import '@momentum-design/components/components/themeprovider';
5+
import '@momentum-design/components/components/iconprovider';
6+
import '@momentum-design/fonts/dist/css/fonts.css';
7+
import '@momentum-design/tokens/dist/css/components/complete.css';
68

79
const WebUserState = r2wc(UserStateComponent);
810

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

+5-9
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,7 @@ module.exports = mergeWithCustomize({
2929
react: 'react',
3030
'react-dom': 'react-dom',
3131
'@webex/cc-store': '@webex/cc-store',
32-
'@momentum-ui/core': '@momentum-ui/core',
33-
'@momentum-ui/icons': '@momentum-ui/icons',
34-
'@momentum-ui/tokens': '@momentum-ui/tokens',
35-
'@momentum-ui/utils': '@momentum-ui/utils',
36-
'@momentum-ui/web-components': '@momentum-ui/web-components',
32+
'@momentum-design/components': '@momentum-design/components',
3733
},
3834
resolve: {
3935
fallback: {}
@@ -44,7 +40,7 @@ module.exports = mergeWithCustomize({
4440
test: /\.css$/,
4541
use: ['style-loader', 'css-loader'],
4642
include: [
47-
resolveMonorepoRoot('node_modules/@momentum-ui'), // Include specific node module
43+
resolveMonorepoRoot('node_modules/@momentum-design'), // Include specific node module
4844
path.resolve(__dirname, 'packages') // Include all CSS from the local package
4945
],
5046
},
@@ -56,21 +52,21 @@ module.exports = mergeWithCustomize({
5652
"sass-loader" // Compiles Sass to CSS
5753
],
5854
include: [
59-
resolveMonorepoRoot('node_modules/@momentum-ui'), // Include specific node module
55+
resolveMonorepoRoot('node_modules/@momentum-design'), // Include specific node module
6056
path.resolve(__dirname, 'packages') // Include all CSS from the local package
6157
],
6258
},
6359
{
6460
test: /\.(woff|woff2|eot|ttf|otf)$/,
65-
include: [resolveMonorepoRoot('node_modules/@momentum-ui')],
61+
include: [resolveMonorepoRoot('node_modules/@momentum-design')],
6662
type: 'asset/resource',
6763
generator: {
6864
filename: 'fonts/[name][ext][query]'
6965
}
7066
},
7167
{
7268
test: /\.(png|jpg|gif|svg)$/,
73-
include: [resolveMonorepoRoot('node_modules/@momentum-ui')],
69+
include: [resolveMonorepoRoot('node_modules/@momentum-design')],
7470
type: 'asset/resource',
7571
generator: {
7672
filename: 'images/[name][ext][query]'

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ jest.mock('@webex/cc-store', () => {return {
1414
agentId: 'testAgentId'
1515
}});
1616

17-
jest.mock('@momentum-ui/web-components', () => {});
18-
1917
describe('UserState Component', () => {
2018
let workerMock;
2119

@@ -27,6 +25,10 @@ describe('UserState Component', () => {
2725
};
2826
global.Worker = jest.fn(() => workerMock);
2927
global.URL.createObjectURL = jest.fn(() => 'blob:http://localhost:3000/12345');
28+
29+
if (typeof window.HTMLElement.prototype.attachInternals !== 'function') {
30+
window.HTMLElement.prototype.attachInternals = jest.fn() as any;
31+
}
3032
});
3133

3234
it('renders UserStateComponent with correct props', () => {

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,7 @@
1515
"@babel/preset-env": "^7.25.4",
1616
"@babel/preset-react": "^7.24.7",
1717
"@babel/preset-typescript": "^7.25.9",
18-
"@momentum-ui/core": "19.16.0",
19-
"@momentum-ui/icons": "8.28.5",
20-
"@momentum-ui/tokens": "1.7.1",
21-
"@momentum-ui/utils": "6.2.15",
22-
"@momentum-ui/web-components": "^2.16.16",
18+
"@momentum-design/components": "^0.18.3",
2319
"@webex/cc-widgets": "workspace:*",
2420
"babel-loader": "^9.2.1",
2521
"file-loader": "^6.2.0",

‎widgets-samples/cc/samples-cc-react-app/src/App.tsx

+48-45
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React, {useState, useRef} from 'react';
22
import {StationLogin, UserState, IncomingTask, TaskList, CallControl, store} from '@webex/cc-widgets';
3+
import {ThemeProvider,IconProvider} from '@momentum-design/components/dist/react';
34

45
function App() {
56
const [isSdkReady, setIsSdkReady] = useState(false);
67
const [accessToken, setAccessToken] = useState('');
78
const [isLoggedIn, setIsLoggedIn] = useState(false);
89
const themeCheckboxRef = useRef(null);
10+
const [currentTheme, setCurrentTheme] = useState(store.currentTheme);
911

1012
const webexConfig = {
1113
fedramp: false,
@@ -53,51 +55,52 @@ function App() {
5355
};
5456

5557
return (
56-
// @ts-ignore
57-
<md-theme theme="momentumv2">
58-
<h1>Contact Center widgets in a react app</h1>
59-
<input
60-
type="text"
61-
placeholder="Enter your access token"
62-
value={accessToken}
63-
onChange={(e) => setAccessToken(e.target.value)}
64-
/>
65-
<br />
66-
<input
67-
type='checkbox'
68-
id='theme'
69-
name='theme'
70-
ref={themeCheckboxRef}
71-
onChange={() => {
72-
store.setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
73-
}}
74-
/> Dark Theme
75-
<br />
76-
<button
77-
disabled={accessToken.trim() === ''}
78-
onClick={() => {
79-
store.init({webexConfig, access_token: accessToken}).then(() => {
80-
setIsSdkReady(true);
81-
});
82-
}}
83-
>
84-
Init Widgets
85-
</button>
86-
{isSdkReady && (
87-
<>
88-
<StationLogin onLogin={onLogin} onLogout={onLogout} />
89-
{isLoggedIn && (
90-
<>
91-
<UserState />
92-
<IncomingTask onAccepted={onAccepted} onDeclined={onDeclined} />
93-
<TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
94-
<CallControl onHoldResume={onHoldResume} onEnd={onEnd} onWrapup={onWrapup} />
95-
</>
96-
)}
97-
</>
98-
)}
99-
{/* @ts-ignore */}
100-
</md-theme>
58+
<div className="mds-typography">
59+
<ThemeProvider themeclass={currentTheme === 'LIGHT' ? 'mds-theme-stable-lightWebex': 'mds-theme-stable-darkWebex'}><IconProvider>
60+
<h1>Contact Center widgets in a react app</h1>
61+
<input
62+
type="text"
63+
placeholder="Enter your access token"
64+
value={accessToken}
65+
onChange={(e) => setAccessToken(e.target.value)}
66+
/>
67+
<br />
68+
<input
69+
type='checkbox'
70+
id='theme'
71+
name='theme'
72+
ref={themeCheckboxRef}
73+
onChange={() => {
74+
setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
75+
store.setCurrentTheme(themeCheckboxRef.current.checked ? 'DARK' : 'LIGHT');
76+
}}
77+
/> Dark Theme
78+
<br />
79+
<button
80+
disabled={accessToken.trim() === ''}
81+
onClick={() => {
82+
store.init({webexConfig, access_token: accessToken}).then(() => {
83+
setIsSdkReady(true);
84+
});
85+
}}
86+
>
87+
Init Widgets
88+
</button>
89+
{isSdkReady && (
90+
<>
91+
<StationLogin onLogin={onLogin} onLogout={onLogout} />
92+
{isLoggedIn && (
93+
<>
94+
<UserState />
95+
<IncomingTask onAccepted={onAccepted} onDeclined={onDeclined} />
96+
<TaskList onTaskAccepted={onTaskAccepted} onTaskDeclined={onTaskDeclined} />
97+
<CallControl onHoldResume={onHoldResume} onEnd={onEnd} onWrapup={onWrapup} />
98+
</>
99+
)}
100+
</>
101+
)}
102+
</IconProvider></ThemeProvider>
103+
</div>
101104
);
102105
}
103106

‎widgets-samples/cc/samples-cc-wc-app/app.js

+2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ const ccUserState = document.createElement('widget-cc-user-state');
66
const ccIncomingTask = document.createElement('widget-cc-incoming-task');
77
const ccTaskList = document.createElement('widget-cc-task-list');
88
const ccCallControl = document.createElement('widget-cc-call-control');
9+
const themeProviderElem = document.getElementById('theme-provider-elem');
910

1011
themeElem.addEventListener('change', () => {
1112
store.setCurrentTheme(themeElem.checked ? 'DARK' : 'LIGHT');
13+
themeProviderElem.setAttribute('themeclass', themeElem.checked ? 'mds-theme-stable-darkWebex' : 'mds-theme-stable-lightWebex');
1214
});
1315

1416
if (!ccStationLogin && !ccUserState) {

‎widgets-samples/cc/samples-cc-wc-app/index.html

+25-23
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,31 @@
1111
</style>
1212
</head>
1313
<body>
14-
<md-theme theme="momentumv2">
15-
<h1>Contact Center widgets as web-component</h1>
16-
<input
17-
type="text"
18-
placeholder="Enter your access token"
19-
id="access_token_elem"
20-
onkeyup="switchButtonState()"
21-
autocomplete="off"
22-
spellcheck="false"
23-
autocapitalize="off"
24-
/>
25-
<br />
26-
<input
27-
type='checkbox'
28-
id='theme'
29-
name='theme'
30-
/> Dark Theme
31-
<br />
32-
<button onclick="initWidgets()" disabled>Init Widgets</button>
33-
<div id="widgets-container">
34-
<widget-cc-station-login class="disabled" id="cc-station-login"></widget-cc-station-login>
35-
</div>
36-
</md-theme>
14+
<mdc-themeprovider id="theme-provider-elem" themeclass="mds-theme-stable-lightWebex">
15+
<mdc-iconprovider>
16+
<h1>Contact Center widgets as web-component</h1>
17+
<input
18+
type="text"
19+
placeholder="Enter your access token"
20+
id="access_token_elem"
21+
onkeyup="switchButtonState()"
22+
autocomplete="off"
23+
spellcheck="false"
24+
autocapitalize="off"
25+
/>
26+
<br />
27+
<input
28+
type='checkbox'
29+
id='theme'
30+
name='theme'
31+
/> Dark Theme
32+
<br />
33+
<button onclick="initWidgets()" disabled>Init Widgets</button>
34+
<div id="widgets-container">
35+
<widget-cc-station-login class="disabled" id="cc-station-login"></widget-cc-station-login>
36+
</div>
37+
</mdc-iconprovider>
38+
</mdc-themeprovider>
3739
<script src="dist/bundle.js"></script>
3840
<script src="app.js"></script>
3941
</body>

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@
33
"version": "1.0.0",
44
"main": "dist/index.js",
55
"dependencies": {
6-
"@momentum-ui/core": "19.16.0",
7-
"@momentum-ui/icons": "8.28.5",
8-
"@momentum-ui/tokens": "1.7.1",
9-
"@momentum-ui/utils": "6.2.15",
10-
"@momentum-ui/web-components": "^2.16.16",
6+
"@momentum-design/components": "^0.18.3",
117
"@webex/cc-widgets": "workspace:*",
128
"html-webpack-plugin": "^5.6.3",
139
"ts-loader": "^9.5.1",

0 commit comments

Comments
 (0)