@vonage/vivid-react 2.10.47 → 2.10.56

package/stories/VwcTooltip/VwcTooltip.stories.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import VwcTooltip from '../../dist/VwcTooltip'
+import VwcButton from '../../dist/VwcButton'
+import { vwcTooltipShowOnHoverDecorator } from '../../src/patches/vwcTooltip'
+
+export const Default = () => {
+  return (
+    <>
+      <VwcTooltip anchor='btn' id='tooltip' text='Tooltip text' open />
+      <VwcButton
+        label='Button'
+        disabled={true}
+        aria-describedby='tooltip'
+        id='btn'
+      />
+    </>
+  )
+}
+
+export const ShowHideOnADisabledControl = () => {
+  return (
+    <>
+      <VwcTooltip
+        ref={vwcTooltipShowOnHoverDecorator()}
+        anchor='btn'
+        id='tooltip'
+        text='Tooltip text'
+      />
+      <VwcButton
+        label='Button'
+        disabled={true}
+        aria-describedby='tooltip'
+        id='btn'
+      />
+    </>
+  )
+}
+
+export default {
+  title: 'VwcTooltip'
+}

package/stories/VwcTopAppBar/VwcTopAppBar.stories.jsx

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

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

@@ -0,0 +1,94 @@
+import React from 'react'
+import VwcDataGrid from '../../dist/VwcDataGrid'
+import VwcSlider from '../../dist/VwcSlider'
+import VwcDataGridColumn from '../../dist/VwcDataGridColumn'
+import VwcTooltip from '../../dist/VwcTooltip'
+import VwcButton from '../../dist/VwcButton'
+import VwcNote from '../../dist/VwcNote'
+import VwcSelect from '../../dist/VwcSelect'
+import VwcListItem from '../../dist/VwcListItem'
+import VwcSnackbar from '../../dist/VwcSnackbar'
+import VwcIconButton from '../../dist/VwcIconButton'
+
+import {
+  cellRendererFactory,
+  vwcDataGridElementCellOverflowDecorator,
+  vwcTooltipShowOnHoverDecorator
+} from '../../src'
+import { vwcNoteContentOverflowDecorator } from '../../src/patches/vwcNoteContentOverflow'
+import { vwcSnackBarHtmlMessageDecorator } from '../../src/patches/vwcSnackBarHtmlMessage'
+import { vwcSetAttributeValue } from '../../src/patches/vwcSetAttributeValue'
+
+export const VwcTooltipShowOnHover = () => (
+  <>
+    <VwcTooltip
+      ref={vwcTooltipShowOnHoverDecorator()}
+      anchor='btn'
+      id='tooltip'
+      text='Tooltip text'
+    />
+    <VwcButton label='Button' aria-describedby='tooltip' id='btn' />
+  </>
+)
+
+const sliderCellRenderer = (container, { grid }, { item }) =>
+  cellRendererFactory(
+    <VwcSlider pin step={1} value={5} min={1} max={10} />,
+    container
+  )
+
+const dataProvider = ({ page, pageSize }, callback) => {
+  callback([{}], 1)
+}
+
+export const DataGridCellOverflow = () => (
+  <VwcDataGrid
+    ref={vwcDataGridElementCellOverflowDecorator}
+    dataProvider={dataProvider}
+  >
+    <VwcDataGridColumn
+      header='Level'
+      resizable
+      cellRenderer={sliderCellRenderer}
+      footer=''
+    />
+  </VwcDataGrid>
+)
+
+export const AllowContentOverflow = () => (
+  <VwcNote
+    ref={vwcNoteContentOverflowDecorator}
+    header='Allow dropdown content overflow the Note card boundaries'
+  >
+    <VwcSelect>
+      <VwcListItem>Item 1</VwcListItem>
+      <VwcListItem>Item 1</VwcListItem>
+      <VwcListItem>Item 1</VwcListItem>
+      <VwcListItem>Item 1</VwcListItem>
+      <VwcListItem>Item 1</VwcListItem>
+    </VwcSelect>
+  </VwcNote>
+)
+
+export const SnackBarWithHTMLContent = () => (
+  <VwcSnackbar
+    ref={vwcSnackBarHtmlMessageDecorator(
+      'This is <i>truly</i> html <b>message</b>'
+    )}
+    onClosed={e => (e.target.open = true)}
+    legacy
+    header='html message demo'
+    dismissible
+    icon='info'
+    open
+    timeoutMs={9000}
+  ></VwcSnackbar>
+)
+
+export const VwcIconButtonValue = () => (
+  <VwcIconButton ref={vwcSetAttributeValue('value', 'v')}></VwcIconButton>
+)
+
+export default {
+  title: 'Patches'
+}

package/tsconfig.json

@@ -0,0 +1,70 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "ESNext",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    // "lib": ["ES2015"],                     /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "declaration": true,                      /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./dist",                       /* Redirect output structure to the directory. */
+    "rootDir": "./dist.ts",                   /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    "emitDeclarationOnly": true,
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    "typeRoots": ["types"],                   /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
+  }
+}

package/VwcAccordion/index.d.ts

@@ -1,14 +0,0 @@
-import React, { ReactNode } from 'react';
-import '@vonage/vwc-accordion';
-/**
-* @param {boolean} multi  attribute: <VwcAccordion multi />
-*/
-declare const VwcAccordion: (props: {
-    children?: ReactNode;
-    slot?: string | undefined;
-    id?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-    multi?: boolean | undefined;
-}) => JSX.Element;
-export default VwcAccordion;

package/VwcAccordion/index.js

@@ -1,59 +0,0 @@
-/*
-* DO NOT EDIT THIS FILE. IT IS GENERATED
-*/
-/*
-Code in this file were generated using following JSON:
-{
- "name": "vwc-accordion",
- "path": "./../node_modules/@vonage/vwc-accordion/src/vwc-accordion.ts",
- "attributes": [
-  {
-   "name": "multi",
-   "type": "boolean",
-   "default": "false"
-  }
- ],
- "properties": [
-  {
-   "name": "styles",
-   "type": "CSSResult",
-   "default": "\"style\""
-  },
-  {
-   "name": "multi",
-   "attribute": "multi",
-   "type": "boolean",
-   "default": "false",
-   "bindable": false
-  }
- ],
- "events": []
-}
-*/
-import PropTypes from 'prop-types'
-import wrapper from '@vonage/vivid-react-wrapper'
-import '@vonage/vwc-accordion'
-
-
-/**  
-* @param {boolean} multi  attribute: <VwcAccordion multi />
-*/
-const VwcAccordion = wrapper('vwc-accordion',  {
-    events: [],
-    attributes: [],
-    properties: []
-});
-
-VwcAccordion.propTypes = {
-  multi: PropTypes.bool/* default: false *//* attribute: multi */
-}
-
-VwcAccordion.defaultProps = {
-  multi: false
-}
-
-VwcAccordion.displayName = 'VwcAccordion'
-
-
-
-export default VwcAccordion

package/VwcAccordion/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "@vonage/vivid-react-vwc-accordion",
-  "version": "2.10.47",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "private": true,
-  "license": "MIT",
-  "dependencies": {
-    "@vonage/vwc-accordion": "2.37.0"
-  }
-}

package/VwcActionGroup/index.d.ts

@@ -1,18 +0,0 @@
-import React, { ReactNode } from 'react';
-import '@vonage/vwc-action-group';
-/** Represents an action-group custom element.
-* @param {ActionGroupShape | undefined} shape  attribute: <VwcActionGroup shape />
-* @param {ActionGroupLayout | undefined} layout  attribute: <VwcActionGroup layout />
-* @param {boolean} tight  attribute: <VwcActionGroup tight />
-*/
-declare const VwcActionGroup: (props: {
-    children?: ReactNode;
-    slot?: string | undefined;
-    id?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-    shape?: any;
-    layout?: any;
-    tight?: boolean | undefined;
-}) => JSX.Element;
-export default VwcActionGroup;

package/VwcActionGroup/index.js

@@ -1,90 +0,0 @@
-/*
-* DO NOT EDIT THIS FILE. IT IS GENERATED
-*/
-/*
-Code in this file were generated using following JSON:
-{
- "name": "vwc-action-group",
- "path": "./../node_modules/@vonage/vwc-action-group/src/vwc-action-group.ts",
- "description": "Represents an action-group custom element.",
- "attributes": [
-  {
-   "name": "shape",
-   "type": "ActionGroupShape | undefined"
-  },
-  {
-   "name": "layout",
-   "type": "ActionGroupLayout | undefined"
-  },
-  {
-   "name": "tight",
-   "type": "boolean",
-   "default": "false"
-  }
- ],
- "properties": [
-  {
-   "name": "styles",
-   "type": "CSSResult",
-   "default": "\"style\""
-  },
-  {
-   "name": "shape",
-   "attribute": "shape",
-   "type": "ActionGroupShape | undefined",
-   "bindable": false
-  },
-  {
-   "name": "layout",
-   "attribute": "layout",
-   "type": "ActionGroupLayout | undefined",
-   "bindable": false
-  },
-  {
-   "name": "tight",
-   "attribute": "tight",
-   "type": "boolean",
-   "default": "false",
-   "bindable": false
-  }
- ],
- "slots": [
-  {
-   "name": "",
-   "description": "This is a default/unnamed slot to assign text content. *deprecated* please use _text_ property instead"
-  }
- ],
- "events": []
-}
-*/
-import PropTypes from 'prop-types'
-import wrapper from '@vonage/vivid-react-wrapper'
-import '@vonage/vwc-action-group'
-
-
-/** Represents an action-group custom element. 
-* @param {ActionGroupShape | undefined} shape  attribute: <VwcActionGroup shape />
-* @param {ActionGroupLayout | undefined} layout  attribute: <VwcActionGroup layout />
-* @param {boolean} tight  attribute: <VwcActionGroup tight />
-*/
-const VwcActionGroup = wrapper('vwc-action-group',  {
-    events: [],
-    attributes: [],
-    properties: []
-});
-
-VwcActionGroup.propTypes = {
-  shape: PropTypes.any /* ActionGroupShape | undefined *//* attribute: shape */,
-  layout: PropTypes.any /* ActionGroupLayout | undefined *//* attribute: layout */,
-  tight: PropTypes.bool/* default: false *//* attribute: tight */
-}
-
-VwcActionGroup.defaultProps = {
-  tight: false
-}
-
-VwcActionGroup.displayName = 'VwcActionGroup'
-
-
-
-export default VwcActionGroup

package/VwcActionGroup/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "@vonage/vivid-react-vwc-action-group",
-  "version": "2.10.47",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "private": true,
-  "license": "MIT",
-  "dependencies": {
-    "@vonage/vwc-action-group": "2.37.0"
-  }
-}

package/VwcBadge/index.d.ts

@@ -1,29 +0,0 @@
-import React, { ReactNode } from 'react';
-import '@vonage/vwc-badge';
-/** Represents a badge custom element.
-badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink.
-* @param {BadgeConnotation | undefined} connotation  attribute: <VwcBadge connotation />
-* @param {BadgeShape | undefined} shape  attribute: <VwcBadge shape />
-* @param {BadgeLayout | undefined} layout  attribute: <VwcBadge layout />
-* @param {boolean} dense  attribute: <VwcBadge dense />
-* @param {boolean} enlarged  attribute: <VwcBadge enlarged />
-* @param {string | undefined} text  attribute: <VwcBadge text />
-* @param {string | undefined} icon  attribute: <VwcBadge icon />
-* @param {string | undefined} iconTrailing  attribute: <VwcBadge iconTrailing />
-*/
-declare const VwcBadge: (props: {
-    children?: ReactNode;
-    slot?: string | undefined;
-    id?: string | undefined;
-    style?: React.CSSProperties | undefined;
-    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-    connotation?: any;
-    shape?: any;
-    layout?: any;
-    dense?: boolean | undefined;
-    enlarged?: boolean | undefined;
-    text?: string | undefined;
-    icon?: string | undefined;
-    iconTrailing?: string | undefined;
-}) => JSX.Element;
-export default VwcBadge;

package/VwcBadge/index.js

@@ -1,154 +0,0 @@
-/*
-* DO NOT EDIT THIS FILE. IT IS GENERATED
-*/
-/*
-Code in this file were generated using following JSON:
-{
- "name": "vwc-badge",
- "path": "./../node_modules/@vonage/vwc-badge/src/vwc-badge.ts",
- "description": "Represents a badge custom element.\nbadge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink.",
- "attributes": [
-  {
-   "name": "connotation",
-   "type": "BadgeConnotation | undefined"
-  },
-  {
-   "name": "shape",
-   "type": "BadgeShape | undefined"
-  },
-  {
-   "name": "layout",
-   "type": "BadgeLayout | undefined"
-  },
-  {
-   "name": "dense",
-   "type": "boolean",
-   "default": "false"
-  },
-  {
-   "name": "enlarged",
-   "type": "boolean",
-   "default": "false"
-  },
-  {
-   "name": "text",
-   "type": "string | undefined"
-  },
-  {
-   "name": "icon",
-   "type": "string | undefined"
-  },
-  {
-   "name": "iconTrailing",
-   "type": "string | undefined"
-  }
- ],
- "properties": [
-  {
-   "name": "styles",
-   "type": "CSSResult",
-   "default": "\"style\""
-  },
-  {
-   "name": "connotation",
-   "attribute": "connotation",
-   "type": "BadgeConnotation | undefined",
-   "bindable": false
-  },
-  {
-   "name": "shape",
-   "attribute": "shape",
-   "type": "BadgeShape | undefined",
-   "bindable": false
-  },
-  {
-   "name": "layout",
-   "attribute": "layout",
-   "type": "BadgeLayout | undefined",
-   "bindable": false
-  },
-  {
-   "name": "dense",
-   "attribute": "dense",
-   "type": "boolean",
-   "default": "false",
-   "bindable": false
-  },
-  {
-   "name": "enlarged",
-   "attribute": "enlarged",
-   "type": "boolean",
-   "default": "false",
-   "bindable": false
-  },
-  {
-   "name": "text",
-   "attribute": "text",
-   "type": "string | undefined",
-   "bindable": false
-  },
-  {
-   "name": "icon",
-   "attribute": "icon",
-   "type": "string | undefined",
-   "bindable": false
-  },
-  {
-   "name": "iconTrailing",
-   "attribute": "iconTrailing",
-   "type": "string | undefined",
-   "bindable": false
-  }
- ],
- "slots": [
-  {
-   "name": "",
-   "description": "This is a default/unnamed slot to assign text content. *deprecated* please use _text_ property instead"
-  }
- ],
- "events": []
-}
-*/
-import PropTypes from 'prop-types'
-import wrapper from '@vonage/vivid-react-wrapper'
-import '@vonage/vwc-badge'
-
-
-/** Represents a badge custom element.
-badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink. 
-* @param {BadgeConnotation | undefined} connotation  attribute: <VwcBadge connotation />
-* @param {BadgeShape | undefined} shape  attribute: <VwcBadge shape />
-* @param {BadgeLayout | undefined} layout  attribute: <VwcBadge layout />
-* @param {boolean} dense  attribute: <VwcBadge dense />
-* @param {boolean} enlarged  attribute: <VwcBadge enlarged />
-* @param {string | undefined} text  attribute: <VwcBadge text />
-* @param {string | undefined} icon  attribute: <VwcBadge icon />
-* @param {string | undefined} iconTrailing  attribute: <VwcBadge iconTrailing />
-*/
-const VwcBadge = wrapper('vwc-badge',  {
-    events: [],
-    attributes: [],
-    properties: []
-});
-
-VwcBadge.propTypes = {
-  connotation: PropTypes.any /* BadgeConnotation | undefined *//* attribute: connotation */,
-  shape: PropTypes.any /* BadgeShape | undefined *//* attribute: shape */,
-  layout: PropTypes.any /* BadgeLayout | undefined *//* attribute: layout */,
-  dense: PropTypes.bool/* default: false *//* attribute: dense */,
-  enlarged: PropTypes.bool/* default: false *//* attribute: enlarged */,
-  text: PropTypes.string/* attribute: text */,
-  icon: PropTypes.string/* attribute: icon */,
-  iconTrailing: PropTypes.string/* attribute: iconTrailing */
-}
-
-VwcBadge.defaultProps = {
-  dense: false,
-  enlarged: false
-}
-
-VwcBadge.displayName = 'VwcBadge'
-
-
-
-export default VwcBadge

package/VwcBadge/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "@vonage/vivid-react-vwc-badge",
-  "version": "2.10.47",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "private": true,
-  "license": "MIT",
-  "dependencies": {
-    "@vonage/vwc-badge": "2.37.0"
-  }
-}