From 6f42d2f2e9fdabd1a75b52698d527762551cb05a Mon Sep 17 00:00:00 2001 From: Chesterkxng Date: Tue, 4 Mar 2025 22:59:27 +0000 Subject: [PATCH 1/3] feat: list reverse example --- src/pages/tools/list/reverse/index.tsx | 84 ++++++++++++++++++++++++++ src/pages/tools/list/reverse/meta.ts | 4 +- 2 files changed, 86 insertions(+), 2 deletions(-) diff --git a/src/pages/tools/list/reverse/index.tsx b/src/pages/tools/list/reverse/index.tsx index ba1ea79..2b50349 100644 --- a/src/pages/tools/list/reverse/index.tsx +++ b/src/pages/tools/list/reverse/index.tsx @@ -7,12 +7,15 @@ import { reverseList, SplitOperatorType } from './service'; import ToolInputAndResult from '@components/ToolInputAndResult'; import SimpleRadio from '@components/options/SimpleRadio'; import TextFieldWithDesc from '@components/options/TextFieldWithDesc'; +import { CardExampleType } from '@components/examples/ToolExamples'; +import ToolInfo from '@components/ToolInfo'; const initialValues = { splitOperatorType: 'symbol' as SplitOperatorType, splitSeparator: ',', joinSeparator: '\\n' }; +type InitialValuesType = typeof initialValues; const splitOperators: { title: string; description: string; @@ -30,6 +33,83 @@ const splitOperators: { } ]; +const exampleCards: CardExampleType[] = [ + { + title: 'Reverse a List of Digits', + description: + "In this example, we load a list of digits in the input. The digits are separated by a mix of dot, comma, and semicolon characters, so we use the regular expression split mode and enter a regular expression that matches all these characters as the input item separator. In the output, we get a reversed list of digits that all use the semicolon as a separator.", + sampleText: `2, 9, 6; 3; 7. 4. 4. 2, 1; 4, 8. 4; 4. 8, 2, 5; 1; 7; 7. 0`, + sampleResult: `0; 7; 7; 1; 5; 2; 8; 4; 4; 8; 4; 1; 2; 4; 4; 7; 3; 6; 9; 2`, + sampleOptions: { + splitOperatorType: 'regex', + splitSeparator: '/[;,.]\\s*/', + joinSeparator: '; ' + } + }, + { + title: 'Reverse a Column of Words', + description: + 'This example reverses a column of twenty three-syllable nouns and prints all the words from the bottom to top. To separate the list items, it uses the \n character as input item separator, which means that each item is on its own line..', + sampleText: `argument +pollution +emphasis +vehicle +family +property +preference +studio +suggestion +accident +analyst +permission +reaction +promotion +quantity +inspection +chemistry +conclusion +confusion +memory`, + sampleResult: `memory +confusion +conclusion +chemistry +inspection +quantity +promotion +reaction +permission +analyst +accident +suggestion +studio +preference +property +family +vehicle +emphasis +pollution +argument`, + sampleOptions: { + splitOperatorType: 'symbol', + splitSeparator: '\\n', + joinSeparator: '\\n' + } + }, + { + title: 'Reverse a Random List', + description: + 'In this example, the list elements are random cities, zip codes, and weather conditions. To reverse list elements, we first need to identify them and separate them apart. The input list incorrectly uses the dash symbol to separate the elements but the output list fixes this and uses commas.', + sampleText: `Hamburg-21334-Dhaka-Sunny-Managua-Rainy-Chongqing-95123-Oakland`, + sampleResult: `Oakland, 95123, Chongqing, Rainy, Managua, Sunny, Dhaka, 21334, Hamburg`, + sampleOptions: { + splitOperatorType: 'symbol', + splitSeparator: '-', + joinSeparator: ', ' + } + } +]; + export default function Reverse() { const [input, setInput] = useState(''); const [result, setResult] = useState(''); @@ -100,6 +180,10 @@ export default function Reverse() { initialValues={initialValues} input={input} /> + ); } diff --git a/src/pages/tools/list/reverse/meta.ts b/src/pages/tools/list/reverse/meta.ts index 127f810..9ff21db 100644 --- a/src/pages/tools/list/reverse/meta.ts +++ b/src/pages/tools/list/reverse/meta.ts @@ -6,8 +6,8 @@ export const tool = defineTool('list', { name: 'Reverse', path: 'reverse', icon: 'proicons:reverse', - description: '', - shortDescription: '', + description: 'This is a super simple browser-based application prints all list items in reverse. The input items can be separated by any symbol and you can also change the separator of the reversed list items.', + shortDescription: 'Quickly reverse a list', keywords: ['reverse'], component: lazy(() => import('./index')) }); From a165960c0ab7c624393647cab4a61212a7fd1a55 Mon Sep 17 00:00:00 2001 From: Chesterkxng Date: Wed, 5 Mar 2025 01:47:06 +0000 Subject: [PATCH 2/3] feat: number sum calculator examples --- src/pages/tools/number/sum/index.tsx | 86 ++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) diff --git a/src/pages/tools/number/sum/index.tsx b/src/pages/tools/number/sum/index.tsx index d50dbe1..bc2ccdf 100644 --- a/src/pages/tools/number/sum/index.tsx +++ b/src/pages/tools/number/sum/index.tsx @@ -8,12 +8,15 @@ import RadioWithTextField from '@components/options/RadioWithTextField'; import SimpleRadio from '@components/options/SimpleRadio'; import CheckboxWithDesc from '@components/options/CheckboxWithDesc'; import ToolInputAndResult from '@components/ToolInputAndResult'; +import { CardExampleType } from '@components/examples/ToolExamples'; +import ToolInfo from '@components/ToolInfo'; const initialValues = { extractionType: 'smart' as NumberExtractionType, separator: '\\n', printRunningSum: false }; +type InitialValuesType = typeof initialValues; const extractionTypes: { title: string; description: string; @@ -37,6 +40,85 @@ const extractionTypes: { } ]; +const exampleCards: CardExampleType[] = [ + { + title: 'Sum of Ten Positive Numbers', + description: + "In this example, we calculate the sum of ten positive integers. These integers are listed as a column and their total sum equals 19494.", + sampleText: `0 +1 +20 +33 +400 +505 +660 +777 +8008 +9090`, + sampleResult: `19494`, + sampleOptions: { + extractionType: 'delimiter', + separator: '\\n', + printRunningSum: false + } + }, + { + title: 'Count Trees in the Park', + description: + 'This example reverses a column of twenty three-syllable nouns and prints all the words from the bottom to top. To separate the list items, it uses the \n character as input item separator, which means that each item is on its own line..', + sampleText: `This year gardeners have planted 20 red maples, 35 sweetgum, 13 quaking aspen, and 7 white oaks in the central park of the city.`, + sampleResult: `75`, + sampleOptions: { + extractionType: 'smart', + separator: '\\n', + printRunningSum: false + } + }, + { + title: 'Sum of Integers and Decimals', + description: + 'In this example, we add together ninety different values – positive numbers, negative numbers, integers and decimal fractions. We set the input separator to a comma and after adding all of them together, we get 0 as output.', + sampleText: `1, 2, 3, 4, 5, 6, 7, 8, 9, -1.1, -2.1, -3.1, -4.1, -5.1, -6.1, -7.1, -8.1, -9.1, 10, 20, 30, 40, 50, 60, 70, 80, 90, -10.2, -20.2, -30.2, -40.2, -50.2, -60.2, -70.2, -80.2, -90.2, 100, 200, 300, 400, 500, 600, 700, 800, 900, -100.3, -200.3, -300.3, -400.3, -500.3, -600.3, -700.3, -800.3, -900.3, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, -1000.4, -2000.4, -3000.4, -4000.4, -5000.4, -6000.4, -7000.4, -8000.4, -9000.4, 10001, 20001, 30001, 40001, 50001, 60001, 70001, 80001, 90001, -10000, -20000, -30000, -40000, -50000, -60000, -70000, -80000, -90000`, + sampleResult: `0`, + sampleOptions: { + extractionType: 'delimiter', + separator: ', ', + printRunningSum: false + } + }, + { + title: 'Running Sum of Numbers', + description: + 'In this example, we calculate the sum of all ten digits and enable the option "Print Running Sum". We get the intermediate values of the sum in the process of addition. Thus, we have the following sequence in the output: 0, 1 (0 + 1), 3 (0 + 1 + 2), 6 (0 + 1 + 2 + 3), 10 (0 + 1 + 2 + 3 + 4), and so on.', + sampleText: `0 +1 +2 +3 +4 +5 +6 +7 +8 +9`, + sampleResult: `0 +1 +3 +6 +10 +15 +21 +28 +36 +45`, + sampleOptions: { + extractionType: 'delimiter', + separator: '\\n', + printRunningSum: true + } + } +]; + + export default function SplitText() { const [input, setInput] = useState(''); const [result, setResult] = useState(''); @@ -108,6 +190,10 @@ export default function SplitText() { initialValues={initialValues} input={input} /> + ); } From 1577f098e01310ef29a8a52d7a0ae2df3a4a0f43 Mon Sep 17 00:00:00 2001 From: "Ibrahima G. Coulibaly" Date: Wed, 5 Mar 2025 21:00:26 +0000 Subject: [PATCH 3/3] chore: link examples to ui --- .idea/workspace.xml | 153 ++++++++++++++----------- src/pages/tools/list/reverse/index.tsx | 122 +++++++++++--------- src/pages/tools/number/sum/index.tsx | 134 ++++++++++++---------- 3 files changed, 231 insertions(+), 178 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index e61652d..e50bab9 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -4,8 +4,10 @@