@zohodesk/dot 1.0.0-temp-193.1 → 1.0.0-temp-193.3

package/es/v1/DotProvider/downloadAssets.js

@@ -0,0 +1,29 @@
+import { getAppearance, getTheme, getZoomSize, getFontSize } from './libraryChunks/dynamicImports';
+export function downloadAssets(_ref) {
+  let {
+    appearance,
+    theme,
+    baseZoomSize,
+    baseFontSize,
+    providerElement,
+    sizeVariableName,
+    fontSizeVariableName
+  } = _ref;
+  const promises = [];
+  const libAppearance = getAppearance(appearance);
+  promises.push(libAppearance);
+  const libTheme = getTheme(appearance, theme);
+  promises.push(libTheme);
+  const zoomSize = getZoomSize();
+  promises.push(zoomSize);
+  const fontSize = getFontSize();
+  promises.push(fontSize);
+  const providerElem = providerElement();
+
+  if (providerElem) {
+    providerElem.style.setProperty(sizeVariableName, baseZoomSize);
+    providerElem.style.setProperty(fontSizeVariableName, baseFontSize);
+  }
+
+  return Promise.all(promises);
+}

package/es/v1/DotProvider/libraryChunks/dynamicImports.js

@@ -2,13 +2,17 @@ import { importFiles } from "../../../../es/v1/DotProvider/utils/importFiles";
 import { appearanceImports, appearanceMapping } from "../utils/appearanceProperties";
 import { themeImports, themeMapping } from "../utils/themeProperties";
 import { imports, mapping } from "../utils/sizeProperties";
-import { errorMessage } from "../utils/errorMessage";
+import { errorValidation } from "../utils/errorValidation";
 const defaultLib = ['component', 'dot', 'svg'];
 const modeArray = ['light', 'dark', 'pureDark'];
 const themeArray = ['blue', 'green', 'orange', 'red', 'yellow'];
 export function getAppearance(mode) {
   const libArray = defaultLib;
-  errorMessage(modeArray, mode, 'appearance');
+  errorValidation({
+    options: modeArray,
+    value: mode,
+    type: 'appearance'
+  });
   const importFilesArray = [];
   libArray.map(libName => {
     const importFile = appearanceMapping[libName][mode];
@@ -21,7 +25,11 @@ export function getAppearance(mode) {
 }
 export function getTheme(mode, theme) {
   const libArray = defaultLib;
-  errorMessage(themeArray, theme, 'theme');
+  errorValidation({
+    options: themeArray,
+    value: theme,
+    type: 'theme'
+  });
   const importFilesArray = [];
   libArray.map(libName => {
     const importFile = themeMapping[libName][theme][mode];

package/es/v1/DotProvider/useDotProvider.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect } from 'react';
-import { providerAssets } from './providerAssets';
+import { downloadAssets } from './downloadAssets';
 import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
 import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
 import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
@@ -14,27 +14,27 @@ function useDotProvider(_ref) {
   let {
     appearance = 'light',
     theme = 'blue',
-    baseZoomSize = 1,
-    baseFontSize = 16,
-    providerRef = () => {
+    baseZoomSize = '1px',
+    baseFontSize = '16px',
+    providerElement = () => {
       return document.documentElement;
     },
     getAssetPromise,
-    sizeVariableName = '--zd_baseSize',
-    fontSizeVariableName = '--zd_baseFontSize'
+    sizeVariableName = '--zd_baseUnit',
+    fontSizeVariableName = '--zd_baseFontUnit'
   } = _ref;
   useLayoutEffect(() => {
-    providerAssets({
+    const assetPromise = downloadAssets({
       appearance,
       theme,
       baseZoomSize,
       baseFontSize,
-      providerRef,
-      getAssetPromise,
+      providerElement,
       sizeVariableName,
       fontSizeVariableName
     });
-  }, [appearance, theme, baseZoomSize, baseFontSize, providerRef, getAssetPromise, sizeVariableName, fontSizeVariableName]);
+    getAssetPromise && getAssetPromise(assetPromise);
+  }, [appearance, theme, baseZoomSize, baseFontSize, providerElement, getAssetPromise, sizeVariableName, fontSizeVariableName]);
 }
 
 export default useDotProvider;

package/es/v1/DotProvider/utils/errorValidation.js

@@ -0,0 +1,13 @@
+export function errorValidation(_ref) {
+  let {
+    options,
+    value,
+    type
+  } = _ref;
+
+  if (!options.includes(value)) {
+    throw new Error(`We do not support the '${value} in ${type}'. Please provide valid '${type}' values or check spelling.`);
+  }
+
+  return;
+}

package/es/v1/DotProvider/utils/importFiles.js

@@ -8,11 +8,10 @@ export function importFiles(_ref) {
     if (imports[fileKey]) {
       promises.push(imports[fileKey]());
     } else {
-      console.error(`Import not found for ${fileKey}`);
+      console.error(`Import not found for ${fileKey} from ${imports}`);
     }
   });
-  return Promise.all(promises).then(() => Promise.resolve()).catch(error => {
+  return Promise.all(promises).catch(error => {
     console.error(`Error importing files:`, error);
-    return Promise.reject(error);
   });
 }

package/lib/v1/DotProvider/downloadAssets.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.downloadAssets = downloadAssets;
+
+var _dynamicImports = require("./libraryChunks/dynamicImports");
+
+function downloadAssets(_ref) {
+  var appearance = _ref.appearance,
+      theme = _ref.theme,
+      baseZoomSize = _ref.baseZoomSize,
+      baseFontSize = _ref.baseFontSize,
+      providerElement = _ref.providerElement,
+      sizeVariableName = _ref.sizeVariableName,
+      fontSizeVariableName = _ref.fontSizeVariableName;
+  var promises = [];
+  var libAppearance = (0, _dynamicImports.getAppearance)(appearance);
+  promises.push(libAppearance);
+  var libTheme = (0, _dynamicImports.getTheme)(appearance, theme);
+  promises.push(libTheme);
+  var zoomSize = (0, _dynamicImports.getZoomSize)();
+  promises.push(zoomSize);
+  var fontSize = (0, _dynamicImports.getFontSize)();
+  promises.push(fontSize);
+  var providerElem = providerElement();
+
+  if (providerElem) {
+    providerElem.style.setProperty(sizeVariableName, baseZoomSize);
+    providerElem.style.setProperty(fontSizeVariableName, baseFontSize);
+  }
+
+  return Promise.all(promises);
+}

package/lib/v1/DotProvider/libraryChunks/dynamicImports.js

@@ -16,7 +16,7 @@ var _themeProperties = require("../utils/themeProperties");
 
 var _sizeProperties = require("../utils/sizeProperties");
 
-var _errorMessage = require("../utils/errorMessage");
+var _errorValidation = require("../utils/errorValidation");
 
 var defaultLib = ['component', 'dot', 'svg'];
 var modeArray = ['light', 'dark', 'pureDark'];
@@ -24,7 +24,11 @@ var themeArray = ['blue', 'green', 'orange', 'red', 'yellow'];
 
 function getAppearance(mode) {
   var libArray = defaultLib;
-  (0, _errorMessage.errorMessage)(modeArray, mode, 'appearance');
+  (0, _errorValidation.errorValidation)({
+    options: modeArray,
+    value: mode,
+    type: 'appearance'
+  });
   var importFilesArray = [];
   libArray.map(function (libName) {
     var importFile = _appearanceProperties.appearanceMapping[libName][mode];
@@ -38,7 +42,11 @@ function getAppearance(mode) {
 
 function getTheme(mode, theme) {
   var libArray = defaultLib;
-  (0, _errorMessage.errorMessage)(themeArray, theme, 'theme');
+  (0, _errorValidation.errorValidation)({
+    options: themeArray,
+    value: theme,
+    type: 'theme'
+  });
   var importFilesArray = [];
   libArray.map(function (libName) {
     var importFile = _themeProperties.themeMapping[libName][theme][mode];

package/lib/v1/DotProvider/useDotProvider.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _react = require("react");
 
-var _providerAssets = require("./providerAssets");
+var _downloadAssets = require("./downloadAssets");
 
 require("@zohodesk/components/assets/Contrast/lightContrastLightness.module.css");
 
@@ -33,30 +33,30 @@ function useDotProvider(_ref) {
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'blue' : _ref$theme,
       _ref$baseZoomSize = _ref.baseZoomSize,
-      baseZoomSize = _ref$baseZoomSize === void 0 ? 1 : _ref$baseZoomSize,
+      baseZoomSize = _ref$baseZoomSize === void 0 ? '1px' : _ref$baseZoomSize,
       _ref$baseFontSize = _ref.baseFontSize,
-      baseFontSize = _ref$baseFontSize === void 0 ? 16 : _ref$baseFontSize,
-      _ref$providerRef = _ref.providerRef,
-      providerRef = _ref$providerRef === void 0 ? function () {
+      baseFontSize = _ref$baseFontSize === void 0 ? '16px' : _ref$baseFontSize,
+      _ref$providerElement = _ref.providerElement,
+      providerElement = _ref$providerElement === void 0 ? function () {
     return document.documentElement;
-  } : _ref$providerRef,
+  } : _ref$providerElement,
       getAssetPromise = _ref.getAssetPromise,
       _ref$sizeVariableName = _ref.sizeVariableName,
-      sizeVariableName = _ref$sizeVariableName === void 0 ? '--zd_baseSize' : _ref$sizeVariableName,
+      sizeVariableName = _ref$sizeVariableName === void 0 ? '--zd_baseUnit' : _ref$sizeVariableName,
       _ref$fontSizeVariable = _ref.fontSizeVariableName,
-      fontSizeVariableName = _ref$fontSizeVariable === void 0 ? '--zd_baseFontSize' : _ref$fontSizeVariable;
+      fontSizeVariableName = _ref$fontSizeVariable === void 0 ? '--zd_baseFontUnit' : _ref$fontSizeVariable;
   (0, _react.useLayoutEffect)(function () {
-    (0, _providerAssets.providerAssets)({
+    var assetPromise = (0, _downloadAssets.downloadAssets)({
       appearance: appearance,
       theme: theme,
       baseZoomSize: baseZoomSize,
       baseFontSize: baseFontSize,
-      providerRef: providerRef,
-      getAssetPromise: getAssetPromise,
+      providerElement: providerElement,
       sizeVariableName: sizeVariableName,
       fontSizeVariableName: fontSizeVariableName
     });
-  }, [appearance, theme, baseZoomSize, baseFontSize, providerRef, getAssetPromise, sizeVariableName, fontSizeVariableName]);
+    getAssetPromise && getAssetPromise(assetPromise);
+  }, [appearance, theme, baseZoomSize, baseFontSize, providerElement, getAssetPromise, sizeVariableName, fontSizeVariableName]);
 }
 
 var _default = useDotProvider;

package/lib/v1/DotProvider/utils/errorValidation.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.errorValidation = errorValidation;
+
+function errorValidation(_ref) {
+  var options = _ref.options,
+      value = _ref.value,
+      type = _ref.type;
+
+  if (!options.includes(value)) {
+    throw new Error("We do not support the '".concat(value, " in ").concat(type, "'. Please provide valid '").concat(type, "' values or check spelling."));
+  }
+
+  return;
+}

package/lib/v1/DotProvider/utils/importFiles.js

@@ -13,13 +13,10 @@ function importFiles(_ref) {
     if (imports[fileKey]) {
       promises.push(imports[fileKey]());
     } else {
-      console.error("Import not found for ".concat(fileKey));
+      console.error("Import not found for ".concat(fileKey, " from ").concat(imports));
     }
   });
-  return Promise.all(promises).then(function () {
-    return Promise.resolve();
-  })["catch"](function (error) {
+  return Promise.all(promises)["catch"](function (error) {
     console.error("Error importing files:", error);
-    return Promise.reject(error);
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-193.1",
+  "version": "1.0.0-temp-193.3",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -65,9 +65,9 @@
     "@zohodesk/a11y": "2.2.3",
     "@zohodesk/components": "1.2.40",
     "@zohodesk/hooks": "2.0.4",
-    "@zohodesk/icons": "1.0.50",
+    "@zohodesk/icons": "1.0.51",
     "@zohodesk/svg": "1.1.14",
-    "@zohodesk/utils": "1.3.13",
+    "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
@@ -77,12 +77,12 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/components": "1.2.40",
-    "@zohodesk/icons": "1.0.50",
+    "@zohodesk/icons": "1.0.51",
     "@zohodesk/svg": "1.1.14",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.4",
-    "@zohodesk/utils": "1.3.13",
+    "@zohodesk/utils": "1.3.14",
     "@zohodesk/a11y": "2.2.3"
   }
 }