@vonage/vivid-react 2.10.47 → 2.10.56

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/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,66 +32,66 @@ 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). 
+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:
@@ -99,7 +99,7 @@ Once you have Artifactory configured, just run:
 $ yarn add @vonage/vivid-react
 ```
 No need for importing `vivid` directly. The dependencies will be installed for you.
- 
+
 ## Initialization
 
 ```javascript
@@ -117,9 +117,9 @@ const renderApp = () => {
 
 initVivid(rootElement).then(renderApp)
 ```
- 
+
 ## Importing
-Instead of importing each `vivid` component from `@vonage/vwc-*`, import them from `@vonage/vivid-react` instead. 
+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'
@@ -147,7 +147,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.56",
   "description": "Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -27,63 +27,63 @@
     "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-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",

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,28 @@
+const { OutputLanguage, CLIArgument, WCAConfigAll, FileName, Assets } = require('./generateWrappers/consts')
+const { generateWrappers } = require('./generateWrappers/generator')
+const {
+  isFileExists,
+  getParsedJson,
+  getVividPackageNames,
+  getInputArgument,
+  getVividLatestRelease,
+  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'
+
+getInputArgument(CLIArgument.All)
+  ? getVividLatestRelease()
+      .then(getCustomElementTagsDefinitionsList(WCAConfigAll))
+      .then(generateWrappers(outputDir, language, cleanTemp))
+      .then(copyStaticAssets(outputDir, staticAssets))
+  : isFileExists(FileName.packageJson)
+    .then(getParsedJson)
+    .then(getVividPackageNames)
+    .then(getCustomElementTagsDefinitionsList())
+    .then(generateWrappers(outputDir, language, cleanTemp))
+    .then(copyStaticAssets(outputDir, staticAssets))

package/scripts/generateWrappers/consts.js

@@ -0,0 +1,226 @@
+const FileName = {
+  packageJson: 'package.json',
+  tempFolder: 'temp',
+  tempFileName: 'analyzerOutput.json',
+  tempTsFolder: 'ts',
+  tempVividZipball: 'vivid.zip',
+  defaultOutputDirectory: 'dist',
+  storyOutputDir: 'stories',
+  readme: 'README.md',
+  testing: 'testing',
+  types: 'types'
+}
+
+const Assets = [
+  FileName.packageJson,
+  FileName.readme,
+  FileName.testing,
+  FileName.types
+].join(',')
+
+const VividRepo = 'Vonage/vivid'
+
+const WCAConfig = {
+  tempFolder: FileName.tempFolder,
+  tempFileName: FileName.tempFileName,
+  nodeArgumentsFactory: (packageNames, analyzerOutputFile) => [
+    './node_modules/web-component-analyzer/cli.js',
+    'analyze',
+    `node_modules/{${packageNames.join(',')}}/{src/,}*.?s`,
+    '--discoverNodeModules',
+    '--format', 'json',
+    '--outFile', analyzerOutputFile
+  ]
+}
+
+const WCAConfigAll = {
+  tempFolder: FileName.tempFolder,
+  tempFileName: FileName.tempFileName,
+  nodeArgumentsFactory: (targetFolder, analyzerOutputFile) => [
+    './node_modules/web-component-analyzer/cli.js',
+    'analyze',
+    `${targetFolder}/{src/,}*.?s`,
+    '--format', 'json',
+    '--outFile', analyzerOutputFile
+  ]
+}
+
+const CLIArgument = {
+  Assets: 'assets', // static assets to be copied to output folder
+  Output: 'output', // output folder
+  Language: 'language', // language js,ts
+  CleanTemp: 'clean', // clean up temp folder after CLI run
+  All: 'all' // ignore local package.json and produce wrappers for *all* Vivid components
+}
+
+const OutputLanguage = {
+  JavaScript: 'js',
+  TypeScript: 'ts'
+}
+
+// TODO: this can be removed when JSDocs for each component will be updated in Vivid repository
+const ComponentsEventsMap = {
+  VwcButtonToggleGroup: ['selected'],
+  VwcButton: ['click'],
+  VwcCard: ['click'],
+  VwcCheckbox: ['change'],
+  VwcChipSet: [{ name: 'MDCChip:selection', propName: 'onSelection' }],
+  VwcDataGrid: [{ name: 'selected-items-changed', propName: 'onSelectedItemsChange' }],
+  VwcDialog: ['opening', 'opened', 'closing', 'closed'],
+  VwcIconButton: ['click'],
+  VwcIconButtonToggle: [{ name: 'MDCIconButtonToggle:change', propName: 'onChange' }],
+  VwcListExpansionPanel: ['closed', 'opened'],
+  VwcListItem: ['click', { name: 'request-selected', propName: 'onRequestSelected' }],
+  VwcCheckListItem: [{ name: 'request-selected', propName: 'onRequestSelected' }],
+  VwcPagination: ['change'],
+  VwcRadio: ['change'],
+  VwcSlider: ['change'],
+  VwcSnackbar: ['opening', 'opened', 'closing', 'closed'],
+  VwcSwitch: ['change'],
+  VwcTab: [{ name: 'MDCTab:interacted', propName: 'onInteracted' }],
+  VwcTabBar: [{ name: 'MDCTabBar:activated', propName: 'onActivated' }],
+  VwcTextfield: ['input', 'blur', 'focus'],
+  VwcTextarea: ['input', 'blur', 'focus']
+}
+
+const ComponentsReadOnlyPropertiesMap = {
+  VwcAccordion: ['styles'],
+  VwcActionGroup: ['styles'],
+  VwcAudio: ['styles', 'floatingLabelFoundation', 'lineRippleFoundation'],
+  VwcListExpansionPanel: ['styles', 'headerNodes'],
+  VwcExpansionPanel: ['styles'],
+  VwcBadge: ['styles'],
+  VwcBanner: ['styles'],
+  VwcDrawer: ['styles'],
+  VwcNotchedOutline: ['styles'],
+  VwcSurface: ['styles'],
+  VwcFilePicker: ['styles'],
+  VwcFormfield: ['styles'],
+  VwcHelperMessage: ['styles'],
+  VwcLinearProgress: ['styles'],
+  VwcThemeSwitch: ['styles'],
+  VwcTopAppBar: ['styles'],
+  VwcChip: ['styles'],
+  VwcCircularProgress: ['styles'],
+  VwcTopAppBarFixed: ['styles'],
+  VwcMediaController: ['floatingLabelFoundation', 'lineRippleFoundation'],
+  VwcRelativeTime: ['floatingLabelFoundation', 'lineRippleFoundation'],
+  VwcCarouselItem: ['floatingLabelFoundation', 'lineRippleFoundation'],
+  VwcList: ['styles', 'items', 'selected', 'index', 'layout', 'debouncedLayout'],
+  VwcListItem: ['styles', 'ripple', 'text'],
+  VwcLayout: ['styles'],
+  VwcSwitch: ['styles', 'ripple'],
+  VwcTab: ['styles', 'active', 'ripple', 'isRippleActive'],
+  VwcFab: ['styles', 'ripple'],
+  VwcTabBar: ['styles', 'active'],
+  VwcText: ['styles'],
+  VwcTextarea: ['styles', 'validity', 'ripple'],
+  VwcTextfield: ['styles', 'validity', 'willValidate', 'selectionStart', 'selectionEnd', 'ripple'],
+  VwcMenu: ['styles', 'slotElement', 'items', 'index', 'selected', 'mdcRoot'],
+  VwcRadio: ['styles', 'ripple', 'isRippleActive'],
+  VwcRadioListItem: ['styles', 'ripple'],
+  VwcSelect: ['styles', 'items', 'ripple'],
+  VwcCheckbox: ['styles', 'isRippleActive', 'ripple'],
+  VwcChipSet: ['styles', 'chips'],
+  VwcCheckListItem: ['styles', 'ripple'],
+  VwcDialog: ['styles'],
+  VwcDropdown: ['styles', 'items', 'selected'],
+  VwcButton: ['styles', 'buttonElement', 'ripple'],
+  VwcButtonToggleGroup: ['items', 'selected'],
+  VwcKeypad: ['styles', 'digitsDisplay'],
+  VwcIconButton: ['styles', 'buttonElement', 'ripple'],
+  VwcIconButtonToggle: ['styles', 'ripple'],
+  VwcDataGrid: ['styles', 'selectedItems'],
+  VwcSlider: ['styles', 'ripple']
+}
+
+// Properties reflected as attributes having different name
+const RenamedReflectedAttributesPropertiesMap = {
+  VwcText: ['fontFace'], // font-face attribute
+  VwcLayout: ['columnBasis', 'columnSpacing', 'autoSizing']
+}
+
+// Bindable means property has complex type: (Function, Object, Array, etc.) OR properties reflected as attributes having different name
+// Those properties needs to be binded directly to the underlying web element "as is"
+// w/o toString => fromString transformations via HTML attributes
+const ComponentsBindablePropertiesMap = {
+  VwcButton: ['form'],
+  VwcTextarea: ['form'],
+  VwcTextfield: ['form'],
+  VwcDataGrid: ['rowDetailsRenderer'],
+  VwcDataGridColumn: ['headerRenderer', 'footerRenderer', 'cellRenderer'],
+  VwcDialog: ['closeButton'],
+  VwcMenu: ['anchor'],
+  ...RenamedReflectedAttributesPropertiesMap
+}
+
+// Extra properties to be exposed for element
+const ComponentsExtraPropertiesMap = {
+  VwcIconButton: [
+    {
+      "name": "value",
+      "type": "string"
+    }
+  ]
+}
+
+const CompoundComponentsMap = {
+  VwcButton: {
+    CallToAction: {
+      unelevated: true,
+      connotation: 'cta',
+      type: 'button',
+      layout: 'filled'
+    },
+    Alert: {
+      unelevated: true,
+      connotation: 'alert',
+      type: 'button',
+      layout: 'filled'
+    },
+    Outlined: {
+      unelevated: true,
+      layout: 'outlined',
+      type: 'button'
+    },
+    Success: {
+      unelevated: true,
+      connotation: 'success',
+      type: 'button',
+      layout: 'filled'
+    },
+    Info: {
+      unelevated: true,
+      connotation: 'info',
+      type: 'button',
+      layout: 'filled'
+    },
+    Primary: {
+      unelevated: true,
+      connotation: 'primary',
+      type: 'button',
+      layout: 'filled'
+    },
+    Announcement: {
+      unelevated: true,
+      connotation: 'announcement',
+      type: 'button',
+      layout: 'filled'
+    }
+  }
+}
+
+module.exports = {
+  ComponentsEventsMap,
+  ComponentsReadOnlyPropertiesMap,
+  ComponentsBindablePropertiesMap,
+  ComponentsExtraPropertiesMap,
+  CompoundComponentsMap,
+  FileName,
+  Assets,
+  OutputLanguage,
+  WCAConfig,
+  WCAConfigAll,
+  CLIArgument,
+  VividRepo
+}