feat: sort list

.idea/workspace.xml

@@ -4,7 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: playwright report" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: idea config">
+      <change afterPath="$PROJECT_DIR$/src/components/options/SelectWithDesc.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/list/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/list/sort/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/sort/index.tsx" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -56,7 +62,7 @@
     "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",
+    "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/components/options",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.tslint": "true",
     "node.js.selected.package.eslint": "(autodetect)",
@@ -89,11 +95,11 @@
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\assets" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string\split" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\images" />
-      <recent name="C:\Users\HP\IdeaProjects\omni-tools\public" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components" />
@@ -102,7 +108,7 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\tools" />
     </key>
   </component>
-  <component name="RunManager" selected="npm.test:e2e">
+  <component name="RunManager" selected="npm.dev">
     <configuration name="JoinText Component.should merge text pieces with specified join character" type="JavaScriptTestRunnerPlaywright" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <playwright-package value="$PROJECT_DIR$/node_modules/@playwright/test" />
@@ -158,11 +164,11 @@
     </configuration>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.dev" />
         <item itemvalue="npm.test:e2e" />
         <item itemvalue="Playwright.JoinText Component.should merge text pieces with specified join character" />
         <item itemvalue="npm.test" />
         <item itemvalue="npm.lint" />
-        <item itemvalue="npm.dev" />
       </list>
     </recent_temporary>
   </component>
@@ -198,14 +204,7 @@
       <workItem from="1719475764139" duration="14903000" />
       <workItem from="1719492452780" duration="8000" />
       <workItem from="1719496624579" duration="6148000" />
-    </task>
+      <workItem from="1720542757452" duration="2683000" />
-    <task id="LOCAL-00038" summary="fix: readme">
-      <option name="closed" value="true" />
-      <created>1719171905785</created>
-      <option name="number" value="00038" />
-      <option name="presentableId" value="LOCAL-00038" />
-      <option name="project" value="LOCAL" />
-      <updated>1719171905785</updated>
     </task>
     <task id="LOCAL-00039" summary="fix: build">
       <option name="closed" value="true" />
@@ -591,7 +590,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719600693979</updated>
     </task>
-    <option name="localTasksCounter" value="87" />
+    <task id="LOCAL-00087" summary="chore: idea config">
+      <option name="closed" value="true" />
+      <created>1719600739052</created>
+      <option name="number" value="00087" />
+      <option name="presentableId" value="LOCAL-00087" />
+      <option name="project" value="LOCAL" />
+      <updated>1719600739052</updated>
+    </task>
+    <option name="localTasksCounter" value="88" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -635,7 +642,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="fix: readme" />
     <MESSAGE value="refactor: tool input and result" />
     <MESSAGE value="feat: create transparent png" />
     <MESSAGE value="fix: ToolFileInput.tsx" />
@@ -660,7 +666,8 @@
     <MESSAGE value="chore: jimp types" />
     <MESSAGE value="fix: package.json" />
     <MESSAGE value="feat: playwright report" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: playwright report" />
+    <MESSAGE value="chore: idea config" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: idea config" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/components/options/SelectWithDesc.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Box,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Typography
+} from '@mui/material';
+
+interface Option<T extends string | boolean> {
+  label: string;
+  value: T;
+}
+
+const SelectWithDesc = <T extends string | boolean>({
+  selected,
+  options,
+  onChange,
+  description
+}: {
+  selected: T;
+  options: Option<T>[];
+  onChange: (value: T) => void;
+  description: string;
+}) => {
+  const handleChange = (event: SelectChangeEvent<T>) => {
+    onChange(event.target.value as T);
+  };
+
+  return (
+    <Box>
+      <Select value={selected} onChange={handleChange}>
+        {options.map((option) => (
+          <MenuItem key={option.label} value={option.value.toString()}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+      <Typography fontSize={12} mt={1}>
+        {description}
+      </Typography>
+    </Box>
+  );
+};
+
+export default SelectWithDesc;

src/components/options/ToolOptionGroups.tsx

@@ -15,7 +15,7 @@ export default function ToolOptionGroups({
   return (
     <Grid container spacing={2}>
       {groups.map((group) => (
-        <Grid item xs={12} md={6} key={group.title}>
+        <Grid item xs={12} md={4} key={group.title}>
           <Typography mb={1} fontSize={22}>
             {group.title}
           </Typography>

src/pages/list/index.ts

@@ -9,4 +9,15 @@ import { tool as listTruncate } from './truncate/meta';
 import { tool as listShuffle } from './shuffle/meta';
 import { tool as listSort } from './sort/meta';
 
-export const listTools = [listSort];
+export const listTools = [
+  listSort,
+  listUnwrap,
+  listReverse,
+  listFindUnique,
+  listFindMostPopular,
+  listGroup,
+  listWrap,
+  listRotate,
+  listShuffle,
+  listTruncate
+];

src/pages/list/sort/index.tsx

@@ -8,6 +8,8 @@ import { Sort, SortingMethod, SplitOperatorType } from './service';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
 import SimpleRadio from '../../../components/options/SimpleRadio';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
+import SelectWithDesc from '../../../components/options/SelectWithDesc';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -105,7 +107,57 @@ export default function SplitText() {
           },
           {
             title: 'Sort method',
-            component: <Box></Box>
+            component: (
+              <Box>
+                <SelectWithDesc
+                  selected={values.sortingMethod}
+                  options={[
+                    { label: 'Sort Alphabetically', value: 'alphabetic' },
+                    { label: 'Sort Numerically', value: 'numeric' },
+                    { label: 'Sort by Length', value: 'length' }
+                  ]}
+                  onChange={(value) => updateField('sortingMethod', value)}
+                  description={'Select a sorting method.'}
+                />
+                <SelectWithDesc
+                  selected={values.increasing}
+                  options={[
+                    { label: 'Increasing order', value: true },
+                    { label: 'Decreasing order', value: false }
+                  ]}
+                  onChange={(value) => updateField('increasing', value)}
+                  description={'Select a sorting order.'}
+                />
+                <CheckboxWithDesc
+                  title={'Case Sensitive Sort'}
+                  description={
+                    'Sort uppercase and lowercase items separately. Capital letters precede lowercase letters in an ascending list. (Works only in alphabetical sorting mode.)'
+                  }
+                  checked={values.caseSensitive}
+                  onChange={(val) => updateField('caseSensitive', val)}
+                />
+              </Box>
+            )
+          },
+          {
+            title: 'Sorted item properties',
+            component: (
+              <Box>
+                <TextFieldWithDesc
+                  description={
+                    'Use this symbol as a joiner between items in a sorted list.'
+                  }
+                  value={values.joinSeparator}
+                  onOwnChange={(val) => updateField('joinSeparator', val)}
+                />
+                <CheckboxWithDesc
+                  title={'Remove duplicates'}
+                  description={'Delete duplicate list items.'}
+                  checked={values.removeDuplicated}
+                  onChange={(val) => updateField('removeDuplicated', val)}
+                />
+              </Box>
+            )
           }
         ]}
         initialValues={initialValues}