@vonage/vivid-react 2.10.56 → 2.10.58

package/.vscode/settings.json

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

package/README.md

@@ -88,13 +88,8 @@ Adding the `resolutions` field when using `yarn` might help get the correct vers
 
 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
 ```
@@ -103,7 +98,6 @@ No need for importing `vivid` directly. The dependencies will be installed for y
 ## 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
+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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid-react",
-  "version": "2.10.56",
+  "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,6 +27,7 @@
     "CLI"
   ],
   "dependencies": {
+    "@vonage/vivid": "3.18.0",
     "@vonage/vivid-react-wrapper": "1.2.9",
     "@vonage/vvd-context": "2.42.0",
     "@vonage/vvd-core": "2.42.0",
@@ -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/scripts/cli.js

@@ -1,11 +1,11 @@
-const { OutputLanguage, CLIArgument, WCAConfigAll, FileName, Assets } = require('./generateWrappers/consts')
-const { generateWrappers } = require('./generateWrappers/generator')
+const { OutputLanguage, CLIArgument, FileName, Assets } = require('./generateWrappers/consts')
+const { generateWrappers, generateWrappersV3 } = require('./generateWrappers/generator')
 const {
   isFileExists,
+  readMetaData,
   getParsedJson,
   getVividPackageNames,
   getInputArgument,
-  getVividLatestRelease,
   getCustomElementTagsDefinitionsList,
   copyStaticAssets
 } = require('./generateWrappers/utils')
@@ -15,14 +15,13 @@ const language = getInputArgument(CLIArgument.Language, OutputLanguage.JavaScrip
 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))
+// 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))
+

package/scripts/generateWrappers/consts.js

@@ -1,8 +1,11 @@
 const FileName = {
   packageJson: 'package.json',
   tempFolder: 'temp',
+  customElements: 'custom-elements.json',
+  vividApi: 'vivid.api.json',
   tempFileName: 'analyzerOutput.json',
   tempTsFolder: 'ts',
+  generatedFolder: 'src/generated',
   tempVividZipball: 'vivid.zip',
   defaultOutputDirectory: 'dist',
   storyOutputDir: 'stories',
@@ -33,24 +36,11 @@ const WCAConfig = {
   ]
 }
 
-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
+  CleanTemp: 'clean' // clean up temp folder after CLI run
 }
 
 const OutputLanguage = {
@@ -83,6 +73,10 @@ const ComponentsEventsMap = {
   VwcTextarea: ['input', 'blur', 'focus']
 }
 
+const ComponentsEventsMapV3 = {
+  VwcButton: ['click']
+}
+
 const ComponentsReadOnlyPropertiesMap = {
   VwcAccordion: ['styles'],
   VwcActionGroup: ['styles'],
@@ -212,6 +206,7 @@ const CompoundComponentsMap = {
 
 module.exports = {
   ComponentsEventsMap,
+  ComponentsEventsMapV3,
   ComponentsReadOnlyPropertiesMap,
   ComponentsBindablePropertiesMap,
   ComponentsExtraPropertiesMap,
@@ -220,7 +215,6 @@ module.exports = {
   Assets,
   OutputLanguage,
   WCAConfig,
-  WCAConfigAll,
   CLIArgument,
   VividRepo
 }

package/scripts/generateWrappers/generator.js

@@ -2,6 +2,7 @@ const packageJson = require('../../package.json')
 const { getImportsFromTag } = require('./helpers/generator')
 const {
   ComponentsEventsMap,
+  ComponentsEventsMapV3,
   CompoundComponentsMap,
   OutputLanguage,
   FileName
@@ -15,6 +16,8 @@ const {
   getComponentName,
   toJsonObjectsList,
   filePath,
+  camel2kebab,
+  event2PropName,
   renderJsDoc,
   getIndexFileName,
   getProperties,
@@ -25,7 +28,8 @@ const {
 } = require('./utils')
 const { getTemplate, TemplateToken } = require('./templates/templates')
 const { join } = require('path')
-const { getPropTypes, getDefaultProps, getProps } = require('./prop.types')
+const { getPropTypes, getDefaultProps, getProps, mapType } = require('./prop.types')
+const { writeFileSync, readFileSync } = require('fs')
 
 const generateTypings = outputDir => async tags => {
   const distTs = join(FileName.tempFolder, FileName.tempTsFolder)
@@ -33,6 +37,12 @@ const generateTypings = outputDir => async tags => {
   await compileTypescript(distTs)(outputDir)
 }
 
+const generateTypingsV3 = outputDir => async meta => {
+  const distTs = join(FileName.tempFolder, FileName.tempTsFolder)
+  await generateWrappersV3(distTs, OutputLanguage.TypeScript, false, false)(meta)
+  await compileTypescript(distTs)(outputDir)
+}
+
 const renderComponent = tag => language => componentName => {
   const compoundsConfig = CompoundComponentsMap[componentName] || {}
   const getCompoundComponents = prepareCompoundComponents(componentName, compoundComponentTemplate, compoundsConfig)
@@ -58,6 +68,9 @@ const renderComponent = tag => language => componentName => {
     .replace(new RegExp(TemplateToken.TAG, 'g'), tag.name)
 }
 
+/**
+ * Generates Vivid 2.x wrappers
+ */
 const generateWrappers = (outputDir, language = OutputLanguage.JavaScript, cleanTemp = true, verbose = true) => async (tags) => {
   const indexFileName = getIndexFileName(language)
   const saveIndex = (outputDir, content) => {
@@ -78,7 +91,7 @@ const generateWrappers = (outputDir, language = OutputLanguage.JavaScript, clean
   }
 
   const getStoriesContent = (componentName, tag) =>
-    getTemplate('stories', 'js')
+    getTemplate('stories', OutputLanguage.JavaScript)
       .split(TemplateToken.COMPONENT_CLASS_NAME).join(componentName)
 
   prepareDir(outputDir, true, verbose)
@@ -93,7 +106,7 @@ const generateWrappers = (outputDir, language = OutputLanguage.JavaScript, clean
     tag.events = [...(tag.events || []), ...(ComponentsEventsMap[componentName] || [])]
 
     const componentOutputDir = join(process.cwd(), outputDir, componentName)
-    const storyOutputDir = join(process.cwd(), FileName.storyOutputDir, componentName)
+    const storyOutputDir = join(process.cwd(), FileName.storyOutputDir, 'v2', componentName)
     const componentContent = renderComponent(tag)(language)(componentName)
 
     await saveIndex(componentOutputDir, componentContent)
@@ -125,6 +138,127 @@ const generateWrappers = (outputDir, language = OutputLanguage.JavaScript, clean
   }
 }
 
+const renderComponentV3 = prefix => classDeclaration => language => componentClassName => {
+  const componentPrefix = prefix
+  const componentName = classDeclaration.name
+  const componentTagName = `${componentPrefix}-${camel2kebab(componentName)}`
+  const events = [...(classDeclaration.events?.map(({ name }) => name) || []), ...(ComponentsEventsMapV3[componentClassName] || [])]
+  const properties = classDeclaration.members?.filter(({ privacy = 'public', kind, readonly }) => kind === 'field' && privacy === 'public' && readonly !== true) || []
+  const attributes = classDeclaration.attributes?.filter(({ fieldName }) => properties.find(({ name }) => fieldName === name)) || []
+  const propertyNames = properties.map(({ name }) => `'${name}'`)
+  const props = [
+    ...(events.map(x => x.propName || event2PropName(x.name || x)).map(x => `  ${x}?: (event: SyntheticEvent) => void`)),
+    ...(properties.map(({ name, type }) => `  ${name}?: ${mapType(type?.text)}`))
+  ]
+  const renderPropertyJsDoc = ({ type, name, attribute = null, description }) => `* @param ${type?.text ? `{${type?.text}}` : ''} ${name} ${description ? `- ${description}` : ''} ${attribute ? `**attribute** \`${attribute.name || attribute.fieldName}\`` : ''}`
+  const jsDoc = `/** ${classDeclaration.description || componentClassName} \n${properties.map((p) => ({ ...p, attribute: attributes.find(({ fieldName }) => fieldName === p.name) })).map(renderPropertyJsDoc).join('\n')}\n*/`
+
+  return getTemplate('react-component-v3', language)
+    .replace(TemplateToken.CLASS_JSDOC, jsDoc)
+    .replace(TemplateToken.ATTRIBUTES, '')
+    .replace(TemplateToken.PROP_TYPES, '')
+    .replace(TemplateToken.PROPS, props.join(',\n'))
+    .replace(TemplateToken.TAG_DESCRIPTOR_JSON, JSON.stringify(classDeclaration, null, ' '))
+    .replace(new RegExp(TemplateToken.COMPONENT_CLASS_NAME, 'g'), componentClassName)
+    .replace(new RegExp(TemplateToken.TAG_PREFIX, 'g'), componentPrefix)
+    .replace(new RegExp(TemplateToken.COMPONENT_NAME, 'g'), componentName)
+    .replace(new RegExp(TemplateToken.TAG, 'g'), componentTagName)
+    .replace(new RegExp(TemplateToken.EVENTS, 'g'), toJsonObjectsList(getUniqueEvents(events)))
+    .replace(new RegExp(TemplateToken.PROPERTIES, 'g'), propertyNames.join(', '))
+}
+
+/**
+ * Generates Vivid 3.x wrappers
+ */
+const generateWrappersV3 = (outputDir, language = OutputLanguage.JavaScript, cleanTemp = true, verbose = true) => async (meta) => {
+  const componentPrefix = 'vvd3'
+  const indexFileName = getIndexFileName(language)
+  const saveIndex = (outputDir, content) => {
+    const indexOutputFileName = join(outputDir, indexFileName)
+    return outputFile(
+      indexOutputFileName,
+      content
+    )
+  }
+
+  const outDir = `${outputDir}/v3`
+
+  const classDeclarations = meta.elements.modules.reduce((acc, { declarations }) =>
+    [...acc, ...declarations.filter(({ kind }) => kind === 'class')]
+    , [])
+
+  for (const classDeclaration of classDeclarations) {
+    const componentName = `Vwc${classDeclaration.name}`
+    const componentNameKebab = camel2kebab(classDeclaration.name)
+    const componentOutputDir = join(process.cwd(), outDir, componentName)
+    const componentContent = renderComponentV3(componentPrefix)(classDeclaration)(language)(componentName)
+    await saveIndex(componentOutputDir, componentContent)
+
+    const packageName = '@vonage/vivid'
+    const packageJsonContent = {
+      name: `@vonage/vivid-react-${componentPrefix}-${componentNameKebab}`,
+      version: packageJson.dependencies[packageName],
+      main: indexFileName,
+      types: 'index.d.ts',
+      private: true,
+      license: 'MIT',
+      dependencies: {
+        [packageName]: packageJson.dependencies[packageName]
+      }
+    }
+    await outputJson(join(componentOutputDir, FileName.packageJson), packageJsonContent, { spaces: 2 })
+
+    if (verbose) {
+      console.info(`${componentName}... v3`)
+    }
+  }
+
+  if (language === OutputLanguage.TypeScript) {
+    const typesDir = filePath(FileName.types)
+    prepareDir(typesDir)
+    await outputFile(
+      join(typesDir, `index.d.ts`),
+      getTemplate('types', OutputLanguage.TypeScript)
+        .replace(TemplateToken.ELEMENT_TYPES,
+          classDeclarations.map(({ attributes, name }) => {
+            const componentTagName = `${componentPrefix}-${camel2kebab(name)}`
+            return getTemplate('element-type', OutputLanguage.TypeScript)
+              .replace(TemplateToken.TAG, componentTagName)
+              .replace(TemplateToken.ATTRIBUTES, (attributes || []).map(({ name, fieldName, type = { text: 'string' } }) => `            "${name || fieldName}": ${type.text};`).join('\n'))
+          }).join('\n')
+        )
+    )
+  }
+
+  if (language === OutputLanguage.JavaScript) {
+    const generatedDir = filePath(FileName.generatedFolder)
+    prepareDir(generatedDir)
+
+    writeFileSync(
+      `${generatedDir}/vivid.version.js`,
+      `export default { v2: '${packageJson.dependencies['@vonage/vvd-core']}', v3: \`${packageJson.dependencies['@vonage/vivid']}\`}`
+    )
+
+    for (const { name, file } of [
+      { name: 'core.all', file: './node_modules/@vonage/vivid/styles/core/all.css' },
+      { name: 'theme.light', file: './node_modules/@vonage/vivid/styles/tokens/theme-light.css' },
+      { name: 'theme.dark', file: './node_modules/@vonage/vivid/styles/tokens/theme-dark.css' },
+      { name: 'font.spezia', file: './node_modules/@vonage/vivid/styles/fonts/spezia-variable.css' }
+    ]) {
+      const cssText = readFileSync(file, { encoding: 'utf8' }).replace(/\/\*# sourceMappingURL=.*\*\//g, '')
+      writeFileSync(
+        `${generatedDir}/style.${name}.js`,
+        `export default { id: '${name}', css: \`${cssText}\`}`
+      )
+    }
+
+    await generateTypingsV3(outputDir)(meta)
+  }
+
+  prepareDir(filePath(FileName.tempFolder), cleanTemp, verbose)
+}
+
 module.exports = {
-  generateWrappers
+  generateWrappers,
+  generateWrappersV3
 }

package/scripts/generateWrappers/prop.types.js

@@ -10,29 +10,29 @@ const isArray = type => /(.*)\[\]$/gm.test(type) || type === 'array'
 const isNumber = type => /(integer)/.test(type) || type === 'number | null'
 
 // TypeScript
+const mapType = type => ([
+  'boolean',
+  'Boolean',
+  'string',
+  'string | null',
+  'string | undefined',
+  'string | number',
+  'number',
+  'unknown'].indexOf(type) >= 0 ||
+isTypeSet(type))
+  ? type
+  : isBoolean(type)
+    ? 'boolean'
+    : isNumber(type)
+      ? 'number'
+      : isArray(type)
+          ? 'any[]'
+          : `any /* ${type} */`
 
 const getProps = tag => {
   const eventsProps = getEvents(tag).map(x => `  ${x}?: (event: SyntheticEvent) => void`)
 
   const properties = getProperties(tag)
-  const mapType = type => ([
-    'boolean',
-    'Boolean',
-    'string',
-    'string | null',
-    'string | undefined',
-    'string | number',
-    'number',
-    'unknown'].indexOf(type) >= 0 ||
-  isTypeSet(type))
-    ? type
-    : isBoolean(type)
-      ? 'boolean'
-      : isNumber(type)
-        ? 'number'
-        : isArray(type)
-            ? 'any[]'
-            : `any /* ${type} */`
   const props = properties.map(x => `  ${x.name}?: ${mapType(x.type)}`)
 
   return [
@@ -82,5 +82,6 @@ module.exports = {
   getPropTypes,
 
   // TypeScript
-  getProps
+  getProps,
+  mapType
 }

package/scripts/generateWrappers/templates/js/react-component-v3.tmpl

@@ -0,0 +1,19 @@
+<% banner %>
+/*
+Code in this file were generated using following JSON:
+<% descriptor-json %>
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { register<% component-name %> } from '@vonage/vivid'
+
+register<% component-name %>('<% tag-prefix %>')
+
+const <% component-class-name %> = wrapper(`<% tag %>`,  {
+    events: [<% events %>],
+    attributes: [<% attributes %>],
+    properties: [<% properties %>]
+})
+
+<% component-class-name %>.displayName = '<% component-class-name %>'
+
+export default <% component-class-name %>

package/scripts/generateWrappers/templates/js/stories.tmpl

@@ -1,9 +1,9 @@
 import React from 'react'
-import <% component-class-name %> from '../../dist/<% component-class-name %>'
+import <% component-class-name %> from '../../../dist/<% component-class-name %>'
 
 export const Default = () => <<% component-class-name %> />
 export default {
-  title: '<% component-class-name %>',
+  title: 'V2/<% component-class-name %>',
   argTypes: {
       //
       // Example values

package/scripts/generateWrappers/templates/templates.js

@@ -8,7 +8,10 @@ const TemplateToken = {
   IMPORTS: '<% imports %>',
   EXPORTS: '<% exports %>',
   TAG: '<% tag %>',
+  ELEMENT_TYPES: '<% element-types %>',
   COMPONENT_CLASS_NAME: '<% component-class-name %>',
+  COMPONENT_NAME: '<% component-name %>',
+  TAG_PREFIX: '<% tag-prefix %>',
   PROP_TYPES: '<% prop-types %>',
   PROPS: '<% props %>',
   DEFAULT_PROPS: '<% default-props %>',

package/scripts/generateWrappers/templates/ts/element-type.tmpl

@@ -0,0 +1,3 @@
+        "<% tag %>": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+<% attributes %>
+        }>;

package/scripts/generateWrappers/templates/ts/react-component-v3.tmpl

@@ -0,0 +1,32 @@
+<% banner %>
+/*
+Code in this file were generated using following JSON:
+<% descriptor-json %>
+*/
+import React, { ReactNode, SyntheticEvent, ForwardRefExoticComponent } from 'react'
+import wrapper from '@vonage/vivid-react-wrapper'
+import { register<% component-name %> } from '@vonage/vivid'
+
+register<% component-name %>('<% tag-prefix %>')
+
+const WrappedComponent = wrapper(`<% tag %>`,  {
+    events: [<% events %>],
+    attributes: [<% attributes %>],
+    properties: [<% properties %>]
+}) as ForwardRefExoticComponent<any>;
+
+<% jsdoc.class %>
+const <% component-class-name %> = (props:
+{
+  children?: ReactNode,
+  slot?: string,
+  id?: string,
+  style?: React.CSSProperties,
+  ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined,
+<% props %>
+}
+): JSX.Element => <WrappedComponent {...props}>{props.children}</WrappedComponent>
+
+<% component-class-name %>.displayName = '<% component-class-name %>'
+
+export default <% component-class-name %>

package/scripts/generateWrappers/templates/ts/types.tmpl

@@ -0,0 +1,8 @@
+<% banner %>
+declare module '@vonage/vivid-react-wrapper';
+declare module '@vonage/vivid-react';
+declare namespace JSX {
+    interface IntrinsicElements {
+<% element-types %>
+    }
+}