refactor: use ToolContent

src/pages/tools/list/find-most-popular/index.tsx

@@ -2,18 +2,18 @@ import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
 import {
   DisplayFormat,
   SortingMethod,
   SplitOperatorType,
   TopItemsList
 } 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';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -41,7 +41,7 @@ const splitOperators: {
   }
 ];
 
-export default function FindMostPopular() {
+export default function FindMostPopular({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -70,98 +70,94 @@ export default function FindMostPopular() {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolTextInput
-            title={'Input list'}
-            value={input}
-            onChange={setInput}
-          />
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+      }
+      resultComponent={
+        <ToolTextResult title={'Most popular items'} value={result} />
+      }
+      initialValues={initialValues}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'How to Extract List Items?',
+          component: (
+            <Box>
+              {splitOperators.map(({ title, description, type }) => (
+                <SimpleRadio
+                  key={type}
+                  onClick={() => updateField('splitSeparatorType', type)}
+                  title={title}
+                  description={description}
+                  checked={values.splitSeparatorType === type}
+                />
+              ))}
+              <TextFieldWithDesc
+                description={'Set a delimiting symbol or regular expression.'}
+                value={values.splitSeparator}
+                onOwnChange={(val) => updateField('splitSeparator', val)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Item comparison',
+          component: (
+            <Box>
+              <CheckboxWithDesc
+                title={'Remove empty items'}
+                description={'Ignore empty items from comparison.'}
+                checked={values.deleteEmptyItems}
+                onChange={(value) => updateField('deleteEmptyItems', value)}
+              />
+              <CheckboxWithDesc
+                title={'Trim top list items'}
+                description={
+                  'Remove leading and trailing spaces before comparing items'
+                }
+                checked={values.trimItems}
+                onChange={(value) => updateField('trimItems', value)}
+              />
+              <CheckboxWithDesc
+                title={'Ignore Item Case'}
+                description={'Compare all list items in lowercase.'}
+                checked={values.ignoreItemCase}
+                onChange={(value) => updateField('ignoreItemCase', value)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Top item output format',
+          component: (
+            <Box>
+              <SelectWithDesc
+                selected={values.displayFormat}
+                options={[
+                  { label: 'Show item percentage', value: 'percentage' },
+                  { label: 'Show item count', value: 'count' },
+                  { label: 'Show item total', value: 'total' }
+                ]}
+                onChange={(value) => updateField('displayFormat', value)}
+                description={'How to display the most popular list items?'}
+              />
+              <SelectWithDesc
+                selected={values.sortingMethod}
+                options={[
+                  { label: 'Sort Alphabetically', value: 'alphabetic' },
+                  { label: 'Sort by count', value: 'count' }
+                ]}
+                onChange={(value) => updateField('sortingMethod', value)}
+                description={'Select a sorting method.'}
+              />
+            </Box>
+          )
         }
-        result={<ToolTextResult title={'Most popular items'} value={result} />}
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'How to Extract List Items?',
-            component: (
-              <Box>
-                {splitOperators.map(({ title, description, type }) => (
-                  <SimpleRadio
-                    key={type}
-                    onClick={() => updateField('splitSeparatorType', type)}
-                    title={title}
-                    description={description}
-                    checked={values.splitSeparatorType === type}
-                  />
-                ))}
-                <TextFieldWithDesc
-                  description={'Set a delimiting symbol or regular expression.'}
-                  value={values.splitSeparator}
-                  onOwnChange={(val) => updateField('splitSeparator', val)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Item comparison',
-            component: (
-              <Box>
-                <CheckboxWithDesc
-                  title={'Remove empty items'}
-                  description={'Ignore empty items from comparison.'}
-                  checked={values.deleteEmptyItems}
-                  onChange={(value) => updateField('deleteEmptyItems', value)}
-                />
-                <CheckboxWithDesc
-                  title={'Trim top list items'}
-                  description={
-                    'Remove leading and trailing spaces before comparing items'
-                  }
-                  checked={values.trimItems}
-                  onChange={(value) => updateField('trimItems', value)}
-                />
-                <CheckboxWithDesc
-                  title={'Ignore Item Case'}
-                  description={'Compare all list items in lowercase.'}
-                  checked={values.ignoreItemCase}
-                  onChange={(value) => updateField('ignoreItemCase', value)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Top item output format',
-            component: (
-              <Box>
-                <SelectWithDesc
-                  selected={values.displayFormat}
-                  options={[
-                    { label: 'Show item percentage', value: 'percentage' },
-                    { label: 'Show item count', value: 'count' },
-                    { label: 'Show item total', value: 'total' }
-                  ]}
-                  onChange={(value) => updateField('displayFormat', value)}
-                  description={'How to display the most popular list items?'}
-                />
-                <SelectWithDesc
-                  selected={values.sortingMethod}
-                  options={[
-                    { label: 'Sort Alphabetically', value: 'alphabetic' },
-                    { label: 'Sort by count', value: 'count' }
-                  ]}
-                  onChange={(value) => updateField('sortingMethod', value)}
-                  description={'Select a sorting method.'}
-                />
-              </Box>
-            )
-          }
-        ]}
-        initialValues={initialValues}
-        input={input}
-      />
-    </Box>
+      ]}
+      compute={compute}
+      setInput={setInput}
+    />
   );
 }

src/pages/tools/list/group/index.tsx

@@ -2,13 +2,13 @@ import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
 import { groupList, 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 { formatNumber } from '../../../../utils/number';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -39,7 +39,7 @@ const splitOperators: {
   }
 ];
 
-export default function FindUnique() {
+export default function FindUnique({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -74,110 +74,106 @@ export default function FindUnique() {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolTextInput
-            title={'Input list'}
-            value={input}
-            onChange={setInput}
-          />
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+      }
+      resultComponent={
+        <ToolTextResult title={'Grouped items'} value={result} />
+      }
+      initialValues={initialValues}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Input Item Separator',
+          component: (
+            <Box>
+              {splitOperators.map(({ title, description, type }) => (
+                <SimpleRadio
+                  key={type}
+                  onClick={() => updateField('splitOperatorType', type)}
+                  title={title}
+                  description={description}
+                  checked={values.splitOperatorType === type}
+                />
+              ))}
+              <TextFieldWithDesc
+                description={'Set a delimiting symbol or regular expression.'}
+                value={values.splitSeparator}
+                onOwnChange={(val) => updateField('splitSeparator', val)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Group Size and Separators',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                value={values.groupNumber}
+                description={'Number of items in a group'}
+                type={'number'}
+                onOwnChange={(value) =>
+                  updateField('groupNumber', formatNumber(value, 1))
+                }
+              />
+              <TextFieldWithDesc
+                value={values.itemSeparator}
+                description={'Item separator character'}
+                onOwnChange={(value) => updateField('itemSeparator', value)}
+              />
+              <TextFieldWithDesc
+                value={values.groupSeparator}
+                description={'Group separator character'}
+                onOwnChange={(value) => updateField('groupSeparator', value)}
+              />
+              <TextFieldWithDesc
+                value={values.leftWrap}
+                description={"Group's left wrap symbol."}
+                onOwnChange={(value) => updateField('leftWrap', value)}
+              />
+              <TextFieldWithDesc
+                value={values.rightWrap}
+                description={"Group's right wrap symbol."}
+                onOwnChange={(value) => updateField('rightWrap', value)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Empty Items and Padding',
+          component: (
+            <Box>
+              <CheckboxWithDesc
+                title={'Delete Empty Items'}
+                description={
+                  "Ignore empty items and don't include them in the groups."
+                }
+                checked={values.deleteEmptyItems}
+                onChange={(value) => updateField('deleteEmptyItems', value)}
+              />
+              <CheckboxWithDesc
+                title={'Pad Non-full Groups'}
+                description={
+                  'Fill non-full groups with a custom item (enter below).'
+                }
+                checked={values.padNonFullGroup}
+                onChange={(value) => updateField('padNonFullGroup', value)}
+              />
+              <TextFieldWithDesc
+                value={values.paddingChar}
+                description={
+                  'Use this character or item to pad non-full groups.'
+                }
+                onOwnChange={(value) => updateField('paddingChar', value)}
+              />
+            </Box>
+          )
         }
-        result={<ToolTextResult title={'Grouped items'} value={result} />}
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Input Item Separator',
-            component: (
-              <Box>
-                {splitOperators.map(({ title, description, type }) => (
-                  <SimpleRadio
-                    key={type}
-                    onClick={() => updateField('splitOperatorType', type)}
-                    title={title}
-                    description={description}
-                    checked={values.splitOperatorType === type}
-                  />
-                ))}
-                <TextFieldWithDesc
-                  description={'Set a delimiting symbol or regular expression.'}
-                  value={values.splitSeparator}
-                  onOwnChange={(val) => updateField('splitSeparator', val)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Group Size and Separators',
-            component: (
-              <Box>
-                <TextFieldWithDesc
-                  value={values.groupNumber}
-                  description={'Number of items in a group'}
-                  type={'number'}
-                  onOwnChange={(value) =>
-                    updateField('groupNumber', formatNumber(value, 1))
-                  }
-                />
-                <TextFieldWithDesc
-                  value={values.itemSeparator}
-                  description={'Item separator character'}
-                  onOwnChange={(value) => updateField('itemSeparator', value)}
-                />
-                <TextFieldWithDesc
-                  value={values.groupSeparator}
-                  description={'Group separator character'}
-                  onOwnChange={(value) => updateField('groupSeparator', value)}
-                />
-                <TextFieldWithDesc
-                  value={values.leftWrap}
-                  description={"Group's left wrap symbol."}
-                  onOwnChange={(value) => updateField('leftWrap', value)}
-                />
-                <TextFieldWithDesc
-                  value={values.rightWrap}
-                  description={"Group's right wrap symbol."}
-                  onOwnChange={(value) => updateField('rightWrap', value)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Empty Items and Padding',
-            component: (
-              <Box>
-                <CheckboxWithDesc
-                  title={'Delete Empty Items'}
-                  description={
-                    "Ignore empty items and don't include them in the groups."
-                  }
-                  checked={values.deleteEmptyItems}
-                  onChange={(value) => updateField('deleteEmptyItems', value)}
-                />
-                <CheckboxWithDesc
-                  title={'Pad Non-full Groups'}
-                  description={
-                    'Fill non-full groups with a custom item (enter below).'
-                  }
-                  checked={values.padNonFullGroup}
-                  onChange={(value) => updateField('padNonFullGroup', value)}
-                />
-                <TextFieldWithDesc
-                  value={values.paddingChar}
-                  description={
-                    'Use this character or item to pad non-full groups.'
-                  }
-                  onOwnChange={(value) => updateField('paddingChar', value)}
-                />
-              </Box>
-            )
-          }
-        ]}
-        initialValues={initialValues}
-        input={input}
-      />
-    </Box>
+      ]}
+      compute={compute}
+      setInput={setInput}
+    />
   );
 }

src/pages/tools/list/rotate/index.tsx

@@ -2,12 +2,12 @@ import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
 import { rotateList, SplitOperatorType } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
 import SimpleRadio from '@components/options/SimpleRadio';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import { formatNumber } from '../../../../utils/number';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -52,7 +52,7 @@ const rotationDirections: {
   }
 ];
 
-export default function Rotate() {
+export default function Rotate({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -72,82 +72,74 @@ export default function Rotate() {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolTextInput
-            title={'Input list'}
-            value={input}
-            onChange={setInput}
-          />
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+      }
+      resultComponent={<ToolTextResult title={'Rotated list'} value={result} />}
+      initialValues={initialValues}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Item split mode',
+          component: (
+            <Box>
+              {splitOperators.map(({ title, description, type }) => (
+                <SimpleRadio
+                  key={type}
+                  onClick={() => updateField('splitOperatorType', type)}
+                  title={title}
+                  description={description}
+                  checked={values.splitOperatorType === type}
+                />
+              ))}
+              <TextFieldWithDesc
+                description={'Set a delimiting symbol or regular expression.'}
+                value={values.splitSeparator}
+                onOwnChange={(val) => updateField('splitSeparator', val)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Rotation Direction and Count',
+          component: (
+            <Box>
+              {rotationDirections.map(({ title, description, value }) => (
+                <SimpleRadio
+                  key={`${value}`}
+                  onClick={() => updateField('right', value)}
+                  title={title}
+                  description={description}
+                  checked={values.right === value}
+                />
+              ))}
+              <TextFieldWithDesc
+                description={'Number of items to rotate'}
+                value={values.step}
+                onOwnChange={(val) => updateField('step', formatNumber(val, 1))}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Rotated List Joining Symbol',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                value={values.joinSeparator}
+                onOwnChange={(value) => updateField('joinSeparator', value)}
+                description={
+                  'Enter the character that goes between items in the rotated list.'
+                }
+              />
+            </Box>
+          )
         }
-        result={<ToolTextResult title={'Rotated list'} value={result} />}
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Item split mode',
-            component: (
-              <Box>
-                {splitOperators.map(({ title, description, type }) => (
-                  <SimpleRadio
-                    key={type}
-                    onClick={() => updateField('splitOperatorType', type)}
-                    title={title}
-                    description={description}
-                    checked={values.splitOperatorType === type}
-                  />
-                ))}
-                <TextFieldWithDesc
-                  description={'Set a delimiting symbol or regular expression.'}
-                  value={values.splitSeparator}
-                  onOwnChange={(val) => updateField('splitSeparator', val)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Rotation Direction and Count',
-            component: (
-              <Box>
-                {rotationDirections.map(({ title, description, value }) => (
-                  <SimpleRadio
-                    key={`${value}`}
-                    onClick={() => updateField('right', value)}
-                    title={title}
-                    description={description}
-                    checked={values.right === value}
-                  />
-                ))}
-                <TextFieldWithDesc
-                  description={'Number of items to rotate'}
-                  value={values.step}
-                  onOwnChange={(val) =>
-                    updateField('step', formatNumber(val, 1))
-                  }
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Rotated List Joining Symbol',
-            component: (
-              <Box>
-                <TextFieldWithDesc
-                  value={values.joinSeparator}
-                  onOwnChange={(value) => updateField('joinSeparator', value)}
-                  description={
-                    'Enter the character that goes between items in the rotated list.'
-                  }
-                />
-              </Box>
-            )
-          }
-        ]}
-        initialValues={initialValues}
-        input={input}
-      />
-    </Box>
+      ]}
+      compute={compute}
+      setInput={setInput}
+    />
   );
 }

src/pages/tools/list/sort/index.tsx

@@ -2,13 +2,13 @@ import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
 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';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -36,7 +36,7 @@ const splitOperators: {
   }
 ];
 
-export default function SplitText() {
+export default function SplitText({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -65,101 +65,95 @@ export default function SplitText() {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolTextInput
-            title={'Input list'}
-            value={input}
-            onChange={setInput}
-          />
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
+      }
+      resultComponent={<ToolTextResult title={'Sorted list'} value={result} />}
+      initialValues={initialValues}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Input item separator',
+          component: (
+            <Box>
+              {splitOperators.map(({ title, description, type }) => (
+                <SimpleRadio
+                  key={type}
+                  onClick={() => updateField('splitSeparatorType', type)}
+                  title={title}
+                  description={description}
+                  checked={values.splitSeparatorType === type}
+                />
+              ))}
+              <TextFieldWithDesc
+                description={'Set a delimiting symbol or regular expression.'}
+                value={values.splitSeparator}
+                onOwnChange={(val) => updateField('splitSeparator', val)}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Sort method',
+          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>
+          )
         }
-        result={<ToolTextResult title={'Sorted list'} value={result} />}
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Input item separator',
-            component: (
-              <Box>
-                {splitOperators.map(({ title, description, type }) => (
-                  <SimpleRadio
-                    key={type}
-                    onClick={() => updateField('splitSeparatorType', type)}
-                    title={title}
-                    description={description}
-                    checked={values.splitSeparatorType === type}
-                  />
-                ))}
-                <TextFieldWithDesc
-                  description={'Set a delimiting symbol or regular expression.'}
-                  value={values.splitSeparator}
-                  onOwnChange={(val) => updateField('splitSeparator', val)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Sort method',
-            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}
-        input={input}
-      />
-    </Box>
+      ]}
+      compute={compute}
+      setInput={setInput}
+    />
   );
 }