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

package/README.md

@@ -32,34 +32,6 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
-# 1.0.0-alpha-226
-
-- ListContainer Implemented in => ListItem,ListItemWithAvatar,ListItemWithIcon,ListItemWithRadio,ListItemWithCheckBox
-
-# 1.0.0-alpha-225
-
-- Appearance css moved to assets
-
-# 1.0.0-alpha-224
-
-- css color variable updation
-
-# 1.0.0-alpha-223
-
-- bg,shadow,text,border based variables removed and renamed.
-# 1.0.0-alpha-222
-
-- Tabs=> isResponsive condition handled properly
-- Select, MultiSelect => on press tab, choose selected value then move focus to next focuable element flow implemented 
-
-# 1.0.0-alpha-221
-
-- blueDefaultTheme & blueDarkTheme class name added in Blue CTATheme & ComponentTheme files
-
-# 1.0.0-alpha-220
-
-- Tooltip Delay Controlled to Improve Perf
-
 # 1.0.0-alpha-219
 
 - ContextOptimizer => ShallowEqal function issue solved

package/README_Beta.md

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

package/__testUtils__/globals.js

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

@@ -0,0 +1,138 @@
+{
+  "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

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

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+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: ' '
+  };
+}