refactor: use ToolContent

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

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>
+  );
 }

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}
+    />
   );
 }

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}
+    />
   );
 }

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}
+    />
   );
 }