From 6e3804d2c77f2e110c472da90853b48518625fe8 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Wed, 26 Jun 2024 07:47:17 +0100
Subject: [PATCH] refactor: toolOptions

---
 .idea/workspace.xml                           |  36 +--
 src/components/options/ToolOptionGroups.tsx   |   3 +-
 src/components/options/ToolOptions.tsx        |  55 ++++-
 .../image/png/change-colors-in-png/index.tsx  | 216 ++++++++----------
 .../image/png/create-transparent/index.tsx    | 192 +++++++---------
 src/pages/number/sum/index.tsx                | 163 ++++++-------
 src/pages/string/join/index.tsx               |  94 +++-----
 src/pages/string/split/index.tsx              | 147 +++++-------
 src/pages/string/to-morse/index.tsx           |  99 +++-----
 9 files changed, 461 insertions(+), 544 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0c44556..3b6a75e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,16 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: loading screen">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: shuffle tools search">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.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/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.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/create-transparent/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/create-transparent/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" />
@@ -193,15 +200,8 @@
       <workItem from="1719294110005" duration="3842000" />
       <workItem from="1719339559458" duration="303000" />
       <workItem from="1719340295244" duration="772000" />
-      <workItem from="1719363272227" duration="330000" />
-    </task>
-    <task id="LOCAL-00016" summary="ubf jn">
-      <option name="closed" value="true" />
-      <created>1719006829016</created>
-      <option name="number" value="00016" />
-      <option name="presentableId" value="LOCAL-00016" />
-      <option name="project" value="LOCAL" />
-      <updated>1719006829016</updated>
+      <workItem from="1719363272227" duration="390000" />
+      <workItem from="1719379971872" duration="4208000" />
     </task>
     <task id="LOCAL-00017" summary="ubf jn">
       <option name="closed" value="true" />
@@ -587,7 +587,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719360545177</updated>
     </task>
-    <option name="localTasksCounter" value="65" />
+    <task id="LOCAL-00065" summary="chore: shuffle tools search">
+      <option name="closed" value="true" />
+      <created>1719363656541</created>
+      <option name="number" value="00065" />
+      <option name="presentableId" value="LOCAL-00065" />
+      <option name="project" value="LOCAL" />
+      <updated>1719363656541</updated>
+    </task>
+    <option name="localTasksCounter" value="66" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -608,7 +616,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: missing files" />
     <MESSAGE value="fix: create tool" />
     <MESSAGE value="fix: build" />
     <MESSAGE value="chore: CODEOWNERS" />
@@ -633,7 +640,8 @@
     <MESSAGE value="feat: make tool responsive" />
     <MESSAGE value="chore: make tool examples responsive" />
     <MESSAGE value="chore: loading screen" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: loading screen" />
+    <MESSAGE value="chore: shuffle tools search" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: shuffle tools search" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/options/ToolOptionGroups.tsx b/src/components/options/ToolOptionGroups.tsx
index 465adc4..5f1d4a6 100644
--- a/src/components/options/ToolOptionGroups.tsx
+++ b/src/components/options/ToolOptionGroups.tsx
@@ -1,9 +1,8 @@
 import Typography from '@mui/material/Typography';
 import React, { ReactNode } from 'react';
-import { Box, Stack } from '@mui/material';
 import Grid from '@mui/material/Grid';
 
-interface ToolOptionGroup {
+export interface ToolOptionGroup {
   title: string;
   component: ReactNode;
 }
diff --git a/src/components/options/ToolOptions.tsx b/src/components/options/ToolOptions.tsx
index f6c5955..92b0260 100644
--- a/src/components/options/ToolOptions.tsx
+++ b/src/components/options/ToolOptions.tsx
@@ -1,10 +1,44 @@
 import { Box, Stack, useTheme } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import Typography from '@mui/material/Typography';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject, useContext, useEffect } from 'react';
+import { Formik, FormikProps, FormikValues, useFormikContext } from 'formik';
+import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 
-export default function ToolOptions({ children }: { children: ReactNode }) {
+export default function ToolOptions<T extends FormikValues>({
+  children,
+  initialValues,
+  validationSchema,
+  compute,
+  input,
+  getGroups,
+  formRef
+}: {
+  children?: ReactNode;
+  initialValues: T;
+  validationSchema: any | (() => any);
+  compute: (optionsValues: T, input: any) => void;
+  input: any;
+  getGroups: (formikProps: FormikProps<T>) => ToolOptionGroup[];
+  formRef?: RefObject<FormikProps<T>>;
+}) {
   const theme = useTheme();
+  const FormikListenerComponent = () => {
+    const { values } = useFormikContext<typeof initialValues>();
+    const { showSnackBar } = useContext(CustomSnackBarContext);
+
+    useEffect(() => {
+      try {
+        compute(values, input);
+      } catch (exception: unknown) {
+        if (exception instanceof Error)
+          showSnackBar(exception.message, 'error');
+      }
+    }, [values, showSnackBar]);
+
+    return null; // This component doesn't render anything
+  };
   return (
     <Box
       sx={{
@@ -19,7 +53,22 @@ export default function ToolOptions({ children }: { children: ReactNode }) {
         <SettingsIcon />
         <Typography fontSize={22}>Tool options</Typography>
       </Stack>
-      <Box mt={2}>{children}</Box>
+      <Box mt={2}>
+        <Formik
+          innerRef={formRef}
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={() => {}}
+        >
+          {(formikProps) => (
+            <Stack direction={'row'} spacing={2}>
+              <FormikListenerComponent />
+              <ToolOptionGroups groups={getGroups(formikProps)} />
+              {children}
+            </Stack>
+          )}
+        </Formik>
+      </Box>
     </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 621a259..6c83e1d 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,13 @@
 import { Box } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { 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',
@@ -23,86 +21,81 @@ 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, toColor, similarity } = values;
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    const { fromColor, toColor, similarity } = optionsValues;
+    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;
+      const img = new Image();
 
-    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
+      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]
       ) => {
-        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)
+        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 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] = toColor[0]; // Red
-            data[i + 1] = toColor[1]; // Green
-            data[i + 2] = toColor[2]; // 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');
       };
+      const maxColorDistance = Math.sqrt(
+        Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+      );
+      const similarityThreshold = (similarity / 100) * maxColorDistance;
 
-      processImage(input, fromRgb, toRgb, Number(similarity));
-    }, [input, fromColor, toColor]);
+      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] = toColor[0]; // Red
+          data[i + 1] = toColor[1]; // Green
+          data[i + 2] = toColor[2]; // Blue
+        }
+      }
 
-    return null;
+      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, toRgb, Number(similarity));
   };
-
   return (
     <Box>
       <ToolInputAndResult
@@ -122,47 +115,38 @@ export default function ChangeColorsInPng() {
           />
         }
       />
-      <ToolOptions>
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={() => {}}
-        >
-          {({ setFieldValue, values }) => (
-            <Box>
-              {input && <FormikListenerComponent input={input} />}
-              <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>
-                    )
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            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>
-          )}
-        </Formik>
-      </ToolOptions>
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
     </Box>
   );
 }
diff --git a/src/pages/image/png/create-transparent/index.tsx b/src/pages/image/png/create-transparent/index.tsx
index fd9e3a7..726c728 100644
--- a/src/pages/image/png/create-transparent/index.tsx
+++ b/src/pages/image/png/create-transparent/index.tsx
@@ -1,15 +1,13 @@
 import { Box } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React, { 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',
@@ -22,78 +20,73 @@ 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;
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    const { fromColor, similarity } = optionsValues;
 
-    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
+    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]
       ) => {
-        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)
+        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 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');
       };
+      const maxColorDistance = Math.sqrt(
+        Math.pow(255, 2) + Math.pow(255, 2) + Math.pow(255, 2)
+      );
+      const similarityThreshold = (similarity / 100) * maxColorDistance;
 
-      processImage(input, fromRgb, Number(similarity));
-    }, [input, fromColor]);
+      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)
+        }
+      }
 
-    return null;
+      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));
   };
 
   return (
@@ -115,42 +108,33 @@ export default function ChangeColorsInPng() {
           />
         }
       />
-      <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>
-                    )
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            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>
-          )}
-        </Formik>
-      </ToolOptions>
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
     </Box>
   );
 }
diff --git a/src/pages/number/sum/index.tsx b/src/pages/number/sum/index.tsx
index 4a054f6..eff2e54 100644
--- a/src/pages/number/sum/index.tsx
+++ b/src/pages/number/sum/index.tsx
@@ -1,14 +1,11 @@
-import { Box, Stack } from '@mui/material';
-import React, { useContext, useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+import React, { 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';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
@@ -44,25 +41,7 @@ const extractionTypes: {
 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')
   });
@@ -73,81 +52,71 @@ export default function SplitText() {
         input={<ToolTextInput value={input} onChange={setInput} />}
         result={<ToolTextResult title={'Total'} value={result} />}
       />
-      <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)
-                        }
-                      />
-                    )
-                  }
-                ]}
+      <ToolOptions
+        getGroups={({ values, setFieldValue }) => [
+          {
+            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) =>
+                      textValueAccessor
+                        ? setFieldValue(textValueAccessor, val)
+                        : null
+                    }
+                  />
+                ) : (
+                  <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>
+            )
+          }
+        ]}
+        compute={(optionsValues, input) => {
+          const { extractionType, printRunningSum, separator } = optionsValues;
+          setResult(compute(input, extractionType, printRunningSum, separator));
+        }}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
     </Box>
   );
 }
diff --git a/src/pages/string/join/index.tsx b/src/pages/string/join/index.tsx
index 33fa5df..11ba287 100644
--- a/src/pages/string/join/index.tsx
+++ b/src/pages/string/join/index.tsx
@@ -16,6 +16,7 @@ import Info from './Info';
 import Separator from '../../../tools/Separator';
 import AllTools from '../../../components/allTools/AllTools';
 import Examples from '../../../components/examples/Examples';
+import ColorSelector from '../../../components/options/ColorSelector';
 
 const initialValues = {
   joinCharacter: '',
@@ -115,23 +116,11 @@ s
 
 export default function JoinText() {
   const [input, setInput] = useState<string>('');
-  const { showSnackBar } = useContext(CustomSnackBarContext);
   const [result, setResult] = useState<string>('');
 
-  const FormikListenerComponent = ({ input }: { input: string }) => {
-    const { values } = useFormikContext<typeof initialValues>();
-    const { joinCharacter, deleteBlank, deleteTrailing } = values;
-
-    useEffect(() => {
-      try {
-        setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
-      } catch (exception: unknown) {
-        if (exception instanceof Error)
-          showSnackBar(exception.message, 'error');
-      }
-    }, [values, input]);
-
-    return null;
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    const { joinCharacter, deleteBlank, deleteTrailing } = optionsValues;
+    setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
   };
 
   function changeInputResult(input: string, result: string) {
@@ -156,50 +145,39 @@ export default function JoinText() {
         }
         result={<ToolTextResult title={'Joined Text'} value={result} />}
       />
-      <ToolOptions>
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={() => {}}
-        >
-          {({ setFieldValue, values }) => (
-            <Stack direction={'row'} spacing={2}>
-              <FormikListenerComponent input={input} />
-              <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}
-                      />
-                    ))
-                  }
-                ]}
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            title: 'Text Merged Options',
+            component: (
+              <TextFieldWithDesc
+                placeholder={mergeOptions.placeholder}
+                value={values['joinCharacter']}
+                onChange={(value) =>
+                  setFieldValue(mergeOptions.accessor, value)
+                }
+                description={mergeOptions.description}
               />
-            </Stack>
-          )}
-        </Formik>
-      </ToolOptions>
+            )
+          },
+          {
+            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}
+              />
+            ))
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
       <Info
         title="What Is a Text Joiner?"
         description="With this tool you can join parts of the text together. It takes a list of text values, separated by newlines, and merges them together. You can set the character that will be placed between the parts of the combined text. Also, you can ignore all empty lines and remove spaces and tabs at the end of all lines. Textabulous!"
diff --git a/src/pages/string/split/index.tsx b/src/pages/string/split/index.tsx
index ad4f23d..ca2eef5 100644
--- a/src/pages/string/split/index.tsx
+++ b/src/pages/string/split/index.tsx
@@ -12,6 +12,7 @@ import RadioWithTextField from '../../../components/options/RadioWithTextField';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -82,44 +83,31 @@ 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 computeExternal = (optionsValues: typeof initialValues, input: any) => {
+    const {
+      splitSeparatorType,
+      outputSeparator,
+      charBeforeChunk,
+      charAfterChunk,
+      chunksValue,
+      symbolValue,
+      regexValue,
+      lengthValue
+    } = optionsValues;
 
-  const FormikListenerComponent = () => {
-    const { values } = useFormikContext<typeof initialValues>();
-
-    useEffect(() => {
-      try {
-        const {
-          splitSeparatorType,
-          outputSeparator,
-          charBeforeChunk,
-          charAfterChunk,
-          chunksValue,
-          symbolValue,
-          regexValue,
-          lengthValue
-        } = values;
-
-        setResult(
-          compute(
-            splitSeparatorType,
-            input,
-            symbolValue,
-            regexValue,
-            Number(lengthValue),
-            Number(chunksValue),
-            charBeforeChunk,
-            charAfterChunk,
-            outputSeparator
-          )
-        );
-      } catch (exception: unknown) {
-        if (exception instanceof Error)
-          showSnackBar(exception.message, 'error');
-      }
-    }, [values, input]);
-
-    return null; // This component doesn't render anything
+    setResult(
+      compute(
+        splitSeparatorType,
+        input,
+        symbolValue,
+        regexValue,
+        Number(lengthValue),
+        Number(chunksValue),
+        charBeforeChunk,
+        charAfterChunk,
+        outputSeparator
+      )
+    );
   };
   const validationSchema = Yup.object({
     // splitSeparator: Yup.string().required('The separator is required')
@@ -131,57 +119,42 @@ export default function SplitText() {
         input={<ToolTextInput value={input} onChange={setInput} />}
         result={<ToolTextResult title={'Text pieces'} value={result} />}
       />
-      <ToolOptions>
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={() => {}}
-        >
-          {({ setFieldValue, values }) => (
-            <Stack direction={'row'} spacing={2}>
-              <FormikListenerComponent />
-              <ToolOptionGroups
-                groups={[
-                  {
-                    title: 'Split separator options',
-                    component: splitOperators.map(
-                      ({ title, description, type }) => (
-                        <RadioWithTextField
-                          key={type}
-                          radioValue={type}
-                          title={title}
-                          fieldName={'splitSeparatorType'}
-                          description={description}
-                          value={values[`${type}Value`]}
-                          onRadioChange={(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}
-                      />
-                    ))
-                  }
-                ]}
+      <ToolOptions
+        compute={computeExternal}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            title: 'Split separator options',
+            component: splitOperators.map(({ title, description, type }) => (
+              <RadioWithTextField
+                key={type}
+                radioValue={type}
+                title={title}
+                fieldName={'splitSeparatorType'}
+                description={description}
+                value={values[`${type}Value`]}
+                onRadioChange={(type) =>
+                  setFieldValue('splitSeparatorType', type)
+                }
+                onTextChange={(val) => setFieldValue(`${type}Value`, val)}
               />
-            </Stack>
-          )}
-        </Formik>
-      </ToolOptions>
+            ))
+          },
+          {
+            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}
+              />
+            ))
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
     </Box>
   );
 }
diff --git a/src/pages/string/to-morse/index.tsx b/src/pages/string/to-morse/index.tsx
index 3894e9d..c06d1aa 100644
--- a/src/pages/string/to-morse/index.tsx
+++ b/src/pages/string/to-morse/index.tsx
@@ -1,15 +1,11 @@
-import { Box, Stack } from '@mui/material';
-import Grid from '@mui/material/Grid';
-import React, { useContext, useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+import React, { 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';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
@@ -21,23 +17,9 @@ 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 computeOptions = (optionsValues: typeof initialValues, input: any) => {
+    const { dotSymbol, dashSymbol } = optionsValues;
+    setResult(compute(input, dotSymbol, dashSymbol));
   };
   const validationSchema = Yup.object({
     // splitSeparator: Yup.string().required('The separator is required')
@@ -49,47 +31,38 @@ export default function ToMorse() {
         input={<ToolTextInput value={input} onChange={setInput} />}
         result={<ToolTextResult title={'Morse code'} value={result} />}
       />
-      <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)}
-                      />
-                    )
-                  }
-                ]}
+      <ToolOptions
+        compute={computeOptions}
+        getGroups={({ values, setFieldValue }) => [
+          {
+            title: 'Short Signal',
+            component: (
+              <TextFieldWithDesc
+                description={
+                  'Symbol that will correspond to the dot in Morse code.'
+                }
+                value={values.dotSymbol}
+                onChange={(val) => setFieldValue('dotSymbol', val)}
               />
-            </Stack>
-          )}
-        </Formik>
-      </ToolOptions>
+            )
+          },
+          {
+            title: 'Long Signal',
+            component: (
+              <TextFieldWithDesc
+                description={
+                  'Symbol that will correspond to the dash in Morse code.'
+                }
+                value={values.dashSymbol}
+                onChange={(val) => setFieldValue('dashSymbol', val)}
+              />
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
     </Box>
   );
 }