refactor: use of ToolContent.tsx

.idea/workspace.xml

@@ -4,9 +4,11 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="style: optimizations">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: ToolContent.tsx">
-      <change afterPath="$PROJECT_DIR$/src/components/ToolContent.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/components/ToolContent.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolContent.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/tools/list/reverse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/reverse/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -293,14 +295,6 @@
       <workItem from="1740923024259" duration="23000" />
       <workItem from="1740933006573" duration="3679000" />
     </task>
-    <task id="LOCAL-00092" summary="feat: find unique ui">
-      <option name="closed" value="true" />
-      <created>1720565760853</created>
-      <option name="number" value="00092" />
-      <option name="presentableId" value="LOCAL-00092" />
-      <option name="project" value="LOCAL" />
-      <updated>1720565760853</updated>
-    </task>
     <task id="LOCAL-00093" summary="feat: group list ui">
       <option name="closed" value="true" />
       <created>1720656867853</created>
@@ -685,7 +679,15 @@
       <option name="project" value="LOCAL" />
       <updated>1740936527951</updated>
     </task>
-    <option name="localTasksCounter" value="141" />
+    <task id="LOCAL-00141" summary="feat: ToolContent.tsx">
+      <option name="closed" value="true" />
+      <created>1741211604972</created>
+      <option name="number" value="00141" />
+      <option name="presentableId" value="LOCAL-00141" />
+      <option name="project" value="LOCAL" />
+      <updated>1741211604972</updated>
+    </task>
+    <option name="localTasksCounter" value="142" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -744,7 +746,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: docs" />
     <MESSAGE value="feat: funding" />
     <MESSAGE value="feat: ui changes" />
     <MESSAGE value="fix: readme" />
@@ -769,7 +770,8 @@
     <MESSAGE value="feat: remove duplicate lines" />
     <MESSAGE value="fix: tsc" />
     <MESSAGE value="style: optimizations" />
-    <option name="LAST_COMMIT_MESSAGE" value="style: optimizations" />
+    <MESSAGE value="feat: ToolContent.tsx" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: ToolContent.tsx" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

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> {
+interface ToolContentPropsWithoutExamples<T, I>
-  exampleCards?: undefined;
+  extends ToolContentPropsBase<T, I> {
-  setInput?: undefined;
+  exampleCards?: never;
+  setInput?: never;
 }
 
-type ToolContentProps<T> =
+type ToolContentProps<T, I> =
-  | ToolContentPropsWithExamples<T>
+  | ToolContentPropsWithExamples<T, I>
-  | ToolContentPropsWithoutExamples<T>;
+  | 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>
+    <ToolContent
-      <ToolInputAndResult
+      title={title}
-        input={
+      initialValues={initialValues}
-          <ToolFileInput
+      getGroups={getGroups}
-            value={input}
+      compute={compute}
-            onChange={setInput}
+      input={input}
-            accept={['image/png']}
+      validationSchema={validationSchema}
-            title={'Input PNG'}
+      inputComponent={
-          />
+        <ToolFileInput
-        }
+          value={input}
-        result={
+          onChange={setInput}
-          <ToolFileResult
+          accept={['image/png']}
-            title={'Output PNG with new colors'}
+          title={'Input PNG'}
-            value={result}
+        />
-            extension={'png'}
+      }
-          />
+      resultComponent={
-        }
+        <ToolFileResult
-      />
+          title={'Transparent PNG'}
-      <ToolOptions
+          value={result}
-        compute={compute}
+          extension={'png'}
-        getGroups={({ values, updateField }) => [
+        />
-          {
+      }
-            title: 'From color and to color',
+      toolInfo={{
-            component: (
+        title: 'Make Colors Transparent',
-              <Box>
+        description:
-                <ColorSelector
+          '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.'
-                  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>
   );
 }

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';