Merge branch 'package-upgrades' into develop

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

next.config.js

@@ -3,16 +3,9 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
 });
 
 module.exports = withBundleAnalyzer({
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: {
-        test: /\.(js|ts)x?$/,
-      },
-      use: ["@svgr/webpack"],
-    });
-
-    return config;
+  future: {
+    webpack5: true,
+    strictPostcssConfiguration: true,
   },
   async rewrites() {
     return [

package.json

@@ -11,72 +11,73 @@
     "lint": "eslint . --ignore-path .gitignore",
     "seed-database": "node scripts/seedDatabase.js",
     "start": "next start",
-    "validate": "yarn check-types && yarn lint"
+    "validate": "yarn check-types && yarn lint",
+    "prepare": "husky install && shx rm -rf .git/hooks && shx ln -s ../.husky .git/hooks"
   },
   "dependencies": {
-    "@headlessui/react": "^0.3.0",
-    "@nestjs/common": "^7.6.11",
+    "@headlessui/react": "^0.3.2",
+    "@heroicons/react": "^1.0.0",
+    "@nestjs/common": "^7.6.15",
     "@nestjs/config": "^0.6.3",
-    "@nestjs/core": "^7.6.11",
-    "@nestjs/platform-express": "^7.6.11",
-    "@next/bundle-analyzer": "^10.0.6",
-    "@react-aria/interactions": "^3.3.2",
-    "@svgr/webpack": "^5.5.0",
-    "@tailwindcss/forms": "^0.2.1",
+    "@nestjs/core": "^7.6.15",
+    "@nestjs/platform-express": "^7.6.15",
+    "@next/bundle-analyzer": "^10.1.3",
+    "@react-aria/interactions": "^3.3.4",
+    "@tailwindcss/forms": "^0.3.2",
     "@tailwindcss/typography": "^0.4.0",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.2.5",
     "clsx": "^1.1.1",
-    "date-fns": "^2.17.0",
+    "date-fns": "^2.20.0",
     "dotenv": "^8.2.0",
-    "faker": "^5.3.1",
-    "firebase": "^8.2.6",
-    "firebase-admin": "^9.4.2",
-    "framer-motion": "^3.3.0",
-    "heroicons": "^0.4.2",
+    "faker": "^5.5.3",
+    "firebase": "^8.3.3",
+    "firebase-admin": "^9.6.0",
+    "framer-motion": "^4.1.3",
     "lodash.kebabcase": "^4.1.1",
-    "next": "^10.0.6",
-    "postcss": "^8.2.5",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-firebase-hooks": "^2.2.0",
-    "react-hook-form": "^6.15.1",
+    "next": "^10.1.3",
+    "postcss": "^8.2.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-firebase-hooks": "^3.0.3",
+    "react-hook-form": "^7.0.4",
     "react-linkify": "^1.0.0-alpha",
     "react-syntax-highlighter": "^15.4.3",
-    "react-virtuoso": "^1.5.4",
+    "react-virtuoso": "^1.6.0",
     "reflect-metadata": "^0.1.13",
-    "rxjs": "^6.6.3",
-    "tailwindcss": "^2.0.2",
-    "tinykeys": "^1.1.1"
+    "rxjs": "^6.6.7",
+    "tailwindcss": "^2.1.1",
+    "tinykeys": "^1.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/plugin-proposal-decorators": "^7.12.13",
-    "@nestjs/cli": "^7.5.4",
-    "@nestjs/schematics": "^7.2.7",
+    "@babel/core": "^7.13.15",
+    "@babel/plugin-proposal-decorators": "^7.13.15",
+    "@nestjs/cli": "^7.6.0",
+    "@nestjs/schematics": "^7.3.1",
     "@types/express": "^4.17.11",
     "@types/lodash.kebabcase": "^4.1.6",
-    "@types/node": "^14.14.25",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
+    "@types/node": "^14.14.37",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "@types/react-linkify": "^1.0.0",
     "@types/react-syntax-highlighter": "^13.5.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.2",
-    "@typescript-eslint/parser": "^4.14.2",
+    "@typescript-eslint/eslint-plugin": "^4.21.0",
+    "@typescript-eslint/parser": "^4.21.0",
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.19.0",
+    "eslint": "^7.23.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-flowtype": "^5.6.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.3.8",
+    "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
     "organize-imports-cli": "^0.8.0",
     "prettier": "^2.2.1",
-    "prettier-plugin-packagejson": "^2.2.9",
-    "type-fest": "^0.20.2",
-    "typescript": "^4.1.3"
+    "prettier-plugin-packagejson": "^2.2.10",
+    "shx": "^0.3.3",
+    "type-fest": "^1.0.1",
+    "typescript": "^4.2.4"
   }
 }

scripts/seedDatabase.js

@@ -86,7 +86,7 @@ async function seed() {
         email: faker.internet.email(),
         name: `${faker.name.firstName()} ${faker.name.lastName()}`,
         companyWebsite: faker.internet.url(),
-        companySize: faker.random.number(100),
+        companySize: faker.datatype.number(100),
         productsOfInterest: [
           maybe() && "Vercel",
           maybe() && "Preview Deployments",
@@ -160,7 +160,7 @@ async function seed() {
         email: faker.internet.email(),
         name: `${faker.name.firstName()} ${faker.name.lastName()}`,
         companyWebsite: faker.internet.url(),
-        companySize: faker.random.number(100),
+        companySize: faker.datatype.number(100),
         productsOfInterest: {
           "Ich möchte mehr über das Digitalkonzept der Showcases erfahren": maybe(),
           "Ich würde gerne die Labs besuchen": maybe(),

src/components/ColorSelect.tsx

@@ -1,7 +1,6 @@
 import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";
 import clsx from "clsx";
-import SolidCheckIcon from "heroicons/solid/check.svg";
-import SolidSelectorIcon from "heroicons/solid/selector.svg";
 import React, { ReactElement } from "react";
 import { FormColor } from "src/types/form";
 
@@ -34,10 +33,7 @@ export default function ColorSelect({ open, color }: Props): ReactElement {
           </span>
         </div>
         <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-          <SolidSelectorIcon
-            className="h-5 w-5 text-gray-400"
-            aria-hidden="true"
-          />
+          <SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
         </span>
       </Listbox.Button>
       <Transition
@@ -84,7 +80,7 @@ export default function ColorSelect({ open, color }: Props): ReactElement {
 
                   {selected && (
                     <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-rose-500">
-                      <SolidCheckIcon className="h-5 w-5" aria-hidden="true" />
+                      <CheckIcon className="h-5 w-5" aria-hidden="true" />
                     </span>
                   )}
                 </>

src/components/ModalProvider.tsx

@@ -1,5 +1,5 @@
 import { Transition } from "@headlessui/react";
-import OutlineExclamationIcon from "heroicons/outline/exclamation.svg";
+import { ExclamationIcon } from "@heroicons/react/outline";
 import {
   createContext,
   ReactElement,
@@ -108,7 +108,7 @@ export default function ModalProvider({ children }: Props): ReactElement {
           >
             <div>
               <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
-                <OutlineExclamationIcon
+                <ExclamationIcon
                   className="h-6 w-6 text-red-600"
                   aria-hidden="true"
                 />

src/components/SnackbarProvider.tsx

@@ -1,5 +1,5 @@
+import { XIcon } from "@heroicons/react/outline";
 import { AnimatePresence, motion } from "framer-motion";
-import OutlineXIcon from "heroicons/outline/x.svg";
 import React, {
   createContext,
   ReactElement,
@@ -86,7 +86,7 @@ export default function SnackbarProvider({ children }: Props): ReactElement {
                       }
                     >
                       <span className="sr-only">Dismiss</span>
-                      <OutlineXIcon
+                      <XIcon
                         className="h-6 w-6 text-white"
                         aria-hidden="true"
                       />

src/components/SubmissionDetails.tsx

@@ -1,12 +1,14 @@
 import { Transition } from "@headlessui/react";
+import {
+  BanIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ClockIcon,
+  HashtagIcon,
+  LinkIcon,
+  UserAddIcon,
+} from "@heroicons/react/solid";
 import clsx from "clsx";
-import SolidBanIcon from "heroicons/solid/ban.svg";
-import SolidCheckIcon from "heroicons/solid/check.svg";
-import SolidChevronDownIcon from "heroicons/solid/chevron-down.svg";
-import SolidClockIcon from "heroicons/solid/clock.svg";
-import SolidHashtagIcon from "heroicons/solid/hashtag.svg";
-import SolidLinkIcon from "heroicons/solid/link.svg";
-import SolidUserAddIcon from "heroicons/solid/user-add.svg";
 import React, { ReactElement, useState } from "react";
 import { firestore } from "src/firebase";
 import { FormSubmission } from "src/types/form";
@@ -51,14 +53,14 @@ export default function SubmissionDetails({ submission }: Props): ReactElement {
                 </h2>
                 <div className="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
                   <div className="mt-2 flex items-center text-sm text-gray-500">
-                    <SolidClockIcon
+                    <ClockIcon
                       className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                       aria-hidden="true"
                     />
                     January 14, 14:38
                   </div>
                   <div className="mt-2 flex items-center text-sm text-gray-500">
-                    <SolidHashtagIcon
+                    <HashtagIcon
                       className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                       aria-hidden="true"
                     />
@@ -73,7 +75,7 @@ export default function SubmissionDetails({ submission }: Props): ReactElement {
                     className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-400"
                     onClick={() => alert("Coming Soon!")}
                   >
-                    <SolidUserAddIcon
+                    <UserAddIcon
                       className="-ml-1 mr-2 h-5 w-5 text-gray-500"
                       aria-hidden="true"
                     />
@@ -90,7 +92,7 @@ export default function SubmissionDetails({ submission }: Props): ReactElement {
                       showSnackbar("URL copied to clipboard.");
                     }}
                   >
-                    <SolidLinkIcon
+                    <LinkIcon
                       className="-ml-1 mr-2 h-5 w-5 text-gray-500"
                       aria-hidden="true"
                     />
@@ -109,12 +111,12 @@ export default function SubmissionDetails({ submission }: Props): ReactElement {
                     onClick={handleMarkAsDone}
                   >
                     {submission?.done ? (
-                      <SolidBanIcon
+                      <BanIcon
                         className="-ml-1 mr-2 h-5 w-5"
                         aria-hidden="true"
                       />
                     ) : (
-                      <SolidCheckIcon
+                      <CheckIcon
                         className="-ml-1 mr-2 h-5 w-5"
                         aria-hidden="true"
                       />
@@ -132,7 +134,7 @@ export default function SubmissionDetails({ submission }: Props): ReactElement {
                     onClick={() => setShowDropdown(!showDropdown)}
                   >
                     More
-                    <SolidChevronDownIcon
+                    <ChevronDownIcon
                       className="-mr-1 ml-2 h-5 w-5 text-gray-500"
                       aria-hidden="true"
                     />

src/components/form-data-list/BooleanEntry.tsx

@@ -1,5 +1,4 @@
-import SolidCheckIcon from "heroicons/solid/check.svg";
-import SolidXIcon from "heroicons/solid/x.svg";
+import { CheckIcon, XIcon } from "@heroicons/react/solid";
 import React, { ReactElement } from "react";
 
 interface Props {
@@ -17,7 +16,7 @@ export default function BooleanEntry({
         <dt className="text-sm font-medium text-gray-500">{propertyName}</dt>
         <dd className="mt-1 text-sm text-green-600">
           <span className="sr-only">True</span>
-          <SolidCheckIcon className="h-5 w-5 -ml-px" aria-hidden="true" />
+          <CheckIcon className="h-5 w-5 -ml-px" aria-hidden="true" />
         </dd>
       </div>
     );
@@ -28,7 +27,7 @@ export default function BooleanEntry({
       <dt className="text-sm font-medium text-gray-500">{propertyName}</dt>
       <dd className="mt-1 text-sm text-red-600">
         <span className="sr-only">False</span>
-        <SolidXIcon className="h-5 w-5 -ml-1" aria-hidden="true" />
+        <XIcon className="h-5 w-5 -ml-1" aria-hidden="true" />
       </dd>
     </div>
   );

src/components/sidebar/Sidebar.tsx

@@ -1,7 +1,5 @@
-import OutlineAtSymbolIcon from "heroicons/outline/at-symbol.svg";
-import OutlineInboxIcon from "heroicons/outline/inbox.svg";
-import SolidPlusIcon from "heroicons/solid/plus.svg";
-import SolidSearchIcon from "heroicons/solid/search.svg";
+import { AtSymbolIcon, InboxIcon } from "@heroicons/react/outline";
+import { PlusIcon, SearchIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 import React, { ChangeEvent, ReactElement, useMemo, useState } from "react";
 import { useCollectionData } from "react-firebase-hooks/firestore";
@@ -47,10 +45,10 @@ export default function Sidebar(): ReactElement {
       {/* Navigation */}
       <nav className="px-3 mt-6">
         <div className="space-y-1">
-          <PrimaryLink href="/inbox" Icon={OutlineInboxIcon}>
+          <PrimaryLink href="/inbox" Icon={InboxIcon}>
             Inbox
           </PrimaryLink>
-          <PrimaryLink href="/tasks" Icon={OutlineAtSymbolIcon}>
+          <PrimaryLink href="/tasks" Icon={AtSymbolIcon}>
             Assigned to me
           </PrimaryLink>
         </div>
@@ -71,7 +69,7 @@ export default function Sidebar(): ReactElement {
                 className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
                 aria-hidden="true"
               >
-                <SolidSearchIcon
+                <SearchIcon
                   className="mr-3 h-4 w-4 text-gray-400"
                   aria-hidden="true"
                 />
@@ -110,7 +108,7 @@ export default function Sidebar(): ReactElement {
               href="/new-form"
               leading={
                 <span className="w-2.5 h-2.5 mr-4 relative">
-                  <SolidPlusIcon
+                  <PlusIcon
                     className="w-6 h-6 -top-2 -left-1.5 absolute text-gray-400 mr-4"
                     aria-hidden="true"
                   />

src/components/sidebar/UserMenu.tsx

@@ -1,5 +1,5 @@
 import { Transition } from "@headlessui/react";
-import SolidSelectorIcon from "heroicons/solid/selector.svg";
+import { SelectorIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import { ReactElement } from "react";
 import { useDocumentData } from "react-firebase-hooks/firestore";
@@ -58,7 +58,7 @@ export default function UserMenu(): ReactElement {
               </span>
             </span>
           </span>
-          <SolidSelectorIcon
+          <SelectorIcon
             className="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
             aria-hidden="true"
           />