Webex Components is a set of React components following Webex standard styling, aimed at react developers that want to embed the components into their applications.
We use Storybook to showcase all supported components. Our Storybook can be found at https://webex.github.io/components/storybook.
npm install --save @webex/components rxjsIn order to properly style Webex Components, we need to import all the fonts, icons, images and core CSS manually.
Import @webex/components/dist/webexComponents.css into your main entry file.
There are two ways to do this:
In your index.js, add the following import:
import '@webex/components/dist/webexComponents.css';
...In the <head> of your index.html, add the following import:
<head>
...
<link rel="stylesheet" type="text/css" href="node_modules/@webex/components/dist/webexComponents.css" />
</head>Webex Components are self-updating, meaning, they know how to fetch the data they need. Data is passed to components via adapter classes (see adapters). Adapters are an uniform interface for the Webex Components to consume. They also know how to map the data from their data source to the data the components need.
To use a Webex Component, start by creating a Webex Adapter:
import {WebexJSONAdapter} from '@webex/components';
const adapter = new WebexJSONAdapter(jsonData);Adapters may interact with different data source types. For instance, as part of the Webex Component repository we distribute a JSON adapter that reads data from JSON files. We also are working on offering an adapter for the Webex browser SDK.
Putting everything together - styles, adapters and components - this is a simple example of how using a component would look like:
import '@webex/components/dist/webexComponents.css';
import React from 'react';
import ReactDOM from 'react-dom';
import {WebexAvatar, WebexDataProvider, WebexJSONAdapter} from '@webex/components';
const adapter = new WebexJSONAdapter(jsonData); // jsonData represents an opened file
ReactDOM.render(
<WebexDataProvider adapter={adapter}>
<WebexAvatar personID="XYZ" />,
</WebexDataProvider>
document.getElementById('root')
);Happy Coding!
We'd love for you to contribute to our source code and to make Webex Components even better than it is today! Here are some guidelines that we'd like you to follow.
Please open an issue and we will get to it in an orderly manner. Please leave as much as information as possible for a better understanding.
We are using Webex Style Guide eslint rule and prettier to lint the code style. You can "prettify" your code before committing via:
npm run prettier:writeThere is a list of commit types provided here. However, not all commits trigger our release process.
We are using 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 |
We are using commitlint to lintify the commit messages. Please make sure to choose the appropriate commit type, scope and subject.
For more developer resources, tutorials and support, visit the Webex developer portal, https://developer.webex.com.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Adam Weeks | Arash Koushkebaghi | Lalli Flores | Timothy Scheuering | David Hoff |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent