docs(samples): unify the widgets sample apps (#363)

Author: rarajes2

.circleci/config.yml

@@ -61,7 +61,7 @@ jobs:
       - checkout_from_workspace
       - run:
           name: Build
-          command: yarn run build && yarn workspace @webex/widgets run build
+          command: yarn run build && yarn workspace @webex/widgets run build:src
       - persist_to_workspace:
           root: .
           paths:

copy_to_docs.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+# Copy the index.html file to the docs directory
+cp ./widgets-samples/index.html docs/
+
+# Copy specific files and directories from samples-cc-wc-app to the docs directory
+mkdir -p docs/samples-cc-wc-app
+cp -r ./widgets-samples/cc/samples-cc-wc-app/dist docs/samples-cc-wc-app/
+cp ./widgets-samples/cc/samples-cc-wc-app/app.js docs/samples-cc-wc-app/
+cp ./widgets-samples/cc/samples-cc-wc-app/bundle.js docs/samples-cc-wc-app/
+cp ./widgets-samples/cc/samples-cc-wc-app/index.html docs/samples-cc-wc-app/
+
+# Update the hrefs in the copied index.html file
+sed -i '' 's|http://localhost:4000/|./samples-cc-wc-app/index.html|g' docs/index.html
+sed -i '' 's|http://localhost:3000/|./samples-cc-react-app/index.html|g' docs/index.html
+sed -i '' 's|https://localhost:9000/|./samples-meeting-app/index.html|g' docs/index.html
+
+echo "All dist folders, specific files from samples-cc-wc-app, and index.html from widgets-samples have been copied to the docs directory, and hrefs have been updated."

package.json

@@ -7,7 +7,7 @@
   "workspaces": [
     "packages/**/*",
     "packages/contact-center/*",
-    "docs/**/*"
+    "widgets-samples/**/**"
   ],
   "packageManager": "yarn@4.5.1",
   "devDependencies": {
@@ -20,6 +20,7 @@
     "crypto-browserify": "^3.12.1",
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
+    "http-server": "^14.1.1",
     "jest": "29.7.0",
     "node-gyp": "^10.2.0",
     "os-browserify": "^0.3.0",
@@ -41,12 +42,12 @@
     "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",
-    "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",
-    "samples:serve-wc": "yarn workspace @webex/web-component-samples-app serve",
+    "test:cc-widgets": "yarn workspaces foreach --all --parallel --exclude webex-widgets --exclude samples-cc-wc-app --exclude samples-cc-react-app run test:unit",
+    "build": "yarn workspaces foreach --all --topological --parallel --exclude samples-cc-react-app --exclude samples-cc-wc-app --exclude samples-meeting-app run build:src",
+    "samples:build": "yarn workspaces foreach --all --parallel --include samples-cc-react-app --include samples-cc-wc-app --include samples-meeting-app run build:src && ./copy_to_docs.sh",
+    "samples:serve": "http-server docs",
+    "samples:serve-react": "yarn workspace samples-cc-react-app serve",
+    "samples:serve-wc": "yarn workspace samples-cc-wc-app serve",
     "release:widgets": "semantic-release"
   },
   "jest": {

packages/@webex/widgets/package.json

@@ -7,7 +7,9 @@
   "main": "dist/webexWidgets.esm.js",
   "module": "dist/webexWidgets.esm.js",
   "scripts": {
-    "build": "rollup -c",
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "clean:dist": "rm -rf dist",
+    "build:src": "yarn clean:dist && rollup -c",
     "demo:serve": "webpack serve ./demo/App.jsx --mode development",
     "demo:build": "webpack ./demo/App.jsx --mode production",
     "release": "semantic-release",

docs/react-samples/package.json renamed to widgets-samples/cc/samples-cc-react-app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@webex/react-samples-app",
+  "name": "samples-cc-react-app",
   "version": "1.0.0",
   "main": "dist/index.js",
   "scripts": {

docs/react-samples/public/index.html renamed to widgets-samples/cc/samples-cc-react-app/public/index.html

@@ -1,5 +1,5 @@
 {
-    "extends": "../../tsconfig.json",
+    "extends": "../../../tsconfig.json",
     "compilerOptions": {
         "outDir": "./dist",
         "declaration": true,

docs/react-samples/src/App.tsx renamed to widgets-samples/cc/samples-cc-react-app/src/App.tsx

@@ -2,12 +2,12 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const {merge} = require('webpack-merge');
 
-const baseConfig = require('../../webpack.config');
+const baseConfig = require('../../../webpack.config');
 
 module.exports = merge(baseConfig, {
   entry: './src/index.tsx', // Entry file for bundling
   output: {
-    path: path.resolve(__dirname, 'dist'), // Output directory
+    path: path.resolve(__dirname, '../../../docs/samples-cc-react-app'), // Output directory
     filename: 'bundle.js', // Output bundle file name
     clean: true, // Clean dist folder before each build
   },

docs/react-samples/src/index.tsx renamed to widgets-samples/cc/samples-cc-react-app/src/index.tsx

@@ -1,5 +1,5 @@
 {
-  "name": "@webex/web-component-samples-app",
+  "name": "samples-cc-wc-app",
   "version": "1.0.0",
   "main": "dist/index.js",
   "dependencies": {
@@ -14,7 +14,7 @@
   "scripts": {
     "clean": "rm -rf dist && rm -rf node_modules",
     "clean:dist": "rm -rf dist",
-    "serve": "open index.html",
+    "serve": "webpack serve",
     "build:src": "webpack"
   }
 }

docs/react-samples/tsconfig.json renamed to widgets-samples/cc/samples-cc-react-app/tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "extends": "../../tsconfig.json",
+    "extends": "../../../tsconfig.json",
     "compilerOptions": {
         "outDir": "./dist",
         "declaration": false,

docs/react-samples/webpack.config.js renamed to widgets-samples/cc/samples-cc-react-app/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const {merge} = require('webpack-merge');
 
-const baseConfig = require('../../webpack.config');
+const baseConfig = require('../../../webpack.config');
 
 module.exports = merge(baseConfig, {
   output: {
@@ -14,9 +14,9 @@ module.exports = merge(baseConfig, {
   },
   devServer: {
     static: {
-      directory: path.join(__dirname, 'public'),
+      directory: path.join(__dirname),
     },
-    open: true,
-    port: 3000,
+    open: false,
+    port: 4000,
   },
 });

docs/web-component-samples/app.js renamed to widgets-samples/cc/samples-cc-wc-app/app.js

@@ -48,8 +48,9 @@ <h2 class="page-header">Samples</h2>
               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>
+              <a href="http://localhost:4000/" target="_blank" rel="noopener noreferrer" class="list-group-item">Contact Center widgets as web-component</a>
+              <a href="http://localhost:3000/" target="_blank" rel="noopener noreferrer" class="list-group-item">Contact Center widgets in a react app</a>
+              <a href="https://localhost:9000/" target="_blank" rel="noopener noreferrer" class="list-group-item">Meetings widgets in a react app</a>
             </div>
           </div>
         </div>
@@ -60,7 +61,7 @@ <h2 class="page-header">Samples</h2>
         <div class="row">
           <div class="col-xs-12 col-md-12">
             <div class="copyright">
-              &copy; 2015-2024 Cisco and/or its affiliates. All Rights Reserved.
+              &copy; 2015-2025 Cisco and/or its affiliates. All Rights Reserved.
             </div>
           </div>
         </div>

docs/web-component-samples/index.html renamed to widgets-samples/cc/samples-cc-wc-app/index.html

@@ -0,0 +1,68 @@
+{
+  "name": "samples-meeting-app",
+  "version": "1.0.0",
+  "scripts": {
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "clean:dist": "rm -rf dist",
+    "build:src": "yarn clean:dist && webpack --mode production",
+    "build:watch": "webpack --mode production --watch",
+    "serve": "webpack serve --mode development"
+  },
+  "dependencies": {
+    "@webex/widgets": "workspace:*",
+    "prop-types": "^15.7.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "webex": "2.60.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-proposal-export-default-from": "^7.25.9",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-transform-regenerator": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.25.9",
+    "@types/babel__plugin-transform-runtime": "^7",
+    "@types/prop-types": "^15",
+    "babel-loader": "^9.2.1",
+    "buffer": "^6.0.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "crypto-browserify": "^3.12.1",
+    "css-loader": "^7.1.2",
+    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.3",
+    "node-sass": "^9.0.0",
+    "os-browserify": "^0.3.0",
+    "querystring-es3": "^0.2.1",
+    "sass-loader": "^16.0.4",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.6.3",
+    "url": "^0.11.4",
+    "util": "^0.12.5",
+    "vm-browserify": "^1.1.2",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0",
+    "webpack-merge": "6.0.1"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-export-default-from",
+      "@babel/plugin-proposal-nullish-coalescing-operator",
+      "@babel/plugin-proposal-object-rest-spread",
+      "@babel/plugin-proposal-optional-chaining",
+      "@babel/plugin-transform-regenerator",
+      "@babel/plugin-transform-runtime"
+    ]
+  }
+}

docs/web-component-samples/package.json renamed to widgets-samples/cc/samples-cc-wc-app/package.json

@@ -0,0 +1,86 @@
+import React, {useState} from 'react';
+import { createRoot } from 'react-dom/client';
+import {Button, Input, Checkbox} from '@momentum-ui/react';
+
+import WebexMeetingsWidgetDemo from './WebexMeetingsWidgetDemo';
+
+import '@webex/widgets/dist/css/webex-widgets.css';
+import '@momentum-ui/core/css/momentum-ui.min.css';
+import './App.scss';
+
+export default function App() {
+  const [tokenInput, setTokenInput] = useState('');
+  const [token, setToken] = useState();
+  const [fedramp, setFedramp] = useState(false);
+
+  const handleClearToken = (event) => {
+    event.preventDefault();
+    setTokenInput('');
+    setToken();
+  };
+
+  const handleUpdateInputToken = (event) => {
+    setTokenInput(event.target.value);
+  };
+
+  const handleSaveToken = (event) => {
+    event.preventDefault();
+    if(!tokenInput?.trim()) return;
+
+    setToken(tokenInput);
+  };
+
+  function handleFedrampChange() {
+    setFedramp(!fedramp);
+  }
+
+  return (
+    <>
+      <div className="content flex-column">
+        <section className="webex-section">
+          <h3>Webex Widgets Access Token</h3>
+          <h5>Webex Widgets require an access token to identify the current user.</h5>
+          <h5>
+            You can get an access token from{' '}
+            <a href={`https://developer${fedramp ? '-usgov' : ''}.webex.com`} target="_blank">
+              {`developer${fedramp ? '-usgov' : ''}.webex.com`}
+            </a>
+          </h5>
+          <form className="webex-form">
+            <Checkbox
+              checked={fedramp}
+              htmlId="fedrampCheckbox"
+              label="FedRAMP"
+              onChange={handleFedrampChange}
+              value="FedRAMP"
+              disabled={!!token}
+            />
+            <Input
+              htmlId="token"
+              label="Access Token"
+              name="token"
+              onChange={handleUpdateInputToken}
+              placeholder="Access Token"
+              readOnly={!!token}
+              type="password"
+              value={tokenInput}
+            />
+            <Button color="blue" type="submit" onClick={handleSaveToken} disabled={!!token} ariaLabel="Save Token">
+              Save Token
+            </Button>
+            <Button type="button" onClick={handleClearToken} disabled={!token} ariaLabel="Clear Token">
+              Clear Token
+            </Button>
+          </form>
+        </section>
+        <section className="webex-section fluid-height flex-column">
+          <WebexMeetingsWidgetDemo token={token} fedramp={fedramp} />
+        </section>
+      </div>
+    </>
+  );
+}
+
+const root = createRoot(document.getElementById('widgets-demo'));
+
+root.render(<App />);

docs/web-component-samples/src/index.ts renamed to widgets-samples/cc/samples-cc-wc-app/src/index.ts

@@ -0,0 +1,34 @@
+#widgets-demo {
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  .content {
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+
+    overflow: auto;
+  }
+
+  .webex-form {
+    margin: 1rem;
+  }
+
+  .webex-section {
+    background-color: white;
+    margin: 1rem 0;
+    padding: .5rem 1rem;
+    box-shadow: 0 0.0625rem 0.125rem 0 #C6C7CA;
+    border-radius: .25rem;
+  }
+
+  .flex-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .fluid-height {
+    flex: 1;
+  }
+}