refactor: rename folders

Author: AlexStack

src/__tests__/pages/HomePage.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 
-import Homepage from '@/component/Homepage';
+import Homepage from '@/components/Homepage';
 
 export function mockFetch(data: unknown) {
   return jest.fn().mockImplementation(() =>

src/app/error.tsx

@@ -4,7 +4,7 @@ import WarningIcon from '@mui/icons-material/Warning';
 import { Box, Button } from '@mui/material';
 import * as React from 'react';
 
-import { consoleLog } from '@/util/shared/console-log';
+import { consoleLog } from '@/utils/shared/console-log';
 
 export default function Error({
   error,

src/app/layout.tsx

@@ -3,7 +3,8 @@ import GlobalStyles from '@mui/material/GlobalStyles';
 import { Metadata } from 'next';
 import * as React from 'react';
 
-import { GLOBAL_STYLES, SITE_CONFIG } from '@/constant';
+import { SITE_CONFIG } from '@/constants';
+import { GLOBAL_STYLES } from '@/styles';
 
 // !STARTERCONF Change these default meta
 // !STARTERCONF Look at @/constant/config to change them

src/app/page.tsx

@@ -1,5 +1,8 @@
-import Homepage from '@/component/Homepage';
-import { getApiResponse } from '@/util/shared/get-api-response';
+import Homepage from '@/components/Homepage';
+
+import { getApiResponse } from '@/utils/shared/get-api-response';
+
+import { PageParams } from '@/types';
 
 const loadDataFromApi = async (slug?: string) => {
   if (slug === 'testError500') {
@@ -24,17 +27,15 @@ const loadDataFromApi = async (slug?: string) => {
   };
 };
 
-interface AppHomeProps {
-  searchParams: { [key: string]: string | undefined };
-}
-
-export default async function AppHome({ searchParams }: AppHomeProps) {
-  const apiResult = await loadDataFromApi(searchParams['slug']);
+const AppHome = async ({ searchParams }: PageParams) => {
+  const apiResult = await loadDataFromApi(searchParams?.['slug']);
 
   return (
     <Homepage
       reactVersion={apiResult?.reactVersion}
       nextJsVersion={apiResult?.nextJsVersion}
     />
   );
-}
+};
+
+export default AppHome;

src/component/Homepage.tsx renamed to src/components/Homepage.tsx

@@ -2,9 +2,10 @@ import PinDropIcon from '@mui/icons-material/PinDrop';
 import { Box, Typography } from '@mui/material';
 import Link from 'next/link';
 
-import PageFooter from '@/component/shared/PageFooter';
-import ReactHookForm from '@/component/shared/ReactHookForm';
-import { SITE_CONFIG } from '@/constant';
+import PageFooter from '@/components/shared/PageFooter';
+import ReactHookForm from '@/components/shared/ReactHookForm';
+
+import { SITE_CONFIG } from '@/constants';
 
 export default function Homepage({
   reactVersion = 'unknown',

src/component/shared/PageFooter.tsx renamed to src/components/shared/PageFooter.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@mui/material';
 import * as React from 'react';
 
-import ServerDateTime from '@/component/shared/ServerDateTime';
+import ServerDateTime from '@/components/shared/ServerDateTime';
 
 const PageFooter = () => {
   return (

src/component/shared/ReactHookForm.tsx renamed to src/components/shared/ReactHookForm.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { consoleLog } from '@/util/shared/console-log';
-import { getApiResponse } from '@/util/shared/get-api-response';
+import { consoleLog } from '@/utils/shared/console-log';
+import { getApiResponse } from '@/utils/shared/get-api-response';
 
 const zodSchema = z.object({
   name: z.string().min(5).nonempty({ message: 'Name is required' }),

src/component/shared/ServerDateTime.tsx renamed to src/components/shared/ServerDateTime.tsx

@@ -1,5 +1,3 @@
-import { blue, grey } from '@mui/material/colors';
-
 export const SITE_CONFIG = {
   title: 'NextJs 13.x + MUI 5.x + TypeScript Starter',
   description:
@@ -12,18 +10,3 @@ export const HIDE_DEBUG_ARY = [
   // 'getApiResponse',
   'getMongoDbApiData',
 ];
-
-export const GLOBAL_STYLES = {
-  body: { margin: 4 },
-  '.page-title': { color: 'darkblue' },
-  '.page-subtitle': { color: grey[600] },
-  a: {
-    textDecoration: 'underline',
-    textDecorationColor: blue[800],
-    color: blue['700'],
-    fontSize: '1rem',
-    fontWeight: 400,
-    lineHeight: '1.8',
-    letterSpacing: '0.00938em',
-  },
-};