Merge pull request #164 from theodo-group/update-next

chore: update to next 14 with app dir
theodo-group · Dec 18, 2023 · d3bd584 · d3bd584
2 parents 8c4e63a + ffb0f03
commit d3bd584
Show file tree

Hide file tree

Showing 80 changed files with 1,707 additions and 791 deletions.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -12,7 +12,7 @@ on:
 
 env:
   CI: true
-  NODE_VERSION: 18
+  NODE_VERSION: 20
   HUSKY: 0
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -11,7 +11,7 @@ name: ⛷ PR tests
 
 env:
   CI: true
-  NODE_VERSION: 18
+  NODE_VERSION: 20
   HUSKY: 0
 
 defaults:

diff --git a/.github/workflows/starter-build.yml b/.github/workflows/starter-build.yml
@@ -12,7 +12,7 @@ on:
 
 env:
   CI: true
-  NODE_VERSION: 18
+  NODE_VERSION: 20
   HUSKY: 0
 
 # Allow one concurrent deployment

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.12.1
+20.10.0
diff --git a/bifrost.code-workspace b/bifrost.code-workspace
@@ -3,8 +3,8 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true,
-      "source.fixAll.stylelint": true
+      "source.fixAll.eslint": "explicit",
+      "source.fixAll.stylelint": "explicit"
     },
     "stylelint.validate": [
       "typescript",

diff --git a/documentation/docs/getting-started.md b/documentation/docs/getting-started.md
@@ -10,7 +10,7 @@ These instructions will get you a copy of the latest version of bifrost on your
 ### Prerequisites
 
 - [Install fnm](https://github.com/Schniz/fnm#installation) (node version manager)
-- [Node 18+](https://nodejs.org/en/) `fnm install lts/hydrogen && fnm use lts/hydrogen`
+- [Node 20+](https://nodejs.org/en/) `fnm install lts/hydrogen && fnm use lts/hydrogen`
 - [Pnpm](https://pnpm.io/installation) (`corepack enable && corepack prepare [email protected] --activate`)
 
 ### Installing

diff --git a/documentation/package.json b/documentation/package.json
@@ -47,6 +47,6 @@
     "typescript": "4.7.4"
   },
   "engines": {
-    "node": "^18.12.1"
+    "node": "^20.10.0"
   }
 }
diff --git a/examples/bifrost-starter/.github/workflows/ci.yml b/examples/bifrost-starter/.github/workflows/ci.yml
@@ -2,7 +2,7 @@ name: ⛷ PR tests
 
 env:
   CI: true
-  NODE_VERSION: 18
+  NODE_VERSION: 20
 
 defaults:
   run:

diff --git a/examples/bifrost-starter/.nvmrc b/examples/bifrost-starter/.nvmrc
@@ -1 +1 @@
-18.12.1
+20.10.0
diff --git a/examples/bifrost-starter/apps/backend/package.json b/examples/bifrost-starter/apps/backend/package.json
@@ -93,6 +93,6 @@
     "webpack": "5.88.1"
   },
   "engines": {
-    "node": "^18.12.1"
+    "node": "^20.10.0"
   }
 }
diff --git a/examples/bifrost-starter/apps/frontend/app/[locale]/error.tsx b/examples/bifrost-starter/apps/frontend/app/[locale]/error.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { CrashFallback } from 'components/CrashFallback/CrashFallback';
+
+/**
+ * use this error to handle server side errors,
+ * you can put it directly in a page directory and it will be wrapped by the
+ * layout at the same level and above it,
+ * more info here: https://nextjs.org/docs/app/building-your-application/routing/error-handling
+ */
+const ErrorPage = ({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) => {
+  useEffect(() => {
+    // You can use your own error logging service here like sentry
+    console.error({ error, errorInfo: error.digest });
+  }, [error]);
+
+  return <CrashFallback reset={reset} />;
+};
+
+export default ErrorPage;
diff --git a/examples/bifrost-starter/apps/frontend/app/[locale]/layout.tsx b/examples/bifrost-starter/apps/frontend/app/[locale]/layout.tsx
@@ -0,0 +1,39 @@
+import { Inter } from 'next/font/google';
+import { notFound } from 'next/navigation';
+import Script from 'next/script';
+import { FC, PropsWithChildren } from 'react';
+
+import { isValidLocale } from 'locales/locales';
+import { SWRProvider } from 'providers/swr-provider';
+
+// https://nextjs.org/docs/app/building-your-application/optimizing/fonts
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+const RootLayout: FC<
+  PropsWithChildren<{
+    params: { locale: string };
+  }>
+> = ({ children, params: { locale } }) => {
+  if (!isValidLocale(locale)) {
+    console.error(`Invalid locale: ${locale}`);
+    notFound();
+  }
+
+  return (
+    // Accessibility and SEO: change the lang attribute if other languages are present
+    <html lang={locale} className={inter.className}>
+      <head>
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+      </head>
+      <body>
+        <Script strategy="beforeInteractive" id="env-var" src="/__ENV.js" />
+        <SWRProvider>{children}</SWRProvider>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
diff --git a/examples/bifrost-starter/apps/frontend/app/[locale]/login/layout.tsx b/examples/bifrost-starter/apps/frontend/app/[locale]/login/layout.tsx
@@ -0,0 +1,3 @@
+import { IntlLayoutWrapper } from 'locales/IntlLayoutWrapper';
+
+export default IntlLayoutWrapper;
diff --git a/examples/bifrost-starter/apps/frontend/app/[locale]/login/page.tsx b/examples/bifrost-starter/apps/frontend/app/[locale]/login/page.tsx
@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+import { FC } from 'react';
+
+import { Login } from 'components/pages/Login/Login';
+
+export const metadata: Metadata = {
+  title: 'Login | Bifrost',
+  description: 'Login page',
+};
+
+const LoginPage: FC = () => <Login />;
+
+export default LoginPage;
diff --git a/examples/bifrost-starter/apps/frontend/app/[locale]/page.tsx b/examples/bifrost-starter/apps/frontend/app/[locale]/page.tsx
@@ -0,0 +1,13 @@
+import { NextPage } from 'next';
+import type { Metadata } from 'next';
+
+import { Home } from 'components/pages/Home/Home';
+
+export const metadata: Metadata = {
+  title: 'Bifrost',
+  description: 'Generated with bifrost',
+};
+
+const HomePage: NextPage = () => <Home />;
+
+export default HomePage;
diff --git a/examples/bifrost-starter/apps/frontend/app/[locale]/profile/layout.tsx b/examples/bifrost-starter/apps/frontend/app/[locale]/profile/layout.tsx
@@ -0,0 +1,3 @@
+import { IntlLayoutWrapper } from 'locales/IntlLayoutWrapper';
+
+export default IntlLayoutWrapper;
diff --git a/examples/bifrost-starter/apps/frontend/app/[locale]/profile/page.tsx b/examples/bifrost-starter/apps/frontend/app/[locale]/profile/page.tsx
@@ -0,0 +1,13 @@
+import type { Metadata } from 'next';
+import { FC } from 'react';
+
+import { Profile } from 'components/pages/Profile/Profile';
+
+export const metadata: Metadata = {
+  title: 'Profile | Bifrost',
+  description: 'You profile on Bifrost',
+};
+
+const ProfilePage: FC = () => <Profile />;
+
+export default ProfilePage;
diff --git a/examples/bifrost-starter/apps/frontend/app/global-error.tsx b/examples/bifrost-starter/apps/frontend/app/global-error.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { FC, useEffect } from 'react';
+
+import { CrashFallback } from 'components/CrashFallback/CrashFallback';
+
+/**
+ * Global catch all error page for root layout errors
+ * more info here: https://nextjs.org/docs/app/building-your-application/routing/error-handling#handling-errors-in-root-layouts
+ */
+const GlobalError: FC<{
+  error: Error & { digest?: string };
+  reset: () => void;
+}> = ({ error, reset }) => {
+  useEffect(() => {
+    // You can use your own error logging service here like sentry
+    console.error({ error, errorInfo: error.digest });
+  }, [error]);
+
+  return (
+    <html lang="en">
+      <body>
+        <main>
+          <h1> Something went wrong!</h1>
+          <CrashFallback reset={reset} />
+        </main>
+      </body>
+    </html>
+  );
+};
+
+export default GlobalError;
diff --git a/examples/bifrost-starter/apps/frontend/app/layout.tsx b/examples/bifrost-starter/apps/frontend/app/layout.tsx
@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+import 'styles/global.css';
+import 'styles/stylesheet.css';
+// Since we have a `not-found.tsx` page on the root, a layout file
+// is required, even if it's just passing children through.
+const RootLayout: FC<PropsWithChildren> = ({ children }) => children;
+
+export default RootLayout;
diff --git a/examples/bifrost-starter/apps/frontend/app/not-found.tsx b/examples/bifrost-starter/apps/frontend/app/not-found.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import Error from 'next/error';
+import { FC } from 'react';
+
+// Render the default Next.js 404 page
+
+const NotFound: FC = () => {
+  return (
+    <html lang="en">
+      <body>
+        <Error statusCode={404} />
+      </body>
+    </html>
+  );
+};
+
+export default NotFound;
diff --git a/examples/bifrost-starter/apps/frontend/app/robots.txt b/examples/bifrost-starter/apps/frontend/app/robots.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Allow: *
diff --git a/examples/bifrost-starter/apps/frontend/components/AppCrashFallback/AppCrashFallback.tsx b/examples/bifrost-starter/apps/frontend/components/AppCrashFallback/AppCrashFallback.tsx
diff --git a/examples/bifrost-starter/apps/frontend/components/AppCrashFallback/index.ts b/examples/bifrost-starter/apps/frontend/components/AppCrashFallback/index.ts
diff --git a/...CrashFallback/AppCrashFallback.module.css → ...ts/CrashFallback/CrashFallback.module.css b/...CrashFallback/AppCrashFallback.module.css → ...ts/CrashFallback/CrashFallback.module.css
@@ -1,9 +1,10 @@
-.container {
-  display: flex;
-  justify-content: center;
-}
 
-.pageContent {
+
+.fallbackContent {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: center;
   padding: 6rem 3rem;
 }
 

diff --git a/examples/bifrost-starter/apps/frontend/components/CrashFallback/CrashFallback.tsx b/examples/bifrost-starter/apps/frontend/components/CrashFallback/CrashFallback.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react';
+
+import style from './CrashFallback.module.css';
+
+export const CrashFallback: FC<{ reset?: () => void }> = ({ reset }) => (
+  <div className={style.fallbackContent}>
+    <h2>Sorry, this is not working properly.</h2>
+    <br />
+    <p>We know about this issue and are working to fix it.</p>
+    <br />
+    <p>In the meantime, here is what you can do:</p>
+    <ul className={style.helperList}>
+      {reset && (
+        <li>
+          <button
+            onClick={
+              // Attempt to recover by trying to re-render the segment
+              reset
+            }
+          >
+            Try again
+          </button>
+        </li>
+      )}
+      <li>Refresh the page (sometimes it helps).</li>
+      <li>Try again in 30 minutes.</li>
+    </ul>
+  </div>
+);
diff --git a/examples/bifrost-starter/apps/frontend/components/ErrorBoundary/ErrorBoundary.tsx b/examples/bifrost-starter/apps/frontend/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,8 +1,10 @@
-import { Component, ErrorInfo } from 'react';
+'use client';
+
+import { Component, ErrorInfo, FC, ReactElement } from 'react';
 
 type ErrorBoundaryProps = {
-  FallbackComponent: () => JSX.Element;
-  children: JSX.Element;
+  FallbackComponent: FC;
+  children: ReactElement;
 };
 
 type ErrorBoundaryState = {
@@ -24,7 +26,7 @@ export class ErrorBoundary extends Component<
     // You can use your own error logging service here like sentry
     console.error({ error, errorInfo });
   }
-  render(): JSX.Element {
+  render(): ReactElement {
     const { hasError } = this.state;
     const { FallbackComponent, children } = this.props;
 

diff --git a/examples/bifrost-starter/apps/frontend/components/ErrorBoundary/index.ts b/examples/bifrost-starter/apps/frontend/components/ErrorBoundary/index.ts
diff --git a/examples/bifrost-starter/apps/frontend/components/atoms/VisuallyHidden/VisuallyHidden.tsx b/examples/bifrost-starter/apps/frontend/components/atoms/VisuallyHidden/VisuallyHidden.tsx
@@ -1,11 +1,11 @@
+import { FC } from 'react';
+
 import style from './VisuallyHidden.module.css';
 
 type VisuallyHiddenProps = {
   children: React.ReactNode;
 };
 
-export const VisuallyHidden = ({
-  children,
-}: VisuallyHiddenProps): JSX.Element => (
+export const VisuallyHidden: FC<VisuallyHiddenProps> = ({ children }) => (
   <span className={style.visuallyHidden}>{children}</span>
 );
diff --git a/examples/bifrost-starter/apps/frontend/components/atoms/VisuallyHidden/index.ts b/examples/bifrost-starter/apps/frontend/components/atoms/VisuallyHidden/index.ts
diff --git a/examples/bifrost-starter/apps/frontend/components/atoms/forms/Input/Input.test.tsx b/examples/bifrost-starter/apps/frontend/components/atoms/forms/Input/Input.test.tsx
@@ -1,7 +1,7 @@
 import { act, render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
-import { EyeClosed } from 'components/atoms/icons';
+import { EyeClosed } from 'components/atoms/icons/EyeClosed';
 
 import { Input } from './Input';
 

diff --git a/examples/bifrost-starter/apps/frontend/components/atoms/forms/Input/index.ts b/examples/bifrost-starter/apps/frontend/components/atoms/forms/Input/index.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { IntlLayoutWrapper } from 'locales/IntlLayoutWrapper';

		export default IntlLayoutWrapper;