chore: cleanup

.babelrc.json

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    [
-      "next/babel",
-      {
-        "preset-env": {
-          "targets": {
-            "browsers": ">1%, not ie 11, not dead"
-          }
-        }
-      }
-    ]
-  ]
-}

.devcontainer/Dockerfile

@@ -1,4 +1,2 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.163.1/containers/javascript-node/.devcontainer/base.Dockerfile
-
-ARG VARIANT="16-bullseye"
+ARG VARIANT="16"
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

.dockerignore

@@ -9,4 +9,5 @@ tmp
 temp
 .DS_Store
 .lighthouseci
+.vercel
 storybook-static

.eslintrc.json

@@ -3,6 +3,7 @@
     "standard-with-typescript",
     "next",
     "next/core-web-vitals",
+    "plugin:storybook/recommended",
     "prettier"
   ],
   "plugins": ["unicorn", "prettier"],

.npmrc

@@ -1,2 +1 @@
 save-exact=true
-legacy-peer-deps=true

.storybook/main.js

@@ -1,6 +1,10 @@
 const path = require('path')
 
 module.exports = {
+  core: {
+    builder: 'webpack5'
+  },
+  staticDirs: ['../public'],
   stories: ['../components/**/*.stories.@(ts|tsx|js|jsx)'],
   addons: [
     '@storybook/addon-links',

.storybook/preview.js

@@ -1,3 +1,4 @@
+import * as NextImage from 'next/image'
 import { addDecorator } from '@storybook/react'
 import I18nProvider from 'next-translate/I18nProvider'
 
@@ -30,9 +31,9 @@ addDecorator((story) => (
   </I18nProvider>
 ))
 
-import * as nextImage from 'next/image'
+const OriginalNextImage = NextImage.default
 
-Object.defineProperty(nextImage, 'default', {
+Object.defineProperty(NextImage, 'default', {
   configurable: true,
-  value: (props) => <img {...props} />
+  value: (props) => <OriginalNextImage {...props} unoptimized />
 })

components/Application/Messages/Messages.tsx

@@ -15,7 +15,7 @@ export const Messages: React.FC = () => {
                 <div className='w-10 h-10 drop-shadow-md'>
                   <Image
                     className='rounded-full'
-                    src='/images/data/divlo.png'
+                    src='/images/data/user-default.png'
                     alt='logo'
                     width={50}
                     height={50}

jest.config.js

@@ -0,0 +1,14 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest()
+const customJestConfig = {
+  moduleDirectories: ['node_modules', './'],
+  modulePathIgnorePatterns: ['<rootDir>/cypress'],
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '@testing-library/react'
+  ]
+}
+
+module.exports = createJestConfig(customJestConfig)

jest.config.json

@@ -1,14 +0,0 @@
-{
-  "roots": ["<rootDir>"],
-  "transform": {
-    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
-  },
-  "moduleDirectories": ["node_modules", "./"],
-  "modulePathIgnorePatterns": ["<rootDir>/cypress"],
-  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
-  "testEnvironment": "jsdom",
-  "setupFilesAfterEnv": [
-    "@testing-library/jest-dom/extend-expect",
-    "@testing-library/react"
-  ]
-}

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -1,17 +1,41 @@
 const nextPWA = require('next-pwa')
 const nextTranslate = require('next-translate')
+const { createSecureHeaders } = require('next-secure-headers')
 
 module.exports = nextTranslate(
   nextPWA({
-    pwa: {
-      disable: process.env.NODE_ENV !== 'production',
-      dest: 'public'
-    },
     images: {
       domains: [
         'api.thream.divlo.fr',
         ...(process.env.NODE_ENV === 'development' ? ['localhost'] : [])
       ]
+    },
+    reactStrictMode: true,
+    pwa: {
+      disable: process.env.NODE_ENV !== 'production',
+      dest: 'public'
+    },
+    async headers() {
+      return [
+        {
+          source: '/:path*',
+          headers: createSecureHeaders({
+            contentSecurityPolicy: {
+              directives: {
+                defaultSrc: ["'self'"],
+                scriptSrc: ["'self'", "'unsafe-eval'", "'unsafe-inline'"],
+                styleSrc: ["'self'", "'unsafe-inline'"],
+                imgSrc: ['*', 'data:', 'blob:'],
+                mediaSrc: "'none'",
+                connectSrc: '*',
+                objectSrc: "'none'",
+                fontSrc: "'self'",
+                baseURI: "'none'"
+              }
+            }
+          })
+        }
+      ]
     }
   })
 )

package.json

@@ -11,7 +11,7 @@
     "npm": ">=8.0.0"
   },
   "scripts": {
-    "dev": "next dev --port=3000",
+    "dev": "next dev",
     "start": "next start",
     "build": "next build",
     "export": "next export",
@@ -26,8 +26,8 @@
     "test:lighthouse": "lhci autorun",
     "test:e2e": "start-server-and-test 'start' 'http://localhost:3000' 'cypress run'",
     "test:e2e:dev": "start-server-and-test 'dev' 'http://localhost:3000' 'cypress open'",
-    "storybook": "start-storybook --port 6006 --static-dir public",
-    "storybook:build": "build-storybook --static-dir public",
+    "storybook": "start-storybook --port 6006",
+    "storybook:build": "build-storybook",
     "storybook:serve": "serve -p 6006 storybook-static",
     "release": "semantic-release",
     "deploy": "vercel",
@@ -37,14 +37,14 @@
     "@fontsource/montserrat": "4.5.1",
     "@fontsource/roboto": "4.5.1",
     "@heroicons/react": "1.0.5",
-    "@sinclair/typebox": "0.20.5",
-    "ajv": "8.7.1",
+    "@sinclair/typebox": "0.23.2",
+    "ajv": "8.8.2",
     "ajv-formats": "2.1.1",
     "axios": "0.24.0",
     "classnames": "2.3.1",
     "date-and-time": "2.0.1",
-    "next": "11.1.2",
-    "next-pwa": "5.4.0",
+    "next": "12.0.7",
+    "next-pwa": "5.4.4",
     "next-themes": "0.0.15",
     "next-translate": "1.2.0",
     "react": "17.0.2",
@@ -55,32 +55,31 @@
     "react-swipeable": "6.2.0",
     "react-textarea-autosize": "8.3.3",
     "read-pkg": "7.0.0",
-    "sharp": "0.29.2",
-    "socket.io-client": "4.3.2",
+    "sharp": "0.29.3",
+    "socket.io-client": "4.4.0",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "14.1.0",
-    "@commitlint/config-conventional": "14.1.0",
+    "@commitlint/cli": "16.0.1",
+    "@commitlint/config-conventional": "16.0.0",
     "@lhci/cli": "0.8.2",
     "@saithodev/semantic-release-backmerge": "2.1.0",
-    "@storybook/addon-essentials": "6.3.12",
-    "@storybook/addon-links": "6.3.12",
+    "@storybook/addon-essentials": "6.4.9",
+    "@storybook/addon-links": "6.4.9",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/react": "6.3.12",
-    "@testing-library/jest-dom": "5.15.0",
+    "@storybook/builder-webpack5": "6.4.9",
+    "@storybook/manager-webpack5": "6.4.9",
+    "@storybook/react": "6.4.9",
+    "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
     "@types/date-and-time": "0.13.0",
-    "@types/jest": "27.0.2",
-    "@types/node": "16.11.7",
-    "@types/react": "17.0.34",
-    "@types/react-responsive": "8.0.4",
+    "@types/jest": "27.0.3",
+    "@types/node": "17.0.5",
+    "@types/react": "17.0.38",
+    "@types/react-responsive": "8.0.5",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "autoprefixer": "10.4.0",
-    "babel-jest": "27.3.1",
-    "babel-loader": "8.2.3",
-    "babel-register": "6.26.0",
-    "cypress": "9.0.0",
+    "cypress": "9.2.0",
     "dockerfilelint": "1.8.0",
     "editorconfig-checker": "4.0.2",
     "eslint": "7.32.0",
@@ -91,21 +90,24 @@
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-promise": "5.1.1",
-    "eslint-plugin-unicorn": "38.0.1",
+    "eslint-plugin-storybook": "0.5.5",
+    "eslint-plugin-unicorn": "39.0.0",
     "husky": "7.0.4",
-    "jest": "27.3.1",
-    "lint-staged": "11.2.6",
-    "markdownlint-cli": "0.29.0",
-    "mockttp": "2.4.0",
-    "plop": "2.7.6",
-    "postcss": "8.3.11",
-    "prettier": "2.4.1",
-    "semantic-release": "18.0.0",
+    "jest": "27.4.5",
+    "lint-staged": "12.1.4",
+    "markdownlint-cli": "0.30.0",
+    "mockttp": "2.5.0",
+    "next-secure-headers": "2.2.0",
+    "plop": "3.0.5",
+    "postcss": "8.4.5",
+    "prettier": "2.5.1",
+    "semantic-release": "18.0.1",
     "serve": "13.0.2",
     "start-server-and-test": "1.14.0",
     "storybook-tailwind-dark-mode": "1.0.11",
-    "tailwindcss": "2.2.19",
-    "typescript": "4.4.4",
-    "vercel": "23.1.2"
+    "tailwindcss": "3.0.7",
+    "typescript": "4.5.4",
+    "vercel": "23.1.2",
+    "webpack": "5.65.0"
   }
 }

pages/404.tsx

@@ -1,4 +1,4 @@
-import { GetStaticProps } from 'next'
+import { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from 'components/ErrorPage'
@@ -6,7 +6,7 @@ import { Head } from 'components/Head'
 import { Header } from 'components/Header'
 import { Footer, FooterProps } from 'components/Footer'
 
-const Error404: React.FC<FooterProps> = (props) => {
+const Error404: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 

pages/500.tsx

@@ -1,4 +1,4 @@
-import { GetStaticProps } from 'next'
+import { GetStaticProps, NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { ErrorPage } from 'components/ErrorPage'
@@ -6,7 +6,7 @@ import { Head } from 'components/Head'
 import { Header } from 'components/Header'
 import { Footer, FooterProps } from 'components/Footer'
 
-const Error500: React.FC<FooterProps> = (props) => {
+const Error500: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 

pages/application/[guildId]/[channelId].tsx

@@ -1,3 +1,5 @@
+import { NextPage } from 'next'
+
 import { Head } from 'components/Head'
 import { Application } from 'components/Application'
 import { Messages } from 'components/Application/Messages'
@@ -12,7 +14,7 @@ export interface ChannelPageProps extends PagePropsWithAuthentication {
   guildId: number
 }
 
-const ChannelPage: React.FC<ChannelPageProps> = (props) => {
+const ChannelPage: NextPage<ChannelPageProps> = (props) => {
   const { channelId, guildId, authentication } = props
 
   return (

pages/application/guilds/create.tsx

@@ -1,6 +1,7 @@
+import { NextPage } from 'next'
+
 import { Head } from 'components/Head'
 import { Application } from 'components/Application'
-
 import {
   authenticationFromServerSide,
   AuthenticationProvider,
@@ -8,7 +9,7 @@ import {
 } from 'utils/authentication'
 import { CreateGuild } from 'components/Application/CreateGuild'
 
-const CreateGuildPage: React.FC<PagePropsWithAuthentication> = (props) => {
+const CreateGuildPage: NextPage<PagePropsWithAuthentication> = (props) => {
   return (
     <AuthenticationProvider authentication={props.authentication}>
       <Head title='Thream | Create a Guild' />

pages/application/guilds/join.tsx

@@ -1,3 +1,5 @@
+import { NextPage } from 'next'
+
 import { Head } from 'components/Head'
 import { Application } from 'components/Application'
 import {
@@ -7,7 +9,7 @@ import {
 } from 'utils/authentication'
 import { JoinGuildsPublic } from 'components/Application/JoinGuildsPublic'
 
-const JoinGuildPage: React.FC<PagePropsWithAuthentication> = (props) => {
+const JoinGuildPage: NextPage<PagePropsWithAuthentication> = (props) => {
   return (
     <AuthenticationProvider authentication={props.authentication}>
       <Head title='Thream | Application' />

pages/application/index.tsx

@@ -1,3 +1,5 @@
+import { NextPage } from 'next'
+
 import { Head } from 'components/Head'
 import { Application } from 'components/Application'
 import { PopupGuild } from 'components/Application/PopupGuild/PopupGuild.stories'
@@ -7,7 +9,7 @@ import {
   PagePropsWithAuthentication
 } from 'utils/authentication'
 
-const ApplicationPage: React.FC<PagePropsWithAuthentication> = (props) => {
+const ApplicationPage: NextPage<PagePropsWithAuthentication> = (props) => {
   return (
     <AuthenticationProvider authentication={props.authentication}>
       <Head title='Thream | Application' />

pages/application/users/[userId].tsx

@@ -1,3 +1,5 @@
+import { NextPage } from 'next'
+
 import { Head } from 'components/Head'
 import { Application } from 'components/Application'
 import {
@@ -7,7 +9,7 @@ import {
 } from 'utils/authentication'
 import { UserProfile } from 'components/Application/UserProfile'
 
-const UserProfilePage: React.FC<PagePropsWithAuthentication> = (props) => {
+const UserProfilePage: NextPage<PagePropsWithAuthentication> = (props) => {
   return (
     <AuthenticationProvider authentication={props.authentication}>
       <Head title='Thream | Settings' />

pages/authentication/forgot-password.tsx

@@ -1,3 +1,4 @@
+import { NextPage } from 'next'
 import Link from 'next/link'
 import { AuthenticationForm } from 'components/Authentication'
 import useTranslation from 'next-translate/useTranslation'
@@ -16,7 +17,7 @@ import { userSchema } from 'models/User'
 import { api } from 'utils/api'
 import { HandleSubmitCallback, useForm } from 'hooks/useForm'
 
-const ForgotPassword: React.FC<FooterProps> = (props) => {
+const ForgotPassword: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 

pages/authentication/reset-password.tsx

@@ -1,3 +1,4 @@
+import { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import useTranslation from 'next-translate/useTranslation'
 import axios from 'axios'
@@ -16,7 +17,7 @@ import { api } from 'utils/api'
 import { userSchema } from '../../models/User'
 import { HandleSubmitCallback, useForm } from 'hooks/useForm'
 
-const ResetPassword: React.FC<FooterProps> = (props) => {
+const ResetPassword: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
   const router = useRouter()
   const { version } = props

pages/authentication/signin.tsx

@@ -1,3 +1,4 @@
+import { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from 'components/Head'
@@ -7,7 +8,7 @@ import { Footer, FooterProps } from 'components/Footer'
 import { authenticationFromServerSide } from 'utils/authentication'
 import { ScrollableBody } from 'components/ScrollableBody'
 
-const Signin: React.FC<FooterProps> = (props) => {
+const Signin: NextPage<FooterProps> = (props) => {
   const { version } = props
   const { t } = useTranslation()
 

pages/authentication/signup.tsx

@@ -1,3 +1,4 @@
+import { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from 'components/Head'
@@ -7,7 +8,7 @@ import { Footer, FooterProps } from 'components/Footer'
 import { authenticationFromServerSide } from 'utils/authentication'
 import { ScrollableBody } from 'components/ScrollableBody'
 
-const Signup: React.FC<FooterProps> = (props) => {
+const Signup: NextPage<FooterProps> = (props) => {
   const { version } = props
   const { t } = useTranslation()
 

pages/index.tsx

@@ -1,4 +1,4 @@
-import { GetStaticProps } from 'next'
+import { GetStaticProps, NextPage } from 'next'
 import Link from 'next/link'
 import Image from 'next/image'
 
@@ -13,7 +13,7 @@ import { SocialMediaButton } from 'components/design/SocialMediaButton'
 import { Button } from 'components/design/Button'
 import { ScrollableBody } from 'components/ScrollableBody'
 
-const Home: React.FC<FooterProps> = (props) => {
+const Home: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 

tailwind.config.js

@@ -1,6 +1,8 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}'
+  ],
   darkMode: 'class',
   theme: {
     extend: {
@@ -20,13 +22,10 @@ module.exports = {
         error: '0 2px 8px rgba(200, 69, 69, 0.5)'
       },
       fontFamily: {
-        headline: ['Montserrat', 'Arial', 'sans-serif'],
-        paragraph: ['Roboto', 'Arial', 'sans-serif']
+        headline: "'Montserrat', 'Arial', 'sans-serif'",
+        paragraph: "'Roboto', 'Arial', 'sans-serif'"
       }
     }
   },
-  variants: {
-    extend: {}
-  },
   plugins: []
 }

tsconfig.json

@@ -17,7 +17,8 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "skipLibCheck": true,
     "resolveJsonModule": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "incremental": true
   },
   "exclude": ["dist", ".next", "out", "next.config.js"],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]