@vonage/vivid-react 2.10.56 → 2.10.59

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

@@ -1,56 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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 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 [
-    ...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
-}

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

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

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

@@ -1,30 +0,0 @@
-<% banner %>
-/*
-Code in this file were generated using following JSON:
-<% descriptor-json %>
-*/
-import PropTypes from 'prop-types'
-import wrapper from '@vonage/vivid-react-wrapper'
-<% imports %>
-<% react-import %>
-
-<% jsdoc.class %>
-const <% component-class-name %> = wrapper('<% tag %>',  {
-    events: [<% events %>],
-    attributes: [<% attributes %>],
-    properties: [<% properties %>]
-});
-
-<% component-class-name %>.propTypes = {
-<% prop-types %>
-}
-
-<% component-class-name %>.defaultProps = {
-<% default-props %>
-}
-
-<% component-class-name %>.displayName = '<% component-class-name %>'
-
-<% compound-components %>
-
-export default <% component-class-name %>

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

@@ -1,18 +0,0 @@
-import React from 'react'
-import <% component-class-name %> from '../../dist/<% component-class-name %>'
-
-export const Default = () => <<% component-class-name %> />
-export default {
-  title: '<% component-class-name %>',
-  argTypes: {
-      //
-      // Example values
-      // numberValue: { control: 'number', defaultValue: 123 },
-      // booleanValue: { control: 'boolean', defaultValue: true },
-      // objectValue: { control: 'object', defaultValue: {} },
-      // stringValue: { control: 'string', defaultValue: 'string' },
-      // colorValue: { control: 'color' },
-      // dateValue: { control: 'date' }
-      //
-    }
-}

package/scripts/generateWrappers/templates/templates.js

@@ -1,36 +0,0 @@
-/*
-* Purpose: Support code-generation activities with templates
-*/
-const { readFileSync } = require('fs')
-
-const TemplateToken = {
-  BANNER: '<% banner %>',
-  IMPORTS: '<% imports %>',
-  EXPORTS: '<% exports %>',
-  TAG: '<% tag %>',
-  COMPONENT_CLASS_NAME: '<% component-class-name %>',
-  PROP_TYPES: '<% prop-types %>',
-  PROPS: '<% props %>',
-  DEFAULT_PROPS: '<% default-props %>',
-  PROPERTIES: '<% properties %>',
-  ATTRIBUTES: '<% attributes %>',
-  EVENTS: '<% events %>',
-  CLASS_JSDOC: '<% jsdoc.class %>',
-  TAG_DESCRIPTOR_JSON: '<% descriptor-json %>',
-  COMPOUND_COMPONENTS: '<% compound-components %>',
-  REACT_IMPORT: '<% react-import %>'
-}
-
-const GENERATED_CODE_BANNER = `/*
-* DO NOT EDIT THIS FILE. IT IS GENERATED
-*/`
-const templatesFolder = `${__dirname}`
-const getTemplate = (template, language) =>
-  readFileSync(`${templatesFolder}/${language}/${template}.tmpl`, { encoding: 'utf8' })
-    .replace(TemplateToken.BANNER, GENERATED_CODE_BANNER)
-
-module.exports = {
-  getTemplate,
-  TemplateToken,
-  GENERATED_CODE_BANNER
-}

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

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

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

@@ -1,28 +0,0 @@
-<% 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'
-<% imports %>
-
-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>
-
-export default <% component-class-name %>

package/scripts/generateWrappers/utils.js

@@ -1,226 +0,0 @@
-const { join, parse } = require('path')
-const { flowRight, map, replace, reverse, startCase, uniqBy } = require('lodash/fp')
-const { access, F_OK, readFileSync, readdirSync, existsSync, rmSync, createWriteStream } = require('fs')
-const mkdirp = require('mkdirp')
-const os = require('os')
-const { spawnSync } = require('child_process')
-const { WCAConfig, VividRepo, FileName, OutputLanguage, ComponentsBindablePropertiesMap, ComponentsReadOnlyPropertiesMap, ComponentsExtraPropertiesMap } = require('./consts')
-const { Octokit } = require('@octokit/core')
-const extract = require('extract-zip')
-const { copySync } = require('fs-extra')
-
-const renderPropertyJsDoc = tag => property => `* @param ${property.type ? `{${property.type}}` : ''} ${property.name} ${property.description ? `- ${property.description}` : ''} ${property.attribute ? `attribute: <${getComponentName(tag)} ${property.attribute} />` : ''}`
-const renderTagPropertiesJsDoc = tag => getProperties(tag).map(renderPropertyJsDoc(tag)).join('\n')
-const renderJsDoc = tag => `/** ${tag.description || ''} \n${renderTagPropertiesJsDoc(tag)}\n*/`
-const stripQuotes = input => input.replace(/'/g, '')
-const unique = stringArray => Array.from(new Set(stringArray))
-const getGithubToken = () => process.env.GITHUB_ACCESS_TOKEN || process.env.GITHUB_TOKEN
-const toJsonObjectsList = collection => (collection || []).map(JSON.stringify).join(',')
-const toCommaSeparatedList = collection => (collection || []).map(x => `'${stripQuotes(x.name)}'`).join(',')
-const capitalize = input => input.replace(/(^|\s)[a-z]/g, s => s.toUpperCase())
-const deCapitalize = input => input.replace(/(^|\s)[A-Z]/g, s => s.toLowerCase())
-const getComponentName = tag => capitalize(kebab2Camel(tag.name))
-const kebab2Camel = input => deCapitalize(input.split('-').map(x => capitalize(x)).join(''))
-const snake2Camel = input => deCapitalize(input.split('_').map(x => capitalize(x)).join(''))
-const event2PropName = eventName => `on${capitalize(kebab2Camel(snake2Camel(eventName)))}`
-const event2EventDescriptor = event => typeof event === 'string'
-  ? ({ name: event, propName: event2PropName(event) })
-  : event
-const getUniqueEvents = flowRight(
-  uniqBy('name'),
-  // need to reverse to have custom events first, to allow overwriting of the ones grabbed from JSDocs
-  reverse,
-  map(event2EventDescriptor)
-)
-const getFileNameFromDispositionHeader = input => /filename=(.*$)/.exec(input)[1]
-const isVividPackageName = (packageName) => /@vonage\/vwc-*/.test(packageName)
-const getIndexFileName = language => `index.${language === OutputLanguage.TypeScript ? 'tsx' : language}`
-const getVividPackageName = componentPath => {
-  const { dir } = parse(componentPath)
-  if (dir.indexOf('node_modules') >= 0) {
-    return /(@vonage\/vwc-.*?)\//.exec(componentPath.replace(/\\/g, '/'))[1]
-  }
-  const pathParts = dir.split('\\').join('/').split('/')
-  if (pathParts.length > 0 && pathParts[pathParts.length - 1] === 'src') {
-    pathParts.pop()
-  }
-  const packageJson = filePath(join(FileName.tempFolder, ...pathParts, FileName.packageJson))
-  const pkg = getParsedJson(packageJson)
-  return pkg.name
-}
-const getYarnCommand = () => `yarn${os.platform() === 'win32' ? '.cmd' : ''}`
-const prepareDir = (p, clean = true, verbose = true) => {
-  if (clean && existsSync(p)) {
-    if (verbose) {
-      console.info(`Clearing folder: ${p}`)
-    }
-    rmSync(p, { recursive: true })
-  }
-  mkdirp.sync(p)
-}
-const getFirstFolderNameFromPath = path => readdirSync(path, { withFileTypes: true }).find(x => x.isDirectory()).name
-const getProperties = tag => (tag.properties || [])
-  .filter(prop => !(ComponentsReadOnlyPropertiesMap[getComponentName(tag)] || []).includes(prop.name)) // skip readonly properties
-  .filter(prop => /'.*?'/.test(prop.name) ||
-/^([a-zA-Z_$][a-zA-Z\\d_$]*)$/.test(prop.name)) // only props having valid names
-  .map(prop => {
-    const isBindable = (ComponentsBindablePropertiesMap[getComponentName(tag)] || []).includes(prop.name) ||
-    prop.type?.indexOf('=>') > 0 || // property type is function
-    prop.type?.indexOf('[]') > 0 // property type is array
-    prop.bindable = isBindable
-    return prop
-  }).concat(ComponentsExtraPropertiesMap[getComponentName(tag)] || [])
-
-const isFileExists = (fileName) => new Promise(
-  (resolve, reject) => access(
-    filePath(fileName),
-    F_OK,
-    error => error
-      ? reject(error)
-      : resolve(fileName)
-  ))
-const filePath = (fileName) => join(process.cwd(), fileName)
-
-const getParsedJson = (jsonFilePath) => JSON.parse(readFileSync(jsonFilePath, { encoding: 'utf8' }))
-
-const getVividPackageNames = ({ dependencies, devDependencies }) => {
-  const packages = [
-    ...Object.keys(dependencies),
-    ...Object.keys(devDependencies)
-  ]
-  const result = unique(packages).filter(isVividPackageName)
-  console.log(`Vivid packages detected from ${FileName.packageJson}: \n${result.map(x => `  - ${x}`).join('\n')}`)
-  return result
-}
-
-const getCustomElementTagsDefinitionsList = (config = WCAConfig) => (vividPackageNames) => new Promise((resolve) => {
-  const analyzerOutput = filePath(join(config.tempFolder, config.tempFileName))
-  const child = spawnSync(
-    'node',
-    config.nodeArgumentsFactory(vividPackageNames, analyzerOutput),
-    { cwd: process.cwd() }
-  )
-  if (child.status === 0) {
-    const output = getParsedJson(analyzerOutput)
-    const uniqueTags = unique(output.tags.map(x => x.name)).map(x => output.tags.find(y => y.name === x))
-    return resolve(uniqueTags)
-  }
-})
-
-const compileTypescript = (rootDir) => async (outDir) =>
-  spawnSync(
-    'node',
-    [
-      './node_modules/typescript/lib/tsc.js',
-      '--project',
-      filePath('tsconfig.json'),
-      '--rootDir',
-      rootDir,
-      '--outDir',
-      outDir
-    ]
-  )
-
-const copyStaticAssets = (outputDir, assets) => () => {
-  const cp = file => {
-    const source = filePath(file)
-    const dest = filePath(join(outputDir, file))
-    copySync(source, dest)
-    console.info(`Copy static asset ${source} => ${dest}`)
-  }
-  assets.split(',').map(assetFileName => cp(assetFileName))
-}
-
-const getInputArgument = (argumentName, defaultValue = null) => {
-  const argumentObjects = process.argv
-    .filter(argument => argument.indexOf('=') >= 0)
-    .map(argument => ({
-      name: argument.split('=')[0].replace(/--/g, ''),
-      value: argument.split('=')[1]
-    }))
-  const targetArgument = argumentObjects.find(argumentObject => argumentObject.name === argumentName)
-  return targetArgument ? targetArgument.value : defaultValue
-}
-
-const getVividLatestRelease = async (config = { tempFolder: FileName.tempFolder, tempFileName: FileName.tempVividZipball }) => {
-  const outFolder = filePath(config.tempFolder)
-  prepareDir(outFolder, false)
-  console.log('Fetching latest Vivid release artifact...')
-  if (!getGithubToken()) {
-    console.warn('It seems GITHUB_ACCESS_TOKEN or GITHUB_TOKEN environment variable is not defined.')
-    return
-  }
-  const octokit = new Octokit({ auth: getGithubToken() })
-  const result = await octokit.request(`GET /repos/${VividRepo}/zipball`)
-  if (result.status === 200) {
-    const filename = getFileNameFromDispositionHeader(result.headers['content-disposition'])
-    console.info(`Got zipball ${filename}`)
-    return new Promise((resolve, reject) => {
-      const vividZipFileName = join(outFolder, config.tempFileName)
-      const vividZipStream = createWriteStream(vividZipFileName)
-      vividZipStream.write(Buffer.from(result.data), async () => {
-        try {
-          await extract(vividZipFileName, { dir: outFolder })
-        } catch (err) {
-          console.error(err)
-          reject(err)
-        }
-        const vividFolder = join(outFolder, getFirstFolderNameFromPath(outFolder))
-        console.log(`Installing Vivid packages at: ${vividFolder}...`)
-        const child = spawnSync(getYarnCommand(), [], { cwd: vividFolder, stdio: 'ignore' })
-        if (child.status === 0) {
-          console.log('Analyzing Vivid elements...')
-          resolve(`${vividFolder}/**/components/**`)
-        }
-        resolve()
-      })
-    })
-  }
-}
-
-const getComponentNameFromPackage = flowRight(
-  replace(/\s/g, ''),
-  startCase,
-  replace('@vonage/', '')
-)
-
-const compoundComponentTemplate = (baseName, compositeName, defaultProps) =>
-  `const ${compositeName} = (props) => createElement(${baseName}, props)
-
-${compositeName}.defaultProps = ${JSON.stringify(defaultProps)}
-
-${baseName}.${compositeName} = ${compositeName}`
-
-const prepareCompoundComponents = (baseName, template, compoundComponentsConfig = {}) => () => Object
-  .entries(compoundComponentsConfig)
-  .map(([compositeName, defaultProps]) => template(baseName, compositeName, defaultProps))
-  .join('\n\n')
-
-module.exports = {
-  toCommaSeparatedList,
-  toJsonObjectsList,
-  compileTypescript,
-  filePath,
-  prepareDir,
-  renderJsDoc,
-  capitalize,
-  kebab2Camel,
-  event2PropName,
-  event2EventDescriptor,
-  getComponentNameFromPackage,
-  getInputArgument,
-  getUniqueEvents,
-  isFileExists,
-  isVividPackageName,
-  copyStaticAssets,
-  getIndexFileName,
-  getProperties,
-  getComponentName,
-  getParsedJson,
-  getVividPackageName,
-  getVividPackageNames,
-  getVividLatestRelease,
-  getCustomElementTagsDefinitionsList,
-  prepareCompoundComponents,
-  compoundComponentTemplate
-}

package/scripts/generateWrappers/utils.test.js

@@ -1,71 +0,0 @@
-import { jest } from '@jest/globals'
-import { getUniqueEvents } from './utils'
-
-const { getVividPackageNames, event2PropName, prepareCompoundComponents } = require('./utils')
-
-it('getVividPackageNames', () => {
-  const packageJson = {
-    dependencies: {
-      '@vonage/vwc-button': '0.1',
-      '@vonage/vwc-icon': '0.2',
-      '@nvm/vwc-badge': '0.2'
-    },
-    devDependencies: {
-      '@vonage/vwc-dropdown': '0.1',
-      '@vonage/component': '0.2'
-    },
-    otherDependencies: {
-      '@vonage/vwc-nav': '0.3'
-    }
-  }
-  const expectedList = [
-    '@vonage/vwc-button',
-    '@vonage/vwc-icon',
-    '@vonage/vwc-dropdown'
-  ]
-  expect(getVividPackageNames(packageJson)).toStrictEqual(expectedList)
-})
-
-it.each([
-  ['digit-added', 'onDigitAdded'],
-  ['userScrubRequest', 'onUserScrubRequest'],
-  ['vvd_scheme_select', 'onVvdSchemeSelect']
-])(`event2PropName should convert "%s" to "%s"`, (input, expected) => {
-  expect(event2PropName(input)).toStrictEqual(expected)
-})
-
-it('compound components', () => {
-  const template = jest.fn()
-  const config = {
-    CTA: {
-      connotation: 'cta',
-      layout: 'filled'
-    },
-    Alert: {
-      connotation: 'alert',
-      layout: 'filled'
-    }
-  }
-
-  prepareCompoundComponents('VwcButton', template, config)()
-
-  expect(template.mock.calls[0]).toEqual([
-    'VwcButton',
-    'CTA',
-    config.CTA
-  ])
-  expect(template.mock.calls[1]).toEqual([
-    'VwcButton',
-    'Alert',
-    config.Alert
-  ])
-})
-
-it('getUniqueEvents', () => {
-  const firstEvent = { name: 'non-unique', propName: 'replaced' }
-  const secondEvent = { name: 'non-unique', propName: 'targetPropName' }
-  const uniqueEvent = { name: 'unique', propName: 'onUnique' }
-  const events = [firstEvent, secondEvent, uniqueEvent]
-
-  expect(getUniqueEvents(events)).toEqual([uniqueEvent, secondEvent])
-})

package/scripts/updateDocs.js

@@ -1,42 +0,0 @@
-const os = require('os')
-const { getComponentNameFromPackage } = require('./generateWrappers/utils')
-const { outputFile, readFile } = require('fs-extra')
-
-const { isVividPackageName } = require('./generateWrappers/utils')
-const { dependencies, devDependencies } = require('../package.json')
-
-const generateSupportedComponents = () => {
-  const allDeps = Object.entries({
-    ...devDependencies,
-    ...dependencies
-  })
-
-  const reducePackagesToVividComponentsList = (acc, [name, version]) => {
-    if (!isVividPackageName(name)) {
-      return acc
-    }
-    const componentName = getComponentNameFromPackage(name)
-    return [...acc, `| ${componentName} | ${name} | ${version} |`]
-  }
-
-  return allDeps.reduce(
-    reducePackagesToVividComponentsList,
-    [
-      '| Component Name | Package Name | Package Version |',
-      '|----------------|--------------|-----------------|'
-    ]
-  )
-}
-
-const updateSupportedComponents = async (readmePath) => {
-  const packageList = generateSupportedComponents()
-  const readme = await readFile(readmePath, { encoding: 'utf8' })
-  await outputFile(
-    readmePath,
-    // this finds a table, might be a problem if we have more than one ;)
-    // need the extra empty string to have a new line before the next section
-    readme.replace(/((\|[ -][^|\r\n]*)+\|(\r?\n|\r)?)+/gm, [...packageList, ''].join(os.EOL))
-  )
-}
-
-updateSupportedComponents('README.md')