From bb34fee40ccfe06829b9df058944d579ee2e0290 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Sun, 23 Jun 2024 23:55:30 +0100
Subject: [PATCH 01/20] Revert "Fix checkboxes in join string"

---
 src/components/ToolsExamples.tsx |  0
 src/pages/string/join/service.ts | 14 ++------------
 2 files changed, 2 insertions(+), 12 deletions(-)
 delete mode 100644 src/components/ToolsExamples.tsx

diff --git a/src/components/ToolsExamples.tsx b/src/components/ToolsExamples.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/string/join/service.ts b/src/pages/string/join/service.ts
index b736dd6..e636238 100644
--- a/src/pages/string/join/service.ts
+++ b/src/pages/string/join/service.ts
@@ -5,23 +5,13 @@ export function mergeText(
   joinCharacter: string = ''
 ): string {
   let processedLines: string[] = text.split('\n');
-
   if (deleteTrailingSpaces) {
     processedLines = processedLines.map((line) => line.trimEnd());
   }
 
   if (deleteBlankLines) {
-    processedLines = processedLines.filter((line) => line.trim() !== '');
-  } else {
-    processedLines = processedLines.map((line) =>
-      line.trim() === '' ? line + '\r\n\n' : line
-    );
+    processedLines = processedLines.filter((line) => line.trim());
   }
+
   return processedLines.join(joinCharacter);
 }
-
-// Example text to use
-`This is a line with trailing spaces    
-Another line with trailing spaces   
-   
-Final line without trailing spaces`;

From 7bb989479df784a6b02453a2cb456fb0f7126599 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 24 Jun 2024 00:21:38 +0100
Subject: [PATCH 02/20] chore: CODEOWNERS

---
 .idea/workspace.xml | 24 +++++++++++++++---------
 CODEOWNERS          |  1 +
 Readme.md           |  2 ++
 3 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 CODEOWNERS

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 3e7d00d..99fa62a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,12 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: readme">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: build">
+      <change afterPath="$PROJECT_DIR$/CODEOWNERS" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/join/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/split/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/Readme.md" beforeDir="false" afterPath="$PROJECT_DIR$/Readme.md" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -162,7 +160,7 @@
       <workItem from="1719092003308" duration="14856000" />
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
-      <workItem from="1719168519203" duration="3583000" />
+      <workItem from="1719168519203" duration="5029000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -468,7 +466,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719171905785</updated>
     </task>
-    <option name="localTasksCounter" value="39" />
+    <task id="LOCAL-00039" summary="fix: build">
+      <option name="closed" value="true" />
+      <created>1719172147719</created>
+      <option name="number" value="00039" />
+      <option name="presentableId" value="LOCAL-00039" />
+      <option name="project" value="LOCAL" />
+      <updated>1719172147719</updated>
+    </task>
+    <option name="localTasksCounter" value="40" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -489,7 +495,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: use formik" />
     <MESSAGE value="chore: output selector" />
     <MESSAGE value="feat: text split" />
     <MESSAGE value="fix: text split try catch" />
@@ -514,7 +519,8 @@
     <MESSAGE value="fix: missing files" />
     <MESSAGE value="fix: create tool" />
     <MESSAGE value="fix: readme" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: readme" />
+    <MESSAGE value="fix: build" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: build" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/CODEOWNERS b/CODEOWNERS
new file mode 100644
index 0000000..798553f
--- /dev/null
+++ b/CODEOWNERS
@@ -0,0 +1 @@
+* @iib0011
diff --git a/Readme.md b/Readme.md
index 67270fa..95a3010 100644
--- a/Readme.md
+++ b/Readme.md
@@ -58,6 +58,8 @@ npm run script:create:tool my-tool-name folder1/folder2
   <img src="https://contrib.rocks/image?repo=iib0011/omni-tools" />
 </a>
 
+[//]: # (<img src="https://api.star-history.com/svg?repos=iib0011/omni-tools&type=Date">)
+
 ## License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

From fca85bdcaa40847b767e1e732c93a9f2045c92a5 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 24 Jun 2024 00:38:12 +0100
Subject: [PATCH 03/20] ci: fix

---
 .github/workflows/ci.yml     | 21 +++-----------------
 .github/workflows/deploy.yml | 38 ++++++++++++++++++++++++++++++++++++
 .idea/workspace.xml          | 22 ++++++++++++++-------
 3 files changed, 56 insertions(+), 25 deletions(-)
 create mode 100644 .github/workflows/deploy.yml

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a848dcf..017fe37 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -3,15 +3,14 @@ name: CI
 on:
   push:
     branches:
-      - main # or the branch you want to trigger the workflow on
+      - main
   pull_request:
     branches:
       - main
 
 jobs:
-  build-and-deploy:
+  build-and-test:
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
@@ -19,7 +18,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18' # Specify the Node.js version you want to use
+          node-version: '18'
 
       - name: Install dependencies
         run: npm install
@@ -29,17 +28,3 @@ jobs:
 
       - name: Build project
         run: npm run build
-
-      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@v1.2
-        with:
-          publish-dir: ./dist
-          production-branch: main
-          deploy-message: ${{ github.event.head_commit.message }}
-          enable-pull-request-comment: true
-          enable-commit-comment: true
-          overwrites-pull-request-comment: true
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-        timeout-minutes: 1
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..ae2de6a
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,38 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build project
+        run: npm run build
+
+      - name: Deploy to Netlify
+        uses: nwtgck/actions-netlify@v1.2
+        with:
+          publish-dir: ./dist
+          production-branch: main
+          deploy-message: ${{ github.event.head_commit.message }}
+          enable-pull-request-comment: true
+          enable-commit-comment: true
+          overwrites-pull-request-comment: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 10
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 99fa62a..bea8b4a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,10 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: build">
-      <change afterPath="$PROJECT_DIR$/CODEOWNERS" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: CODEOWNERS">
+      <change afterPath="$PROJECT_DIR$/.github/workflows/deploy.yml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.github/workflows/ci.yml" beforeDir="false" afterPath="$PROJECT_DIR$/.github/workflows/ci.yml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/Readme.md" beforeDir="false" afterPath="$PROJECT_DIR$/Readme.md" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -160,7 +160,7 @@
       <workItem from="1719092003308" duration="14856000" />
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
-      <workItem from="1719168519203" duration="5029000" />
+      <workItem from="1719168519203" duration="6018000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -474,7 +474,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719172147719</updated>
     </task>
-    <option name="localTasksCounter" value="40" />
+    <task id="LOCAL-00040" summary="chore: CODEOWNERS">
+      <option name="closed" value="true" />
+      <created>1719184899883</created>
+      <option name="number" value="00040" />
+      <option name="presentableId" value="LOCAL-00040" />
+      <option name="project" value="LOCAL" />
+      <updated>1719184899883</updated>
+    </task>
+    <option name="localTasksCounter" value="41" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -495,7 +503,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: output selector" />
     <MESSAGE value="feat: text split" />
     <MESSAGE value="fix: text split try catch" />
     <MESSAGE value="ubf" />
@@ -520,7 +527,8 @@
     <MESSAGE value="fix: create tool" />
     <MESSAGE value="fix: readme" />
     <MESSAGE value="fix: build" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: build" />
+    <MESSAGE value="chore: CODEOWNERS" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: CODEOWNERS" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

From ae703b22afbb128adc9c46daf8341b3dfc9c1acb Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 24 Jun 2024 00:41:44 +0100
Subject: [PATCH 04/20] ci: fix

---
 .github/workflows/ci.yml     | 33 +++++++++++++++++++++++++++++++
 .github/workflows/deploy.yml | 38 ------------------------------------
 .idea/workspace.xml          | 20 ++++++++++++-------
 3 files changed, 46 insertions(+), 45 deletions(-)
 delete mode 100644 .github/workflows/deploy.yml

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 017fe37..33a1482 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -28,3 +28,36 @@ jobs:
 
       - name: Build project
         run: npm run build
+
+  deploy:
+    if: github.ref == 'refs/heads/main'
+    needs: build-and-test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build project
+        run: npm run build
+
+      - name: Deploy to Netlify
+        uses: nwtgck/actions-netlify@v1.2
+        with:
+          publish-dir: ./dist
+          production-branch: main
+          deploy-message: ${{ github.event.head_commit.message }}
+          enable-pull-request-comment: true
+          enable-commit-comment: true
+          overwrites-pull-request-comment: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 20
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
deleted file mode 100644
index ae2de6a..0000000
--- a/.github/workflows/deploy.yml
+++ /dev/null
@@ -1,38 +0,0 @@
-name: Deploy
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build project
-        run: npm run build
-
-      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@v1.2
-        with:
-          publish-dir: ./dist
-          production-branch: main
-          deploy-message: ${{ github.event.head_commit.message }}
-          enable-pull-request-comment: true
-          enable-commit-comment: true
-          overwrites-pull-request-comment: true
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-        timeout-minutes: 10
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index bea8b4a..e07ca9d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,10 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: CODEOWNERS">
-      <change afterPath="$PROJECT_DIR$/.github/workflows/deploy.yml" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="ci: fix">
       <change beforePath="$PROJECT_DIR$/.github/workflows/ci.yml" beforeDir="false" afterPath="$PROJECT_DIR$/.github/workflows/ci.yml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -160,7 +158,7 @@
       <workItem from="1719092003308" duration="14856000" />
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
-      <workItem from="1719168519203" duration="6018000" />
+      <workItem from="1719168519203" duration="6180000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -482,7 +480,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719184899883</updated>
     </task>
-    <option name="localTasksCounter" value="41" />
+    <task id="LOCAL-00041" summary="ci: fix">
+      <option name="closed" value="true" />
+      <created>1719185893875</created>
+      <option name="number" value="00041" />
+      <option name="presentableId" value="LOCAL-00041" />
+      <option name="project" value="LOCAL" />
+      <updated>1719185893875</updated>
+    </task>
+    <option name="localTasksCounter" value="42" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -503,7 +509,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: text split" />
     <MESSAGE value="fix: text split try catch" />
     <MESSAGE value="ubf" />
     <MESSAGE value="ubf jn" />
@@ -528,7 +533,8 @@
     <MESSAGE value="fix: readme" />
     <MESSAGE value="fix: build" />
     <MESSAGE value="chore: CODEOWNERS" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: CODEOWNERS" />
+    <MESSAGE value="ci: fix" />
+    <option name="LAST_COMMIT_MESSAGE" value="ci: fix" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

From 66e5b23f5434925af0b89175f097633136980461 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 24 Jun 2024 00:58:05 +0100
Subject: [PATCH 05/20] fix: create-tool.mjs

---
 .idea/workspace.xml                           | 25 +++++++++++++++----
 scripts/create-tool.mjs                       |  3 +--
 .../image/png/change-colors-in-png/meta.ts    |  2 +-
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index e07ca9d..d0aa565 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,7 +5,14 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="ci: fix">
-      <change beforePath="$PROJECT_DIR$/.github/workflows/ci.yml" beforeDir="false" afterPath="$PROJECT_DIR$/.github/workflows/ci.yml" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/index.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/reverse/index.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/reverse/meta.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/reverse/reverse.service.test.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/reverse/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -88,7 +95,7 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\tools" />
     </key>
   </component>
-  <component name="RunManager" selected="npm.test">
+  <component name="RunManager" selected="npm.dev">
     <configuration name="dev" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -131,9 +138,9 @@
     </configuration>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.dev" />
         <item itemvalue="npm.test" />
         <item itemvalue="npm.script:create:tool" />
-        <item itemvalue="npm.dev" />
         <item itemvalue="npm.prebuild" />
       </list>
     </recent_temporary>
@@ -158,7 +165,7 @@
       <workItem from="1719092003308" duration="14856000" />
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
-      <workItem from="1719168519203" duration="6180000" />
+      <workItem from="1719168519203" duration="7011000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -488,7 +495,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719185893875</updated>
     </task>
-    <option name="localTasksCounter" value="42" />
+    <task id="LOCAL-00042" summary="ci: fix">
+      <option name="closed" value="true" />
+      <created>1719186106818</created>
+      <option name="number" value="00042" />
+      <option name="presentableId" value="LOCAL-00042" />
+      <option name="project" value="LOCAL" />
+      <updated>1719186106818</updated>
+    </task>
+    <option name="localTasksCounter" value="43" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
diff --git a/scripts/create-tool.mjs b/scripts/create-tool.mjs
index 4739730..67d0084 100644
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -71,7 +71,6 @@ export default function ${capitalizeFirstLetter(toolNameCamelCase)}() {
 }
 `
 )
-
 createToolFile(
   `meta.ts`,
   `
@@ -79,7 +78,7 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 // import image from '@assets/text.png';
 
-export const tool = defineTool('${folder}', {
+export const tool = defineTool('${folder.split(sep)[folder.split(sep).length - 1]}', {
   name: '${toolNameTitleCase}',
   path: '/${toolName}',
   // image,
diff --git a/src/pages/image/png/change-colors-in-png/meta.ts b/src/pages/image/png/change-colors-in-png/meta.ts
index d165de9..5a0e5c6 100644
--- a/src/pages/image/png/change-colors-in-png/meta.ts
+++ b/src/pages/image/png/change-colors-in-png/meta.ts
@@ -2,7 +2,7 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 import image from '@assets/text.png';
 
-export const tool = defineTool('image/png', {
+export const tool = defineTool('png', {
   name: 'Change colors in png',
   path: '/change-colors-in-png',
   image,

From 834d02e1b57122ca3431a8ea3f5910d3fda855b7 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 24 Jun 2024 00:59:49 +0100
Subject: [PATCH 06/20] fix: readme

---
 .idea/workspace.xml | 26 ++++++++++++++------------
 Readme.md           |  2 ++
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d0aa565..25807c2 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,15 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="ci: fix">
-      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/index.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/reverse/index.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/reverse/meta.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/reverse/reverse.service.test.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/image/gif/reverse/service.ts" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: create-tool.mjs">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/Readme.md" beforeDir="false" afterPath="$PROJECT_DIR$/Readme.md" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -165,7 +159,7 @@
       <workItem from="1719092003308" duration="14856000" />
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
-      <workItem from="1719168519203" duration="7011000" />
+      <workItem from="1719168519203" duration="7368000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -503,7 +497,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719186106818</updated>
     </task>
-    <option name="localTasksCounter" value="43" />
+    <task id="LOCAL-00043" summary="fix: create-tool.mjs">
+      <option name="closed" value="true" />
+      <created>1719187088285</created>
+      <option name="number" value="00043" />
+      <option name="presentableId" value="LOCAL-00043" />
+      <option name="project" value="LOCAL" />
+      <updated>1719187088285</updated>
+    </task>
+    <option name="localTasksCounter" value="44" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -524,7 +526,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="fix: text split try catch" />
     <MESSAGE value="ubf" />
     <MESSAGE value="ubf jn" />
     <MESSAGE value="feat: conventional commit" />
@@ -549,7 +550,8 @@
     <MESSAGE value="fix: build" />
     <MESSAGE value="chore: CODEOWNERS" />
     <MESSAGE value="ci: fix" />
-    <option name="LAST_COMMIT_MESSAGE" value="ci: fix" />
+    <MESSAGE value="fix: create-tool.mjs" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: create-tool.mjs" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/Readme.md b/Readme.md
index 95a3010..17347b3 100644
--- a/Readme.md
+++ b/Readme.md
@@ -52,6 +52,8 @@ npm run dev
 npm run script:create:tool my-tool-name folder1/folder2
 ```
 
+Use `folder1\folder2` on Windows
+
 ## Contributors
 
 <a href="https://github.com/iib0011/omni-tools/graphs/contributors">

From 9657e60ecaa4cdaedf2042e330ec21ecf729a2de Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 24 Jun 2024 01:16:00 +0100
Subject: [PATCH 07/20] fix: create-tool.mjs

---
 .idea/workspace.xml                           | 21 +++++++++++++------
 scripts/create-tool.mjs                       |  2 +-
 .../image/png/change-colors-in-png/meta.ts    |  2 +-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 25807c2..9fb89b5 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: create-tool.mjs">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: readme">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/Readme.md" beforeDir="false" afterPath="$PROJECT_DIR$/Readme.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -159,7 +160,7 @@
       <workItem from="1719092003308" duration="14856000" />
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
-      <workItem from="1719168519203" duration="7368000" />
+      <workItem from="1719168519203" duration="8034000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -505,7 +506,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719187088285</updated>
     </task>
-    <option name="localTasksCounter" value="44" />
+    <task id="LOCAL-00044" summary="fix: readme">
+      <option name="closed" value="true" />
+      <created>1719187190823</created>
+      <option name="number" value="00044" />
+      <option name="presentableId" value="LOCAL-00044" />
+      <option name="project" value="LOCAL" />
+      <updated>1719187190823</updated>
+    </task>
+    <option name="localTasksCounter" value="45" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -546,12 +555,12 @@
     <MESSAGE value="feat: create tool script" />
     <MESSAGE value="fix: missing files" />
     <MESSAGE value="fix: create tool" />
-    <MESSAGE value="fix: readme" />
     <MESSAGE value="fix: build" />
     <MESSAGE value="chore: CODEOWNERS" />
     <MESSAGE value="ci: fix" />
     <MESSAGE value="fix: create-tool.mjs" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: create-tool.mjs" />
+    <MESSAGE value="fix: readme" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: readme" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/scripts/create-tool.mjs b/scripts/create-tool.mjs
index 67d0084..86390c9 100644
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -80,7 +80,7 @@ import { lazy } from 'react';
 
 export const tool = defineTool('${folder.split(sep)[folder.split(sep).length - 1]}', {
   name: '${toolNameTitleCase}',
-  path: '/${toolName}',
+  path: '${toolName}',
   // image,
   description: '',
   keywords: ['${toolName.split('-').join('\', \'')}'],
diff --git a/src/pages/image/png/change-colors-in-png/meta.ts b/src/pages/image/png/change-colors-in-png/meta.ts
index 5a0e5c6..4bd2f83 100644
--- a/src/pages/image/png/change-colors-in-png/meta.ts
+++ b/src/pages/image/png/change-colors-in-png/meta.ts
@@ -4,7 +4,7 @@ import image from '@assets/text.png';
 
 export const tool = defineTool('png', {
   name: 'Change colors in png',
-  path: '/change-colors-in-png',
+  path: 'change-colors-in-png',
   image,
   description: '',
   keywords: ['change', 'colors', 'in', 'png'],

From ee6c0293bfb81c9c816fa0bfdf4336d73475dcab Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 24 Jun 2024 02:51:22 +0100
Subject: [PATCH 08/20] feat: change colors in png init

---
 .idea/workspace.xml                           |  33 +++--
 src/assets/grey-pattern.png                   | Bin 0 -> 78460 bytes
 src/assets/image.png                          | Bin 0 -> 13981 bytes
 src/components/InputHeader.tsx                |  10 ++
 src/components/ToolHeader.tsx                 |   2 +-
 src/components/input/InputFooter.tsx          |  24 ++++
 src/components/input/ToolFileInput.tsx        | 114 ++++++++++++++++++
 src/components/input/ToolTextInput.tsx        |  15 +--
 src/components/result/ToolFileResult.tsx      |  59 +++++++++
 src/components/result/ToolTextResult.tsx      |   5 +-
 .../image/png/change-colors-in-png/index.tsx  |  73 ++++++++++-
 .../image/png/change-colors-in-png/meta.ts    |   2 +-
 12 files changed, 309 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/grey-pattern.png
 create mode 100644 src/assets/image.png
 create mode 100644 src/components/InputHeader.tsx
 create mode 100644 src/components/input/InputFooter.tsx
 create mode 100644 src/components/input/ToolFileInput.tsx
 create mode 100644 src/components/result/ToolFileResult.tsx

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 9fb89b5..d18ac21 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,18 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: readme">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: create-tool.mjs">
+      <change afterPath="$PROJECT_DIR$/src/assets/grey-pattern.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/image.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/InputHeader.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/input/InputFooter.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -48,7 +57,7 @@
     "git-widget-placeholder": "main",
     "ignore.virus.scanning.warn.message": "true",
     "kotlin-language-version-configured": "true",
-    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/pages/string",
+    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.tslint": "true",
     "node.js.selected.package.eslint": "(autodetect)",
@@ -78,11 +87,11 @@
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\assets" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string\split" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\images" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\public" />
-      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\assets" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
@@ -160,7 +169,7 @@
       <workItem from="1719092003308" duration="14856000" />
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
-      <workItem from="1719168519203" duration="8034000" />
+      <workItem from="1719168519203" duration="13734000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -514,7 +523,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719187190823</updated>
     </task>
-    <option name="localTasksCounter" value="45" />
+    <task id="LOCAL-00045" summary="fix: create-tool.mjs">
+      <option name="closed" value="true" />
+      <created>1719188162583</created>
+      <option name="number" value="00045" />
+      <option name="presentableId" value="LOCAL-00045" />
+      <option name="project" value="LOCAL" />
+      <updated>1719188162583</updated>
+    </task>
+    <option name="localTasksCounter" value="46" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -558,9 +575,9 @@
     <MESSAGE value="fix: build" />
     <MESSAGE value="chore: CODEOWNERS" />
     <MESSAGE value="ci: fix" />
-    <MESSAGE value="fix: create-tool.mjs" />
     <MESSAGE value="fix: readme" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: readme" />
+    <MESSAGE value="fix: create-tool.mjs" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: create-tool.mjs" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/assets/grey-pattern.png b/src/assets/grey-pattern.png
new file mode 100644
index 0000000000000000000000000000000000000000..b734005fc2efb900b3ad4632d5f5be0c55f58f86
GIT binary patch
literal 78460
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
DM5#;2

literal 0
HcmV?d00001

diff --git a/src/assets/image.png b/src/assets/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e01b1e39d2b05af0f6d89ff90639a39da3b442d
GIT binary patch
literal 13981
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
bFt1PA_um!uq(WaM12Fn#dhai}-TQw4qghvS

literal 0
HcmV?d00001

diff --git a/src/components/InputHeader.tsx b/src/components/InputHeader.tsx
new file mode 100644
index 0000000..de0884a
--- /dev/null
+++ b/src/components/InputHeader.tsx
@@ -0,0 +1,10 @@
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+export default function InputHeader({ title }: { title: string }) {
+  return (
+    <Typography mb={1} fontSize={30} color={'primary'}>
+      {title}
+    </Typography>
+  );
+}
diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx
index 570f11b..ded1fff 100644
--- a/src/components/ToolHeader.tsx
+++ b/src/components/ToolHeader.tsx
@@ -29,7 +29,7 @@ export default function ToolHeader({
   description
 }: ToolHeaderProps) {
   return (
-    <Stack direction={'row'} alignItems={'center'} spacing={2} mt={4}>
+    <Stack direction={'row'} alignItems={'center'} spacing={2} my={4}>
       <Box>
         <Typography mb={2} fontSize={30} color={'primary'}>
           {title}
diff --git a/src/components/input/InputFooter.tsx b/src/components/input/InputFooter.tsx
new file mode 100644
index 0000000..c8e93f6
--- /dev/null
+++ b/src/components/input/InputFooter.tsx
@@ -0,0 +1,24 @@
+import { Stack } from '@mui/material';
+import Button from '@mui/material/Button';
+import PublishIcon from '@mui/icons-material/Publish';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import React from 'react';
+
+export default function InputFooter({
+  handleImport,
+  handleCopy
+}: {
+  handleImport: () => void;
+  handleCopy: () => void;
+}) {
+  return (
+    <Stack mt={1} direction={'row'} spacing={2}>
+      <Button onClick={handleImport} startIcon={<PublishIcon />}>
+        Import from file
+      </Button>
+      <Button onClick={handleCopy} startIcon={<ContentPasteIcon />}>
+        Copy to clipboard
+      </Button>
+    </Stack>
+  );
+}
diff --git a/src/components/input/ToolFileInput.tsx b/src/components/input/ToolFileInput.tsx
new file mode 100644
index 0000000..ced405f
--- /dev/null
+++ b/src/components/input/ToolFileInput.tsx
@@ -0,0 +1,114 @@
+import { Box, styled, TextField, useTheme } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import InputHeader from '../InputHeader';
+import InputFooter from './InputFooter';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
+import greyPattern from '@assets/grey-pattern.png';
+
+interface ToolFileInputProps {
+  value: File | null;
+  onChange: (file: File) => void;
+  accept: string[];
+  title?: string;
+}
+
+export default function ToolFileInput({
+  value,
+  onChange,
+  accept,
+  title = 'File'
+}: ToolFileInputProps) {
+  const [preview, setPreview] = useState<string | null>(null);
+  const theme = useTheme();
+  const { showSnackBar } = useContext(CustomSnackBarContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(value?.name ?? '')
+      .then(() => showSnackBar('Text copied', 'success'))
+      .catch((err) => {
+        showSnackBar('Failed to copy: ' + err, 'error');
+      });
+  };
+  useEffect(() => {
+    if (value) {
+      const objectUrl = URL.createObjectURL(value);
+      setPreview(objectUrl);
+
+      // Clean up memory when the component is unmounted or the file changes
+      return () => URL.revokeObjectURL(objectUrl);
+    } else {
+      setPreview(null);
+    }
+  }, [value]);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) onChange(file);
+  };
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+  return (
+    <Box>
+      <InputHeader title={title} />
+      <Box
+        sx={{
+          width: '100%',
+          height: 250,
+          border: preview ? 0 : 1,
+          borderRadius: 2,
+          boxShadow: '5'
+        }}
+      >
+        {preview ? (
+          <Box
+            width={'100%'}
+            height={'100%'}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundImage: `url(${greyPattern})`
+            }}
+          >
+            <img
+              src={preview}
+              alt="Preview"
+              style={{ maxWidth: '100%', maxHeight: 250 }}
+            />
+          </Box>
+        ) : (
+          <Box
+            onClick={handleImportClick}
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 5,
+              height: '100%',
+              cursor: 'pointer'
+            }}
+          >
+            <Typography color={theme.palette.grey['600']}>
+              Click here to select an image from your device, press Ctrl+V to
+              use an image from your clipboard, drag and drop a file from
+              desktop
+            </Typography>
+          </Box>
+        )}
+      </Box>
+      <InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
+      <input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type="file"
+        accept={accept.join(',')}
+        onChange={handleFileChange}
+      />
+    </Box>
+  );
+}
diff --git a/src/components/input/ToolTextInput.tsx b/src/components/input/ToolTextInput.tsx
index b086c3e..d5a666d 100644
--- a/src/components/input/ToolTextInput.tsx
+++ b/src/components/input/ToolTextInput.tsx
@@ -5,6 +5,8 @@ import PublishIcon from '@mui/icons-material/Publish';
 import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import React, { useContext, useRef } from 'react';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
+import InputHeader from '../InputHeader';
+import InputFooter from './InputFooter';
 
 export default function ToolTextInput({
   value,
@@ -45,9 +47,7 @@ export default function ToolTextInput({
   };
   return (
     <Box id="tool">
-      <Typography fontSize={30} color={'primary'}>
-        {title}
-      </Typography>
+      <InputHeader title={title} />
       <TextField
         value={value}
         onChange={(event) => onChange(event.target.value)}
@@ -55,14 +55,7 @@ export default function ToolTextInput({
         multiline
         rows={10}
       />
-      <Stack mt={1} direction={'row'} spacing={2}>
-        <Button onClick={handleImportClick} startIcon={<PublishIcon />}>
-          Import from file
-        </Button>
-        <Button onClick={handleCopy} startIcon={<ContentPasteIcon />}>
-          Copy to clipboard
-        </Button>
-      </Stack>
+      <InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
       <input
         type="file"
         accept="*"
diff --git a/src/components/result/ToolFileResult.tsx b/src/components/result/ToolFileResult.tsx
new file mode 100644
index 0000000..d9f0e67
--- /dev/null
+++ b/src/components/result/ToolFileResult.tsx
@@ -0,0 +1,59 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import InputHeader from '../InputHeader';
+import greyPattern from '@assets/grey-pattern.png';
+
+export default function ToolFileResult({
+  title = 'Result',
+  value
+}: {
+  title?: string;
+  value: File | null;
+}) {
+  const [preview, setPreview] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    if (value) {
+      const objectUrl = URL.createObjectURL(value);
+      setPreview(objectUrl);
+
+      return () => URL.revokeObjectURL(objectUrl);
+    } else {
+      setPreview(null);
+    }
+  }, [value]);
+
+  return (
+    <Box>
+      <InputHeader title={title} />
+      <Box
+        sx={{
+          width: '100%',
+          height: 250,
+          border: preview ? 0 : 1,
+          borderRadius: 2,
+          boxShadow: '5'
+        }}
+      >
+        {preview && (
+          <Box
+            width={'100%'}
+            height={'100%'}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundImage: `url(${greyPattern})`
+            }}
+          >
+            <img
+              src={preview}
+              alt="Result"
+              style={{ maxWidth: '100%', maxHeight: 250 }}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/result/ToolTextResult.tsx b/src/components/result/ToolTextResult.tsx
index 3a4c80b..efaec01 100644
--- a/src/components/result/ToolTextResult.tsx
+++ b/src/components/result/ToolTextResult.tsx
@@ -5,6 +5,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import React, { useContext } from 'react';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
+import InputHeader from '../InputHeader';
 
 export default function ToolTextResult({
   title = 'Result',
@@ -37,9 +38,7 @@ export default function ToolTextResult({
   };
   return (
     <Box>
-      <Typography fontSize={30} color={'primary'}>
-        {title}
-      </Typography>
+      <InputHeader title={title} />
       <TextField value={value} fullWidth multiline rows={10} />
       <Stack mt={1} direction={'row'} spacing={2}>
         <Button onClick={handleDownload} startIcon={<DownloadIcon />}>
diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
index b08b174..59da401 100644
--- a/src/pages/image/png/change-colors-in-png/index.tsx
+++ b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -1,11 +1,76 @@
 import { Box } from '@mui/material';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import * as Yup from 'yup';
+import Grid from '@mui/material/Grid';
+import ToolTextInput from '../../../../components/input/ToolTextInput';
+import ToolTextResult from '../../../../components/result/ToolTextResult';
+import ToolFileInput from '../../../../components/input/ToolFileInput';
+import ToolFileResult from '../../../../components/result/ToolFileResult';
 
-const initialValues = {};
+const initialValues = {
+  rgba: [0, 0, 0, 0]
+};
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });
 export default function ChangeColorsInPng() {
-  return <Box>Lorem ipsum</Box>;
-}
\ No newline at end of file
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+
+  useEffect(() => {
+    if (input) {
+      const processImage = async (file: File) => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (ctx == null) return;
+        const img = new Image();
+
+        img.src = URL.createObjectURL(file);
+        await img.decode();
+
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data: Uint8ClampedArray = imageData.data;
+        for (let i = 0; i < data.length; i += 4) {
+          // Check for white pixel
+          if (data[i] === 255 && data[i + 1] === 255 && data[i + 2] === 255) {
+            data[i] = 255; // Red
+            data[i + 1] = 0; // Green
+            data[i + 2] = 0; // Blue
+          }
+        }
+
+        ctx.putImageData(imageData, 0, 0);
+
+        canvas.toBlob((blob) => {
+          if (blob) {
+            const newFile = new File([blob], file.name, { type: 'image/png' });
+            setResult(newFile);
+          }
+        }, 'image/png');
+      };
+
+      processImage(input);
+    }
+  }, [input]);
+  return (
+    <Box>
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <ToolFileInput
+            value={input}
+            onChange={setInput}
+            accept={['image/png']}
+            title={'Input PNG'}
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <ToolFileResult title={'Output PNG with new colors'} value={result} />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
diff --git a/src/pages/image/png/change-colors-in-png/meta.ts b/src/pages/image/png/change-colors-in-png/meta.ts
index 4bd2f83..c6aac38 100644
--- a/src/pages/image/png/change-colors-in-png/meta.ts
+++ b/src/pages/image/png/change-colors-in-png/meta.ts
@@ -1,6 +1,6 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-import image from '@assets/text.png';
+import image from '@assets/image.png';
 
 export const tool = defineTool('png', {
   name: 'Change colors in png',

From ff617129232dd03ff9cd7470f4e435b23e1de143 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Mon, 24 Jun 2024 03:57:52 +0100
Subject: [PATCH 09/20] feat: change colors in png

---
 .eslintrc                                     |  3 +-
 .idea/workspace.xml                           | 95 +++++++++---------
 package-lock.json                             | 71 +++++++++++++-
 package.json                                  |  3 +
 src/components/input/ToolFileInput.tsx        |  5 +-
 src/components/options/ColorSelector.tsx      | 48 +++++++++
 src/components/result/ToolFileResult.tsx      |  5 +-
 src/config/uiConfig.ts                        |  2 +
 .../image/png/change-colors-in-png/index.tsx  | 98 ++++++++++++++++---
 .../image/png/change-colors-in-png/meta.ts    |  3 +-
 10 files changed, 265 insertions(+), 68 deletions(-)
 create mode 100644 src/components/options/ColorSelector.tsx
 create mode 100644 src/config/uiConfig.ts

diff --git a/.eslintrc b/.eslintrc
index 6c7bbbd..a473206 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -42,6 +42,7 @@
     "tailwindcss/classnames-order": "warn",
     "tailwindcss/no-custom-classname": "warn",
     "tailwindcss/no-contradicting-classname": "error",
-    "@typescript-eslint/ban-types": "off"
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off"
   }
 }
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d18ac21..2f9c07e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,17 +4,15 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: create-tool.mjs">
-      <change afterPath="$PROJECT_DIR$/src/assets/grey-pattern.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/image.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/InputHeader.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/input/InputFooter.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change colors in png init">
+      <change afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.eslintrc" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolTextInput.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
     </list>
@@ -45,37 +43,37 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ASKED_ADD_EXTERNAL_FILES": "true",
-    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "Vitest.mergeText.executor": "Run",
-    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
-    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
-    "git-widget-placeholder": "main",
-    "ignore.virus.scanning.warn.message": "true",
-    "kotlin-language-version-configured": "true",
-    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "npm.dev.executor": "Run",
-    "npm.prebuild.executor": "Run",
-    "npm.script:create:tool.executor": "Run",
-    "npm.test.executor": "Run",
-    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
-    "project.structure.last.edited": "Problems",
-    "project.structure.proportion": "0.0",
-    "project.structure.side.proportion": "0.2",
-    "settings.editor.selected.configurable": "settings.typescriptcompiler",
-    "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/src/assets&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test.executor&quot;: &quot;Run&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
+    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
+    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -169,7 +167,8 @@
       <workItem from="1719092003308" duration="14856000" />
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
-      <workItem from="1719168519203" duration="13734000" />
+      <workItem from="1719168519203" duration="17675000" />
+      <workItem from="1719197816332" duration="27000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -531,7 +530,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719188162583</updated>
     </task>
-    <option name="localTasksCounter" value="46" />
+    <task id="LOCAL-00046" summary="feat: change colors in png init">
+      <option name="closed" value="true" />
+      <created>1719193884293</created>
+      <option name="number" value="00046" />
+      <option name="presentableId" value="LOCAL-00046" />
+      <option name="project" value="LOCAL" />
+      <updated>1719193884293</updated>
+    </task>
+    <option name="localTasksCounter" value="47" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -552,7 +559,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="ubf" />
     <MESSAGE value="ubf jn" />
     <MESSAGE value="feat: conventional commit" />
     <MESSAGE value="test: init" />
@@ -577,7 +583,8 @@
     <MESSAGE value="ci: fix" />
     <MESSAGE value="fix: readme" />
     <MESSAGE value="fix: create-tool.mjs" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: create-tool.mjs" />
+    <MESSAGE value="feat: change colors in png init" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: change colors in png init" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/package-lock.json b/package-lock.json
index 9808b59..7c7f076 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@mui/icons-material": "^5.15.20",
         "@mui/material": "^5.15.20",
         "@types/lodash": "^4.17.5",
+        "color": "^4.2.3",
         "formik": "^2.4.6",
         "lodash": "^4.17.21",
         "notistack": "^3.0.1",
@@ -27,6 +28,8 @@
         "@commitlint/config-conventional": "^19.2.2",
         "@testing-library/jest-dom": "^6.4.5",
         "@testing-library/react": "^14.3.1",
+        "@types/color": "^3.0.6",
+        "@types/color-rgba": "^2.1.2",
         "@types/node": "^20.12.12",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
@@ -2408,6 +2411,36 @@
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true
     },
+    "node_modules/@types/color": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz",
+      "integrity": "sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==",
+      "dev": true,
+      "dependencies": {
+        "@types/color-convert": "*"
+      }
+    },
+    "node_modules/@types/color-convert": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.3.tgz",
+      "integrity": "sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==",
+      "dev": true,
+      "dependencies": {
+        "@types/color-name": "*"
+      }
+    },
+    "node_modules/@types/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==",
+      "dev": true
+    },
+    "node_modules/@types/color-rgba": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@types/color-rgba/-/color-rgba-2.1.2.tgz",
+      "integrity": "sha512-gDV/fgs4Mpc+hcHygYnM2EDgcxaHmvIGrAVxZJjP38f2IXQKHiGf0XMHhFd+dz8EVPSNTwHL5DJ6yXsxEiCQkg==",
+      "dev": true
+    },
     "node_modules/@types/conventional-commits-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz",
@@ -3527,11 +3560,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -3542,8 +3586,16 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
     },
     "node_modules/commander": {
       "version": "4.1.1",
@@ -7375,6 +7427,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/sirv": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
diff --git a/package.json b/package.json
index 4a5dec7..71c3c43 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@types/lodash": "^4.17.5",
+    "color": "^4.2.3",
     "formik": "^2.4.6",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
@@ -43,6 +44,8 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
+    "@types/color": "^3.0.6",
+    "@types/color-rgba": "^2.1.2",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/src/components/input/ToolFileInput.tsx b/src/components/input/ToolFileInput.tsx
index ced405f..b2189ea 100644
--- a/src/components/input/ToolFileInput.tsx
+++ b/src/components/input/ToolFileInput.tsx
@@ -5,6 +5,7 @@ import InputHeader from '../InputHeader';
 import InputFooter from './InputFooter';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import greyPattern from '@assets/grey-pattern.png';
+import { globalInputHeight } from '../../config/uiConfig';
 
 interface ToolFileInputProps {
   value: File | null;
@@ -57,7 +58,7 @@ export default function ToolFileInput({
       <Box
         sx={{
           width: '100%',
-          height: 250,
+          height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
           boxShadow: '5'
@@ -77,7 +78,7 @@ export default function ToolFileInput({
             <img
               src={preview}
               alt="Preview"
-              style={{ maxWidth: '100%', maxHeight: 250 }}
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
             />
           </Box>
         ) : (
diff --git a/src/components/options/ColorSelector.tsx b/src/components/options/ColorSelector.tsx
new file mode 100644
index 0000000..ec49951
--- /dev/null
+++ b/src/components/options/ColorSelector.tsx
@@ -0,0 +1,48 @@
+import React, { useState, ChangeEvent, useRef } from 'react';
+import { Box, Stack, TextField } from '@mui/material';
+import PaletteIcon from '@mui/icons-material/Palette';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { descriptionFontSize } from '../../config/uiConfig';
+
+interface ColorSelectorProps {
+  value: string;
+  onChange: (val: string) => void;
+  description: string;
+}
+
+const ColorSelector: React.FC<ColorSelectorProps> = ({
+  value = '#ffffff',
+  onChange,
+  description
+}) => {
+  const [color, setColor] = useState<string>(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const val = event.target.value;
+    setColor(val);
+    onChange(val);
+  };
+
+  return (
+    <Box mb={1}>
+      <Stack direction={'row'}>
+        <TextField value={color} onChange={handleColorChange} />
+        <IconButton onClick={() => inputRef.current?.click()}>
+          <PaletteIcon />
+        </IconButton>
+        <TextField
+          style={{ display: 'none' }}
+          inputRef={inputRef}
+          type="color"
+          value={color}
+          onChange={handleColorChange}
+        />
+      </Stack>
+      <Typography fontSize={descriptionFontSize}>{description}</Typography>
+    </Box>
+  );
+};
+
+export default ColorSelector;
diff --git a/src/components/result/ToolFileResult.tsx b/src/components/result/ToolFileResult.tsx
index d9f0e67..dccc060 100644
--- a/src/components/result/ToolFileResult.tsx
+++ b/src/components/result/ToolFileResult.tsx
@@ -2,6 +2,7 @@ import { Box } from '@mui/material';
 import React from 'react';
 import InputHeader from '../InputHeader';
 import greyPattern from '@assets/grey-pattern.png';
+import { globalInputHeight } from '../../config/uiConfig';
 
 export default function ToolFileResult({
   title = 'Result',
@@ -29,7 +30,7 @@ export default function ToolFileResult({
       <Box
         sx={{
           width: '100%',
-          height: 250,
+          height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
           boxShadow: '5'
@@ -49,7 +50,7 @@ export default function ToolFileResult({
             <img
               src={preview}
               alt="Result"
-              style={{ maxWidth: '100%', maxHeight: 250 }}
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
             />
           </Box>
         )}
diff --git a/src/config/uiConfig.ts b/src/config/uiConfig.ts
new file mode 100644
index 0000000..5ec7d7b
--- /dev/null
+++ b/src/config/uiConfig.ts
@@ -0,0 +1,2 @@
+export const globalInputHeight = 300;
+export const descriptionFontSize = 12;
diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
index 59da401..62179a6 100644
--- a/src/pages/image/png/change-colors-in-png/index.tsx
+++ b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -1,14 +1,18 @@
-import { Box } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import * as Yup from 'yup';
 import Grid from '@mui/material/Grid';
-import ToolTextInput from '../../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../../components/result/ToolTextResult';
 import ToolFileInput from '../../../../components/input/ToolFileInput';
 import ToolFileResult from '../../../../components/result/ToolFileResult';
+import ToolOptions from '../../../../components/options/ToolOptions';
+import Typography from '@mui/material/Typography';
+import { Formik, useFormikContext } from 'formik';
+import ColorSelector from '../../../../components/options/ColorSelector';
+import Color from 'color';
 
 const initialValues = {
-  rgba: [0, 0, 0, 0]
+  fromColor: 'white',
+  toColor: 'black'
 };
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
@@ -17,9 +21,27 @@ export default function ChangeColorsInPng() {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
-  useEffect(() => {
-    if (input) {
-      const processImage = async (file: File) => {
+  const FormikListenerComponent = ({ input }: { input: File }) => {
+    const { values } = useFormikContext<typeof initialValues>();
+    const { fromColor, toColor } = values;
+
+    useEffect(() => {
+      let fromRgb: [number, number, number];
+      let toRgb: [number, number, number];
+      try {
+        //@ts-ignore
+        fromRgb = Color(fromColor).rgb().array();
+        //@ts-ignore
+        toRgb = Color(toColor).rgb().array();
+      } catch (err) {
+        return;
+      }
+      const processImage = async (
+        file: File,
+        fromColor: [number, number, number],
+        toColor: [number, number, number],
+        similarity: number
+      ) => {
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
         if (ctx == null) return;
@@ -34,12 +56,28 @@ export default function ChangeColorsInPng() {
 
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
         const data: Uint8ClampedArray = imageData.data;
+
+        const colorDistance = (
+          c1: [number, number, number],
+          c2: [number, number, number]
+        ) => {
+          return Math.sqrt(
+            Math.pow(c1[0] - c2[0], 2) +
+              Math.pow(c1[1] - c2[1], 2) +
+              Math.pow(c1[2] - c2[2], 2)
+          );
+        };
+
         for (let i = 0; i < data.length; i += 4) {
-          // Check for white pixel
-          if (data[i] === 255 && data[i + 1] === 255 && data[i + 2] === 255) {
-            data[i] = 255; // Red
-            data[i + 1] = 0; // Green
-            data[i + 2] = 0; // Blue
+          const currentColor: [number, number, number] = [
+            data[i],
+            data[i + 1],
+            data[i + 2]
+          ];
+          if (colorDistance(currentColor, fromColor) <= similarity) {
+            data[i] = toColor[0]; // Red
+            data[i + 1] = toColor[1]; // Green
+            data[i + 2] = toColor[2]; // Blue
           }
         }
 
@@ -53,9 +91,12 @@ export default function ChangeColorsInPng() {
         }, 'image/png');
       };
 
-      processImage(input);
-    }
-  }, [input]);
+      processImage(input, fromRgb, toRgb, 10);
+    }, [input, fromColor, toColor]);
+
+    return null;
+  };
+
   return (
     <Box>
       <Grid container spacing={2}>
@@ -71,6 +112,33 @@ export default function ChangeColorsInPng() {
           <ToolFileResult title={'Output PNG with new colors'} value={result} />
         </Grid>
       </Grid>
+      <ToolOptions>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={() => {}}
+        >
+          {({ setFieldValue, values }) => (
+            <Stack direction={'row'} spacing={2}>
+              {input && <FormikListenerComponent input={input} />}
+              <Box>
+                <Typography fontSize={22}>From color and to color</Typography>
+                <ColorSelector
+                  value={values.fromColor}
+                  onChange={(val) => setFieldValue('fromColor', val)}
+                  description={'Replace this color (from color)'}
+                />
+                <ColorSelector
+                  value={values.toColor}
+                  onChange={(val) => setFieldValue('toColor', val)}
+                  description={'With this color (to color).\n'}
+                />
+              </Box>
+              <Box></Box>
+            </Stack>
+          )}
+        </Formik>
+      </ToolOptions>
     </Box>
   );
 }
diff --git a/src/pages/image/png/change-colors-in-png/meta.ts b/src/pages/image/png/change-colors-in-png/meta.ts
index c6aac38..dd87e03 100644
--- a/src/pages/image/png/change-colors-in-png/meta.ts
+++ b/src/pages/image/png/change-colors-in-png/meta.ts
@@ -6,7 +6,8 @@ export const tool = defineTool('png', {
   name: 'Change colors in png',
   path: 'change-colors-in-png',
   image,
-  description: '',
+  description:
+    "World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors.",
   keywords: ['change', 'colors', 'in', 'png'],
   component: lazy(() => import('./index'))
 });

From 173e49a10f1a54113c5dfe73453154f1a56abb8a Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 01:10:41 +0100
Subject: [PATCH 10/20] chore: ResultFooter

---
 .idea/workspace.xml                           | 28 ++++++------
 src/components/result/ResultFooter.tsx        | 34 +++++++++++++++
 src/components/result/ToolFileResult.tsx      | 43 ++++++++++++++++++-
 src/components/result/ToolTextResult.tsx      | 10 +----
 .../image/png/change-colors-in-png/index.tsx  | 14 ++++--
 5 files changed, 104 insertions(+), 25 deletions(-)
 create mode 100644 src/components/result/ResultFooter.tsx

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 2f9c07e..af41340 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,17 +4,12 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change colors in png init">
-      <change afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.eslintrc" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change colors in png">
+      <change afterPath="$PROJECT_DIR$/src/components/result/ResultFooter.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/ToolFileInput.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -168,7 +163,8 @@
       <workItem from="1719164664347" duration="2033000" />
       <workItem from="1719166718305" duration="1783000" />
       <workItem from="1719168519203" duration="17675000" />
-      <workItem from="1719197816332" duration="27000" />
+      <workItem from="1719197816332" duration="1453000" />
+      <workItem from="1719273044735" duration="1047000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -538,7 +534,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719193884293</updated>
     </task>
-    <option name="localTasksCounter" value="47" />
+    <task id="LOCAL-00047" summary="feat: change colors in png">
+      <option name="closed" value="true" />
+      <created>1719197875189</created>
+      <option name="number" value="00047" />
+      <option name="presentableId" value="LOCAL-00047" />
+      <option name="project" value="LOCAL" />
+      <updated>1719197875189</updated>
+    </task>
+    <option name="localTasksCounter" value="48" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -559,7 +563,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="ubf jn" />
     <MESSAGE value="feat: conventional commit" />
     <MESSAGE value="test: init" />
     <MESSAGE value="chore: remove prebuild" />
@@ -584,7 +587,8 @@
     <MESSAGE value="fix: readme" />
     <MESSAGE value="fix: create-tool.mjs" />
     <MESSAGE value="feat: change colors in png init" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: change colors in png init" />
+    <MESSAGE value="feat: change colors in png" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: change colors in png" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/result/ResultFooter.tsx b/src/components/result/ResultFooter.tsx
new file mode 100644
index 0000000..4de3176
--- /dev/null
+++ b/src/components/result/ResultFooter.tsx
@@ -0,0 +1,34 @@
+import { Stack } from '@mui/material';
+import Button from '@mui/material/Button';
+import DownloadIcon from '@mui/icons-material/Download';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import React from 'react';
+
+export default function ResultFooter({
+  handleDownload,
+  handleCopy,
+  disabled
+}: {
+  handleDownload: () => void;
+  handleCopy: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Stack mt={1} direction={'row'} spacing={2}>
+      <Button
+        disabled={disabled}
+        onClick={handleDownload}
+        startIcon={<DownloadIcon />}
+      >
+        Save as
+      </Button>
+      <Button
+        disabled={disabled}
+        onClick={handleCopy}
+        startIcon={<ContentPasteIcon />}
+      >
+        Copy to clipboard
+      </Button>
+    </Stack>
+  );
+}
diff --git a/src/components/result/ToolFileResult.tsx b/src/components/result/ToolFileResult.tsx
index dccc060..a76a04f 100644
--- a/src/components/result/ToolFileResult.tsx
+++ b/src/components/result/ToolFileResult.tsx
@@ -1,17 +1,22 @@
 import { Box } from '@mui/material';
-import React from 'react';
+import React, { useContext } from 'react';
 import InputHeader from '../InputHeader';
 import greyPattern from '@assets/grey-pattern.png';
 import { globalInputHeight } from '../../config/uiConfig';
+import ResultFooter from './ResultFooter';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 
 export default function ToolFileResult({
   title = 'Result',
-  value
+  value,
+  extension
 }: {
   title?: string;
   value: File | null;
+  extension: string;
 }) {
   const [preview, setPreview] = React.useState<string | null>(null);
+  const { showSnackBar } = useContext(CustomSnackBarContext);
 
   React.useEffect(() => {
     if (value) {
@@ -24,6 +29,35 @@ export default function ToolFileResult({
     }
   }, [value]);
 
+  const handleCopy = () => {
+    if (value) {
+      const blob = new Blob([value], { type: value.type });
+      const clipboardItem = new ClipboardItem({ [value.type]: blob });
+
+      navigator.clipboard
+        .write([clipboardItem])
+        .then(() => showSnackBar('File copied', 'success'))
+        .catch((err) => {
+          showSnackBar('Failed to copy: ' + err, 'error');
+        });
+    }
+  };
+
+  const handleDownload = () => {
+    if (value) {
+      const filename = 'output-omni-tools.' + extension;
+
+      const blob = new Blob([value], { type: value.type });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    }
+  };
   return (
     <Box>
       <InputHeader title={title} />
@@ -55,6 +89,11 @@ export default function ToolFileResult({
           </Box>
         )}
       </Box>
+      <ResultFooter
+        disabled={!value}
+        handleCopy={handleCopy}
+        handleDownload={handleDownload}
+      />
     </Box>
   );
 }
diff --git a/src/components/result/ToolTextResult.tsx b/src/components/result/ToolTextResult.tsx
index efaec01..e672068 100644
--- a/src/components/result/ToolTextResult.tsx
+++ b/src/components/result/ToolTextResult.tsx
@@ -6,6 +6,7 @@ import ContentPasteIcon from '@mui/icons-material/ContentPaste';
 import React, { useContext } from 'react';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import InputHeader from '../InputHeader';
+import ResultFooter from './ResultFooter';
 
 export default function ToolTextResult({
   title = 'Result',
@@ -40,14 +41,7 @@ export default function ToolTextResult({
     <Box>
       <InputHeader title={title} />
       <TextField value={value} fullWidth multiline rows={10} />
-      <Stack mt={1} direction={'row'} spacing={2}>
-        <Button onClick={handleDownload} startIcon={<DownloadIcon />}>
-          Save as
-        </Button>
-        <Button onClick={handleCopy} startIcon={<ContentPasteIcon />}>
-          Copy to clipboard
-        </Button>
-      </Stack>
+      <ResultFooter handleCopy={handleCopy} handleDownload={handleDownload} />
     </Box>
   );
 }
diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
index 62179a6..7b8a6e9 100644
--- a/src/pages/image/png/change-colors-in-png/index.tsx
+++ b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -67,6 +67,10 @@ export default function ChangeColorsInPng() {
               Math.pow(c1[2] - c2[2], 2)
           );
         };
+        const maxColorDistance = Math.sqrt(
+          Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+        );
+        const similarityThreshold = (similarity / 100) * maxColorDistance;
 
         for (let i = 0; i < data.length; i += 4) {
           const currentColor: [number, number, number] = [
@@ -74,7 +78,7 @@ export default function ChangeColorsInPng() {
             data[i + 1],
             data[i + 2]
           ];
-          if (colorDistance(currentColor, fromColor) <= similarity) {
+          if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
             data[i] = toColor[0]; // Red
             data[i + 1] = toColor[1]; // Green
             data[i + 2] = toColor[2]; // Blue
@@ -109,7 +113,11 @@ export default function ChangeColorsInPng() {
           />
         </Grid>
         <Grid item xs={6}>
-          <ToolFileResult title={'Output PNG with new colors'} value={result} />
+          <ToolFileResult
+            title={'Output PNG with new colors'}
+            value={result}
+            extension={'png'}
+          />
         </Grid>
       </Grid>
       <ToolOptions>
@@ -131,7 +139,7 @@ export default function ChangeColorsInPng() {
                 <ColorSelector
                   value={values.toColor}
                   onChange={(val) => setFieldValue('toColor', val)}
-                  description={'With this color (to color).\n'}
+                  description={'With this color (to color)'}
                 />
               </Box>
               <Box></Box>

From d1450f704fc5adbe8b214bcf05df6d2df84eb815 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 01:26:53 +0100
Subject: [PATCH 11/20] feat: change color in png finished

---
 .idea/workspace.xml                           | 23 ++++---
 src/components/Navbar/index.tsx               | 65 ++++++++++---------
 src/components/options/ColorSelector.tsx      |  6 +-
 .../image/png/change-colors-in-png/index.tsx  | 15 ++++-
 .../image/png/change-colors-in-png/service.ts |  0
 5 files changed, 65 insertions(+), 44 deletions(-)
 delete mode 100644 src/pages/image/png/change-colors-in-png/service.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index af41340..1890e3c 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,11 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change colors in png">
-      <change afterPath="$PROJECT_DIR$/src/components/result/ResultFooter.tsx" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: ResultFooter">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolFileResult.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/result/ToolTextResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -164,7 +163,7 @@
       <workItem from="1719166718305" duration="1783000" />
       <workItem from="1719168519203" duration="17675000" />
       <workItem from="1719197816332" duration="1453000" />
-      <workItem from="1719273044735" duration="1047000" />
+      <workItem from="1719273044735" duration="2109000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -542,7 +541,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719197875189</updated>
     </task>
-    <option name="localTasksCounter" value="48" />
+    <task id="LOCAL-00048" summary="chore: ResultFooter">
+      <option name="closed" value="true" />
+      <created>1719274243788</created>
+      <option name="number" value="00048" />
+      <option name="presentableId" value="LOCAL-00048" />
+      <option name="project" value="LOCAL" />
+      <updated>1719274243788</updated>
+    </task>
+    <option name="localTasksCounter" value="49" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -563,7 +570,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: conventional commit" />
     <MESSAGE value="test: init" />
     <MESSAGE value="chore: remove prebuild" />
     <MESSAGE value="chore: idea config" />
@@ -588,7 +594,8 @@
     <MESSAGE value="fix: create-tool.mjs" />
     <MESSAGE value="feat: change colors in png init" />
     <MESSAGE value="feat: change colors in png" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: change colors in png" />
+    <MESSAGE value="chore: ResultFooter" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: ResultFooter" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 460a9ca..8fbc178 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -6,6 +6,7 @@ import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import { Link, useNavigate } from 'react-router-dom';
 import githubIcon from '@assets/github-mark.png'; // Adjust the path to your GitHub icon
+import { Stack } from '@mui/material';
 
 const Navbar: React.FC = () => {
   const navigate = useNavigate();
@@ -14,46 +15,46 @@ const Navbar: React.FC = () => {
       position="static"
       style={{ backgroundColor: 'white', color: 'black' }}
     >
-      <Toolbar>
+      <Toolbar sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
         <Typography
           onClick={() => navigate('/')}
           fontSize={20}
-          sx={{ flexGrow: 1, cursor: 'pointer' }}
+          sx={{ cursor: 'pointer' }}
           color={'primary'}
         >
           OmniTools
         </Typography>
-
-        <Button color="inherit">
-          <Link
-            to="/features"
-            style={{ textDecoration: 'none', color: 'inherit' }}
+        <Stack direction={'row'}>
+          <Button color="inherit">
+            <Link
+              to="/features"
+              style={{ textDecoration: 'none', color: 'inherit' }}
+            >
+              Features
+            </Link>
+          </Button>
+          <Button color="inherit">
+            <Link
+              to="/about-us"
+              style={{ textDecoration: 'none', color: 'inherit' }}
+            >
+              About Us
+            </Link>
+          </Button>
+          <IconButton
+            color="primary"
+            href="https://github.com/iib0011/omni-tools"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            Features
-          </Link>
-        </Button>
-        <Button color="inherit">
-          <Link
-            to="/about-us"
-            style={{ textDecoration: 'none', color: 'inherit' }}
-          >
-            About Us
-          </Link>
-        </Button>
-
-        <IconButton
-          color="primary"
-          href="https://github.com/iib0011/omni-tools"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <img
-            src={githubIcon}
-            alt="GitHub"
-            style={{ height: '24px', marginRight: '8px' }}
-          />
-          <Typography variant="button">Star us</Typography>
-        </IconButton>
+            <img
+              src={githubIcon}
+              alt="GitHub"
+              style={{ height: '24px', marginRight: '8px' }}
+            />
+            <Typography variant="button">Star us</Typography>
+          </IconButton>
+        </Stack>
       </Toolbar>
     </AppBar>
   );
diff --git a/src/components/options/ColorSelector.tsx b/src/components/options/ColorSelector.tsx
index ec49951..64a4f89 100644
--- a/src/components/options/ColorSelector.tsx
+++ b/src/components/options/ColorSelector.tsx
@@ -28,7 +28,11 @@ const ColorSelector: React.FC<ColorSelectorProps> = ({
   return (
     <Box mb={1}>
       <Stack direction={'row'}>
-        <TextField value={color} onChange={handleColorChange} />
+        <TextField
+          sx={{ backgroundColor: 'white' }}
+          value={color}
+          onChange={handleColorChange}
+        />
         <IconButton onClick={() => inputRef.current?.click()}>
           <PaletteIcon />
         </IconButton>
diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
index 7b8a6e9..99a406d 100644
--- a/src/pages/image/png/change-colors-in-png/index.tsx
+++ b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -9,10 +9,12 @@ import Typography from '@mui/material/Typography';
 import { Formik, useFormikContext } from 'formik';
 import ColorSelector from '../../../../components/options/ColorSelector';
 import Color from 'color';
+import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
 
 const initialValues = {
   fromColor: 'white',
-  toColor: 'black'
+  toColor: 'black',
+  similarity: '10'
 };
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
@@ -23,7 +25,7 @@ export default function ChangeColorsInPng() {
 
   const FormikListenerComponent = ({ input }: { input: File }) => {
     const { values } = useFormikContext<typeof initialValues>();
-    const { fromColor, toColor } = values;
+    const { fromColor, toColor, similarity } = values;
 
     useEffect(() => {
       let fromRgb: [number, number, number];
@@ -95,7 +97,7 @@ export default function ChangeColorsInPng() {
         }, 'image/png');
       };
 
-      processImage(input, fromRgb, toRgb, 10);
+      processImage(input, fromRgb, toRgb, Number(similarity));
     }, [input, fromColor, toColor]);
 
     return null;
@@ -141,6 +143,13 @@ export default function ChangeColorsInPng() {
                   onChange={(val) => setFieldValue('toColor', val)}
                   description={'With this color (to color)'}
                 />
+                <TextFieldWithDesc
+                  value={values.similarity}
+                  onChange={(val) => setFieldValue('similarity', val)}
+                  description={
+                    'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
+                  }
+                />
               </Box>
               <Box></Box>
             </Stack>
diff --git a/src/pages/image/png/change-colors-in-png/service.ts b/src/pages/image/png/change-colors-in-png/service.ts
deleted file mode 100644
index e69de29..0000000

From bea03320205a409e7e2cf49bda0fd15b5b10ab38 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 02:07:57 +0100
Subject: [PATCH 12/20] feat: string to morse

---
 .idea/workspace.xml                           | 110 +++++++++++-------
 package-lock.json                             |  12 ++
 package.json                                  |   2 +
 scripts/create-tool.mjs                       |   6 +-
 src/components/options/ToolOptionGroups.tsx   |  20 ++++
 src/pages/home/index.tsx                      |   4 +-
 src/pages/string/index.ts                     |   3 +-
 src/pages/string/join/index.tsx               |  55 +++++----
 src/pages/string/split/index.tsx              |  74 +++++++-----
 src/pages/string/to-morse/index.tsx           |  98 ++++++++++++++++
 src/pages/string/to-morse/meta.ts             |  12 ++
 src/pages/string/to-morse/service.ts          |   9 ++
 .../string/to-morse/to-morse.service.test.ts  |  50 ++++++++
 13 files changed, 354 insertions(+), 101 deletions(-)
 create mode 100644 src/components/options/ToolOptionGroups.tsx
 create mode 100644 src/pages/string/to-morse/index.tsx
 create mode 100644 src/pages/string/to-morse/meta.ts
 create mode 100644 src/pages/string/to-morse/service.ts
 create mode 100644 src/pages/string/to-morse/to-morse.service.test.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1890e3c..3400181 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,11 +4,20 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: ResultFooter">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change color in png finished">
+      <change afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/string/to-morse/service.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/string/to-morse/to-morse.service.test.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -37,37 +46,38 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
-    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/src/assets&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
-    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test.executor&quot;: &quot;Run&quot;,
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
-    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
-    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
-    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ASKED_ADD_EXTERNAL_FILES": "true",
+    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "Vitest.compute function.executor": "Run",
+    "Vitest.mergeText.executor": "Run",
+    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
+    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
+    "git-widget-placeholder": "main",
+    "ignore.virus.scanning.warn.message": "true",
+    "kotlin-language-version-configured": "true",
+    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "npm.dev.executor": "Run",
+    "npm.prebuild.executor": "Run",
+    "npm.script:create:tool.executor": "Run",
+    "npm.test.executor": "Run",
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
+    "project.structure.last.edited": "Problems",
+    "project.structure.proportion": "0.0",
+    "project.structure.side.proportion": "0.2",
+    "settings.editor.selected.configurable": "settings.typescriptcompiler",
+    "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -91,7 +101,20 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\tools" />
     </key>
   </component>
-  <component name="RunManager" selected="npm.dev">
+  <component name="RunManager" selected="Vitest.compute function">
+    <configuration name="compute function" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
+      <node-interpreter value="project" />
+      <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
+      <working-dir value="$PROJECT_DIR$" />
+      <vitest-options value="--run" />
+      <envs />
+      <scope-kind value="SUITE" />
+      <test-file value="$PROJECT_DIR$/src/pages/string/to-morse/to-morse.service.test.ts" />
+      <test-names>
+        <test-name value="compute function" />
+      </test-names>
+      <method v="2" />
+    </configuration>
     <configuration name="dev" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -134,6 +157,7 @@
     </configuration>
     <recent_temporary>
       <list>
+        <item itemvalue="Vitest.compute function" />
         <item itemvalue="npm.dev" />
         <item itemvalue="npm.test" />
         <item itemvalue="npm.script:create:tool" />
@@ -163,7 +187,7 @@
       <workItem from="1719166718305" duration="1783000" />
       <workItem from="1719168519203" duration="17675000" />
       <workItem from="1719197816332" duration="1453000" />
-      <workItem from="1719273044735" duration="2109000" />
+      <workItem from="1719273044735" duration="4589000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -549,7 +573,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719274243788</updated>
     </task>
-    <option name="localTasksCounter" value="49" />
+    <task id="LOCAL-00049" summary="feat: change color in png finished">
+      <option name="closed" value="true" />
+      <created>1719275214988</created>
+      <option name="number" value="00049" />
+      <option name="presentableId" value="LOCAL-00049" />
+      <option name="project" value="LOCAL" />
+      <updated>1719275214988</updated>
+    </task>
+    <option name="localTasksCounter" value="50" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -570,7 +602,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="test: init" />
     <MESSAGE value="chore: remove prebuild" />
     <MESSAGE value="chore: idea config" />
     <MESSAGE value="feat: react helmet" />
@@ -595,7 +626,8 @@
     <MESSAGE value="feat: change colors in png init" />
     <MESSAGE value="feat: change colors in png" />
     <MESSAGE value="chore: ResultFooter" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: ResultFooter" />
+    <MESSAGE value="feat: change color in png finished" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: change color in png finished" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/package-lock.json b/package-lock.json
index 7c7f076..d332906 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,9 +13,11 @@
         "@mui/icons-material": "^5.15.20",
         "@mui/material": "^5.15.20",
         "@types/lodash": "^4.17.5",
+        "@types/morsee": "^1.0.2",
         "color": "^4.2.3",
         "formik": "^2.4.6",
         "lodash": "^4.17.21",
+        "morsee": "^1.0.9",
         "notistack": "^3.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -2476,6 +2478,11 @@
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.5.tgz",
       "integrity": "sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw=="
     },
+    "node_modules/@types/morsee": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/morsee/-/morsee-1.0.2.tgz",
+      "integrity": "sha512-WANv1kCyQtmGZTiov9FzFdt1X4wRtXYZA6B4YR3CghKgx4ychU7d1gkOx7oD+ddVGI+SWmWOPccco7pAc6wXeA=="
+    },
     "node_modules/@types/node": {
       "version": "20.14.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.6.tgz",
@@ -6194,6 +6201,11 @@
         "ufo": "^1.5.3"
       }
     },
+    "node_modules/morsee": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/morsee/-/morsee-1.0.9.tgz",
+      "integrity": "sha512-8X8jKVUmZBHKpET9Ap6FPiwlAAASvv60M1K25/YwCU7veuj5MfYgaWX3oEPHtMGgC44IIkIKzyD73fduEKB/9g=="
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
diff --git a/package.json b/package.json
index 71c3c43..0034b7f 100644
--- a/package.json
+++ b/package.json
@@ -29,9 +29,11 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@types/lodash": "^4.17.5",
+    "@types/morsee": "^1.0.2",
     "color": "^4.2.3",
     "formik": "^2.4.6",
     "lodash": "^4.17.21",
+    "morsee": "^1.0.9",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/scripts/create-tool.mjs b/scripts/create-tool.mjs
index 86390c9..a6f5c12 100644
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -45,7 +45,7 @@ const toolNameCamelCase = toolName.replace(/-./g, (x) => x[1].toUpperCase())
 const toolNameTitleCase =
   toolName[0].toUpperCase() + toolName.slice(1).replace(/-/g, ' ')
 const toolDir = join(toolsDir, toolName)
-
+const type = folder.split(sep)[folder.split(sep).length - 1]
 await createFolderStructure(toolDir, folder.split(sep).length)
 console.log(`Directory created: ${toolDir}`)
 
@@ -78,7 +78,7 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 // import image from '@assets/text.png';
 
-export const tool = defineTool('${folder.split(sep)[folder.split(sep).length - 1]}', {
+export const tool = defineTool('${type}', {
   name: '${toolNameTitleCase}',
   path: '${toolName}',
   // image,
@@ -132,7 +132,7 @@ const indexContent = await readFile(toolsIndex, { encoding: 'utf-8' }).then(
 indexContent.splice(
   0,
   0,
-  `import { tool as ${toolNameCamelCase} } from './${toolName}/meta';`
+  `import { tool as ${type}${capitalizeFirstLetter(toolNameCamelCase)} } from './${toolName}/meta';`
 )
 writeFile(toolsIndex, indexContent.join('\n'))
 console.log(`Added import in: ${toolsIndex}`)
diff --git a/src/components/options/ToolOptionGroups.tsx b/src/components/options/ToolOptionGroups.tsx
new file mode 100644
index 0000000..ed7f465
--- /dev/null
+++ b/src/components/options/ToolOptionGroups.tsx
@@ -0,0 +1,20 @@
+import Typography from '@mui/material/Typography';
+import React, { ReactNode } from 'react';
+import { Box, Stack } from '@mui/material';
+
+export default function ToolOptionGroups({
+  groups
+}: {
+  groups: { title: string; component: ReactNode }[];
+}) {
+  return (
+    <Stack direction={'row'} spacing={2}>
+      {groups.map((group) => (
+        <Box key={group.title}>
+          <Typography fontSize={22}>{group.title}</Typography>
+          {group.component}
+        </Box>
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index d5a3e87..beb5f81 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -12,7 +12,7 @@ import SearchIcon from '@mui/icons-material/Search';
 import { Link, useNavigate } from 'react-router-dom';
 import { filterTools, getToolsByCategory, tools } from '../../tools';
 import { useState } from 'react';
-import { DefinedTool } from '../../tools/defineTool';
+import { DefinedTool } from '@tools/defineTool';
 import Button from '@mui/material/Button';
 
 const exampleTools: { label: string; url: string }[] = [
@@ -20,7 +20,7 @@ const exampleTools: { label: string; url: string }[] = [
     label: 'Create a transparent image',
     url: ''
   },
-  { label: 'Convert text to morse code', url: '' },
+  { label: 'Convert text to morse code', url: '/string/to-morse' },
   { label: 'Change GIF speed', url: '' },
   { label: 'Pick a random item', url: '' },
   { label: 'Find and replace text', url: '' },
diff --git a/src/pages/string/index.ts b/src/pages/string/index.ts
index b53d52c..3011347 100644
--- a/src/pages/string/index.ts
+++ b/src/pages/string/index.ts
@@ -1,4 +1,5 @@
+import { tool as stringToMorse } from './to-morse/meta';
 import { tool as stringSplit } from './split/meta';
 import { tool as stringJoin } from './join/meta';
 
-export const stringTools = [stringSplit, stringJoin];
+export const stringTools = [stringSplit, stringJoin, stringToMorse];
diff --git a/src/pages/string/join/index.tsx b/src/pages/string/join/index.tsx
index bb4792f..cc4778a 100644
--- a/src/pages/string/join/index.tsx
+++ b/src/pages/string/join/index.tsx
@@ -9,6 +9,7 @@ import { mergeText } from './service';
 import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
+import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
 
 const initialValues = {
   joinCharacter: '',
@@ -90,31 +91,37 @@ export default function JoinText() {
           {({ setFieldValue, values }) => (
             <Stack direction={'row'} spacing={2}>
               <FormikListenerComponent input={input} />
-              <Box>
-                <Typography fontSize={22}>Text Merged Options</Typography>
-                <TextFieldWithDesc
-                  placeholder={mergeOptions.placeholder}
-                  value={values['joinCharacter']}
-                  onChange={(value) =>
-                    setFieldValue(mergeOptions.accessor, value)
+              <ToolOptionGroups
+                groups={[
+                  {
+                    title: 'Text Merged Options',
+                    component: (
+                      <TextFieldWithDesc
+                        placeholder={mergeOptions.placeholder}
+                        value={values['joinCharacter']}
+                        onChange={(value) =>
+                          setFieldValue(mergeOptions.accessor, value)
+                        }
+                        description={mergeOptions.description}
+                      />
+                    )
+                  },
+                  {
+                    title: 'Blank Lines and Trailing Spaces',
+                    component: blankTrailingOptions.map((option) => (
+                      <CheckboxWithDesc
+                        key={option.accessor}
+                        title={option.title}
+                        checked={!!values[option.accessor]}
+                        onChange={(value) =>
+                          setFieldValue(option.accessor, value)
+                        }
+                        description={option.description}
+                      />
+                    ))
                   }
-                  description={mergeOptions.description}
-                />
-              </Box>
-              <Box>
-                <Typography fontSize={22}>
-                  Blank Lines and Trailing Spaces
-                </Typography>
-                {blankTrailingOptions.map((option) => (
-                  <CheckboxWithDesc
-                    key={option.accessor}
-                    title={option.title}
-                    checked={!!values[option.accessor]}
-                    onChange={(value) => setFieldValue(option.accessor, value)}
-                    description={option.description}
-                  />
-                ))}
-              </Box>
+                ]}
+              />
             </Stack>
           )}
         </Formik>
diff --git a/src/pages/string/split/index.tsx b/src/pages/string/split/index.tsx
index c28e229..8664495 100644
--- a/src/pages/string/split/index.tsx
+++ b/src/pages/string/split/index.tsx
@@ -1,16 +1,16 @@
-import { Box, Stack, TextField } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import ToolTextInput from '../../../components/input/ToolTextInput';
 import ToolTextResult from '../../../components/result/ToolTextResult';
-import { Field, Formik, FormikProps, useFormikContext } from 'formik';
+import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import ToolOptions from '../../../components/options/ToolOptions';
 import { compute, SplitOperatorType } from './service';
 import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import RadioWithTextField from '../../../components/options/RadioWithTextField';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -143,34 +143,44 @@ export default function SplitText() {
           {({ setFieldValue, values }) => (
             <Stack direction={'row'} spacing={2}>
               <FormikListenerComponent />
-              <Box>
-                <Typography fontSize={22}>Split separator options</Typography>
-                {splitOperators.map(({ title, description, type }) => (
-                  <RadioWithTextField
-                    key={type}
-                    type={type}
-                    title={title}
-                    fieldName={'splitSeparatorType'}
-                    description={description}
-                    value={values[`${type}Value`]}
-                    onTypeChange={(type) =>
-                      setFieldValue('splitSeparatorType', type)
-                    }
-                    onTextChange={(val) => setFieldValue(`${type}Value`, val)}
-                  />
-                ))}
-              </Box>
-              <Box>
-                <Typography fontSize={22}>Output separator options</Typography>
-                {outputOptions.map((option) => (
-                  <TextFieldWithDesc
-                    key={option.accessor}
-                    value={values[option.accessor]}
-                    onChange={(value) => setFieldValue(option.accessor, value)}
-                    description={option.description}
-                  />
-                ))}
-              </Box>
+              <ToolOptionGroups
+                groups={[
+                  {
+                    title: 'Split separator options',
+                    component: splitOperators.map(
+                      ({ title, description, type }) => (
+                        <RadioWithTextField
+                          key={type}
+                          type={type}
+                          title={title}
+                          fieldName={'splitSeparatorType'}
+                          description={description}
+                          value={values[`${type}Value`]}
+                          onTypeChange={(type) =>
+                            setFieldValue('splitSeparatorType', type)
+                          }
+                          onTextChange={(val) =>
+                            setFieldValue(`${type}Value`, val)
+                          }
+                        />
+                      )
+                    )
+                  },
+                  {
+                    title: 'Output separator options',
+                    component: outputOptions.map((option) => (
+                      <TextFieldWithDesc
+                        key={option.accessor}
+                        value={values[option.accessor]}
+                        onChange={(value) =>
+                          setFieldValue(option.accessor, value)
+                        }
+                        description={option.description}
+                      />
+                    ))
+                  }
+                ]}
+              />
             </Stack>
           )}
         </Formik>
diff --git a/src/pages/string/to-morse/index.tsx b/src/pages/string/to-morse/index.tsx
new file mode 100644
index 0000000..3f92301
--- /dev/null
+++ b/src/pages/string/to-morse/index.tsx
@@ -0,0 +1,98 @@
+import { Box, Stack } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import React, { useContext, useEffect, useState } from 'react';
+import ToolTextInput from '../../../components/input/ToolTextInput';
+import ToolTextResult from '../../../components/result/ToolTextResult';
+import { Formik, useFormikContext } from 'formik';
+import * as Yup from 'yup';
+import ToolOptions from '../../../components/options/ToolOptions';
+import { compute } from './service';
+import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
+import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
+
+const initialValues = {
+  dotSymbol: '.',
+  dashSymbol: '-'
+};
+
+export default function ToMorse() {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+  // const formRef = useRef<FormikProps<typeof initialValues>>(null);
+  const { showSnackBar } = useContext(CustomSnackBarContext);
+
+  const FormikListenerComponent = () => {
+    const { values } = useFormikContext<typeof initialValues>();
+
+    useEffect(() => {
+      try {
+        const { dotSymbol, dashSymbol } = values;
+
+        setResult(compute(input, dotSymbol, dashSymbol));
+      } catch (exception: unknown) {
+        if (exception instanceof Error)
+          showSnackBar(exception.message, 'error');
+      }
+    }, [values, input]);
+
+    return null; // This component doesn't render anything
+  };
+  const validationSchema = Yup.object({
+    // splitSeparator: Yup.string().required('The separator is required')
+  });
+
+  return (
+    <Box>
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <ToolTextInput value={input} onChange={setInput} />
+        </Grid>
+        <Grid item xs={6}>
+          <ToolTextResult title={'Morse code'} value={result} />
+        </Grid>
+      </Grid>
+      <ToolOptions>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={() => {}}
+        >
+          {({ setFieldValue, values }) => (
+            <Stack direction={'row'} spacing={2}>
+              <FormikListenerComponent />
+              <ToolOptionGroups
+                groups={[
+                  {
+                    title: 'Short Signal',
+                    component: (
+                      <TextFieldWithDesc
+                        description={
+                          'Symbol that will correspond to the dot in Morse code.'
+                        }
+                        value={values.dotSymbol}
+                        onChange={(val) => setFieldValue('dotSymbol', val)}
+                      />
+                    )
+                  },
+                  {
+                    title: 'Long Signal',
+                    component: (
+                      <TextFieldWithDesc
+                        description={
+                          'Symbol that will correspond to the dash in Morse code.'
+                        }
+                        value={values.dashSymbol}
+                        onChange={(val) => setFieldValue('dashSymbol', val)}
+                      />
+                    )
+                  }
+                ]}
+              />
+            </Stack>
+          )}
+        </Formik>
+      </ToolOptions>
+    </Box>
+  );
+}
diff --git a/src/pages/string/to-morse/meta.ts b/src/pages/string/to-morse/meta.ts
new file mode 100644
index 0000000..cc7c51e
--- /dev/null
+++ b/src/pages/string/to-morse/meta.ts
@@ -0,0 +1,12 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+// import image from '@assets/text.png';
+
+export const tool = defineTool('string', {
+  name: 'String To morse',
+  path: 'to-morse',
+  // image,
+  description: '',
+  keywords: ['to', 'morse'],
+  component: lazy(() => import('./index'))
+});
diff --git a/src/pages/string/to-morse/service.ts b/src/pages/string/to-morse/service.ts
new file mode 100644
index 0000000..6f81b6e
--- /dev/null
+++ b/src/pages/string/to-morse/service.ts
@@ -0,0 +1,9 @@
+import { encode } from 'morsee';
+
+export const compute = (
+  input: string,
+  dotSymbol: string,
+  dashSymbol: string
+): string => {
+  return encode(input).replaceAll('.', dotSymbol).replaceAll('-', dashSymbol);
+};
diff --git a/src/pages/string/to-morse/to-morse.service.test.ts b/src/pages/string/to-morse/to-morse.service.test.ts
new file mode 100644
index 0000000..6f87b54
--- /dev/null
+++ b/src/pages/string/to-morse/to-morse.service.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { compute } from './service';
+
+describe('compute function', () => {
+  it('should replace dots and dashes with specified symbols', () => {
+    const input = 'test';
+    const dotSymbol = '*';
+    const dashSymbol = '#';
+    const result = compute(input, dotSymbol, dashSymbol);
+    const expected = '# * *** #';
+    expect(result).toBe(expected);
+  });
+
+  it('should return an empty string for empty input', () => {
+    const input = '';
+    const dotSymbol = '*';
+    const dashSymbol = '#';
+    const result = compute(input, dotSymbol, dashSymbol);
+    expect(result).toBe('');
+  });
+
+  // Test case 3: Special characters handling
+  it('should handle input with special characters', () => {
+    const input = 'hello, world!';
+    const dotSymbol = '*';
+    const dashSymbol = '#';
+    const result = compute(input, dotSymbol, dashSymbol);
+    const expected =
+      '**** * *#** *#** ### ##**## / *## ### *#* *#** #** #*#*##';
+    expect(result).toBe(expected);
+  });
+
+  it('should work with different symbols for dots and dashes', () => {
+    const input = 'morse';
+    const dotSymbol = '!';
+    const dashSymbol = '@';
+    const result = compute(input, dotSymbol, dashSymbol);
+    const expected = '@@ @@@ !@! !!! !';
+    expect(result).toBe(expected);
+  });
+
+  it('should handle numeric input correctly', () => {
+    const input = '12345';
+    const dotSymbol = '*';
+    const dashSymbol = '#';
+    const result = compute(input, dotSymbol, dashSymbol);
+    const expected = '*#### **### ***## ****# *****'; // This depends on how "12345" is encoded in morse code
+    expect(result).toBe(expected);
+  });
+});

From cfe0d324fe477b387618b458896667d91739ba97 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 03:11:48 +0100
Subject: [PATCH 13/20] feat: sum numbers init

---
 .eslintrc                                     |   3 +-
 .idea/workspace.xml                           |  48 +++---
 scripts/create-tool.mjs                       |   2 +-
 src/components/options/ColorSelector.tsx      |   6 +-
 src/components/options/RadioWithTextField.tsx |  33 ++--
 src/components/options/SimpleRadio.tsx        |  46 +++++
 src/components/options/ToolOptionGroups.tsx   |   4 +-
 src/config/uiConfig.ts                        |   2 +-
 src/pages/home/index.tsx                      |   2 +-
 src/pages/number/index.ts                     |   3 +
 src/pages/number/sum/index.tsx                | 157 ++++++++++++++++++
 src/pages/number/sum/meta.ts                  |  13 ++
 src/pages/number/sum/service.ts               |  29 ++++
 src/pages/number/sum/sum.service.test.ts      |   6 +
 src/pages/string/split/index.tsx              |   4 +-
 src/pages/string/to-morse/meta.ts             |   3 +-
 src/tools/index.ts                            |  12 +-
 17 files changed, 324 insertions(+), 49 deletions(-)
 create mode 100644 src/components/options/SimpleRadio.tsx
 create mode 100644 src/pages/number/index.ts
 create mode 100644 src/pages/number/sum/index.tsx
 create mode 100644 src/pages/number/sum/meta.ts
 create mode 100644 src/pages/number/sum/service.ts
 create mode 100644 src/pages/number/sum/sum.service.test.ts

diff --git a/.eslintrc b/.eslintrc
index a473206..e857efc 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -43,6 +43,7 @@
     "tailwindcss/no-custom-classname": "warn",
     "tailwindcss/no-contradicting-classname": "error",
     "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/ban-ts-comment": "off"
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 3400181..4a6ed24 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,20 +4,24 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: change color in png finished">
-      <change afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/string/to-morse/service.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/string/to-morse/to-morse.service.test.ts" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: string to morse">
+      <change afterPath="$PROJECT_DIR$/src/components/options/SimpleRadio.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/number/index.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/number/sum/meta.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/number/sum/service.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/number/sum/sum.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.eslintrc" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/RadioWithTextField.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/RadioWithTextField.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config/uiConfig.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -187,15 +191,7 @@
       <workItem from="1719166718305" duration="1783000" />
       <workItem from="1719168519203" duration="17675000" />
       <workItem from="1719197816332" duration="1453000" />
-      <workItem from="1719273044735" duration="4589000" />
-    </task>
-    <task id="LOCAL-00001" summary="feat: use vite and ts">
-      <option name="closed" value="true" />
-      <created>1718816900959</created>
-      <option name="number" value="00001" />
-      <option name="presentableId" value="LOCAL-00001" />
-      <option name="project" value="LOCAL" />
-      <updated>1718816900959</updated>
+      <workItem from="1719273044735" duration="8300000" />
     </task>
     <task id="LOCAL-00002" summary="feat: initial commit">
       <option name="closed" value="true" />
@@ -581,7 +577,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719275214988</updated>
     </task>
-    <option name="localTasksCounter" value="50" />
+    <task id="LOCAL-00050" summary="feat: string to morse">
+      <option name="closed" value="true" />
+      <created>1719277679968</created>
+      <option name="number" value="00050" />
+      <option name="presentableId" value="LOCAL-00050" />
+      <option name="project" value="LOCAL" />
+      <updated>1719277679969</updated>
+    </task>
+    <option name="localTasksCounter" value="51" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -602,7 +606,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: remove prebuild" />
     <MESSAGE value="chore: idea config" />
     <MESSAGE value="feat: react helmet" />
     <MESSAGE value="feat: tools normalized" />
@@ -627,7 +630,8 @@
     <MESSAGE value="feat: change colors in png" />
     <MESSAGE value="chore: ResultFooter" />
     <MESSAGE value="feat: change color in png finished" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: change color in png finished" />
+    <MESSAGE value="feat: string to morse" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: string to morse" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/scripts/create-tool.mjs b/scripts/create-tool.mjs
index a6f5c12..a8c1715 100644
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -30,7 +30,7 @@ function createFolderStructure(basePath, foldersToCreateIndexCount) {
     }
     const indexPath = join(currentPath, 'index.ts')
     if (!fs.existsSync(indexPath) && index < folderArray.length - 1 && index >= folderArray.length - 1 - foldersToCreateIndexCount) {
-      fs.writeFileSync(indexPath, '// index.ts file')
+      fs.writeFileSync(indexPath, `export const ${currentPath.split(sep)[currentPath.split(sep).length - 1]}Tools = [];\n`)
       console.log(`File created: ${indexPath}`)
     }
     // Recursively create the next folder
diff --git a/src/components/options/ColorSelector.tsx b/src/components/options/ColorSelector.tsx
index 64a4f89..0a6cb1e 100644
--- a/src/components/options/ColorSelector.tsx
+++ b/src/components/options/ColorSelector.tsx
@@ -3,7 +3,7 @@ import { Box, Stack, TextField } from '@mui/material';
 import PaletteIcon from '@mui/icons-material/Palette';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import { descriptionFontSize } from '../../config/uiConfig';
+import { globalDescriptionFontSize } from '../../config/uiConfig';
 
 interface ColorSelectorProps {
   value: string;
@@ -44,7 +44,9 @@ const ColorSelector: React.FC<ColorSelectorProps> = ({
           onChange={handleColorChange}
         />
       </Stack>
-      <Typography fontSize={descriptionFontSize}>{description}</Typography>
+      <Typography fontSize={globalDescriptionFontSize}>
+        {description}
+      </Typography>
     </Box>
   );
 };
diff --git a/src/components/options/RadioWithTextField.tsx b/src/components/options/RadioWithTextField.tsx
index d82ca0c..75ce672 100644
--- a/src/components/options/RadioWithTextField.tsx
+++ b/src/components/options/RadioWithTextField.tsx
@@ -4,37 +4,38 @@ import { Field } from 'formik';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import TextFieldWithDesc from './TextFieldWithDesc';
+import { globalDescriptionFontSize } from '../../config/uiConfig';
+import SimpleRadio from './SimpleRadio';
 
 const RadioWithTextField = <T,>({
   fieldName,
-  type,
+  radioValue,
   title,
-  onTypeChange,
+  onRadioChange,
   value,
   description,
-  onTextChange
+  onTextChange,
+  typeDescription
 }: {
   fieldName: string;
   title: string;
-  type: T;
-  onTypeChange: (val: T) => void;
+  radioValue: T;
+  onRadioChange: (val: T) => void;
   value: string;
   description: string;
   onTextChange: (value: string) => void;
+  typeDescription?: string;
 }) => {
-  const onChange = () => onTypeChange(type);
+  const onChange = () => onRadioChange(radioValue);
   return (
     <Box>
-      <Stack
-        direction={'row'}
-        sx={{ mt: 2, mb: 1, cursor: 'pointer' }}
-        onClick={onChange}
-        alignItems={'center'}
-        spacing={1}
-      >
-        <Field type="radio" name={fieldName} value={type} onChange={onChange} />
-        <Typography>{title}</Typography>
-      </Stack>
+      <SimpleRadio
+        value={radioValue}
+        onChange={onChange}
+        fieldName={fieldName}
+        title={title}
+        description={typeDescription}
+      />
       <TextFieldWithDesc
         value={value}
         onChange={onTextChange}
diff --git a/src/components/options/SimpleRadio.tsx b/src/components/options/SimpleRadio.tsx
new file mode 100644
index 0000000..3f124e9
--- /dev/null
+++ b/src/components/options/SimpleRadio.tsx
@@ -0,0 +1,46 @@
+import { Box, Stack } from '@mui/material';
+import { Field } from 'formik';
+import Typography from '@mui/material/Typography';
+import { globalDescriptionFontSize } from '../../config/uiConfig';
+import React from 'react';
+
+interface SimpleRadioProps {
+  onChange: () => void;
+  fieldName: string;
+  value: any;
+  title: string;
+  description?: string;
+}
+
+export default function SimpleRadio({
+  onChange,
+  fieldName,
+  value,
+  title,
+  description
+}: SimpleRadioProps) {
+  return (
+    <Box>
+      <Stack
+        direction={'row'}
+        sx={{ mt: 2, mb: 1, cursor: 'pointer' }}
+        onClick={onChange}
+        alignItems={'center'}
+        spacing={1}
+      >
+        <Field
+          type="radio"
+          name={fieldName}
+          value={value}
+          onChange={onChange}
+        />
+        <Typography>{title}</Typography>
+      </Stack>
+      {description && (
+        <Typography ml={2} fontSize={globalDescriptionFontSize}>
+          {description}
+        </Typography>
+      )}
+    </Box>
+  );
+}
diff --git a/src/components/options/ToolOptionGroups.tsx b/src/components/options/ToolOptionGroups.tsx
index ed7f465..a2abd8a 100644
--- a/src/components/options/ToolOptionGroups.tsx
+++ b/src/components/options/ToolOptionGroups.tsx
@@ -11,7 +11,9 @@ export default function ToolOptionGroups({
     <Stack direction={'row'} spacing={2}>
       {groups.map((group) => (
         <Box key={group.title}>
-          <Typography fontSize={22}>{group.title}</Typography>
+          <Typography mb={1} fontSize={22}>
+            {group.title}
+          </Typography>
           {group.component}
         </Box>
       ))}
diff --git a/src/config/uiConfig.ts b/src/config/uiConfig.ts
index 5ec7d7b..a9455c0 100644
--- a/src/config/uiConfig.ts
+++ b/src/config/uiConfig.ts
@@ -1,2 +1,2 @@
 export const globalInputHeight = 300;
-export const descriptionFontSize = 12;
+export const globalDescriptionFontSize = 12;
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index beb5f81..9abf18c 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -26,7 +26,7 @@ const exampleTools: { label: string; url: string }[] = [
   { label: 'Find and replace text', url: '' },
   { label: 'Convert emoji to image', url: '' },
   { label: 'Split a string', url: '/string/split' },
-  { label: 'Calculate number sum', url: '' },
+  { label: 'Calculate number sum', url: '/number/sum' },
   { label: 'Pixelate an image', url: '' }
 ];
 export default function Home() {
diff --git a/src/pages/number/index.ts b/src/pages/number/index.ts
new file mode 100644
index 0000000..5bead17
--- /dev/null
+++ b/src/pages/number/index.ts
@@ -0,0 +1,3 @@
+import { tool as numberSum } from './sum/meta';
+
+export const numberTools = [numberSum];
diff --git a/src/pages/number/sum/index.tsx b/src/pages/number/sum/index.tsx
new file mode 100644
index 0000000..ff5ef96
--- /dev/null
+++ b/src/pages/number/sum/index.tsx
@@ -0,0 +1,157 @@
+import { Box, Stack } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import React, { useContext, useEffect, useState } from 'react';
+import ToolTextInput from '../../../components/input/ToolTextInput';
+import ToolTextResult from '../../../components/result/ToolTextResult';
+import { Formik, useFormikContext } from 'formik';
+import * as Yup from 'yup';
+import ToolOptions from '../../../components/options/ToolOptions';
+import { compute, NumberExtractionType } from './service';
+import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
+import RadioWithTextField from '../../../components/options/RadioWithTextField';
+import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
+import SimpleRadio from '../../../components/options/SimpleRadio';
+import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
+
+const initialValues = {
+  extractionType: 'smart' as NumberExtractionType,
+  separator: '\\n',
+  printRunningSum: false
+};
+const extractionTypes: {
+  title: string;
+  description: string;
+  type: NumberExtractionType;
+  withTextField: boolean;
+  textValueAccessor?: keyof typeof initialValues;
+}[] = [
+  {
+    title: 'Smart sum',
+    description: 'Auto detect numbers in the input.',
+    type: 'smart',
+    withTextField: false
+  },
+  {
+    title: 'Number Delimiter',
+    type: 'delimiter',
+    description:
+      'Input SeparatorCustomize the number separator here. (By default a line break.)',
+    withTextField: true,
+    textValueAccessor: 'separator'
+  }
+];
+
+export default function SplitText() {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+  // const formRef = useRef<FormikProps<typeof initialValues>>(null);
+  const { showSnackBar } = useContext(CustomSnackBarContext);
+
+  const FormikListenerComponent = () => {
+    const { values } = useFormikContext<typeof initialValues>();
+
+    useEffect(() => {
+      try {
+        const { extractionType, printRunningSum, separator } = values;
+
+        setResult(compute(input, extractionType, printRunningSum, separator));
+      } catch (exception: unknown) {
+        if (exception instanceof Error)
+          showSnackBar(exception.message, 'error');
+      }
+    }, [values, input]);
+
+    return null; // This component doesn't render anything
+  };
+  const validationSchema = Yup.object({
+    // splitSeparator: Yup.string().required('The separator is required')
+  });
+
+  return (
+    <Box>
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <ToolTextInput value={input} onChange={setInput} />
+        </Grid>
+        <Grid item xs={6}>
+          <ToolTextResult title={'Text pieces'} value={result} />
+        </Grid>
+      </Grid>
+      <ToolOptions>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={() => {}}
+        >
+          {({ setFieldValue, values }) => (
+            <Stack direction={'row'} spacing={2}>
+              <FormikListenerComponent />
+              <ToolOptionGroups
+                groups={[
+                  {
+                    title: 'Number extraction',
+                    component: extractionTypes.map(
+                      ({
+                        title,
+                        description,
+                        type,
+                        withTextField,
+                        textValueAccessor
+                      }) =>
+                        withTextField ? (
+                          <RadioWithTextField
+                            key={type}
+                            radioValue={type}
+                            title={title}
+                            fieldName={'extractionType'}
+                            description={description}
+                            value={
+                              textValueAccessor
+                                ? values[textValueAccessor].toString()
+                                : ''
+                            }
+                            onRadioChange={(type) =>
+                              setFieldValue('extractionType', type)
+                            }
+                            onTextChange={(val) =>
+                              setFieldValue(textValueAccessor ?? '', val)
+                            }
+                          />
+                        ) : (
+                          <SimpleRadio
+                            key={title}
+                            onChange={() =>
+                              setFieldValue('extractionType', type)
+                            }
+                            fieldName={'extractionType'}
+                            value={values.extractionType}
+                            description={description}
+                            title={title}
+                          />
+                        )
+                    )
+                  },
+                  {
+                    title: 'Running Sum',
+                    component: (
+                      <CheckboxWithDesc
+                        title={'Print Running Sum'}
+                        description={
+                          "Display the sum as it's calculated step by step."
+                        }
+                        checked={values.printRunningSum}
+                        onChange={(value) =>
+                          setFieldValue('printRunningSum', value)
+                        }
+                      />
+                    )
+                  }
+                ]}
+              />
+            </Stack>
+          )}
+        </Formik>
+      </ToolOptions>
+    </Box>
+  );
+}
diff --git a/src/pages/number/sum/meta.ts b/src/pages/number/sum/meta.ts
new file mode 100644
index 0000000..ffc8520
--- /dev/null
+++ b/src/pages/number/sum/meta.ts
@@ -0,0 +1,13 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+// import image from '@assets/text.png';
+
+export const tool = defineTool('number', {
+  name: 'Number Sum Calculator',
+  path: 'sum',
+  // image,
+  description:
+    'Quickly calculate the sum of numbers in your browser. To get your sum, just enter your list of numbers in the input field, adjust the separator between the numbers in the options below, and this utility will add up all these numbers.',
+  keywords: ['sum'],
+  component: lazy(() => import('./index'))
+});
diff --git a/src/pages/number/sum/service.ts b/src/pages/number/sum/service.ts
new file mode 100644
index 0000000..4a013b5
--- /dev/null
+++ b/src/pages/number/sum/service.ts
@@ -0,0 +1,29 @@
+export type NumberExtractionType = 'smart' | 'delimiter';
+
+function getAllNumbers(text: string): number[] {
+  const regex = /\d+/g;
+  const matches = text.match(regex);
+  return matches ? matches.map(Number) : [];
+}
+
+export const compute = (
+  input: string,
+  extractionType: NumberExtractionType,
+  printRunningSum: boolean,
+  separator: string
+) => {
+  let numbers: number[] = [];
+  if (extractionType === 'smart') {
+    numbers = getAllNumbers(input);
+  } else {
+    const parts = input.split(separator);
+    // Filter out and convert parts that are numbers
+    numbers = parts
+      .filter((part) => !isNaN(Number(part)) && part.trim() !== '')
+      .map(Number);
+  }
+  return numbers.reduce(
+    (previousValue, currentValue) => previousValue + currentValue,
+    0
+  );
+};
diff --git a/src/pages/number/sum/sum.service.test.ts b/src/pages/number/sum/sum.service.test.ts
new file mode 100644
index 0000000..c18748e
--- /dev/null
+++ b/src/pages/number/sum/sum.service.test.ts
@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './service';
+//
+// describe('sum', () => {
+//
+// })
\ No newline at end of file
diff --git a/src/pages/string/split/index.tsx b/src/pages/string/split/index.tsx
index 8664495..8f7ccfd 100644
--- a/src/pages/string/split/index.tsx
+++ b/src/pages/string/split/index.tsx
@@ -151,12 +151,12 @@ export default function SplitText() {
                       ({ title, description, type }) => (
                         <RadioWithTextField
                           key={type}
-                          type={type}
+                          radioValue={type}
                           title={title}
                           fieldName={'splitSeparatorType'}
                           description={description}
                           value={values[`${type}Value`]}
-                          onTypeChange={(type) =>
+                          onRadioChange={(type) =>
                             setFieldValue('splitSeparatorType', type)
                           }
                           onTextChange={(val) =>
diff --git a/src/pages/string/to-morse/meta.ts b/src/pages/string/to-morse/meta.ts
index cc7c51e..80b2b4d 100644
--- a/src/pages/string/to-morse/meta.ts
+++ b/src/pages/string/to-morse/meta.ts
@@ -6,7 +6,8 @@ export const tool = defineTool('string', {
   name: 'String To morse',
   path: 'to-morse',
   // image,
-  description: '',
+  description:
+    "World's simplest browser-based utility for converting text to Morse code. Load your text in the input form on the left and you'll instantly get Morse code in the output area. Powerful, free, and fast. Load text – get Morse code.",
   keywords: ['to', 'morse'],
   component: lazy(() => import('./index'))
 });
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 2f5e19b..f460aa9 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -2,8 +2,13 @@ import { stringTools } from '../pages/string';
 import { imageTools } from '../pages/image';
 import { DefinedTool } from './defineTool';
 import { capitalizeFirstLetter } from '../utils/string';
+import { numberTools } from '../pages/number';
 
-export const tools: DefinedTool[] = [...imageTools, ...stringTools];
+export const tools: DefinedTool[] = [
+  ...imageTools,
+  ...stringTools,
+  ...numberTools
+];
 const categoriesDescriptions: { type: string; value: string }[] = [
   {
     type: 'string',
@@ -14,6 +19,11 @@ const categoriesDescriptions: { type: string; value: string }[] = [
     type: 'png',
     value:
       'Tools for working with PNG images – convert PNGs to JPGs, create transparent PNGs, change PNG colors, crop, rotate, resize PNGs, and much more.'
+  },
+  {
+    type: 'number',
+    value:
+      'Tools for working with numbers – generate number sequences, convert numbers to words and words to numbers, sort, round, factor numbers, and much more.'
   }
 ];
 export const filterTools = (

From 4d1ba985926acf92f78a7ee7ac1420deea482212 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 03:13:24 +0100
Subject: [PATCH 14/20] fix: compilation

---
 .idea/workspace.xml             | 44 +++++++++++----------------------
 src/pages/number/sum/service.ts |  9 +++----
 2 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 4a6ed24..ee21498 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,24 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: string to morse">
-      <change afterPath="$PROJECT_DIR$/src/components/options/SimpleRadio.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/number/index.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/number/sum/meta.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/number/sum/service.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/number/sum/sum.service.test.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.eslintrc" beforeDir="false" afterPath="$PROJECT_DIR$/.eslintrc" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/RadioWithTextField.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/RadioWithTextField.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/config/uiConfig.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: sum numbers init">
+      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/service.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -191,15 +175,7 @@
       <workItem from="1719166718305" duration="1783000" />
       <workItem from="1719168519203" duration="17675000" />
       <workItem from="1719197816332" duration="1453000" />
-      <workItem from="1719273044735" duration="8300000" />
-    </task>
-    <task id="LOCAL-00002" summary="feat: initial commit">
-      <option name="closed" value="true" />
-      <created>1718820618078</created>
-      <option name="number" value="00002" />
-      <option name="presentableId" value="LOCAL-00002" />
-      <option name="project" value="LOCAL" />
-      <updated>1718820618078</updated>
+      <workItem from="1719273044735" duration="8486000" />
     </task>
     <task id="LOCAL-00003" summary="feat: initial commit">
       <option name="closed" value="true" />
@@ -585,7 +561,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719277679969</updated>
     </task>
-    <option name="localTasksCounter" value="51" />
+    <task id="LOCAL-00051" summary="feat: sum numbers init">
+      <option name="closed" value="true" />
+      <created>1719281510362</created>
+      <option name="number" value="00051" />
+      <option name="presentableId" value="LOCAL-00051" />
+      <option name="project" value="LOCAL" />
+      <updated>1719281510362</updated>
+    </task>
+    <option name="localTasksCounter" value="52" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -606,7 +590,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: idea config" />
     <MESSAGE value="feat: react helmet" />
     <MESSAGE value="feat: tools normalized" />
     <MESSAGE value="feat: search tools" />
@@ -631,7 +614,8 @@
     <MESSAGE value="chore: ResultFooter" />
     <MESSAGE value="feat: change color in png finished" />
     <MESSAGE value="feat: string to morse" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: string to morse" />
+    <MESSAGE value="feat: sum numbers init" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: sum numbers init" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/number/sum/service.ts b/src/pages/number/sum/service.ts
index 4a013b5..21258b0 100644
--- a/src/pages/number/sum/service.ts
+++ b/src/pages/number/sum/service.ts
@@ -11,7 +11,7 @@ export const compute = (
   extractionType: NumberExtractionType,
   printRunningSum: boolean,
   separator: string
-) => {
+): string => {
   let numbers: number[] = [];
   if (extractionType === 'smart') {
     numbers = getAllNumbers(input);
@@ -22,8 +22,7 @@ export const compute = (
       .filter((part) => !isNaN(Number(part)) && part.trim() !== '')
       .map(Number);
   }
-  return numbers.reduce(
-    (previousValue, currentValue) => previousValue + currentValue,
-    0
-  );
+  return numbers
+    .reduce((previousValue, currentValue) => previousValue + currentValue, 0)
+    .toString();
 };

From aa64f04d69fbabda212ec5b413256593dd0042be Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 03:20:07 +0100
Subject: [PATCH 15/20] chore: printRunningSum

---
 .idea/workspace.xml             | 27 ++++++++++++++-------------
 src/pages/number/sum/service.ts | 15 ++++++++++++---
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index ee21498..26f368c 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: sum numbers init">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: compilation">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/number/sum/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/service.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -175,15 +176,7 @@
       <workItem from="1719166718305" duration="1783000" />
       <workItem from="1719168519203" duration="17675000" />
       <workItem from="1719197816332" duration="1453000" />
-      <workItem from="1719273044735" duration="8486000" />
-    </task>
-    <task id="LOCAL-00003" summary="feat: initial commit">
-      <option name="closed" value="true" />
-      <created>1718821853210</created>
-      <option name="number" value="00003" />
-      <option name="presentableId" value="LOCAL-00003" />
-      <option name="project" value="LOCAL" />
-      <updated>1718821853210</updated>
+      <workItem from="1719273044735" duration="8860000" />
     </task>
     <task id="LOCAL-00004" summary="feat: example tools">
       <option name="closed" value="true" />
@@ -569,7 +562,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719281510362</updated>
     </task>
-    <option name="localTasksCounter" value="52" />
+    <task id="LOCAL-00052" summary="fix: compilation">
+      <option name="closed" value="true" />
+      <created>1719281605998</created>
+      <option name="number" value="00052" />
+      <option name="presentableId" value="LOCAL-00052" />
+      <option name="project" value="LOCAL" />
+      <updated>1719281605999</updated>
+    </task>
+    <option name="localTasksCounter" value="53" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -590,7 +591,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: react helmet" />
     <MESSAGE value="feat: tools normalized" />
     <MESSAGE value="feat: search tools" />
     <MESSAGE value="fix: deploy message" />
@@ -615,7 +615,8 @@
     <MESSAGE value="feat: change color in png finished" />
     <MESSAGE value="feat: string to morse" />
     <MESSAGE value="feat: sum numbers init" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: sum numbers init" />
+    <MESSAGE value="fix: compilation" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: compilation" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/number/sum/service.ts b/src/pages/number/sum/service.ts
index 21258b0..19cd968 100644
--- a/src/pages/number/sum/service.ts
+++ b/src/pages/number/sum/service.ts
@@ -22,7 +22,16 @@ export const compute = (
       .filter((part) => !isNaN(Number(part)) && part.trim() !== '')
       .map(Number);
   }
-  return numbers
-    .reduce((previousValue, currentValue) => previousValue + currentValue, 0)
-    .toString();
+  if (printRunningSum) {
+    let result: string = '';
+    let sum: number = 0;
+    for (const i of numbers) {
+      sum = sum + i;
+      result = result + sum + '\n';
+    }
+    return result;
+  } else
+    return numbers
+      .reduce((previousValue, currentValue) => previousValue + currentValue, 0)
+      .toString();
 };

From 01e0b04c8a724ad99193b0d4aea72f91e16ef6ec Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 03:22:10 +0100
Subject: [PATCH 16/20] chore: sum tests

---
 .idea/workspace.xml                      | 28 +++++-----
 src/pages/number/sum/sum.service.test.ts | 70 ++++++++++++++++++++++--
 2 files changed, 78 insertions(+), 20 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 26f368c..f002281 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: compilation">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: printRunningSum">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/sum.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/sum.service.test.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -176,15 +176,7 @@
       <workItem from="1719166718305" duration="1783000" />
       <workItem from="1719168519203" duration="17675000" />
       <workItem from="1719197816332" duration="1453000" />
-      <workItem from="1719273044735" duration="8860000" />
-    </task>
-    <task id="LOCAL-00004" summary="feat: example tools">
-      <option name="closed" value="true" />
-      <created>1718822309352</created>
-      <option name="number" value="00004" />
-      <option name="presentableId" value="LOCAL-00004" />
-      <option name="project" value="LOCAL" />
-      <updated>1718822309352</updated>
+      <workItem from="1719273044735" duration="9001000" />
     </task>
     <task id="LOCAL-00005" summary="feat: Split string">
       <option name="closed" value="true" />
@@ -570,7 +562,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719281605999</updated>
     </task>
-    <option name="localTasksCounter" value="53" />
+    <task id="LOCAL-00053" summary="chore: printRunningSum">
+      <option name="closed" value="true" />
+      <created>1719282009150</created>
+      <option name="number" value="00053" />
+      <option name="presentableId" value="LOCAL-00053" />
+      <option name="project" value="LOCAL" />
+      <updated>1719282009150</updated>
+    </task>
+    <option name="localTasksCounter" value="54" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -591,7 +591,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: tools normalized" />
     <MESSAGE value="feat: search tools" />
     <MESSAGE value="fix: deploy message" />
     <MESSAGE value="chore: tools by category" />
@@ -616,7 +615,8 @@
     <MESSAGE value="feat: string to morse" />
     <MESSAGE value="feat: sum numbers init" />
     <MESSAGE value="fix: compilation" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: compilation" />
+    <MESSAGE value="chore: printRunningSum" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: printRunningSum" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/number/sum/sum.service.test.ts b/src/pages/number/sum/sum.service.test.ts
index c18748e..1a3b21b 100644
--- a/src/pages/number/sum/sum.service.test.ts
+++ b/src/pages/number/sum/sum.service.test.ts
@@ -1,6 +1,64 @@
-import { expect, describe, it } from 'vitest';
-// import { } from './service';
-//
-// describe('sum', () => {
-//
-// })
\ No newline at end of file
+import { describe, it, expect } from 'vitest';
+import { compute } from './service';
+
+describe('compute function', () => {
+  it('should correctly sum numbers in smart extraction mode', () => {
+    const input = 'The 2 cats have 4 and 7 kittens';
+    const result = compute(input, 'smart', false, ',');
+    expect(result).toBe('13');
+  });
+
+  it('should correctly sum numbers with custom delimiter', () => {
+    const input = '2,4,7';
+    const result = compute(input, 'delimiter', false, ',');
+    expect(result).toBe('13');
+  });
+
+  it('should return running sum in smart extraction mode', () => {
+    const input = 'The 2 cats have 4 and 7 kittens';
+    const result = compute(input, 'smart', true, ',');
+    expect(result).toBe('2\n6\n13\n');
+  });
+
+  it('should return running sum with custom delimiter', () => {
+    const input = '2,4,7';
+    const result = compute(input, 'delimiter', true, ',');
+    expect(result).toBe('2\n6\n13\n');
+  });
+
+  it('should handle empty input gracefully in smart mode', () => {
+    const input = '';
+    const result = compute(input, 'smart', false, ',');
+    expect(result).toBe('0');
+  });
+
+  it('should handle empty input gracefully in delimiter mode', () => {
+    const input = '';
+    const result = compute(input, 'delimiter', false, ',');
+    expect(result).toBe('0');
+  });
+
+  it('should handle input with no numbers in smart mode', () => {
+    const input = 'There are no numbers here';
+    const result = compute(input, 'smart', false, ',');
+    expect(result).toBe('0');
+  });
+
+  it('should handle input with no numbers in delimiter mode', () => {
+    const input = 'a,b,c';
+    const result = compute(input, 'delimiter', false, ',');
+    expect(result).toBe('0');
+  });
+
+  it('should ignore non-numeric parts in delimiter mode', () => {
+    const input = '2,a,4,b,7';
+    const result = compute(input, 'delimiter', false, ',');
+    expect(result).toBe('13');
+  });
+
+  it('should handle different separators', () => {
+    const input = '2;4;7';
+    const result = compute(input, 'delimiter', false, ';');
+    expect(result).toBe('13');
+  });
+});

From 3d8110b05e1b534f6200629284b892f980ddb413 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 03:38:40 +0100
Subject: [PATCH 17/20] fix: readme

---
 .idea/workspace.xml    | 27 +++++++++++++++------------
 Readme.md => README.md |  4 ++--
 2 files changed, 17 insertions(+), 14 deletions(-)
 rename Readme.md => README.md (96%)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f002281..1067e7d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -90,7 +90,20 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\tools" />
     </key>
   </component>
-  <component name="RunManager" selected="Vitest.compute function">
+  <component name="RunManager" selected="Vitest.compute function (1)">
+    <configuration name="compute function (1)" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
+      <node-interpreter value="project" />
+      <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
+      <working-dir value="$PROJECT_DIR$" />
+      <vitest-options value="--run" />
+      <envs />
+      <scope-kind value="SUITE" />
+      <test-file value="$PROJECT_DIR$/src/pages/number/sum/sum.service.test.ts" />
+      <test-names>
+        <test-name value="compute function" />
+      </test-names>
+      <method v="2" />
+    </configuration>
     <configuration name="compute function" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
@@ -114,16 +127,6 @@
       <envs />
       <method v="2" />
     </configuration>
-    <configuration name="prebuild" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
-      <package-json value="$PROJECT_DIR$/package.json" />
-      <command value="run" />
-      <scripts>
-        <script value="prebuild" />
-      </scripts>
-      <node-interpreter value="project" />
-      <envs />
-      <method v="2" />
-    </configuration>
     <configuration name="script:create:tool" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -146,11 +149,11 @@
     </configuration>
     <recent_temporary>
       <list>
+        <item itemvalue="Vitest.compute function (1)" />
         <item itemvalue="Vitest.compute function" />
         <item itemvalue="npm.dev" />
         <item itemvalue="npm.test" />
         <item itemvalue="npm.script:create:tool" />
-        <item itemvalue="npm.prebuild" />
       </list>
     </recent_temporary>
   </component>
diff --git a/Readme.md b/README.md
similarity index 96%
rename from Readme.md
rename to README.md
index 17347b3..1d6b1b4 100644
--- a/Readme.md
+++ b/README.md
@@ -7,7 +7,7 @@ all available for free and open for community contributions. Please don't forget
 ## Table of Contents
 
 - [Features](#features)
-- [Installation](#installation)
+- [Contribute](#contribute)
 - [License](#license)
 - [Contact](#contact)
 
@@ -54,7 +54,7 @@ npm run script:create:tool my-tool-name folder1/folder2
 
 Use `folder1\folder2` on Windows
 
-## Contributors
+### Contributors
 
 <a href="https://github.com/iib0011/omni-tools/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=iib0011/omni-tools" />

From c49d18cac3913e2fb5d368bdfc33316bb954460e Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 07:15:42 +0100
Subject: [PATCH 18/20] refactor: tool input and result

---
 .idea/workspace.xml                           | 120 ++++++++++--------
 src/components/ToolInputAndResult.tsx         |  21 +++
 src/components/options/ToolOptionGroups.tsx   |   7 +-
 .../image/png/change-colors-in-png/index.tsx  |  69 +++++-----
 src/pages/number/sum/index.tsx                |  13 +-
 src/pages/string/join/index.tsx               |  13 +-
 src/pages/string/split/index.tsx              |  13 +-
 src/pages/string/to-morse/index.tsx           |  13 +-
 8 files changed, 150 insertions(+), 119 deletions(-)
 create mode 100644 src/components/ToolInputAndResult.tsx

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1067e7d..4993e59 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,15 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: printRunningSum">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: readme">
+      <change afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/sum.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/sum.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -35,38 +41,39 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ASKED_ADD_EXTERNAL_FILES": "true",
-    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "Vitest.compute function.executor": "Run",
-    "Vitest.mergeText.executor": "Run",
-    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
-    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
-    "git-widget-placeholder": "main",
-    "ignore.virus.scanning.warn.message": "true",
-    "kotlin-language-version-configured": "true",
-    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "npm.dev.executor": "Run",
-    "npm.prebuild.executor": "Run",
-    "npm.script:create:tool.executor": "Run",
-    "npm.test.executor": "Run",
-    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
-    "project.structure.last.edited": "Problems",
-    "project.structure.proportion": "0.0",
-    "project.structure.side.proportion": "0.2",
-    "settings.editor.selected.configurable": "settings.typescriptcompiler",
-    "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/src/assets&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test.executor&quot;: &quot;Run&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
+    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
+    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -90,7 +97,7 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\tools" />
     </key>
   </component>
-  <component name="RunManager" selected="Vitest.compute function (1)">
+  <component name="RunManager" selected="npm.dev">
     <configuration name="compute function (1)" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
@@ -149,9 +156,9 @@
     </configuration>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.dev" />
         <item itemvalue="Vitest.compute function (1)" />
         <item itemvalue="Vitest.compute function" />
-        <item itemvalue="npm.dev" />
         <item itemvalue="npm.test" />
         <item itemvalue="npm.script:create:tool" />
       </list>
@@ -179,23 +186,8 @@
       <workItem from="1719166718305" duration="1783000" />
       <workItem from="1719168519203" duration="17675000" />
       <workItem from="1719197816332" duration="1453000" />
-      <workItem from="1719273044735" duration="9001000" />
-    </task>
-    <task id="LOCAL-00005" summary="feat: Split string">
-      <option name="closed" value="true" />
-      <created>1718828318468</created>
-      <option name="number" value="00005" />
-      <option name="presentableId" value="LOCAL-00005" />
-      <option name="project" value="LOCAL" />
-      <updated>1718828318468</updated>
-    </task>
-    <task id="LOCAL-00006" summary="fix: netlify">
-      <option name="closed" value="true" />
-      <created>1718831745853</created>
-      <option name="number" value="00006" />
-      <option name="presentableId" value="LOCAL-00006" />
-      <option name="project" value="LOCAL" />
-      <updated>1718831745853</updated>
+      <workItem from="1719273044735" duration="9847000" />
+      <workItem from="1719294110005" duration="1967000" />
     </task>
     <task id="LOCAL-00007" summary="fix: netlify">
       <option name="closed" value="true" />
@@ -573,7 +565,23 @@
       <option name="project" value="LOCAL" />
       <updated>1719282009150</updated>
     </task>
-    <option name="localTasksCounter" value="54" />
+    <task id="LOCAL-00054" summary="chore: sum tests">
+      <option name="closed" value="true" />
+      <created>1719282131977</created>
+      <option name="number" value="00054" />
+      <option name="presentableId" value="LOCAL-00054" />
+      <option name="project" value="LOCAL" />
+      <updated>1719282131977</updated>
+    </task>
+    <task id="LOCAL-00055" summary="fix: readme">
+      <option name="closed" value="true" />
+      <created>1719283122691</created>
+      <option name="number" value="00055" />
+      <option name="presentableId" value="LOCAL-00055" />
+      <option name="project" value="LOCAL" />
+      <updated>1719283122691</updated>
+    </task>
+    <option name="localTasksCounter" value="56" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -594,7 +602,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: search tools" />
     <MESSAGE value="fix: deploy message" />
     <MESSAGE value="chore: tools by category" />
     <MESSAGE value="feat: copy and import file" />
@@ -609,7 +616,6 @@
     <MESSAGE value="fix: build" />
     <MESSAGE value="chore: CODEOWNERS" />
     <MESSAGE value="ci: fix" />
-    <MESSAGE value="fix: readme" />
     <MESSAGE value="fix: create-tool.mjs" />
     <MESSAGE value="feat: change colors in png init" />
     <MESSAGE value="feat: change colors in png" />
@@ -619,7 +625,9 @@
     <MESSAGE value="feat: sum numbers init" />
     <MESSAGE value="fix: compilation" />
     <MESSAGE value="chore: printRunningSum" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: printRunningSum" />
+    <MESSAGE value="chore: sum tests" />
+    <MESSAGE value="fix: readme" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: readme" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/ToolInputAndResult.tsx b/src/components/ToolInputAndResult.tsx
new file mode 100644
index 0000000..b34999c
--- /dev/null
+++ b/src/components/ToolInputAndResult.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import Grid from '@mui/material/Grid';
+
+export default function ToolInputAndResult({
+  input,
+  result
+}: {
+  input: ReactNode;
+  result: ReactNode;
+}) {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={6}>
+        {input}
+      </Grid>
+      <Grid item xs={6}>
+        {result}
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/src/components/options/ToolOptionGroups.tsx b/src/components/options/ToolOptionGroups.tsx
index a2abd8a..76c48f9 100644
--- a/src/components/options/ToolOptionGroups.tsx
+++ b/src/components/options/ToolOptionGroups.tsx
@@ -2,10 +2,15 @@ import Typography from '@mui/material/Typography';
 import React, { ReactNode } from 'react';
 import { Box, Stack } from '@mui/material';
 
+interface ToolOptionGroup {
+  title: string;
+  component: ReactNode;
+}
+
 export default function ToolOptionGroups({
   groups
 }: {
-  groups: { title: string; component: ReactNode }[];
+  groups: ToolOptionGroup[];
 }) {
   return (
     <Stack direction={'row'} spacing={2}>
diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
index 99a406d..621a259 100644
--- a/src/pages/image/png/change-colors-in-png/index.tsx
+++ b/src/pages/image/png/change-colors-in-png/index.tsx
@@ -1,15 +1,15 @@
-import { Box, Stack } from '@mui/material';
+import { Box } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import * as Yup from 'yup';
-import Grid from '@mui/material/Grid';
 import ToolFileInput from '../../../../components/input/ToolFileInput';
 import ToolFileResult from '../../../../components/result/ToolFileResult';
 import ToolOptions from '../../../../components/options/ToolOptions';
-import Typography from '@mui/material/Typography';
 import { Formik, useFormikContext } from 'formik';
 import ColorSelector from '../../../../components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
+import ToolInputAndResult from '../../../../components/ToolInputAndResult';
+import ToolOptionGroups from '../../../../components/options/ToolOptionGroups';
 
 const initialValues = {
   fromColor: 'white',
@@ -105,23 +105,23 @@ export default function ChangeColorsInPng() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
+      <ToolInputAndResult
+        input={
           <ToolFileInput
             value={input}
             onChange={setInput}
             accept={['image/png']}
             title={'Input PNG'}
           />
-        </Grid>
-        <Grid item xs={6}>
+        }
+        result={
           <ToolFileResult
             title={'Output PNG with new colors'}
             value={result}
             extension={'png'}
           />
-        </Grid>
-      </Grid>
+        }
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}
@@ -129,30 +129,37 @@ export default function ChangeColorsInPng() {
           onSubmit={() => {}}
         >
           {({ setFieldValue, values }) => (
-            <Stack direction={'row'} spacing={2}>
+            <Box>
               {input && <FormikListenerComponent input={input} />}
-              <Box>
-                <Typography fontSize={22}>From color and to color</Typography>
-                <ColorSelector
-                  value={values.fromColor}
-                  onChange={(val) => setFieldValue('fromColor', val)}
-                  description={'Replace this color (from color)'}
-                />
-                <ColorSelector
-                  value={values.toColor}
-                  onChange={(val) => setFieldValue('toColor', val)}
-                  description={'With this color (to color)'}
-                />
-                <TextFieldWithDesc
-                  value={values.similarity}
-                  onChange={(val) => setFieldValue('similarity', val)}
-                  description={
-                    'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
+              <ToolOptionGroups
+                groups={[
+                  {
+                    title: 'From color and to color',
+                    component: (
+                      <Box>
+                        <ColorSelector
+                          value={values.fromColor}
+                          onChange={(val) => setFieldValue('fromColor', val)}
+                          description={'Replace this color (from color)'}
+                        />
+                        <ColorSelector
+                          value={values.toColor}
+                          onChange={(val) => setFieldValue('toColor', val)}
+                          description={'With this color (to color)'}
+                        />
+                        <TextFieldWithDesc
+                          value={values.similarity}
+                          onChange={(val) => setFieldValue('similarity', val)}
+                          description={
+                            'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
+                          }
+                        />
+                      </Box>
+                    )
                   }
-                />
-              </Box>
-              <Box></Box>
-            </Stack>
+                ]}
+              />
+            </Box>
           )}
         </Formik>
       </ToolOptions>
diff --git a/src/pages/number/sum/index.tsx b/src/pages/number/sum/index.tsx
index ff5ef96..c5c5fd5 100644
--- a/src/pages/number/sum/index.tsx
+++ b/src/pages/number/sum/index.tsx
@@ -12,6 +12,7 @@ import RadioWithTextField from '../../../components/options/RadioWithTextField';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
 import SimpleRadio from '../../../components/options/SimpleRadio';
 import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
   extractionType: 'smart' as NumberExtractionType,
@@ -69,14 +70,10 @@ export default function SplitText() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
-          <ToolTextInput value={input} onChange={setInput} />
-        </Grid>
-        <Grid item xs={6}>
-          <ToolTextResult title={'Text pieces'} value={result} />
-        </Grid>
-      </Grid>
+      <ToolInputAndResult
+        input={<ToolTextInput value={input} onChange={setInput} />}
+        result={<ToolTextResult title={'Total'} value={result} />}
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}
diff --git a/src/pages/string/join/index.tsx b/src/pages/string/join/index.tsx
index cc4778a..a41dcb4 100644
--- a/src/pages/string/join/index.tsx
+++ b/src/pages/string/join/index.tsx
@@ -10,6 +10,7 @@ import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
   joinCharacter: '',
@@ -70,18 +71,16 @@ export default function JoinText() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
+      <ToolInputAndResult
+        input={
           <ToolTextInput
             title={'Text Pieces'}
             value={input}
             onChange={setInput}
           />
-        </Grid>
-        <Grid item xs={6}>
-          <ToolTextResult title={'Joined Text'} value={result} />
-        </Grid>
-      </Grid>
+        }
+        result={<ToolTextResult title={'Joined Text'} value={result} />}
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}
diff --git a/src/pages/string/split/index.tsx b/src/pages/string/split/index.tsx
index 8f7ccfd..ad4f23d 100644
--- a/src/pages/string/split/index.tsx
+++ b/src/pages/string/split/index.tsx
@@ -11,6 +11,7 @@ import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import RadioWithTextField from '../../../components/options/RadioWithTextField';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -126,14 +127,10 @@ export default function SplitText() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
-          <ToolTextInput value={input} onChange={setInput} />
-        </Grid>
-        <Grid item xs={6}>
-          <ToolTextResult title={'Text pieces'} value={result} />
-        </Grid>
-      </Grid>
+      <ToolInputAndResult
+        input={<ToolTextInput value={input} onChange={setInput} />}
+        result={<ToolTextResult title={'Text pieces'} value={result} />}
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}
diff --git a/src/pages/string/to-morse/index.tsx b/src/pages/string/to-morse/index.tsx
index 3f92301..3894e9d 100644
--- a/src/pages/string/to-morse/index.tsx
+++ b/src/pages/string/to-morse/index.tsx
@@ -10,6 +10,7 @@ import { compute } from './service';
 import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
   dotSymbol: '.',
@@ -44,14 +45,10 @@ export default function ToMorse() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
-          <ToolTextInput value={input} onChange={setInput} />
-        </Grid>
-        <Grid item xs={6}>
-          <ToolTextResult title={'Morse code'} value={result} />
-        </Grid>
-      </Grid>
+      <ToolInputAndResult
+        input={<ToolTextInput value={input} onChange={setInput} />}
+        result={<ToolTextResult title={'Morse code'} value={result} />}
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}

From 3da580e3a98223b17e25a84dce854d477ad5335a Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 07:44:36 +0100
Subject: [PATCH 19/20] feat: create transparent png

---
 .idea/workspace.xml                           |  38 ++---
 src/pages/home/index.tsx                      |   2 +-
 .../image/png/create-transparent/index.tsx    | 156 ++++++++++++++++++
 .../image/png/create-transparent/meta.ts      |  13 ++
 .../image/png/create-transparent/service.ts   |   0
 src/pages/image/png/index.ts                  |   3 +-
 src/pages/number/sum/index.tsx                |   1 -
 7 files changed, 191 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/image/png/create-transparent/index.tsx
 create mode 100644 src/pages/image/png/create-transparent/meta.ts
 create mode 100644 src/pages/image/png/create-transparent/service.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 4993e59..7da644a 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,15 +4,15 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: readme">
-      <change afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: tool input and result">
+      <change afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/index.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/service.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/image/png/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/index.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -187,15 +187,7 @@
       <workItem from="1719168519203" duration="17675000" />
       <workItem from="1719197816332" duration="1453000" />
       <workItem from="1719273044735" duration="9847000" />
-      <workItem from="1719294110005" duration="1967000" />
-    </task>
-    <task id="LOCAL-00007" summary="fix: netlify">
-      <option name="closed" value="true" />
-      <created>1718833519062</created>
-      <option name="number" value="00007" />
-      <option name="presentableId" value="LOCAL-00007" />
-      <option name="project" value="LOCAL" />
-      <updated>1718833519062</updated>
+      <workItem from="1719294110005" duration="3709000" />
     </task>
     <task id="LOCAL-00008" summary="fix: index title">
       <option name="closed" value="true" />
@@ -581,7 +573,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719283122691</updated>
     </task>
-    <option name="localTasksCounter" value="56" />
+    <task id="LOCAL-00056" summary="refactor: tool input and result">
+      <option name="closed" value="true" />
+      <created>1719296145698</created>
+      <option name="number" value="00056" />
+      <option name="presentableId" value="LOCAL-00056" />
+      <option name="project" value="LOCAL" />
+      <updated>1719296145699</updated>
+    </task>
+    <option name="localTasksCounter" value="57" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -602,7 +602,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="fix: deploy message" />
     <MESSAGE value="chore: tools by category" />
     <MESSAGE value="feat: copy and import file" />
     <MESSAGE value="refactor: tool options components" />
@@ -627,7 +626,8 @@
     <MESSAGE value="chore: printRunningSum" />
     <MESSAGE value="chore: sum tests" />
     <MESSAGE value="fix: readme" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: readme" />
+    <MESSAGE value="refactor: tool input and result" />
+    <option name="LAST_COMMIT_MESSAGE" value="refactor: tool input and result" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 9abf18c..775f7bd 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -18,7 +18,7 @@ import Button from '@mui/material/Button';
 const exampleTools: { label: string; url: string }[] = [
   {
     label: 'Create a transparent image',
-    url: ''
+    url: '/png/create-transparent'
   },
   { label: 'Convert text to morse code', url: '/string/to-morse' },
   { label: 'Change GIF speed', url: '' },
diff --git a/src/pages/image/png/create-transparent/index.tsx b/src/pages/image/png/create-transparent/index.tsx
new file mode 100644
index 0000000..fd9e3a7
--- /dev/null
+++ b/src/pages/image/png/create-transparent/index.tsx
@@ -0,0 +1,156 @@
+import { Box } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import * as Yup from 'yup';
+import ToolFileInput from '../../../../components/input/ToolFileInput';
+import ToolFileResult from '../../../../components/result/ToolFileResult';
+import ToolOptions from '../../../../components/options/ToolOptions';
+import { Formik, useFormikContext } from 'formik';
+import ColorSelector from '../../../../components/options/ColorSelector';
+import Color from 'color';
+import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
+import ToolInputAndResult from '../../../../components/ToolInputAndResult';
+import ToolOptionGroups from '../../../../components/options/ToolOptionGroups';
+
+const initialValues = {
+  fromColor: 'white',
+  similarity: '10'
+};
+const validationSchema = Yup.object({
+  // splitSeparator: Yup.string().required('The separator is required')
+});
+export default function ChangeColorsInPng() {
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+
+  const FormikListenerComponent = ({ input }: { input: File }) => {
+    const { values } = useFormikContext<typeof initialValues>();
+    const { fromColor, similarity } = values;
+
+    useEffect(() => {
+      let fromRgb: [number, number, number];
+      try {
+        //@ts-ignore
+        fromRgb = Color(fromColor).rgb().array();
+      } catch (err) {
+        return;
+      }
+      const processImage = async (
+        file: File,
+        fromColor: [number, number, number],
+        similarity: number
+      ) => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (ctx == null) return;
+        const img = new Image();
+
+        img.src = URL.createObjectURL(file);
+        await img.decode();
+
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data: Uint8ClampedArray = imageData.data;
+
+        const colorDistance = (
+          c1: [number, number, number],
+          c2: [number, number, number]
+        ) => {
+          return Math.sqrt(
+            Math.pow(c1[0] - c2[0], 2) +
+              Math.pow(c1[1] - c2[1], 2) +
+              Math.pow(c1[2] - c2[2], 2)
+          );
+        };
+        const maxColorDistance = Math.sqrt(
+          Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+        );
+        const similarityThreshold = (similarity / 100) * maxColorDistance;
+
+        for (let i = 0; i < data.length; i += 4) {
+          const currentColor: [number, number, number] = [
+            data[i],
+            data[i + 1],
+            data[i + 2]
+          ];
+          if (colorDistance(currentColor, fromColor) <= similarityThreshold) {
+            data[i + 3] = 0; // Set alpha to 0 (transparent)
+          }
+        }
+
+        ctx.putImageData(imageData, 0, 0);
+
+        canvas.toBlob((blob) => {
+          if (blob) {
+            const newFile = new File([blob], file.name, { type: 'image/png' });
+            setResult(newFile);
+          }
+        }, 'image/png');
+      };
+
+      processImage(input, fromRgb, Number(similarity));
+    }, [input, fromColor]);
+
+    return null;
+  };
+
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolFileInput
+            value={input}
+            onChange={setInput}
+            accept={['image/png']}
+            title={'Input PNG'}
+          />
+        }
+        result={
+          <ToolFileResult
+            title={'Transparent PNG'}
+            value={result}
+            extension={'png'}
+          />
+        }
+      />
+      <ToolOptions>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={() => {}}
+        >
+          {({ setFieldValue, values }) => (
+            <Box>
+              {input && <FormikListenerComponent input={input} />}
+              <ToolOptionGroups
+                groups={[
+                  {
+                    title: 'From color and similarity',
+                    component: (
+                      <Box>
+                        <ColorSelector
+                          value={values.fromColor}
+                          onChange={(val) => setFieldValue('fromColor', val)}
+                          description={'Replace this color (from color)'}
+                        />
+                        <TextFieldWithDesc
+                          value={values.similarity}
+                          onChange={(val) => setFieldValue('similarity', val)}
+                          description={
+                            'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
+                          }
+                        />
+                      </Box>
+                    )
+                  }
+                ]}
+              />
+            </Box>
+          )}
+        </Formik>
+      </ToolOptions>
+    </Box>
+  );
+}
diff --git a/src/pages/image/png/create-transparent/meta.ts b/src/pages/image/png/create-transparent/meta.ts
new file mode 100644
index 0000000..e9cfefa
--- /dev/null
+++ b/src/pages/image/png/create-transparent/meta.ts
@@ -0,0 +1,13 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+// import image from '@assets/text.png';
+
+export const tool = defineTool('png', {
+  name: 'Create transparent PNG',
+  path: 'create-transparent',
+  // image,
+  description:
+    "World's simplest online Portable Network Graphics transparency maker. Just import your PNG image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import a PNG – get a transparent PNG.",
+  keywords: ['create', 'transparent'],
+  component: lazy(() => import('./index'))
+});
diff --git a/src/pages/image/png/create-transparent/service.ts b/src/pages/image/png/create-transparent/service.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/image/png/index.ts b/src/pages/image/png/index.ts
index 1f59860..5cda167 100644
--- a/src/pages/image/png/index.ts
+++ b/src/pages/image/png/index.ts
@@ -1,3 +1,4 @@
+import { tool as pngCreateTransparent } from './create-transparent/meta';
 import { tool as changeColorsInPng } from './change-colors-in-png/meta';
 
-export const pngTools = [changeColorsInPng];
+export const pngTools = [changeColorsInPng, pngCreateTransparent];
diff --git a/src/pages/number/sum/index.tsx b/src/pages/number/sum/index.tsx
index c5c5fd5..4a054f6 100644
--- a/src/pages/number/sum/index.tsx
+++ b/src/pages/number/sum/index.tsx
@@ -1,5 +1,4 @@
 import { Box, Stack } from '@mui/material';
-import Grid from '@mui/material/Grid';
 import React, { useContext, useEffect, useState } from 'react';
 import ToolTextInput from '../../../components/input/ToolTextInput';
 import ToolTextResult from '../../../components/result/ToolTextResult';

From 9f2dd774e72671448ee0ed6abceda90f8d46b824 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Tue, 25 Jun 2024 07:51:39 +0100
Subject: [PATCH 20/20] fix: create transparent png

---
 .idea/workspace.xml                           | 35 ++++++++-----------
 .../image/png/create-transparent/meta.ts      |  4 +--
 .../image/png/create-transparent/service.ts   |  0
 3 files changed, 17 insertions(+), 22 deletions(-)
 delete mode 100644 src/pages/image/png/create-transparent/service.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 7da644a..142bd3f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,15 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: tool input and result">
-      <change afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/index.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/service.ts" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: create transparent png">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/scripts/create-tool.mjs" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/image/png/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/image/png/create-transparent/service.ts" beforeDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -187,15 +182,7 @@
       <workItem from="1719168519203" duration="17675000" />
       <workItem from="1719197816332" duration="1453000" />
       <workItem from="1719273044735" duration="9847000" />
-      <workItem from="1719294110005" duration="3709000" />
-    </task>
-    <task id="LOCAL-00008" summary="fix: index title">
-      <option name="closed" value="true" />
-      <created>1718836910916</created>
-      <option name="number" value="00008" />
-      <option name="presentableId" value="LOCAL-00008" />
-      <option name="project" value="LOCAL" />
-      <updated>1718836910916</updated>
+      <workItem from="1719294110005" duration="3842000" />
     </task>
     <task id="LOCAL-00009" summary="chore: split string tools ui">
       <option name="closed" value="true" />
@@ -581,7 +568,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719296145699</updated>
     </task>
-    <option name="localTasksCounter" value="57" />
+    <task id="LOCAL-00057" summary="feat: create transparent png">
+      <option name="closed" value="true" />
+      <created>1719297880629</created>
+      <option name="number" value="00057" />
+      <option name="presentableId" value="LOCAL-00057" />
+      <option name="project" value="LOCAL" />
+      <updated>1719297880629</updated>
+    </task>
+    <option name="localTasksCounter" value="58" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -602,7 +597,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: tools by category" />
     <MESSAGE value="feat: copy and import file" />
     <MESSAGE value="refactor: tool options components" />
     <MESSAGE value="fix: join text service" />
@@ -627,7 +621,8 @@
     <MESSAGE value="chore: sum tests" />
     <MESSAGE value="fix: readme" />
     <MESSAGE value="refactor: tool input and result" />
-    <option name="LAST_COMMIT_MESSAGE" value="refactor: tool input and result" />
+    <MESSAGE value="feat: create transparent png" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: create transparent png" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/image/png/create-transparent/meta.ts b/src/pages/image/png/create-transparent/meta.ts
index e9cfefa..8362377 100644
--- a/src/pages/image/png/create-transparent/meta.ts
+++ b/src/pages/image/png/create-transparent/meta.ts
@@ -1,11 +1,11 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-// import image from '@assets/text.png';
+import image from '@assets/image.png';
 
 export const tool = defineTool('png', {
   name: 'Create transparent PNG',
   path: 'create-transparent',
-  // image,
+  image,
   description:
     "World's simplest online Portable Network Graphics transparency maker. Just import your PNG image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import a PNG – get a transparent PNG.",
   keywords: ['create', 'transparent'],
diff --git a/src/pages/image/png/create-transparent/service.ts b/src/pages/image/png/create-transparent/service.ts
deleted file mode 100644
index e69de29..0000000