Tweak: (zenflux-cli) - Refactor README.md for better readability (#45)

* Tweak: (`zenflux-cli`) - Refactor README.md for better readability

The README.md file in 'zenflux-cli' package has been updated to improve readability. Major changes include reformatting of text, better organization of information, and the addition of visual screenshots showcasing usage examples of the tool. Higher priority has been given to making instructions, tool features and configurations more understandable.

* Update packages/zenflux-cli/README.md

Co-authored-by: codiumai-pr-agent-pro[bot] <151058649+codiumai-pr-agent-pro[bot]@users.noreply.github.com>

* Update packages/zenflux-cli/README.md

Co-authored-by: codiumai-pr-agent-pro[bot] <151058649+codiumai-pr-agent-pro[bot]@users.noreply.github.com>

* Update packages/zenflux-cli/README.md

Co-authored-by: codiumai-pr-agent-pro[bot] <151058649+codiumai-pr-agent-pro[bot]@users.noreply.github.com>

* Update packages/zenflux-cli/README.md

Co-authored-by: codiumai-pr-agent-pro[bot] <151058649+codiumai-pr-agent-pro[bot]@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: codiumai-pr-agent-pro[bot] <151058649+codiumai-pr-agent-pro[bot]@users.noreply.github.com>

* Update README.md

* Update README.md

---------

Co-authored-by: codiumai-pr-agent-pro[bot] <151058649+codiumai-pr-agent-pro[bot]@users.noreply.github.com>

Author: iNewLegend

packages/zenflux-cli/README.md

@@ -2,7 +2,13 @@
 
 ## 📍 Overview
 
-The repository contains a CLI tool called `@z-cli` that offers functionalities related to building, publishing, and watching **monorepo** workspaces. It utilizes technologies like Babel, Rollup, TypeScript, and Verdaccio. The tool is designed to simplify the development process by providing a command-line interface with various commands for managing and building projects. It includes modules for handling npm registry operations. The tool's value proposition lies in its ability to automate repetitive tasks and streamline project workflows, ultimately enhancing developer productivity.
+The repository contains a CLI tool called `@z-cli` that offers functionalities related to building, publishing, and watching **monorepo** workspaces.
+
+It utilizes technologies like `Babel`, `Rollup`, `TypeScript`, and `Verdaccio`.
+
+The tool is designed to simplify the development process by providing a command-line interface with various commands for managing and building projects. It includes modules for handling npm registry operations.
+
+The tool's value proposition lies in its ability to automate repetitive tasks and streamline project workflows, ultimately enhancing developer productivity.
 
 ---
 
@@ -13,22 +19,29 @@ Via package manager, `bun install @zenflux/cli`
 
 ## 📦 Features
 
+The CLI provides several commands, each starting with the `@` symbol. 
+
+These commands are designed to help you manage and build your projects efficiently.
+
 ### Building Projects
 
-The CLI tool provides a command for building projects. It utilizes technologies such as SWC, Rollup, ApiExtractor, and more to bundle and transpile code for distribution. Developers can use this feature to create distribution-ready packages.
+* The CLI tool provides a command for building projects.
+* It utilizes technologies such as `SWC`, `Rollup`, `ApiExtractor`, and more to bundle and transpile code for distribution.
+* Developers can use this feature to create distribution-ready packages.
+* When workspace has multiple packages, the tool can build all packages or a specific package, with support of multiple formats and extension.
+* It can also generate declaration files and handle external dependencies.
+* Utilizing multithreading, the tool can build multiple packages simultaneously, improving performance.
 
-- **CLI Commands**: `@build`, `@watch`
+
+- **CLI Commands**: `@build` `@watch`
 <br /><br />
-- **Default Behavior**: `@z-cli @build`, `@z-cli @watch`
+
+- **Default Behavior** ( without  arguments ): `@z-cli @build` `@z-cli @watch`
     - Current working directory is **workspace**: Builds all packages in the workspace
     - Current working directory is **package**: Build the current package
 <br /><br />
-- **@Multi-threading**
-    Both `@build` and `@watch` are multithreaded:
-![image](https://github.com/iNewLegend/zenflux/assets/10234691/fb367066-040d-41a9-9697-5fb54971252e)
-  `@watch` + `--verbose`
-![image](https://github.com/iNewLegend/zenflux/assets/10234691/bf6581ec-4faa-4cd8-9f56-4d698d985b27)
-- **Options**
+
+- **CLI Options**
     - **--config:**
         - Description: Specify a custom config file
         - Examples:
@@ -69,7 +82,7 @@ The CLI tool provides a command for building projects. It utilizes technologies
            - No api-exporter will be used
     <br /><br />
 
-- **Configuration**;
+- **Configuration file (`zenflux.config.ts`)**;
     - `format`:
         - Array of formats to build, eg:```[ "es", "cjs", "umd" ]```
     - `extensions`:
@@ -190,35 +203,30 @@ The CLI tool provides a command for building projects. It utilizes technologies
         - `tsconfig.json`
 
 <br /><br />
-- **@build**
-    - Selecting the package to build - The run method starts by retrieving the configurations using the getConfigs method and the configuration paths using the getConfigsPaths method.
-    - Loads `zenflux.config.ts` for each package - It creates a `TZBuildOptions` object with the current configuration. If the number of configurations is greater than `DEFAULT_MIN_SINGLE_BUILD_CONFIGS`, it assigns the index of the current configuration to the thread property of the `TZBuildOptions` object.
-    - For each configuration path, it reads the TypeScript configuration using the `zTSConfigRead` method and performs pre-diagnostics using the `zTSPreDiagnostics` method.
-    - Loads `tsconfig.{format}.json` for each package, where `{format}` is the format type, described in the `zenflux.config.ts` file
-        - Builds the package for each format
-            - Firing callback `onBuiltFormat` for each format, if provided (from `zenflux.config.ts`)
-              <br /><br />
-    - It then calls the zRollupBuild method with the Rollup configuration and the `TZBuildOptions` object. This method is responsible for the actual build process.
-    - After building all configurations, for each configuration path, it logs the start of the declaration files creation process and creates the declaration files using the `zTSCreateDeclaration` method.
-    - After the build process, it calls the onBuilt method of the current configuration if it exists (from `zenflux.config.ts`).
-    - Rollup `d.ts` files to single `d.ts` file - Runs `zApiExporter` for each package, if `inputDtsPath` and `outputDtsPath` are provided (from `zenflux.config.ts`)
-    - Api-Extractor - The `zApiExporter` method is responsible for running the Api-Extractor tool on the declaration files of a package. it bundles the declaration files into a single declaration file for the package. This is useful for creating a single declaration file that can be used by consumers of the package.
-      - In development mode, it generates diagnostics log for each package, path: `${ projectPath }/log/api-extractor-diagnostics.${ buildOutputFileName }.log`
+- **Flow**
+
+  - **Initialization**: The run method begins by retrieving the configurations using the `getConfigs` method and the configuration paths using the `getConfigsPaths` method.
+  - **Configuration Retrieval**: It loads the `zenflux.config.ts` for each package and creates a `TZBuildOptions` object. It assigns the index of the current configuration to the thread property of the `TZBuildOptions` object if the number of configurations is greater than `DEFAULT_MIN_SINGLE_BUILD_CONFIGS`.
+  - **Configuration Loop**: For each configuration path, it reads the TypeScript configuration using the `zTSConfigRead` method, performs pre-diagnostics using the `zTSPreDiagnostics` method, and loads the relevant `tsconfig.{format}.json`.
+  - **Package Build**: For each package format, it builds the package and fires the `onBuiltFormat` callback if provided in `zenflux.config.ts`.
+  - **Post-Build**: After building all configurations, for each configuration path, it begins the creation of declaration files and creates them using the `zTSCreateDeclaration` method.
+  - **Declaration File Consolidation**: It then merges all the declaration files into a single declaration file per package using the `zApiExporter` method, if `inputDtsPath` and `outputDtsPath` are provided in `zenflux.config.ts`.
+  - **Api-Extractor**: The `zApiExporter` method bundles multiple declaration files into a single declaration file. This operation eases usage for the package consumers. If operating in development mode, it also generates a diagnostics log for each package with paths like: `${ projectPath }/log/api-extractor-diagnostics.${ buildOutputFileName }.log`
+  <br /><br />
+  - **@watch**
+    - **Initialization**: The `@watch` command starts by retrieving the configurations for each package in your workspace. These configurations are defined in the `zenflux.config.ts` file of each package.
+    - **Watcher Creation**: It sets up a file watcher using the `chokidar.watch` method. This watcher monitors the files in your workspace for any changes.
+    - **Configuration Loop**: For each package configuration, it creates a separate build process. This means that each package in your workspace has its own independent build process that runs whenever a file in that package changes.
+    - **Rollup Configuration**: For each package, it creates a Rollup configuration. This configuration defines how the package should be bundled.
+    - **Watcher Setup**: It sets up a watcher for each package. When the watcher detects a change in a package, it triggers the build process for that package. To avoid triggering multiple builds for rapid successive changes, the build process is debounced using the `debounce` function.
+    - **Change Detection**: Whenever a file in a package changes, the watcher triggers the build process for that package. The build process is triggered after a delay to ensure that multiple rapid changes do not trigger multiple builds.
+    - **Post-Build**: After each build process, it performs TypeScript pre-diagnostics for all configurations. This helps to catch and report any TypeScript errors that might have been introduced during the changes.
+    - **Watch Method**: The `watch` method is used to set up a watcher for a specific package. It triggers a build process whenever a change is detected in the package. The build process is debounced to avoid triggering multiple builds for rapid successive changes.
+    - **Debounce Function**: The `debounce` function ensures that the build process is not triggered more than once within a specified delay.
+      <br />&nbsp;&nbsp;&nbsp;This is useful to avoid triggering multiple builds for rapid successive changes.
+      <br />&nbsp;&nbsp;&nbsp;The debounce function works by delaying the execution of the build process until a certain amount of time has passed without any new changes being detected. This ensures that if multiple changes are made in quick succession, the build process will only be triggered once, after the last change.
         <br /><br />
 
-- **@watch**
-  - **Initialization**: The `@watch` command starts by retrieving the configurations for each package in your workspace. These configurations are defined in the `zenflux.config.ts` file of each package.
-  - **Watcher Creation**: It sets up a file watcher using the `chokidar.watch` method. This watcher monitors the files in your workspace for any changes.
-  - **Configuration Loop**: For each package configuration, it creates a separate build process. This means that each package in your workspace has its own independent build process that runs whenever a file in that package changes.
-  - **Rollup Configuration**: For each package, it creates a Rollup configuration. This configuration defines how the package should be bundled.
-  - **Watcher Setup**: It sets up a watcher for each package. When the watcher detects a change in a package, it triggers the build process for that package. To avoid triggering multiple builds for rapid successive changes, the build process is debounced using the `debounce` function.
-  - **Change Detection**: Whenever a file in a package changes, the watcher triggers the build process for that package. The build process is triggered after a delay to ensure that multiple rapid changes do not trigger multiple builds.
-  - **Post-Build**: After each build process, it performs TypeScript pre-diagnostics for all configurations. This helps to catch and report any TypeScript errors that might have been introduced during the changes.
-  - **TypeScript Pre-Diagnostics**: After each build process, it performs TypeScript pre-diagnostics for all configurations. This helps to catch and report any TypeScript errors that might have been introduced during the changes.
-  - **Watch Method**: The `watch` method is used to set up a watcher for a specific package. It triggers a build process whenever a change is detected in the package. The build process is debounced to avoid triggering multiple builds for rapid successive changes.
-  - **Debounce Function**: The `debounce` function ensures that the build process is not triggered more than once within a specified delay. This is useful to avoid triggering multiple builds for rapid successive changes. The debounce function works by delaying the execution of the build process until a certain amount of time has passed without any new changes being detected. This ensures that if multiple changes are made in quick succession, the build process will only be triggered once, after the last change.
-    <br /><br />
-
 
 ### Publishing Packages
 
@@ -266,9 +274,20 @@ The tool handles interactions with npm registries, creating a local npm registry
 - **--help:** Show help
 
 ---
+## 📸 Screenshots
+
+`@z-cli @build --workspace "react-*" --no-diagnostic --no-declaration`
+
+![image](https://github.com/ZenFlux/zenflux/assets/10234691/9b074d4f-d2cd-4d4e-ae8e-aab0a8802faa)
+*Building all React packages without diagnostics and declaration files.*
+
+`@z-cli @watch --workspace "react-*" --no-diagnostic --no-declaration`
+
+![image](https://github.com/ZenFlux/zenflux/assets/10234691/7443dfde-dc1b-47dd-b735-a509393125e9)
+*Watching all React packages without diagnostics and declaration files.*
+
+`@z-cli @watch --workspace "react-*" --verbose`
+
+![image](https://github.com/ZenFlux/zenflux/assets/10234691/47dce715-f1a3-4309-a924-4e704894a35f)
+*Verbose mode for watching all React packages.*
 
-## 🎯 Roadmap / Todo
-- [ ] Publish should handle all input questions with cli arguments - Run without input blocking
-- [ ] Workspace publish/build configuration, should conditionally test & build packages
-- [ ] Make native support for npm workspaces
-- [ ] `readme.md` should explain how create and manage monorepo workspaces