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 @@
-
-
+
+
+
+
@@ -27,16 +29,37 @@
- {
- "history": [
+
+}]]>
+
{
"selectedUrlAndAccountId": {
"url": "https://github.com/iib0011/omni-tools.git",
@@ -61,51 +84,51 @@
- {
- "keyToString": {
- "ASKED_ADD_EXTERNAL_FILES": "true",
- "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
- "Docker.Dockerfile build.executor": "Run",
- "Docker.Dockerfile.executor": "Run",
- "Playwright.JoinText Component.executor": "Run",
- "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
- "RunOnceActivity.OpenProjectViewOnStart": "true",
- "RunOnceActivity.ShowReadmeOnStart": "true",
- "RunOnceActivity.git.unshallow": "true",
- "Vitest.compute function (1).executor": "Run",
- "Vitest.compute function.executor": "Run",
- "Vitest.mergeText.executor": "Run",
- "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
- "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
- "Vitest.removeDuplicateLines function.executor": "Run",
- "Vitest.removeDuplicateLines function.newlines option.executor": "Run",
- "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
- "git-widget-placeholder": "main",
- "ignore.virus.scanning.warn.message": "true",
- "kotlin-language-version-configured": "true",
- "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/public/assets",
- "node.js.detected.package.eslint": "true",
- "node.js.detected.package.tslint": "true",
- "node.js.selected.package.eslint": "(autodetect)",
- "node.js.selected.package.tslint": "(autodetect)",
- "nodejs_package_manager_path": "npm",
- "npm.build.executor": "Run",
- "npm.dev.executor": "Run",
- "npm.lint.executor": "Run",
- "npm.prebuild.executor": "Run",
- "npm.script:create:tool.executor": "Run",
- "npm.test.executor": "Run",
- "npm.test:e2e.executor": "Run",
- "npm.test:e2e:run.executor": "Run",
- "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier",
- "project.structure.last.edited": "Problems",
- "project.structure.proportion": "0.0",
- "project.structure.side.proportion": "0.2",
- "settings.editor.selected.configurable": "settings.typescriptcompiler",
- "ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
- "vue.rearranger.settings.migration": "true"
+
+}]]>
@@ -750,7 +775,6 @@
-
@@ -767,7 +791,8 @@
-
+
+
diff --git a/src/pages/tools/list/reverse/index.tsx b/src/pages/tools/list/reverse/index.tsx
index ba1ea79..dce6d0e 100644
--- a/src/pages/tools/list/reverse/index.tsx
+++ b/src/pages/tools/list/reverse/index.tsx
@@ -1,18 +1,26 @@
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 { reverseList, SplitOperatorType } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import ToolExamples, {
+ CardExampleType
+} from '@components/examples/ToolExamples';
+import ToolInfo from '@components/ToolInfo';
+import { FormikProps } from 'formik';
+import Separator from '@components/Separator';
+import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
splitOperatorType: 'symbol' as SplitOperatorType,
splitSeparator: ',',
joinSeparator: '\\n'
};
+type InitialValuesType = typeof initialValues;
const splitOperators: {
title: string;
description: string;
@@ -30,9 +38,133 @@ const splitOperators: {
}
];
-export default function Reverse() {
+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({ title }: ToolComponentProps) {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
+ const formRef = useRef>(null);
+
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Splitter Mode',
+ component: (
+
+ {splitOperators.map(({ title, description, type }) => (
+ updateField('splitOperatorType', type)}
+ title={title}
+ description={description}
+ checked={values.splitOperatorType === type}
+ />
+ ))}
+
+ )
+ },
+ {
+ title: 'Item Separator',
+ component: (
+
+ updateField('splitSeparator', val)}
+ />
+
+ )
+ },
+ {
+ title: 'Output List Options',
+ component: (
+
+ updateField('joinSeparator', val)}
+ />
+
+ )
+ }
+ ];
const compute = (optionsValues: typeof initialValues, input: any) => {
const { splitOperatorType, splitSeparator, joinSeparator } = optionsValues;
@@ -54,52 +186,24 @@ export default function Reverse() {
result={}
/>
[
- {
- title: 'Splitter Mode',
- component: (
-
- {splitOperators.map(({ title, description, type }) => (
- updateField('splitOperatorType', type)}
- title={title}
- description={description}
- checked={values.splitOperatorType === type}
- />
- ))}
-
- )
- },
- {
- title: 'Item Separator',
- component: (
-
- updateField('splitSeparator', val)}
- />
-
- )
- },
- {
- title: 'Output List Options',
- component: (
-
- updateField('joinSeparator', val)}
- />
-
- )
- }
- ]}
+ getGroups={getGroups}
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'))
});
diff --git a/src/pages/tools/number/sum/index.tsx b/src/pages/tools/number/sum/index.tsx
index d50dbe1..3c2b3e8 100644
--- a/src/pages/tools/number/sum/index.tsx
+++ b/src/pages/tools/number/sum/index.tsx
@@ -1,19 +1,27 @@
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, NumberExtractionType } from './service';
import RadioWithTextField from '@components/options/RadioWithTextField';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
+import ToolExamples, {
+ CardExampleType
+} from '@components/examples/ToolExamples';
+import ToolInfo from '@components/ToolInfo';
+import Separator from '@components/Separator';
+import { ToolComponentProps } from '@tools/defineTool';
+import { FormikProps } from 'formik';
const initialValues = {
extractionType: 'smart' as NumberExtractionType,
separator: '\\n',
printRunningSum: false
};
+type InitialValuesType = typeof initialValues;
const extractionTypes: {
title: string;
description: string;
@@ -37,10 +45,135 @@ const extractionTypes: {
}
];
-export default function SplitText() {
+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 SumNumbers({ title }: ToolComponentProps) {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
+ const formRef = useRef>(null);
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Number extraction',
+ component: extractionTypes.map(
+ ({ title, description, type, withTextField, textValueAccessor }) =>
+ withTextField ? (
+ updateField('extractionType', type)}
+ onTextChange={(val) =>
+ textValueAccessor ? updateField(textValueAccessor, val) : null
+ }
+ />
+ ) : (
+ updateField('extractionType', type)}
+ checked={values.extractionType === type}
+ description={description}
+ title={title}
+ />
+ )
+ )
+ },
+ {
+ title: 'Running Sum',
+ component: (
+ updateField('printRunningSum', value)}
+ />
+ )
+ }
+ ];
return (
}
/>
[
- {
- title: 'Number extraction',
- component: extractionTypes.map(
- ({
- title,
- description,
- type,
- withTextField,
- textValueAccessor
- }) =>
- withTextField ? (
- updateField('extractionType', type)}
- onTextChange={(val) =>
- textValueAccessor
- ? updateField(textValueAccessor, val)
- : null
- }
- />
- ) : (
- updateField('extractionType', type)}
- checked={values.extractionType === type}
- description={description}
- title={title}
- />
- )
- )
- },
- {
- title: 'Running Sum',
- component: (
- updateField('printRunningSum', value)}
- />
- )
- }
- ]}
+ formRef={formRef}
+ getGroups={getGroups}
compute={(optionsValues, input) => {
const { extractionType, printRunningSum, separator } = optionsValues;
setResult(compute(input, extractionType, printRunningSum, separator));
@@ -108,6 +190,18 @@ export default function SplitText() {
initialValues={initialValues}
input={input}
/>
+
+
+
);
}