fix: examples

.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/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/Examples.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/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/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" />
+      <workItem from="1740613094492" duration="9615000" />
-    </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>
     </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 />

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}>
+      {/*<Grid item md={12} lg={4}>*/}
-        <StyledButton fullWidth variant="outlined" href="#tour">
+      {/*  <StyledButton fullWidth variant="outlined" href="#tour">*/}
-          Learn How to Use
+      {/*    Learn How to Use*/}
-        </StyledButton>
+      {/*  </StyledButton>*/}
-      </Grid>
+      {/*</Grid>*/}
     </Grid>
   );
 }

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;
+  subtitle?: string;
-  exampleCards: Omit<ExampleCardProps<T>, 'getGroups' | 'changeInputResult'>[];
+  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>
 

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
+      <ToolExamples
-        title="Text Joiner Examples"
+        title={title}
-        subtitle="Click to try!"
         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 }) => [
+        getGroups={getGroups}
-          {
-            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}
-              />
-            ))
-          }
-        ]}
         initialValues={initialValues}
         input={input}
       />
+      <ToolExamples
+        title={title}
+        exampleCards={exampleCards}
+        getGroups={getGroups}
+        formRef={formRef}
+      />
     </Box>
   );
 }

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