@zohodesk/components 1.0.0-temp-48 → 1.0.0-temp-51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-48",
+  "version": "1.0.0-temp-51",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -13,7 +13,8 @@
     "lintAllFix": "npm run lintAll --eslint:fix=true",
     "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
     "dubCheck": "node dubFinder  node_modules/@zohodesk/icons/lib node_modules/@zohodesk/variables/lib",
-    "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components",
+    "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components && npm run build:variables",
+    "build:variables": "node ./preprocess/index",
     "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
     "start": "react-cli start",
     "docs": "npm run dubCheck && react-cli docs",
@@ -33,12 +34,12 @@
   },
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
-    "@zohodesk/variables": "1.0.0-beta.25",
-    "@zohodesk/icons": "1.0.0-beta.85",
+    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/icons": "1.0.0-beta.92",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "^1.4.1",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.37"
+    "@zohodesk/svg": "1.0.0-beta.41"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -47,14 +48,17 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/variables": "^1.0.0-beta.24",
-    "@zohodesk/svg": "^1.0.0-beta.37",
+    "@zohodesk/icons": "^1.0.0-beta.92",
+    "@zohodesk/variables": "^1.0.0-beta.29",
+    "@zohodesk/svg": "^1.0.0-beta.41",
     "@zohodesk/virtualizer": "^1.0.3",
     "velocity-react": "^1.4.1",
     "react-sortable-hoc": "^0.8.3"
   },
   "react-cli": {
+    "preprocessor": {
+      "runner": "preprocess/index.js"
+    },
     "docs": {
       "componentFolder": "./src",
       "cssUniqueness": "false",
@@ -65,4 +69,4 @@
       "hasRTL": true
     }
   }
-}
+}

package/README_Beta.md

@@ -1,2 +0,0 @@
-- FocusScope added
-- Focus Ring added

package/__testUtils__/globals.js

@@ -1,46 +0,0 @@
-let moduleMapKey = require('./moduleMapKey.json');
-global.SupportUI = {
-  Departments: {
-    getDepartmentAgents() {},
-    getDepartmentName() {}
-  },
-  CurrentUser: {
-    getSelectedDepartmentId() {},
-    getAccessibleDepartments() {},
-    getZuid() {}
-  },
-  CurrentPortal: {
-    getPortalZgId() {
-      return this.zgid;
-    },
-    getPortalName() {
-      return this.portalName;
-    },
-    getBaseDomain() {},
-    getMarketplaceDomain() {},
-    additioninfo: {
-      LICENSE_TYPE: ''
-    },
-    portalName: 'MyPortal',
-    zgid: '1234456'
-  },
-  History: {
-    changeHashSilently() {}
-  }
-};
-global.showLoadingBar = function() {};
-global.hideLoadingBar = function() {};
-global.showAnimateMessageDiv = function() {};
-global.hideAnimateMessageDiv = function() {};
-global.requestAnimationFrame = function(fn) {
-  setTimeout(fn, 16);
-};
-
-global.moduleMapKey = moduleMapKey;
-global.MutationObserver = function() {
-  return {
-    replaceObservationElement: () => {},
-    disconnect: () => {},
-    observe: () => {}
-  };
-};

package/__testUtils__/moduleMapKey.json

@@ -1,138 +0,0 @@
-{
-  "Activities": {
-    "changed_i18n_module": "Activities",
-    "changed_module": "Activities",
-    "changed_i18n_plural_module": "Activities",
-    "changed_sing_module": "Activity",
-    "changed_plural_module": "Activities",
-    "changed_i18n_sing_module": "Activity"
-  },
-  "Products": {
-    "changed_i18n_module": "Products",
-    "changed_module": "Products",
-    "changed_i18n_plural_module": "Products",
-    "changed_sing_module": "Product",
-    "changed_plural_module": "Products",
-    "changed_i18n_sing_module": "Product"
-  },
-  "Tasks": {
-    "changed_i18n_module": "Tasks",
-    "changed_module": "Tasks",
-    "changed_i18n_plural_module": "Tasks",
-    "changed_sing_module": "Task",
-    "changed_plural_module": "Tasks",
-    "changed_i18n_sing_module": "Task"
-  },
-  "Calls": {
-    "changed_i18n_module": "Calls",
-    "changed_module": "Calls",
-    "changed_i18n_plural_module": "Calls",
-    "changed_sing_module": "Call",
-    "changed_plural_module": "Calls",
-    "changed_i18n_sing_module": "Call"
-  },
-  "Reports": {
-    "changed_i18n_module": "Reports",
-    "changed_module": "Reports",
-    "changed_i18n_plural_module": "Reports",
-    "changed_sing_module": "Report",
-    "changed_plural_module": "Reports",
-    "changed_i18n_sing_module": "Report"
-  },
-  "Leads": {
-    "changed_i18n_module": "Leads",
-    "changed_module": "Leads",
-    "changed_i18n_plural_module": "Leads",
-    "changed_sing_module": "Lead",
-    "changed_plural_module": "Leads",
-    "changed_i18n_sing_module": "Lead"
-  },
-  "Contacts": {
-    "changed_i18n_module": "Contacts",
-    "changed_module": "Contacts",
-    "changed_i18n_plural_module": "Contacts",
-    "changed_sing_module": "Contact",
-    "changed_plural_module": "Contacts",
-    "changed_i18n_sing_module": "Contact"
-  },
-  "Solutions": {
-    "changed_i18n_module": "Knowledge Base",
-    "changed_module": "Knowledge Base",
-    "changed_i18n_plural_module": "Articles",
-    "changed_sing_module": "Article",
-    "changed_plural_module": "Articles",
-    "changed_i18n_sing_module": "Article"
-  },
-  "TimeEntry": {
-    "changed_i18n_module": "Time Entry",
-    "changed_module": "Time Entry",
-    "changed_i18n_plural_module": "Time Entry",
-    "changed_sing_module": "Time Entry",
-    "changed_plural_module": "Time Entry",
-    "changed_i18n_sing_module": "Time Entry"
-  },
-  "Socials": {
-    "changed_i18n_module": "Social",
-    "changed_module": "Social",
-    "changed_i18n_plural_module": "Social",
-    "changed_sing_module": "Social",
-    "changed_plural_module": "Social",
-    "changed_i18n_sing_module": "Social"
-  },
-  "Events": {
-    "changed_i18n_module": "Events",
-    "changed_module": "Events",
-    "changed_i18n_plural_module": "Events",
-    "changed_sing_module": "Event",
-    "changed_plural_module": "Events",
-    "changed_i18n_sing_module": "Event"
-  },
-  "Chat": {
-    "changed_i18n_module": "Chat",
-    "changed_module": "Chat",
-    "changed_i18n_plural_module": "Chat",
-    "changed_sing_module": "Chat",
-    "changed_plural_module": "Chat",
-    "changed_i18n_sing_module": "Chat"
-  },
-  "Dashboards": {
-    "changed_i18n_module": "Dashboards",
-    "changed_module": "Dashboards",
-    "changed_i18n_plural_module": "Dashboards",
-    "changed_sing_module": "Dashboard",
-    "changed_plural_module": "Dashboards",
-    "changed_i18n_sing_module": "Dashboard"
-  },
-  "Contracts": {
-    "changed_i18n_module": "Contracts",
-    "changed_module": "Contracts",
-    "changed_i18n_plural_module": "Contracts",
-    "changed_sing_module": "Contract",
-    "changed_plural_module": "Contracts",
-    "changed_i18n_sing_module": "Contract"
-  },
-  "Cases": {
-    "changed_i18n_module": "Tickets",
-    "changed_module": "Tickets",
-    "changed_i18n_plural_module": "Tickets",
-    "changed_sing_module": "Ticket",
-    "changed_plural_module": "Tickets",
-    "changed_i18n_sing_module": "Ticket"
-  },
-  "Community": {
-    "changed_i18n_module": "Community",
-    "changed_module": "Community",
-    "changed_i18n_plural_module": "Community",
-    "changed_sing_module": "Community",
-    "changed_plural_module": "Community",
-    "changed_i18n_sing_module": "Community"
-  },
-  "Accounts": {
-    "changed_i18n_module": "Accounts",
-    "changed_module": "Accounts",
-    "changed_i18n_plural_module": "Accounts",
-    "changed_sing_module": "Account",
-    "changed_plural_module": "Accounts",
-    "changed_i18n_sing_module": "Account"
-  }
-}

package/dubFinder.js

@@ -1,96 +0,0 @@
-let fs = require('fs');
-let path = require('path');
-let result = {};
-let filesArray = 0;
-function listFiles(newPath) {
-  let cwd = newPath ? newPath : process.cwd();
-  try {
-    let files = fs.readdirSync(cwd, { withFileTypes: true });
-    files.map(file => {
-      let fileName = file.name,
-        filePath = file;
-      if (!file.isDirectory) {
-        filePath = fs.statSync(path.resolve(cwd, file));
-        fileName = file;
-      }
-      if (filePath.isDirectory()) {
-        if (
-          fileName != 'node_modules' &&
-          fileName != 'deskapp' &&
-          fileName != '__testUtils__' &&
-          fileName != 'efc-tutorial' &&
-          fileName != 'mockapi' &&
-          fileName != 'es' &&
-          fileName != 'lib'
-        ) {
-          listFiles(path.resolve(cwd, fileName));
-        }
-      } else {
-        if (fileName.substr(fileName.lastIndexOf('.') + 1) == 'css') {
-          let lastIndex =
-            fileName.indexOf('.module.css') != -1
-              ? fileName.lastIndexOf('.module.css')
-              : fileName.lastIndexOf('.css');
-          let keyName = fileName.substring(0, lastIndex).toLowerCase();
-          result[keyName] = result[keyName] ? result[keyName] : [];
-          result[keyName].push(path.resolve(cwd, fileName));
-        }
-      }
-    });
-  } catch (e) {
-    console.log('The error exception : ==>', e);
-  }
-}
-// function listFiles(newPath) {
-//   let cwd = newPath ? newPath : process.cwd();
-//   fs.readdir(cwd, { withFileTypes: true }, (err, files) => {
-//     files.map(file => {
-
-//       // if (file.isDirectory()) {
-//       //   if (
-//       //     file.name != 'node_modules' &&
-//       //     file.name != 'deskapp' &&
-//       //     file.name != '__testUtils__' &&
-//       //     file.name != 'efc-tutorial' &&
-//       //     file.name != 'mockapi'
-//       //   ) {
-//       //     listFiles(path.resolve(cwd, file.name));
-//       //   }
-//       // } else {
-//       //   if (file.name.substr(file.name.lastIndexOf('.') + 1) == 'css') {
-//       //     result[file.name] = result[file.name] ? result[file.name] : [];
-//       //     result[file.name].push(path.resolve(cwd, file.name));
-//       //   }
-//       // }
-//     });
-//   });
-// }
-listFiles(process.cwd());
-let [, , ...extraPaths] = process.argv;
-extraPaths.map(pathWay => {
-  listFiles(path.resolve(process.cwd(), pathWay));
-});
-console.log(
-  '\x1b[33m%s\x1b[0m',
-  '!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! \n '
-);
-
-console.log(
-  '\x1b[5m\x1b[44m%s\x1b[0m',
-  'Finding Duplicate CSS Files Please Wait ...'
-);
-
-let print = false;
-Object.keys(result).map(val => {
-  if (result[val].length > 1) {
-    print = true;
-    console.log('\x1b[31m', val, ' ==> ', result[val]);
-  }
-});
-if (!print) {
-  console.log('\x1b[31m', 'No Dublicates Found');
-}
-console.log(
-  '\x1b[33m%s\x1b[0m',
-  '\n \n!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! \n'
-);

package/es/Accordion/docs/Accordion__Demo.docs.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import { Accordion, AccordionItem } from '../';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Accordion__Demo extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Accordion, {
-      selectedItem: "1",
-      onSelect: id => {
-        'selected id', id;
-      },
-      unMount: false
-    }, /*#__PURE__*/React.createElement(AccordionItem, {
-      id: "1"
-    }, /*#__PURE__*/React.createElement("div", {
-      key: "title",
-      style: {
-        padding: '10px',
-        backgroundColor: '#ddd'
-      }
-    }, "Acc-1"), /*#__PURE__*/React.createElement("div", {
-      key: "content",
-      style: {
-        padding: '80px 10px',
-        backgroundColor: '#ddffee'
-      }
-    }, "Data1")), /*#__PURE__*/React.createElement(AccordionItem, {
-      id: "2"
-    }, /*#__PURE__*/React.createElement("div", {
-      key: "title",
-      style: {
-        padding: '10px',
-        backgroundColor: '#ddd'
-      }
-    }, "Acc-2"), /*#__PURE__*/React.createElement("div", {
-      key: "content",
-      style: {
-        padding: '80px 10px',
-        backgroundColor: '#ddffee'
-      }
-    }, "Data2")), /*#__PURE__*/React.createElement(AccordionItem, {
-      id: "3",
-      unMountItem: true
-    }, /*#__PURE__*/React.createElement("div", {
-      key: "title",
-      style: {
-        padding: '10px',
-        backgroundColor: '#ddd'
-      }
-    }, "Acc-3"), /*#__PURE__*/React.createElement("div", {
-      key: "content",
-      style: {
-        padding: '80px 10px',
-        backgroundColor: '#ddffee'
-      }
-    }, "Data3")), /*#__PURE__*/React.createElement(AccordionItem, {
-      id: "4"
-    }, /*#__PURE__*/React.createElement("div", {
-      key: "title",
-      style: {
-        padding: '10px',
-        backgroundColor: '#ddd'
-      }
-    }, "Acc-4"), /*#__PURE__*/React.createElement("div", {
-      key: "content",
-      style: {
-        padding: '80px 10px',
-        backgroundColor: '#ddffee'
-      }
-    }, "Data4")))));
-  }
-
-}
-Accordion__Demo.docs = {
-  componentGroup: 'Animation',
-  folderName: 'Style Guide'
-};

package/es/Animation/docs/Animation__default.docs.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__default extends React.Component {
-  render() {
-    let styles = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_bg_black)',
-      textAlign: 'center',
-      color: 'var(--dot_text_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "default",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: styles
-    }, "Animation - Default"))));
-  }
-
-}
-
-if (false) {
-  Animation__default.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__fadeIn.docs.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__fadeIn extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_bg_black)',
-      textAlign: 'center',
-      color: 'var(--dot_text_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "fadeIn",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - fadeIn"))));
-  }
-
-}
-
-if (false) {
-  Animation__fadeIn.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__scaleIn.docs.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__scaleIn extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_bg_black)',
-      textAlign: 'center',
-      color: 'var(--dot_text_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "scaleIn",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - scaleIn"))));
-  }
-
-}
-
-if (false) {
-  Animation__scaleIn.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__skewIn.docs.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__skewIn extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_bg_black)',
-      textAlign: 'center',
-      color: 'var(--dot_text_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "skewIn",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - zoomIn "))));
-  }
-
-}
-
-if (false) {
-  Animation__skewIn.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__slideDown.docs.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__slideDown extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_bg_black)',
-      textAlign: 'center',
-      color: 'var(--dot_text_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "slideDown",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - slideDown"))));
-  }
-
-}
-
-if (false) {
-  Animation__slideDown.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__slideLeft.docs.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__slideLeft extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_bg_black)',
-      textAlign: 'center',
-      color: 'var(--dot_text_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "slideLeft",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - slideLeft"))));
-  }
-
-}
-
-if (false) {
-  Animation__slideLeft.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/Animation/docs/Animation__zoomIn.docs.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import Animation from '../Animation';
-import { Container } from '../../Layout';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class Animation__zoomIn extends React.Component {
-  render() {
-    let style = {
-      width: '200px',
-      height: '100px',
-      background: 'var(--dot_bg_black)',
-      textAlign: 'center',
-      color: 'var(--dot_text_white)',
-      lineHeight: '100px'
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Animation, {
-      name: "zoomIn",
-      isActive: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, "Animation - zoomIn "))));
-  }
-
-}
-
-if (false) {
-  Animation__zoomIn.docs = {
-    componentGroup: 'Animation',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}