CC-Widgets Packages setup #237
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| module.exports = { | ||
| presets: [ | ||
| ['@babel/preset-env', {targets: {node: 'current'}}], | ||
| ['@babel/preset-react', {runtime: 'automatic'}], | ||
| '@babel/preset-typescript', | ||
| ], | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
|
|
||
| <title>Webex Widgets</title> | ||
| <meta name="description" content="Widgets for webex" /> | ||
|
|
||
| <link | ||
| rel="stylesheet" | ||
| href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" | ||
| integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" | ||
| crossorigin="anonymous" | ||
| /> | ||
|
|
||
| <style> | ||
| footer { | ||
| margin: 20px 0px; | ||
| } | ||
|
|
||
| footer .copyright { | ||
| text-align: center; | ||
| margin: 0 auto; | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <header class="navbar navbar-default navbar-static-top" role="banner"> | ||
| <div class="container"> | ||
| <div class="navbar-header"> | ||
| <div class="navbar-left"> | ||
| <a class="navbar-brand" href="./index.html">Webex Widgets</a> | ||
| </div> | ||
| </div> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
| <main> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <h2 class="page-header">Samples</h2> | ||
| <p> | ||
| Get started quickly with the Cisco Webex Widgets with the following samples: | ||
| </p> | ||
| <div class="list-group"> | ||
| <a href="./web-component-samples/index.html" class="list-group-item">Contact Center widgets as web-component</a> | ||
| <a href="http://localhost:3000/" class="list-group-item">Contact Center widgets in a react app</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <footer> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-xs-12 col-md-12"> | ||
| <div class="copyright"> | ||
| © 2015-2024 Cisco and/or its affiliates. All Rights Reserved. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| { | ||
|
There was a problem hiding this comment. The sample app is also a workspace. This will allow us to easily link updated widgets locally. There was a problem hiding this comment. All the files in this are demo, these will be updated when we add the actual implementation of these widgets. |
||
| "name": "@webex/react-samples-app", | ||
| "version": "1.0.0", | ||
| "main": "dist/index.js", | ||
| "scripts": { | ||
| "build": "tsc --project tsconfig.json", | ||
| "build:src": "webpack && yarn run build", | ||
| "build:watch": "webpack --watch", | ||
| "serve": "webpack serve" | ||
| }, | ||
| "dependencies": { | ||
| "@babel/core": "^7.25.2", | ||
| "@babel/preset-env": "^7.25.4", | ||
| "@babel/preset-react": "^7.24.7", | ||
| "@babel/preset-typescript": "^7.25.9", | ||
| "@r2wc/react-to-web-component": "^2.0.3", | ||
| "@webex/cc-station-login": "workspace:*", | ||
| "@webex/cc-user-state": "workspace:*", | ||
| "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", | ||
| "ts-loader": "^9.5.1", | ||
| "typescript": "^5.6.3", | ||
| "webpack": "^5.94.0", | ||
| "webpack-cli": "^5.1.4", | ||
| "webpack-dev-server": "^5.1.0", | ||
| "webpack-merge": "6.0.1" | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>CC Widgets in React</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import React from 'react'; | ||
|
There was a problem hiding this comment. Dummy code for a simple demo. |
||
| import {StationLogin} from '@webex/cc-station-login'; | ||
| import {UserState} from '@webex/cc-user-state'; | ||
|
|
||
| function App() { | ||
| return ( | ||
| <> | ||
| <h1>Contact Center widgets in a react app</h1> | ||
| <StationLogin /> | ||
| <UserState /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default App; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import React from 'react'; | ||
| import {createRoot} from 'react-dom/client'; | ||
| import App from './App'; | ||
|
|
||
| const root = createRoot(document.getElementById('root')); | ||
| root.render(<App />); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "extends": "../../tsconfig.json", | ||
| "compilerOptions": { | ||
| "outDir": "./dist", | ||
| "declaration": true, | ||
| "declarationDir": "./dist/types" | ||
| }, | ||
| "include": [ | ||
| "./src" | ||
| ] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| const path = require('path'); | ||
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | ||
| const {merge} = require('webpack-merge'); | ||
|
|
||
| const baseConfig = require('../../webpack.config'); | ||
|
There was a problem hiding this comment. Using base webpack config here also |
||
|
|
||
| module.exports = merge(baseConfig, { | ||
| entry: './src/index.tsx', // Entry file for bundling | ||
| output: { | ||
| path: path.resolve(__dirname, 'dist'), // Output directory | ||
| 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 | ||
| filename: 'index.html', | ||
| }), | ||
| ], | ||
| devServer: { | ||
| static: path.join(__dirname, 'public'), // Serve files from public folder | ||
| compress: true, // Enable gzip compression | ||
| port: 3000, // Port for the dev server | ||
| hot: true, // Enable hot module replacement | ||
| open: false, // Open the app in browser on start | ||
| }, | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <!DOCTYPE html> | ||
|
There was a problem hiding this comment. This is a sample using web-components and NO react. Again dummy code to just show that widgets can be used as web-components |
||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>CC Widgets as web-component</title> | ||
| </head> | ||
| <body> | ||
| <h1>Contact Center widgets as web-component</h1> | ||
| <script src="dist/bundle.js"></script> | ||
| <widget-cc-station-login></widget-cc-station-login> | ||
| <widget-cc-user-state></widget-cc-user-state> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "name": "@webex/web-component-samples-app", | ||
| "version": "1.0.0", | ||
| "main": "dist/index.js", | ||
| "dependencies": { | ||
| "@webex/cc-station-login": "workspace:*", | ||
| "@webex/cc-user-state": "workspace:*", | ||
| "html-webpack-plugin": "^5.6.3", | ||
| "ts-loader": "^9.5.1", | ||
| "typescript": "^5.6.3", | ||
| "webpack": "^5.96.1", | ||
| "webpack-cli": "^5.1.4", | ||
| "webpack-merge": "6.0.1" | ||
| }, | ||
| "scripts": { | ||
| "serve": "open index.html", | ||
| "build:src": "webpack" | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import '@webex/cc-station-login'; | ||
| import '@webex/cc-user-state'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "extends": "../../tsconfig.json", | ||
| "compilerOptions": { | ||
| "outDir": "./dist", | ||
| "declaration": false, | ||
| "declarationDir": null | ||
| }, | ||
| "include": [ | ||
| "./src" | ||
| ] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| const path = require('path'); | ||
| const {merge} = require('webpack-merge'); | ||
|
|
||
| const baseConfig = require('../../webpack.config'); | ||
|
|
||
| module.exports = merge(baseConfig, { | ||
| output: { | ||
| path: path.resolve(__dirname, 'dist'), | ||
| filename: 'bundle.js', | ||
| }, | ||
|
|
||
| resolve: { | ||
| extensions: ['.js', '.jsx', '.tsx', '.ts'], | ||
| }, | ||
| devServer: { | ||
| static: { | ||
| directory: path.join(__dirname, 'public'), | ||
| }, | ||
| open: true, | ||
| port: 3000, | ||
| }, | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| const baseConfig = require('../../../.babelrc'); | ||
|
|
||
| module.exports = baseConfig; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| { | ||
| "name": "@webex/cc-station-login", | ||
| "description": "Webex Contact Center Widgets: Station Login", | ||
| "version": "1.0.0", | ||
| "main": "dist/index.js", | ||
| "scripts": { | ||
| "build": "yarn run -T tsc", | ||
| "build:src": "webpack && yarn run build", | ||
| "build:watch": "webpack --watch", | ||
| "test:unit": "jest" | ||
| }, | ||
| "dependencies": { | ||
| "@r2wc/react-to-web-component": "2.0.3", | ||
| "@webex/cc-store": "workspace:*", | ||
| "mobx-react": "9.1.1", | ||
| "react": "18.3.1", | ||
| "react-dom": "18.3.1", | ||
| "typescript": "5.6.3" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "7.25.2", | ||
| "@babel/preset-env": "7.25.4", | ||
| "@babel/preset-react": "7.24.7", | ||
| "@babel/preset-typescript": "7.25.9", | ||
| "@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", | ||
| "babel-jest": "29.7.0", | ||
| "babel-loader": "9.2.1", | ||
| "file-loader": "6.2.0", | ||
| "jest": "29.7.0", | ||
| "jest-environment-jsdom": "29.7.0", | ||
| "ts-loader": "9.5.1", | ||
| "webpack": "5.94.0", | ||
| "webpack-cli": "5.1.4", | ||
| "webpack-merge": "6.0.1" | ||
| }, | ||
| "jest": { | ||
| "testEnvironment": "jsdom", | ||
| "testMatch": [ | ||
| "**/tests/**/*.ts", | ||
| "**/tests/**/*.tsx" | ||
| ] | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export const useStationLogin = () => { | ||
| return {name: 'StationLogin'}; | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import {StationLogin, WebStationLogin} from './station-login'; | ||
|
|
||
| export {StationLogin, WebStationLogin}; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Created common babelrc which will be imported in each workspace. babelrc is required in each workspace to run jest tests