refactor: optimize imports

src/components/Navbar/index.tsx

@@ -8,12 +8,11 @@ import MenuIcon from '@mui/icons-material/Menu';
 import { Link, useNavigate } from 'react-router-dom';
 import githubIcon from '@assets/github-mark.png'; // Adjust the path to your GitHub icon
 import {
-  Stack,
   Drawer,
   List,
-  ListItem,
+  ListItemButton,
   ListItemText,
-  ListItemButton
+  Stack
 } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';

src/components/ToolHeader.tsx

@@ -1,4 +1,4 @@
-import { Button, Box, Stack } from '@mui/material';
+import { Box, Button } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import ToolBreadcrumb from './ToolBreadcrumb';
 import { capitalizeFirstLetter } from '../utils/string';

src/components/allTools/ToolCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Link, Card, CardContent, Typography } from '@mui/material';
+import { Box, Card, CardContent, Link, Typography } from '@mui/material';
 import { ToolCardProps } from './AllTools';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { useNavigate } from 'react-router-dom';

src/components/examples/ExampleCard.tsx

@@ -1,11 +1,11 @@
 import { ExampleCardProps } from './Examples';
 import {
   Box,
-  Stack,
   Card,
   CardContent,
-  Typography,
+  Stack,
   TextField,
+  Typography,
   useTheme
 } from '@mui/material';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';

src/components/input/ToolFileInput.tsx

@@ -1,4 +1,4 @@
-import { Box, styled, TextField, useTheme } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import InputHeader from '../InputHeader';

src/components/input/ToolTextInput.tsx

@@ -1,8 +1,4 @@
-import { Box, Stack, TextField } from '@mui/material';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import PublishIcon from '@mui/icons-material/Publish';
-import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import { Box, TextField } from '@mui/material';
 import React, { useContext, useRef } from 'react';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import InputHeader from '../InputHeader';

src/components/options/ColorSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent, useRef } from 'react';
+import React, { ChangeEvent, useRef, useState } from 'react';
 import { Box, Stack, TextField } from '@mui/material';
 import PaletteIcon from '@mui/icons-material/Palette';
 import IconButton from '@mui/material/IconButton';

src/components/options/RadioWithTextField.tsx

@@ -1,10 +1,6 @@
-import { SplitOperatorType } from '../../pages/string/split/service';
-import { Box, Stack } from '@mui/material';
-import { Field } from 'formik';
-import Typography from '@mui/material/Typography';
+import { Box } from '@mui/material';
 import React from 'react';
 import TextFieldWithDesc from './TextFieldWithDesc';
-import { globalDescriptionFontSize } from '../../config/uiConfig';
 import SimpleRadio from './SimpleRadio';
 
 const RadioWithTextField = <T,>({

src/components/result/ToolTextResult.tsx

@@ -1,8 +1,4 @@
-import Typography from '@mui/material/Typography';
-import { Box, Stack, TextField } from '@mui/material';
-import Button from '@mui/material/Button';
-import DownloadIcon from '@mui/icons-material/Download';
-import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import { Box, TextField } from '@mui/material';
 import React, { useContext } from 'react';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import InputHeader from '../InputHeader';

src/config/routesConfig.tsx

@@ -1,5 +1,4 @@
-import { RouteObject } from 'react-router-dom';
-import { Navigate } from 'react-router-dom';
+import { Navigate, RouteObject } from 'react-router-dom';
 import { lazy } from 'react';
 
 const Home = lazy(() => import('../pages/home'));

src/pages/home/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, CardContent, Stack } from '@mui/material';
+import { Box, Card, CardContent } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { Link, useNavigate } from 'react-router-dom';

src/pages/number/generate/generate.service.test.ts

@@ -1,5 +1,5 @@
 // Import necessary modules and functions
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { listOfIntegers } from './service';
 
 // Define test cases for the listOfIntegers function

src/pages/number/sum/sum.service.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { compute } from './service';
 
 describe('compute function', () => {

src/pages/string/join/string-join.e2e.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.describe('JoinText Component', () => {
   test.beforeEach(async ({ page }) => {

src/pages/string/join/string-join.service.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { mergeText } from './service';
 
 describe('mergeText', () => {

src/pages/string/split/index.tsx

@@ -1,18 +1,13 @@
-import { Box, Stack } from '@mui/material';
-import Grid from '@mui/material/Grid';
-import React, { useContext, useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
 import ToolTextInput from '../../../components/input/ToolTextInput';
 import ToolTextResult from '../../../components/result/ToolTextResult';
-import { Formik, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import ToolOptions from '../../../components/options/ToolOptions';
 import { compute, SplitOperatorType } from './service';
-import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import RadioWithTextField from '../../../components/options/RadioWithTextField';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,

src/pages/string/split/string-split.service.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { compute } from './service';
 
 describe('compute function', () => {

src/pages/string/to-morse/to-morse.service.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { compute } from './service';
 
 describe('compute function', () => {

src/pages/tools-by-category/index.tsx

@@ -1,18 +1,9 @@
-import {
-  Box,
-  Card,
-  CardContent,
-  Divider,
-  Stack,
-  useTheme
-} from '@mui/material';
+import { Box, Divider, Stack, useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { Link, useNavigate, useParams } from 'react-router-dom';
-import { getToolsByCategory, tools } from '../../tools';
-import Button from '@mui/material/Button';
+import { getToolsByCategory } from '../../tools';
 import Hero from 'components/Hero';
-import AllTools from '../../components/allTools/AllTools';
 import { capitalizeFirstLetter } from '../../utils/string';
 import toolsPng from '@assets/tools.png';
 

src/tools/defineTool.tsx

@@ -1,5 +1,5 @@
 import ToolLayout from '../components/ToolLayout';
-import React, { LazyExoticComponent, JSXElementConstructor } from 'react';
+import React, { JSXElementConstructor, LazyExoticComponent } from 'react';
 
 interface ToolOptions {
   path: string;