fix: radio and list sort init

src/components/Hero.tsx

@@ -80,7 +80,11 @@ export default function Hero() {
           />
         )}
         renderOption={(props, option) => (
-          <Box component="li" {...props} onClick={() => navigate(option.path)}>
+          <Box
+            component="li"
+            {...props}
+            onClick={() => navigate('/' + option.path)}
+          >
             <Box>
               <Typography fontWeight={'bold'}>{option.name}</Typography>
               <Typography fontSize={12}>{option.shortDescription}</Typography>

src/components/options/RadioWithTextField.tsx

@@ -3,34 +3,31 @@ import React from 'react';
 import TextFieldWithDesc from './TextFieldWithDesc';
 import SimpleRadio from './SimpleRadio';
 
-const RadioWithTextField = <T,>({
-  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 (
     <Box>
       <SimpleRadio
-        value={radioValue}
-        onChange={onChange}
-        fieldName={fieldName}
+        checked={checked}
+        onClick={onRadioClick}
         title={title}
-        description={typeDescription}
+        description={radioDescription}
       />
       <TextFieldWithDesc
         value={value}

src/components/options/SimpleRadio.tsx

@@ -1,39 +1,31 @@
-import { Box, Stack } from '@mui/material';
-import { Field } from 'formik';
+import { Box, Radio, Stack } from '@mui/material';
+import { Field, useFormikContext } from 'formik';
 import Typography from '@mui/material/Typography';
-import { globalDescriptionFontSize } from '../../config/uiConfig';
 import React from 'react';
+import { globalDescriptionFontSize } from '../../config/uiConfig';
 
 interface SimpleRadioProps {
-  onChange: () => void;
-  fieldName: string;
-  value: any;
   title: string;
   description?: string;
+  checked: boolean;
+  onClick: () => void;
 }
 
-export default function SimpleRadio({
-  onChange,
-  fieldName,
-  value,
+const SimpleRadio: React.FC<SimpleRadioProps> = ({
+  onClick,
   title,
-  description
-}: SimpleRadioProps) {
+  description,
+  checked
+}) => {
   return (
     <Box>
       <Stack
         direction={'row'}
         sx={{ mt: 2, mb: 1, cursor: 'pointer' }}
-        onClick={onChange}
         alignItems={'center'}
-        spacing={1}
+        onClick={onClick}
       >
-        <Field
-          type="radio"
-          name={fieldName}
-          value={value}
-          onChange={onChange}
-        />
+        <Radio checked={checked} onClick={onClick} />
         <Typography>{title}</Typography>
       </Stack>
       {description && (
@@ -43,4 +35,6 @@ export default function SimpleRadio({
       )}
     </Box>
   );
-}
+};
+
+export default SimpleRadio;

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}
       />
-      <Typography fontSize={12} mt={1}>
-        {description}
-      </Typography>
+      {description && (
+        <Typography fontSize={12} mt={1}>
+          {description}
+        </Typography>
+      )}
     </Box>
   );
 };

src/pages/list/index.ts

@@ -1,2 +1,3 @@
 import { tool as listSort } from './sort/meta';
-export const listTools = [];
+
+export const listTools = [listSort];

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 <Box>Lorem ipsum</Box>;
+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<string>('');
+  const [result, setResult] = useState<string>('');
+  // const formRef = useRef<FormikProps<typeof initialValues>>(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 (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolTextInput
+            title={'Input list'}
+            value={input}
+            onChange={setInput}
+          />
+        }
+        result={<ToolTextResult title={'Sorted list'} value={result} />}
+      />
+      <ToolOptions
+        compute={computeExternal}
+        getGroups={({ values, setFieldValue, handleChange }) => [
+          {
+            title: 'Input item separator',
+            component: splitOperators.map(({ title, description, type }) => (
+              <SimpleRadio
+                key={type}
+                onClick={() => setFieldValue('splitSeparatorType', type)}
+                title={title}
+                description={description}
+                checked={values.splitSeparatorType === type}
+              />
+            ))
+          },
+          {
+            title: 'Sort method',
+            component: <Box></Box>
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
+    </Box>
+  );
 }

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

src/pages/number/sum/index.tsx

@@ -67,7 +67,7 @@ export default function SplitText() {
                 withTextField ? (
                   <RadioWithTextField
                     key={type}
-                    radioValue={type}
+                    checked={type === values.extractionType}
                     title={title}
                     fieldName={'extractionType'}
                     description={description}
@@ -76,9 +76,7 @@ export default function SplitText() {
                         ? values[textValueAccessor].toString()
                         : ''
                     }
-                    onRadioChange={(type) =>
-                      setFieldValue('extractionType', type)
-                    }
+                    onRadioClick={() => setFieldValue('extractionType', type)}
                     onTextChange={(val) =>
                       textValueAccessor
                         ? setFieldValue(textValueAccessor, val)
@@ -88,9 +86,8 @@ export default function SplitText() {
                 ) : (
                   <SimpleRadio
                     key={title}
-                    onChange={() => setFieldValue('extractionType', type)}
-                    fieldName={'extractionType'}
-                    value={values.extractionType}
+                    onClick={() => setFieldValue('extractionType', type)}
+                    checked={values.extractionType === type}
                     description={description}
                     title={title}
                   />

src/pages/string/split/index.tsx

@@ -122,14 +122,12 @@ export default function SplitText() {
             component: splitOperators.map(({ title, description, type }) => (
               <RadioWithTextField
                 key={type}
-                radioValue={type}
+                checked={type === values.splitSeparatorType}
                 title={title}
                 fieldName={'splitSeparatorType'}
                 description={description}
                 value={values[`${type}Value`]}
-                onRadioChange={(type) =>
-                  setFieldValue('splitSeparatorType', type)
-                }
+                onRadioClick={() => setFieldValue('splitSeparatorType', type)}
                 onTextChange={(val) => setFieldValue(`${type}Value`, val)}
               />
             ))

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 = (