update dependencies and switch to nextjs links. Moves page into _app!!!!

.eslintrc.js

@@ -1,3 +1,16 @@
 module.exports = {
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
   extends: '@codeday',
+  settings: {
+    'import/resolver': {
+      exports: {
+        require: false,
+        browser: false,
+        conditions: [],
+        unsafe: false,
+      },
+    },
+  },
 };

.gitignore

@@ -34,3 +34,7 @@ yarn-error.log*
 .vercel
 
 .env
+
+.yalc
+yalc.lock
+.vscode/settings.json

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "checkJs": true,
+    "jsx": "react"
+  },
+  "exclude": ["node_modules", ".next"]
+}

next.config.js

@@ -1,8 +1,15 @@
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
-  enabled: process.env.ANALYZE === "true",
-});
+const moment = require('moment-timezone');
+
+const shouldAnalyzeBundles = process.env.ANALYZE === 'true';
+
+moment.tz.setDefault('Etc/UTC');
 
-module.exports = withBundleAnalyzer({
+const { withTopo } = require('@codeday/topo/Next');
+
+/**
+ * @type {import('next').NextConfig}
+ */
+let nextConfig = withTopo({
   reactStrictMode: true,
   eslint: {
     ignoreDuringBuilds: true,
@@ -12,7 +19,7 @@ module.exports = withBundleAnalyzer({
       clientId: process.env.AUTH0_CLIENT_ID,
       clientSecret: process.env.AUTH0_CLIENT_SECRET,
       domain: process.env.AUTH0_DOMAIN,
-      issuer: `https://` + process.env.AUTH0_DOMAIN,
+      issuer: `https://${process.env.AUTH0_DOMAIN}`,
       roles: {
         employee: process.env.AUTH0_EMPLOYEE_ROLE,
         admin: process.env.AUTH0_ADMIN_ROLE,
@@ -28,12 +35,19 @@ module.exports = withBundleAnalyzer({
     },
     appUrl: process.env.APP_URL,
   },
-  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+  webpack: (config) => {
     config?.module?.rules.push({
       test: /\.(graphql|gql)$/,
       exclude: /node_modules/,
-      loader: "graphql-tag/loader",
+      loader: 'graphql-tag/loader',
     });
     return config;
   },
 });
+
+if (shouldAnalyzeBundles) {
+  const withNextBundleAnalyzer = require('next-bundle-analyzer')();
+  nextConfig = withNextBundleAnalyzer(nextConfig);
+}
+
+module.exports = nextConfig;

package.json

@@ -14,19 +14,18 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",
     "@chakra-ui/react": "^2.5.1",
-    "@codeday/topo": "^9.1.1",
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "@codeday/topocons": "^1.5.0",
+    "@codeday/topo": "^9.2.4",
+    "@codeday/topocons": "^2.0.2",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@emotion/utils": "1.0.0",
     "@headwayapp/react-widget": "^0.0.4",
-    "@rjsf/antd": "^3.1.0",
-    "@rjsf/chakra-ui": "^4.1.1",
-    "@rjsf/core": "^3.1.0",
+    "@rjsf/chakra-ui": "^5.2.1",
+    "@rjsf/core": "^5.2.1",
+    "@rjsf/utils": "^5.2.1",
+    "@rjsf/validator-ajv6": "^5.2.1",
     "@wojtekmaj/react-daterange-picker": "^3.3.0",
-    "antd": "^4.16.13",
-    "babel-plugin-import-graphql": "^2.8.1",
-    "chakra-react-select": "^4.4.3",
+    "chakra-react-select": "^4.6.0",
     "cookie-cutter": "^0.2.0",
     "cookies": "^0.8.0",
     "framer-motion": "^9.1.6",
@@ -40,8 +39,8 @@
     "marked": "^4.0.9",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
-    "next": "12",
-    "next-auth": "^4.3.1",
+    "next": "^13",
+    "next-auth": "^4.20.1",
     "next-router": "^1.3.6",
     "next-seo": "^4.26.0",
     "node-cache": "^5.1.2",
@@ -72,6 +71,9 @@
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-next": "11.1.0",
+    "eslint-import-resolver-exports": "^1.0.0-beta.5",
+    "formdata-node": "^5.0.0",
+    "next-bundle-analyzer": "^0.6.7",
     "npm-check": "^5.9.2"
   }
 }

src/components/Alert.js

@@ -1,61 +1,64 @@
 import React from 'react';
-import * as Icon from '@codeday/topocons/Icon';
+import {
+  UiError, UiInfo, UiOk, UiWarning,
+} from '@codeday/topocons';
+import { useColorModeValue } from '@codeday/topo/Theme';
+import { Icon } from '@chakra-ui/react';
 import Badge from './Badge';
-import {useColorModeValue} from "@codeday/topo/Theme";
 
-export default function Alert({children, ...props}) {
-    return (
-        <Badge
-            bg={useColorModeValue("red.200", "darkred")}
-            color={useColorModeValue("darkred", "red.200")}
-            borderColor={useColorModeValue("darkred", undefined)}
-            borderWidth={useColorModeValue(1, 0)}
-            {...props}
-        >
-	    <Icon.UiError/>{' '}{children}
-        </Badge>
-    );
+export default function Alert({ children, ...props }) {
+  return (
+    <Badge
+      bg={useColorModeValue('red.200', 'darkred')}
+      color={useColorModeValue('darkred', 'red.200')}
+      borderColor={useColorModeValue('darkred', undefined)}
+      borderWidth={useColorModeValue(1, 0)}
+      {...props}
+    >
+      <UiError />{' '}{children}
+    </Badge>
+  );
 }
 
-export function InfoAlert({children, ...props}) {
-    return (
-        <Badge
-            bg={useColorModeValue("gray.50", "gray.800")}
-            color={useColorModeValue("gray.800", "gray.50")}
-            borderColor={useColorModeValue("gray.800", undefined)}
-            borderWidth={useColorModeValue(1, 0)}
+export function InfoAlert({ children, ...props }) {
+  return (
+    <Badge
+      bg={useColorModeValue('gray.50', 'gray.800')}
+      color={useColorModeValue('gray.800', 'gray.50')}
+      borderColor={useColorModeValue('gray.800', undefined)}
+      borderWidth={useColorModeValue(1, 0)}
 
-            {...props}
-        >
-            <Icon.UiInfo/>{' '}{children}
-        </Badge>
-    );
+      {...props}
+    >
+      <UiInfo />{' '}{children}
+    </Badge>
+  );
 }
 
-export function WarningAlert({children, ...props}) {
-    return (
-        <Badge
-            bg={useColorModeValue("orange.50", "orange.800")}
-            color={useColorModeValue("orange.800", "orange.50")}
-            borderColor={useColorModeValue("orange.800", undefined)}
-            borderWidth={useColorModeValue(1, 0)}
-            {...props}
-        >
-            <Icon.UiWarning/>{' '}{children}
-        </Badge>
-    );
+export function WarningAlert({ children, ...props }) {
+  return (
+    <Badge
+      bg={useColorModeValue('orange.50', 'orange.800')}
+      color={useColorModeValue('orange.800', 'orange.50')}
+      borderColor={useColorModeValue('orange.800', undefined)}
+      borderWidth={useColorModeValue(1, 0)}
+      {...props}
+    >
+      <UiWarning />{' '}{children}
+    </Badge>
+  );
 }
 
-export function GoodAlert({children, ...props}) {
-    return (
-        <Badge
-            bg={useColorModeValue("green.50", "green.800")}
-            color={useColorModeValue("green.800", "green.50")}
-            borderColor={useColorModeValue("green.800", undefined)}
-            borderWidth={useColorModeValue(1, 0)}
-            {...props}
-        >
-            <Icon.UiOk/>{' '}{children}
-        </Badge>
-    );
+export function GoodAlert({ children, ...props }) {
+  return (
+    <Badge
+      bg={useColorModeValue('green.50', 'green.800')}
+      color={useColorModeValue('green.800', 'green.50')}
+      borderColor={useColorModeValue('green.800', undefined)}
+      borderWidth={useColorModeValue(1, 0)}
+      {...props}
+    >
+      <UiOk />{' '}{children}
+    </Badge>
+  );
 }

src/components/Badge.js

@@ -1,21 +1,21 @@
 import React from 'react';
-import {Box} from "@codeday/topo/Atom";
-import {useColorModeValue} from "@codeday/topo/Theme";
+import { Box } from '@codeday/topo/Atom';
+import { useColorModeValue } from '@codeday/topo/Theme';
 
-export default function Badge({children, ...props}) {
-    return (
-        <Box
-            display="inline-flex"
-            alignItems="center"
-            bg={useColorModeValue("gray.200", "gray.800")}
-            color={useColorModeValue("gray.800", "gray.200")}
-            p={1}
-            px={2}
-            m={1}
-            rounded={5}
-            {...props}
-        >
-            <b>{children}</b>
-        </Box>
-    );
+export default function Badge({ children, ...props }) {
+  return (
+    <Box
+      display="inline-flex"
+      alignItems="center"
+      bg={useColorModeValue('gray.200', 'gray.800')}
+      color={useColorModeValue('gray.800', 'gray.200')}
+      p={1}
+      px={2}
+      m={1}
+      rounded={5}
+      {...props}
+    >
+      <b>{children}</b>
+    </Box>
+  );
 }