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

package/README.md

@@ -2,11 +2,26 @@
 
 A CLI tool for build modern web application and libraries
 
+# 0.0.1-beta.174
+
+cli has been updated to fix compose issue faced when classname:hover exists and classname does not before compose
+
+**Issue Fix:-**
+ * In react-cli version `0.0.1-beta.173`, when we use `start` command throws error issue fixed
+ * while using `cssVariableReplacementOptions`, compose issue faced in css files, when classname:hover exists and classname does not exist issue fixed
+
+**Feature:-** 
+* `react-cli.test.classnameFormat` option added to change CssModules (Ex: import style from "./a.module.css" ) className transform template unittest case.  
+    `classnameFormat` default value `[classname]` you can customize it. Example: `[classname]-[hash]`
+
+**Changes:-**
+* `jsonFile_test_*.json` files deleted after they used.
+
 # 0.0.1-beta.173
 
 Conversion for Variables from Variables to px in Supportapp completed (`variableIgnore.js` && `pxParserPostcss.js` to be referred to), and px to custom variables through the new `variableModificationPlugin`. Error Log generation can also be converted on enabling
 
-Features: 
+**Features:** 
 1. variables are converted from px to custom variables ( options are consumed from `cssVariableReplacementOptions.json` present in source folder )
 2. To enable the error log generation `errorLog` is to be made `true` in `cssVariableReplacementOptions.json` ( it will take a little longer than usual build time )
 3. To enable the console display of errors that are generated, `errorInConsole` is to be made `true` in `cssVariableReplacementOptions.json`
@@ -82,6 +97,10 @@ Changes:-
 1. `enableChunkHash` option enabled for dev mode, use it as `react-cli.app.enableChunkHash` in `package.json`
 2. `--enable_efc=true` option added to enable efc by terminal
 3. unwanted pem files removed
+# 0.0.1-exp.167.1
+Features:-
+ * In docs we have added `Description` for Component Props- check out it in `PropTypes` tab
+
 
 # 0.0.1-beta.167
 

package/lib/configs/jest.config.js

@@ -8,17 +8,11 @@ var _libAlias = require("./libAlias");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let appPath = process.cwd(); //   '^@root(.*)$': '<rootDir>/src$1',
-// '^@components(.*)$': '<rootDir>/src/components$1',
-
-let moduleNameMapper = Object.keys(_libAlias.libAlias).reduce((previousValue, key) => {
-  previousValue[`^${key}(.*)$`] = `${_libAlias.libAlias[key]}$1`;
-  return previousValue;
-}, {});
+const appPath = process.cwd();
 
 const appGlobals = _path.default.resolve(appPath, '__testUtils__', 'globals.js');
 
-let commonConfig = {
+const commonConfig = {
   coverageReporters: ['json', 'html', 'json-summary', 'text'],
   collectCoverage: true,
   moduleDirectories: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
@@ -27,9 +21,11 @@ let commonConfig = {
     '^.+\\.css$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'cssPreprocessor.js'),
     '^(?!.*\\.(js|jsx|css|json)$)': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'otherFilesPreprocessor.js')
   },
-  moduleNameMapper: { ...moduleNameMapper,
-    '\\.(css|less)$': 'identity-obj-proxy'
-  },
+  moduleNameMapper: _libAlias.jestModuleNameMapper,
+  // moduleNameMapper: {
+  //   ...moduleNameMapper,
+  //   '\\.(css|less)$': 'identity-obj-proxy'
+  // },
   transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
   // transformIgnorePatterns: ['/node_modules.*?.js$'],
   moduleFileExtensions: ['js'],
@@ -42,7 +38,7 @@ let commonConfig = {
 };
 
 module.exports = (...args) => {
-  let [appFolder, forCommittedFiles = false] = args;
+  const [appFolder, forCommittedFiles = false] = args;
 
   if (forCommittedFiles) {
     return Object.assign({}, commonConfig, {

package/lib/configs/libAlias.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.libAlias = void 0;
+exports.libAlias = exports.jestModuleNameMapper = void 0;
 // the reason for alias at the time was code tree shaking
 // tree shaking was most compactable with ES module system
 // FIXME: But there is a posiblity when these  package  does not have lib,
@@ -27,5 +27,12 @@ const libAlias = {
   '@zohodesk/timetracker/lib': '@zohodesk/timetracker/es',
   '@zohodesk/variables/lib': '@zohodesk/variables/es',
   '@zohodesk/virtualizer/lib': '@zohodesk/virtualizer/es'
-};
-exports.libAlias = libAlias;
+}; //   '^@root(.*)$': '<rootDir>/src$1',
+// '^@components(.*)$': '<rootDir>/src/components$1',
+
+exports.libAlias = libAlias;
+const jestModuleNameMapper = Object.keys(libAlias).reduce((previousValue, key) => {
+  previousValue[`^${key}(.*)$`] = `${libAlias[key]}$1`;
+  return previousValue;
+}, {});
+exports.jestModuleNameMapper = jestModuleNameMapper;

package/lib/jest/preProcessors/cssPreprocessor.js

@@ -6,23 +6,32 @@ var _postcssHashClassname = _interopRequireDefault(require("postcss-hash-classna
 
 var _fs = _interopRequireDefault(require("fs"));
 
+var _utils = require("../../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 let count = 0;
+const options = (0, _utils.getOptions)();
+const {
+  classnameFormat
+} = options.test;
 module.exports = {
   process: function (src) {
     count++;
-    let opts = {
+    const opts = {
       hashType: 'md5',
-      digestType: 'base32'
+      digestType: 'base32',
+      maxLength: 6,
+      type: '.json',
+      classnameFormat: classnameFormat,
+      outputName: `jsonFile_test_${count}`
     };
-    opts.maxLength = 6;
-    opts.type = '.json';
-    opts.outputName = `jsonFile_test_${count}`;
-    let processor = (0, _postcss.default)([(0, _postcssHashClassname.default)(opts)]);
+    const processor = (0, _postcss.default)([(0, _postcssHashClassname.default)(opts)]);
     processor.process(src).css;
 
-    let jsonMap = _fs.default.readFileSync(`jsonFile_test_${count}.json`, 'UTF-8');
+    const jsonMap = _fs.default.readFileSync(`jsonFile_test_${count}.json`, 'UTF-8');
+
+    _fs.default.unlinkSync(`jsonFile_test_${count}.json`);
 
     return `module.exports =${jsonMap}`;
   }

package/lib/loaderUtils/getCSSLoaders.js

@@ -93,7 +93,7 @@ const getCSSLoaders = (plugins, exclude, mediaQueryHoverActiveString, cssVariabl
   }), ...excludeEmptyCheckPlugin({
     enable: plugins.cssVariableReplacement,
     ignore: cssVariableReplacementExcludeLocal,
-    plugins: [require('../postcss-plugins/variableModificationPlugin/index')(cssVariableReplacementConfig)]
+    plugins: [fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index')(cssVariableReplacementConfig)]
   })].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')

package/lib/postcss-plugins/hoverActivePlugin.js

@@ -33,9 +33,24 @@ function isHoverPresent(atrule) {
   return hoverPresent;
 }
 
+function checkForUsualClass(root, sel) {
+  let present = false;
+  sel.split(',').forEach(value => {
+    if (value.includes('hover')) {
+      const valueNoHover = value.replace(':hover', '').trim();
+      root.walkRules(rule => {
+        if (rule.selector === valueNoHover) {
+          present = true;
+        }
+      });
+    }
+  });
+  return present;
+}
+
 module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHoverActiveString => rootOriginal => {
   const hoverRules = [];
-  let positionsObj = {};
+  const positionsObj = {};
   hoverMedQuerySuffix = mediaQueryHoverActiveString.hover;
   hoverNoneMedQuerySuffix = mediaQueryHoverActiveString.none;
 
@@ -145,16 +160,16 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
     if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
       //console.log(hovMed, actMed);
       let newSelector = '';
-      let {
+      const {
         hovMed,
         actMed
       } = getPositionsOfHoverAndActiveMedQueries(rule.parent);
-      let hovQueries = [];
-      let actQueries = [];
+      const hovQueries = [];
+      const actQueries = [];
       rule.selector.split(/\s*,\s*/).forEach(_subrule => {
-        let subrule = _subrule.trim();
+        const subrule = _subrule.trim();
 
-        let clone = rule.clone();
+        const clone = rule.clone();
 
         if (subrule.includes('hover')) {
           clone.selector = subrule;
@@ -172,13 +187,13 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
       });
 
       if (hovQueries.length > 0) {
-        let clone = rule.clone();
+        const clone = rule.clone();
         clone.selector = hovQueries.join(',');
         hovMed.append(clone);
       }
 
       if (actQueries.length > 0) {
-        let clone = rule.clone();
+        const clone = rule.clone();
         clone.selector = actQueries.join(',');
         actMed.append(clone.clone({
           selector: clone.selector.replace(/:hover/gi, ':active')
@@ -197,7 +212,7 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
 
   function mediaQuery(rule, index) {
     if (rule.parent.params !== undefined && !rule.parent.params.includes('hover')) {
-      let {
+      const {
         hovMed,
         actMed
       } = getPositionsOfHoverAndActiveMedQueries(rule.parent);
@@ -219,9 +234,9 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
   function commaQuery(rule, index) {
     //console.log("comma" , rule.selector.split('\n'));
     let newSelector = '';
-    let hovQueries = [];
+    const hovQueries = [];
     rule.selector.split(/\s*,\s*/).forEach(_subrule => {
-      let subrule = _subrule.trim();
+      const subrule = _subrule.trim();
 
       if (subrule.includes('hover')) {
         // hoverRules.push({ rule: clone, index });
@@ -232,7 +247,7 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
     });
 
     if (hovQueries.length > 0) {
-      let clone = rule.clone();
+      const clone = rule.clone();
       clone.selector = hovQueries.join(',');
       hoverRules.push({
         rule: clone,
@@ -241,7 +256,9 @@ module.exports = _postcss.default.plugin('postcss-mobile-hover', mediaQueryHover
     }
 
     if (handleHoverAndHoverActiveIgnore(index)) {
-      rule.selector = newSelector.substring(0, newSelector.length - 2).trim();
+      if (checkForUsualClass(rootOriginal, rule.selector)) {
+        rule.selector = newSelector.substring(0, newSelector.length - 2).trim();
+      }
     }
 
     if (rule.selector === '') {

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

@@ -134,9 +134,9 @@ module.exports = postcss.plugin('postcss-variable-report', cssVariableReplacemen
   let regValStr = '';
   replacementArray.forEach((val, index) => {
     if (index !== replacementArray.length - 1) {
-      regValStr += `${val.replace('$$', '\\d+')}|`;
+      regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}|`;
     } else {
-      regValStr += `${val.replace('$$', '\\d+')}`;
+      regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}`;
     }
   });
   const valRegex = new RegExp(regValStr, 'gi');

package/lib/schemas/index.js

@@ -325,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.173",
+  "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>
 																	);
 																})