Set up app for React Aria

.storybook/preview.tsx

@@ -3,21 +3,25 @@ import { Inter } from "next/font/google";
 import type { Preview } from "@storybook/react";
 import "../src/app/globals.css";
 import { L10nProvider } from "../src/contextProviders/localization";
-import { getL10nBundles } from "../src/app/functions/server/l10n";
+import { getL10nBundles, getLocale } from "../src/app/functions/server/l10n";
 import { metropolis } from "../src/app/fonts/Metropolis/metropolis";
+import { ReactAriaI18nProvider } from "../src/contextProviders/react-aria";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 
 const AppDecorator: Exclude<Preview["decorators"], undefined>[0] = (
   storyFn
 ) => {
+  const l10nBundles = getL10nBundles();
   return (
-    <L10nProvider bundleSources={getL10nBundles()}>
-      <div
-        className={`${inter.className} ${inter.variable} ${metropolis.variable}`}
-      >
-        {storyFn()}
-      </div>
+    <L10nProvider bundleSources={l10nBundles}>
+      <ReactAriaI18nProvider locale={getLocale(l10nBundles)}>
+        <div
+          className={`${inter.className} ${inter.variable} ${metropolis.variable}`}
+        >
+          {storyFn()}
+        </div>
+      </ReactAriaI18nProvider>
     </L10nProvider>
   );
 };

package.json

@@ -76,7 +76,9 @@
     "patch-package": "^7.0.0",
     "pg": "^8.9.0",
     "react": "^18.2.0",
+    "react-aria": "^3.25.0",
     "react-dom": "^18.2.0",
+    "react-stately": "^3.23.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

src/app/(proper_react)/layout.tsx

@@ -4,10 +4,14 @@
 
 import { ReactNode } from "react";
 import { getServerSession } from "next-auth";
-import { getL10n, getL10nBundles } from "../functions/server/l10n";
+import { getL10n, getL10nBundles, getLocale } from "../functions/server/l10n";
 import { L10nProvider } from "../../contextProviders/localization";
 import { authOptions } from "../api/utils/auth";
 import { Shell } from "./Shell";
+import {
+  ReactAriaI18nProvider,
+  ReactAriaSsrProvider,
+} from "../../contextProviders/react-aria";
 
 export default async function Layout({ children }: { children: ReactNode }) {
   const l10nBundles = getL10nBundles();
@@ -16,9 +20,13 @@ export default async function Layout({ children }: { children: ReactNode }) {
 
   return (
     <L10nProvider bundleSources={l10nBundles}>
-      <Shell l10n={l10n} session={session}>
-        {children}
-      </Shell>
+      <ReactAriaSsrProvider>
+        <ReactAriaI18nProvider locale={getLocale(l10nBundles)}>
+          <Shell l10n={l10n} session={session}>
+            {children}
+          </Shell>
+        </ReactAriaI18nProvider>
+      </ReactAriaSsrProvider>
     </L10nProvider>
   );
 }

src/contextProviders/react-aria.tsx

@@ -0,0 +1,16 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// See https://nextjs.org/docs/getting-started/react-essentials#rendering-third-party-context-providers-in-server-components
+"use client";
+
+import { I18nProvider, SSRProvider } from "react-aria";
+
+export const ReactAriaI18nProvider: typeof I18nProvider = (props) => (
+  <I18nProvider {...props} />
+);
+
+export const ReactAriaSsrProvider: typeof SSRProvider = (props) => (
+  <SSRProvider {...props} />
+);