@vonage/vivid-react 2.10.47 → 2.10.58

package/.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": [
+    "../**/*.stories.mdx",
+    "../**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-actions"
+  ]
+}

package/.storybook/preview.js

@@ -0,0 +1,3 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

package/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "npm.exclude": "**/dist",
+  "npm.scriptExplorerExclude": ["install"]
+}

package/README.md

@@ -2,7 +2,7 @@
 
 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. 
+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
@@ -32,78 +32,72 @@ Adding the `resolutions` field when using `yarn` might help get the correct vers
 
 | 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 |
+| VwcAccordion | @vonage/vwc-accordion | 2.42.0 |
+| VwcActionGroup | @vonage/vwc-action-group | 2.42.0 |
+| VwcBadge | @vonage/vwc-badge | 2.42.0 |
+| VwcBanner | @vonage/vwc-banner | 2.42.0 |
+| VwcButton | @vonage/vwc-button | 2.42.0 |
+| VwcButtonToggleGroup | @vonage/vwc-button-toggle-group | 2.42.0 |
+| VwcCalendar | @vonage/vwc-calendar | 2.42.0 |
+| VwcCard | @vonage/vwc-card | 2.42.0 |
+| VwcCarousel | @vonage/vwc-carousel | 2.42.0 |
+| VwcCheckbox | @vonage/vwc-checkbox | 2.42.0 |
+| VwcChips | @vonage/vwc-chips | 2.42.0 |
+| VwcCircularProgress | @vonage/vwc-circular-progress | 2.42.0 |
+| VwcDataGrid | @vonage/vwc-data-grid | 2.42.0 |
+| VwcDatepicker | @vonage/vwc-datepicker | 2.42.0 |
+| VwcDialog | @vonage/vwc-dialog | 2.42.0 |
+| VwcDrawer | @vonage/vwc-drawer | 2.42.0 |
+| VwcDropdown | @vonage/vwc-dropdown | 2.42.0 |
+| VwcElevation | @vonage/vwc-elevation | 2.42.0 |
+| VwcEmptyState | @vonage/vwc-empty-state | 2.42.0 |
+| VwcExpansionPanel | @vonage/vwc-expansion-panel | 2.42.0 |
+| VwcFab | @vonage/vwc-fab | 2.42.0 |
+| VwcFilePicker | @vonage/vwc-file-picker | 2.42.0 |
+| VwcFormfield | @vonage/vwc-formfield | 2.42.0 |
+| VwcHelperMessage | @vonage/vwc-helper-message | 2.42.0 |
+| VwcIcon | @vonage/vwc-icon | 2.42.0 |
+| VwcIconButton | @vonage/vwc-icon-button | 2.42.0 |
+| VwcIconButtonToggle | @vonage/vwc-icon-button-toggle | 2.42.0 |
+| VwcKeypad | @vonage/vwc-keypad | 2.42.0 |
+| VwcLayout | @vonage/vwc-layout | 2.42.0 |
+| VwcLinearProgress | @vonage/vwc-linear-progress | 2.42.0 |
+| VwcList | @vonage/vwc-list | 2.42.0 |
+| VwcMenu | @vonage/vwc-menu | 2.42.0 |
+| VwcNotchedOutline | @vonage/vwc-notched-outline | 2.42.0 |
+| VwcNote | @vonage/vwc-note | 2.42.0 |
+| VwcPagination | @vonage/vwc-pagination | 2.42.0 |
+| VwcPopup | @vonage/vwc-popup | 2.42.0 |
+| VwcRadio | @vonage/vwc-radio | 2.42.0 |
+| VwcSchemeSelect | @vonage/vwc-scheme-select | 2.42.0 |
+| VwcSelect | @vonage/vwc-select | 2.42.0 |
+| VwcSideDrawer | @vonage/vwc-side-drawer | 2.42.0 |
+| VwcSlider | @vonage/vwc-slider | 2.42.0 |
+| VwcSnackbar | @vonage/vwc-snackbar | 2.42.0 |
+| VwcSurface | @vonage/vwc-surface | 2.42.0 |
+| VwcSwitch | @vonage/vwc-switch | 2.42.0 |
+| VwcTabBar | @vonage/vwc-tab-bar | 2.42.0 |
+| VwcTags | @vonage/vwc-tags | 2.42.0 |
+| VwcText | @vonage/vwc-text | 2.42.0 |
+| VwcTextarea | @vonage/vwc-textarea | 2.42.0 |
+| VwcTextfield | @vonage/vwc-textfield | 2.42.0 |
+| VwcThemeSwitch | @vonage/vwc-theme-switch | 2.42.0 |
+| VwcTooltip | @vonage/vwc-tooltip | 2.42.0 |
+| VwcTopAppBar | @vonage/vwc-top-app-bar | 2.42.0 |
+| VwcTopAppBarFixed | @vonage/vwc-top-app-bar-fixed | 2.42.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:
+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')
@@ -115,16 +109,32 @@ const renderApp = () => {
   )
 }
 
+// for Vivid 2.x
 initVivid(rootElement).then(renderApp)
+
+// OR
+
+// for Vivid 2.x + Vivid 3.x
+initVivid(rootElement, () => {}, {
+  font: 'oss',
+  theme: 'light'
+}).then(renderApp)
 ```
- 
+
 ## Importing
-Instead of importing each `vivid` component from `@vonage/vwc-*`, import them from `@vonage/vivid-react` instead. 
+For vivid **2.x**
+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'
 ```
 
+For vivid **3.x**
+```javascript
+import VwcCheckbox from '@vonage/vivid-react/v3/VwcCheckbox'
+import VwcSlider from '@vonage/vivid-react/v3/VwcSlider'
+```
+
 ## Bundling
 This package is an ES module, so you might need to add some configuration to your bundling process.
 
@@ -147,7 +157,7 @@ It'll work also for _raw_ `vivid` components used in project, since js-dom doesn
 
 # Development
 
-## Adding a component 
+## Adding a component
 Follow the steps:
 * clone this repo
 * create a branch

package/babel.config.js

@@ -0,0 +1,38 @@
+module.exports = {
+  // ••••••••••••••••••••••••••••••••••
+  presets: [
+    '@babel/preset-react',
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+        corejs: '3',
+        useBuiltIns: 'entry'
+      }
+    ]
+  ],
+
+  // ••••••••••••••••••••••••••••••••••
+  plugins: [
+    '@babel/plugin-transform-runtime'
+  ],
+
+  // ••••••••••••••••••••••••••••••••••
+  env: {
+    // --------------------------------
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 'current'
+            }
+          }
+        ]
+      ],
+      sourceMaps: true,
+      retainLines: true
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid-react",
-  "version": "2.10.47",
+  "version": "2.10.58",
   "description": "Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -27,63 +27,64 @@
     "CLI"
   ],
   "dependencies": {
-    "@vonage/vivid-react-wrapper": "1.2.3",
-    "@vonage/vvd-context": "2.37.0",
-    "@vonage/vvd-core": "2.37.0",
-    "@vonage/vvd-fonts": "2.37.0",
-    "@vonage/vwc-accordion": "2.37.0",
-    "@vonage/vwc-action-group": "2.37.0",
-    "@vonage/vwc-badge": "2.37.0",
-    "@vonage/vwc-banner": "2.37.0",
-    "@vonage/vwc-button": "2.37.0",
-    "@vonage/vwc-button-toggle-group": "2.37.0",
-    "@vonage/vwc-calendar": "2.37.0",
-    "@vonage/vwc-card": "2.37.0",
-    "@vonage/vwc-carousel": "2.37.0",
-    "@vonage/vwc-checkbox": "2.37.0",
-    "@vonage/vwc-chips": "2.37.0",
-    "@vonage/vwc-circular-progress": "2.37.0",
-    "@vonage/vwc-data-grid": "2.37.0",
-    "@vonage/vwc-datepicker": "2.37.0",
-    "@vonage/vwc-dialog": "2.37.0",
-    "@vonage/vwc-drawer": "2.37.0",
-    "@vonage/vwc-dropdown": "2.37.0",
-    "@vonage/vwc-elevation": "2.37.0",
-    "@vonage/vwc-empty-state": "2.37.0",
-    "@vonage/vwc-expansion-panel": "2.37.0",
-    "@vonage/vwc-fab": "2.37.0",
-    "@vonage/vwc-file-picker": "2.37.0",
-    "@vonage/vwc-formfield": "2.37.0",
-    "@vonage/vwc-helper-message": "2.37.0",
-    "@vonage/vwc-icon": "2.37.0",
-    "@vonage/vwc-icon-button": "2.37.0",
-    "@vonage/vwc-icon-button-toggle": "2.37.0",
-    "@vonage/vwc-keypad": "2.37.0",
-    "@vonage/vwc-layout": "2.37.0",
-    "@vonage/vwc-linear-progress": "2.37.0",
-    "@vonage/vwc-list": "2.37.0",
-    "@vonage/vwc-menu": "2.37.0",
-    "@vonage/vwc-notched-outline": "2.37.0",
-    "@vonage/vwc-note": "2.37.0",
-    "@vonage/vwc-pagination": "2.37.0",
-    "@vonage/vwc-popup": "2.37.0",
-    "@vonage/vwc-radio": "2.37.0",
-    "@vonage/vwc-scheme-select": "2.37.0",
-    "@vonage/vwc-select": "2.37.0",
-    "@vonage/vwc-side-drawer": "2.37.0",
-    "@vonage/vwc-slider": "2.37.0",
-    "@vonage/vwc-snackbar": "2.37.0",
-    "@vonage/vwc-surface": "2.37.0",
-    "@vonage/vwc-switch": "2.37.0",
-    "@vonage/vwc-tab-bar": "2.37.0",
-    "@vonage/vwc-tags": "2.37.0",
-    "@vonage/vwc-text": "2.37.0",
-    "@vonage/vwc-textarea": "2.37.0",
-    "@vonage/vwc-textfield": "2.37.0",
-    "@vonage/vwc-theme-switch": "2.37.0",
-    "@vonage/vwc-tooltip": "2.37.0",
-    "@vonage/vwc-top-app-bar": "2.37.0",
-    "@vonage/vwc-top-app-bar-fixed": "2.37.0"
+    "@vonage/vivid": "3.18.0",
+    "@vonage/vivid-react-wrapper": "1.2.9",
+    "@vonage/vvd-context": "2.42.0",
+    "@vonage/vvd-core": "2.42.0",
+    "@vonage/vvd-fonts": "2.42.0",
+    "@vonage/vwc-accordion": "2.42.0",
+    "@vonage/vwc-action-group": "2.42.0",
+    "@vonage/vwc-badge": "2.42.0",
+    "@vonage/vwc-banner": "2.42.0",
+    "@vonage/vwc-button": "2.42.0",
+    "@vonage/vwc-button-toggle-group": "2.42.0",
+    "@vonage/vwc-calendar": "2.42.0",
+    "@vonage/vwc-card": "2.42.0",
+    "@vonage/vwc-carousel": "2.42.0",
+    "@vonage/vwc-checkbox": "2.42.0",
+    "@vonage/vwc-chips": "2.42.0",
+    "@vonage/vwc-circular-progress": "2.42.0",
+    "@vonage/vwc-data-grid": "2.42.0",
+    "@vonage/vwc-datepicker": "2.42.0",
+    "@vonage/vwc-dialog": "2.42.0",
+    "@vonage/vwc-drawer": "2.42.0",
+    "@vonage/vwc-dropdown": "2.42.0",
+    "@vonage/vwc-elevation": "2.42.0",
+    "@vonage/vwc-empty-state": "2.42.0",
+    "@vonage/vwc-expansion-panel": "2.42.0",
+    "@vonage/vwc-fab": "2.42.0",
+    "@vonage/vwc-file-picker": "2.42.0",
+    "@vonage/vwc-formfield": "2.42.0",
+    "@vonage/vwc-helper-message": "2.42.0",
+    "@vonage/vwc-icon": "2.42.0",
+    "@vonage/vwc-icon-button": "2.42.0",
+    "@vonage/vwc-icon-button-toggle": "2.42.0",
+    "@vonage/vwc-keypad": "2.42.0",
+    "@vonage/vwc-layout": "2.42.0",
+    "@vonage/vwc-linear-progress": "2.42.0",
+    "@vonage/vwc-list": "2.42.0",
+    "@vonage/vwc-menu": "2.42.0",
+    "@vonage/vwc-notched-outline": "2.42.0",
+    "@vonage/vwc-note": "2.42.0",
+    "@vonage/vwc-pagination": "2.42.0",
+    "@vonage/vwc-popup": "2.42.0",
+    "@vonage/vwc-radio": "2.42.0",
+    "@vonage/vwc-scheme-select": "2.42.0",
+    "@vonage/vwc-select": "2.42.0",
+    "@vonage/vwc-side-drawer": "2.42.0",
+    "@vonage/vwc-slider": "2.42.0",
+    "@vonage/vwc-snackbar": "2.42.0",
+    "@vonage/vwc-surface": "2.42.0",
+    "@vonage/vwc-switch": "2.42.0",
+    "@vonage/vwc-tab-bar": "2.42.0",
+    "@vonage/vwc-tags": "2.42.0",
+    "@vonage/vwc-text": "2.42.0",
+    "@vonage/vwc-textarea": "2.42.0",
+    "@vonage/vwc-textfield": "2.42.0",
+    "@vonage/vwc-theme-switch": "2.42.0",
+    "@vonage/vwc-tooltip": "2.42.0",
+    "@vonage/vwc-top-app-bar": "2.42.0",
+    "@vonage/vwc-top-app-bar-fixed": "2.42.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
@@ -92,21 +93,19 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.13.17",
     "@material-ui/core": "^4.11.1",
-    "@octokit/core": "^3.1.2",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
-    "@storybook/addon-actions": "6.5.13",
-    "@storybook/addon-controls": "6.5.13",
-    "@storybook/addon-essentials": "6.5.13",
-    "@storybook/addon-links": "6.5.13",
-    "@storybook/addons": "6.5.13",
-    "@storybook/react": "6.5.13",
+    "@storybook/addon-actions": "6.5.14",
+    "@storybook/addon-controls": "6.5.14",
+    "@storybook/addon-essentials": "6.5.14",
+    "@storybook/addon-links": "6.5.14",
+    "@storybook/addons": "6.5.14",
+    "@storybook/react": "6.5.14",
     "@types/react": "16.9.49",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "babel-jest": "^26.6.1",
     "babel-loader": "^8.2.2",
-    "extract-zip": "2.0.1",
     "fs-extra": "^9.0.1",
     "jest": "^26.6.1",
     "lodash": "^4.17.20",
@@ -132,7 +131,7 @@
     "react-dom": ">=16.8"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=14.0.0 <=18.16.0"
   },
   "optionalDependencies": {
     "prop-types": "^15.7.2"

package/rollup.config.js

@@ -0,0 +1,30 @@
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import autoExternal from 'rollup-plugin-auto-external'
+import resolve from '@rollup/plugin-node-resolve'
+
+const OUTPUT_DIR = './dist'
+
+export default {
+  input: 'src/index.js',
+  output: [
+    {
+      file: `${OUTPUT_DIR}/index.js`,
+      format: 'cjs',
+      exports: 'auto'
+    }
+  ],
+  plugins: [
+    resolve({
+      extensions: ['.js', '.json', '.node']
+    }),
+    babel({
+      babelHelpers: 'runtime',
+      exclude: /node_modules/
+    }),
+    commonjs({
+      include: /node_modules/
+    }),
+    autoExternal()
+  ]
+}

package/scripts/cli.js

@@ -0,0 +1,27 @@
+const { OutputLanguage, CLIArgument, FileName, Assets } = require('./generateWrappers/consts')
+const { generateWrappers, generateWrappersV3 } = require('./generateWrappers/generator')
+const {
+  isFileExists,
+  readMetaData,
+  getParsedJson,
+  getVividPackageNames,
+  getInputArgument,
+  getCustomElementTagsDefinitionsList,
+  copyStaticAssets
+} = require('./generateWrappers/utils')
+
+const outputDir = getInputArgument(CLIArgument.Output, FileName.defaultOutputDirectory)
+const language = getInputArgument(CLIArgument.Language, OutputLanguage.JavaScript)
+const staticAssets = getInputArgument(CLIArgument.Assets, Assets)
+const cleanTemp = getInputArgument(CLIArgument.CleanTemp, true) !== 'false'
+
+// generate wrappers for Vivid 2.x
+isFileExists(FileName.packageJson)
+  .then(getParsedJson)
+  .then(getVividPackageNames)
+  .then(getCustomElementTagsDefinitionsList())
+  .then(generateWrappers(outputDir, language, cleanTemp))
+  .then(() => readMetaData() // generate wrappers for Vivid 3.x
+    .then(generateWrappersV3(outputDir, language, cleanTemp)))
+  .then(copyStaticAssets(outputDir, staticAssets))
+