@vonage/vivid-react 0.0.1 → 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

@@ -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.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:
+```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/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,12 +1,140 @@
 {
   "name": "@vonage/vivid-react",
-  "version": "0.0.1",
-  "description": "",
+  "version": "2.10.56",
+  "description": "Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings",
   "main": "index.js",
+  "types": "types/index.d.ts",
+  "license": "MIT",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "yarn generateWrappers && rollup -c",
+    "generateWrappers": "node scripts/cli.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "preversion": "yarn updateDocs && git add README.md",
+    "postversion": "git push --follow-tags",
+    "storybook": "start-storybook -p 6006",
+    "prestorybook": "yarn generateWrappers",
+    "updateDocs": "node scripts/updateDocs.js",
+    "updateVividPackages": "node scripts/updateVividPackages.js"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
-}
+  "keywords": [
+    "Vivid",
+    "React",
+    "Custom Element",
+    "Wrapper",
+    "Utility",
+    "Generator",
+    "CLI"
+  ],
+  "dependencies": {
+    "@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",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.6",
+    "@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",
+    "@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",
+    "mkdirp": "1.0.4",
+    "ora": "^5.1.0",
+    "react": ">=16.8",
+    "react-dom": ">=16.8",
+    "rollup": "^2.35.0",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "standard": "^16.0.4",
+    "typescript": "4.3.5",
+    "web-component-analyzer": "2.0.0-next.4"
+  },
+  "resolutions": {
+    "glob-parent": "^5.1.2",
+    "trim": "^0.0.3",
+    "trim-newlines": "^3.0.1",
+    "terser": "^5.14.2",
+    "loader-utils": "2.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "engines": {
+    "node": ">=14.0.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,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
+}