@vonage/vivid-react 2.10.47 → 2.10.58

package/scripts/generateWrappers/consts.js

@@ -0,0 +1,220 @@
+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',
+  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 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
+}
+
+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 ComponentsEventsMapV3 = {
+  VwcButton: ['click']
+}
+
+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,
+  ComponentsEventsMapV3,
+  ComponentsReadOnlyPropertiesMap,
+  ComponentsBindablePropertiesMap,
+  ComponentsExtraPropertiesMap,
+  CompoundComponentsMap,
+  FileName,
+  Assets,
+  OutputLanguage,
+  WCAConfig,
+  CLIArgument,
+  VividRepo
+}

package/scripts/generateWrappers/generator.js

@@ -0,0 +1,264 @@
+const packageJson = require('../../package.json')
+const { getImportsFromTag } = require('./helpers/generator')
+const {
+  ComponentsEventsMap,
+  ComponentsEventsMapV3,
+  CompoundComponentsMap,
+  OutputLanguage,
+  FileName
+} = require('./consts')
+
+const { pathExists, outputFile, outputJson } = require('fs-extra')
+
+const {
+  compileTypescript,
+  prepareDir,
+  getComponentName,
+  toJsonObjectsList,
+  filePath,
+  camel2kebab,
+  event2PropName,
+  renderJsDoc,
+  getIndexFileName,
+  getProperties,
+  getUniqueEvents,
+  getVividPackageName,
+  prepareCompoundComponents,
+  compoundComponentTemplate
+} = require('./utils')
+const { getTemplate, TemplateToken } = require('./templates/templates')
+const { join } = require('path')
+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)
+  await generateWrappers(distTs, OutputLanguage.TypeScript, false, false)(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)
+  return getTemplate('react-component', language)
+    .replace(TemplateToken.CLASS_JSDOC, renderJsDoc(tag))
+    .replace(TemplateToken.IMPORTS, getImportsFromTag(tag).join('\n'))
+    .replace(TemplateToken.EVENTS, toJsonObjectsList(getUniqueEvents(tag.events)))
+    .replace(TemplateToken.PROPERTIES,
+      toJsonObjectsList(
+        getProperties(tag)
+          .filter(property => property.bindable)
+          .map(({ name }) => name))
+    )
+    .replace(TemplateToken.ATTRIBUTES, '')
+    .replace(TemplateToken.PROP_TYPES, getPropTypes(tag).join(',\n'))
+    .replace(TemplateToken.PROPS, getProps(tag).join(',\n'))
+    .replace(TemplateToken.DEFAULT_PROPS, getDefaultProps(tag).join(',\n'))
+    .replace(TemplateToken.TAG_DESCRIPTOR_JSON, JSON.stringify(tag, null, ' '))
+    .replace(TemplateToken.COMPOUND_COMPONENTS, getCompoundComponents())
+    .replace(TemplateToken.REACT_IMPORT, getCompoundComponents() &&
+      'import { createElement } from \'react\'')
+    .replace(new RegExp(TemplateToken.COMPONENT_CLASS_NAME, 'g'), 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) => {
+    const indexOutputFileName = join(outputDir, indexFileName)
+    return outputFile(
+      indexOutputFileName,
+      content
+    )
+  }
+
+  const saveStory = async (outputDir, componentName, content) => {
+    const indexOutputFileName = join(outputDir, `${componentName}.stories.jsx`)
+    const exists = await pathExists(indexOutputFileName)
+    return exists || outputFile(
+      indexOutputFileName,
+      content
+    )
+  }
+
+  const getStoriesContent = (componentName, tag) =>
+    getTemplate('stories', OutputLanguage.JavaScript)
+      .split(TemplateToken.COMPONENT_CLASS_NAME).join(componentName)
+
+  prepareDir(outputDir, true, verbose)
+  const components = []
+
+  for (const tag of tags) {
+    const componentName = getComponentName(tag)
+    components.push(componentName)
+    if (verbose) {
+      console.info(`Processing ${componentName}...`)
+    }
+    tag.events = [...(tag.events || []), ...(ComponentsEventsMap[componentName] || [])]
+
+    const componentOutputDir = join(process.cwd(), outputDir, componentName)
+    const storyOutputDir = join(process.cwd(), FileName.storyOutputDir, 'v2', componentName)
+    const componentContent = renderComponent(tag)(language)(componentName)
+
+    await saveIndex(componentOutputDir, componentContent)
+    await saveStory(storyOutputDir, componentName, getStoriesContent(componentName, tag))
+
+    const packageName = getVividPackageName(tag.path)
+    const packageJsonContent = {
+      name: `@vonage/vivid-react-${tag.name}`,
+      version: packageJson.version,
+      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 (language === OutputLanguage.JavaScript) {
+    await generateTypings(outputDir)(tags)
+  }
+
+  prepareDir(filePath(FileName.tempFolder), cleanTemp, verbose)
+
+  if (verbose) {
+    console.info(`${components.length} wrappers generated at ${outputDir}`)
+  }
+}
+
+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,
+  generateWrappersV3
+}

package/scripts/generateWrappers/helpers/generator.js

@@ -0,0 +1,18 @@
+const { posix, win32 } = require('path')
+
+const rootImportExclusions = ['vwc-tags']
+
+module.exports.getImportsFromTag = ({ name, path }) => {
+  const normalizedPath = path.split(win32.sep).join(posix.sep)
+  const [, rootComponent] = /@vonage\/([\w-]+)\//g.exec(normalizedPath)
+  const result = []
+  if (rootComponent === name) {
+    result.push(`@vonage/${name}`)
+  } else {
+    if (rootImportExclusions.indexOf(rootComponent) < 0) {
+      result.push(`@vonage/${rootComponent}`)
+    }
+    result.push(`@vonage/${rootComponent}/${name}`)
+  }
+  return result.map(x => `import '${x}'`)
+}

package/scripts/generateWrappers/helpers/generator.test.js

@@ -0,0 +1,56 @@
+const { posix, win32 } = require('path')
+const { getImportsFromTag } = require('./generator')
+
+describe('getImportsFromTag', () => {
+  const mainComponentTag = {
+    name: 'vwc-list',
+    path: './../node_modules/@vonage/vwc-list/src/vwc-list.ts'
+  }
+
+  const subComponentExclusionTag = {
+    name: 'vwc-tag',
+    path: './..\\node_modules\\@vonage\\vwc-tags\\vwc-tag.d.ts'
+  }
+
+  const subComponentTag = {
+    name: 'vwc-radio-list-item',
+    path: './../node_modules/@vonage/vwc-list/src/vwc-radio-list-item.ts'
+  }
+
+  it('should create a default import for main component', () => {
+    const result = getImportsFromTag(mainComponentTag)
+
+    expect(result).toEqual([`import '@vonage/vwc-list'`])
+  })
+
+  it('should create import from specific file for subcomponent and main component import', () => {
+    const result = getImportsFromTag(subComponentTag)
+
+    expect(result).toEqual([
+      `import '@vonage/vwc-list'`,
+      `import '@vonage/vwc-list/${subComponentTag.name}'`
+    ])
+  })
+
+  it('should create import from specific file for subcomponent with exclusion', () => {
+    const result = getImportsFromTag(subComponentExclusionTag)
+
+    expect(result).toEqual([
+      `import '@vonage/vwc-tags/${subComponentExclusionTag.name}'`
+    ])
+  })
+
+  it('should work for win32 paths', () => {
+    const winTag = {
+      ...subComponentTag,
+      path: subComponentTag.path.split(posix.sep).join(win32.sep)
+    }
+
+    const result = getImportsFromTag(winTag)
+
+    expect(result).toEqual([
+      `import '@vonage/vwc-list'`,
+      `import '@vonage/vwc-list/${subComponentTag.name}'`
+    ])
+  })
+})

package/scripts/generateWrappers/prop.types.js

@@ -0,0 +1,87 @@
+const { event2PropName, getProperties } = require('./utils')
+
+// Common
+
+const getEvents = tag => (tag.events || []).map(x => x.propName || event2PropName(x.name || x))
+const isTypeSet = type => /(".*?" \|)/.test(type)
+const isStringTypeSet = type => /".*"[ |]?/.test(type) && /".*"[ |]?/.exec(type)[0] === type
+const isBoolean = type => /^(true|false)$/.test(type) || type === 'boolean'
+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 props = properties.map(x => `  ${x.name}?: ${mapType(x.type)}`)
+
+  return [
+    ...eventsProps,
+    ...props
+  ]
+}
+
+// JavaScript
+
+const getDefaultProps = tag => {
+  const defaultProperties = getProperties(tag).filter(x => x.default)
+  return defaultProperties.map(x => `  ${x.name}: ${x.default}`)
+}
+
+const getPropTypes = tag => {
+  const eventsPropTypes = getEvents(tag).map(x => `  ${x}: PropTypes.func`)
+
+  const properties = getProperties(tag)
+  const isString = type => type === 'string | undefined' || type === 'string | null'
+  const getSetTypeOptions = setType => setType.split('|').map(x => x.trim())
+  const mapTypeToPropType = type => ['boolean', 'string', 'number', 'array'].indexOf(type) >= 0
+    ? (type === 'boolean' ? 'bool' : type)
+    : isStringTypeSet(type)
+      ? `oneOf([${getSetTypeOptions(type).join(',')}])`
+      : isString(type)
+        ? 'string'
+        : isNumber(type)
+          ? 'number'
+          : isArray(type)
+            ? 'array'
+            : isBoolean(type)
+              ? 'bool'
+              : `any /* ${type || 'type not provided'} */`
+  const propertiesPropTypes = properties.map(x =>
+    `  ${x.name}: PropTypes.${mapTypeToPropType(x.type)}${x.default ? `/* default: ${x.default} */` : ''}${x.attribute ? `/* attribute: ${x.attribute} */` : ''}`)
+
+  return [
+    ...eventsPropTypes,
+    ...propertiesPropTypes
+  ]
+}
+
+module.exports = {
+  // JavaScript
+  getDefaultProps,
+  getPropTypes,
+
+  // TypeScript
+  getProps,
+  mapType
+}

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

@@ -0,0 +1,2 @@
+<% banner %>
+<% exports %>

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 %>