@vonage/vivid-react 2.10.47 → 2.10.56

package/stories/VwcCard/VwcCard.stories.jsx

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

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

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

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

package/stories/VwcCheckbox/VwcCheckbox.stories.jsx

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

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import VwcChipSet from '../../dist/VwcChipSet'
+import VwcChip from '../../dist/VwcChip'
+
+export const Default = (argTypes) =>
+  <VwcChipSet {...argTypes}>
+    <VwcChip label='Chip one' />
+    <VwcChip label='Chip two' />
+    <VwcChip label='Chip three' />
+  </VwcChipSet>
+
+export const Filter = (argTypes) =>
+  <VwcChipSet {...argTypes}>
+    <VwcChip label='Chip one' selected />
+    <VwcChip label='Chip two' />
+    <VwcChip label='Chip three' />
+  </VwcChipSet>
+
+export default {
+  title: 'VwcChipSet',
+  argTypes: {
+    type: {
+      options: ['action', 'input', 'choice', 'filter'],
+      control: { type: 'select' },
+      defaultValue: 'filter'
+    },
+    onSelection: { action: 'onSelection' },
+
+    //
+    // 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/VwcCircularProgress/VwcCircularProgress.stories.jsx

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

package/stories/VwcDataGridColumn/VwcDataGridColumn.stories.jsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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