We'd love for you to contribute to our source code and to make Webex Widgets even better than they are today! If you would like to contribute to this repository by adding features, enhancements or bug fixes, you must follow our process:
- Create an issue to propose your solution before you get coding
- Let core members know about your proposal by posting a message in the contributor's Webex space
- A core member will review your proposal and if necessary may suggest to have a meeting to better understand your approach
- You are welcomed you join our weekly review meeting (Thursdays, 11:30a-12:30p PST) to propose your contribution as well
- If your proposal is approved you should start coding at this point
- We recommend opening a draft PR to receive feedback before finalizing your solution
- When opening a draft PR, specify with PR comments where in the code you would like to get feedback
- Before opening a PR ensure all PR guidelines are followed
- Let core members know about your PR by posting a message in the contributor's Webex space
- Core members will review the pull request and provide feedback when necessary
- If a PR is too large, you may be asked to break it down into multiple smaller-scoped PRs
- Once the PR is approved by a core member, it will be merged
- Celebrate! Your code is released 🎈🎉🍻
The title of a Bug or Enhancement should clearly indicate what is broken or desired. Use the description to explain possible solutions or add details and (especially for Enhancements) explain how or why the issue is broken or desired. Follow the template!
While quibbling about grammar in issue titles may seem a bit pedantic, adhering to some simple rules can make it much easier to understand a Bug or an Enhancement from the title alone. For example, is the title "Browsers should support blinking text" a bug or a feature request?
- Enhancements: The title should be an imperative statement of how things should be. "Add support for blinking text"
- Bugs: The title should be a declarative statement of how things are. "Text does not blink"
Pull requests must include code documentation, tests, follow code style and commits format.
All methods, functions and object structures should be documented following JSDoc style comments.
We take testing very seriously, all code changes must include unit, integration and end-to-end tests.
- Unit: Tests at the file level with mocked external requests
- Integration: Tests at the application level with mocked I/O requests
- End-to-end: Tests the application in a system
Code style is enforced by linters. Use npm run test:eslint
to verify that your code is beautiful, too!
We highly discourage disabling eslint rules.
Unless there is an exceptional use case, we may request additional changes to your PR.
As part of the build process, commits are run through conventional changelog to generate the changelog. Please adhere to the following guidelines when formatting your commit messages.
Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject:
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
The header is mandatory and the scope of the header is optional.
Any line of the commit message cannot be longer 79 characters! This allows the message to be easier to read on GitHub as well as in various git tools.
If the commit reverts a previous commit, it should begin with revert:
, followed by the header of the reverted commit.
In the body it should say: This reverts commit <hash>
., where the hash is the SHA of the commit being reverted.
The body should also explain why the commit was reverted.
Must be one of the following:
- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- ci: Changes to our CI configuration files and scripts (example scopes: Circle, BrowserStack, SauceLabs)
- docs: Documentation only changes
- feat: A new feature
- fix: A bug fix
- perf: A code change that improves performance
- refactor: A code change that neither fixes a bug nor adds a feature
- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- test: Adding missing tests or correcting existing tests
The scope should indicate what is being changed. Generally, these should match widgets names. For example, WebexMeetingWidget
, etc. Other than those, tooling
tends to be the most common.
The subject contains succinct description of the change:
- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize first letter
- no dot (.) at the end
Just as in the subject the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.
The footer should contain any information about Breaking changes and is also the place to reference GitHub issues that this commit closes.
Breaking Changes should start with the word BREAKING CHANGE:
with a space or two newlines. The rest of the commit message is then used for this.
While the complete list of commit types is provided in the above Type section,
not all commits trigger our release process.
We use semantic-release to fully automate the version management
and package publishing.
By default semantic-release
uses the
Angular commit message conventions
and triggers release and publishing based on the following rules:
Commit | Release type |
---|---|
Commit with type BREAKING CHANGE |
Major release |
Commit with type feat |
Minor release |
Commit with type fix |
Patch release |
Commit with type perf |
Patch release |
When contributing to one of the dependent repositories like components or the sdk-component-adapter, it may be helpful to be able to test changes in the dependent repository on "real-life" scenarios like in the Meeting widget.
In order to test such changes:
- Clone widgets and the dependent repositories
- List the dependent package as a local dependency
Below you can find sample steps for linking a local components
package to the widgets
repository:
-
Clone
components
repository.git clone git@github.com:webex/components.git
-
Build
components
code. This will generate adist
foldercd components npm install npx npm-install-peers (This is required to install peer dependencies if npm version is lower than 7) npm run build
-
Change dependency location in
package.json
and install it"@webex/components": "file:../components", // Or corresponding path to local clone npm install
-
Install peer dependencies of
widgets
repository and the react dependency (this is required becausecomponents
repository uses react)npx npm-install-peers npm link ../components/node_modules/react
-
Start up the widget sample
npm run start
Keep in mind that for every modification made in components
/sdk-component-adapter
, you need
to run npm run build
in the dependent repo.