@vonage/vivid-react 2.10.56 → 2.10.59

package/v3/VwcTreeItem/index.js

@@ -0,0 +1,78 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Base class for tree-item",
+ "name": "TreeItem",
+ "cssProperties": [
+  {
+   "name": "--vvd-tree-item-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-tree-item-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-tree-item-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-tree-item-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-tree-item-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  }
+ ],
+ "slots": [
+  {
+   "description": "To specify a child tree item.",
+   "name": "item"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "text",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Indicates the text's text.",
+   "privacy": "public"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "text",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Indicates the text's text.",
+   "fieldName": "text"
+  }
+ ],
+ "superclass": {
+  "name": "FastTreeItem",
+  "package": "@microsoft/fast-foundation"
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerTreeItem } from '@vonage/vivid'
+
+registerTreeItem('vvd3')
+
+const VwcTreeItem = wrapper(`vvd3-tree-item`,  {
+    events: [],
+    attributes: [],
+    properties: ['text']
+})
+
+VwcTreeItem.displayName = 'VwcTreeItem'
+
+export default VwcTreeItem

package/v3/VwcTreeItem/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vvd3-tree-item",
+  "version": "3.18.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vivid": "3.18.0"
+  }
+}

package/v3/VwcTreeView/index.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+/** Base class for Tree View
+
+*/
+declare const VwcTreeView: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcTreeView;

package/v3/VwcTreeView/index.js

@@ -0,0 +1,35 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Base class for Tree View",
+ "name": "TreeView",
+ "slots": [
+  {
+   "description": "Default slot.",
+   "name": ""
+  }
+ ],
+ "superclass": {
+  "name": "FastTreeView",
+  "package": "@microsoft/fast-foundation"
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerTreeView } from '@vonage/vivid'
+
+registerTreeView('vvd3')
+
+const VwcTreeView = wrapper(`vvd3-tree-view`,  {
+    events: [],
+    attributes: [],
+    properties: []
+})
+
+VwcTreeView.displayName = 'VwcTreeView'
+
+export default VwcTreeView

package/v3/VwcTreeView/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vvd3-tree-view",
+  "version": "3.18.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vivid": "3.18.0"
+  }
+}

package/.storybook/main.js

@@ -1,11 +0,0 @@
-module.exports = {
-  "stories": [
-    "../**/*.stories.mdx",
-    "../**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-actions"
-  ]
-}

package/.storybook/preview.js

@@ -1,3 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}

package/babel.config.js

@@ -1,38 +0,0 @@
-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/rollup.config.js

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

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

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

package/scripts/generateWrappers/generator.js

@@ -1,130 +0,0 @@
-const packageJson = require('../../package.json')
-const { getImportsFromTag } = require('./helpers/generator')
-const {
-  ComponentsEventsMap,
-  CompoundComponentsMap,
-  OutputLanguage,
-  FileName
-} = require('./consts')
-
-const { pathExists, outputFile, outputJson } = require('fs-extra')
-
-const {
-  compileTypescript,
-  prepareDir,
-  getComponentName,
-  toJsonObjectsList,
-  filePath,
-  renderJsDoc,
-  getIndexFileName,
-  getProperties,
-  getUniqueEvents,
-  getVividPackageName,
-  prepareCompoundComponents,
-  compoundComponentTemplate
-} = require('./utils')
-const { getTemplate, TemplateToken } = require('./templates/templates')
-const { join } = require('path')
-const { getPropTypes, getDefaultProps, getProps } = require('./prop.types')
-
-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 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)
-}
-
-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', 'js')
-      .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, 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}`)
-  }
-}
-
-module.exports = {
-  generateWrappers
-}

package/scripts/generateWrappers/helpers/generator.js

@@ -1,18 +0,0 @@
-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}'`)
-}