@vonage/vivid-react 2.10.56 → 2.10.59

package/scripts/updateVividPackages.js

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

@@ -1,15 +0,0 @@
-/* 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

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

package/src/initialization/initVivid.js

@@ -1,24 +0,0 @@
-/* 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

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

package/src/patches/VwcCard/vwcCardHeadingCrop.js

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

@@ -1,14 +0,0 @@
-/**
- * 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

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

package/src/patches/vwcDataGrid.js

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

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

@@ -1,12 +0,0 @@
-/**
- * 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

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

@@ -1,46 +0,0 @@
-/**
- * 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

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

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

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

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

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

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

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

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

package/stories/VwcCard/VwcCard.stories.jsx

@@ -1,90 +0,0 @@
-import React from 'react'
-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'
-
-export const Default = () => (
-  <>
-    <div
-      style={{
-        width: '200px'
-      }}
-    >
-      <VwcCard
-        style={{
-          '--title-line-clamp': 2
-        }}
-        heading={originalText}
-        ref={vwcCardHeadingCropDecorator(originalText)}
-        subtitle='Subtitle'
-      ></VwcCard>
-    </div>
-
-    <div
-      style={{
-        width: '200px'
-      }}
-    >
-      <VwcCard
-        style={{
-          '--title-line-clamp': 2
-        }}
-        heading={damnLoongWordText}
-        ref={vwcCardHeadingCropDecorator(damnLoongWordText)}
-        subtitle='Subtitle'
-      ></VwcCard>
-    </div>
-
-    <VwcCard
-      label='All Options'
-      heading='All Options on Deck'
-      icon='chat-line'
-      subtitle='Subtitle'
-      text="Use the 'footer' slot in order to add actionable items."
-    >
-      <VwcIconButton
-        slot='graphic'
-        connotation='alert'
-        icon='bin'
-        shape='circled'
-      />
-      <div
-        style={{
-          height: '150px',
-          width: '100%',
-          backgroundColor: '#871EFF'
-        }}
-        slot='media'
-      ></div>
-      <VwcIconButton
-        slot='meta'
-        connotation='alert'
-        icon='bin'
-        shape='circled'
-      />
-      <VwcIconButton
-        slot='footer'
-        connotation='alert'
-        icon='bin'
-        shape='circled'
-      />
-    </VwcCard>
-  </>
-)
-export default {
-  title: 'VwcCard',
-  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/VwcCarousel/VwcCarousel.stories.jsx

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

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

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