@vonage/vivid-react 2.10.47 → 2.10.56

package/scripts/generateWrappers/utils.test.js

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

@@ -0,0 +1,42 @@
+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')

package/scripts/updateVividPackages.js

@@ -0,0 +1,81 @@
+const ora = require('ora')
+const { EOL } = require('os')
+const { spawn } = require('child_process')
+const { dependencies } = require('../package.json')
+
+const spinner = ora()
+
+const spawnPromise = (...args) => new Promise((resolve, reject) => {
+  const cmd = spawn(...args)
+  const stdout = []
+  const stderr = []
+  cmd.stdout.on('data', (data) => stdout.push(data))
+  cmd.stderr.on('data', (data) => stderr.push(data))
+  cmd.on('close', (status) => status ? reject(stderr.join('')) : resolve(stdout.join('')))
+  cmd.on('error', () => reject(stderr.join('')))
+})
+
+// TODO: find a better way to load complete search results when searching NPM
+// naive way to force paging when doing NPM search
+// NPM limits the number of packages it returns and drops some versions and packages all together
+const forcePaging = (pattern = '') =>
+  'abcdefghijklmnopqrstuvwxyz'.split('').map((letter) => `${pattern}-${letter}`)
+
+const ignoredPackages = [
+  '@vonage/vwc-angular-forms',
+  '@vonage/vwc-angular-dialog',
+  '@vonage/vwc-toggle-buttons-group',
+  '@vonage/vwc-relative-time'
+]
+
+const defaultPatterns = [
+  'vonage/vvd-context',
+  'vonage/vvd-core',
+  'vonage/vvd-fonts',
+  ...forcePaging('vonage/vwc')
+]
+
+const removeIgnoredPackages = ({ name }) => !ignoredPackages.includes(name)
+
+const keepOnlyChangedPackages = ({ name, version }) => dependencies[name] !== `^${version}`
+
+const getPackages = async (patterns = defaultPatterns) => {
+  const packages = []
+  spinner.start('')
+  for (const pattern of patterns) {
+    spinner.text = `Searching for Vivid packages to update. [found: ${packages.length}]`
+    try {
+      const stdout = await spawnPromise('npm', ['search', '--json', '--no-description', pattern], { encoding: 'utf8' })
+      packages.push(...JSON.parse(stdout).filter(removeIgnoredPackages).filter(keepOnlyChangedPackages))
+    } catch {
+    }
+  }
+  spinner.clear()
+  return packages
+}
+
+const updatePackageJson = async () => {
+  const packages = await getPackages()
+  if (!packages.length) {
+    spinner.info('Nothing to update. All packages already in latest versions.')
+    return
+  }
+  let updated = 0
+  spinner.succeed(`Found ${packages.length} packages needing update.`)
+  spinner.start()
+  for (const { name, version } of packages) {
+    const versionedPackage = `${name}@^${version}`
+    spinner.text = `Updating '${name}@${dependencies[name]}' to '^${version}'. [updated: ${updated}/${packages.length}]`
+    try {
+      await spawnPromise('yarn', ['add', versionedPackage], { encoding: 'utf8' })
+      updated++
+    } catch (errorMessage) {
+      spinner.fail()
+      spinner.fail(errorMessage.trim(EOL))
+      spinner.start()
+    }
+  }
+  spinner.info(`Updated ${updated} of ${packages.length}`)
+}
+
+updatePackageJson()

package/src/dataGrid/index.js

@@ -0,0 +1,15 @@
+/* global HTMLElement */
+import { createRoot } from 'react-dom/client'
+
+/**
+ * Renders the cell contents using React 18.x api
+ *
+ * @param {ReactNode} children - renderer contents
+ * @param {Container & { rootRenderer?: Root }} container - HTMLElement root container
+ */
+export const cellRendererFactory = (children, container) => {
+    const root = container?.rootRenderer ?? createRoot(container)
+
+    root.render(children)
+    container.rootRenderer = root
+}

package/src/index.js

@@ -0,0 +1,3 @@
+export * from './initialization/initVivid'
+export * from './patches'
+export * from './dataGrid'

package/src/initialization/initVivid.js

@@ -0,0 +1,24 @@
+/* global HTMLElement */
+import context from '@vonage/vvd-context'
+import { init } from '@vonage/vvd-fonts'
+
+/**
+ * mounts Vivid context (styles) & Fonts into the target scope / document
+ * - target scope may by any `HTMLElement` or `Document` or `DocumentFragment` (including `ShadowRoot`)
+ * - default target (when not specified) is the document visible in the current scope
+ * - the API is idempotent, the style/s will be mounted only once, even if API called multiple times
+ *
+ * @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
+ * @throws {Error} error - if the provided target argument is `null` or not a Node of type `Document` / `DocumentFragment` / `HTMLElement`
+ */
+export const initVivid = (target, callback) => {
+  if (target instanceof HTMLElement) {
+    target.classList.add('vivid-scope')
+    target = undefined
+  }
+  return Promise.all([
+    init(),
+    context.mount(target)
+  ]).then(callback)
+}

package/src/patches/VwcCard/index.js

@@ -0,0 +1,2 @@
+export * from './vwcCardWithMenu'
+export * from './vwcCardHeadingCrop'

package/src/patches/VwcCard/vwcCardHeadingCrop.js

@@ -0,0 +1,28 @@
+import { vwcTooltipEllipsisDecorator } from "../vwcTooltip"
+
+/**
+ * Patches provided `VwcCard` (styles) to crop long heading text and
+ * shows browser tooltip when actually cropped
+ *
+ * @param {HTMLElement} element - target `VwcCard` element to apply the `heading` cropping logic to
+ * @example <VwcCard ref={vwcCardHeadingCropDecorator(text)} heading={text} />
+ */
+export const vwcCardHeadingCropDecorator = text => element =>
+    setTimeout(() => {
+        const cardContentElement = element?.shadowRoot.querySelector(
+            '.vwc-card-content'
+        )
+        const titleElement = element?.shadowRoot.querySelector(
+            '.vwc-card-title'
+        )
+        vwcTooltipEllipsisDecorator(text)(titleElement)
+        if (cardContentElement?.clientWidth < titleElement?.clientWidth) {
+            const computedCardContentStyle = window.getComputedStyle(cardContentElement, null)
+            titleElement.setAttribute('title', text)
+            titleElement.style.width = computedCardContentStyle.getPropertyValue('width')
+            titleElement.style.overflow = 'hidden'
+            titleElement.style.display = 'block'
+            titleElement.style['white-space'] = 'nowrap'
+            titleElement.style['text-overflow'] = 'ellipsis'
+        }
+    }, 0)

package/src/patches/VwcCard/vwcCardWithMenu.js

@@ -0,0 +1,14 @@
+/**
+ * Patches provided `VwcCard` (styles) to allow a sub menu triggered from an
+ * action in the card to appear over the card and not inside of it
+ *
+ * @param {HTMLElement} element - target `VwcCard` element containing the action
+ * that triggers the menu
+ * @example <VwcCard ref={vwcCardWithMenu}><VwcMenu slot='actions' /></VwcCard>
+ */
+export const vwcCardWithMenu = (element) => setTimeout(() => {
+  const card = element?.shadowRoot.querySelector('.vwc-card')
+  if (card) {
+    card.style.overflow = 'unset'
+  }
+}, 0)

package/src/patches/index.js

@@ -0,0 +1,6 @@
+export * from './vwcDataGrid'
+export * from './vwcTooltip'
+export * from './VwcCard'
+export * from './vwcNoteContentOverflow'
+export * from './vwcSnackBarHtmlMessage'
+export * from './vwcSetAttributeValue'

package/src/patches/vwcDataGrid.js

@@ -0,0 +1,26 @@
+const createVaadinGridStylePatchElement = () => {
+    const styleElement = document.createElement('style')
+    styleElement.innerHTML = `
+      #header {
+        z-index: 0;
+      }
+      [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+        overflow: visible;
+      }`
+    return styleElement
+}
+
+/**
+ * Patches `VwcDataGrid` (styles) to allow cell overflow to show
+ * - `VwcSlider` tooltips off the cell boundaries uncropped by the grid
+ *
+ * @param {HTMLElement} gridElement - target datagrid element to mount the CSS into
+ * @example <VwcDataGrid ref={vwcDataGridElementCellOverflowDecorator} />
+ */
+export const vwcDataGridElementCellOverflowDecorator = gridElement =>
+    setTimeout(() => {
+        const component = gridElement?.shadowRoot
+            .querySelector('vaadin-grid')?.shadowRoot
+
+        component && component.append(createVaadinGridStylePatchElement())
+    }, 0)

package/src/patches/vwcNoteContentOverflow.js

@@ -0,0 +1,20 @@
+const createStyleElement = () => {
+  const styleElement = document.createElement('style')
+  styleElement.innerHTML = `
+      .vwc-note {
+        contain: inherit !important;
+      }`
+  return styleElement
+}
+
+/**
+ * Patches `VwcNote` (styles) to allow content overflow
+ *
+ * @param {HTMLElement} noteElement - target element to mount the CSS into
+ * @example <VwcNote ref={vwcNoteContentOverflowDecorator} />
+ */
+export const vwcNoteContentOverflowDecorator = noteElement =>
+  setTimeout(() => {
+    const component = noteElement?.shadowRoot
+    component && component.append(createStyleElement())
+  }, 0)

package/src/patches/vwcSetAttributeValue.js

@@ -0,0 +1,12 @@
+/**
+ * Patches attribute value. You can pass now a `value` to the `VwcIconButton` as
+ * in normal buttons
+ *
+ * @param {any} attribute
+ * @param {any} value
+ * @param {HTMLElement} element
+ * @returns
+ */
+export const vwcSetAttributeValue = (attribute, value) => (element) => {
+  element?.setAttribute(attribute, value)
+}

package/src/patches/vwcSnackBarHtmlMessage.js

@@ -0,0 +1,21 @@
+const createHtmlMessageElement = (html) => {
+  const element = document.createElement('div')
+  element.setAttribute('class', 'mdc-snackbar__label')
+  element.setAttribute('role', 'status')
+  element.setAttribute('aria-live', 'polite')
+  element.innerHTML = html
+  return element
+}
+
+/**
+ * Patches `VwcSnackbar` to allow html message text
+ *
+ * @param {HTMLElement} element - target element to patch
+ * @example <VwcSnackbar ref={vwcSnackBarHtmlMessageDecorator('<b>bold</b>')} />
+ */
+export const vwcSnackBarHtmlMessageDecorator = (htmlMessage = '<b>bold</b>') => element =>
+  setTimeout(() => {
+    const component = element?.shadowRoot.querySelector('.header-and-label')
+    component?.style.setProperty('width', '100%')
+    component?.append(createHtmlMessageElement(htmlMessage))
+  }, 0)

package/src/patches/vwcTooltip.js

@@ -0,0 +1,46 @@
+/**
+ * Patches provided HTMLElement (styles) to crop long text and
+ * shows browser tooltip when actually cropped
+ *
+ * @param {HTMLElement} element - target element to apply the text cropping logic to
+ * @example <span ref={vwcTooltipEllipsisDecorator(text)} >{text}</span>
+ */
+export const vwcTooltipEllipsisDecorator = fullText => element =>
+    setTimeout(() => {
+        const isTextCropped = element?.clientHeight < element?.scrollHeight
+        if (isTextCropped && element) {
+            element.setAttribute('title', fullText)
+        }
+    }, 0)
+
+/**
+* Patches provided VwcTooltip instance to open/close tooltip on mouse hover
+*
+* @param {HTMLElement} tooltipElement - target element to apply behavior to
+* @param {number} timeout - timeout before showing tooltip, default: 1000
+* @param {string} minWidth - min width in pixels, default: 'none'
+* @example <VwcTooltip ref={vwcTooltipShowOnHoverDecorator()} />
+*/
+export const vwcTooltipShowOnHoverDecorator = (minWidth = 'none', timeout = 1000) => tooltipElement =>
+    setTimeout(() => {
+        if (!tooltipElement) {
+            return
+        }
+        const anchorElement = document.getElementById(tooltipElement.anchor)
+        if (!anchorElement) {
+            return
+        }
+        anchorElement.style.setProperty('pointer-events', 'auto')
+        tooltipElement.style.setProperty('--tooltip-inline-size', minWidth)
+
+        let showTimeoutHandler
+        anchorElement.addEventListener("mouseover", () => {
+            showTimeoutHandler = setTimeout(() => {
+                tooltipElement.open = true
+            }, timeout)
+        })
+        anchorElement.addEventListener("mouseout", () => {
+            clearTimeout(showTimeoutHandler)
+            tooltipElement.open = false
+        })
+    }, 0)

package/stories/VwcAccordion/VwcAccordion.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcAccordion from '../../dist/VwcAccordion'
+
+export const Default = () => <VwcAccordion />
+export default {
+  title: 'VwcAccordion',
+  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/stories/VwcActionGroup/VwcActionGroup.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcActionGroup from '../../dist/VwcActionGroup'
+
+export const Default = () => <VwcActionGroup />
+export default {
+  title: 'VwcActionGroup',
+  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/stories/VwcBadge/VwcBadge.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcBadge from '../../dist/VwcBadge'
+
+export const Default = () => <VwcBadge />
+export default {
+  title: 'VwcBadge',
+  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/stories/VwcBanner/VwcBanner.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcBanner from '../../dist/VwcBanner'
+
+export const Default = () => <VwcBanner />
+export default {
+  title: 'VwcBanner',
+  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/stories/VwcButton/VwcButton.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcButton from '../../dist/VwcButton'
+
+export const Default = () => <VwcButton />
+export default {
+  title: 'VwcButton',
+  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/stories/VwcButtonToggleGroup/VwcButtonToggleGroup.stories.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import VwcButtonToggleGroup from '../../dist/VwcButtonToggleGroup'
+import VwcButton from '../../dist/VwcButton'
+
+export const Default = () => {
+  return (
+    <VwcButtonToggleGroup required values={['foo']}>
+      <VwcButton value='foo'>Foo</VwcButton>
+      <VwcButton value='bar'>Bar</VwcButton>
+    </VwcButtonToggleGroup>
+  )
+}
+
+export const RealtimeValuesSet = () => {
+  return (
+    <VwcButtonToggleGroup
+      values={[]}
+      ref={btnGroupElement =>
+        setTimeout(() => {
+          if (!btnGroupElement) {
+            return
+          }
+          btnGroupElement.values = ['bar']
+        }, 0)
+      }
+      required
+    >
+      <VwcButton value='foo'>Foo</VwcButton>
+      <VwcButton value='bar'>Bar</VwcButton>
+    </VwcButtonToggleGroup>
+  )
+}
+
+export default {
+  title: 'VwcButtonToggleGroup',
+  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/stories/VwcCalendar/VwcCalendar.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcCalendar from '../../dist/VwcCalendar'
+
+export const Default = () => <VwcCalendar />
+export default {
+  title: 'VwcCalendar',
+  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/stories/VwcCalendarEvent/VwcCalendarEvent.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcCalendarEvent from '../../dist/VwcCalendarEvent'
+
+export const Default = () => <VwcCalendarEvent />
+export default {
+  title: 'VwcCalendarEvent',
+  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' }
+      //
+    }
+}