@vonage/vivid-react 0.0.1 → 2.10.47

package/VwcTopAppBarFixed/index.js

@@ -0,0 +1,88 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "name": "vwc-top-app-bar-fixed",
+ "path": "./../node_modules/@vonage/vwc-top-app-bar-fixed/src/vwc-top-app-bar-fixed.ts",
+ "description": "This component is an extension of [<mwc-top-app-bar-fixed>](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)",
+ "attributes": [
+  {
+   "name": "alternate",
+   "type": "boolean",
+   "default": "false"
+  }
+ ],
+ "properties": [
+  {
+   "name": "alternate",
+   "attribute": "alternate",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  },
+  {
+   "name": "styles",
+   "type": "CSSResult[]",
+   "default": "[\"MWCTopAppBarStyles\",\"VWCTopAppBarStyle\"]"
+  },
+  {
+   "name": "prominent",
+   "type": "boolean",
+   "bindable": false
+  },
+  {
+   "name": "dense",
+   "type": "boolean",
+   "bindable": false
+  },
+  {
+   "name": "centerTitle",
+   "type": "boolean",
+   "bindable": false
+  },
+  {
+   "name": "scrollTarget",
+   "type": "HTMLElement | Window",
+   "bindable": false
+  }
+ ],
+ "events": []
+}
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+import '@vonage/vwc-top-app-bar-fixed'
+
+
+/** This component is an extension of [<mwc-top-app-bar-fixed>](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed) 
+* @param {boolean} alternate  attribute: &lt;VwcTopAppBarFixed alternate />
+* @param {boolean} prominent  
+* @param {boolean} dense  
+* @param {boolean} centerTitle  
+* @param {HTMLElement | Window} scrollTarget  
+*/
+const VwcTopAppBarFixed = wrapper('vwc-top-app-bar-fixed',  {
+    events: [],
+    attributes: [],
+    properties: []
+});
+
+VwcTopAppBarFixed.propTypes = {
+  alternate: PropTypes.bool/* default: false *//* attribute: alternate */,
+  prominent: PropTypes.bool,
+  dense: PropTypes.bool,
+  centerTitle: PropTypes.bool,
+  scrollTarget: PropTypes.any /* HTMLElement | Window */
+}
+
+VwcTopAppBarFixed.defaultProps = {
+  alternate: false
+}
+
+VwcTopAppBarFixed.displayName = 'VwcTopAppBarFixed'
+
+
+
+export default VwcTopAppBarFixed

package/VwcTopAppBarFixed/package.json

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

package/index.js

@@ -0,0 +1,281 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var context = require('@vonage/vvd-context');
+var vvdFonts = require('@vonage/vvd-fonts');
+var m = require('react-dom');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var context__default = /*#__PURE__*/_interopDefaultLegacy(context);
+var m__default = /*#__PURE__*/_interopDefaultLegacy(m);
+
+/* global HTMLElement */
+/**
+ * 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`
+ */
+
+var initVivid = function initVivid(target, callback) {
+  if (target instanceof HTMLElement) {
+    target.classList.add('vivid-scope');
+    target = undefined;
+  }
+
+  return Promise.all([vvdFonts.init(), context__default["default"].mount(target)]).then(callback);
+};
+
+var createVaadinGridStylePatchElement = function createVaadinGridStylePatchElement() {
+  var styleElement = document.createElement('style');
+  styleElement.innerHTML = "\n      #header {\n        z-index: 0;\n      }\n      [part~='cell'] ::slotted(vaadin-grid-cell-content) {\n        overflow: visible;\n      }";
+  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} />
+ */
+
+
+var vwcDataGridElementCellOverflowDecorator = function vwcDataGridElementCellOverflowDecorator(gridElement) {
+  return setTimeout(function () {
+    var _gridElement$shadowRo;
+
+    var component = gridElement === null || gridElement === void 0 ? void 0 : (_gridElement$shadowRo = gridElement.shadowRoot.querySelector('vaadin-grid')) === null || _gridElement$shadowRo === void 0 ? void 0 : _gridElement$shadowRo.shadowRoot;
+    component && component.append(createVaadinGridStylePatchElement());
+  }, 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>
+ */
+var vwcTooltipEllipsisDecorator = function vwcTooltipEllipsisDecorator(fullText) {
+  return function (element) {
+    return setTimeout(function () {
+      var isTextCropped = (element === null || element === void 0 ? void 0 : element.clientHeight) < (element === null || element === void 0 ? void 0 : 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()} />
+*/
+
+var vwcTooltipShowOnHoverDecorator = function vwcTooltipShowOnHoverDecorator() {
+  var minWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'none';
+  var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+  return function (tooltipElement) {
+    return setTimeout(function () {
+      if (!tooltipElement) {
+        return;
+      }
+
+      var anchorElement = document.getElementById(tooltipElement.anchor);
+
+      if (!anchorElement) {
+        return;
+      }
+
+      anchorElement.style.setProperty('pointer-events', 'auto');
+      tooltipElement.style.setProperty('--tooltip-inline-size', minWidth);
+      var showTimeoutHandler;
+      anchorElement.addEventListener("mouseover", function () {
+        showTimeoutHandler = setTimeout(function () {
+          tooltipElement.open = true;
+        }, timeout);
+      });
+      anchorElement.addEventListener("mouseout", function () {
+        clearTimeout(showTimeoutHandler);
+        tooltipElement.open = false;
+      });
+    }, 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>
+ */
+var vwcCardWithMenu = function vwcCardWithMenu(element) {
+  return setTimeout(function () {
+    var card = element === null || element === void 0 ? void 0 : element.shadowRoot.querySelector('.vwc-card');
+
+    if (card) {
+      card.style.overflow = 'unset';
+    }
+  }, 0);
+};
+
+/**
+ * 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} />
+ */
+
+var vwcCardHeadingCropDecorator = function vwcCardHeadingCropDecorator(text) {
+  return function (element) {
+    return setTimeout(function () {
+      var cardContentElement = element === null || element === void 0 ? void 0 : element.shadowRoot.querySelector('.vwc-card-content');
+      var titleElement = element === null || element === void 0 ? void 0 : element.shadowRoot.querySelector('.vwc-card-title');
+      vwcTooltipEllipsisDecorator(text)(titleElement);
+
+      if ((cardContentElement === null || cardContentElement === void 0 ? void 0 : cardContentElement.clientWidth) < (titleElement === null || titleElement === void 0 ? void 0 : titleElement.clientWidth)) {
+        var 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);
+  };
+};
+
+var createStyleElement = function createStyleElement() {
+  var styleElement = document.createElement('style');
+  styleElement.innerHTML = "\n      .vwc-note {\n        contain: inherit !important;\n      }";
+  return styleElement;
+};
+/**
+ * Patches `VwcNote` (styles) to allow content overflow
+ *
+ * @param {HTMLElement} noteElement - target element to mount the CSS into
+ * @example <VwcNote ref={vwcNoteContentOverflowDecorator} />
+ */
+
+
+var vwcNoteContentOverflowDecorator = function vwcNoteContentOverflowDecorator(noteElement) {
+  return setTimeout(function () {
+    var component = noteElement === null || noteElement === void 0 ? void 0 : noteElement.shadowRoot;
+    component && component.append(createStyleElement());
+  }, 0);
+};
+
+var createHtmlMessageElement = function createHtmlMessageElement(html) {
+  var 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>')} />
+ */
+
+
+var vwcSnackBarHtmlMessageDecorator = function vwcSnackBarHtmlMessageDecorator() {
+  var htmlMessage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '<b>bold</b>';
+  return function (element) {
+    return setTimeout(function () {
+      var component = element === null || element === void 0 ? void 0 : element.shadowRoot.querySelector('.header-and-label');
+      component === null || component === void 0 ? void 0 : component.style.setProperty('width', '100%');
+      component === null || component === void 0 ? void 0 : component.append(createHtmlMessageElement(htmlMessage));
+    }, 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
+ */
+var vwcSetAttributeValue = function vwcSetAttributeValue(attribute, value) {
+  return function (element) {
+    element === null || element === void 0 ? void 0 : element.setAttribute(attribute, value);
+  };
+};
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+var client = createCommonjsModule(function (module, exports) {
+
+
+if (process.env.NODE_ENV === 'production') {
+  exports.createRoot = m__default["default"].createRoot;
+  exports.hydrateRoot = m__default["default"].hydrateRoot;
+} else {
+  var i = m__default["default"].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  exports.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m__default["default"].createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  exports.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m__default["default"].hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+});
+
+/* global HTMLElement */
+/**
+ * Renders the cell contents using React 18.x api
+ *
+ * @param {ReactNode} children - renderer contents
+ * @param {Container & { rootRenderer?: Root }} container - HTMLElement root container
+ */
+
+var cellRendererFactory = function cellRendererFactory(children, container) {
+  var _container$rootRender;
+
+  var root = (_container$rootRender = container === null || container === void 0 ? void 0 : container.rootRenderer) !== null && _container$rootRender !== void 0 ? _container$rootRender : client.createRoot(container);
+  root.render(children);
+  container.rootRenderer = root;
+};
+
+exports.cellRendererFactory = cellRendererFactory;
+exports.initVivid = initVivid;
+exports.vwcCardHeadingCropDecorator = vwcCardHeadingCropDecorator;
+exports.vwcCardWithMenu = vwcCardWithMenu;
+exports.vwcDataGridElementCellOverflowDecorator = vwcDataGridElementCellOverflowDecorator;
+exports.vwcNoteContentOverflowDecorator = vwcNoteContentOverflowDecorator;
+exports.vwcSetAttributeValue = vwcSetAttributeValue;
+exports.vwcSnackBarHtmlMessageDecorator = vwcSnackBarHtmlMessageDecorator;
+exports.vwcTooltipEllipsisDecorator = vwcTooltipEllipsisDecorator;
+exports.vwcTooltipShowOnHoverDecorator = vwcTooltipShowOnHoverDecorator;

package/package.json

@@ -1,12 +1,140 @@
 {
   "name": "@vonage/vivid-react",
-  "version": "0.0.1",
-  "description": "",
+  "version": "2.10.47",
+  "description": "Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings",
   "main": "index.js",
+  "types": "types/index.d.ts",
+  "license": "MIT",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "yarn generateWrappers && rollup -c",
+    "generateWrappers": "node scripts/cli.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "preversion": "yarn updateDocs && git add README.md",
+    "postversion": "git push --follow-tags",
+    "storybook": "start-storybook -p 6006",
+    "prestorybook": "yarn generateWrappers",
+    "updateDocs": "node scripts/updateDocs.js",
+    "updateVividPackages": "node scripts/updateVividPackages.js"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
-}
+  "keywords": [
+    "Vivid",
+    "React",
+    "Custom Element",
+    "Wrapper",
+    "Utility",
+    "Generator",
+    "CLI"
+  ],
+  "dependencies": {
+    "@vonage/vivid-react-wrapper": "1.2.3",
+    "@vonage/vvd-context": "2.37.0",
+    "@vonage/vvd-core": "2.37.0",
+    "@vonage/vvd-fonts": "2.37.0",
+    "@vonage/vwc-accordion": "2.37.0",
+    "@vonage/vwc-action-group": "2.37.0",
+    "@vonage/vwc-badge": "2.37.0",
+    "@vonage/vwc-banner": "2.37.0",
+    "@vonage/vwc-button": "2.37.0",
+    "@vonage/vwc-button-toggle-group": "2.37.0",
+    "@vonage/vwc-calendar": "2.37.0",
+    "@vonage/vwc-card": "2.37.0",
+    "@vonage/vwc-carousel": "2.37.0",
+    "@vonage/vwc-checkbox": "2.37.0",
+    "@vonage/vwc-chips": "2.37.0",
+    "@vonage/vwc-circular-progress": "2.37.0",
+    "@vonage/vwc-data-grid": "2.37.0",
+    "@vonage/vwc-datepicker": "2.37.0",
+    "@vonage/vwc-dialog": "2.37.0",
+    "@vonage/vwc-drawer": "2.37.0",
+    "@vonage/vwc-dropdown": "2.37.0",
+    "@vonage/vwc-elevation": "2.37.0",
+    "@vonage/vwc-empty-state": "2.37.0",
+    "@vonage/vwc-expansion-panel": "2.37.0",
+    "@vonage/vwc-fab": "2.37.0",
+    "@vonage/vwc-file-picker": "2.37.0",
+    "@vonage/vwc-formfield": "2.37.0",
+    "@vonage/vwc-helper-message": "2.37.0",
+    "@vonage/vwc-icon": "2.37.0",
+    "@vonage/vwc-icon-button": "2.37.0",
+    "@vonage/vwc-icon-button-toggle": "2.37.0",
+    "@vonage/vwc-keypad": "2.37.0",
+    "@vonage/vwc-layout": "2.37.0",
+    "@vonage/vwc-linear-progress": "2.37.0",
+    "@vonage/vwc-list": "2.37.0",
+    "@vonage/vwc-menu": "2.37.0",
+    "@vonage/vwc-notched-outline": "2.37.0",
+    "@vonage/vwc-note": "2.37.0",
+    "@vonage/vwc-pagination": "2.37.0",
+    "@vonage/vwc-popup": "2.37.0",
+    "@vonage/vwc-radio": "2.37.0",
+    "@vonage/vwc-scheme-select": "2.37.0",
+    "@vonage/vwc-select": "2.37.0",
+    "@vonage/vwc-side-drawer": "2.37.0",
+    "@vonage/vwc-slider": "2.37.0",
+    "@vonage/vwc-snackbar": "2.37.0",
+    "@vonage/vwc-surface": "2.37.0",
+    "@vonage/vwc-switch": "2.37.0",
+    "@vonage/vwc-tab-bar": "2.37.0",
+    "@vonage/vwc-tags": "2.37.0",
+    "@vonage/vwc-text": "2.37.0",
+    "@vonage/vwc-textarea": "2.37.0",
+    "@vonage/vwc-textfield": "2.37.0",
+    "@vonage/vwc-theme-switch": "2.37.0",
+    "@vonage/vwc-tooltip": "2.37.0",
+    "@vonage/vwc-top-app-bar": "2.37.0",
+    "@vonage/vwc-top-app-bar-fixed": "2.37.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/runtime": "^7.13.17",
+    "@material-ui/core": "^4.11.1",
+    "@octokit/core": "^3.1.2",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@storybook/addon-actions": "6.5.13",
+    "@storybook/addon-controls": "6.5.13",
+    "@storybook/addon-essentials": "6.5.13",
+    "@storybook/addon-links": "6.5.13",
+    "@storybook/addons": "6.5.13",
+    "@storybook/react": "6.5.13",
+    "@types/react": "16.9.49",
+    "@webcomponents/webcomponentsjs": "^2.5.0",
+    "babel-jest": "^26.6.1",
+    "babel-loader": "^8.2.2",
+    "extract-zip": "2.0.1",
+    "fs-extra": "^9.0.1",
+    "jest": "^26.6.1",
+    "lodash": "^4.17.20",
+    "mkdirp": "1.0.4",
+    "ora": "^5.1.0",
+    "react": ">=16.8",
+    "react-dom": ">=16.8",
+    "rollup": "^2.35.0",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "standard": "^16.0.4",
+    "typescript": "4.3.5",
+    "web-component-analyzer": "2.0.0-next.4"
+  },
+  "resolutions": {
+    "glob-parent": "^5.1.2",
+    "trim": "^0.0.3",
+    "trim-newlines": "^3.0.1",
+    "terser": "^5.14.2",
+    "loader-utils": "2.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "optionalDependencies": {
+    "prop-types": "^15.7.2"
+  }
+}

package/testing/component.mock.js

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default (props) => <div {...props} />

package/types/index.d.ts

@@ -0,0 +1,2 @@
+declare module '@vonage/vivid-react-wrapper';
+declare module '@vonage/vivid-react';