@zohodesk/react-cli 0.0.1-beta.172 → 0.0.1-beta.174

package/lib/postcss-plugins/variableModificationPlugin/index.js

@@ -0,0 +1,247 @@
+"use strict";
+
+const postcss = require('postcss');
+
+const fs = require('fs');
+
+const path = require('path');
+
+const errors = [];
+let allowedErrs = {};
+const convertableProps = {
+  'font-size': true,
+  margin: true,
+  'margin-left': true,
+  'margin-right': true,
+  'margin-top': true,
+  'margin-bottom': true,
+  padding: true,
+  'padding-top': true,
+  'padding-bottom': true,
+  'padding-left': true,
+  'padding-right': true,
+  width: true,
+  'min-width': true,
+  'max-width': true,
+  height: true,
+  'min-height': true,
+  'max-height': true,
+  top: true,
+  bottom: true,
+  left: true,
+  right: true
+};
+const constantValues = {
+  inherit: true,
+  initial: true,
+  auto: true,
+  'fit-content': true,
+  unset: true
+};
+
+function getNumericValue(value) {
+  if (value.includes('var')) {
+    return parseInt(value.replace(/var\(--zd_size(\d+)\)/gi, '$1').replace(/var\(--zd_font_size(\d+)\)/gi, '$1'));
+  } // Not need for this dum loop
+  // allowed.forEach(alwdUnit => {
+  //   if (value.includes(alwdUnit)) {
+  //     return parseInt(value);
+  //   }
+  // });
+
+
+  if (constantValues[value.toLowerCase()]) {
+    return 1;
+  }
+
+  return parseInt(value);
+}
+
+function pxToCalc(value) {
+  const arr = value.split(' ');
+  arr.forEach((val, index) => {
+    ['px'].forEach(unit => {
+      const valWithUnit = new RegExp(`(\\d+)${unit}`, 'gi');
+
+      if (valWithUnit.test(val)) {
+        arr[index] = val.replace(valWithUnit, '(var(--zd_size$1))');
+      }
+    });
+  });
+  return arr.join(' ');
+}
+
+const addError = errstr => {
+  errors.push(`{\n${errstr}\n}\n`);
+};
+
+const errorFunction = (errStr, type) => {
+  if (type === 'DECLARATION_IGNORED' && allowedErrs.DECLARATION_IGNORED) {
+    addError(errStr);
+  } else if (type === 'UNIT_ERROR' && allowedErrs.UNIT_ERROR) {
+    addError(errStr);
+  } else if (type === 'RANGE_ERROR' && allowedErrs.RANGE_ERROR) {
+    addError(errStr);
+  } else if (type === 'VARIABLE_PRESENT' && allowedErrs.VARIABLE_PRESENT) {
+    addError(errStr);
+  }
+};
+
+const singleConvertor = (value, changeVal, details, range) => {
+  const {
+    path,
+    filename,
+    decl
+  } = details;
+
+  if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
+    let retVal = value.replace(/(\d+)px/gi, changeVal.replace('$$', '$1'));
+
+    if (/^-var/.test(retVal)) {
+      retVal = `calc( ${retVal.substring(1)} * -1 )`;
+    }
+
+    return retVal;
+  } // if(unitErrorVal && unitErrorVal != '0' ){
+  // console.log(value, 'not within range')
+
+
+  errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) (${typeof value}) not within range (${range.start},${range.end})\r`, 'RANGE_ERROR'); // }
+  // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) not within range (${range.start},${range.end})\r`)
+
+  return value;
+};
+
+module.exports = postcss.plugin('postcss-variable-report', cssVariableReplacementConfig => {
+  const rawdata = fs.readFileSync(cssVariableReplacementConfig);
+  const data = JSON.parse(rawdata);
+  const {
+    errorsAllowed,
+    settings: settingsObject,
+    errorLog: errorLogStatus,
+    errorInConsole: errorConsoleStatus
+  } = data; // const keys = Object.keys(settingsObject);
+
+  allowedErrs = errorsAllowed;
+  const replacementArray = [];
+  Object.keys(settingsObject).forEach(key => {
+    Object.values(settingsObject[key].replacements).forEach(val => {
+      if (!replacementArray.includes(val)) {
+        replacementArray.push(val);
+      }
+    });
+  });
+  let regValStr = '';
+  replacementArray.forEach((val, index) => {
+    if (index !== replacementArray.length - 1) {
+      regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}|`;
+    } else {
+      regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}`;
+    }
+  });
+  const valRegex = new RegExp(regValStr, 'gi');
+  return rootOriginal => {
+    rootOriginal.walkRules(rule => {
+      // rule.nodes[-1] = {}
+      // need map, forEach fine less memory
+      rule.nodes.forEach((decl, position) => {
+        // case font-size
+        const commentStr = 'variable:ignore';
+        const prevNode = rule.nodes[position - 1];
+        const fromPath = rootOriginal.source.input.from; // this will be problem for linux and mac use require('path').sep
+        // split not need use slice and lastIndexOf less memory
+
+        const filename = fromPath.split(path.sep).pop();
+
+        if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase().includes(commentStr)) {
+          const errStr = ` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n message : Declaration Ignored \r`;
+          errorFunction(errStr, 'DECLARATION_IGNORED');
+          return;
+        }
+
+        if (settingsObject[decl.prop] && !decl.value.includes('var(--')) {
+          const settings = settingsObject[decl.prop]; // console.log(settings)
+
+          const {
+            allowed,
+            range
+          } = settings; // suggestion filter  !decl.value.includes('calc')
+          // Reason below some of logic happen based on this
+
+          const unit = decl.value.toString() // no need round braket since you do not need group for less memory
+          .replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
+          // console.log('unit : ');
+          // console.log(unit);
+
+          unit.forEach((val, index) => {
+            allowed.forEach(alwdVal => {
+              if (val.includes(alwdVal)) {
+                // ## for what purpose
+                unit[index] = val.replace(`-${alwdVal}`, `${alwdVal}`).replace(`-.${alwdVal}`, `${alwdVal}`);
+              }
+            });
+          });
+          let unitError = false;
+          let unitErrorVal = '';
+          unit.forEach(val => {
+            if (!val.includes('calc')) {
+              if (!allowed.includes(val.toString())) {
+                unitError = true;
+                unitErrorVal = val;
+              }
+            }
+          }); // console.log(allowed, replacements, range)
+
+          if (!unitError) {
+            // use variable decl.value.split(' ')
+            if (range) {
+              // console.log('multiple :', decl.value)
+              let newVal = '';
+              decl.value.split(' ').forEach(singleVal => {
+                newVal += `${singleConvertor(singleVal, settings.replacements.px, {
+                  decl,
+                  filename,
+                  path: fromPath
+                }, range)} `;
+              });
+              decl.value = newVal;
+            }
+          } else {
+            if (!decl.value.includes('calc')) {
+              // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`);
+              errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`, 'UNIT_ERROR');
+            } else {
+              decl.value = pxToCalc(decl.value);
+            }
+          }
+        } else {
+          if (decl.prop && decl.value && !decl.prop.includes('--') && valRegex.test(decl.value) && (settingsObject[decl.prop] || convertableProps[decl.prop]) && decl.value.includes('var') && !decl.value.includes('calc')) {
+            errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n message : value (${decl.value}) has var in it, kindly check`, 'VARIABLE_PRESENT');
+          }
+        }
+      });
+    }); // console.log(filename)
+    // console.log('Done!')
+    // console.log('----------------------------------------------------------------------------------------------------------------------')
+
+    if (errorLogStatus) {
+      fs.writeFileSync('./css_error.log', '');
+
+      if (errors.length > 0) {
+        errors.forEach(err => {
+          fs.appendFileSync('./css_error.log', err);
+        }); // console.log('----------------------------------------------------------------------------------------------------------------------')
+      }
+    }
+
+    if (errorConsoleStatus) {
+      if (errors.length > 0) {
+        errors.forEach(err => {
+          // fs.appendFileSync('./css_error.log', err);
+          console.log(err);
+        });
+        console.log('----------------------------------------------------------------------------------------------------------------------');
+      }
+    }
+  };
+});

package/lib/postcss-plugins/variableModifier.js

@@ -101,6 +101,7 @@ module.exports = postcss.plugin('postcss-variable-report', () => rootOriginal =>
       rule.walkDecls((decl, position) => {
         // case font-size
         if (!hasIgnoreComment(rule.nodes[position - 1])) {
+          console.log(settings);
           let unit = decl.value.replace(/[0-9]/g, '');
           let settings = numberObject[decl.prop];
           let path = rootOriginal.source.input.from;

package/lib/schemas/index.js

@@ -216,13 +216,16 @@ var _default = {
     plugins: {
       hasRTL: false,
       hoverActive: false,
-      combinerMediaQuery: false
+      combinerMediaQuery: false,
+      cssVariableReplacement: false
     },
     exclude: {
       rtl: [],
       hoverActive: [],
-      combinerMediaQuery: []
+      combinerMediaQuery: [],
+      cssVariableReplacement: []
     },
+    cssVariableReplacementConfig: '',
     seperateCssModules: {
       value: false,
       cli: 'sep_cssmodules'
@@ -302,13 +305,16 @@ var _default = {
     plugins: {
       hasRTL: false,
       hoverActive: false,
-      combinerMediaQuery: false
+      combinerMediaQuery: false,
+      cssVariableReplacement: false
     },
     exclude: {
       rtl: [],
       hoverActive: [],
-      combinerMediaQuery: []
+      combinerMediaQuery: [],
+      cssVariableReplacement: []
     },
+    cssVariableReplacementConfig: '',
     cssHashSelectors: {
       filenames: [],
       packages: []
@@ -319,6 +325,7 @@ var _default = {
     }
   },
   test: {
+    classnameFormat: '[classname]',
     srcBranch: {
       value: 'master',
       cli: 'src_branch'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "0.0.1-beta.172",
+  "version": "0.0.1-beta.174",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -78,7 +78,6 @@
     "html-webpack-inject-attributes-plugin": "1.0.6",
     "html-webpack-plugin": "4.3.0",
     "http-proxy-middleware": "1.0.5",
-    "identity-obj-proxy": "3.0.0",
     "jest": "26.4.0",
     "jsdom": "16.4.0",
     "loader-utils": "2.0.0",
@@ -93,7 +92,6 @@
     "postcss": "7.0.32",
     "postcss-combine-media-query": "1.0.1",
     "postcss-hash-classname": "0.4.0",
-    "postcss-import": "14.1.0",
     "postcss-loader": "3.0.0",
     "postcss-mobile-hover": "1.0.2",
     "postcss-selector-replace": "1.0.2",

package/templates/docs/css/style.css

@@ -660,8 +660,8 @@ section {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   word-wrap: normal;
+  word-break: break-word;
   border-right: 1px solid #ebedf0;
   padding: 16px 24px;
   text-align: left;

package/templates/docs/index.html

@@ -438,6 +438,7 @@
 							Components[propComName].propTypes) ||
 						{};
 					let currentCompProps = Object.keys(propsObj) || [];
+					let currentCompPropsDescription = window.componentList && window.componentList[propComName] && window.componentList[propComName].propsDescription || (Components[propComName] && Components[propComName].propsDescription) || {};
 					let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].defaultProps || (Components[propComName] && Components[propComName].defaultProps) || {};
 					let componentsObj=componentObj && this.filter(Object.keys(componentObj),'').map((item,i)=>{
 						return ({key:item,value:componentObj[item],length:Object.keys(componentObj[item]).length})
@@ -767,6 +768,7 @@
 																<span className="brR">Type</span>
 																<span className="brR">isRequired</span>
 																<span className="brR ">Default Props</span>
+																<span className="brR ">Description</span>
 															</div>
 															{
 																currentCompProps.map((value, i) => {
@@ -796,9 +798,15 @@
 																			</span>
 																			<span className="defaultProps">
 																				<div className="bn">
-																					{JSON.stringify(currentCompDefault[value])}
+																					{JSON.stringify(currentCompDefault[value] || '')}
 																				</div>
 																			</span>
+																			<span className="defaultProps">
+																				<div className="bn">
+																					{JSON.stringify(currentCompPropsDescription[value] || '')}
+																				</div>
+																			</span>  
+
 																		</div>
 																	);
 																})