From 0499673a0365fd43166c5acdc7b92bdaa0aa1bea Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Sun, 9 Mar 2025 01:50:09 +0000
Subject: [PATCH] refactor: use ToolContent

---
 .idea/workspace.xml                           | 32 +++----
 src/components/examples/ExampleCard.tsx       | 53 ++++++------
 src/components/options/ToolOptions.tsx        | 84 ++++++++++---------
 .../tools/string/randomize-case/index.tsx     | 46 ++++------
 src/pages/tools/string/reverse/index.tsx      | 34 ++++----
 src/pages/tools/string/uppercase/index.tsx    | 46 ++++------
 6 files changed, 136 insertions(+), 159 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 60f7ebb..7cda4f1 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: use ToolContent in ExtractSubstring">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: use ToolContent in palindrome">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/palindrome/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/palindrome/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ExampleCard.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/tools/string/randomize-case/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/randomize-case/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/reverse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/reverse/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/uppercase/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/uppercase/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -333,15 +337,7 @@
       <workItem from="1740880919391" duration="4395000" />
       <workItem from="1740923024259" duration="23000" />
       <workItem from="1740933006573" duration="3679000" />
-      <workItem from="1741475969294" duration="6986000" />
-    </task>
-    <task id="LOCAL-00104" summary="feat: compress png">
-      <option name="closed" value="true" />
-      <created>1740321721526</created>
-      <option name="number" value="00104" />
-      <option name="presentableId" value="LOCAL-00104" />
-      <option name="project" value="LOCAL" />
-      <updated>1740321721526</updated>
+      <workItem from="1741475969294" duration="8262000" />
     </task>
     <task id="LOCAL-00105" summary="feat: compress png">
       <option name="closed" value="true" />
@@ -727,7 +723,15 @@
       <option name="project" value="LOCAL" />
       <updated>1741483603658</updated>
     </task>
-    <option name="localTasksCounter" value="153" />
+    <task id="LOCAL-00153" summary="refactor: use ToolContent in palindrome">
+      <option name="closed" value="true" />
+      <created>1741483792562</created>
+      <option name="number" value="00153" />
+      <option name="presentableId" value="LOCAL-00153" />
+      <option name="project" value="LOCAL" />
+      <updated>1741483792562</updated>
+    </task>
+    <option name="localTasksCounter" value="154" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -786,7 +790,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: show tooloptions in example" />
     <MESSAGE value="refact: examples" />
     <MESSAGE value="fix: examples" />
     <MESSAGE value="feat: json pretty" />
@@ -811,7 +814,8 @@
     <MESSAGE value="feat: csv to json" />
     <MESSAGE value="refactor: use ToolContent" />
     <MESSAGE value="refactor: use ToolContent in ExtractSubstring" />
-    <option name="LAST_COMMIT_MESSAGE" value="refactor: use ToolContent in ExtractSubstring" />
+    <MESSAGE value="refactor: use ToolContent in palindrome" />
+    <option name="LAST_COMMIT_MESSAGE" value="refactor: use ToolContent in palindrome" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/examples/ExampleCard.tsx b/src/components/examples/ExampleCard.tsx
index f4b1bf0..c16295c 100644
--- a/src/components/examples/ExampleCard.tsx
+++ b/src/components/examples/ExampleCard.tsx
@@ -60,33 +60,36 @@ export default function ExampleCard<T>({
             {description}
           </Typography>
 
-          <Box
-            sx={{
-              display: 'flex',
-              zIndex: '2',
-              width: '100%',
-              height: '100%',
-              bgcolor: 'transparent',
-              padding: '5px 10px',
-              borderRadius: '5px',
-              boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
-            }}
-          >
-            <TextField
-              value={sampleText}
-              disabled
-              fullWidth
-              multiline
+          {sampleText && (
+            <Box
               sx={{
-                '& .MuiOutlinedInput-root': {
-                  zIndex: '-1',
-                  '& fieldset': {
-                    border: 'none'
-                  }
-                }
+                display: 'flex',
+                zIndex: '2',
+                width: '100%',
+                height: '100%',
+                bgcolor: 'transparent',
+                padding: '5px 10px',
+                borderRadius: '5px',
+                boxShadow:
+                  'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
               }}
-            />
-          </Box>
+            >
+              <TextField
+                value={sampleText}
+                disabled
+                fullWidth
+                multiline
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    zIndex: '-1',
+                    '& fieldset': {
+                      border: 'none'
+                    }
+                  }
+                }}
+              />
+            </Box>
+          )}
 
           <ArrowDownwardIcon />
           <Box
diff --git a/src/components/options/ToolOptions.tsx b/src/components/options/ToolOptions.tsx
index b737ebf..1125df6 100644
--- a/src/components/options/ToolOptions.tsx
+++ b/src/components/options/ToolOptions.tsx
@@ -36,9 +36,11 @@ interface FormikHelperProps<T> {
   compute: (optionsValues: T, input: any) => void;
   input: any;
   children?: ReactNode;
-  getGroups: (
-    formikProps: FormikProps<T> & { updateField: UpdateField<T> }
-  ) => ToolOptionGroup[];
+  getGroups:
+    | null
+    | ((
+        formikProps: FormikProps<T> & { updateField: UpdateField<T> }
+      ) => ToolOptionGroup[]);
   formikProps: FormikProps<T>;
 }
 
@@ -63,7 +65,9 @@ const ToolBody = <T,>({
         input={input}
         initialValues={values}
       />
-      <ToolOptionGroups groups={getGroups({ ...formikProps, updateField })} />
+      <ToolOptionGroups
+        groups={getGroups?.({ ...formikProps, updateField }) ?? []}
+      />
       {children}
     </Stack>
   );
@@ -90,41 +94,41 @@ export default function ToolOptions<T extends FormikValues>({
   formRef?: RefObject<FormikProps<T>>;
 }) {
   const theme = useTheme();
-  if (getGroups)
-    return (
-      <Box
-        sx={{
-          mb: 2,
-          borderRadius: 2,
-          padding: 2,
-          backgroundColor: theme.palette.background.default,
-          boxShadow: '2'
-        }}
-        mt={2}
-      >
-        <Stack direction={'row'} spacing={1} alignItems={'center'}>
-          <SettingsIcon />
-          <Typography fontSize={22}>Tool options</Typography>
-        </Stack>
-        <Box mt={2}>
-          <Formik
-            innerRef={formRef}
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={() => {}}
-          >
-            {(formikProps) => (
-              <ToolBody
-                compute={compute}
-                input={input}
-                getGroups={getGroups}
-                formikProps={formikProps}
-              >
-                {children}
-              </ToolBody>
-            )}
-          </Formik>
-        </Box>
+  return (
+    <Box
+      sx={{
+        mb: 2,
+        borderRadius: 2,
+        padding: 2,
+        backgroundColor: theme.palette.background.default,
+        boxShadow: '2',
+        display: getGroups ? 'block' : 'none'
+      }}
+      mt={2}
+    >
+      <Stack direction={'row'} spacing={1} alignItems={'center'}>
+        <SettingsIcon />
+        <Typography fontSize={22}>Tool options</Typography>
+      </Stack>
+      <Box mt={2}>
+        <Formik
+          innerRef={formRef}
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={() => {}}
+        >
+          {(formikProps) => (
+            <ToolBody
+              compute={compute}
+              input={input}
+              getGroups={getGroups}
+              formikProps={formikProps}
+            >
+              {children}
+            </ToolBody>
+          )}
+        </Formik>
       </Box>
-    );
+    </Box>
+  );
 }
diff --git a/src/pages/tools/string/randomize-case/index.tsx b/src/pages/tools/string/randomize-case/index.tsx
index 1c7a149..f34621f 100644
--- a/src/pages/tools/string/randomize-case/index.tsx
+++ b/src/pages/tools/string/randomize-case/index.tsx
@@ -1,15 +1,10 @@
-import { Box } from '@mui/material';
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
 import { randomizeCase } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
-import ToolExamples, {
-  CardExampleType
-} from '@components/examples/ToolExamples';
+import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
-import { FormikProps } from 'formik';
+import ToolContent from '@components/ToolContent';
 
 const initialValues = {};
 
@@ -45,7 +40,6 @@ const exampleCards: CardExampleType<typeof initialValues>[] = [
 export default function RandomizeCase({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<typeof initialValues>>(null);
 
   const computeExternal = (
     _optionsValues: typeof initialValues,
@@ -54,27 +48,19 @@ export default function RandomizeCase({ title }: ToolComponentProps) {
     setResult(randomizeCase(input));
   };
 
-  const getGroups = () => [];
-
   return (
-    <Box>
-      <ToolInputAndResult
-        input={<ToolTextInput value={input} onChange={setInput} />}
-        result={<ToolTextResult title={'Randomized text'} value={result} />}
-      />
-      <ToolOptions
-        compute={computeExternal}
-        getGroups={getGroups}
-        initialValues={initialValues}
-        input={input}
-      />
-      <ToolExamples
-        title={title}
-        exampleCards={exampleCards}
-        getGroups={getGroups}
-        formRef={formRef}
-        setInput={setInput}
-      />
-    </Box>
+    <ToolContent
+      title={title}
+      initialValues={initialValues}
+      getGroups={null}
+      compute={computeExternal}
+      input={input}
+      setInput={setInput}
+      inputComponent={<ToolTextInput value={input} onChange={setInput} />}
+      resultComponent={
+        <ToolTextResult title={'Randomized text'} value={result} />
+      }
+      exampleCards={exampleCards}
+    />
   );
 }
diff --git a/src/pages/tools/string/reverse/index.tsx b/src/pages/tools/string/reverse/index.tsx
index 83c3872..b017b79 100644
--- a/src/pages/tools/string/reverse/index.tsx
+++ b/src/pages/tools/string/reverse/index.tsx
@@ -11,6 +11,7 @@ import ToolExamples, {
 } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
 import { FormikProps } from 'formik';
+import ToolContent from '@components/ToolContent';
 
 const initialValues = {
   multiLine: true,
@@ -59,7 +60,6 @@ const exampleCards: CardExampleType<typeof initialValues>[] = [
 export default function Reverse({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<typeof initialValues>>(null);
 
   const computeExternal = (
     optionsValues: typeof initialValues,
@@ -102,24 +102,18 @@ export default function Reverse({ title }: ToolComponentProps) {
   ];
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={<ToolTextInput value={input} onChange={setInput} />}
-        result={<ToolTextResult title={'Reversed text'} value={result} />}
-      />
-      <ToolOptions
-        compute={computeExternal}
-        getGroups={getGroups}
-        initialValues={initialValues}
-        input={input}
-      />
-      <ToolExamples
-        title={title}
-        exampleCards={exampleCards}
-        getGroups={getGroups}
-        formRef={formRef}
-        setInput={setInput}
-      />
-    </Box>
+    <ToolContent
+      title={title}
+      initialValues={initialValues}
+      getGroups={getGroups}
+      compute={computeExternal}
+      input={input}
+      setInput={setInput}
+      inputComponent={<ToolTextInput value={input} onChange={setInput} />}
+      resultComponent={
+        <ToolTextResult title={'Reversed text'} value={result} />
+      }
+      exampleCards={exampleCards}
+    />
   );
 }
diff --git a/src/pages/tools/string/uppercase/index.tsx b/src/pages/tools/string/uppercase/index.tsx
index 305c4d7..e234cda 100644
--- a/src/pages/tools/string/uppercase/index.tsx
+++ b/src/pages/tools/string/uppercase/index.tsx
@@ -1,15 +1,10 @@
-import { Box } from '@mui/material';
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
 import { UppercaseInput } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
-import ToolExamples, {
-  CardExampleType
-} from '@components/examples/ToolExamples';
+import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
-import { FormikProps } from 'formik';
+import ToolContent from '@components/ToolContent';
 
 const initialValues = {};
 
@@ -42,7 +37,6 @@ const exampleCards: CardExampleType<typeof initialValues>[] = [
 export default function Uppercase({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<typeof initialValues>>(null);
 
   const computeExternal = (
     _optionsValues: typeof initialValues,
@@ -51,27 +45,19 @@ export default function Uppercase({ title }: ToolComponentProps) {
     setResult(UppercaseInput(input));
   };
 
-  const getGroups = () => [];
-
   return (
-    <Box>
-      <ToolInputAndResult
-        input={<ToolTextInput value={input} onChange={setInput} />}
-        result={<ToolTextResult title={'Uppercase text'} value={result} />}
-      />
-      <ToolOptions
-        compute={computeExternal}
-        getGroups={getGroups}
-        initialValues={initialValues}
-        input={input}
-      />
-      <ToolExamples
-        title={title}
-        exampleCards={exampleCards}
-        getGroups={getGroups}
-        formRef={formRef}
-        setInput={setInput}
-      />
-    </Box>
+    <ToolContent
+      title={title}
+      initialValues={initialValues}
+      getGroups={null}
+      compute={computeExternal}
+      input={input}
+      setInput={setInput}
+      inputComponent={<ToolTextInput value={input} onChange={setInput} />}
+      resultComponent={
+        <ToolTextResult title={'Uppercase text'} value={result} />
+      }
+      exampleCards={exampleCards}
+    />
   );
 }