fix: examples

src/pages/tools/string/join/index.tsx

@@ -11,8 +11,11 @@ import ToolInputAndResult from '@components/ToolInputAndResult';
 
 import ToolInfo from '@components/ToolInfo';
 import Separator from '@components/Separator';
-import Examples from '@components/examples/Examples';
+import ToolExamples, {
+  CardExampleType
+} from '@components/examples/ToolExamples';
 import { FormikProps } from 'formik';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   joinCharacter: '',
@@ -50,7 +53,7 @@ const blankTrailingOptions: {
   }
 ];
 
-const exampleCards = [
+const exampleCards: CardExampleType<InitialValuesType>[] = [
   {
     title: 'Merge a To-Do List',
     description:
@@ -110,24 +113,15 @@ s
   }
 ];
 
-export default function JoinText() {
+export default function JoinText({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const optionsFormRef = useRef<FormikProps<InitialValuesType>>(null);
+  const formRef = useRef<FormikProps<InitialValuesType>>(null);
   const compute = (optionsValues: InitialValuesType, input: any) => {
     const { joinCharacter, deleteBlank, deleteTrailing } = optionsValues;
     setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
   };
 
-  function changeInputResult(newOptions: InitialValuesType) {
-    optionsFormRef.current?.setValues(newOptions);
-
-    const toolsElement = document.getElementById('tool');
-    if (toolsElement) {
-      toolsElement.scrollIntoView({ behavior: 'smooth' });
-    }
-  }
-
   const getGroups: GetGroupsType<InitialValuesType> = ({
     values,
     updateField
@@ -169,7 +163,7 @@ export default function JoinText() {
         result={<ToolTextResult title={'Joined Text'} value={result} />}
       />
       <ToolOptions
-        formRef={optionsFormRef}
+        formRef={formRef}
         compute={compute}
         getGroups={getGroups}
         initialValues={initialValues}
@@ -180,12 +174,11 @@ export default function JoinText() {
         description="With this tool you can join parts of the text together. It takes a list of text values, separated by newlines, and merges them together. You can set the character that will be placed between the parts of the combined text. Also, you can ignore all empty lines and remove spaces and tabs at the end of all lines. Textabulous!"
       />
       <Separator backgroundColor="#5581b5" margin="50px" />
-      <Examples
-        title="Text Joiner Examples"
-        subtitle="Click to try!"
+      <ToolExamples
+        title={title}
         exampleCards={exampleCards}
         getGroups={getGroups}
-        changeInputResult={changeInputResult}
+        formRef={formRef}
       />
     </Box>
   );

src/pages/tools/string/split/index.tsx

@@ -1,12 +1,17 @@
 import { Box } from '@mui/material';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
+import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
 import { compute, SplitOperatorType } from './service';
 import RadioWithTextField from '@components/options/RadioWithTextField';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import ToolInputAndResult from '@components/ToolInputAndResult';
+import ToolExamples, {
+  CardExampleType
+} from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import { FormikProps } from 'formik';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -73,10 +78,64 @@ const outputOptions: {
   }
 ];
 
-export default function SplitText() {
+const exampleCards: CardExampleType<typeof initialValues>[] = [
+  {
+    title: 'Split German Numbers',
+    description:
+      'In this example, we break the text into pieces by two characters – a comma and space. As a result, we get a column of numbers from 1 to 10 in German.',
+    sampleText: `1 - eins, 2 - zwei, 3 - drei, 4 - vier, 5 - fünf, 6 - sechs, 7 - sieben, 8 - acht, 9 - neun, 10 - zehn`,
+    sampleResult: `1 - eins
+2 - zwei
+3 - drei
+4 - vier
+5 - fünf
+6 - sechs
+7 - sieben
+8 - acht
+9 - neun
+10 - zehn`,
+    sampleOptions: {
+      ...initialValues,
+      symbolValue: ',',
+      splitSeparatorType: 'symbol',
+      outputSeparator: '\n'
+    }
+  },
+  {
+    title: 'Text Cleanup via a Regular Expression',
+    description:
+      'In this example, we use a super smart regular expression trick to clean-up the text. This regexp finds all non-alphabetic characters and splits the text into pieces by these non-alphabetic chars. As a result, we extract only those parts of the text that contain Latin letters and words.',
+    sampleText: `Finding%№1.65*;?words()is'12#easy_`,
+    sampleResult: `Finding
+words
+is
+easy`,
+    sampleOptions: {
+      ...initialValues,
+      regexValue: '[^a-zA-Z]+',
+      splitSeparatorType: 'regex',
+      outputSeparator: '\n'
+    }
+  },
+  {
+    title: 'Three-dot Output Separator',
+    description:
+      'This example splits the text by spaces and then places three dots between the words.',
+    sampleText: `If you started with $0.01 and doubled your money every day, it would take 27 days to become a millionaire.`,
+    sampleResult: `If...you...started...with...$0.01...and...doubled...your...money...every...day,...it...would...take...27...days...to...become...a...millionaire.!`,
+    sampleOptions: {
+      ...initialValues,
+      symbolValue: '',
+      splitSeparatorType: 'symbol',
+      outputSeparator: '...'
+    }
+  }
+];
+
+export default function SplitText({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  // const formRef = useRef<FormikProps<typeof initialValues>>(null);
+  const formRef = useRef<FormikProps<typeof initialValues>>(null);
   const computeExternal = (optionsValues: typeof initialValues, input: any) => {
     const {
       splitSeparatorType,
@@ -104,6 +163,37 @@ export default function SplitText() {
     );
   };
 
+  const getGroups: GetGroupsType<typeof initialValues> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Split separator options',
+      component: splitOperators.map(({ title, description, type }) => (
+        <RadioWithTextField
+          key={type}
+          checked={type === values.splitSeparatorType}
+          title={title}
+          fieldName={'splitSeparatorType'}
+          description={description}
+          value={values[`${type}Value`]}
+          onRadioClick={() => updateField('splitSeparatorType', type)}
+          onTextChange={(val) => updateField(`${type}Value`, val)}
+        />
+      ))
+    },
+    {
+      title: 'Output separator options',
+      component: outputOptions.map((option) => (
+        <TextFieldWithDesc
+          key={option.accessor}
+          value={values[option.accessor]}
+          onOwnChange={(value) => updateField(option.accessor, value)}
+          description={option.description}
+        />
+      ))
+    }
+  ];
   return (
     <Box>
       <ToolInputAndResult
@@ -112,37 +202,16 @@ export default function SplitText() {
       />
       <ToolOptions
         compute={computeExternal}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Split separator options',
-            component: splitOperators.map(({ title, description, type }) => (
-              <RadioWithTextField
-                key={type}
-                checked={type === values.splitSeparatorType}
-                title={title}
-                fieldName={'splitSeparatorType'}
-                description={description}
-                value={values[`${type}Value`]}
-                onRadioClick={() => updateField('splitSeparatorType', type)}
-                onTextChange={(val) => updateField(`${type}Value`, val)}
-              />
-            ))
-          },
-          {
-            title: 'Output separator options',
-            component: outputOptions.map((option) => (
-              <TextFieldWithDesc
-                key={option.accessor}
-                value={values[option.accessor]}
-                onOwnChange={(value) => updateField(option.accessor, value)}
-                description={option.description}
-              />
-            ))
-          }
-        ]}
+        getGroups={getGroups}
         initialValues={initialValues}
         input={input}
       />
+      <ToolExamples
+        title={title}
+        exampleCards={exampleCards}
+        getGroups={getGroups}
+        formRef={formRef}
+      />
     </Box>
   );
 }