build(deps): bump next to 11.0.0

.eslintrc.json

@@ -1,6 +1,11 @@
 {
-  "extends": ["standard-with-typescript", "eslint-config-prettier"],
-  "plugins": ["eslint-plugin-prettier"],
+  "extends": [
+    "standard-with-typescript",
+    "next",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "plugins": ["prettier"],
   "parserOptions": {
     "project": "./tsconfig.json"
   },

.github/workflows/Divlo.yml

@@ -75,6 +75,8 @@ jobs:
 
       - name: 'Lighthouse'
         run: 'npm run lighthouse'
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
 
   test:
     runs-on: 'ubuntu-latest'

.lighthouserc.json

@@ -10,16 +10,9 @@
     "assert": {
       "preset": "lighthouse:recommended",
       "assertions": {
-        "legacy-javascript": "off",
-        "unused-javascript": "off",
-        "uses-rel-preload": "off",
-        "csp-xss": "off",
-        "canonical": "off",
-        "unsized-images": "off",
-        "uses-responsive-images": "off",
-        "bypass": "warning",
-        "color-contrast": "warning",
-        "preload-lcp-image": "warning"
+        "csp-xss": "warning",
+        "non-composited-animations": "warning",
+        "uses-responsive-images": "warning"
       }
     },
     "upload": {

components/Header/Language/index.tsx

@@ -1,15 +1,19 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
 
 import { Arrow } from './Arrow'
 import { LanguageFlag } from './LanguageFlag'
-import { locales } from 'i18n.json'
+import i18n from 'i18n.json'
 
 export const Language: React.FC = () => {
   const { lang: currentLanguage } = useTranslation()
   const [hiddenMenu, setHiddenMenu] = useState(true)
 
+  const handleHiddenMenu = useCallback(() => {
+    setHiddenMenu(!hiddenMenu)
+  }, [hiddenMenu])
+
   useEffect(() => {
     if (!hiddenMenu) {
       window.document.addEventListener('click', handleHiddenMenu)
@@ -20,17 +24,13 @@ export const Language: React.FC = () => {
     return () => {
       window.document.removeEventListener('click', handleHiddenMenu)
     }
-  }, [hiddenMenu])
+  }, [hiddenMenu, handleHiddenMenu])
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
     handleHiddenMenu()
   }
 
-  const handleHiddenMenu = (): void => {
-    setHiddenMenu(!hiddenMenu)
-  }
-
   return (
     <div className='flex flex-col justify-center items-center cursor-pointer'>
       <div className='flex items-center mr-5' onClick={handleHiddenMenu}>
@@ -39,7 +39,7 @@ export const Language: React.FC = () => {
       </div>
       {!hiddenMenu && (
         <ul className='flex flex-col justify-center items-center absolute p-0 top-14 z-10 w-24 mt-3 mr-4 rounded-lg list-none shadow-light dark:shadow-dark bg-white dark:bg-black'>
-          {locales.map((language, index) => {
+          {i18n.locales.map((language, index) => {
             if (language === currentLanguage) {
               return null
             }

components/design/Section/SectionHeading.tsx

@@ -1,20 +1,11 @@
-import { forwardRef } from 'react'
-
 type SectionHeadingProps = React.ComponentPropsWithRef<'h2'>
 
-export const SectionHeading = forwardRef<
-  HTMLHeadingElement,
-  SectionHeadingProps
->((props, ref) => {
+export const SectionHeading: React.FC<SectionHeadingProps> = (props) => {
   const { children, ...rest } = props
 
   return (
-    <h2
-      ref={ref}
-      {...rest}
-      className='text-4xl font-semibold text-center mt-1 mb-7'
-    >
+    <h2 {...rest} className='text-4xl font-semibold text-center mt-1 mb-7'>
       {children}
     </h2>
   )
-})
+}

components/design/Section/index.tsx

@@ -1,5 +1,3 @@
-import { forwardRef } from 'react'
-
 import { ShadowContainer } from '../ShadowContainer'
 import { SectionHeading } from './SectionHeading'
 
@@ -10,7 +8,7 @@ type SectionProps = React.ComponentPropsWithRef<'section'> & {
   withoutShadowContainer?: boolean
 }
 
-export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
+export const Section: React.FC<SectionProps> = (props) => {
   const {
     children,
     heading,
@@ -24,7 +22,7 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
     return (
       <div className='px-3 w-full'>
         <ShadowContainer style={{ marginTop: 50 }}>
-          <section ref={ref} {...rest}>
+          <section {...rest}>
             {heading != null && <SectionHeading>{heading}</SectionHeading>}
             <div className='px-3 w-full'>{children}</div>
           </section>
@@ -35,7 +33,7 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
 
   if (withoutShadowContainer) {
     return (
-      <section ref={ref} {...rest}>
+      <section {...rest}>
         {heading != null && <SectionHeading>{heading}</SectionHeading>}
         <div className='px-3 w-full'>{children}</div>
       </section>
@@ -43,7 +41,7 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
   }
 
   return (
-    <section ref={ref} {...rest}>
+    <section {...rest}>
       {heading != null && (
         <SectionHeading style={{ ...(description != null && { margin: 0 }) }}>
           {heading}
@@ -61,4 +59,4 @@ export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
       </div>
     </section>
   )
-})
+}

package.json

@@ -18,8 +18,8 @@
     "lint:commit": "commitlint",
     "lint:docker": "dockerfilelint './Dockerfile'",
     "lint:editorconfig": "editorconfig-checker",
-    "lint:markdown": "markdownlint '*.md' --dot --ignore node_modules",
-    "lint:typescript": "eslint '*.{js,ts,jsx,tsx}'",
+    "lint:markdown": "markdownlint '**/*.md' --dot --ignore node_modules",
+    "lint:typescript": "eslint '**/*.{js,ts,jsx,tsx}'",
     "lint:staged": "lint-staged",
     "lighthouse": "lhci autorun",
     "test": "jest",
@@ -34,7 +34,7 @@
     "@fortawesome/react-fontawesome": "0.1.14",
     "classnames": "2.3.1",
     "html-react-parser": "1.2.6",
-    "next": "10.2.3",
+    "next": "11.0.0",
     "next-pwa": "5.2.21",
     "next-themes": "0.0.14",
     "next-translate": "1.0.7",
@@ -58,6 +58,7 @@
     "dockerfilelint": "1.8.0",
     "editorconfig-checker": "4.0.2",
     "eslint": "7.28.0",
+    "eslint-config-next": "11.0.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-standard-with-typescript": "20.0.0",
     "eslint-plugin-import": "2.23.4",
@@ -70,7 +71,7 @@
     "markdownlint-cli": "0.27.1",
     "postcss": "8.3.4",
     "prettier": "2.3.1",
-    "semantic-release": "17.4.3",
+    "semantic-release": "17.4.4",
     "tailwindcss": "2.1.4",
     "typescript": "4.3.2"
   }