Vivid-react is a script allowing you to generate Vivid-React components for the newest version of Vivid components stored as a package with all necessary dependencies and available through Artifactory npm registry.
The main goal of output package is to provide a better developer experience when using Vivid inside of React typescript applications. We still use regular Vivid web components, so be sure to target a recent browser.
Goals:
- wrap adding handlers for events like
changewhich natively doesn't work in the environment - mocks for Jest
- typing support (prop-types or typescript)
- a handy interface for initialisation (eg. fonts)
- getting advantages of JSX/TSX (eg. composed components*)
- all components within one package**
- storybook acting as developer sandbox for presenting quick examples
- one place for all future vivid-related code to use with React
*may provide a cut off at props inherited from MWC source.
**now also implemented in raw Vivid.
Here's the list of all available wrappers, with the Vivid package name and version used to generate each one.
If you need to use a different version of a Vivid component, simply add it to your application's package.json.
Adding the resolutions field when using yarn might help get the correct version installed.
| Component Name | Package Name | Package Version |
|---|---|---|
| VwcAccordion | @vonage/vwc-accordion | 2.45.0 |
| VwcActionGroup | @vonage/vwc-action-group | 2.45.0 |
| VwcBadge | @vonage/vwc-badge | 2.45.0 |
| VwcBanner | @vonage/vwc-banner | 2.45.0 |
| VwcButton | @vonage/vwc-button | 2.45.0 |
| VwcButtonToggleGroup | @vonage/vwc-button-toggle-group | 2.45.0 |
| VwcCalendar | @vonage/vwc-calendar | 2.45.0 |
| VwcCard | @vonage/vwc-card | 2.45.0 |
| VwcCarousel | @vonage/vwc-carousel | 2.45.0 |
| VwcCheckbox | @vonage/vwc-checkbox | 2.45.0 |
| VwcChips | @vonage/vwc-chips | 2.45.0 |
| VwcCircularProgress | @vonage/vwc-circular-progress | 2.45.0 |
| VwcDataGrid | @vonage/vwc-data-grid | 2.45.0 |
| VwcDatepicker | @vonage/vwc-datepicker | 2.45.0 |
| VwcDropdown | @vonage/vwc-dropdown | 2.45.0 |
| VwcElevation | @vonage/vwc-elevation | 2.45.0 |
| VwcEmptyState | @vonage/vwc-empty-state | 2.45.0 |
| VwcExpansionPanel | @vonage/vwc-expansion-panel | 2.45.0 |
| VwcFab | @vonage/vwc-fab | 2.45.0 |
| VwcFilePicker | @vonage/vwc-file-picker | 2.45.0 |
| VwcFormfield | @vonage/vwc-formfield | 2.45.0 |
| VwcHelperMessage | @vonage/vwc-helper-message | 2.45.0 |
| VwcIcon | @vonage/vwc-icon | 2.45.0 |
| VwcIconButton | @vonage/vwc-icon-button | 2.45.0 |
| VwcIconButtonToggle | @vonage/vwc-icon-button-toggle | 2.45.0 |
| VwcKeypad | @vonage/vwc-keypad | 2.45.0 |
| VwcLayout | @vonage/vwc-layout | 2.45.0 |
| VwcLinearProgress | @vonage/vwc-linear-progress | 2.45.0 |
| VwcList | @vonage/vwc-list | 2.45.0 |
| VwcMediaController | @vonage/vwc-media-controller | 2.45.0 |
| VwcMenu | @vonage/vwc-menu | 2.45.0 |
| VwcNotchedOutline | @vonage/vwc-notched-outline | 2.45.0 |
| VwcNote | @vonage/vwc-note | 2.45.0 |
| VwcPagination | @vonage/vwc-pagination | 2.45.0 |
| VwcPopup | @vonage/vwc-popup | 2.45.0 |
| VwcRadio | @vonage/vwc-radio | 2.45.0 |
| VwcSchemeSelect | @vonage/vwc-scheme-select | 2.45.0 |
| VwcSelect | @vonage/vwc-select | 2.45.0 |
| VwcSlider | @vonage/vwc-slider | 2.45.0 |
| VwcSnackbar | @vonage/vwc-snackbar | 2.45.0 |
| VwcSurface | @vonage/vwc-surface | 2.45.0 |
| VwcSwitch | @vonage/vwc-switch | 2.45.0 |
| VwcTabBar | @vonage/vwc-tab-bar | 2.45.0 |
| VwcTags | @vonage/vwc-tags | 2.45.0 |
| VwcText | @vonage/vwc-text | 2.45.0 |
| VwcTextarea | @vonage/vwc-textarea | 2.45.0 |
| VwcTextfield | @vonage/vwc-textfield | 2.45.0 |
| VwcThemeSwitch | @vonage/vwc-theme-switch | 2.45.0 |
| VwcTooltip | @vonage/vwc-tooltip | 2.45.0 |
| VwcTopAppBar | @vonage/vwc-top-app-bar | 2.45.0 |
| VwcTopAppBarFixed | @vonage/vwc-top-app-bar-fixed | 2.45.0 |
If the one you're looking for is missing, just add a new one, so everyone can access them.
Just run:
$ yarn add @vonage/vivid-reactNo need for importing vivid directly. The dependencies will be installed for you.
import ReactDOM from 'react-dom'
import { initVivid } from '@vonage/vivid-react'
const rootElement = document.getElementById('react-root')
const renderApp = () => {
// do some more initialization before rendering the main App
ReactDOM.render(
<App />,
rootElement
)
}
// for Vivid 2.x
initVivid(rootElement).then(renderApp)
// OR
// for Vivid 2.x + Vivid 3.x
initVivid(rootElement, () => {}, {
font: 'oss',
theme: 'light'
}).then(renderApp)For vivid 2.x
Instead of importing each vivid component from @vonage/vwc-*, import them from @vonage/vivid-react instead.
import VwcCheckbox from '@vonage/vivid-react/VwcCheckbox'
import VwcSlider from '@vonage/vivid-react/VwcSlider'For vivid 3.x
import VwcCheckbox from '@vonage/vivid-react/v3/VwcCheckbox'
import VwcSlider from '@vonage/vivid-react/v3/VwcSlider'This package is an ES module, so you might need to add some configuration to your bundling process.
If you have problems rendering vivid when using Jest/Enzyme combo, you can add this to your package.json to replace all Vivid wrapped components with an empty React component.
It'll work also for raw vivid components used in project, since js-dom doesn't support shadow DOM.
{
"jest": {
"moduleNameMapper": {
"@vonage\/(vwc|vvd)": "@vonage/vivid-react/testing/component.mock.js"
},
"transformIgnorePatterns": [
"node_modules/(?!(@cct|@vonage|@lit|lit-html|lit-element)/)"
]
}
}Follow the steps:
- clone this repo
- create a branch
- add the missing vivid component as a
dependencyinpackage.json - create a new PR and get it merged to
master - publish new version
- install the new package in your application
When you want to release the latest changes, checkout the latest master branch and run:
$ yarn version --new-version {minor/major/patch}patch- fixing some small issue, without new functionalityminor- after adding support for a new component, or adding a new awesome featuremajor- after breaking or major package changes
For test/development storybook is in game. Stories are generated automatically per component with no arguments/properties, fill them before using component.
In the scripts/generateWrappers/consts.js you can define sets of compound components. All they do is filling default props. They are accessible after a dot:
<VwcButton.Alert />This is the end