@vonage/vivid-react 2.10.47 → 2.10.58

package/stories/v2/VwcDataGrid/VwcDataGrid.stories.jsx

@@ -0,0 +1,109 @@
+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'
+
+const sequentalData = (rowBlueprint, totalRows) => {
+  const result = new Array(totalRows)
+  const bpMap = Object.entries(rowBlueprint)
+  for (let i = 0; i < totalRows; i++) {
+    const row = {}
+    for (const [key, value] of bpMap) {
+      if (typeof value === 'string') {
+        row[key] = `${value.replace('{i}', i)}`
+      } else {
+        row[key] = value
+      }
+    }
+    result[i] = row
+  }
+  return result
+}
+
+const dataSourceSimulated = sequentalData(
+  { fname: 'A-{i}', active: false },
+  5000
+)
+
+const dataProvider = ({ page, pageSize }, callback) => {
+  const startIndex = page * pageSize
+  const pageItems = dataSourceSimulated.slice(startIndex, startIndex + pageSize)
+  callback(pageItems, dataSourceSimulated.length)
+}
+
+const switchCellRenderer = (container, { grid }, { item }) =>
+  cellRendererFactory(
+    <VwcSwitch
+      connotation='cta'
+      onChange={() => {
+        item.active = !item.active
+        grid.refreshData()
+      }}
+      checked={item.active}
+    />,
+    container
+  )
+
+const actionCellRenderer = (container, configuration, { item }) =>
+  cellRendererFactory(
+    <VwcButton.CallToAction
+      disabled={item.active}
+      label='Run'
+      onClick={() => alert('Run!')}
+    />,
+    container
+  )
+
+const actionHeaderRenderer = (container, configuration) => {
+  container.style.display = 'flex'
+  container.firstElementChild.style.margin = '0 auto'
+}
+
+export const Default = () => {
+  const setDataGridRef = gridElement => {
+    // Please refere to grid API at this document
+    // https://vivid.vonage.com/?path=/story/components-beta-datagrid-introduction--introduction
+    console.log(gridElement)
+    // gridElement.refreshData()
+    // gridElement.selectItem()
+    // .selectAll()
+    // .deselectAll()
+  }
+
+  return (
+    <VwcDataGrid
+      ref={setDataGridRef}
+      dataProvider={dataProvider}
+      multiSort
+      reordering={false}
+    >
+      <VwcDataGridColumn
+        path='fname'
+        header='First Name'
+        resizable
+        autoWidth
+        footer=''
+      />
+      <VwcDataGridColumn
+        header='Active'
+        resizable
+        cellRenderer={switchCellRenderer}
+        footer=''
+      />
+      <VwcDataGridColumn
+        header='Action'
+        autoWidth
+        resizable
+        headerRenderer={actionHeaderRenderer}
+        cellRenderer={actionCellRenderer}
+        footer=''
+      />
+    </VwcDataGrid>
+  )
+}
+
+export default {
+  title: 'V2/VwcDataGrid'
+}

package/stories/v2/VwcDataGridColumn/VwcDataGridColumn.stories.jsx

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcEmptyState from '../../../dist/VwcEmptyState'
+
+export const Default = () => <VwcEmptyState body="body" icon="chat-line" heading="heading" />
+export default {
+  title: 'V2/VwcEmptyState',
+  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/v2/VwcExpansionPanel/VwcExpansionPanel.stories.jsx

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,63 @@
+import React from 'react'
+import VwcLayout from '../../../dist/VwcLayout'
+import VwcCard from '../../../dist/VwcCard'
+
+const testData = [
+  'understand cognitive dangerous child consistent efficient temperature limit silver viewer ',
+  'capital wet aware executive anyone typically cow bother apart reduce bother cow ',
+  'song chef crop need permanent management drawing pure likely competitor competitor ',
+  'global chemical flight demonstration sigh highway gradually threat introduce than global ',
+  'whereas birth finish maker chest ourselves celebrate different routine serve different ',
+  'bedroom act another military count team tight aspect die anymore tight tight count ',
+  'everyday tomato landscape ahead soft spend ensure overcome earn letter ensure ',
+  'recognize bomb meter solve engineering breakfast nonetheless habit physician consist recognize ',
+  'soft document limitation replace asleep exhibition faculty accident big study exhibition ',
+  'explode inflation lift clue certainly practice accompany choose beneath cope cope '
+]
+
+export const Default = () => {
+  return (
+    <>
+      <VwcLayout>
+        {testData.map((d, i) => (
+          <VwcCard key={i} text={d} />
+        ))}
+      </VwcLayout>
+      <VwcLayout columnBasis='sm' columnSpacing='xs'>
+        {testData.map((d, i) => (
+          <VwcCard key={i} text={d} />
+        ))}
+      </VwcLayout>
+      <VwcLayout columnBasis='md' columnSpacing='md'>
+        {testData.map((d, i) => (
+          <VwcCard key={i} text={d} />
+        ))}
+      </VwcLayout>
+      <VwcLayout columnBasis='lg' columnSpacing='md'>
+        {testData.map((d, i) => (
+          <VwcCard key={i} text={d} />
+        ))}
+      </VwcLayout>
+      <VwcLayout columnBasis='block'>
+        {testData.map((d, i) => (
+          <VwcCard key={i} text={d} />
+        ))}
+      </VwcLayout>
+    </>
+  )
+}
+
+export default {
+  title: 'V2/VwcLayout',
+  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/v2/VwcLinearProgress/VwcLinearProgress.stories.jsx

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

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

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

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import VwcMenu from '../../../dist/VwcMenu'
+import VwcButton from '../../../dist/VwcButton'
+import VwcListItem from '../../../dist/VwcListItem'
+
+function anchorClickHandler () {
+  const anchor = document.querySelector('#button')
+  const menu = document.querySelector('#menu')
+  menu.anchor = anchor
+  menu.open = true
+}
+
+export const Default = () => (
+  <>
+    <VwcButton
+      id='button'
+      label='Open menu'
+      onClick={() => anchorClickHandler()}
+    ></VwcButton>
+    <VwcMenu
+      id='menu'
+      corner='BOTTOM_RIGHT'
+      onSelected={e => console.log(`Selected: `, e)}
+      onAction={e => console.log(`Action: `, e)}
+      onOpened={e => console.log(`Opened: `, e)}
+      onClosed={e => console.log(`Closed: `, e)}
+    >
+      <VwcListItem>
+        <div>Basic item 1</div>
+      </VwcListItem>
+      <VwcListItem>
+        <div>Basic item 2</div>
+      </VwcListItem>
+    </VwcMenu>
+  </>
+)
+
+export default {
+  title: 'V2/VwcMenu',
+  argTypes: {}
+}

package/stories/v2/VwcNotchedOutline/VwcNotchedOutline.stories.jsx

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

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