fix: examples

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