@zohodesk/utils 1.0.1-alpha.2057

package/src/combineCustomStyle.js

@@ -0,0 +1,52 @@
+const REPLACER_SYMBOL = "$";
+
+/**
+ * 
+ * if two is same ==> do the think if replace do, if append do.
+ * replace vs append ==> append 
+ * append vs replace ==> replace  
+ * @param {*} style1
+ * @param {*} style2 
+ * @returns 
+ */
+ export default function combineCustomStyle(style1, style2) {
+  
+    let resultStyle = { ...style1};
+  
+    Object.keys(style2).forEach(styleName => {
+           
+      let oldStyleName = style1[`$${styleName}`] ? `$${styleName}` : styleName;
+
+      if (oldStyleName.startsWith(REPLACER_SYMBOL) && styleName.startsWith(REPLACER_SYMBOL)) {
+        
+        resultStyle[styleName] = style2[styleName];
+  
+      }
+      else if ( !oldStyleName.startsWith(REPLACER_SYMBOL) && !styleName.startsWith(REPLACER_SYMBOL)   ) {
+        
+        resultStyle[styleName] = `${resultStyle[styleName]} ${style2[styleName]}`;
+  
+      }
+      else{
+        delete resultStyle[oldStyleName];
+        resultStyle[styleName] = style2[styleName];
+      }
+      
+      /*else if (oldStyleName.startsWith(REPLACER_SYMBOL) && !styleName.startsWith(REPLACER_SYMBOL)  ) {
+       
+        delete resultStyle[oldStyleName];
+        resultStyle[styleName] = style2[styleName];
+  
+      }
+      else if (!oldStyleName.startsWith(REPLACER_SYMBOL) && styleName.startsWith(REPLACER_SYMBOL)  ) {
+        
+        delete resultStyle[oldStyleName];
+        resultStyle[styleName] = style2[styleName];
+
+      }*/
+  
+    });
+  
+    return resultStyle;
+  
+  }

package/src/compileClassNames.js

@@ -0,0 +1,156 @@
+import dataTypes, { isDataTypeOf } from "./dataTypes";
+import { hasOwnProperty, isToStringReferenceEqual } from "./objectUtils";
+
+/**
+ *  
+ * @param  {object} classinfoList 
+ * @returns {string}
+ */
+const collectClassNames = (processedClassNameList,...classinfoList) => {
+
+    for (let index = 0; index < classinfoList.length; index++) {
+
+        let classInfo = classinfoList[index];
+
+        if (!classInfo) {
+            continue;
+        }
+
+        if (isDataTypeOf(classInfo, dataTypes.string) || isDataTypeOf(classInfo, dataTypes.number)) {
+            processedClassNameList.push(classInfo);
+        }
+        else if (isDataTypeOf(classInfo, dataTypes.array)) {
+            processedClassNameList.push(collectClassNames.apply(null, classInfo));
+        }
+        else if (isDataTypeOf(classInfo, dataTypes.object)) {
+            
+            for (let property in classInfo) {
+                if (hasOwnProperty.call(classInfo, property) && classInfo[property]) {
+                    processedClassNameList.push(property==="undefined"?'':property);
+                }
+            }
+
+        }
+    }
+
+}
+
+export default function compileClassNames(...classinfoList){
+    let resultClassNameList = [];
+    collectClassNames(resultClassNameList,...classinfoList);
+    return resultClassNameList.join(' ');
+};
+
+
+/* discussion
+passing object is enough i think. remaining option needed!!!
+*/
+
+
+//18-Nov-2021 code review changes updated.
+
+/*
+>>>>>>>>>>Code Review Suggestion Starts >>>>>>
+let hasOwn = {}.hasOwnProperty;
+
+Accounting readability, please change this to Object.hasOwnProperty
+
+---
+const compileClassNames = (...props)=>{
+Please check the alternate term - collate -> collateClassNames -> Collect and Combine the classnames.
+---
+
+for (let i = 0; i < props.length; i++) {
+
+    Please try to to stick with functional programming. Again for the readability perspective.
+    Also, please stick with naming conventions for variables (i -> index).
+
+---
+if (argType === 'string' || argType === 'number') {
+          classes.push(this && this[arg] || arg);
+      } else if (Array.isArray(arg)) {
+          classes.push(compileClassNames.apply(this, arg));
+      } else if (argType === 'object') {
+          if (arg.toString === Object.prototype.toString) {
+              for (let key in arg) {
+                  if (hasOwn.call(arg, key) && arg[key]) {
+                      classes.push(this && this[key] || key);
+                  }
+              }
+          } else {
+              classes.push(arg.toString());
+          }
+      }
+    }
+In this code block, pushing up the array,object checks before string || number will be easy to follow up as it clarifies about the reursive call, its context.
+Please check the possibility of avoiding the usage of 'this' statement due to its complexity in understanding the concept.
+
+---
+Please write a functional method for the below line for easier understanding 
+  
+if (arg.toString === Object.prototype.toString) {
+
+---
+
+Adding dedicated method to get the datatype of variables will help to stick on the SRP.
+---
+Check the possibility of providing platform to extend the algorithm works for other data structures like Map, WeakMap,etc..
+
+>>>>>>> Code Review Suggestion Ends >>>>>>>>>>>>>>>>
+*/
+
+/*
+
+>>>>>> Alternative Implementation Starts >>>>>>>>>>>>>>>> 
+
+let boundHasOwnMethod = Object.hasOwnProperty;
+
+ const collateClassNames = (...classinfoList) =>{
+     let processedClassNameList = [];
+     classinfoList.forEach( ( classInfo,index )=>{
+         if(!classInfo)
+         {
+            // continue the next iteration
+             return;
+         }
+         let dataTypeofClassInfo = getDataType(classInfo);
+         if (dataTypeofClassInfo === 'string' || dataTypeofClassInfo === 'number')
+         {
+             processedClassNameList.push(classInfo);
+         }
+         else if(dataTypeofClassInfo === 'array')
+         {
+             processedClassNameList.push(collateClassNames(...classInfo));
+         }
+         else if(dataTypeofClassInfo === 'object')
+         {
+             for (let property in classInfo) {
+                  if (boundHasOwnMethod.call(classInfo,property ) && classInfo[property]) {
+                      processedClassNameList.push(property);
+                  }
+              }
+         }
+        
+
+     });
+     const joinClassNames = processedClassNameList.join(' ');
+    return joinClassNames;
+
+ }
+
+ const getDataType = (data)=>{
+    let dataTypeofClassInfo = typeof data;
+    let isArrayDataType = Array.isArray(data) === true;
+    if(isArrayDataType)
+    {
+        return 'array';
+    }
+    else 
+    {
+        return dataTypeofClassInfo;
+    }
+   
+ };
+
+>>>>>>>>>>>>>>>> Alternative Implementation Ends>>>>>>>>>>>>>> 
+*/

package/src/constantProps/index.js

@@ -0,0 +1 @@
+export * from "./uiProps";

package/src/constantProps/uiProps.js

@@ -0,0 +1,41 @@
+export const variantList = {
+  outlined: 'variant_outlined',
+  contained: 'variant_contained',
+  flushed: 'variant_flushed',
+  plain: 'variant_plain'
+};
+
+export const variants = Object.values(variantList);
+
+export const sizeList = {
+  xsmall: 'size_xsmall',
+  small: 'size_small',
+  medium: 'size_medium',
+  large: 'size_large',
+  xlarge: 'size_xlarge'
+};
+
+export const sizeKeys = Object.keys(sizeList);
+export const sizes = Object.values(sizeList);
+
+export const colorList = {
+  danger: 'color_danger',
+  success: 'color_success',
+  info: 'color_info',
+  primary: 'color_primary',
+  secondary: 'color_secondary',
+  warning: 'color_warning'
+};
+
+export const colorKeys = Object.keys(colorList);
+export const colors = Object.values(colorList);
+
+export const shapeList = {
+  circle: 'shape_circle',
+  oval: 'shape_oval',
+  square: 'shape_square',
+  roundedRect: 'shape_roundedRect',
+  rounded: 'shape_rounded'
+};
+
+export const shapes = Object.values(shapeList);

package/src/contextFactory.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+const context = {}
+/**
+ * 
+ * @param {string} name 
+ * @returns {object}
+ */
+export default function contextFactory(name) {
+    if (!context[name]) {
+        context[name] = createContext();
+    }
+    return context[name]
+}

package/src/createTemplateLiteral.js

@@ -0,0 +1,73 @@
+export default function createTemplateLiteral(templateStrings, ...expressionKeys) {
+
+    return ( ...expressionValues) => {
+
+        let resultString = [templateStrings[0]];
+        expressionKeys.forEach(function (expressionKey, i) {
+            let expressionValue = expressionValues[i];
+            let nextTemplateString = templateStrings[i + 1];
+            if (expressionValue === null || expressionValue === undefined || expressionValue === "") {
+                nextTemplateString = nextTemplateString.replace(/^_/, '');
+            }
+            resultString.push(expressionValue, nextTemplateString);
+        });
+
+        let resultStr = resultString.join('');
+        resultStr = resultStr.replace(/_$/, '');
+        return resultStr;
+    };
+}
+
+
+
+/* refer the doc https://developers.google.com/web/updates/2015/01/ES6-Template-Strings
+
+UnderSatnd the terms - String interpolation, Embedded expressions
+
+Go through the topic https://developers.google.com/web/updates/2015/01/ES6-Template-Strings#tagged_templates
+
+Things to note fn`Hello ${you}! You're looking ${adjective} today!` desugars to fn(["Hello ", "! You're looking ", " today!"], you, adjective);
+
+Please go through the example code
+
+Our implementation constructCustomMessage is the handler for the tagged template function. 
+It receives the static words and its substitutions as seen above as the arguments.
+
+It returns a function that receives the values for the substitutions. Upon passing the values for the inner function
+it executes the algorithm as mentioned in the doc to construct the final message.
+"The (n + 1)th argument corresponds to the substitution that takes place between the nth and (n + 1)th entries in the string array"
+
+
+function constructCustomMessage(staticWordsList, ...embeddedExpressionKeyList)
+{
+    return (...valuesForEmbeddedExpressionList)=>{
+
+        let finalMessage = staticWordsList[0];
+        embeddedExpressionKeyList.forEach(function(expressionKey, index) {
+            let expressionValue = valuesForEmbeddedExpressionList[index];
+            let nextStaticWord = staticWordsList[index+1];
+            if(expressionValue===null || expressionValue === undefined || expressionValue === ""){
+               // Replace the underscore '_' present at the beginning of string with empty value.  
+                    nextStaticWord = nextStaticWord.replace(/^_/, '');
+            }
+             finalMessage += expressionValue + nextStaticWord;
+
+        });
+          // Replace the underscore '_' present at the end of string with empty value.  
+         finalMessage = finalMessage.replace(/_$/,'');
+        return finalMessage ;
+    };
+
+}
+*/
+
+/*
+Sample Invocation Format
+
+var username;
+var tag;
+var handlerFunctiontoFormMessage = constructCustomMessage`<b>${username} says</b>: "${tag}"`;
+var outputString = handlerFunctiontoFormMessage('Mani Venkat', '& is a fun tag');
+console.log(outputString);
+
+*/

package/src/dataTypes.js

@@ -0,0 +1,30 @@
+const dataTypes = {
+    "number" : "number",
+    "array" : "array",
+    "string" : "string",
+    "object" : "object",
+    "bigint" : "bigint",
+    "symbol" : "symbol",
+    "undefined" : "undefined",
+    "function" : "function",
+    "boolean" : "boolean"
+};
+
+export const getDataType = (data)=>{
+    let typeofData = typeof data;
+    let isArrayDataType = Array.isArray(data);
+    if(isArrayDataType)
+    {
+        return dataTypes.array;
+    }
+    else 
+    {
+        return dataTypes[typeofData];
+    }
+ };
+
+ export const isDataTypeOf=(data,type)=>{
+    return getDataType(data) === type;
+ }
+
+ export default dataTypes;

package/src/debounce.js

@@ -0,0 +1,13 @@
+export default function debounce(fn, delay) {
+    let handle = null
+
+    return function () {
+        if (handle) {
+            handle = clearTimeout(handle)
+        }
+
+        handle = setTimeout(() => {
+            fn(...arguments)
+        }, delay)
+    }
+}

package/src/disCustomStyleProps.js

@@ -0,0 +1,69 @@
+// import PropTypes from "prop-types";
+// import mergeStyle from "./mergeStyle";
+// import { Button } from "../../base/src/Button/index";
+// export default (props)=>{
+
+//     let { customStyle,  openCustomStyle}  = props;
+
+//     return {
+//         customStyle,
+//         openDefaultToCustomize
+//     };
+
+// }
+
+
+// if two is same ==> do the think replace with last , append at end 
+
+// replace vs append ==> append 
+// append vs replace ==> replace 
+
+
+// DotButton.js
+// DotButton.module.css 
+// function DotButton({ customStyle }){
+
+//     dotButdefault => customStyle : {
+//         base : DotButton.style.pols 
+//     }
+
+//     props => customStyle {
+//         base :  
+//     }
+
+//     return <Button customStyle={}></Button>
+// }
+
+// Button => set of compoents 
+// DotButton => set of comepons
+
+// function creatButtonWithIcon({Button,Icon}){
+    
+//     return (props)=>{
+
+//         customStyle={}
+//         return <Button customStyle={ssss}>
+
+//                 <Icon></Icon>   
+//         </Button>
+
+//     }
+
+// }
+
+
+// Button1.js
+// Icon1.js
+// creatButtonWithIcon({
+
+//     Button : Button1,
+//     Icon : Icon1
+
+// });
+
+// Button1custome(props){
+
+//     props.customStyle 
+//     combineCustomStyle()
+//     return Button 
+// }

package/src/getCompliedClassName.js

@@ -0,0 +1,9 @@
+import compileClassNames from "./compileClassNames";
+
+export default (customClassName, ...props) => {
+
+    let isPlainClassName = typeof customClassName === "string" ? true : false;
+    return compileClassNames(...props, {
+        [customClassName]: !!isPlainClassName
+    });
+}

package/src/getCompliedCustomId.js

@@ -0,0 +1,15 @@
+export default (
+  { customId, customIdPrefix = "", customIdSuffix = "" },
+  defaultCustomId,
+  otherCustomOption=[]
+) => {
+  let returnId = customId;
+
+  if (typeof defaultCustomId === "function") {
+    let options  = [ '',customIdPrefix, customIdSuffix, ...otherCustomOption];
+    returnId = defaultCustomId.apply(null,options);
+    //returnId = defaultCustomId`${customIdPrefix} ${customIdSuffix}`;
+  }
+
+  return returnId ? returnId.toLowerCase() : null;
+};

package/src/index.js

@@ -0,0 +1,10 @@
+export { default as debounce } from './debounce';
+export { default as uniqueNumber } from './uniqueNumber'
+export { default as omit } from './omit';
+export { default as mergeStyle } from './mergeStyle'
+export { default as applyOpenToCustomize } from './applyOpenToCustomize';
+export { default as combineCustomStyle } from './combineCustomStyle'
+export { default as compileClassNames } from './compileClassNames';
+export { default as ErrorBoundary } from './ErrorBoundary'
+export { default as loadResource } from './loadResource'
+export { default as accessKeyCodes, accessKeyNames } from "./accessKeyCodes";

package/src/isTouchDevice.js

@@ -0,0 +1,10 @@
+export default function isTouchDevice() {
+    if (('ontouchstart' in window) ||
+        (navigator.maxTouchPoints > 0) ||
+        (navigator.msMaxTouchPoints > 0)) {
+        /* browser with either Touch Events of Pointer Events
+          running on touch-capable device */
+        return true;
+    }
+    return false;
+}

package/src/loadResource.js

@@ -0,0 +1,45 @@
+/* eslint-disable import/prefer-default-export */
+/* use promise and remove callback */
+export default function loadResource(url, type, id, callback, needDefer = true) {
+    return new Promise((resolve) => {
+        let css;
+        let script;
+        if (id && document.getElementById(id)) {
+            resolve();
+            return;
+        }
+        if (type === 'css') {
+            css = document.createElement('link');
+            css.type = 'text/css';
+            css.rel = 'stylesheet';
+            css.href = url;
+            css.id = id || '';
+            css.onload = function () {
+                resolve();
+            };
+            css.onerror = function () {
+                resolve();
+            };
+            document.getElementsByTagName('head')[0].appendChild(css);
+        } else if (type === 'js') {
+            script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = url;
+            script.defer = needDefer;
+
+            script.onload = function () {
+                resolve();
+                if (id) {
+                    script.id = id;
+                }
+                if (typeof callback === 'function') {
+                    callback();
+                }
+            };
+            script.onerror = function () {
+                resolve();
+            };
+            document.getElementsByTagName('head')[0].appendChild(script);
+        }
+    });
+}

package/src/mergeStyle.js

@@ -0,0 +1,31 @@
+/**
+ * REPLACER_SYMBOL used to indentify 
+ */
+const REPLACER_SYMBOL = "$";
+/**
+ *  $ startWith is used for replace the existing style.
+ *  all other will be append
+ * @param {*} defaultStyle 
+ * @param {*} customStyle
+ * @returns
+ */
+export default function mergeStyle(defaultStyle, customStyle) {
+  return Object.keys(customStyle).reduce((res, next) => {
+    if (next.startsWith(REPLACER_SYMBOL)) {
+      let styleValue = customStyle[next];
+      let styleName = next.replace(REPLACER_SYMBOL, "");
+
+      if (!defaultStyle[styleName]) {
+        return res;
+      }
+
+      res[styleName] = styleValue;
+    } else if (defaultStyle[next]) {
+      res[next] = defaultStyle[next] + " " + customStyle[next];
+    }
+
+    return res;
+  }, { ...defaultStyle
+});
+
+} 

package/src/objectUtils.js

@@ -0,0 +1,4 @@
+export const hasOwnProperty = Object.hasOwnProperty;
+export const isToStringReferenceEqual =(data)=>{
+    return data.toString === Object.prototype.toString
+}

package/src/omit.js

@@ -0,0 +1,10 @@
+export default (keys) => {
+    return function omit(obj) {
+        return Object.keys(obj).reduce((res, next) => {
+            if (!keys.includes(next)) {
+                res[next] = obj[next];
+            }
+            return res;
+        }, {})
+    }
+}

package/src/props/automationProps.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+export const automationPropsName = 'customId';
+export default {
+  customId: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  customIdPrefix: PropTypes.string,
+  customIdSuffix: PropTypes.string
+};

package/src/props/customReducerPropTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+
+export default {
+    customReducer: PropTypes.func
+};
+
+export const customReducer = 'customReducer';

package/src/props/customStyleProps.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+
+export default {
+    customStyle: PropTypes.object
+};
+
+/**
+ * Prop Name
+ */
+export const customStyle = "customStyle";

package/src/props/generalAriaProps.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+
+export default {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};

package/src/props/tagAttributeProps.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+
+const attributesList = [
+    "tabIndex"
+];
+
+const dataAttribute = "^data|on";
+
+export const tagAttributesPropType = function(props, propName, componentName ) {
+        
+    if( Object.prototype.toString.call(props) !== "[object Object]"){
+
+       console.error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${ props ? (typeof props) : undefined}\` supplied to \`${componentName}\`, expected \`object\`.`);
+
+    }
+
+    let curPattern = new RegExp(`^(${attributesList.join("|")})$`);
+    let curPattern2 = new RegExp(dataAttribute);
+
+    Object.keys(props[propName]).forEach((keyName)=>{
+
+        if( !(curPattern.test( keyName ) ||  curPattern2.test(keyName)) ){
+
+            console.warn(`Warning: these attributes name ${keyName} are not allowed in ${propName}`);
+
+         }
+    
+    });
+
+}
+
+export default {
+    tagAttributes: tagAttributesPropType
+}
+
+
+/**
+ * tagAttributes - is used to spread these attributes for events customize and override few attributes.
+ */
+export const tagAttributes = "tagAttributes";