@zohodesk/react-cli 0.0.1-exp.169.2 → 0.0.1-exp.175.0

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

@@ -0,0 +1,248 @@
+"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);
+
+  fs.writeFileSync('./css_error.log', '');
+  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

@@ -13,6 +13,7 @@ var _getCurrentBranch = _interopRequireDefault(require("../utils/getCurrentBranc
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// TODO move deprecated options to separate file and manage seperately
 var _default = {
   cliRootPath: null,
   unstableDepsInverse: {
@@ -90,6 +91,10 @@ var _default = {
     cssDirStatement: null
   },
   app: {
+    moduleResolvePath: {
+      value: '',
+      cli: 'module_resolve_path'
+    },
     // this option only for impact testing
     devCssFileBountry: {
       value: '',
@@ -136,6 +141,10 @@ var _default = {
         value: 'dev',
         cli: 'app_mode'
       },
+      httpsCerts: {
+        value: '',
+        cli: 'https_certs'
+      },
       branch: {
         value: 'master',
         cli: 'app_branch'
@@ -159,6 +168,10 @@ var _default = {
         cli: 'mock_port'
       }
     },
+    mediaQueryHoverActiveString: {
+      hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
+      none: '(hover: none)'
+    },
     disableES5Transpile: false,
     isReactMig: false,
     hasWidget: false,
@@ -193,6 +206,9 @@ var _default = {
       cli: 'attr_name'
     },
     publicPaths: false,
+    // TODO: Deprecated
+    hasRTL: false,
+    rtlExclude: [],
     instrumentScript: {
       value: false,
       cli: 'instru_script'
@@ -208,13 +224,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'
@@ -242,6 +261,7 @@ var _default = {
       replaceText: '//<!--AssetsFromBuild -->'
     },
     htmlTemplate: {
+      minify: null,
       inject: true
     },
     removePropTypes: false,
@@ -276,6 +296,10 @@ var _default = {
       },
       branch: false
     },
+    mediaQueryHoverActiveString: {
+      hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
+      none: '(hover: none)'
+    },
     componentFolder: 'src',
     cssUniqueness: {
       value: true,
@@ -284,16 +308,22 @@ var _default = {
     enableChunkHash: false,
     folder: 'src',
     disableES5Transpile: false,
+    // TODO: Deprecated
+    hasRTL: false,
+    rtlExclude: [],
     plugins: {
       hasRTL: false,
       hoverActive: false,
-      combinerMediaQuery: false
+      combinerMediaQuery: false,
+      cssVariableReplacement: false
     },
     exclude: {
       rtl: [],
       hoverActive: [],
-      combinerMediaQuery: []
+      combinerMediaQuery: [],
+      cssVariableReplacement: []
     },
+    cssVariableReplacementConfig: '',
     cssHashSelectors: {
       filenames: [],
       packages: []
@@ -304,6 +334,7 @@ var _default = {
     }
   },
   test: {
+    classnameFormat: '[classname]',
     srcBranch: {
       value: 'master',
       cli: 'src_branch'
@@ -321,7 +352,6 @@ var _default = {
       cli: 'branch_name'
     },
     impactServerDomain: {
-      //value: 'ht' + 'tp://desk-qa-impact.tsi.zohocorpin.com:8080',
       value: 'ht' + 'tp://desk-automation.csez.zohocorpin.com:8080',
       cli: 'impact_server_domain'
     },
@@ -344,7 +374,6 @@ var _default = {
       cli: 'service_name'
     },
     impactServerDomain: {
-      //value: 'ht' + 'tp://desk-qa-impact.tsi.zohocorpin.com:8080',
       value: 'ht' + 'tp://desk-automation.csez.zohocorpin.com:8080',
       cli: 'impact_server_domain'
     },
@@ -382,7 +411,7 @@ var _default = {
       cli: 'path_to_sub_projs'
     },
     tokenGit: {
-      value: 'YbByNJ3yURAm92Lhx4vW',
+      value: '',
       cli: 'git_token'
     },
     changesOnly: {
@@ -563,7 +592,6 @@ var _default = {
     },
     impactServerDomain: {
       value: 'ht' + 'tp://desk-automation.csez.zohocorpin.com:8080',
-      //value: 'ht' + 'tp://desk-qa-impact.tsi.zohocorpin.com:8080',
       cli: 'impact_server_domain'
     },
     impactRun: {

package/lib/servers/docsServerCore.js

@@ -29,28 +29,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // import fs from 'fs';
 var _default = isSSTest => {
-  let options = (0, _utils.getOptions)();
-  let {
+  const options = (0, _utils.getOptions)();
+  const httpsOptions = (0, _httpsOptions.httpsOptionsWithUserFriendlyError)(options);
+  const {
     docs: {
       server
     }
   } = options;
-  let {
+  const {
     port,
     branch,
     host,
     domain,
     iphost
   } = server;
-  let appPath = process.cwd();
+  const appPath = process.cwd();
   const app = (0, _express.default)();
   app.use(_express.default.json());
   app.use(_express.default.urlencoded({
     extended: true
   }));
-  let docsConfig = (0, _webpackDocs.default)(isSSTest);
-  let compiler = (0, _webpack.default)(docsConfig);
-  let wdm = (0, _webpackDevMiddleware.default)(compiler, {
+  const docsConfig = (0, _webpackDocs.default)(isSSTest);
+  const compiler = (0, _webpack.default)(docsConfig);
+  const wdm = (0, _webpackDevMiddleware.default)(compiler, {
     logLevel: 'error',
     publicPath: docsConfig.output.publicPath,
     headers: {
@@ -67,7 +68,7 @@ var _default = isSSTest => {
     res.sendFile(_path.default.join(__dirname, '..', '..', 'templates', 'docs', 'index.html'));
   });
   app.use('/author/get', (req, res) => {
-    let {
+    const {
       query: {
         componentName = ''
       }
@@ -84,7 +85,7 @@ var _default = isSSTest => {
 
   if (branch) {
     app.post('/repo/merge', (req, res) => {
-      let {
+      const {
         ref
       } = req.body;
 
@@ -98,7 +99,7 @@ var _default = isSSTest => {
     });
   }
 
-  const httpsServer = _https.default.createServer(_httpsOptions.httpsOptions, app);
+  const httpsServer = _https.default.createServer(httpsOptions, app);
 
   if (!isSSTest) {
     httpsServer.listen(port, err => {
@@ -110,8 +111,8 @@ var _default = isSSTest => {
     });
   }
 
-  let httpPort = Number(port) + 1;
-  let http = app.listen(httpPort, err => {
+  const httpPort = Number(port) + 1;
+  const http = app.listen(httpPort, err => {
     if (err) {
       throw err;
     }

package/lib/servers/getCliPath.js

@@ -24,5 +24,5 @@ const suffixExt = isWindows ? '.cmd' : '';
 function getCliPath(libName) {
   const cliPath = _getCliPath(libName + suffixExt);
 
-  return (0, _fs.existsSync)(cliPath) ? cliPath : libName;
+  return (0, _fs.existsSync)(cliPath) ? cliPath : libName + suffixExt;
 }

package/lib/servers/httpsOptions.js

@@ -3,16 +3,47 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.httpsOptions = void 0;
+exports.httpsOptions = httpsOptions;
+exports.httpsOptionsWithUserFriendlyError = httpsOptionsWithUserFriendlyError;
 
-var _fs = _interopRequireDefault(require("fs"));
+// import fs from 'fs';
+// import path from 'path';
+// export const httpsOptions = {
+//   key: fs.readFileSync(path.join(__dirname, './cert/Tsicsezwild-22-23.key')),
+//   cert: fs.readFileSync(path.join(__dirname, './cert/Tsicsezwild-22-23.crt'))
+// };
+function httpsOptions(options) {
+  const {
+    httpsCerts
+  } = options.app.server;
 
-var _path = _interopRequireDefault(require("path"));
+  const certificate = require(require.resolve(httpsCerts, {
+    paths: [process.cwd()]
+  })); // TODO: in future we may do some version based check. certificate.version
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const httpsOptions = {
-  key: _fs.default.readFileSync(_path.default.join(__dirname, '../../cert/Tsicsezwild-22-23.key')),
-  cert: _fs.default.readFileSync(_path.default.join(__dirname, '../../cert/Tsicsezwild-22-23.crt'))
-};
-exports.httpsOptions = httpsOptions;
+  return certificate.httpsOptions;
+}
+
+function httpsOptionsWithUserFriendlyError(options) {
+  const {
+    httpsCerts
+  } = options.app.server;
+
+  if (typeof httpsCerts === 'string') {
+    try {
+      const certificate = httpsOptions(options);
+      return certificate;
+    } catch (error) {
+      if (error.message.indexOf('Cannot find module') !== -1) {
+        console.error(`You have given react-cli.app.server.httpsCerts as "${httpsCerts}". \n But it seems that file path have some problem.\n we are unable to locate "${httpsCerts}" in "${process.cwd()}"`);
+      } else {
+        console.error(error);
+      }
+
+      process.exit(0);
+    }
+  } else {
+    return null;
+  }
+}

package/lib/servers/nowatchserver.js

@@ -19,15 +19,16 @@ var _devBuild = require("./devBuild");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import webpack from 'webpack';
-let options = (0, _utils.getOptions)(); // let args = process.argv.slice(3);
+const options = (0, _utils.getOptions)(); // let args = process.argv.slice(3);
 
-let {
+const httpsOptions = (0, _httpsOptions.httpsOptionsWithUserFriendlyError)(options);
+const {
   app: {
     context,
     server
   }
 } = options;
-let {
+const {
   host,
   port,
   domain,
@@ -35,9 +36,9 @@ let {
   hasMock,
   mockPort
 } = server;
-let isCompatableHttp2 = Number(process.version.slice(1).split('.')[0]) >= 8;
-let contextURL = disableContextURL ? '' : `/${context}`;
-let serverUrl = (0, _utils.getServerURL)(server, 'htt' + 'ps');
+const isCompatableHttp2 = Number(process.version.slice(1).split('.')[0]) >= 8;
+const contextURL = disableContextURL ? '' : `/${context}`;
+const serverUrl = (0, _utils.getServerURL)(server, 'htt' + 'ps');
 const {
   zipname,
   cssSelectorZipPath,
@@ -83,7 +84,7 @@ app.use('/wms/*', (req, res) => {
   res.sendFile(_path.default.join(__dirname, '..', '..', 'templates', 'wms', 'index.html'));
 });
 
-const httpsServer = _https.default.createServer(_httpsOptions.httpsOptions, app);
+const httpsServer = _https.default.createServer(httpsOptions, app);
 
 const wss = new _ws.default.Server({
   server: httpsServer
@@ -101,7 +102,7 @@ wss.on('connection', ws => {
 });
 app.post('/wmsmockapi', (req, res) => {
   wsPool.forEach(ws => {
-    let {
+    const {
       body
     } = req;
 
@@ -161,7 +162,7 @@ httpsServer.listen(port, err => {
 if (isCompatableHttp2) {
   const http2 = require('http2');
 
-  const http2Server = http2.createSecureServer(_httpsOptions.httpsOptions); // eslint-disable-next-line no-unused-vars
+  const http2Server = http2.createSecureServer(httpsOptions); // eslint-disable-next-line no-unused-vars
 
   http2Server.on('stream', (stream, headers) => {
     stream.respond({
@@ -170,7 +171,7 @@ if (isCompatableHttp2) {
     });
     stream.end('<h1>Hello World! <br>Working with http2</h1>');
   });
-  let http2Port = Number(port) + 1;
+  const http2Port = Number(port) + 1;
   http2Server.listen(http2Port, err => {
     if (err) {
       throw err;
@@ -186,7 +187,7 @@ if (isCompatableHttp2) {
   (0, _utils.log)('Your node version didn\'t adopted http2 support. Kindly update that to 8 LTS or above you can engage the http2');
 }
 
-let httpPort = Number(port) + (isCompatableHttp2 ? 2 : 1);
+const httpPort = Number(port) + (isCompatableHttp2 ? 2 : 1);
 app.listen(httpPort, err => {
   if (err) {
     throw err;