@vonage/vivid-react 0.0.1 → 2.10.47

package/README.md

@@ -0,0 +1,183 @@
+# @vonage/vivid-react
+
+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 `change` which 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.
+
+# Similar strongly typed wrappers for other frameworks?
+* https://github.com/Vonage/vivid-vue
+
+# Why is this repository exists?
+
+[![Using Web Components in React - Web Component Essentials](https://img.youtube.com/vi/o1dMXrIv3Q8/0.jpg)](https://www.youtube.com/watch?v=o1dMXrIv3Q8)
+
+## Supported components
+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.37.0 |
+| VwcActionGroup | @vonage/vwc-action-group | 2.37.0 |
+| VwcBadge | @vonage/vwc-badge | 2.37.0 |
+| VwcBanner | @vonage/vwc-banner | 2.37.0 |
+| VwcButton | @vonage/vwc-button | 2.37.0 |
+| VwcButtonToggleGroup | @vonage/vwc-button-toggle-group | 2.37.0 |
+| VwcCalendar | @vonage/vwc-calendar | 2.37.0 |
+| VwcCard | @vonage/vwc-card | 2.37.0 |
+| VwcCarousel | @vonage/vwc-carousel | 2.37.0 |
+| VwcCheckbox | @vonage/vwc-checkbox | 2.37.0 |
+| VwcChips | @vonage/vwc-chips | 2.37.0 |
+| VwcCircularProgress | @vonage/vwc-circular-progress | 2.37.0 |
+| VwcDataGrid | @vonage/vwc-data-grid | 2.37.0 |
+| VwcDatepicker | @vonage/vwc-datepicker | 2.37.0 |
+| VwcDialog | @vonage/vwc-dialog | 2.37.0 |
+| VwcDrawer | @vonage/vwc-drawer | 2.37.0 |
+| VwcDropdown | @vonage/vwc-dropdown | 2.37.0 |
+| VwcElevation | @vonage/vwc-elevation | 2.37.0 |
+| VwcEmptyState | @vonage/vwc-empty-state | 2.37.0 |
+| VwcExpansionPanel | @vonage/vwc-expansion-panel | 2.37.0 |
+| VwcFab | @vonage/vwc-fab | 2.37.0 |
+| VwcFilePicker | @vonage/vwc-file-picker | 2.37.0 |
+| VwcFormfield | @vonage/vwc-formfield | 2.37.0 |
+| VwcHelperMessage | @vonage/vwc-helper-message | 2.37.0 |
+| VwcIcon | @vonage/vwc-icon | 2.37.0 |
+| VwcIconButton | @vonage/vwc-icon-button | 2.37.0 |
+| VwcIconButtonToggle | @vonage/vwc-icon-button-toggle | 2.37.0 |
+| VwcKeypad | @vonage/vwc-keypad | 2.37.0 |
+| VwcLayout | @vonage/vwc-layout | 2.37.0 |
+| VwcLinearProgress | @vonage/vwc-linear-progress | 2.37.0 |
+| VwcList | @vonage/vwc-list | 2.37.0 |
+| VwcMenu | @vonage/vwc-menu | 2.37.0 |
+| VwcNotchedOutline | @vonage/vwc-notched-outline | 2.37.0 |
+| VwcNote | @vonage/vwc-note | 2.37.0 |
+| VwcPagination | @vonage/vwc-pagination | 2.37.0 |
+| VwcPopup | @vonage/vwc-popup | 2.37.0 |
+| VwcRadio | @vonage/vwc-radio | 2.37.0 |
+| VwcSchemeSelect | @vonage/vwc-scheme-select | 2.37.0 |
+| VwcSelect | @vonage/vwc-select | 2.37.0 |
+| VwcSideDrawer | @vonage/vwc-side-drawer | 2.37.0 |
+| VwcSlider | @vonage/vwc-slider | 2.37.0 |
+| VwcSnackbar | @vonage/vwc-snackbar | 2.37.0 |
+| VwcSurface | @vonage/vwc-surface | 2.37.0 |
+| VwcSwitch | @vonage/vwc-switch | 2.37.0 |
+| VwcTabBar | @vonage/vwc-tab-bar | 2.37.0 |
+| VwcTags | @vonage/vwc-tags | 2.37.0 |
+| VwcText | @vonage/vwc-text | 2.37.0 |
+| VwcTextarea | @vonage/vwc-textarea | 2.37.0 |
+| VwcTextfield | @vonage/vwc-textfield | 2.37.0 |
+| VwcThemeSwitch | @vonage/vwc-theme-switch | 2.37.0 |
+| VwcTooltip | @vonage/vwc-tooltip | 2.37.0 |
+| VwcTopAppBar | @vonage/vwc-top-app-bar | 2.37.0 |
+| VwcTopAppBarFixed | @vonage/vwc-top-app-bar-fixed | 2.37.0 |
+
+If the one you're looking for is missing, just [add a new one](#adding-a-component), so everyone can access them.
+
+# Usage
+
+## Artifactory
+To use this package, you need to have Artifactory setup for your project. See how to do it [here](https://confluence.vonage.com/pages/viewpage.action?pageId=123601806) and [here](https://github.com/newvoicemedia/vonage-cli/blob/master/pipeline-guide/how-to/NODEJS-NPM-DEVELOPMENT.md). 
+
+## Installation
+Once you have Artifactory configured, just run:
+```shell
+$ yarn add @vonage/vivid-react
+```
+No need for importing `vivid` directly. The dependencies will be installed for you.
+ 
+## Initialization
+
+```javascript
+// Function
+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
+  )
+}
+
+initVivid(rootElement).then(renderApp)
+```
+ 
+## Importing
+Instead of importing each `vivid` component from `@vonage/vwc-*`, import them from `@vonage/vivid-react` instead. 
+```javascript
+import VwcCheckbox from '@vonage/vivid-react/VwcCheckbox'
+import VwcSlider from '@vonage/vivid-react/VwcSlider'
+```
+
+## Bundling
+This package is an ES module, so you might need to add some configuration to your bundling process.
+
+## Testing
+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.
+
+```json
+{
+  "jest": {
+    "moduleNameMapper": {
+      "@vonage\/vwc": "@vonage/vivid-react/testing/component.mock.js"
+    },
+  "transformIgnorePatterns": [
+      "node_modules/(?!(@cct|@vonage|@lit|lit-html|lit-element)/)"
+    ]
+  }
+}
+```
+
+# Development
+
+## Adding a component 
+Follow the steps:
+* clone this repo
+* create a branch
+* add the missing vivid component as a `dependency` in `package.json`
+* create a new PR and get it merged to `master`
+* [publish](#publishing-a-new-version) new version
+* install the new package in your application
+
+## Publishing a new version
+When you want to release the latest changes, checkout the latest `master` branch and run:
+
+```shell
+$ yarn version --new-version {minor/major/patch}
+```
+
+### Selecting new version number:
+- `patch` - fixing some small issue, without new functionality
+- `minor` - after adding support for a new component, or adding a new awesome feature
+- `major` - after breaking or major package changes
+
+## Storybook
+
+For test/development storybook is in game. Stories are generated automatically per component
+with no arguments/properties, fill them before using component.
+
+## Compound Components
+
+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:
+```javascript
+<VwcButton.Alert />
+```
+
+*This is the end*

package/VwcAccordion/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import '@vonage/vwc-accordion';
+/**
+* @param {boolean} multi  attribute: <VwcAccordion multi />
+*/
+declare const VwcAccordion: (props: {
+    children?: ReactNode;
+    slot?: string | undefined;
+    id?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    multi?: boolean | undefined;
+}) => JSX.Element;
+export default VwcAccordion;

package/VwcAccordion/index.js

@@ -0,0 +1,59 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "name": "vwc-accordion",
+ "path": "./../node_modules/@vonage/vwc-accordion/src/vwc-accordion.ts",
+ "attributes": [
+  {
+   "name": "multi",
+   "type": "boolean",
+   "default": "false"
+  }
+ ],
+ "properties": [
+  {
+   "name": "styles",
+   "type": "CSSResult",
+   "default": "\"style\""
+  },
+  {
+   "name": "multi",
+   "attribute": "multi",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  }
+ ],
+ "events": []
+}
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+import '@vonage/vwc-accordion'
+
+
+/**  
+* @param {boolean} multi  attribute: <VwcAccordion multi />
+*/
+const VwcAccordion = wrapper('vwc-accordion',  {
+    events: [],
+    attributes: [],
+    properties: []
+});
+
+VwcAccordion.propTypes = {
+  multi: PropTypes.bool/* default: false *//* attribute: multi */
+}
+
+VwcAccordion.defaultProps = {
+  multi: false
+}
+
+VwcAccordion.displayName = 'VwcAccordion'
+
+
+
+export default VwcAccordion

package/VwcAccordion/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vwc-accordion",
+  "version": "2.10.47",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vwc-accordion": "2.37.0"
+  }
+}

package/VwcActionGroup/index.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import '@vonage/vwc-action-group';
+/** Represents an action-group custom element.
+* @param {ActionGroupShape | undefined} shape  attribute: <VwcActionGroup shape />
+* @param {ActionGroupLayout | undefined} layout  attribute: <VwcActionGroup layout />
+* @param {boolean} tight  attribute: <VwcActionGroup tight />
+*/
+declare const VwcActionGroup: (props: {
+    children?: ReactNode;
+    slot?: string | undefined;
+    id?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    shape?: any;
+    layout?: any;
+    tight?: boolean | undefined;
+}) => JSX.Element;
+export default VwcActionGroup;

package/VwcActionGroup/index.js

@@ -0,0 +1,90 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "name": "vwc-action-group",
+ "path": "./../node_modules/@vonage/vwc-action-group/src/vwc-action-group.ts",
+ "description": "Represents an action-group custom element.",
+ "attributes": [
+  {
+   "name": "shape",
+   "type": "ActionGroupShape | undefined"
+  },
+  {
+   "name": "layout",
+   "type": "ActionGroupLayout | undefined"
+  },
+  {
+   "name": "tight",
+   "type": "boolean",
+   "default": "false"
+  }
+ ],
+ "properties": [
+  {
+   "name": "styles",
+   "type": "CSSResult",
+   "default": "\"style\""
+  },
+  {
+   "name": "shape",
+   "attribute": "shape",
+   "type": "ActionGroupShape | undefined",
+   "bindable": false
+  },
+  {
+   "name": "layout",
+   "attribute": "layout",
+   "type": "ActionGroupLayout | undefined",
+   "bindable": false
+  },
+  {
+   "name": "tight",
+   "attribute": "tight",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  }
+ ],
+ "slots": [
+  {
+   "name": "",
+   "description": "This is a default/unnamed slot to assign text content. *deprecated* please use _text_ property instead"
+  }
+ ],
+ "events": []
+}
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+import '@vonage/vwc-action-group'
+
+
+/** Represents an action-group custom element. 
+* @param {ActionGroupShape | undefined} shape  attribute: <VwcActionGroup shape />
+* @param {ActionGroupLayout | undefined} layout  attribute: <VwcActionGroup layout />
+* @param {boolean} tight  attribute: <VwcActionGroup tight />
+*/
+const VwcActionGroup = wrapper('vwc-action-group',  {
+    events: [],
+    attributes: [],
+    properties: []
+});
+
+VwcActionGroup.propTypes = {
+  shape: PropTypes.any /* ActionGroupShape | undefined *//* attribute: shape */,
+  layout: PropTypes.any /* ActionGroupLayout | undefined *//* attribute: layout */,
+  tight: PropTypes.bool/* default: false *//* attribute: tight */
+}
+
+VwcActionGroup.defaultProps = {
+  tight: false
+}
+
+VwcActionGroup.displayName = 'VwcActionGroup'
+
+
+
+export default VwcActionGroup

package/VwcActionGroup/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vwc-action-group",
+  "version": "2.10.47",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vwc-action-group": "2.37.0"
+  }
+}

package/VwcBadge/index.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import '@vonage/vwc-badge';
+/** Represents a badge custom element.
+badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink.
+* @param {BadgeConnotation | undefined} connotation  attribute: <VwcBadge connotation />
+* @param {BadgeShape | undefined} shape  attribute: <VwcBadge shape />
+* @param {BadgeLayout | undefined} layout  attribute: <VwcBadge layout />
+* @param {boolean} dense  attribute: <VwcBadge dense />
+* @param {boolean} enlarged  attribute: <VwcBadge enlarged />
+* @param {string | undefined} text  attribute: <VwcBadge text />
+* @param {string | undefined} icon  attribute: <VwcBadge icon />
+* @param {string | undefined} iconTrailing  attribute: <VwcBadge iconTrailing />
+*/
+declare const VwcBadge: (props: {
+    children?: ReactNode;
+    slot?: string | undefined;
+    id?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    connotation?: any;
+    shape?: any;
+    layout?: any;
+    dense?: boolean | undefined;
+    enlarged?: boolean | undefined;
+    text?: string | undefined;
+    icon?: string | undefined;
+    iconTrailing?: string | undefined;
+}) => JSX.Element;
+export default VwcBadge;

package/VwcBadge/index.js

@@ -0,0 +1,154 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "name": "vwc-badge",
+ "path": "./../node_modules/@vonage/vwc-badge/src/vwc-badge.ts",
+ "description": "Represents a badge custom element.\nbadge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink.",
+ "attributes": [
+  {
+   "name": "connotation",
+   "type": "BadgeConnotation | undefined"
+  },
+  {
+   "name": "shape",
+   "type": "BadgeShape | undefined"
+  },
+  {
+   "name": "layout",
+   "type": "BadgeLayout | undefined"
+  },
+  {
+   "name": "dense",
+   "type": "boolean",
+   "default": "false"
+  },
+  {
+   "name": "enlarged",
+   "type": "boolean",
+   "default": "false"
+  },
+  {
+   "name": "text",
+   "type": "string | undefined"
+  },
+  {
+   "name": "icon",
+   "type": "string | undefined"
+  },
+  {
+   "name": "iconTrailing",
+   "type": "string | undefined"
+  }
+ ],
+ "properties": [
+  {
+   "name": "styles",
+   "type": "CSSResult",
+   "default": "\"style\""
+  },
+  {
+   "name": "connotation",
+   "attribute": "connotation",
+   "type": "BadgeConnotation | undefined",
+   "bindable": false
+  },
+  {
+   "name": "shape",
+   "attribute": "shape",
+   "type": "BadgeShape | undefined",
+   "bindable": false
+  },
+  {
+   "name": "layout",
+   "attribute": "layout",
+   "type": "BadgeLayout | undefined",
+   "bindable": false
+  },
+  {
+   "name": "dense",
+   "attribute": "dense",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  },
+  {
+   "name": "enlarged",
+   "attribute": "enlarged",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  },
+  {
+   "name": "text",
+   "attribute": "text",
+   "type": "string | undefined",
+   "bindable": false
+  },
+  {
+   "name": "icon",
+   "attribute": "icon",
+   "type": "string | undefined",
+   "bindable": false
+  },
+  {
+   "name": "iconTrailing",
+   "attribute": "iconTrailing",
+   "type": "string | undefined",
+   "bindable": false
+  }
+ ],
+ "slots": [
+  {
+   "name": "",
+   "description": "This is a default/unnamed slot to assign text content. *deprecated* please use _text_ property instead"
+  }
+ ],
+ "events": []
+}
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+import '@vonage/vwc-badge'
+
+
+/** Represents a badge custom element.
+badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink. 
+* @param {BadgeConnotation | undefined} connotation  attribute: <VwcBadge connotation />
+* @param {BadgeShape | undefined} shape  attribute: <VwcBadge shape />
+* @param {BadgeLayout | undefined} layout  attribute: <VwcBadge layout />
+* @param {boolean} dense  attribute: <VwcBadge dense />
+* @param {boolean} enlarged  attribute: <VwcBadge enlarged />
+* @param {string | undefined} text  attribute: <VwcBadge text />
+* @param {string | undefined} icon  attribute: <VwcBadge icon />
+* @param {string | undefined} iconTrailing  attribute: <VwcBadge iconTrailing />
+*/
+const VwcBadge = wrapper('vwc-badge',  {
+    events: [],
+    attributes: [],
+    properties: []
+});
+
+VwcBadge.propTypes = {
+  connotation: PropTypes.any /* BadgeConnotation | undefined *//* attribute: connotation */,
+  shape: PropTypes.any /* BadgeShape | undefined *//* attribute: shape */,
+  layout: PropTypes.any /* BadgeLayout | undefined *//* attribute: layout */,
+  dense: PropTypes.bool/* default: false *//* attribute: dense */,
+  enlarged: PropTypes.bool/* default: false *//* attribute: enlarged */,
+  text: PropTypes.string/* attribute: text */,
+  icon: PropTypes.string/* attribute: icon */,
+  iconTrailing: PropTypes.string/* attribute: iconTrailing */
+}
+
+VwcBadge.defaultProps = {
+  dense: false,
+  enlarged: false
+}
+
+VwcBadge.displayName = 'VwcBadge'
+
+
+
+export default VwcBadge

package/VwcBadge/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vwc-badge",
+  "version": "2.10.47",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vwc-badge": "2.37.0"
+  }
+}

package/VwcBanner/index.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+import '@vonage/vwc-banner';
+/**
+* @param {string} message
+* @param {boolean} dismissible
+* @param {BannerConnotation | undefined} connotation
+* @param {string | undefined} icon
+* @param {boolean} open
+* @param {BannerRole} role
+* @param {BannerAriaLive} ariaLive
+*/
+declare const VwcBanner: (props: {
+    children?: ReactNode;
+    slot?: string | undefined;
+    id?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    message?: string | undefined;
+    dismissible?: boolean | undefined;
+    connotation?: any;
+    icon?: string | undefined;
+    open?: boolean | undefined;
+    role?: any;
+    ariaLive?: any;
+}) => JSX.Element;
+export default VwcBanner;