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 @@
-
+
-
-
-
-
+
+
+
+
@@ -265,15 +265,7 @@
-
-
-
-
- 1719588326608
-
-
-
- 1719588326608
+
@@ -659,7 +651,15 @@
1740619610169
-
+
+
+ 1740620866551
+
+
+
+ 1740620866551
+
+
@@ -691,7 +691,6 @@
-
@@ -716,7 +715,8 @@
-
+
+
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 (
-
+
-
+
See Examples
-
-
- Learn How to Use
-
-
+ {/**/}
+ {/* */}
+ {/* Learn How to Use*/}
+ {/* */}
+ {/**/}
);
}
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 {
+export type CardExampleType = Omit<
+ ExampleCardProps,
+ 'getGroups' | 'changeInputResult'
+>;
+
+export interface ExampleProps {
title: string;
- subtitle: string;
- exampleCards: Omit, 'getGroups' | 'changeInputResult'>[];
+ subtitle?: string;
+ exampleCards: CardExampleType[];
getGroups: GetGroupsType;
- changeInputResult: (newOptions: T) => void;
+ formRef: React.RefObject>;
}
-export default function Examples({
+export default function ToolExamples({
title,
subtitle,
exampleCards,
getGroups,
- changeInputResult
+ formRef
}: ExampleProps) {
+ function changeInputResult(newOptions: T) {
+ formRef.current?.setValues(newOptions);
+ const toolsElement = document.getElementById('tool');
+ if (toolsElement) {
+ toolsElement.scrollIntoView({ behavior: 'smooth' });
+ }
+ }
+
return (
- {title}
+ {`${title} Examples`}
- {subtitle}
+ {subtitle ?? 'Click to try!'}
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[] = [
{
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('');
const [result, setResult] = useState('');
- const optionsFormRef = useRef>(null);
+ const formRef = useRef>(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 = ({
values,
updateField
@@ -169,7 +163,7 @@ export default function JoinText() {
result={}
/>
-
);
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[] = [
+ {
+ 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('');
const [result, setResult] = useState('');
- // const formRef = useRef>(null);
+ const formRef = useRef>(null);
const computeExternal = (optionsValues: typeof initialValues, input: any) => {
const {
splitSeparatorType,
@@ -104,6 +163,37 @@ export default function SplitText() {
);
};
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Split separator options',
+ component: splitOperators.map(({ title, description, type }) => (
+ updateField('splitSeparatorType', type)}
+ onTextChange={(val) => updateField(`${type}Value`, val)}
+ />
+ ))
+ },
+ {
+ title: 'Output separator options',
+ component: outputOptions.map((option) => (
+ updateField(option.accessor, value)}
+ description={option.description}
+ />
+ ))
+ }
+ ];
return (
[
- {
- title: 'Split separator options',
- component: splitOperators.map(({ title, description, type }) => (
- updateField('splitSeparatorType', type)}
- onTextChange={(val) => updateField(`${type}Value`, val)}
- />
- ))
- },
- {
- title: 'Output separator options',
- component: outputOptions.map((option) => (
- updateField(option.accessor, value)}
- description={option.description}
- />
- ))
- }
- ]}
+ getGroups={getGroups}
initialValues={initialValues}
input={input}
/>
+
);
}
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>>;
+ component: LazyExoticComponent>;
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}
>
-
+
);
}