refactor: use of ToolContent.tsx

src/components/ToolContent.tsx

@@ -10,7 +10,7 @@ import ToolExamples, {
 } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
 
-interface ToolContentPropsBase<T> extends ToolComponentProps {
+interface ToolContentPropsBase<T, I> extends ToolComponentProps {
   // Input/Output components
   inputComponent: ReactNode;
   resultComponent: ReactNode;
@@ -20,7 +20,7 @@ interface ToolContentPropsBase<T> extends ToolComponentProps {
   getGroups: GetGroupsType<T>;
 
   // Computation function
-  compute: (optionsValues: T, input: any) => void;
+  compute: (optionsValues: T, input: I) => void;
 
   // Tool info (optional)
   toolInfo?: {
@@ -29,27 +29,29 @@ interface ToolContentPropsBase<T> extends ToolComponentProps {
   };
 
   // Input value to pass to the compute function
-  input: any;
+  input: I;
 
   // Validation schema (optional)
   validationSchema?: any;
 }
 
-interface ToolContentPropsWithExamples<T> extends ToolContentPropsBase<T> {
+interface ToolContentPropsWithExamples<T, I>
+  extends ToolContentPropsBase<T, I> {
   exampleCards: CardExampleType<T>[];
-  setInput: React.Dispatch<React.SetStateAction<string>>;
+  setInput: React.Dispatch<React.SetStateAction<I>>;
 }
 
-interface ToolContentPropsWithoutExamples<T> extends ToolContentPropsBase<T> {
-  exampleCards?: undefined;
-  setInput?: undefined;
+interface ToolContentPropsWithoutExamples<T, I>
+  extends ToolContentPropsBase<T, I> {
+  exampleCards?: never;
+  setInput?: never;
 }
 
-type ToolContentProps<T> =
-  | ToolContentPropsWithExamples<T>
-  | ToolContentPropsWithoutExamples<T>;
+type ToolContentProps<T, I> =
+  | ToolContentPropsWithExamples<T, I>
+  | ToolContentPropsWithoutExamples<T, I>;
 
-export default function ToolContent<T extends FormikValues>({
+export default function ToolContent<T extends FormikValues, I>({
   title,
   inputComponent,
   resultComponent,
@@ -61,7 +63,7 @@ export default function ToolContent<T extends FormikValues>({
   input,
   setInput,
   validationSchema
-}: ToolContentProps<T>) {
+}: ToolContentProps<T, I>) {
   const formRef = useRef<FormikProps<T>>(null);
 
   return (

src/components/examples/ToolExamples.tsx

@@ -15,7 +15,7 @@ export interface ExampleProps<T> {
   exampleCards: CardExampleType<T>[];
   getGroups: GetGroupsType<T>;
   formRef: React.RefObject<FormikProps<T>>;
-  setInput: React.Dispatch<React.SetStateAction<string>>;
+  setInput: React.Dispatch<React.SetStateAction<any>>;
 }
 
 export default function ToolExamples<T>({

src/pages/tools/image/png/change-colors-in-png/index.tsx

@@ -3,12 +3,14 @@ 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 ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
 import ColorSelector from '@components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
 import ToolInputAndResult from '@components/ToolInputAndResult';
 import { areColorsSimilar } from 'utils/color';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   fromColor: 'white',
@@ -18,7 +20,7 @@ const initialValues = {
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });
-export default function ChangeColorsInPng() {
+export default function ChangeColorsInPng({ title }: ToolComponentProps) {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
@@ -83,58 +85,65 @@ export default function ChangeColorsInPng() {
 
     processImage(input, fromRgb, toRgb, Number(similarity));
   };
+  const getGroups: GetGroupsType<typeof initialValues> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'From color and to color',
+      component: (
+        <Box>
+          <ColorSelector
+            value={values.fromColor}
+            onColorChange={(val) => updateField('fromColor', val)}
+            description={'Replace this color (from color)'}
+            inputProps={{ 'data-testid': 'from-color-input' }}
+          />
+          <ColorSelector
+            value={values.toColor}
+            onColorChange={(val) => updateField('toColor', val)}
+            description={'With this color (to color)'}
+            inputProps={{ 'data-testid': 'to-color-input' }}
+          />
+          <TextFieldWithDesc
+            value={values.similarity}
+            onOwnChange={(val) => updateField('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>
+      )
+    }
+  ];
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolFileInput
-            value={input}
-            onChange={setInput}
-            accept={['image/png']}
-            title={'Input PNG'}
-          />
-        }
-        result={
-          <ToolFileResult
-            title={'Output PNG with new colors'}
-            value={result}
-            extension={'png'}
-          />
-        }
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'From color and to color',
-            component: (
-              <Box>
-                <ColorSelector
-                  value={values.fromColor}
-                  onColorChange={(val) => updateField('fromColor', val)}
-                  description={'Replace this color (from color)'}
-                  inputProps={{ 'data-testid': 'from-color-input' }}
-                />
-                <ColorSelector
-                  value={values.toColor}
-                  onColorChange={(val) => updateField('toColor', val)}
-                  description={'With this color (to color)'}
-                  inputProps={{ 'data-testid': 'to-color-input' }}
-                />
-                <TextFieldWithDesc
-                  value={values.similarity}
-                  onOwnChange={(val) => updateField('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>
-            )
-          }
-        ]}
-        initialValues={initialValues}
-        input={input}
-      />
-    </Box>
+    <ToolContent
+      title={title}
+      initialValues={initialValues}
+      getGroups={getGroups}
+      compute={compute}
+      input={input}
+      validationSchema={validationSchema}
+      inputComponent={
+        <ToolFileInput
+          value={input}
+          onChange={setInput}
+          accept={['image/png']}
+          title={'Input PNG'}
+        />
+      }
+      resultComponent={
+        <ToolFileResult
+          title={'Transparent PNG'}
+          value={result}
+          extension={'png'}
+        />
+      }
+      toolInfo={{
+        title: 'Make Colors Transparent',
+        description:
+          'This tool allows you to make specific colors in a PNG image transparent. You can select the color to replace and adjust the similarity threshold to include similar colors.'
+      }}
+    />
   );
 }

src/pages/tools/list/reverse/index.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { GetGroupsType } from '@components/options/ToolOptions';
@@ -7,7 +7,6 @@ import { reverseList, SplitOperatorType } from './service';
 import SimpleRadio from '@components/options/SimpleRadio';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import { CardExampleType } from '@components/examples/ToolExamples';
-import { FormikProps } from 'formik';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolContent from '@components/ToolContent';