refactor: use ToolContent

2025-09-19 22:19:36 +02:00 · 2025-03-09 01:50:09 +00:00
parent b372692971
commit 0499673a03
6 changed files with 136 additions and 159 deletions
--- 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 />
--- a/src/components/examples/ExampleCard.tsx
+++ b/src/components/examples/ExampleCard.tsx
@@ -60,6 +60,7 @@ export default function ExampleCard<T>({
            {description}
          </Typography>

+          {sampleText && (
            <Box
              sx={{
                display: 'flex',
@@ -69,7 +70,8 @@ export default function ExampleCard<T>({
                bgcolor: 'transparent',
                padding: '5px 10px',
                borderRadius: '5px',
-              boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
+                boxShadow:
+                  'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
              }}
            >
              <TextField
@@ -87,6 +89,7 @@ export default function ExampleCard<T>({
                }}
              />
            </Box>
+          )}

          <ArrowDownwardIcon />
          <Box
--- 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: (
+  getGroups:
+    | null
+    | ((
        formikProps: FormikProps<T> & { updateField: UpdateField<T> }
-  ) => ToolOptionGroup[];
+      ) => 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,7 +94,6 @@ export default function ToolOptions<T extends FormikValues>({
  formRef?: RefObject<FormikProps<T>>;
 }) {
  const theme = useTheme();
-  if (getGroups)
  return (
    <Box
      sx={{
@@ -98,7 +101,8 @@ export default function ToolOptions<T extends FormikValues>({
        borderRadius: 2,
        padding: 2,
        backgroundColor: theme.palette.background.default,
-          boxShadow: '2'
+        boxShadow: '2',
+        display: getGroups ? 'block' : 'none'
      }}
      mt={2}
    >
--- 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
+    <ToolContent
      title={title}
-        exampleCards={exampleCards}
-        getGroups={getGroups}
-        formRef={formRef}
+      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}
    />
-    </Box>
  );
 }
--- 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
+    <ToolContent
      title={title}
-        exampleCards={exampleCards}
+      initialValues={initialValues}
      getGroups={getGroups}
-        formRef={formRef}
+      compute={computeExternal}
+      input={input}
      setInput={setInput}
+      inputComponent={<ToolTextInput value={input} onChange={setInput} />}
+      resultComponent={
+        <ToolTextResult title={'Reversed text'} value={result} />
+      }
+      exampleCards={exampleCards}
    />
-    </Box>
  );
 }
--- 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
+    <ToolContent
      title={title}
-        exampleCards={exampleCards}
-        getGroups={getGroups}
-        formRef={formRef}
+      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}
    />
-    </Box>
  );
 }