rewrite website

- improve best practices
- use the latest version of next.js and tailwindcss
- remove unused ressources
- update structure
- include next.js Conformance
- improve linting rules
- update packages
- remove duplicated nav items

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "extends": [
+    "plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    "next" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  "plugins": ["unused-imports"],
+  "rules": {
+    "prettier/prettier": [
+      "warn",
+      {
+        "singleQuote": true
+      }
+    ],
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "unused-imports/no-unused-imports-ts": 2,
+    "react/react-in-jsx-scope": "off",
+    "react/no-unescaped-entities": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/prop-types": [2, { "ignore": ["children"] }],
+    "react/display-name": "off"
+  }
+}

next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

next.config.js

@@ -9,9 +9,6 @@ module.exports = withMDX({
   images: {
     domains: ['res.cloudinary.com'],
   },
-  future: {
-    webpack5: true,
-  },
   async redirects() {
     return [
       {

package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "postbuild": "next-sitemap",
+    "lint": "next lint",
     "prepare": "husky install"
   },
   "lint-staged": {
@@ -26,33 +27,32 @@
     "@reach/portal": "^0.13.0",
     "formik": "^2.2.6",
     "mdx-utils": "^0.2.0",
-    "next": "^10.2.0",
-    "react": "17.0.1",
+    "next": "^11.0.1",
+    "react": "^17.0.2",
     "react-content-loader": "^6.0.1",
-    "react-dom": "17.0.1",
+    "react-div-100vh": "^0.6.0",
+    "react-dom": "^17.0.2",
     "react-dom-confetti": "^0.2.0",
     "react-hook-form": "^7.6.4",
     "react-live": "^2.2.3",
     "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@types/node": "^14.14.28",
-    "@types/react": "^17.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
-    "autoprefixer": "^10.2.4",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "@types/node": "^15.12.4",
+    "@types/react": "^17.0.11",
+    "@typescript-eslint/parser": "^4.28.0",
+    "autoprefixer": "^10.2.6",
+    "eslint": "^7.29.0",
+    "eslint-config-next": "^11.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-unused-imports": "^1.1.1",
-    "husky": "^5.1.3",
-    "lint-staged": "^10.5.4",
-    "next-sitemap": "^1.5.6",
-    "postcss": "^8.2.6",
-    "prettier": "^2.2.1",
-    "tailwindcss": "^2.0.3",
-    "typescript": "^4.1.5"
+    "husky": "^6.0.0",
+    "lint-staged": "^11.0.0",
+    "next-sitemap": "^1.6.124",
+    "postcss": "^8.3.5",
+    "prettier": "^2.3.1",
+    "tailwindcss": "^2.2.4",
+    "typescript": "^4.3.4"
   }
 }

packages/autocomplete/index.tsx

@@ -65,7 +65,7 @@ const Autocomplete = ({
       setShowSuggestions(true);
       setValue(e.currentTarget.value);
     },
-    [value],
+    [setValue, suggestions],
   );
 
   const onClick = (e) => {

packages/code/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 interface CodeProps {
   variant: 'black' | 'default' | 'indigo' | 'blue-outline';
@@ -15,20 +15,19 @@ const classes = {
 
 const Code = ({ children, variant, acceptCopy }: CodeProps) => {
   const [copied, setCopied] = useState(false);
-  let resetCopy;
+  const resetCopy = useRef<any>();
 
-  const onCopyCode = async () => {
-    await navigator.clipboard.writeText(children);
-    setCopied(true);
+  const onCopyCode = () => {
+    navigator.clipboard.writeText(children).then(() => setCopied(true));
   };
 
   useEffect(() => {
     if (copied) {
-      resetCopy = setTimeout(() => setCopied(false), 2500);
+      resetCopy.current = setTimeout(() => setCopied(false), 2500);
     }
 
     return () => {
-      clearTimeout(resetCopy);
+      clearTimeout(resetCopy.current);
     };
   }, [copied]);
   return (

packages/code/snippets/blueOutline.mdx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 
 export const CodePage = () => (
   <div className="m-8">
-    <Code>yarn add swr react-table</Code>
+    <Code>yarn add swr react-documentationTable</Code>
   </div>
 );
 

packages/drawer/examples/bottom.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 import Drawer from '../index';
 
 const DrawerBottom: FC = () => {

packages/drawer/examples/left.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 import Drawer from '../index';
 
 const DrawerLeft: FC = () => {

packages/drawer/examples/right.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 import Drawer from '../index';
 
 const DrawerRight: FC = () => {

packages/drawer/examples/simple.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 import Drawer from '../index';
 
 const DrawerSimple: FC = () => {

packages/drawer/examples/top.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 import Drawer from '../index';
 
 const DrawerTop: FC = () => {

packages/drawer/index.tsx

@@ -51,7 +51,7 @@ const Drawer = ({
     };
     window.addEventListener('click', handleOutsideClick);
     return () => window.removeEventListener('click', handleOutsideClick);
-  }, [isOpen, ref]);
+  }, [isOpen, ref, toggle]);
 
   // close modal when you click on "ESC" key
   useEffect(() => {
@@ -64,7 +64,7 @@ const Drawer = ({
     };
     document.addEventListener('keyup', handleEscape);
     return () => document.removeEventListener('keyup', handleEscape);
-  }, [isOpen]);
+  }, [isOpen, toggle]);
 
   // hide scrollbar and prevent body from moving when modal is open
   useEffect(() => {

packages/hamburger-menu/index.tsx

@@ -61,6 +61,7 @@ HamburgerMenu.Toggler = ({ toggle }: HamburgerTogglerProps) => (
 );
 
 HamburgerMenu.Collapse = ({ children, isOpen }: HamburgerCollapseProps) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const ref = useRef<HTMLDivElement>(null);
   const inlineStyles: CSSProperties = isOpen
     ? { height: ref.current?.scrollHeight }

packages/modal/examples/animation.tsx

@@ -1,7 +1,7 @@
 import Modal from '../index';
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 
 const ModalAnimation: FC = () => {
   const { toggle, isOpen } = useDisclosure();

packages/modal/examples/default.tsx

@@ -1,7 +1,7 @@
 import Modal from '../index';
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 
 const ModalDefault: FC = () => {
   const { toggle, isOpen } = useDisclosure();

packages/modal/examples/extraLarge.tsx

@@ -1,7 +1,7 @@
 import Modal from '../index';
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 
 const ModalExtraLarge: FC = () => {
   const { toggle, isOpen } = useDisclosure();

packages/modal/examples/large.tsx

@@ -1,7 +1,7 @@
 import Modal from '../index';
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 
 const ModalLarge: FC = () => {
   const { toggle, isOpen } = useDisclosure();

packages/modal/examples/notClosedOutside.tsx

@@ -1,7 +1,7 @@
 import Modal from '../index';
 import { FC } from 'react';
 import Button from '@/packages/button';
-import useDisclosure from '@/website/utils/useDisclosure';
+import useDisclosure from '@/website/hooks/useDisclosure';
 
 const ModalNotClosedOutside: FC = () => {
   const { toggle, isOpen } = useDisclosure();

packages/modal/index.tsx

@@ -53,7 +53,7 @@ const Modal = ({
     };
     window.addEventListener('click', handleOutsideClick);
     return () => window.removeEventListener('click', handleOutsideClick);
-  }, [isOpen, ref]);
+  }, [closeOnClickOutside, isOpen, ref, toggle]);
 
   // close modal when you click on "ESC" key
   useEffect(() => {
@@ -65,7 +65,7 @@ const Modal = ({
     };
     document.addEventListener('keyup', handleEscape);
     return () => document.removeEventListener('keyup', handleEscape);
-  }, [isOpen]);
+  }, [isOpen, toggle]);
 
   // Put focus on modal dialogue, hide scrollbar and prevent body from moving when modal is open
   useEffect(() => {

packages/sidenav/index.tsx

@@ -49,7 +49,7 @@ const Sidenav = ({
     };
     window.addEventListener('mousedown', handleOutsideClick);
     return () => window.removeEventListener('mousedown', handleOutsideClick);
-  }, [isOpen, ref]);
+  }, [closeOnClickOutside, isOpen, ref, toggle]);
 
   return (
     <aside