@zohodesk/react-cli 1.1.16-exp.4 → 1.1.16-exp.5

package/docs/ComposeMinification.md

@@ -1,13 +1,13 @@
-# Compose Minification 
-
-We use this plugin to  extract all the common attributes ( margin, padding... ) supported and write them in respective common files( margin.css, padding.css... ) These are further reference to the classname instead of a line of code by composing and adding classnames for the same.
-
-
-# Feature : 
-
-* We can enable this plugin by representing the value of ` react-cli > app >  plugins > composeMinification ` to `true`.
-* The creation of `margin.css`, `padding.css`, `position.css` and so on will be done initially by a manual script for the application. 
-* Further the `composeMinification` plugin converts the `props` of common attributes under check into `compose` and `values` into `compose format` ( m10 from `../margin.css`) 
-* On runtime the conversion takes place and classnames for the properties (`margin`, `padding`, so on...) are added with references to respective files and styles are applied. 
-
-
+# Compose Minification 
+
+We use this plugin to  extract all the common attributes ( margin, padding... ) supported and write them in respective common files( margin.css, padding.css... ) These are further reference to the classname instead of a line of code by composing and adding classnames for the same.
+
+
+# Feature : 
+
+* We can enable this plugin by representing the value of ` react-cli > app >  plugins > composeMinification ` to `true`.
+* The creation of `margin.css`, `padding.css`, `position.css` and so on will be done initially by a manual script for the application. 
+* Further the `composeMinification` plugin converts the `props` of common attributes under check into `compose` and `values` into `compose format` ( m10 from `../margin.css`) 
+* On runtime the conversion takes place and classnames for the properties (`margin`, `padding`, so on...) are added with references to respective files and styles are applied. 
+
+

package/docs/CustomChunks.md

@@ -1,29 +1,29 @@
-# Custom Chunks
-
-In react-cli we provide options to create custom chunks.  
-This Custom Chunk Option is array of Object
-that Object keys are
-
-- `pattern` **{ String | Function | Array<String> }** regex pattern as string and custom logic to split chunks can be defined using function
-- `name` **{ String }** chunk name
-- `size` **{ Number }** is count which is minimum chunk duplicated or need in chunks
-
-> Since 0.0.1-exp.164.1
-
-extra features in custom chunks :-
-for more details [SplitChunkPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) webpack
-
-- `minChunks`: `minChunks` is alias of `size` default value is `2`,
-- `rules`: `rules` is same as `pattern` with some easy hooks **(removed after v1.1.5)**
-  - use `/` for both windows and linux we will replace internally
-  - for `.*` we need to use `*`
-  - we can consider rules as regex when the `rules-string` has any of these `*`, `^`, `$`. So if you want regex then kindly use `*` in your `rules-string` for force regex
-- `chunks`: by this option we can specify , default value is `all`,
-- `priority`: priority default value is `-10 * (index + 2)`,
-- `enforce`: enforce default value is `true`,
-- `maxSize`: maxSize, default value is `0`,
-- `minSize`: minSize, default value is `20000`,
-- `reuseExistingChunk` If the current chunk contains modules already split out from the main bundle, it will be reused instead of a new one being generated. This can affect the resulting file name of the chunk.
-- `automaticNamePrefix` with this you can specify for chunks created through that specified config. default value `''`.
-- `cacheGroupName`: `cacheGroupName` is alias of `name`, But it won't work as chunk name, instead it will just work as key in cacheGroup.
-<!-- includeDependency: includeDependency default value is `false` -->
+# Custom Chunks
+
+In react-cli we provide options to create custom chunks.  
+This Custom Chunk Option is array of Object
+that Object keys are
+
+- `pattern` **{ String | Function | Array<String> }** regex pattern as string and custom logic to split chunks can be defined using function
+- `name` **{ String }** chunk name
+- `size` **{ Number }** is count which is minimum chunk duplicated or need in chunks
+
+> Since 0.0.1-exp.164.1
+
+extra features in custom chunks :-
+for more details [SplitChunkPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) webpack
+
+- `minChunks`: `minChunks` is alias of `size` default value is `2`,
+- `rules`: `rules` is same as `pattern` with some easy hooks **(removed after v1.1.5)**
+  - use `/` for both windows and linux we will replace internally
+  - for `.*` we need to use `*`
+  - we can consider rules as regex when the `rules-string` has any of these `*`, `^`, `$`. So if you want regex then kindly use `*` in your `rules-string` for force regex
+- `chunks`: by this option we can specify , default value is `all`,
+- `priority`: priority default value is `-10 * (index + 2)`,
+- `enforce`: enforce default value is `true`,
+- `maxSize`: maxSize, default value is `0`,
+- `minSize`: minSize, default value is `20000`,
+- `reuseExistingChunk` If the current chunk contains modules already split out from the main bundle, it will be reused instead of a new one being generated. This can affect the resulting file name of the chunk.
+- `automaticNamePrefix` with this you can specify for chunks created through that specified config. default value `''`.
+- `cacheGroupName`: `cacheGroupName` is alias of `name`, But it won't work as chunk name, instead it will just work as key in cacheGroup.
+<!-- includeDependency: includeDependency default value is `false` -->

package/docs/DevServerPort.md

@@ -1,39 +1,39 @@
-# Dev server port
-
-in react-cli dev server ports are below
-
-In summary 
-for https port will be same as given
-for http2 port will be same as given + 1
-for http  port will be same as given + 2 
-
-with https certificate `react-cli.app.sercer.httpsCerts` given value
-in default port `react-cli.app.server.port` is 9090
-
-| Protocal | Port |
-| :------: | :--: |
-|  HTTPS   | 9090 |
-|  HTTP2   | 9091 |
-|   HTTP   | 9092 |
-
-in custom port `react-cli.app.server.port` is 5050
-
-| Protocal | Port |
-| :------: | :--: |
-|  HTTPS   | 5050 |
-|  HTTP2   | 5051 |
-|   HTTP   | 5052 |
-
-with out https certificate 
-
-in custom port `react-cli.app.server.port` is 9090
-
-| Protocal | Port |
-| :------: | :--: |
-|   HTTP   | 9092 |
-
-in custom port `react-cli.app.server.port` is 5050
-
-| Protocal | Port |
-| :------: | :--: |
-|   HTTP   | 5052 |
+# Dev server port
+
+in react-cli dev server ports are below
+
+In summary 
+for https port will be same as given
+for http2 port will be same as given + 1
+for http  port will be same as given + 2 
+
+with https certificate `react-cli.app.sercer.httpsCerts` given value
+in default port `react-cli.app.server.port` is 9090
+
+| Protocal | Port |
+| :------: | :--: |
+|  HTTPS   | 9090 |
+|  HTTP2   | 9091 |
+|   HTTP   | 9092 |
+
+in custom port `react-cli.app.server.port` is 5050
+
+| Protocal | Port |
+| :------: | :--: |
+|  HTTPS   | 5050 |
+|  HTTP2   | 5051 |
+|   HTTP   | 5052 |
+
+with out https certificate 
+
+in custom port `react-cli.app.server.port` is 9090
+
+| Protocal | Port |
+| :------: | :--: |
+|   HTTP   | 9092 |
+
+in custom port `react-cli.app.server.port` is 5050
+
+| Protocal | Port |
+| :------: | :--: |
+|   HTTP   | 5052 |

package/docs/DevStart.md

@@ -1,18 +1,18 @@
-# DevServer Start
-
-## command
-
-> `react-cli start`
-
-## Options
-
-we have to typs of options command line arguments and package.json option specifying
-
-### First package.json option specifying
-
-1. `react-cli.app.context`
-1. `react-cli.app.server`
-1. `react-cli.app.server`
-1. `react-cli.app.server`
-1. `react-cli.app.server`
-1. `react-cli.app.server`
+# DevServer Start
+
+## command
+
+> `react-cli start`
+
+## Options
+
+we have to typs of options command line arguments and package.json option specifying
+
+### First package.json option specifying
+
+1. `react-cli.app.context`
+1. `react-cli.app.server`
+1. `react-cli.app.server`
+1. `react-cli.app.server`
+1. `react-cli.app.server`
+1. `react-cli.app.server`

package/docs/HoverActive.md

@@ -1,12 +1,12 @@
-# hover active css handling
-
-In general we write css with some hover in it.  
-But In mobile there is no hover and some times this hover css may do something messy some thing like we may need to click a button we need to click it double time.
-
-To handle this behaviour we write a postcss plugin
-
-PostCSS plugin that transforms :hover selectors to :active on devices where a mouse isn't the primary input mechanism.
-
-when we write hover css it will have some problem in mobile devices the reason was in mobile device ther is no mouse
-
-for this we have to handle that as
+# hover active css handling
+
+In general we write css with some hover in it.  
+But In mobile there is no hover and some times this hover css may do something messy some thing like we may need to click a button we need to click it double time.
+
+To handle this behaviour we write a postcss plugin
+
+PostCSS plugin that transforms :hover selectors to :active on devices where a mouse isn't the primary input mechanism.
+
+when we write hover css it will have some problem in mobile devices the reason was in mobile device ther is no mouse
+
+for this we have to handle that as

package/docs/InstallNode.md

@@ -1,28 +1,28 @@
-### Step 1: Update APT index
-
-Run the apt update command on your Ubuntu Linux to update package repository contents database.
-
-> sudo apt update
-
-### Step 2: Install Node.js 14 on Ubuntu 22.04|20.04|18.04
-
-After system update, install Node.js 14 on Ubuntu 22.04|20.04|18.04 by first installing the required repository.
-
-> curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
-
-The script above will create apt sources list file for the NodeSource Node.js 14.x repo:
-
-> \# Ubuntu 20.04 example
->
-> $ cat /etc/apt/sources.list.d/nodesource.list
-> deb https://deb.nodesource.com/node_14.x focal main
-> deb-src https://deb.nodesource.com/node_14.x focal main
-
-Once the repository is added, you can begin the installation of Node.js 14 on Ubuntu Linux:
-
-> sudo apt -y install nodejs
-
-Verify the version of Node.js installed.
-
-> $ node -v  
-> v14.17.5
+### Step 1: Update APT index
+
+Run the apt update command on your Ubuntu Linux to update package repository contents database.
+
+> sudo apt update
+
+### Step 2: Install Node.js 14 on Ubuntu 22.04|20.04|18.04
+
+After system update, install Node.js 14 on Ubuntu 22.04|20.04|18.04 by first installing the required repository.
+
+> curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
+
+The script above will create apt sources list file for the NodeSource Node.js 14.x repo:
+
+> \# Ubuntu 20.04 example
+>
+> $ cat /etc/apt/sources.list.d/nodesource.list
+> deb https://deb.nodesource.com/node_14.x focal main
+> deb-src https://deb.nodesource.com/node_14.x focal main
+
+Once the repository is added, you can begin the installation of Node.js 14 on Ubuntu Linux:
+
+> sudo apt -y install nodejs
+
+Verify the version of Node.js installed.
+
+> $ node -v  
+> v14.17.5

package/docs/MarkdownParser.md

@@ -1,18 +1,18 @@
-
-----> markdownParser <----
-
-1. Markdown parser allows us to write Documentation using Markdown language inside the Javascript file
-2. This will converts the snippets to HTML tag.
-3. We can implement this only inside the particular syntax which is metioned below.
-4. We can enable/disable this feature by `npm run docs --markdown_parser=true/false` default value will be `true`.
-5. Also we can enable/disable this feature by adding `enableMDParser` key inside the package.json under the `docs`.
-
-### syntax
-``` 
-/* MD:START 
-    # Hello World
-MD:END */
-```
-
-# v1.1.7 update: 
+
+----> markdownParser <----
+
+1. Markdown parser allows us to write Documentation using Markdown language inside the Javascript file
+2. This will converts the snippets to HTML tag.
+3. We can implement this only inside the particular syntax which is metioned below.
+4. We can enable/disable this feature by `npm run docs --markdown_parser=true/false` default value will be `true`.
+5. Also we can enable/disable this feature by adding `enableMDParser` key inside the package.json under the `docs`.
+
+### syntax
+``` 
+/* MD:START 
+    # Hello World
+MD:END */
+```
+
+# v1.1.7 update: 
 * Markdown Parser feature implemented. 

package/docs/ReactLive.md

@@ -1,14 +1,14 @@
-
-----> ReactLive <----
-
-1. React Live is a live playground for reactjs (For now we have implemented in our docs)
-2. So, for this we are using reactLiveConverter.js (src/loaders) to convert the file format.
-3. We can enable/disable this feature by `npm run docs --enableReactLive=true/false` default value will be `true`.
-4. Also we can enable/disable this feature by adding `enableReactLive` key inside the package.json under the `docs`.
-
-# v1.1.0 update: 
-* ReactLive feature implemented. 
-
-# v1.1.2 update:
-
+
+----> ReactLive <----
+
+1. React Live is a live playground for reactjs (For now we have implemented in our docs)
+2. So, for this we are using reactLiveConverter.js (src/loaders) to convert the file format.
+3. We can enable/disable this feature by `npm run docs --enableReactLive=true/false` default value will be `true`.
+4. Also we can enable/disable this feature by adding `enableReactLive` key inside the package.json under the `docs`.
+
+# v1.1.0 update: 
+* ReactLive feature implemented. 
+
+# v1.1.2 update:
+
 * ReactLiveConverter filepath changed to 'reactLiveConverter.js' in docLoader file

package/docs/SelectorWeight.md

@@ -1,9 +1,9 @@
-
--- Selector weight plugin --
- * Plugin implementation for the execution of a Selector weight to be added to all classes of multiple files is included in the react-cli setup. This can be activated when the `selectorWeight` variable in `package.json` is set to true.
- * all classes in all files will be added with the `defaultSelector` provided in package.json to increase selector weight
- * in case a specific chunk file is supposed to have a different selector, it can be mentioned in the `customFileSelectorWeight.json`. This will add the new selector to that particular chunk file.
- * `excludeStrings` is an array used to exclude selectors that should not be converted. Default selectors such as body, html are excluded through this way.
-
-# v1.0.1 update: 
+
+-- Selector weight plugin --
+ * Plugin implementation for the execution of a Selector weight to be added to all classes of multiple files is included in the react-cli setup. This can be activated when the `selectorWeight` variable in `package.json` is set to true.
+ * all classes in all files will be added with the `defaultSelector` provided in package.json to increase selector weight
+ * in case a specific chunk file is supposed to have a different selector, it can be mentioned in the `customFileSelectorWeight.json`. This will add the new selector to that particular chunk file.
+ * `excludeStrings` is an array used to exclude selectors that should not be converted. Default selectors such as body, html are excluded through this way.
+
+# v1.0.1 update: 
  * exclude support added, file paths to be added in `react-cli > app > exclude > selectorWeight` to be excluded from conversion.

package/docs/TODOS.md

@@ -1,10 +1,10 @@
-we need to fix all the warning print while install react-cli
-
-1.  npm WARN deprecated `babel-eslint@10.1.0`: babel-eslint is now `@babel/eslint-parser`. This package will no longer receive updates.
-    to resolve this warning use https://tjaddison.com/blog/2021/03/updating-babel-eslint-to-babeleslint-parser-for-react-apps/
-
-2.  npm WARN deprecated eslint-loader@4.0.2: This loader has been deprecated. Please use eslint-webpack-plugin.  
-    for this warning we need to confirm `is eslint-loader need while build` it's simplely waste of time if you ask me.
-3.  gitlab@14.2.2: The gitlab package has found a new home in the @gitbeaker organization. For the latest gitlab node library, check out @gitbeaker/node
-    for this warning we need to check with gitbeaker and impact team as well.
-4.  `fsevents@1.2.13` and `chokidar@2.1.8` these are just dependent packages need to check parent package of this package
+we need to fix all the warning print while install react-cli
+
+1.  npm WARN deprecated `babel-eslint@10.1.0`: babel-eslint is now `@babel/eslint-parser`. This package will no longer receive updates.
+    to resolve this warning use https://tjaddison.com/blog/2021/03/updating-babel-eslint-to-babeleslint-parser-for-react-apps/
+
+2.  npm WARN deprecated eslint-loader@4.0.2: This loader has been deprecated. Please use eslint-webpack-plugin.  
+    for this warning we need to confirm `is eslint-loader need while build` it's simplely waste of time if you ask me.
+3.  gitlab@14.2.2: The gitlab package has found a new home in the @gitbeaker organization. For the latest gitlab node library, check out @gitbeaker/node
+    for this warning we need to check with gitbeaker and impact team as well.
+4.  `fsevents@1.2.13` and `chokidar@2.1.8` these are just dependent packages need to check parent package of this package

package/docs/ValueReplacer.md

@@ -1,87 +1,87 @@
-# value replacer
-
-<!-- file paths
-  1. src/postcss-plugins/ValueReplacer.js
-  2. src/common/valueReplacer.js
- -->
-
-this option is array of objects which will have a two keys
-new option `valueReplacer` added for replace css property value while build running
-
-- this option is array of object, that object two keys
-  1. `props` key for array of property names
-  2. `values` key is object ,this object key contents will be replaced as value content
-- this option wiil be work for below
-
-  - `start`
-  - `docs`
-  - `nowatchstart`
-  - `devbuild`
-  - `build:library:es`
-  - `build:component:es`
-  - `build:library:cmjs`
-  - `build:component:cmjs`
-    Example data:-
-
-  ```json
-  {
-    "react-cli": {
-      "css": {
-        "valueReplacer": [
-          {
-            "props": ["font", "font-family"],
-            "values": {
-              "zdfonts-rCallBar": "zdf-rCallBar_1",
-              "zdfonts-rPuvi": "zdf-rPuvi_1"
-            }
-            // ,suffix: '0'
-          }
-        ]
-      }
-    }
-  }
-  ```
-
-  Example Replace:-
-  before replace
-
-  ```css
-  .some-selector {
-    font: zdfonts-rCallBar !important;
-  }
-  ```
-
-  after replace
-
-  ```css
-  .some-selector {
-    font: zdf-rCallBar_1 !important;
-  }
-  ```
-
-
-If we need the exact word to be considered for replacement ( that is, if value is `text` and only if the value is `text` and not `text_cursor` or `cursortext` for example, the conversion happens ) we have to use `^` before the word and `$` after the word in the key. 
-
-# For Example : 
-{
-  valueReplacer: [
-      {
-        "props": [
-          "cursor",
-          "--label_cursor",
-          "--checkbox_cursor",
-          "--tag_cursor",
-          "--button_cursor",
-          "--textboxicon_icon_cursor",
-        ],
-        "values": {
-          "^default$": "var(--zdr-cursor-default)",
-          "^pointer$": "var(--zdr-cursor-pointer)",
-          "^text$": "var(--zdr-cursor-text)",
-          "^move$": "var(--zdr-cursor-move)",
-        }
-      }
-    ]
-}
-
+# value replacer
+
+<!-- file paths
+  1. src/postcss-plugins/ValueReplacer.js
+  2. src/common/valueReplacer.js
+ -->
+
+this option is array of objects which will have a two keys
+new option `valueReplacer` added for replace css property value while build running
+
+- this option is array of object, that object two keys
+  1. `props` key for array of property names
+  2. `values` key is object ,this object key contents will be replaced as value content
+- this option wiil be work for below
+
+  - `start`
+  - `docs`
+  - `nowatchstart`
+  - `devbuild`
+  - `build:library:es`
+  - `build:component:es`
+  - `build:library:cmjs`
+  - `build:component:cmjs`
+    Example data:-
+
+  ```json
+  {
+    "react-cli": {
+      "css": {
+        "valueReplacer": [
+          {
+            "props": ["font", "font-family"],
+            "values": {
+              "zdfonts-rCallBar": "zdf-rCallBar_1",
+              "zdfonts-rPuvi": "zdf-rPuvi_1"
+            }
+            // ,suffix: '0'
+          }
+        ]
+      }
+    }
+  }
+  ```
+
+  Example Replace:-
+  before replace
+
+  ```css
+  .some-selector {
+    font: zdfonts-rCallBar !important;
+  }
+  ```
+
+  after replace
+
+  ```css
+  .some-selector {
+    font: zdf-rCallBar_1 !important;
+  }
+  ```
+
+
+If we need the exact word to be considered for replacement ( that is, if value is `text` and only if the value is `text` and not `text_cursor` or `cursortext` for example, the conversion happens ) we have to use `^` before the word and `$` after the word in the key. 
+
+# For Example : 
+{
+  valueReplacer: [
+      {
+        "props": [
+          "cursor",
+          "--label_cursor",
+          "--checkbox_cursor",
+          "--tag_cursor",
+          "--button_cursor",
+          "--textboxicon_icon_cursor",
+        ],
+        "values": {
+          "^default$": "var(--zdr-cursor-default)",
+          "^pointer$": "var(--zdr-cursor-pointer)",
+          "^text$": "var(--zdr-cursor-text)",
+          "^move$": "var(--zdr-cursor-move)",
+        }
+      }
+    ]
+}
+
 - Here we have added `^` before and `$` after default, pointer, text and move. Only if the exact words default, pointer, text and move are used, the values will be converted.