feat: tools normalized

src/components/App.tsx

@@ -7,9 +7,14 @@ import { ThemeProvider } from '@mui/material';
 import theme from '../config/muiConfig';
 import { CustomSnackBarProvider } from '../contexts/CustomSnackBarContext';
 import { SnackbarProvider } from 'notistack';
+import { tools } from '../tools';
 
 const AppRoutes = () => {
-  return useRoutes(routesConfig);
+  const updatedRoutesConfig = [...routesConfig];
+  tools.forEach((tool) => {
+    updatedRoutesConfig.push({ path: tool.path, element: tool.component() });
+  });
+  return useRoutes(updatedRoutesConfig);
 };
 
 function App() {

src/components/Loading.tsx

@@ -1,7 +1,7 @@
-import Typography from '@mui/material/Typography'
-import { useState } from 'react'
-import Box from '@mui/material/Box'
-import { useTimeout } from '../hooks'
+import Typography from '@mui/material/Typography';
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import { useTimeout } from '../hooks';
 
 export type FuseLoadingProps = {
   delay?: number;
@@ -12,16 +12,15 @@ export type FuseLoadingProps = {
  * FuseLoading displays a loading state with an optional delay
  */
 function FuseLoading(props: FuseLoadingProps) {
-  const { delay = 0, className } = props
-  const [showLoading, setShowLoading] = useState(!delay)
+  const { delay = 0, className } = props;
+  const [showLoading, setShowLoading] = useState(!delay);
 
   useTimeout(() => {
-    setShowLoading(true)
-  }, delay)
+    setShowLoading(true);
+  }, delay);
 
   return (
-    <div
-    >
+    <div>
       <Typography
         className="-mb-16 text-13 font-medium sm:text-20"
         color="text.secondary"
@@ -41,7 +40,7 @@ function FuseLoading(props: FuseLoadingProps) {
         <div className="bounce3" />
       </Box>
     </div>
-  )
+  );
 }
 
-export default FuseLoading
+export default FuseLoading;

src/components/Navbar/index.tsx

@@ -4,22 +4,41 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import {Link, useNavigate} from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import githubIcon from '../../assets/github-mark.png'; // Adjust the path to your GitHub icon
 
 const Navbar: React.FC = () => {
   const navigate = useNavigate();
   return (
-    <AppBar position="static" style={{backgroundColor: 'white', color: 'black'}}>
+    <AppBar
+      position="static"
+      style={{ backgroundColor: 'white', color: 'black' }}
+    >
       <Toolbar>
-        <Typography onClick={() => navigate('/')} fontSize={20}
-                    sx={{flexGrow: 1, cursor: 'pointer'}} color={'primary'}>OmniTools</Typography>
+        <Typography
+          onClick={() => navigate('/')}
+          fontSize={20}
+          sx={{ flexGrow: 1, cursor: 'pointer' }}
+          color={'primary'}
+        >
+          OmniTools
+        </Typography>
 
         <Button color="inherit">
-          <Link to="/features" style={{textDecoration: 'none', color: 'inherit'}}>Features</Link>
+          <Link
+            to="/features"
+            style={{ textDecoration: 'none', color: 'inherit' }}
+          >
+            Features
+          </Link>
         </Button>
         <Button color="inherit">
-          <Link to="/about-us" style={{textDecoration: 'none', color: 'inherit'}}>About Us</Link>
+          <Link
+            to="/about-us"
+            style={{ textDecoration: 'none', color: 'inherit' }}
+          >
+            About Us
+          </Link>
         </Button>
 
         <IconButton
@@ -28,7 +47,11 @@ const Navbar: React.FC = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <img src={githubIcon} alt="GitHub" style={{height: '24px', marginRight: '8px'}}/>
+          <img
+            src={githubIcon}
+            alt="GitHub"
+            style={{ height: '24px', marginRight: '8px' }}
+          />
           <Typography variant="button">Star us</Typography>
         </IconButton>
       </Toolbar>

src/components/ToolHeader.tsx

@@ -1,18 +1,22 @@
-import {Box, Stack} from "@mui/material";
-import Typography from "@mui/material/Typography";
-import textImage from '../assets/text.png'
+import { Box, Stack } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import textImage from '../assets/text.png';
 
 interface ToolHeaderProps {
   title: string;
   description: string;
 }
 
-export default function ToolHeader({title, description}: ToolHeaderProps) {
-  return (<Stack direction={'row'} alignItems={'center'} spacing={2} mt={4}>
-    <Box>
-      <Typography mb={2} fontSize={30} color={'primary'}>{title}</Typography>
-      <Typography fontSize={20}>{description}</Typography>
-    </Box>
-    <img width={'20%'} src={textImage}/>
-  </Stack>)
+export default function ToolHeader({ title, description }: ToolHeaderProps) {
+  return (
+    <Stack direction={'row'} alignItems={'center'} spacing={2} mt={4}>
+      <Box>
+        <Typography mb={2} fontSize={30} color={'primary'}>
+          {title}
+        </Typography>
+        <Typography fontSize={20}>{description}</Typography>
+      </Box>
+      <img width={'20%'} src={textImage} />
+    </Stack>
+  );
 }

src/components/input/ToolTextInput.tsx

@@ -1,14 +1,18 @@
-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 React from 'react'
+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 React from 'react';
 
-export default function ToolTextInput({ value, onChange, title = 'Input text' }: {
+export default function ToolTextInput({
+  value,
+  onChange,
+  title = 'Input text'
+}: {
   title?: string;
-  value: string
-  onChange: (value: string) => void
+  value: string;
+  onChange: (value: string) => void;
 }) {
   return (
     <Box>
@@ -27,5 +31,5 @@ export default function ToolTextInput({ value, onChange, title = 'Input text' }:
         <Button startIcon={<ContentPasteIcon />}>Copy to clipboard</Button>
       </Stack>
     </Box>
-  )
+  );
 }

src/config/routesConfig.tsx

@@ -1,29 +1,18 @@
-import {RouteObject} from "react-router-dom";
-import {Navigate} from "react-router-dom";
-import {ImagesConfig} from "../pages/images/ImagesConfig";
-import {lazy} from "react";
-import {StringConfig} from "../pages/string/StringConfig";
+import { RouteObject } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
+import { lazy } from 'react';
 
-const Home = lazy(() => import("../pages/home"));
+const Home = lazy(() => import('../pages/home'));
 
 const routes: RouteObject[] = [
   {
-    path: "/",
-    element: <Home/>,
+    path: '/',
+    element: <Home />
   },
   {
-    path: "images",
-    children: ImagesConfig
-  },
-  {
-    path: "string",
-    children: StringConfig
-  },
-  {
-    path: "*",
-    element: <Navigate to="404"/>,
-  },
+    path: '*',
+    element: <Navigate to="404" />
+  }
 ];
 
 export default routes;
-

src/hooks/useDebounce.ts

@@ -1,5 +1,5 @@
-import {useCallback, useEffect, useRef} from "react";
-import _ from "lodash";
+import { useCallback, useEffect, useRef } from 'react';
+import _ from 'lodash';
 
 /**
  * Debounce hook.
@@ -9,7 +9,7 @@ import _ from "lodash";
  */
 function useDebounce<T extends (...args: never[]) => void>(
   callback: T,
-  delay: number,
+  delay: number
 ): T {
   const callbackRef = useRef<T>(callback);
 
@@ -22,7 +22,7 @@ function useDebounce<T extends (...args: never[]) => void>(
     _.debounce((...args: never[]) => {
       callbackRef.current(...args);
     }, delay),
-    [delay],
+    [delay]
   );
 
   useEffect(() => {

src/hooks/usePrevious.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 /**
  * The usePrevious function is a custom hook that returns the previous value of a variable.

src/hooks/useTimeout.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 /**
  * The useTimeout function is a custom hook that sets a timeout for a given callback function.
@@ -15,7 +15,7 @@ function useTimeout(callback: () => void, delay: number) {
   useEffect(() => {
     let timer: NodeJS.Timeout | undefined;
 
-    if (delay !== null && callback && typeof callback === "function") {
+    if (delay !== null && callback && typeof callback === 'function') {
       timer = setTimeout(callbackRef.current, delay);
     }
 

src/hooks/useUpdateEffect.ts

@@ -1,4 +1,4 @@
-import { DependencyList, EffectCallback, useEffect, useRef } from "react";
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
 
 /**
  * The useUpdateEffect function is a custom hook that behaves like useEffect, but only runs on updates and not on initial mount.

src/index.tsx

@@ -1,8 +1,8 @@
-import { createRoot } from 'react-dom/client'
-import 'tailwindcss/tailwind.css'
-import App from 'components/App'
+import { createRoot } from 'react-dom/client';
+import 'tailwindcss/tailwind.css';
+import App from 'components/App';
 
-const container = document.getElementById('root') as HTMLDivElement
-const root = createRoot(container)
+const container = document.getElementById('root') as HTMLDivElement;
+const root = createRoot(container);
 
-root.render(<App />)
+root.render(<App />);

src/pages/home/index.tsx

@@ -1,62 +1,83 @@
-import {Box, Icon, Input, Stack, TextField} from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
+import { Box, Stack, TextField } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 import SearchIcon from '@mui/icons-material/Search';
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
 
-const exampleTools: { label: string; url: string }[] = [{
-  label: 'Create a transparent image',
-  url: ''
-},
-  {label: 'Convert text to morse code', url: ''},
-  {label: 'Change GIF speed', url: ''},
-  {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: 'Calculate number sum', url: ''},
-  {label: 'Pixelate an image', url: ''},
-]
+const exampleTools: { label: string; url: string }[] = [
+  {
+    label: 'Create a transparent image',
+    url: ''
+  },
+  { label: 'Convert text to morse code', url: '' },
+  { label: 'Change GIF speed', url: '' },
+  { 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: 'Calculate number sum', url: '' },
+  { label: 'Pixelate an image', url: '' }
+];
 export default function Home() {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
-  return (<Box padding={5} display={'flex'} flexDirection={'column'} alignItems={'center'} justifyContent={'center'}
-               width={'100%'}>
-    <Box width={"60%"}>
-      <Stack mb={1} direction={'row'} spacing={1}> <Typography fontSize={30}>Transform Your Workflow
-        with </Typography><Typography
-        fontSize={30}
-        color={'primary'}>Omni
-        Tools</Typography></Stack>
-      <Typography fontSize={20} mb={2}>
-        Boost your productivity with Omni Tools, the ultimate toolkit for getting things done quickly! Access thousands
-        of
-        user-friendly utilities for editing images, text, lists, and data, all directly from your browser.
-      </Typography>
+  return (
+    <Box
+      padding={5}
+      display={'flex'}
+      flexDirection={'column'}
+      alignItems={'center'}
+      justifyContent={'center'}
+      width={'100%'}
+    >
+      <Box width={'60%'}>
+        <Stack mb={1} direction={'row'} spacing={1}>
+          {' '}
+          <Typography fontSize={30}>Transform Your Workflow with </Typography>
+          <Typography fontSize={30} color={'primary'}>
+            Omni Tools
+          </Typography>
+        </Stack>
+        <Typography fontSize={20} mb={2}>
+          Boost your productivity with Omni Tools, the ultimate toolkit for
+          getting things done quickly! Access thousands of user-friendly
+          utilities for editing images, text, lists, and data, all directly from
+          your browser.
+        </Typography>
 
-      <TextField fullWidth placeholder={'Search all tools'} sx={{borderRadius: 2}} InputProps={{
-        endAdornment: (
-          <SearchIcon/>
-        ),
-      }}/>
-      <Grid container spacing={1} mt={2}>
-        {exampleTools.map((tool) => (
-          <Grid
-            onClick={() => navigate(tool.url)}
-            item
-            xs={4}
-            key={tool.label}
-            display="flex"
-            flexDirection="row"
-            justifyContent="center"
-            alignItems="center"
-            padding={2}
-            sx={{borderWidth: 1, borderRadius: 3, borderColor: 'grey', borderStyle: 'solid', cursor: 'pointer'}}
-          >
-            <Typography>{tool.label}</Typography>
-          </Grid>
-        ))}
-      </Grid>
+        <TextField
+          fullWidth
+          placeholder={'Search all tools'}
+          sx={{ borderRadius: 2 }}
+          InputProps={{
+            endAdornment: <SearchIcon />
+          }}
+        />
+        <Grid container spacing={1} mt={2}>
+          {exampleTools.map((tool) => (
+            <Grid
+              onClick={() => navigate(tool.url)}
+              item
+              xs={4}
+              key={tool.label}
+              display="flex"
+              flexDirection="row"
+              justifyContent="center"
+              alignItems="center"
+              padding={2}
+              sx={{
+                borderWidth: 1,
+                borderRadius: 3,
+                borderColor: 'grey',
+                borderStyle: 'solid',
+                cursor: 'pointer'
+              }}
+            >
+              <Typography>{tool.label}</Typography>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
     </Box>
-  </Box>)
+  );
 }

src/pages/images/ImagesConfig.tsx

@@ -1,10 +0,0 @@
-import {RouteObject} from "react-router-dom";
-import {lazy} from "react";
-import {PngConfig} from "./png/PngConfig";
-
-const PngHome = lazy(() => import("./index"));
-
-export const ImagesConfig: RouteObject[] = [
-  {path: '', element: <PngHome/>},
-  {path: 'png', children: PngConfig},
-]

src/pages/images/imageTools.ts

@@ -0,0 +1,3 @@
+import { pngTools } from './png/pngTools';
+
+export const imageTools = [...pngTools];

src/pages/images/index.tsx

@@ -1,5 +1,5 @@
-import {Box} from "@mui/material";
+import { Box } from '@mui/material';
 
 export default function ImageHome() {
-  return (<Box></Box>)
+  return <Box></Box>;
 }

src/pages/images/png/PngConfig.tsx

@@ -1,10 +0,0 @@
-import {RouteObject} from "react-router-dom";
-import {lazy} from "react";
-
-const ChangeColorsInPng = lazy(() => import("./change-colors-in-png"));
-const PngHome = lazy(() => import("./"));
-
-export const PngConfig: RouteObject[] = [
-  {path: '', element: <PngHome/>},
-  {path: 'change-colors-in-png', element: <ChangeColorsInPng/>}
-]

src/pages/images/png/change-colors-in-png/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box } from '@mui/material';
 
 export default function ChangeColorsInPng() {
   return <Box></Box>;

src/pages/images/png/change-colors-in-png/meta.ts

@@ -0,0 +1,11 @@
+import { defineTool } from '../../../../tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('png', {
+  path: 'change-colors',
+  name: 'Change colors in PNG',
+  description:
+    "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
+  keywords: ['png', 'split'],
+  component: lazy(() => import('./index'))
+});

src/pages/images/png/index.tsx

@@ -1,5 +1,5 @@
-import {Box} from "@mui/material";
+import { Box } from '@mui/material';
 
 export default function PngHome() {
-  return (<Box></Box>)
+  return <Box></Box>;
 }

src/pages/images/png/pngTools.ts

@@ -0,0 +1,3 @@
+import { tool as changeColorsInPng } from './change-colors-in-png/meta';
+
+export const pngTools = [changeColorsInPng];

src/pages/string/StringConfig.tsx

@@ -1,10 +0,0 @@
-import {RouteObject} from "react-router-dom";
-import {lazy} from "react";
-
-const StringHome = lazy(() => import("./index"));
-const StringSplit = lazy(() => import("./split"));
-
-export const StringConfig: RouteObject[] = [
-  {path: '', element: <StringHome/>},
-  {path: 'split', element: <StringSplit/>},
-]

src/pages/string/index.tsx

@@ -1,5 +1,5 @@
-import {Box} from "@mui/material";
+import { Box } from '@mui/material';
 
 export default function StringHome() {
-  return (<Box></Box>)
+  return <Box></Box>;
 }

src/pages/string/split/index.tsx

@@ -186,12 +186,7 @@ export default function SplitText() {
   });
 
   return (
-    <ToolLayout
-      title={'Text Splitter'}
-      description={
-        "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks."
-      }
-    >
+    <Box>
       <Grid container spacing={2}>
         <Grid item xs={6}>
           <ToolTextInput value={input} onChange={setInput} />
@@ -242,6 +237,6 @@ export default function SplitText() {
           )}
         </Formik>
       </ToolOptions>
-    </ToolLayout>
+    </Box>
   );
 }

src/pages/string/split/meta.ts

@@ -0,0 +1,11 @@
+import { defineTool } from '../../../tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('string', {
+  path: 'split',
+  name: 'Text splitter',
+  description:
+    "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
+  keywords: ['text', 'split'],
+  component: lazy(() => import('./index'))
+});

src/pages/string/stringTools.ts

@@ -0,0 +1,3 @@
+import { tool as stringSplit } from './split/meta';
+
+export const stringTools = [stringSplit];

src/tools/defineTool.tsx

@@ -0,0 +1,39 @@
+import ToolLayout from '../components/ToolLayout';
+import React, { LazyExoticComponent, JSXElementConstructor } from 'react';
+
+interface ToolOptions {
+  path: string;
+  component: LazyExoticComponent<JSXElementConstructor<NonNullable<unknown>>>;
+  keywords: string[];
+  name: string;
+  description: string;
+}
+
+interface DefinedTool {
+  path: string;
+  name: string;
+  description: string;
+  keywords: string[];
+  component: () => JSX.Element;
+}
+
+export const defineTool = (
+  basePath: string,
+  options: ToolOptions
+): DefinedTool => {
+  const { path, name, description, keywords, component } = options;
+  const Component = component;
+  return {
+    path: `${basePath}/${path}`,
+    name,
+    description,
+    keywords,
+    component: () => {
+      return (
+        <ToolLayout title={name} description={description}>
+          <Component />
+        </ToolLayout>
+      );
+    }
+  };
+};

src/tools/index.ts

@@ -0,0 +1,4 @@
+import { stringTools } from '../pages/string/stringTools';
+import { imageTools } from '../pages/images/imageTools';
+
+export const tools = [...stringTools, ...imageTools];

src/utils/index.ts

@@ -1,3 +1,3 @@
 export function classNames(...classes: unknown[]): string {
-  return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(' ');
 }