Merge pull request sadanandpai#168 from sadanandpai/next-13

fix: NextJS upgrade to 13

package.json

@@ -31,9 +31,9 @@
     "html-react-parser": "^3.0.1",
     "immer": "^9.0.12",
     "jodit": "^3.18.6",
-    "next": "12.1.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "next": "^13.1.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
     "zustand": "^3.7.2"
   },
@@ -59,7 +59,7 @@
     "autoprefixer": "^10.4.4",
     "babel-loader": "^8.2.4",
     "eslint": "8.13.0",
-    "eslint-config-next": "12.1.4",
+    "eslint-config-next": "^13.1.6",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-storybook": "^0.5.8",

src/helpers/common/components/EditSectionContainer.tsx

@@ -1,4 +1,5 @@
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
+
 import Image from 'next/image';
 
 const animation = {
@@ -45,8 +46,8 @@ const EditSectionContainer = ({
         <Image
           src={isEnabled ? '/icons/eye.svg' : '/icons/eye-slash.svg'}
           alt="eye"
-          height="16px"
-          width="21px"
+          height="16"
+          width="21"
           onClick={toggleVisibility}
         />
       </div>

src/helpers/common/components/HTMLRenderer.tsx

@@ -1,20 +1,16 @@
-import { useMemo } from 'react';
 import parseHtmlStringToHtml, { domToReact } from 'html-react-parser';
-import Link from 'next/link';
 
+import Link from 'next/link';
 import styles from './richtext/jodit.module.css';
+import { useMemo } from 'react';
 
 export const HTMLRenderer = ({ htmlString }: { htmlString: string }) => {
   const parsedElement = useMemo(() => {
     return parseHtmlStringToHtml(htmlString, {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       replace: (domNode: any) => {
         if (domNode.attribs && domNode.attribs.href && domNode.name === 'a') {
-          return (
-            <Link href={domNode.attribs.href}>
-              <a>{domToReact(domNode.children)}</a>
-            </Link>
-          );
+          return <Link href={domNode.attribs.href}>{domToReact(domNode.children)}</Link>;
         } else if (domNode.name === 'script') {
           return <></>;
         }

src/modules/builder/editor/atoms/HeaderTitle.tsx

@@ -2,15 +2,10 @@ import Image from 'next/image';
 
 const HeaderTitle = ({ title }: { title: string }) => (
   <div className="flex items-center my-5 cursor-pointer">
-    {/* TODO: enable it later */}
-    {/* <div className="mr-6 flex items-center">
-      <Image src="/icons/eye.svg" alt="eye" height="16px" width="16px" />
-    </div> */}
-
     <p className="text-xl ml-2">{title}</p>
 
     <div className="ml-auto pl-4 flex items-center">
-      <Image src="/icons/right-arrow.svg" alt="right-arrow" height="16px" width="16px" />
+      <Image src="/icons/right-arrow.svg" alt="right-arrow" height="16" width="16" />
     </div>
   </div>
 );

src/modules/builder/editor/components/EditSection.tsx

@@ -17,8 +17,8 @@ interface IEditSection {
 const EditSection = ({ section, onLinkClick }: IEditSection) => {
   return (
     <motion.div initial={animation.initial} animate={animation.animate}>
-      <div className="flex items-center mb-6 mt-4">
-        <a className="cursor-pointer" onClick={() => onLinkClick('')}>
+      <div>
+        <a className="flex items-center mb-6 mt-4 cursor-pointer" onClick={() => onLinkClick('')}>
           <Image src="/icons/left-arrow.svg" alt="back" width={12} height={16} />
           <span className="pl-2 ml-2 text-2xl font-bold">{section.title}</span>
         </a>

src/modules/builder/nav-bar/NavBarLayout.tsx

@@ -1,20 +1,5 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import exportFromJSON from 'export-from-json';
-import { useRef, ChangeEvent, useState, useCallback } from 'react';
-
-import { NavBarMenu, NavBarActions, StyledButton } from './atoms';
-import { Toast } from 'src/helpers/common/atoms/Toast';
-import { NavMenuItem } from './components/MenuItem';
-import { ThemeSelect } from './components/ThemeSelect';
-import { TemplateSelect } from './components/TemplateSelect';
-import { PrintResume } from './components/PrintResume';
-import DEFAULT_RESUME_JSON from 'src/helpers/constants/resume-data.json';
-import { useAwards } from 'src/stores/awards';
-import { useExperiences } from 'src/stores/experience';
-import { useEducations } from 'src/stores/education';
-import { useBasicDetails } from 'src/stores/basic';
-import { useActivity } from 'src/stores/activity';
+import { ChangeEvent, useCallback, useRef, useState } from 'react';
+import { NavBarActions, NavBarMenu, StyledButton } from './atoms';
 import {
   useDatabases,
   useFrameworks,
@@ -24,8 +9,23 @@ import {
   useTechnologies,
   useTools,
 } from 'src/stores/skills';
-import { useVoluteeringStore } from 'src/stores/volunteering';
+
 import { AVAILABLE_TEMPLATES } from 'src/helpers/constants';
+import DEFAULT_RESUME_JSON from 'src/helpers/constants/resume-data.json';
+import Image from 'next/image';
+import Link from 'next/link';
+import { NavMenuItem } from './components/MenuItem';
+import { PrintResume } from './components/PrintResume';
+import { TemplateSelect } from './components/TemplateSelect';
+import { ThemeSelect } from './components/ThemeSelect';
+import { Toast } from 'src/helpers/common/atoms/Toast';
+import exportFromJSON from 'export-from-json';
+import { useActivity } from 'src/stores/activity';
+import { useAwards } from 'src/stores/awards';
+import { useBasicDetails } from 'src/stores/basic';
+import { useEducations } from 'src/stores/education';
+import { useExperiences } from 'src/stores/experience';
+import { useVoluteeringStore } from 'src/stores/volunteering';
 
 const TOTAL_TEMPLATES_AVAILABLE = Object.keys(AVAILABLE_TEMPLATES).length;
 
@@ -121,9 +121,7 @@ const NavBarLayout = () => {
   return (
     <nav className="h-14 w-full bg-resume-800 relative flex py-2.5 pl-5 pr-4 items-center shadow-level-8dp z-20 print:hidden">
       <Link href="/">
-        <a className="flex items-center">
-          <Image src={'/icons/resume-icon.png'} alt="logo" height={'36px'} width={'36px'} />
-        </a>
+        <Image src={'/icons/resume-icon.png'} alt="logo" height="36" width="36" />
       </Link>
       <div className="flex-auto flex justify-between items-center ml-5">
         <NavBarMenu>

src/modules/builder/nav-bar/components/MenuItem.tsx

@@ -1,9 +1,9 @@
 import { Fragment, useState } from 'react';
-import Image from 'next/image';
 
+import { INavMenuItemProps } from './MenuItem.interface';
+import Image from 'next/image';
 import { NavMenuPopover } from './NavMenuPopover';
 import { StyledButton } from '../atoms';
-import { INavMenuItemProps } from './MenuItem.interface';
 
 export const NavMenuItem = ({ caption, popoverChildren }: INavMenuItemProps) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@@ -26,8 +26,8 @@ export const NavMenuItem = ({ caption, popoverChildren }: INavMenuItemProps) =>
           <Image
             src={'/icons/dropdown-arrow.svg'}
             alt="dropdown-arrow"
-            width={'20px'}
-            height={'20px'}
+            width="20"
+            height="20"
             className={`${anchorEl ? 'scale-y-[-1]' : ''}`}
           />
         }

src/modules/builder/nav-bar/components/TemplatesSlider.tsx

@@ -1,12 +1,12 @@
-import Image from 'next/image';
-import { useEffect, useRef } from 'react';
-import Splide, { Splide as SplideCore } from '@splidejs/splide';
-import { Global } from '@emotion/react';
-
 // eslint-disable-next-line import/no-unresolved
 import '@splidejs/splide/css';
 
+import Splide, { Splide as SplideCore } from '@splidejs/splide';
+import { useEffect, useRef } from 'react';
+
 import { AVAILABLE_TEMPLATES } from 'src/helpers/constants';
+import { Global } from '@emotion/react';
+import Image from 'next/image';
 import { useTemplates } from 'src/stores/useTemplate';
 
 export const TemplateSlider = () => {
@@ -109,7 +109,7 @@ export const TemplateSlide = ({
 
         {isActive && (
           <div className="absolute top-1 right-1 bg-white rounded-full">
-            <Image src={'/icons/selected-tick.svg'} alt="logo" width={'24px'} height={'24px'} />
+            <Image src={'/icons/selected-tick.svg'} alt="logo" width="24" height="24" />
           </div>
         )}
       </div>

src/modules/builder/nav-bar/components/ThemeSelect.tsx

@@ -1,8 +1,8 @@
-import Image from 'next/image';
-
 import { ColorBox, ColorBoxWrapper } from '../atoms';
-import { SYSTEM_COLORS } from 'src/helpers/constants/index';
+
 import { IThemeColor } from 'src/helpers/constants/index.interface';
+import Image from 'next/image';
+import { SYSTEM_COLORS } from 'src/helpers/constants/index';
 import { useThemes } from 'src/stores/themes';
 
 export const ThemeSelect = () => {
@@ -33,40 +33,12 @@ export const ThemeSelect = () => {
                 <ColorBox bgColor={themeObject.highlighterColor} />
               </ColorBoxWrapper>
               {isActive && (
-                <Image src={'/icons/selected-tick.svg'} alt="logo" width={'28px'} height={'20px'} />
+                <Image src={'/icons/selected-tick.svg'} alt="logo" width="28" height="20" />
               )}
             </div>
           );
         })}
       </div>
-      {/* <div
-        className={`flex flex-col border rounded mb-[16px] justify-start px-4 py-3 hover:cursor-pointer ${
-          activeTheme === THEME_IDS.CUSTOM ? 'bg-resume-50 border-resume-500' : 'border-[#a9a9a9]'
-        }`}
-        onClick={() => handleActiveTheme(THEME_IDS.CUSTOM)}
-      >
-        <div
-          className={`w-full h-full flex items-center justify-between ${
-            activeTheme === THEME_IDS.CUSTOM ? 'mb-3' : ''
-          }`}
-        >
-          <span className="text-resume-800 font-normal text-base">Custom theme</span>
-          {activeTheme === THEME_IDS.CUSTOM && (
-            <Image src={'/icons/selected-tick.svg'} alt="logo" width={'28px'} height={'20px'} />
-          )}
-        </div>
-        {activeTheme === THEME_IDS.CUSTOM && (
-          <Fragment>
-            <Divider />
-            <div className="grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-10 mt-6 mb-8">
-              <ColorDetails bgColor={'#FFFFFF'} label="Background Color" />
-              <ColorDetails bgColor={'#000000'} label="Font Color" />
-              <ColorDetails bgColor={'#0019FD'} label="Accent Color" />
-              <ColorDetails bgColor={'#22B34B'} label="Bar Color" />
-            </div>
-          </Fragment>
-        )}
-      </div> */}
     </div>
   );
 };

src/modules/builder/resume/atoms/ResumeController.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
-import Tooltip from '@mui/material/Tooltip';
 import { ReactNode } from 'react';
+import Tooltip from '@mui/material/Tooltip';
 
 const ResumeController = ({
   zoomIn,
@@ -13,24 +13,14 @@ const ResumeController = ({
 }) => {
   return (
     <div className="flex">
-      {/* <div className="flex items-center pr-4">
-        <Image
-          src="/icons/fit-height.svg"
-          className="cursor-pointer"
-          alt="Fit height"
-          width="24px"
-          height="24px"
-        />
-      </div> */}
-
       <div className="flex items-center gap-5">
         <TooltipRenderer title="Zoom out">
           <Image
             src="/icons/zoom-out.svg"
             className="cursor-pointer"
             alt="Zoom out"
-            width="24px"
-            height="24px"
+            width="24"
+            height="24"
             onClick={zoomOut}
           />
         </TooltipRenderer>
@@ -39,8 +29,8 @@ const ResumeController = ({
             src="/icons/zoom-in.svg"
             className="cursor-pointer"
             alt="Zoom in"
-            width="24px"
-            height="24px"
+            width="24"
+            height="24"
             onClick={zoomIn}
           />
         </TooltipRenderer>
@@ -49,8 +39,8 @@ const ResumeController = ({
             src="/icons/reset-zoom.svg"
             className="cursor-pointer"
             alt="Reset zoom"
-            width="24px"
-            height="24px"
+            width="24"
+            height="24"
             onClick={resetZoom}
           />
         </TooltipRenderer>

src/modules/home/HomeLayout.tsx

@@ -1,7 +1,7 @@
 import { NavBarActions, StyledButton } from '../builder/nav-bar/atoms';
 import { motion, useAnimation } from 'framer-motion';
-import { BsGithub } from 'react-icons/bs';
 
+import { BsGithub } from 'react-icons/bs';
 import { Button } from '@mui/material';
 import FeatureSection from './components/Feature';
 import Image from 'next/image';
@@ -26,9 +26,7 @@ const HomeLayout = () => {
     <motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} className="scroll-smooth">
       <nav className="sticky top-0 z-20 h-14 w-full bg-resume-800 flex py-2.5 px-4 xl:px-60 items-center shadow-level-8dp">
         <Link href="/">
-          <a className="flex items-center">
-            <Image src={'/icons/resume-icon.png'} alt="logo" height={'36px'} width={'36px'} />
-          </a>
+          <Image src={'/icons/resume-icon.png'} alt="logo" height="36" width="36" />
         </Link>
         <div className="flex-auto flex justify-between items-center ml-5">
           <NavBarActions>
@@ -130,27 +128,27 @@ const HomeLayout = () => {
           style={{ fontFamily: "'Roboto Slab', serif" }}
         >
           <div className="grid grid-cols-12 items-center text-center">
-            <div className="col-span-12 lg:col-span-4 mb-4 lg:mb-0">
-              <Image src={'/icons/palette.svg'} alt="logo" height={'48px'} width={'48px'} />
+            <div className="col-span-12 lg:col-span-4 mb-4 lg:mb-0 flex flex-col items-center gap-2">
+              <Image src={'/icons/palette.svg'} alt="logo" height="48" width="48" />
               <p className="text-resume-800 text-xl mt-2">
                 Do you want to make your own <strong>template?</strong>
               </p>
             </div>
             <div className="col-span-12 lg:col-span-1 mb-4 lg:mb-0 text-resume-800 text-4xl">
               <p>+</p>
             </div>
-            <div className="col-span-12 lg:col-span-2 flex-col">
-              <Image src={'/icons/terminal.svg'} alt="logo" height={'48px'} width={'48px'} />
+            <div className="col-span-12 lg:col-span-2 flex flex-col items-center gap-2">
+              <Image src={'/icons/terminal.svg'} alt="logo" height="48" width="48" />
               <p className="text-resume-800 text-xl mt-2">
                 Do you write <strong>React</strong> code?
               </p>
             </div>
             <div className="invisible lg:visible lg:col-span-2 text-resume-800 text-4xl mx-6">
               <p>=</p>
             </div>
-            <div className="col-span-12 lg:col-span-3 mx-auto text-center">
+            <div className="col-span-12 lg:col-span-3 mx-auto flex flex-col items-center gap-2">
               <div className="mb-6">
-                <Image src={'/icons/wave.svg'} alt="logo" height={'48px'} width={'48px'} />
+                <Image src={'/icons/wave.svg'} alt="logo" height="48" width="48" />
               </div>
               <div>
                 <a