CC-Widgets Packages setup #237

Shreyas281299 · 2024-11-05T15:18:52Z

COMPLETED https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-569253

Changes

Adds basic setup for widget

Functionalities

Adds ability to build providers - yarn build:providers
Adds ability to build widgets - yarn build:widgets
Adds ability to build both at once (providers should be built first) yarn run build
Adds ability to build samples, both react based samples and web-component- yarn run build:samples
Adds ability to run react samples- yarn samples:serve-react
Adds ability to run web-component samples - yarn samples:serve-wc
Adds ability to run tests(tests are only setup in widget-cc-station-login)

Testing

Built providers
Build widgets
Build samples
Ran samples
Ran test for widget-cc-station-login

coderabbitai · 2024-11-05T15:19:00Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

…-setup

Shreyas281299 · 2024-11-06T10:01:06Z

.babelrc.js

@@ -0,0 +1,7 @@
+module.exports = {


Created common babelrc which will be imported in each workspace. babelrc is required in each workspace to run jest tests

Shreyas281299 · 2024-11-06T10:01:21Z

.gitignore

@@ -43,6 +43,7 @@ reports/
 !.env.default
 !package.json
 !package-lock.json
+!tsconfig.json


tsconfig was getting ignore, was causing issues.

Shreyas281299 · 2024-11-06T10:12:17Z

docs/react-samples/package.json

@@ -0,0 +1,32 @@
+{


The sample app is also a workspace. This will allow us to easily link updated widgets locally.

All the files in this are demo, these will be updated when we add the actual implementation of these widgets.
We can still run and see the basic providers and widgets working and sharing states. Demo added in the desciption

Shreyas281299 · 2024-11-06T10:13:47Z

docs/react-samples/src/App.tsx

@@ -0,0 +1,15 @@
+import React from 'react';


Dummy code for a simple demo.

Shreyas281299 · 2024-11-06T10:14:11Z

docs/react-samples/webpack.config.js

+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {merge} = require('webpack-merge');
+
+const baseConfig = require('../../webpack.config');


Using base webpack config here also

Shreyas281299 · 2024-11-06T10:14:43Z

docs/web-component-samples/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>


This is a sample using web-components and NO react. Again dummy code to just show that widgets can be used as web-components

Shreyas281299 · 2024-11-06T10:15:28Z

package.json

+    "build": "yarn run build:providers && yarn run build:widgets",
+    "build:providers": "yarn workspace @webex/widget-provider build:src",
+    "build:widgets": "yarn workspace @webex/widget-cc-station-login build:src && yarn workspace @webex/widget-cc-user-state build:src",
+    "samples:build": "yarn workspace @webex/react-samples-app build:src && yarn workspace @webex/web-component-samples-app build:src",
+    "samples:serve-react": "yarn workspace @webex/react-samples-app serve",
+    "samples:serve-wc": "yarn workspace @webex/web-component-samples-app serve"


These scripts are similar to js-sdk, so that we dont have to memories a whole new set of commands

packages/@webex/widget-cc-station-login/.babelrc.js

arun3528

I dont think you have to follow the structure of packages/@webex structure here

yarn workspace can just relay on the folder structure like widgets/cc-station-login etc

the npm package where you are going to publish can be @webex/cc-station-login

The naming looks little messed up i know we did not follow this on the sdk side

.gitignore

packages/@webex/widget-cc-station-login/src/hooks.ts

packages/@webex/widget-cc-station-login/src/station-login/index.tsx

packages/@webex/widget-provider/package.json

packages/@webex/widget-provider/src/store.ts

docs/web-component-samples/src/index.ts

packages/@webex/widget-cc-station-login/.babelrc.js

packages/@webex/widget-cc-station-login/src/hooks.ts

package.json

packages/@webex/widget-cc-station-login/src/station-login/index.tsx

packages/@webex/widget-cc-user-state/src/user-state/user-state.presentational.tsx

packages/@webex/widget-provider/package.json

packages/@webex/widgets/package.json

packages/@webex/widget-cc-station-login/src/hooks.ts

packages/@webex/widget-cc-station-login/src/station-login/station-login.types.ts

package.json

packages/@webex/widget-cc-station-login/tests/station-login/station-login.hooks.ts

packages/@webex/widget-cc-station-login/.babelrc.js

packages/@webex/widget-cc-station-login/src/station-login/index.tsx

packages/@webex/widget-cc-station-login/tsconfig.json

mkesavan13 · 2024-11-12T12:53:00Z

packages/@webex/widget-cc-station-login/webpack.config.js

+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js', // Set the output filename to index.js
+    libraryTarget: 'commonjs2',
+  },


Let's move these to global webpack config itself and if there's a need to change, we will override in this file as and when required

moved to global config

packages/@webex/widgets-store/package.json

Shreyas281299 · 2024-11-12T14:02:45Z

I dont think you have to follow the structure of packages/@webex structure here

yarn workspace can just relay on the folder structure like widgets/cc-station-login etc

the npm package where you are going to publish can be @webex/cc-station-login

The naming looks little messed up i know we did not follow this on the sdk side

Moved the cc-widgets out of @webex folder.

arun3528 · 2024-11-12T15:29:27Z

@Shreyas281299 @mkesavan13 i am still not sure about the folder structure and the naming we have to make it little meaningful

one thing is like naming as its in widgets folder and repo we dont have to add workd widget-cc word all the time could be just cc-stationLogin

you can also change the @webex/widget folder as well if needed

Shreyas281299 · 2024-11-13T07:11:22Z

@Shreyas281299 @mkesavan13 i am still not sure about the folder structure and the naming we have to make it little meaningful

one thing is like naming as its in widgets folder and repo we dont have to add workd widget-cc word all the time could be just cc-stationLogin

you can also change the @webex/widget folder as well if needed

Moved widgets inside a contact-center folder
renamed all the widgets to 'cc-X'

sreenara · 2024-11-18T14:00:54Z

🎉 This PR is included in version 1.28.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

sreenara · 2024-11-18T14:15:40Z

🎉 This PR is included in version 1.28.0-eft-pipeline.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

sreenara · 2024-11-19T07:45:10Z

🎉 This PR is included in version 1.27.6-eft.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

sreenara · 2024-11-21T06:13:47Z

🎉 This PR is included in version 1.27.6-eft.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

sreenara · 2024-11-21T06:29:28Z

🎉 This PR is included in version 1.28.0-wxcc.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

sreenara · 2024-11-21T12:44:25Z

🎉 This PR is included in version 1.28.0-ccwidgets.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

sreenara · 2025-02-05T11:42:45Z

🎉 This PR is included in version 1.28.0-ccconnectors.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

mkesavan13 and others added 16 commits October 21, 2024 12:56

fix: convert npm to yarn

383aafc

Merge remote-tracking branch 'upstream/master' into convert_to_yarn

520fac9

fix: yarn lock

a9d5669

fix: rename folder to match package name

c9fe972

fix: move to yarn 4.5.1

6d24f89

fix: nitpick self review comments

09adcc5

feat(cc-widgets): inital-packages-setup

debdaaa

fix(cc-widgets): move-widgets-inside-webex-folder

f775ae2

fix(cc-widgets): remove-yarn-changes

11a111b

fix(cc-widgets): added-babel-webpack-configs

840074c

feat(setup): update-setup

72173d2

fix(cc-widgets): add-react-w2x-and-mobx

f195b14

feat(cc-widgets): add-tests-for-widgets

d8309fe

feat(react-samples): add-widgets-samples-with-react

5ce6996

feat(cc-widgets): samples-app-for-widgets-as-web-component

6505954

fix(cc-widgets): review-comments

e1ca859

Merge remote-tracking branch 'upstream/feat/cc-widgets' into packages…

842e311

…-setup

Shreyas281299 force-pushed the packages-setup branch from 06b21fa to 842e311 Compare November 5, 2024 15:24

ShreyasSharma28 added 2 commits November 6, 2024 15:11

fix(cc-widgets): create-common-webpack-config

0aa1ad6

fix(cc-widgets): add-ts-doc-fix-babelrc

dd165c9

Shreyas281299 commented Nov 6, 2024

View reviewed changes

fix(cc-widgets): minor-fixes

e3d4569

Shreyas281299 commented Nov 6, 2024

View reviewed changes

docs/react-samples/src/App.tsx

@@ -0,0 +1,15 @@

import React from 'react';

Copy link

Author

Shreyas281299 Nov 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dummy code for a simple demo.

Shreyas281299 commented Nov 6, 2024

View reviewed changes

packages/@webex/widget-cc-station-login/.babelrc.js Outdated Show resolved Hide resolved

arun3528 requested changes Nov 6, 2024

View reviewed changes

arun3528 reviewed Nov 6, 2024

View reviewed changes

.gitignore Show resolved Hide resolved

arun3528 reviewed Nov 6, 2024

View reviewed changes

fix(webpack): remove-react-react-dom-as-external

e0646ad

mkesavan13 requested changes Nov 11, 2024

View reviewed changes

Kesari3008 reviewed Nov 11, 2024

View reviewed changes

packages/@webex/widget-cc-station-login/src/hooks.ts Outdated Show resolved Hide resolved

packages/@webex/widget-cc-station-login/src/station-login/station-login.types.ts Outdated Show resolved Hide resolved

ShreyasSharma28 added 2 commits November 12, 2024 00:03

feat(cc-widgets): review-comments

b6a0f69

feat(cc-widgets): add-home-page-for-samples

1cfd42a

mkesavan13 requested changes Nov 12, 2024

View reviewed changes

fix(cc-widgets): move-packages-out-of-webex-review-comments

d40fc0e

ShreyasSharma28 added 3 commits November 12, 2024 23:20

fix(samples): adjust-tsconfig

3b548ff

fix(cc-widgets): revert-config-changes

fbbb430

feat(cc-widgets): change-folder-structure

fca23fa

mkesavan13 approved these changes Nov 13, 2024

View reviewed changes

mkesavan13 merged commit 09961ba into webex:feat/cc-widgets Nov 13, 2024
2 checks passed

sreenara added the released on @eft-pipeline label Nov 18, 2024

sreenara added the released on @eft label Nov 19, 2024

sreenara added the released on @feat/cc-widgets label Nov 21, 2024

sreenara added the released on @ccwidgets label Nov 21, 2024

sreenara added the released on @ccconnectors label Feb 5, 2025

CC-Widgets Packages setup #237

CC-Widgets Packages setup #237

Uh oh!

Conversation

Shreyas281299 commented Nov 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

COMPLETED https://jira-eng-gpk2.cisco.com/jira/browse/SPARK-569253

Changes

Functionalities

Testing

Uh oh!

coderabbitai bot commented Nov 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shreyas281299 Nov 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

arun3528 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Shreyas281299 commented Nov 12, 2024

Uh oh!

arun3528 commented Nov 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Shreyas281299 commented Nov 13, 2024

Uh oh!

Uh oh!

sreenara commented Nov 18, 2024

Uh oh!

sreenara commented Nov 18, 2024

Uh oh!

sreenara commented Nov 19, 2024

Shreyas281299 commented Nov 5, 2024 •

edited

Loading

coderabbitai bot commented Nov 5, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

Shreyas281299 Nov 6, 2024 •

edited

Loading

arun3528 commented Nov 12, 2024 •

edited

Loading