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] 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}