@vonage/vivid-react 2.10.56 → 2.10.58

package/scripts/generateWrappers/utils.js

@@ -1,12 +1,9 @@
 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 { access, F_OK, readFileSync, existsSync, rmSync } = 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} />` : ''}`
@@ -14,12 +11,12 @@ const renderTagPropertiesJsDoc = tag => getProperties(tag).map(renderPropertyJsD
 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 camel2kebab = input => deCapitalize(input).replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, '-').toLowerCase()
 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)))}`
@@ -32,7 +29,6 @@ const getUniqueEvents = flowRight(
   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 => {
@@ -48,7 +44,6 @@ const getVividPackageName = componentPath => {
   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) {
@@ -58,15 +53,14 @@ const prepareDir = (p, clean = true, verbose = 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
+    /^([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.type?.indexOf('=>') > 0 || // property type is function
+      prop.type?.indexOf('[]') > 0 // property type is array
     prop.bindable = isBindable
     return prop
   }).concat(ComponentsExtraPropertiesMap[getComponentName(tag)] || [])
@@ -81,6 +75,18 @@ const isFileExists = (fileName) => new Promise(
   ))
 const filePath = (fileName) => join(process.cwd(), fileName)
 
+const readMetaData = () => new Promise(
+  (resolve) => {
+    const vividPackageFolder = join(process.cwd(), 'node_modules/@vonage/vivid')
+    const elementsMetaData = `${vividPackageFolder}/${FileName.customElements}`
+    const apiMetaData = `${vividPackageFolder}/${FileName.vividApi}`
+    const meta = {
+      api: getParsedJson(apiMetaData),
+      elements: getParsedJson(elementsMetaData)
+    }
+    resolve(meta)
+  })
+
 const getParsedJson = (jsonFilePath) => JSON.parse(readFileSync(jsonFilePath, { encoding: 'utf8' }))
 
 const getVividPackageNames = ({ dependencies, devDependencies }) => {
@@ -142,42 +148,6 @@ const getInputArgument = (argumentName, defaultValue = null) => {
   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,
@@ -210,6 +180,8 @@ module.exports = {
   getComponentNameFromPackage,
   getInputArgument,
   getUniqueEvents,
+  readMetaData,
+  camel2kebab,
   isFileExists,
   isVividPackageName,
   copyStaticAssets,
@@ -219,7 +191,6 @@ module.exports = {
   getParsedJson,
   getVividPackageName,
   getVividPackageNames,
-  getVividLatestRelease,
   getCustomElementTagsDefinitionsList,
   prepareCompoundComponents,
   compoundComponentTemplate

package/src/initialization/initVivid.js

@@ -2,6 +2,26 @@
 import context from '@vonage/vvd-context'
 import { init } from '@vonage/vvd-fonts'
 
+import coreStyles from './../generated/style.core.all'
+import darkThemeStyles from './../generated/style.theme.dark'
+import lightThemeStyles from './../generated/style.theme.light'
+import fontSpeziaStyles from './../generated/style.font.spezia'
+import vividVersion from './../generated/vivid.version'
+
+const vividDataAttributePrefix = 'data-vivid'
+
+const appendStyleElement = (document = window.document) => (styleDescriptor) => {
+  const attributeName = `${vividDataAttributePrefix}-id`
+  if (document.querySelectorAll(`[${attributeName}="${styleDescriptor.id}"]`).length > 0) {
+    return
+  }
+  const styleElement = document.createElement('style')
+  styleElement.setAttribute('type', 'text/css')
+  styleElement.setAttribute(attributeName, styleDescriptor.id)
+  styleElement.innerHTML = styleDescriptor.css
+  document.head.append(styleElement)
+}
+
 /**
  * mounts Vivid context (styles) & Fonts into the target scope / document
  * - target scope may by any `HTMLElement` or `Document` or `DocumentFragment` (including `ShadowRoot`)
@@ -10,13 +30,25 @@ import { init } from '@vonage/vvd-fonts'
  *
  * @param {Document | DocumentFragment | HTMLElement} target - target document/shadow root/element to mount the CSS into
  * @param {Function} callback - callback function to be invoked once init is done
+ * @param {Object} options - options config how to init vivid. `theme` - dark | light, `font` - proprietary | oss
+ *
  * @throws {Error} error - if the provided target argument is `null` or not a Node of type `Document` / `DocumentFragment` / `HTMLElement`
  */
-export const initVivid = (target, callback) => {
+export const initVivid = (target, callback, options) => {
   if (target instanceof HTMLElement) {
-    target.classList.add('vivid-scope')
+    target.classList.add('vivid-scope') // vivid 2.x
+    target.setAttribute(`${vividDataAttributePrefix}-v2`, vividVersion.v2)
+
+    target.classList.add('vvd-root') // vivid 3.x
+    target.setAttribute(`${vividDataAttributePrefix}-v3`, vividVersion.v3)
     target = undefined
   }
+  const appendStyle = appendStyleElement()
+  appendStyle(coreStyles)
+  appendStyle(options.theme === 'light' ? lightThemeStyles : darkThemeStyles)
+  if (options.font === 'proprietary') {
+    appendStyle(fontSpeziaStyles)
+  }
   return Promise.all([
     init(),
     context.mount(target)

package/stories/{VwcAccordion → v2/VwcAccordion}/VwcAccordion.stories.jsx

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

package/stories/{VwcActionGroup → v2/VwcActionGroup}/VwcActionGroup.stories.jsx

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

package/stories/{VwcBadge → v2/VwcBadge}/VwcBadge.stories.jsx

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

package/stories/{VwcBanner → v2/VwcBanner}/VwcBanner.stories.jsx

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

package/stories/{VwcButton → v2/VwcButton}/VwcButton.stories.jsx

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

package/stories/{VwcButtonToggleGroup → v2/VwcButtonToggleGroup}/VwcButtonToggleGroup.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import VwcButtonToggleGroup from '../../dist/VwcButtonToggleGroup'
-import VwcButton from '../../dist/VwcButton'
+import VwcButtonToggleGroup from '../../../dist/VwcButtonToggleGroup'
+import VwcButton from '../../../dist/VwcButton'
 
 export const Default = () => {
   return (
@@ -32,7 +32,7 @@ export const RealtimeValuesSet = () => {
 }
 
 export default {
-  title: 'VwcButtonToggleGroup',
+  title: 'V2/VwcButtonToggleGroup',
   argTypes: {
     //
     // Example values

package/stories/{VwcCalendar → v2/VwcCalendar}/VwcCalendar.stories.jsx

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

package/stories/{VwcCalendarEvent → v2/VwcCalendarEvent}/VwcCalendarEvent.stories.jsx

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

package/stories/{VwcCard → v2/VwcCard}/VwcCard.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import VwcCard from '../../dist/VwcCard'
-import VwcIconButton from '../../dist/VwcIconButton'
-import { vwcCardHeadingCropDecorator } from '../../src'
+import VwcCard from '../../../dist/VwcCard'
+import VwcIconButton from '../../../dist/VwcIconButton'
+import { vwcCardHeadingCropDecorator } from '../../../src'
 
 const originalText = 'very loooooo ngt te eeex tkjhn klhkjg hlkjh kjuhk jhkjh kjhk jhk jhjk'
 const damnLoongWordText = 'veryloooooongtteeeextkjhnklhkjghlkjhkjuhkjhkjhkjhk jhk jhjk'
@@ -75,7 +75,7 @@ export const Default = () => (
   </>
 )
 export default {
-  title: 'VwcCard',
+  title: 'V2/VwcCard',
   argTypes: {
     //
     // Example values

package/stories/{VwcCarousel → v2/VwcCarousel}/VwcCarousel.stories.jsx

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

package/stories/{VwcCarouselItem → v2/VwcCarouselItem}/VwcCarouselItem.stories.jsx

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

package/stories/{VwcCheckListItem → v2/VwcCheckListItem}/VwcCheckListItem.stories.jsx

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

package/stories/{VwcCheckbox → v2/VwcCheckbox}/VwcCheckbox.stories.jsx

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

package/stories/{VwcChip → v2/VwcChip}/VwcChip.stories.jsx

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

package/stories/{VwcChipSet → v2/VwcChipSet}/VwcChipSet.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import VwcChipSet from '../../dist/VwcChipSet'
-import VwcChip from '../../dist/VwcChip'
+import VwcChipSet from '../../../dist/VwcChipSet'
+import VwcChip from '../../../dist/VwcChip'
 
 export const Default = (argTypes) =>
   <VwcChipSet {...argTypes}>
@@ -17,7 +17,7 @@ export const Filter = (argTypes) =>
   </VwcChipSet>
 
 export default {
-  title: 'VwcChipSet',
+  title: 'V2/VwcChipSet',
   argTypes: {
     type: {
       options: ['action', 'input', 'choice', 'filter'],

package/stories/{VwcCircularProgress → v2/VwcCircularProgress}/VwcCircularProgress.stories.jsx

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

package/stories/{VwcDataGrid → v2/VwcDataGrid}/VwcDataGrid.stories.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import VwcSwitch from '../../dist/VwcSwitch'
-import VwcButton from '../../dist/VwcButton'
-import VwcDataGrid from '../../dist/VwcDataGrid'
-import VwcDataGridColumn from '../../dist/VwcDataGridColumn'
-import { cellRendererFactory } from '../../src/dataGrid'
+import VwcSwitch from '../../../dist/VwcSwitch'
+import VwcButton from '../../../dist/VwcButton'
+import VwcDataGrid from '../../../dist/VwcDataGrid'
+import VwcDataGridColumn from '../../../dist/VwcDataGridColumn'
+import { cellRendererFactory } from '../../../src/dataGrid'
 
 const sequentalData = (rowBlueprint, totalRows) => {
   const result = new Array(totalRows)
@@ -105,5 +105,5 @@ export const Default = () => {
 }
 
 export default {
-  title: 'VwcDataGrid'
+  title: 'V2/VwcDataGrid'
 }

package/stories/{VwcDataGridColumn → v2/VwcDataGridColumn}/VwcDataGridColumn.stories.jsx

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

package/stories/{VwcDatepicker → v2/VwcDatepicker}/VwcDatepicker.stories.jsx

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

package/stories/{VwcDialog → v2/VwcDialog}/VwcDialog.stories.jsx

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

package/stories/{VwcDrawer → v2/VwcDrawer}/VwcDrawer.stories.jsx

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

package/stories/{VwcDropdown → v2/VwcDropdown}/VwcDropdown.stories.jsx

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

package/stories/{VwcElevation → v2/VwcElevation}/VwcElevation.stories.jsx

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

package/stories/{VwcEmptyState → v2/VwcEmptyState}/VwcEmptyState.stories.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import VwcEmptyState from '../../dist/VwcEmptyState'
+import VwcEmptyState from '../../../dist/VwcEmptyState'
 
 export const Default = () => <VwcEmptyState body="body" icon="chat-line" heading="heading" />
 export default {
-  title: 'VwcEmptyState',
+  title: 'V2/VwcEmptyState',
   argTypes: {
       //
       // Example values

package/stories/{VwcExpansionPanel → v2/VwcExpansionPanel}/VwcExpansionPanel.stories.jsx

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

package/stories/{VwcFab → v2/VwcFab}/VwcFab.stories.jsx

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

package/stories/{VwcFilePicker → v2/VwcFilePicker}/VwcFilePicker.stories.jsx

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

package/stories/{VwcFormfield → v2/VwcFormfield}/VwcFormfield.stories.jsx

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

package/stories/{VwcHelperMessage → v2/VwcHelperMessage}/VwcHelperMessage.stories.jsx

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

package/stories/{VwcIcon → v2/VwcIcon}/VwcIcon.stories.jsx

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

package/stories/{VwcIconButton → v2/VwcIconButton}/VwcIconButton.stories.jsx

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

package/stories/{VwcIconButtonToggle → v2/VwcIconButtonToggle}/VwcIconButtonToggle.stories.jsx

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