diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index eba022d..139b0ed 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,12 +6,16 @@
-
+
+
+
+
+
-
-
-
+
+
+
@@ -61,7 +65,7 @@
"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",
- "git-widget-placeholder": "chesterkxng",
+ "git-widget-placeholder": "main",
"ignore.virus.scanning.warn.message": "true",
"kotlin-language-version-configured": "true",
"last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
@@ -109,7 +113,7 @@
-
+
@@ -165,8 +169,8 @@
-
@@ -654,9 +658,9 @@
-
-
+
+
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 4fe6dc1..72545f6 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -80,7 +80,11 @@ export default function Hero() {
/>
)}
renderOption={(props, option) => (
- navigate(option.path)}>
+ navigate('/' + option.path)}
+ >
{option.name}
{option.shortDescription}
diff --git a/src/components/options/RadioWithTextField.tsx b/src/components/options/RadioWithTextField.tsx
index 12e3603..6de5192 100644
--- a/src/components/options/RadioWithTextField.tsx
+++ b/src/components/options/RadioWithTextField.tsx
@@ -3,34 +3,31 @@ import React from 'react';
import TextFieldWithDesc from './TextFieldWithDesc';
import SimpleRadio from './SimpleRadio';
-const RadioWithTextField = ({
- fieldName,
- radioValue,
+const RadioWithTextField = ({
title,
- onRadioChange,
+ onRadioClick,
+ checked,
value,
description,
onTextChange,
- typeDescription
+ radioDescription
}: {
fieldName: string;
title: string;
- radioValue: T;
- onRadioChange: (val: T) => void;
+ checked: boolean;
+ onRadioClick: () => void;
value: string;
description: string;
onTextChange: (value: string) => void;
- typeDescription?: string;
+ radioDescription?: string;
}) => {
- const onChange = () => onRadioChange(radioValue);
return (
void;
- fieldName: string;
- value: any;
title: string;
description?: string;
+ checked: boolean;
+ onClick: () => void;
}
-export default function SimpleRadio({
- onChange,
- fieldName,
- value,
+const SimpleRadio: React.FC = ({
+ onClick,
title,
- description
-}: SimpleRadioProps) {
+ description,
+ checked
+}) => {
return (
-
+
{title}
{description && (
@@ -43,4 +35,6 @@ export default function SimpleRadio({
)}
);
-}
+};
+
+export default SimpleRadio;
diff --git a/src/components/options/TextFieldWithDesc.tsx b/src/components/options/TextFieldWithDesc.tsx
index dad5ba9..583781f 100644
--- a/src/components/options/TextFieldWithDesc.tsx
+++ b/src/components/options/TextFieldWithDesc.tsx
@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography';
import React from 'react';
type OwnProps = {
- description: string;
+ description?: string;
value: string | number;
onChange: (value: string) => void;
placeholder?: string;
@@ -24,9 +24,11 @@ const TextFieldWithDesc = ({
onChange={(event) => onChange(event.target.value)}
{...props}
/>
-
- {description}
-
+ {description && (
+
+ {description}
+
+ )}
);
};
diff --git a/src/pages/list/index.ts b/src/pages/list/index.ts
index 08dc437..88d4a49 100644
--- a/src/pages/list/index.ts
+++ b/src/pages/list/index.ts
@@ -1,2 +1,3 @@
import { tool as listSort } from './sort/meta';
-export const listTools = [];
+
+export const listTools = [listSort];
diff --git a/src/pages/list/sort/index.tsx b/src/pages/list/sort/index.tsx
index d26c9ef..eea2c0b 100644
--- a/src/pages/list/sort/index.tsx
+++ b/src/pages/list/sort/index.tsx
@@ -1,11 +1,107 @@
import { Box } from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
+import ToolTextInput from '../../../components/input/ToolTextInput';
+import ToolTextResult from '../../../components/result/ToolTextResult';
import * as Yup from 'yup';
+import ToolOptions from '../../../components/options/ToolOptions';
+import { Sort, SortingMethod, SplitOperatorType } from './service';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import SimpleRadio from '../../../components/options/SimpleRadio';
-const initialValues = {};
-const validationSchema = Yup.object({
- // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function Sort() {
- return Lorem ipsum;
+const initialValues = {
+ splitSeparatorType: 'symbol' as SplitOperatorType,
+ sortingMethod: 'alphabetic' as SortingMethod,
+ increasing: true,
+ splitSeparator: ',',
+ joinSeparator: ',',
+ removeDuplicated: false,
+ caseSensitive: false
+};
+const splitOperators: {
+ title: string;
+ description: string;
+ type: SplitOperatorType;
+}[] = [
+ {
+ title: 'Use a Symbol for Splitting',
+ description: 'Delimit input list items with a character.',
+ type: 'symbol'
+ },
+ {
+ title: 'Use a Regex for Splitting',
+ type: 'regex',
+ description: 'Delimit input list items with a regular expression.'
+ }
+];
+
+export default function SplitText() {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+ // const formRef = useRef>(null);
+ const computeExternal = (optionsValues: typeof initialValues, input: any) => {
+ const {
+ splitSeparatorType,
+ joinSeparator,
+ splitSeparator,
+ increasing,
+ caseSensitive,
+ removeDuplicated,
+ sortingMethod
+ } = optionsValues;
+
+ setResult(
+ Sort(
+ sortingMethod,
+ splitSeparatorType,
+ input,
+ increasing,
+ splitSeparator,
+ joinSeparator,
+ removeDuplicated,
+ caseSensitive
+ )
+ );
+ };
+ const validationSchema = Yup.object({
+ // splitSeparator: Yup.string().required('The separator is required')
+ });
+
+ return (
+
+
+ }
+ result={}
+ />
+ [
+ {
+ title: 'Input item separator',
+ component: splitOperators.map(({ title, description, type }) => (
+ setFieldValue('splitSeparatorType', type)}
+ title={title}
+ description={description}
+ checked={values.splitSeparatorType === type}
+ />
+ ))
+ },
+ {
+ title: 'Sort method',
+ component:
+ }
+ ]}
+ initialValues={initialValues}
+ input={input}
+ validationSchema={validationSchema}
+ />
+
+ );
}
diff --git a/src/pages/list/sort/meta.ts b/src/pages/list/sort/meta.ts
index 46c7a90..536aa24 100644
--- a/src/pages/list/sort/meta.ts
+++ b/src/pages/list/sort/meta.ts
@@ -6,8 +6,9 @@ export const tool = defineTool('list', {
name: 'Sort',
path: 'sort',
// image,
- description: '',
- shortDescription: '',
+ description:
+ 'This is a super simple browser-based application that sorts items in a list and arranges them in increasing or decreasing order. You can sort the items alphabetically, numerically, or by their length. You can also remove duplicate and empty items, as well as trim individual items that have whitespace around them. You can use any separator character to separate the input list items or alternatively use a regular expression to separate them. Additionally, you can create a new delimiter for the sorted output list.',
+ shortDescription: 'Quickly sort a list',
keywords: ['sort'],
component: lazy(() => import('./index'))
});
diff --git a/src/pages/number/sum/index.tsx b/src/pages/number/sum/index.tsx
index eff2e54..c8cd1eb 100644
--- a/src/pages/number/sum/index.tsx
+++ b/src/pages/number/sum/index.tsx
@@ -67,7 +67,7 @@ export default function SplitText() {
withTextField ? (
- setFieldValue('extractionType', type)
- }
+ onRadioClick={() => setFieldValue('extractionType', type)}
onTextChange={(val) =>
textValueAccessor
? setFieldValue(textValueAccessor, val)
@@ -88,9 +86,8 @@ export default function SplitText() {
) : (
setFieldValue('extractionType', type)}
- fieldName={'extractionType'}
- value={values.extractionType}
+ onClick={() => setFieldValue('extractionType', type)}
+ checked={values.extractionType === type}
description={description}
title={title}
/>
diff --git a/src/pages/string/split/index.tsx b/src/pages/string/split/index.tsx
index 4c660b0..55269ef 100644
--- a/src/pages/string/split/index.tsx
+++ b/src/pages/string/split/index.tsx
@@ -122,14 +122,12 @@ export default function SplitText() {
component: splitOperators.map(({ title, description, type }) => (
- setFieldValue('splitSeparatorType', type)
- }
+ onRadioClick={() => setFieldValue('splitSeparatorType', type)}
onTextChange={(val) => setFieldValue(`${type}Value`, val)}
/>
))
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 9b2c682..594a721 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -4,12 +4,14 @@ import { DefinedTool } from './defineTool';
import { capitalizeFirstLetter } from '../utils/string';
import { numberTools } from '../pages/number';
import { videoTools } from '../pages/video';
+import { listTools } from '../pages/list';
export const tools: DefinedTool[] = [
...imageTools,
...stringTools,
...numberTools,
- ...videoTools
+ ...videoTools,
+ ...listTools
];
const categoriesDescriptions: { type: string; value: string }[] = [
{
@@ -31,6 +33,11 @@ const categoriesDescriptions: { type: string; value: string }[] = [
type: 'gif',
value:
'Tools for working with GIF animations – create transparent GIFs, extract GIF frames, add text to GIF, crop, rotate, reverse GIFs, and much more.'
+ },
+ {
+ type: 'list',
+ value:
+ 'Tools for working with lists – sort, reverse, randomize lists, find unique and duplicate list items, change list item separators, and much more.'
}
];
export const filterTools = (