mass commit, patch & add features

Author: ArrayIterator

.gitattributes

@@ -2,7 +2,7 @@ phpcs.xml           export-ignore
 phpstan.neon        export-ignore
 .gitattributes      export-ignore
 .gitignore          export-ignore
-package.json       export-ignore
+package.json        export-ignore
 tsconfig.json       export-ignore
 webpack.config.js   export-ignore
 assets/             export-ignore

.gitignore

@@ -88,4 +88,5 @@ vendor/
 node_modules/
 tmp/
 .tmp/
+*.map
 /index.php

README.md

@@ -2,6 +2,55 @@
 
 [![Code Checking](https://github.com/ArrayIterator/php.profiler/actions/workflows/code-checking.yml/badge.svg)](https://github.com/ArrayIterator/php.profiler/actions/workflows/code-checking.yml)
 
+## INSTALLATION
+
+```bash
+composer require arrayiterator/profiler
+```
+## PROFILING
+
+```php
+use ArrayIterator\Profiler\Profiler;
+
+$profiler = new Profiler();
+// start the profiler
+$performance = $profiler->start('benchmark', 'Group Name', ['data' => 'information']);
+try {
+    // do something with the code
+    // write the code that you want to benchmark
+} finally {
+    // best practice to stop the profiler using try -> finally
+    // using finally to make sure the profiler is stopped
+    $performance->stop(['additional' => 'information']);
+    // or using profiler object
+    // the group name is important when you have different group of benchmark
+    // the group: default, as default group
+    // the name of benchmark also important to identify the benchmark
+    $profiler->stop('benchmark', 'Group Name', ['additional' => 'information']);
+}
+
+
+```
+## RENDERING TOOLBAR
+
+```php
+/**
+ * @var \ArrayIterator\Profiler\Profiler $profiler 
+ */
+$waterfall = $profiler->getWaterfall();
+
+// render the toolbar
+$darkMode = null; // set true if default dark mode or let it null when using autodetect
+$content = $waterfall->renderJs($darkMode);
+
+// can be echo or append to stream
+// echo $content;
+// append to stream interface (PSR-7)
+// $response->getBody()->write($content);
+```
+## PREVIEW
+
+[![Toolbar Preview](images/preview-dark.png)](images/preview-dark.png)
 
 ## ATTENTION
 
@@ -16,13 +65,10 @@ Typescript & scss [**[assets](assets)**] is used to create the UI, the UI is cre
 
 ### REQUIREMENT:
 
-- NodeJS (npm)
-  - TypeScript
-  - Webpack
-  - Sass
 - PHP 7.4 or higher
 - Composer
-
+- DEV (Node.js (npm) - for installing the dependencies)
+- 
 ### TASKS
 
 > BACKEND
@@ -38,23 +84,35 @@ Typescript & scss [**[assets](assets)**] is used to create the UI, the UI is cre
 - [x] ToolBar (Chrome Like)
 - [x] Dark Mode & Light Mode (Auto Detect)
 - [x] Resizeable
+- [ ] Responsiveness
 - [x] Action Size
   - [x] Maximize
   - [x] Minimize (restore)
   - [x] Close
+- [x] Benchmark Tab
+  - [x] Filtering
+  - [ ] Waterfall Profiling
+  - [x] Importer
+  - [x] Exporter
+  - [x] Restorer
+  - [x] Message (information about the import, export, restore)
+  - [x] Input Search
+  - [x] Horizontal Resizable Section
+- [ ] Info Tab
+- [x] Code Tab
 
 #### Benchmark Tab
 
-- [ ] Filtering
+- [x] Filtering
   - [x] Importer
   - [x] Exporter
   - [x] Restorer
   - [x] Message (information about the import, export, restore)
-  - [ ] General Filter
-  - [ ] Performance Filter (Slow, Fast, Average)
-  - [ ] Search Filter (Follow the benchmark content)
-- [ ] Waterfall Profiling
-  - [ ] Using waterfall using div percentage
+  - [x] General Filter
+  - [x] Performance Filter (Slow, Fast, Average)
+  - [x] Search Filter (Follow the benchmark content)
+- [x] Waterfall Profiling
+  - [x] Using waterfall using div percentage
   - [ ] Add additional information for certain table
   - [ ] Clickable to show the detail of the benchmark
 
@@ -68,8 +126,17 @@ Typescript & scss [**[assets](assets)**] is used to create the UI, the UI is cre
 
 #### Code Tab
 
-- [ ] Code Section
-  - [ ] Show collapsible code (pre of json)
+- [x] Code Section
+  - [x] Show collapsible code (pre of json)
+
+
+## DEPENDENCIES
+
+- Template Engine using [SquirrellyJS](https://squirrelly.js.org/)
+- Chart using [HighChart](https://www.highcharts.com/)
+- Icon & SVG using [HeroIcons](https://heroicons.com/)
+- Compiled JS using [Webpack](https://webpack.js.org/) & [TypeScript](https://www.typescriptlang.org/)
+- Compiled CSS using [Sass](https://sass-lang.com/)
 
 
 ## LICENSE