refactor: tools folder inside pages

iib0011 · Feb 23, 2025 · 64936ab · 64936ab
1 parent 62f084e
commit 64936ab
Show file tree

Hide file tree

Showing 117 changed files with 447 additions and 194 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.23.1",
+    "type-fest": "^4.35.0",
     "yup": "^1.4.0"
   },
   "devDependencies": {

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -15,12 +15,12 @@ const exampleTools: { label: string; url: string }[] = [
   },
   { label: 'Convert text to morse code', url: '/string/to-morse' },
   { label: 'Change GIF speed', url: '/gif/change-speed' },
-  { label: 'Pick a random item', url: '' },
-  { label: 'Find and replace text', url: '' },
-  { label: 'Convert emoji to image', url: '' },
-  { label: 'Split a string', url: '/string/split' },
+  { label: 'Sort a list', url: 'list/sort' },
+  { label: 'Repeat text', url: 'string/repeat' },
+  { label: 'Split a text', url: '/string/split' },
   { label: 'Calculate number sum', url: '/number/sum' },
-  { label: 'Pixelate an image', url: '' }
+  { label: 'Shuffle a list', url: 'list/shuffle' },
+  { label: 'Change colors in image', url: 'png/change-colors-in-png' }
 ];
 export default function Hero() {
   const [inputValue, setInputValue] = useState<string>('');

diff --git a/src/pages/image/index.ts → src/pages/tools/image/index.ts b/src/pages/image/index.ts → src/pages/tools/image/index.ts
diff --git a/...s-in-png/change-colors-in-png.e2e.spec.ts → ...s-in-png/change-colors-in-png.e2e.spec.ts b/...s-in-png/change-colors-in-png.e2e.spec.ts → ...s-in-png/change-colors-in-png.e2e.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { Buffer } from 'buffer';
 import path from 'path';
 import Jimp from 'jimp';
-import { convertHexToRGBA } from '../../../../utils/color';
+import { convertHexToRGBA } from '../../../../../utils/color';
 
 test.describe('Change colors in png', () => {
   test.beforeEach(async ({ page }) => {

diff --git a/.../image/png/change-colors-in-png/index.tsx → .../image/png/change-colors-in-png/index.tsx b/.../image/png/change-colors-in-png/index.tsx → .../image/png/change-colors-in-png/index.tsx
@@ -1,13 +1,13 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import ToolFileInput from '../../../../components/input/ToolFileInput';
-import ToolFileResult from '../../../../components/result/ToolFileResult';
-import ToolOptions from '../../../../components/options/ToolOptions';
-import ColorSelector from '../../../../components/options/ColorSelector';
+import ToolFileInput from '@components/input/ToolFileInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import ToolOptions from '@components/options/ToolOptions';
+import ColorSelector from '@components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '../../../../components/ToolInputAndResult';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 import { areColorsSimilar } from 'utils/color';
 
 const initialValues = {

diff --git a/...es/image/png/change-colors-in-png/meta.ts → ...ls/image/png/change-colors-in-png/meta.ts b/...es/image/png/change-colors-in-png/meta.ts → ...ls/image/png/change-colors-in-png/meta.ts
diff --git a/...s/image/png/change-colors-in-png/test.png → ...s/image/png/change-colors-in-png/test.png b/...s/image/png/change-colors-in-png/test.png → ...s/image/png/change-colors-in-png/test.png
diff --git a/...jgp-to-png/convert-jgp-to-png.e2e.spec.ts → ...jgp-to-png/convert-jgp-to-png.e2e.spec.ts b/...jgp-to-png/convert-jgp-to-png.e2e.spec.ts → ...jgp-to-png/convert-jgp-to-png.e2e.spec.ts
diff --git a/...es/image/png/convert-jgp-to-png/index.tsx → ...ls/image/png/convert-jgp-to-png/index.tsx b/...es/image/png/convert-jgp-to-png/index.tsx → ...ls/image/png/convert-jgp-to-png/index.tsx
diff --git a/...ages/image/png/convert-jgp-to-png/meta.ts → ...ools/image/png/convert-jgp-to-png/meta.ts b/...ages/image/png/convert-jgp-to-png/meta.ts → ...ools/image/png/convert-jgp-to-png/meta.ts
diff --git a/...ges/image/png/convert-jgp-to-png/test.jpg → ...ols/image/png/convert-jgp-to-png/test.jpg b/...ges/image/png/convert-jgp-to-png/test.jpg → ...ols/image/png/convert-jgp-to-png/test.jpg
diff --git a/...ransparent/create-transparent.e2e.spec.ts → ...ransparent/create-transparent.e2e.spec.ts b/...ransparent/create-transparent.e2e.spec.ts → ...ransparent/create-transparent.e2e.spec.ts
diff --git a/...es/image/png/create-transparent/index.tsx → ...ls/image/png/create-transparent/index.tsx b/...es/image/png/create-transparent/index.tsx → ...ls/image/png/create-transparent/index.tsx
@@ -1,13 +1,13 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import ToolFileInput from '../../../../components/input/ToolFileInput';
-import ToolFileResult from '../../../../components/result/ToolFileResult';
-import ToolOptions from '../../../../components/options/ToolOptions';
-import ColorSelector from '../../../../components/options/ColorSelector';
+import ToolFileInput from '@components/input/ToolFileInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import ToolOptions from '@components/options/ToolOptions';
+import ColorSelector from '@components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '../../../../components/ToolInputAndResult';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 import { areColorsSimilar } from 'utils/color';
 
 const initialValues = {

diff --git a/...ages/image/png/create-transparent/meta.ts → ...ools/image/png/create-transparent/meta.ts b/...ages/image/png/create-transparent/meta.ts → ...ools/image/png/create-transparent/meta.ts
diff --git a/...ges/image/png/create-transparent/test.png → ...ols/image/png/create-transparent/test.png b/...ges/image/png/create-transparent/test.png → ...ols/image/png/create-transparent/test.png
diff --git a/src/pages/image/png/index.ts → src/pages/tools/image/png/index.ts b/src/pages/image/png/index.ts → src/pages/tools/image/png/index.ts
diff --git a/.../list/duplicate/duplicate.service.test.ts → .../list/duplicate/duplicate.service.test.ts b/.../list/duplicate/duplicate.service.test.ts → .../list/duplicate/duplicate.service.test.ts
diff --git a/src/pages/list/duplicate/index.tsx → src/pages/tools/list/duplicate/index.tsx b/src/pages/list/duplicate/index.tsx → src/pages/tools/list/duplicate/index.tsx
diff --git a/src/pages/list/duplicate/meta.ts → src/pages/tools/list/duplicate/meta.ts b/src/pages/list/duplicate/meta.ts → src/pages/tools/list/duplicate/meta.ts
diff --git a/src/pages/list/duplicate/service.ts → src/pages/tools/list/duplicate/service.ts b/src/pages/list/duplicate/service.ts → src/pages/tools/list/duplicate/service.ts
diff --git a/...popular/find-most-popular.service.test.ts → ...popular/find-most-popular.service.test.ts b/...popular/find-most-popular.service.test.ts → ...popular/find-most-popular.service.test.ts
diff --git a/src/pages/list/find-most-popular/index.tsx → ...es/tools/list/find-most-popular/index.tsx b/src/pages/list/find-most-popular/index.tsx → ...es/tools/list/find-most-popular/index.tsx
@@ -1,19 +1,19 @@
 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 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 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,

diff --git a/src/pages/list/find-most-popular/meta.ts → ...ages/tools/list/find-most-popular/meta.ts b/src/pages/list/find-most-popular/meta.ts → ...ages/tools/list/find-most-popular/meta.ts
diff --git a/src/pages/list/find-most-popular/service.ts → ...s/tools/list/find-most-popular/service.ts b/src/pages/list/find-most-popular/service.ts → ...s/tools/list/find-most-popular/service.ts
diff --git a/...t/find-unique/find-unique.service.test.ts → ...t/find-unique/find-unique.service.test.ts b/...t/find-unique/find-unique.service.test.ts → ...t/find-unique/find-unique.service.test.ts
diff --git a/src/pages/list/find-unique/index.tsx → src/pages/tools/list/find-unique/index.tsx b/src/pages/list/find-unique/index.tsx → src/pages/tools/list/find-unique/index.tsx
@@ -1,13 +1,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 ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { findUniqueCompute, 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 ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

diff --git a/src/pages/list/find-unique/meta.ts → src/pages/tools/list/find-unique/meta.ts b/src/pages/list/find-unique/meta.ts → src/pages/tools/list/find-unique/meta.ts
diff --git a/src/pages/list/find-unique/service.ts → src/pages/tools/list/find-unique/service.ts b/src/pages/list/find-unique/service.ts → src/pages/tools/list/find-unique/service.ts
diff --git a/src/pages/list/group/group.service.test.ts → ...es/tools/list/group/group.service.test.ts b/src/pages/list/group/group.service.test.ts → ...es/tools/list/group/group.service.test.ts
diff --git a/src/pages/list/group/index.tsx → src/pages/tools/list/group/index.tsx b/src/pages/list/group/index.tsx → src/pages/tools/list/group/index.tsx
@@ -1,14 +1,14 @@
 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 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 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';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

diff --git a/src/pages/list/group/meta.ts → src/pages/tools/list/group/meta.ts b/src/pages/list/group/meta.ts → src/pages/tools/list/group/meta.ts
diff --git a/src/pages/list/group/service.ts → src/pages/tools/list/group/service.ts b/src/pages/list/group/service.ts → src/pages/tools/list/group/service.ts
diff --git a/src/pages/list/index.ts → src/pages/tools/list/index.ts b/src/pages/list/index.ts → src/pages/tools/list/index.ts
diff --git a/src/pages/list/reverse/index.tsx → src/pages/tools/list/reverse/index.tsx b/src/pages/list/reverse/index.tsx → src/pages/tools/list/reverse/index.tsx
@@ -1,12 +1,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 ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions 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 ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

diff --git a/src/pages/list/reverse/meta.ts → src/pages/tools/list/reverse/meta.ts b/src/pages/list/reverse/meta.ts → src/pages/tools/list/reverse/meta.ts
diff --git a/...ages/list/reverse/reverse.service.test.ts → ...ools/list/reverse/reverse.service.test.ts b/...ages/list/reverse/reverse.service.test.ts → ...ools/list/reverse/reverse.service.test.ts
diff --git a/src/pages/list/reverse/service.ts → src/pages/tools/list/reverse/service.ts b/src/pages/list/reverse/service.ts → src/pages/tools/list/reverse/service.ts
diff --git a/src/pages/list/rotate/index.tsx → src/pages/tools/list/rotate/index.tsx b/src/pages/list/rotate/index.tsx → src/pages/tools/list/rotate/index.tsx
@@ -1,13 +1,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 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 ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { formatNumber } from '../../../../utils/number';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

diff --git a/src/pages/list/rotate/meta.ts → src/pages/tools/list/rotate/meta.ts b/src/pages/list/rotate/meta.ts → src/pages/tools/list/rotate/meta.ts
diff --git a/src/pages/list/rotate/rotate.service.test.ts → .../tools/list/rotate/rotate.service.test.ts b/src/pages/list/rotate/rotate.service.test.ts → .../tools/list/rotate/rotate.service.test.ts
diff --git a/src/pages/list/rotate/service.ts → src/pages/tools/list/rotate/service.ts b/src/pages/list/rotate/service.ts → src/pages/tools/list/rotate/service.ts
diff --git a/src/pages/list/shuffle/index.tsx → src/pages/tools/list/shuffle/index.tsx b/src/pages/list/shuffle/index.tsx → src/pages/tools/list/shuffle/index.tsx
@@ -1,13 +1,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 ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { shuffleList, SplitOperatorType } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import SimpleRadio from '../../../components/options/SimpleRadio';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import { isNumber } from '../../../utils/string';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { isNumber } from '../../../../utils/string';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

diff --git a/src/pages/list/shuffle/meta.ts → src/pages/tools/list/shuffle/meta.ts b/src/pages/list/shuffle/meta.ts → src/pages/tools/list/shuffle/meta.ts
diff --git a/src/pages/list/shuffle/service.ts → src/pages/tools/list/shuffle/service.ts b/src/pages/list/shuffle/service.ts → src/pages/tools/list/shuffle/service.ts
diff --git a/...ages/list/shuffle/shuffle.service.test.ts → ...ools/list/shuffle/shuffle.service.test.ts b/...ages/list/shuffle/shuffle.service.test.ts → ...ools/list/shuffle/shuffle.service.test.ts
diff --git a/src/pages/list/sort/index.tsx → src/pages/tools/list/sort/index.tsx b/src/pages/list/sort/index.tsx → src/pages/tools/list/sort/index.tsx
@@ -1,14 +1,14 @@
 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 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 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,

diff --git a/src/pages/list/sort/meta.ts → src/pages/tools/list/sort/meta.ts b/src/pages/list/sort/meta.ts → src/pages/tools/list/sort/meta.ts
diff --git a/src/pages/list/sort/service.ts → src/pages/tools/list/sort/service.ts b/src/pages/list/sort/service.ts → src/pages/tools/list/sort/service.ts
diff --git a/src/pages/list/sort/sort.service.test.ts → ...ages/tools/list/sort/sort.service.test.ts b/src/pages/list/sort/sort.service.test.ts → ...ages/tools/list/sort/sort.service.test.ts
diff --git a/src/pages/list/truncate/index.tsx → src/pages/tools/list/truncate/index.tsx b/src/pages/list/truncate/index.tsx → src/pages/tools/list/truncate/index.tsx
diff --git a/src/pages/list/truncate/meta.ts → src/pages/tools/list/truncate/meta.ts b/src/pages/list/truncate/meta.ts → src/pages/tools/list/truncate/meta.ts
diff --git a/src/pages/list/truncate/service.ts → src/pages/tools/list/truncate/service.ts b/src/pages/list/truncate/service.ts → src/pages/tools/list/truncate/service.ts
diff --git a/...es/list/truncate/truncate.service.test.ts → ...ls/list/truncate/truncate.service.test.ts b/...es/list/truncate/truncate.service.test.ts → ...ls/list/truncate/truncate.service.test.ts
diff --git a/src/pages/list/unwrap/index.tsx → src/pages/tools/list/unwrap/index.tsx b/src/pages/list/unwrap/index.tsx → src/pages/tools/list/unwrap/index.tsx
diff --git a/src/pages/list/unwrap/meta.ts → src/pages/tools/list/unwrap/meta.ts b/src/pages/list/unwrap/meta.ts → src/pages/tools/list/unwrap/meta.ts
diff --git a/src/pages/list/unwrap/service.ts → src/pages/tools/list/unwrap/service.ts b/src/pages/list/unwrap/service.ts → src/pages/tools/list/unwrap/service.ts
diff --git a/src/pages/list/unwrap/unwrap.service.test.ts → .../tools/list/unwrap/unwrap.service.test.ts b/src/pages/list/unwrap/unwrap.service.test.ts → .../tools/list/unwrap/unwrap.service.test.ts
diff --git a/src/pages/list/wrap/index.tsx → src/pages/tools/list/wrap/index.tsx b/src/pages/list/wrap/index.tsx → src/pages/tools/list/wrap/index.tsx
diff --git a/src/pages/list/wrap/meta.ts → src/pages/tools/list/wrap/meta.ts b/src/pages/list/wrap/meta.ts → src/pages/tools/list/wrap/meta.ts
diff --git a/src/pages/list/wrap/service.ts → src/pages/tools/list/wrap/service.ts b/src/pages/list/wrap/service.ts → src/pages/tools/list/wrap/service.ts
diff --git a/src/pages/list/wrap/wrap.service.test.ts → ...ages/tools/list/wrap/wrap.service.test.ts b/src/pages/list/wrap/wrap.service.test.ts → ...ages/tools/list/wrap/wrap.service.test.ts
diff --git a/.../number/generate/generate.service.test.ts → .../number/generate/generate.service.test.ts b/.../number/generate/generate.service.test.ts → .../number/generate/generate.service.test.ts
diff --git a/src/pages/number/generate/index.tsx → src/pages/tools/number/generate/index.tsx b/src/pages/number/generate/index.tsx → src/pages/tools/number/generate/index.tsx
@@ -1,10 +1,10 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { listOfIntegers } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 
 const initialValues = {
   firstValue: '1',

diff --git a/src/pages/number/generate/meta.ts → src/pages/tools/number/generate/meta.ts b/src/pages/number/generate/meta.ts → src/pages/tools/number/generate/meta.ts
diff --git a/src/pages/number/generate/service.ts → src/pages/tools/number/generate/service.ts b/src/pages/number/generate/service.ts → src/pages/tools/number/generate/service.ts
diff --git a/src/pages/number/index.ts → src/pages/tools/number/index.ts b/src/pages/number/index.ts → src/pages/tools/number/index.ts
diff --git a/src/pages/number/sum/index.tsx → src/pages/tools/number/sum/index.tsx b/src/pages/number/sum/index.tsx → src/pages/tools/number/sum/index.tsx
@@ -1,13 +1,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 ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions 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 RadioWithTextField from '@components/options/RadioWithTextField';
+import SimpleRadio from '@components/options/SimpleRadio';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 
 const initialValues = {
   extractionType: 'smart' as NumberExtractionType,

diff --git a/src/pages/number/sum/meta.ts → src/pages/tools/number/sum/meta.ts b/src/pages/number/sum/meta.ts → src/pages/tools/number/sum/meta.ts
diff --git a/src/pages/number/sum/service.ts → src/pages/tools/number/sum/service.ts b/src/pages/number/sum/service.ts → src/pages/tools/number/sum/service.ts
diff --git a/src/pages/number/sum/sum.service.test.ts → ...ages/tools/number/sum/sum.service.test.ts b/src/pages/number/sum/sum.service.test.ts → ...ages/tools/number/sum/sum.service.test.ts
diff --git a/...indrome/create-palindrome.service.test.ts → ...indrome/create-palindrome.service.test.ts b/...indrome/create-palindrome.service.test.ts → ...indrome/create-palindrome.service.test.ts
diff --git a/src/pages/string/create-palindrome/index.tsx → .../tools/string/create-palindrome/index.tsx b/src/pages/string/create-palindrome/index.tsx → .../tools/string/create-palindrome/index.tsx
diff --git a/src/pages/string/create-palindrome/meta.ts → ...es/tools/string/create-palindrome/meta.ts b/src/pages/string/create-palindrome/meta.ts → ...es/tools/string/create-palindrome/meta.ts
diff --git a/...pages/string/create-palindrome/service.ts → ...tools/string/create-palindrome/service.ts b/...pages/string/create-palindrome/service.ts → ...tools/string/create-palindrome/service.ts
diff --git a/...bstring/extract-substring.service.test.ts → ...bstring/extract-substring.service.test.ts b/...bstring/extract-substring.service.test.ts → ...bstring/extract-substring.service.test.ts
diff --git a/src/pages/string/extract-substring/index.tsx → .../tools/string/extract-substring/index.tsx b/src/pages/string/extract-substring/index.tsx → .../tools/string/extract-substring/index.tsx
diff --git a/src/pages/string/extract-substring/meta.ts → ...es/tools/string/extract-substring/meta.ts b/src/pages/string/extract-substring/meta.ts → ...es/tools/string/extract-substring/meta.ts
diff --git a/...pages/string/extract-substring/service.ts → ...tools/string/extract-substring/service.ts b/...pages/string/extract-substring/service.ts → ...tools/string/extract-substring/service.ts
diff --git a/src/pages/string/index.ts → src/pages/tools/string/index.ts b/src/pages/string/index.ts → src/pages/tools/string/index.ts
diff --git a/src/pages/string/join/index.tsx → src/pages/tools/string/join/index.tsx b/src/pages/string/join/index.tsx → src/pages/tools/string/join/index.tsx
@@ -1,17 +1,17 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { mergeText } from './service';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 
-import ToolInfo from '../../../components/ToolInfo';
-import Separator from '../../../components/Separator';
-import Examples from '../../../components/examples/Examples';
+import ToolInfo from '@components/ToolInfo';
+import Separator from '@components/Separator';
+import Examples from '@components/examples/Examples';
 
 const initialValues = {
   joinCharacter: '',

diff --git a/src/pages/string/join/meta.ts → src/pages/tools/string/join/meta.ts b/src/pages/string/join/meta.ts → src/pages/tools/string/join/meta.ts
diff --git a/src/pages/string/join/service.ts → src/pages/tools/string/join/service.ts b/src/pages/string/join/service.ts → src/pages/tools/string/join/service.ts
diff --git a/...pages/string/join/string-join.e2e.spec.ts → ...tools/string/join/string-join.e2e.spec.ts b/...pages/string/join/string-join.e2e.spec.ts → ...tools/string/join/string-join.e2e.spec.ts
diff --git a/...s/string/join/string-join.service.test.ts → ...s/string/join/string-join.service.test.ts b/...s/string/join/string-join.service.test.ts → ...s/string/join/string-join.service.test.ts
diff --git a/src/pages/string/palindrome/index.tsx → src/pages/tools/string/palindrome/index.tsx b/src/pages/string/palindrome/index.tsx → src/pages/tools/string/palindrome/index.tsx
diff --git a/src/pages/string/palindrome/meta.ts → src/pages/tools/string/palindrome/meta.ts b/src/pages/string/palindrome/meta.ts → src/pages/tools/string/palindrome/meta.ts
diff --git a/...ing/palindrome/palindrome.service.test.ts → ...ing/palindrome/palindrome.service.test.ts b/...ing/palindrome/palindrome.service.test.ts → ...ing/palindrome/palindrome.service.test.ts
diff --git a/src/pages/string/palindrome/service.ts → src/pages/tools/string/palindrome/service.ts b/src/pages/string/palindrome/service.ts → src/pages/tools/string/palindrome/service.ts
diff --git a/src/pages/string/randomize-case/index.tsx → ...ges/tools/string/randomize-case/index.tsx b/src/pages/string/randomize-case/index.tsx → ...ges/tools/string/randomize-case/index.tsx
diff --git a/src/pages/string/randomize-case/meta.ts → ...pages/tools/string/randomize-case/meta.ts b/src/pages/string/randomize-case/meta.ts → ...pages/tools/string/randomize-case/meta.ts
diff --git a/...omize-case/randomize-case.service.test.ts → ...omize-case/randomize-case.service.test.ts b/...omize-case/randomize-case.service.test.ts → ...omize-case/randomize-case.service.test.ts
diff --git a/src/pages/string/randomize-case/service.ts → ...es/tools/string/randomize-case/service.ts b/src/pages/string/randomize-case/service.ts → ...es/tools/string/randomize-case/service.ts
diff --git a/src/pages/string/reverse/index.tsx → src/pages/tools/string/reverse/index.tsx b/src/pages/string/reverse/index.tsx → src/pages/tools/string/reverse/index.tsx
diff --git a/src/pages/string/reverse/meta.ts → src/pages/tools/string/reverse/meta.ts b/src/pages/string/reverse/meta.ts → src/pages/tools/string/reverse/meta.ts
diff --git a/...es/string/reverse/reverse.service.test.ts → ...ls/string/reverse/reverse.service.test.ts b/...es/string/reverse/reverse.service.test.ts → ...ls/string/reverse/reverse.service.test.ts
diff --git a/src/pages/string/reverse/service.ts → src/pages/tools/string/reverse/service.ts b/src/pages/string/reverse/service.ts → src/pages/tools/string/reverse/service.ts
diff --git a/src/pages/string/split/index.tsx → src/pages/tools/string/split/index.tsx b/src/pages/string/split/index.tsx → src/pages/tools/string/split/index.tsx
@@ -1,12 +1,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 ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { compute, SplitOperatorType } from './service';
-import RadioWithTextField from '../../../components/options/RadioWithTextField';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import RadioWithTextField from '@components/options/RadioWithTextField';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,

diff --git a/src/pages/string/split/meta.ts → src/pages/tools/string/split/meta.ts b/src/pages/string/split/meta.ts → src/pages/tools/string/split/meta.ts
diff --git a/src/pages/string/split/service.ts → src/pages/tools/string/split/service.ts b/src/pages/string/split/service.ts → src/pages/tools/string/split/service.ts
diff --git a/...string/split/string-split.service.test.ts → ...string/split/string-split.service.test.ts b/...string/split/string-split.service.test.ts → ...string/split/string-split.service.test.ts
diff --git a/src/pages/string/to-morse/index.tsx → src/pages/tools/string/to-morse/index.tsx b/src/pages/string/to-morse/index.tsx → src/pages/tools/string/to-morse/index.tsx
@@ -1,11 +1,11 @@
 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 ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { compute } from './service';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 
 const initialValues = {
   dotSymbol: '.',

diff --git a/src/pages/string/to-morse/meta.ts → src/pages/tools/string/to-morse/meta.ts b/src/pages/string/to-morse/meta.ts → src/pages/tools/string/to-morse/meta.ts
diff --git a/src/pages/string/to-morse/service.ts → src/pages/tools/string/to-morse/service.ts b/src/pages/string/to-morse/service.ts → src/pages/tools/string/to-morse/service.ts
diff --git a/.../string/to-morse/to-morse.service.test.ts → .../string/to-morse/to-morse.service.test.ts b/.../string/to-morse/to-morse.service.test.ts → .../string/to-morse/to-morse.service.test.ts
diff --git a/src/pages/string/uppercase/index.tsx → src/pages/tools/string/uppercase/index.tsx b/src/pages/string/uppercase/index.tsx → src/pages/tools/string/uppercase/index.tsx
diff --git a/src/pages/string/uppercase/meta.ts → src/pages/tools/string/uppercase/meta.ts b/src/pages/string/uppercase/meta.ts → src/pages/tools/string/uppercase/meta.ts
diff --git a/src/pages/string/uppercase/service.ts → src/pages/tools/string/uppercase/service.ts b/src/pages/string/uppercase/service.ts → src/pages/tools/string/uppercase/service.ts
diff --git a/...tring/uppercase/uppercase.service.test.ts → ...tring/uppercase/uppercase.service.test.ts b/...tring/uppercase/uppercase.service.test.ts → ...tring/uppercase/uppercase.service.test.ts
diff --git a/src/pages/video/gif/change-speed/index.tsx → ...es/tools/video/gif/change-speed/index.tsx b/src/pages/video/gif/change-speed/index.tsx → ...es/tools/video/gif/change-speed/index.tsx
@@ -1,14 +1,14 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import ToolFileInput from '../../../../components/input/ToolFileInput';
-import ToolFileResult from '../../../../components/result/ToolFileResult';
-import ToolOptions from '../../../../components/options/ToolOptions';
+import ToolFileInput from '@components/input/ToolFileInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import ToolOptions from '@components/options/ToolOptions';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '../../../../components/ToolInputAndResult';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 import Typography from '@mui/material/Typography';
 import { FrameOptions, GifReader, GifWriter } from 'omggif';
-import { gifBinaryToFile } from '../../../../utils/gif';
+import { gifBinaryToFile } from '../../../../../utils/gif';
 
 const initialValues = {
   newSpeed: 200

diff --git a/src/pages/video/gif/change-speed/meta.ts → ...ages/tools/video/gif/change-speed/meta.ts b/src/pages/video/gif/change-speed/meta.ts → ...ages/tools/video/gif/change-speed/meta.ts
diff --git a/src/pages/video/gif/index.ts → src/pages/tools/video/gif/index.ts b/src/pages/video/gif/index.ts → src/pages/tools/video/gif/index.ts
diff --git a/src/pages/video/index.ts → src/pages/tools/video/index.ts b/src/pages/video/index.ts → src/pages/tools/video/index.ts