chore: upgrade to next 14 app dir

theodo-group · Dec 12, 2023 · 3850c3f · 3850c3f
1 parent 5e9229f
commit 3850c3f
Show file tree

Hide file tree

Showing 65 changed files with 1,487 additions and 686 deletions.
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,6 @@
 import { act, render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
 import { EyeClosed } from 'components/atoms/icons';
+import { axe } from 'jest-axe';
 
 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
diff --git a/...ples/bifrost-starter/apps/frontend/components/atoms/forms/PasswordInput/PasswordInput.tsx b/...ples/bifrost-starter/apps/frontend/components/atoms/forms/PasswordInput/PasswordInput.tsx
@@ -1,14 +1,16 @@
+import { useTranslations } from 'next-intl';
 import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 
 import style from './PasswordInput.module.css';
-import { VisuallyHidden } from '../../VisuallyHidden';
-import { EyeClosed, EyeOpen } from '../../icons';
-import { Input, InputProps } from '../Input';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
+import { EyeClosed } from '../../icons/EyeClosed';
+import { EyeOpen } from '../../icons/EyeOpen';
+import { Input, InputProps } from '../Input/Input';
 
 export const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
   ({ ...props }, ref) => {
     const [isPasswordReveled, setIsPasswordReveled] = useState(false);
+    const t = useTranslations('generic.password_input');
 
     return (
       <Input
@@ -27,17 +29,7 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
             type="button"
           >
             <VisuallyHidden>
-              {isPasswordReveled ? (
-                <FormattedMessage
-                  id="generic.password_input.hide_password"
-                  defaultMessage="Hide password"
-                />
-              ) : (
-                <FormattedMessage
-                  id="generic.password_input.show_password"
-                  defaultMessage="Show password"
-                />
-              )}
+              {isPasswordReveled ? t('hide') : t('show')}
             </VisuallyHidden>
             {isPasswordReveled ? <EyeClosed /> : <EyeOpen />}
           </button>

diff --git a/examples/bifrost-starter/apps/frontend/components/atoms/forms/PasswordInput/index.ts b/examples/bifrost-starter/apps/frontend/components/atoms/forms/PasswordInput/index.ts
diff --git a/examples/bifrost-starter/apps/frontend/components/atoms/forms/index.ts b/examples/bifrost-starter/apps/frontend/components/atoms/forms/index.ts
diff --git a/examples/bifrost-starter/apps/frontend/components/atoms/icons/EyeClosed.tsx b/examples/bifrost-starter/apps/frontend/components/atoms/icons/EyeClosed.tsx
@@ -1,8 +1,8 @@
-export const EyeClosed = ({
-  className,
-}: {
+import { FC } from 'react';
+
+export const EyeClosed: FC<{
   className?: string;
-}): JSX.Element => (
+}> = ({ className }) => (
   <svg
     width="24"
     height="24"

diff --git a/examples/bifrost-starter/apps/frontend/components/atoms/icons/EyeOpen.tsx b/examples/bifrost-starter/apps/frontend/components/atoms/icons/EyeOpen.tsx
@@ -1,4 +1,6 @@
-export const EyeOpen = ({ className }: { className?: string }): JSX.Element => (
+import { FC } from 'react';
+
+export const EyeOpen: FC<{ className?: string }> = ({ className }) => (
   <svg
     width="24"
     height="24"

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

		export default IntlLayoutWrapper;