npm - @zohodesk/react-cli - Versions diffs - 1.0.1 → 1.0.2-exp.2 - Mend

@zohodesk/react-cli 1.0.1 → 1.0.2-exp.2

Files changed (137) hide show

package/.eslintignore +7 -7
package/.eslintrc.js +180 -180
package/.prettierrc +6 -6
package/Changelog.md +1019 -1019
package/README.md +1165 -1160
package/bin/cli.js +483 -483
package/docs/CustomChunks.md +26 -26
package/docs/DevServerPort.md +39 -39
package/docs/DevStart.md +18 -18
package/docs/HoverActive.md +12 -12
package/docs/InstallNode.md +28 -28
package/docs/SelectorWeight.md +8 -8
package/docs/TODOS.md +10 -10
package/docs/ValueReplacer.md +60 -60
package/docs/VariableConversion.md +729 -729
package/docs/warnings_while_install.txt +35 -35
package/files/eslintrc.js +62 -62
package/files/prettierrc.js +3 -3
package/lib/configs/webpack.css.umd.config.js +4 -4
package/lib/configs/webpack.dev.config.js +6 -0
package/lib/configs/webpack.docs.config.js +4 -0
package/lib/configs/webpack.impact.config.js +4 -0
package/lib/configs/webpack.prod.config.js +6 -0
package/lib/loaderUtils/configsAssetsLoaders.js +33 -33
package/lib/loaderUtils/getCSSLoaders.js +79 -50
package/lib/loaderUtils/tests/windowsModification.test.js +10 -0
package/lib/loaderUtils/windowsModification.js +6 -1
package/lib/loaders/composeLoader.js +175 -0
package/lib/loaders/workerLoader.js +9 -9
package/lib/pluginUtils/getDevPlugins.js +18 -7
package/lib/pluginUtils/getProdPlugins.js +6 -6
package/lib/pluginUtils/getUMDCSSPlugins.js +1 -1
package/lib/pluginUtils/getUMDComponentPlugins.js +1 -1
package/lib/plugins/EFCPlugin.md +6 -6
package/lib/plugins/I18NInjectIntoIndexPlugin.js +4 -4
package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +38 -38
package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +30 -30
package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +8 -8
package/lib/plugins/I18nSplitPlugin/I18nSplit.md +95 -95
package/lib/plugins/I18nSplitPlugin/README.md +25 -25
package/lib/plugins/I18nSplitPlugin/index.js +57 -57
package/lib/plugins/{UglifyCSSPlugin.js → MinifyPlugin.js} +3 -3
package/lib/plugins/ResourceHintsPlugin.js +17 -17
package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +6 -6
package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -30
package/lib/plugins/SelectorPlugin.js +56 -45
package/lib/plugins/ServiceWorkerPlugin.js +9 -9
package/lib/plugins/TPHashMappingPlugin.js +4 -4
package/lib/plugins/VariableConversionCollector.js +93 -84
package/lib/plugins/index.js +7 -7
package/lib/plugins/utils/classHandling.js +20 -0
package/lib/plugins/utils/fileHandling.js +92 -0
package/lib/plugins/utils/tests/fileHandling.test.js +30 -0
package/lib/postcss-plugins/EmptyPlugin.js +8 -0
package/lib/postcss-plugins/ExcludePlugin.js +1 -1
package/lib/postcss-plugins/RTLSplitPlugin.js +10 -10
package/lib/postcss-plugins/SelectorReplace.js +80 -0
package/lib/postcss-plugins/ValueReplacer.js +2 -13
package/lib/postcss-plugins/__test__/selectorReplace.test.js +28 -0
package/lib/postcss-plugins/__test__/test1Input.css +38 -38
package/lib/postcss-plugins/__test__/test1Output.css +38 -38
package/lib/postcss-plugins/hoverActivePlugin.js +3 -3
package/lib/postcss-plugins/variableModificationPlugin/index.js +1 -19
package/lib/postcss-plugins/variableModifier.js +1 -1
package/lib/schemas/index.js +34 -3
package/lib/servers/server.js +2 -2
package/lib/sh/pre-commit.sh +34 -34
package/lib/sh/reportPublish.sh +45 -45
package/lib/utils/buildstats.html +148 -148
package/lib/utils/cssClassNameGenerate.js +35 -7
package/lib/utils/resultSchema.json +73 -73
package/npm8.md +9 -9
package/package.json +122 -121
package/postpublish.js +8 -8
package/templates/app/.eslintrc.js +140 -140
package/templates/app/README.md +12 -12
package/templates/app/app/index.html +24 -24
package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
package/templates/app/app/properties/i18nkeys.json +3 -3
package/templates/app/docs/all.html +69 -69
package/templates/app/mockapi/index.js +18 -18
package/templates/app/package.json +37 -37
package/templates/app/src/actions/SampleActions/index.js +37 -37
package/templates/app/src/actions/index.js +65 -65
package/templates/app/src/appUrls.js +19 -19
package/templates/app/src/components/Alert/Alert.js +134 -134
package/templates/app/src/components/Alert/Alert.module.css +79 -79
package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -37
package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -84
package/templates/app/src/components/Sample/Sample.module.css +11 -11
package/templates/app/src/components/Sample/SampleList.js +61 -61
package/templates/app/src/components/Slider/Slider.css +41 -41
package/templates/app/src/components/Slider/Slider.js +55 -55
package/templates/app/src/containers/AlertContainer/index.js +15 -15
package/templates/app/src/containers/AppContainer/index.js +96 -96
package/templates/app/src/containers/AppContainer/index.module.css +27 -27
package/templates/app/src/containers/CustomMatch/index.js +65 -65
package/templates/app/src/containers/DevTools/index.js +10 -10
package/templates/app/src/containers/Header/index.js +67 -67
package/templates/app/src/containers/Header/index.module.css +43 -43
package/templates/app/src/containers/Redirect/index.js +63 -63
package/templates/app/src/containers/Redirector/index.js +47 -47
package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -42
package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -3
package/templates/app/src/historyChange.js +5 -5
package/templates/app/src/index.html +10 -10
package/templates/app/src/index.js +24 -24
package/templates/app/src/middleware/PromiseMiddleware.js +59 -59
package/templates/app/src/reducers/alertData.js +11 -11
package/templates/app/src/reducers/index.js +6 -6
package/templates/app/src/reducers/samples.js +19 -19
package/templates/app/src/store/configureStore.dev.js +51 -51
package/templates/app/src/store/configureStore.js +5 -5
package/templates/app/src/store/configureStore.prod.js +26 -26
package/templates/app/src/util/Common.js +5 -5
package/templates/app/src/util/RequestAPI.js +132 -132
package/templates/docs/all.html +249 -249
package/templates/docs/component.html +178 -178
package/templates/docs/components.html +221 -221
package/templates/docs/css/b.min.css +6 -6
package/templates/docs/css/component.css +42 -42
package/templates/docs/css/componentTest.css +6 -6
package/templates/docs/css/hopscotch.css +585 -585
package/templates/docs/css/style.css +1022 -1022
package/templates/docs/impactReportTemplate.html +154 -154
package/templates/docs/index.html +1501 -1501
package/templates/docs/js/active-line.js +72 -72
package/templates/docs/js/b.min.js +7 -7
package/templates/docs/js/codemirror.js +9680 -9680
package/templates/docs/js/designTokens.js +334 -334
package/templates/docs/js/j.min.js +4 -4
package/templates/docs/js/javascript.js +874 -874
package/templates/docs/js/matchbrackets.js +145 -145
package/.vscode/settings.json +0 -11
package/lib/plugins/composeCommonPlugin.js +0 -30
package/result.json +0 -1
package/unittest/index.html +0 -37

package/lib/utils/buildstats.html CHANGED Viewed

@@ -1,148 +1,148 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
-    <style>
-      #file {
-        font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
-        border-collapse: collapse;
-        width: 100%;
-      }
-      #redTd {
-        color: red;
-      }
-      #greenTD {
-        color: green;
-      }
-      #file td,
-      #file th {
-        border: 1px solid #ddd;
-        padding: 8px;
-        text-align: center;
-      }
-      #file tr:nth-child(even) {
-        background-color: #f2f2f2;
-      }
-      #file tr:hover {
-        background-color: #ddd;
-      }
-      #file th {
-        padding-top: 12px;
-        padding-bottom: 12px;
-        background-color: #2a2d36;
-        color: white;
-      }
-      #sizeTable {
-        float: left;
-        width: 50%;
-      }
-      #hashTable {
-        display: inline-block;
-        width: 50%;
-      }
-    </style>
-    <script type="text/javascript" src="./buildtrack.js"></script>
-  </head>
-  <body>
-    <div>
-      <div style="float: left;margin-right: 10px;">Branch Name:</div>
-      <h4 id="h4" style="margin: 0px;"></h4>
-    </div>
-    <div id="sizeTable">
-      <div>
-        <h3>Size changes</h3>
-        <h3></h3>
-      </div>
-      <table id="file" class="table table-bordered table-hover table-condensed">
-        <thead>
-          <tr>
-            <th title="Field #1">Name</th>
-            <th title="Field #2">Size / Diff</th>
-            <th title="Field #3">Size / Old</th>
-            <th title="Field #4">Size / New</th>
-          </tr>
-        </thead>
-        <tbody id="sizeTbody"></tbody>
-      </table>
-    </div>
-    <div id="hashTable">
-      <div>
-        <h3>Hash changes</h3>
-        <h3></h3>
-      </div>
-      <table id="file" class="table table-bordered table-hover table-condensed">
-        <thead>
-          <tr>
-            <th style="background-color: #4CAF50;" title="Field #1">Name</th>
-            <th style="background-color: #4CAF50;" title="Field #2">
-              Hash / Old
-            </th>
-            <th style="background-color: #4CAF50;" title="Field #3">
-              Hash / New
-            </th>
-          </tr>
-        </thead>
-        <tbody id="hashTbody"></tbody>
-      </table>
-    </div>
-    <script type="text/javascript">
-      function load() {
-        if (statsJson) {
-          var tdStringSize = '';
-          var tdStringHash = '';
-          if (statsJson.increased.length > 0) {
-            statsJson.increased.forEach(fileObj => {
-              let colorTD = '</td><td>';
-              if (fileObj.size.diff.split(' ').length > 2) {
-                colorTD = '</td><td id="greenTd">';
-              } else {
-                colorTD = '</td><td id="redTd">';
-              }
-              tdStringSize =
-                tdStringSize +
-                '<tr><td>' +
-                fileObj.name +
-                colorTD +
-                fileObj.size.diff +
-                '</td><td>' +
-                fileObj.size.old +
-                '</td><td>' +
-                fileObj.size.new +
-                '</td><tr>';
-            });
-          } else {
-            tdStringSize = '<tr><td></td><td></td><td></td></tr>';
-          }
-          document.getElementById('sizeTbody').innerHTML = tdStringSize;
-          if (statsJson.hashChanged.length > 0) {
-            statsJson.hashChanged.forEach(fileObj => {
-              tdStringHash =
-                tdStringHash +
-                '<tr><td>' +
-                fileObj.name +
-                '</td><td>' +
-                fileObj.hash.old +
-                '</td><td>' +
-                fileObj.hash.new +
-                '</td><tr>';
-            });
-          } else {
-            tdStringHash = '<tr><td></td><td></td><td></td></tr>';
-          }
-          document.getElementById('hashTbody').innerHTML = tdStringHash;
-          if (statsJson.branchName) {
-            document.getElementById('h4').innerHTML = statsJson.branchName;
-          } else {
-            document.getElementById('h4').innerHTML = 'Not specified';
-          }
-        }
-      }
-      load();
-    </script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
+    <style>
+      #file {
+        font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
+        border-collapse: collapse;
+        width: 100%;
+      }
+      #redTd {
+        color: red;
+      }
+      #greenTD {
+        color: green;
+      }
+      #file td,
+      #file th {
+        border: 1px solid #ddd;
+        padding: 8px;
+        text-align: center;
+      }
+      #file tr:nth-child(even) {
+        background-color: #f2f2f2;
+      }
+      #file tr:hover {
+        background-color: #ddd;
+      }
+      #file th {
+        padding-top: 12px;
+        padding-bottom: 12px;
+        background-color: #2a2d36;
+        color: white;
+      }
+      #sizeTable {
+        float: left;
+        width: 50%;
+      }
+      #hashTable {
+        display: inline-block;
+        width: 50%;
+      }
+    </style>
+    <script type="text/javascript" src="./buildtrack.js"></script>
+  </head>
+  <body>
+    <div>
+      <div style="float: left;margin-right: 10px;">Branch Name:</div>
+      <h4 id="h4" style="margin: 0px;"></h4>
+    </div>
+    <div id="sizeTable">
+      <div>
+        <h3>Size changes</h3>
+        <h3></h3>
+      </div>
+      <table id="file" class="table table-bordered table-hover table-condensed">
+        <thead>
+          <tr>
+            <th title="Field #1">Name</th>
+            <th title="Field #2">Size / Diff</th>
+            <th title="Field #3">Size / Old</th>
+            <th title="Field #4">Size / New</th>
+          </tr>
+        </thead>
+        <tbody id="sizeTbody"></tbody>
+      </table>
+    </div>
+    <div id="hashTable">
+      <div>
+        <h3>Hash changes</h3>
+        <h3></h3>
+      </div>
+      <table id="file" class="table table-bordered table-hover table-condensed">
+        <thead>
+          <tr>
+            <th style="background-color: #4CAF50;" title="Field #1">Name</th>
+            <th style="background-color: #4CAF50;" title="Field #2">
+              Hash / Old
+            </th>
+            <th style="background-color: #4CAF50;" title="Field #3">
+              Hash / New
+            </th>
+          </tr>
+        </thead>
+        <tbody id="hashTbody"></tbody>
+      </table>
+    </div>
+    <script type="text/javascript">
+      function load() {
+        if (statsJson) {
+          var tdStringSize = '';
+          var tdStringHash = '';
+          if (statsJson.increased.length > 0) {
+            statsJson.increased.forEach(fileObj => {
+              let colorTD = '</td><td>';
+              if (fileObj.size.diff.split(' ').length > 2) {
+                colorTD = '</td><td id="greenTd">';
+              } else {
+                colorTD = '</td><td id="redTd">';
+              }
+              tdStringSize =
+                tdStringSize +
+                '<tr><td>' +
+                fileObj.name +
+                colorTD +
+                fileObj.size.diff +
+                '</td><td>' +
+                fileObj.size.old +
+                '</td><td>' +
+                fileObj.size.new +
+                '</td><tr>';
+            });
+          } else {
+            tdStringSize = '<tr><td></td><td></td><td></td></tr>';
+          }
+          document.getElementById('sizeTbody').innerHTML = tdStringSize;
+          if (statsJson.hashChanged.length > 0) {
+            statsJson.hashChanged.forEach(fileObj => {
+              tdStringHash =
+                tdStringHash +
+                '<tr><td>' +
+                fileObj.name +
+                '</td><td>' +
+                fileObj.hash.old +
+                '</td><td>' +
+                fileObj.hash.new +
+                '</td><tr>';
+            });
+          } else {
+            tdStringHash = '<tr><td></td><td></td><td></td></tr>';
+          }
+          document.getElementById('hashTbody').innerHTML = tdStringHash;
+          if (statsJson.branchName) {
+            document.getElementById('h4').innerHTML = statsJson.branchName;
+          } else {
+            document.getElementById('h4').innerHTML = 'Not specified';
+          }
+        }
+      }
+      load();
+    </script>
+  </body>
+</html>

package/lib/utils/cssClassNameGenerate.js CHANGED Viewed

@@ -9,6 +9,8 @@ var _os = _interopRequireDefault(require("os"));
 var _path = _interopRequireDefault(require("path"));
+var _fileHandling = require("../plugins/utils/fileHandling");
 var _getHash = _interopRequireDefault(require("./getHash"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,17 +41,47 @@ let isSelectorPackage = (resourcePath, packages) => {
 var _default = (unique = true, {
   filenames,
   packages
-}, classNamePrefix) => (context, localIdentName, localName) => {
+}, classNamePrefix, patterns, rootDir) => (context, localIdentName, localName) => {
+  // console.log(patterns, context.resourcePath);
   // NOTE:  in build macine we use date as folder path.
   // So every time we create new build there is path will alway different
   // in order to minmaze that problem we try in relative path;
   // console.log('context.resourcePath', context.resourcePath, context);
   // let contextResourcePath = context.resourcePath;
+  let filePaths = context.resourcePath.split(_path.default.sep);
+  let fileName = filePaths[filePaths.length - 1];
+  let [fileNameWithoutExt] = fileName.split('.');
+  let cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
   let relativePath = _path.default.relative(context.rootContext, context.resourcePath);
+  /*
+    input :
+    context.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+      patterns.cssVariableReplacement:
+    // include src folder, include deskapp folder, exclude node modules
+    "cssUniqueness": [
+      "src",
+      "deskapp",
+      "!node_modules"
+    ]
+      rootDir : patternsRootDir : 'supportapp'
+      output :
+    true or false
+  */
   if (context.resourcePath.endsWith('.plain.css')) {
     return localName;
   }
+  if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+    filename: context.resourcePath,
+    filterArr: patterns.cssUniqueness,
+    rootDir
+  })) {
+    return `${classNamePrefix}-${cleanFileName}-${localName}`;
+  }
   /* old production mode start without breaking so added. may be removed in future*/
@@ -58,14 +90,10 @@ var _default = (unique = true, {
     return `${classNamePrefix}${h}`;
   }
   /* old production mode end*/
-  let filePaths = context.resourcePath.split(_path.default.sep);
-  let fileName = filePaths[filePaths.length - 1];
-  let [fileNameWithoutExt] = fileName.split('.');
-  let cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase(); //css file has casesensitive selector issue so can't toLowerCase
+  //css file has casesensitive selector issue so can't toLowerCase
   //let local = localName.toLowerCase()
   if (isSelectorPackage(context.resourcePath, packages) || filenames.indexOf(cleanFileName) !== -1) {
     let h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;

package/lib/utils/resultSchema.json CHANGED Viewed

@@ -1,73 +1,73 @@
-{
-  "jobDetails": {
-    "isTriggeredFromGit": true,
-    "isCIPassed": true,
-    "developerName": "GITLAB_USER_NAME",
-    "jobID": "CI_PIPELINE_ID",
-    "branchName": "CI_COMMIT_REF_NAME",
-    "commitMessage": "CI_COMMIT_MESSAGE",
-    "jobURL": "CI_JOB_URL",
-    "isByManual": "CI_JOB_MANUAL",
-    "commitID": "CI_COMMIT_SHA",
-    "executionTime": "Date.now()-Date.now()",
-    "hostName": "kathir-zt252"
-  },
-  "tests": {
-    "unitCase": {
-      "startTime": "123455",
-      "endTime": "123446",
-      "isExecuted": true,
-      "numberOfSuccess": "",
-      "numberOfFails": "",
-      "numberOfCases": "",
-      "numberOfSuites": "",
-      "fileDetail": {
-        "fileName": "sample.spec.js",
-        "caseDetail": {
-          "failedCaseLists": [],
-          "passedCaseList": []
-        }
-      },
-      "coverageDetail": {
-        "codeCoveragePercentage": "",
-        "fileCoveragePercentage": ""
-      }
-    },
-    "modifiedFileUnitCase": {
-      "hasChanges": "true",
-      "startTime": "123455",
-      "endTime": "123446",
-      "isExecuted": true,
-      "isPassed": true,
-      "numberOfSuccess": "",
-      "numberOfFails": "",
-      "numberOfCases": "",
-      "numberOfSuites": "",
-      "fileDetail": {
-        "fileName": "sample.spec.js",
-        "caseDetail": {
-          "failedCaseLists": [],
-          "passedCaseList": []
-        }
-      },
-      "coverageDetail": {
-        "codeCoveragePercentage": "",
-        "fileCoveragePercentage": ""
-      }
-    },
-    "screenshotTest": {
-      "message": "some",
-      "startTime": "123455",
-      "endTime": "123446",
-      "isThisExecuted": true,
-      "compareBranch": "master",
-      "isPassed": true,
-      "result": {
-        "numberOfComponents": 200,
-        "numberOfDiffFiles": 20,
-        "improperDocsList": [],
-        "erroredComponents": []
-      }
-    }
-  }
-}
+{
+  "jobDetails": {
+    "isTriggeredFromGit": true,
+    "isCIPassed": true,
+    "developerName": "GITLAB_USER_NAME",
+    "jobID": "CI_PIPELINE_ID",
+    "branchName": "CI_COMMIT_REF_NAME",
+    "commitMessage": "CI_COMMIT_MESSAGE",
+    "jobURL": "CI_JOB_URL",
+    "isByManual": "CI_JOB_MANUAL",
+    "commitID": "CI_COMMIT_SHA",
+    "executionTime": "Date.now()-Date.now()",
+    "hostName": "kathir-zt252"
+  },
+  "tests": {
+    "unitCase": {
+      "startTime": "123455",
+      "endTime": "123446",
+      "isExecuted": true,
+      "numberOfSuccess": "",
+      "numberOfFails": "",
+      "numberOfCases": "",
+      "numberOfSuites": "",
+      "fileDetail": {
+        "fileName": "sample.spec.js",
+        "caseDetail": {
+          "failedCaseLists": [],
+          "passedCaseList": []
+        }
+      },
+      "coverageDetail": {
+        "codeCoveragePercentage": "",
+        "fileCoveragePercentage": ""
+      }
+    },
+    "modifiedFileUnitCase": {
+      "hasChanges": "true",
+      "startTime": "123455",
+      "endTime": "123446",
+      "isExecuted": true,
+      "isPassed": true,
+      "numberOfSuccess": "",
+      "numberOfFails": "",
+      "numberOfCases": "",
+      "numberOfSuites": "",
+      "fileDetail": {
+        "fileName": "sample.spec.js",
+        "caseDetail": {
+          "failedCaseLists": [],
+          "passedCaseList": []
+        }
+      },
+      "coverageDetail": {
+        "codeCoveragePercentage": "",
+        "fileCoveragePercentage": ""
+      }
+    },
+    "screenshotTest": {
+      "message": "some",
+      "startTime": "123455",
+      "endTime": "123446",
+      "isThisExecuted": true,
+      "compareBranch": "master",
+      "isPassed": true,
+      "result": {
+        "numberOfComponents": 200,
+        "numberOfDiffFiles": 20,
+        "improperDocsList": [],
+        "erroredComponents": []
+      }
+    }
+  }
+}

package/npm8.md CHANGED Viewed

@@ -1,9 +1,9 @@
-# npm 8 change related things
-1. in npm run script config options `:` not working (properly|correctly), So we need to use `_` in the place of `:`
-   For Example:
-   - `--app:port` wouldn't work we have to do like this `--app_port`
-   - `--clone:proj:name` wouldn't work we have to do like this `----clone_proj_name`
-@zohodes/react-cli or fz-react-cli regardless of what cli you use.
-So, we need to change all package.json script which is using this (`:`) we need to change as (`_`)
+# npm 8 change related things
+1. in npm run script config options `:` not working (properly|correctly), So we need to use `_` in the place of `:`
+   For Example:
+   - `--app:port` wouldn't work we have to do like this `--app_port`
+   - `--clone:proj:name` wouldn't work we have to do like this `----clone_proj_name`
+@zohodes/react-cli or fz-react-cli regardless of what cli you use.
+So, we need to change all package.json script which is using this (`:`) we need to change as (`_`)