From a713690882b7cecea240163d06ee0b3715158faf Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 27 Feb 2025 02:21:08 +0000
Subject: [PATCH] fix: examples

---
 .idea/workspace.xml                           |  34 ++---
 src/components/ToolHeader.tsx                 |  14 +-
 .../{Examples.tsx => ToolExamples.tsx}        |  30 ++--
 src/pages/tools/string/join/index.tsx         |  29 ++--
 src/pages/tools/string/split/index.tsx        | 133 +++++++++++++-----
 src/tools/defineTool.tsx                      |   8 +-
 6 files changed, 164 insertions(+), 84 deletions(-)
 rename src/components/examples/{Examples.tsx => ToolExamples.tsx} (66%)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 4c1febc..eeee1ff 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,13 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: show tooloptions in example">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refact: examples">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/examples/Examples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/Examples.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/examples/RequiredOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ExampleOptions.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/Examples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/tools/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/join/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -265,15 +265,7 @@
       <workItem from="1740490890760" duration="1889000" />
       <workItem from="1740503199053" duration="4853000" />
       <workItem from="1740584243965" duration="17000" />
-      <workItem from="1740613094492" duration="7661000" />
-    </task>
-    <task id="LOCAL-00079" summary="fix: ci">
-      <option name="closed" value="true" />
-      <created>1719588326608</created>
-      <option name="number" value="00079" />
-      <option name="presentableId" value="LOCAL-00079" />
-      <option name="project" value="LOCAL" />
-      <updated>1719588326608</updated>
+      <workItem from="1740613094492" duration="9615000" />
     </task>
     <task id="LOCAL-00080" summary="fix: ci">
       <option name="closed" value="true" />
@@ -659,7 +651,15 @@
       <option name="project" value="LOCAL" />
       <updated>1740619610169</updated>
     </task>
-    <option name="localTasksCounter" value="128" />
+    <task id="LOCAL-00128" summary="refact: examples">
+      <option name="closed" value="true" />
+      <created>1740620866551</created>
+      <option name="number" value="00128" />
+      <option name="presentableId" value="LOCAL-00128" />
+      <option name="project" value="LOCAL" />
+      <updated>1740620866551</updated>
+    </task>
+    <option name="localTasksCounter" value="129" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -691,7 +691,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="feat: self host" />
     <MESSAGE value="chore: format number" />
     <MESSAGE value="feat: rotate ui" />
     <MESSAGE value="feat: shuffle ui" />
@@ -716,7 +715,8 @@
     <MESSAGE value="docs: readme" />
     <MESSAGE value="chore: handle enter press on search" />
     <MESSAGE value="chore: show tooloptions in example" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: show tooloptions in example" />
+    <MESSAGE value="refact: examples" />
+    <option name="LAST_COMMIT_MESSAGE" value="refact: examples" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx
index 585a551..84b0236 100644
--- a/src/components/ToolHeader.tsx
+++ b/src/components/ToolHeader.tsx
@@ -26,7 +26,7 @@ function ToolLinks() {
 
   return (
     <Grid container spacing={2} mt={1}>
-      <Grid item md={12} lg={4}>
+      <Grid item md={12} lg={6}>
         <StyledButton
           sx={{ backgroundColor: 'white' }}
           fullWidth
@@ -36,16 +36,16 @@ function ToolLinks() {
           Use This Tool
         </StyledButton>
       </Grid>
-      <Grid item md={12} lg={4}>
+      <Grid item md={12} lg={6}>
         <StyledButton fullWidth variant="outlined" href="#examples">
           See Examples
         </StyledButton>
       </Grid>
-      <Grid item md={12} lg={4}>
-        <StyledButton fullWidth variant="outlined" href="#tour">
-          Learn How to Use
-        </StyledButton>
-      </Grid>
+      {/*<Grid item md={12} lg={4}>*/}
+      {/*  <StyledButton fullWidth variant="outlined" href="#tour">*/}
+      {/*    Learn How to Use*/}
+      {/*  </StyledButton>*/}
+      {/*</Grid>*/}
     </Grid>
   );
 }
diff --git a/src/components/examples/Examples.tsx b/src/components/examples/ToolExamples.tsx
similarity index 66%
rename from src/components/examples/Examples.tsx
rename to src/components/examples/ToolExamples.tsx
index bb56777..c3cc481 100644
--- a/src/components/examples/Examples.tsx
+++ b/src/components/examples/ToolExamples.tsx
@@ -2,30 +2,44 @@ import { Box, Grid, Stack, Typography } from '@mui/material';
 import ExampleCard, { ExampleCardProps } from './ExampleCard';
 import React from 'react';
 import { GetGroupsType } from '@components/options/ToolOptions';
+import { FormikProps } from 'formik';
 
-interface ExampleProps<T> {
+export type CardExampleType<T> = Omit<
+  ExampleCardProps<T>,
+  'getGroups' | 'changeInputResult'
+>;
+
+export interface ExampleProps<T> {
   title: string;
-  subtitle: string;
-  exampleCards: Omit<ExampleCardProps<T>, 'getGroups' | 'changeInputResult'>[];
+  subtitle?: string;
+  exampleCards: CardExampleType<T>[];
   getGroups: GetGroupsType<T>;
-  changeInputResult: (newOptions: T) => void;
+  formRef: React.RefObject<FormikProps<T>>;
 }
 
-export default function Examples<T>({
+export default function ToolExamples<T>({
   title,
   subtitle,
   exampleCards,
   getGroups,
-  changeInputResult
+  formRef
 }: ExampleProps<T>) {
+  function changeInputResult(newOptions: T) {
+    formRef.current?.setValues(newOptions);
+    const toolsElement = document.getElementById('tool');
+    if (toolsElement) {
+      toolsElement.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
   return (
     <Box id={'examples'} mt={4}>
       <Box mt={4} display="flex" gap={1} alignItems="center">
         <Typography mb={2} fontSize={30} color={'primary'}>
-          {title}
+          {`${title} Examples`}
         </Typography>
         <Typography mb={2} fontSize={30} color={'secondary'}>
-          {subtitle}
+          {subtitle ?? 'Click to try!'}
         </Typography>
       </Box>
 
diff --git a/src/pages/tools/string/join/index.tsx b/src/pages/tools/string/join/index.tsx
index 79b7748..b697b6e 100644
--- a/src/pages/tools/string/join/index.tsx
+++ b/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>
   );
diff --git a/src/pages/tools/string/split/index.tsx b/src/pages/tools/string/split/index.tsx
index 1ec62e8..1fbd324 100644
--- a/src/pages/tools/string/split/index.tsx
+++ b/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>
   );
 }
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
index 3c146cc..f9259f5 100644
--- a/src/tools/defineTool.tsx
+++ b/src/tools/defineTool.tsx
@@ -4,7 +4,7 @@ import { IconifyIcon } from '@iconify/react';
 
 interface ToolOptions {
   path: string;
-  component: LazyExoticComponent<JSXElementConstructor<NonNullable<unknown>>>;
+  component: LazyExoticComponent<JSXElementConstructor<ToolComponentProps>>;
   keywords: string[];
   icon?: IconifyIcon | string;
   name: string;
@@ -25,6 +25,10 @@ export interface DefinedTool {
   component: () => JSX.Element;
 }
 
+export interface ToolComponentProps {
+  title?: any;
+}
+
 export const defineTool = (
   basePath: ToolCategory,
   options: ToolOptions
@@ -55,7 +59,7 @@ export const defineTool = (
           icon={icon}
           type={basePath}
         >
-          <Component />
+          <Component title={name} />
         </ToolLayout>
       );
     }