Expo navigation

.devcontainer/devcontainer.json

@@ -18,7 +18,7 @@
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   // This can be used to network with other containers or with the host.
-  "forwardPorts": [5173, 8000, 8081, 5432],
+  "forwardPorts": [5173, 8000, 8081, 5432, 8097],
   "portsAttributes": {
     "5173": {
       "label": "Admin Portal",
@@ -46,6 +46,10 @@
     "4040": {
       "label": "Ngrok Tunnel",
       "onAutoForward": "ignore"
+    },
+    "8097": {
+      "label": "Expo React Devtools",
+      "onAutoForward": "ignore"
     }
   },
 
@@ -87,7 +91,8 @@
         "mtxr.sqltools-driver-pg",
         "fill-labs.dependi",
         "yoavbls.pretty-ts-errors",
-        "nicoespeon.abracadabra"
+        "nicoespeon.abracadabra",
+        "bradlc.vscode-tailwindcss"
       ]
     }
   },

.vscode/extensions.json

@@ -19,6 +19,7 @@
     "GitHub.vscode-pull-request-github",
     "fill-labs.dependi",
     "yoavbls.pretty-ts-errors",
-    "nicoespeon.abracadabra"
+    "nicoespeon.abracadabra",
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -52,5 +52,6 @@
   "typescript.disableAutomaticTypeAcquisition": true,
   "typescript.experimental.updateImportsOnPaste": true,
   "typescript.experimental.expandableHover": true,
-  "typescript.preferences.preferTypeOnlyAutoImports": true
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
+  "tailwindCSS.classAttributes": ["class", "className", "headerClassName"]
 }

eslint.config.js

@@ -258,6 +258,12 @@ export default eslintTs.config(
         "@typescript-eslint/no-base-to-string": "off",
         "@typescript-eslint/require-await": "error",
         "@typescript-eslint/return-await": "error",
+        "@typescript-eslint/no-empty-object-type": [
+          "error",
+          {
+            allowInterfaces: "with-single-extends",
+          },
+        ],
         "@typescript-eslint/no-invalid-void-type": [
           "error",
           {

packages/common/lib/error/fetch.ts

@@ -7,15 +7,23 @@ import { ErrorCode } from "./index.js";
 
 export class FetchError extends ExtendedError {
   #responseText: string | undefined = undefined;
+  #url: string | undefined = undefined;
 
   constructor(
     public readonly response: Response,
-    public readonly url?: string | URL
+    url?: string | URL
   ) {
     super(
       `Fetch failed with status ${response.status}: ${response.statusText}`,
       ErrorCode.FetchError.description
     );
+    if (url != null) {
+      this.#url = url.toString();
+    }
+  }
+
+  get url(): string | undefined {
+    return this.#url ?? this.response.url;
   }
 
   get detailedMessage(): string {

packages/common/package.json

@@ -15,16 +15,16 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./client-parsers": {
-      "import": "./dist/client-parsers/index.js",
-      "types": "./dist/client-parsers/index.d.ts"
+      "types": "./dist/client-parsers/index.d.ts",
+      "default": "./dist/client-parsers/index.js"
     },
     "./error": {
-      "import": "./dist/error/index.js",
-      "types": "./dist/error/index.d.ts"
+      "types": "./dist/error/index.d.ts",
+      "default": "./dist/error/index.js"
     }
   },
   "main": "./dist/index.js",

packages/mobile/.gitignore

@@ -0,0 +1,6 @@
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

packages/mobile/App.tsx

@@ -29,16 +29,16 @@ import { LoadingWrapper } from "@/context/loading";
 import { UrqlContext } from "@/context/urql";
 import { navigationIntegration } from "@/navigation/routingInstrumentation";
 
+import { overrideApiBaseUrl } from "./_src/common/apiUrl";
+import { FilledNavigationContainer } from "./_src/navigation/NavigationContainer";
+import { getCustomTheme } from "./_src/theme";
 import BoldoniFlfBoldFont from "./assets/fonts/bodoni-flf-font/Bodoni-FLF-Bold.ttf";
 import BoldoniFlfBoldItalicFont from "./assets/fonts/bodoni-flf-font/Bodoni-FLF-Bold-Italic.ttf";
 import BoldoniFlfItalicFont from "./assets/fonts/bodoni-flf-font/Bodoni-FLF-Italic.ttf";
 import BoldoniFlfRomanFont from "./assets/fonts/bodoni-flf-font/Bodoni-FLF-Roman.ttf";
 import OpenSansCondensedBoldFont from "./assets/fonts/opensans-condensed/OpenSans-Condensed-Bold.ttf";
 import OpenSansCondensedLightFont from "./assets/fonts/opensans-condensed/OpenSans-Condensed-Light.ttf";
 import OpenSansCondensedLightItalicFont from "./assets/fonts/opensans-condensed/OpenSans-Condensed-Light-Italic.ttf";
-import { overrideApiBaseUrl } from "./src/common/apiUrl";
-import { FilledNavigationContainer } from "./src/navigation/NavigationContainer";
-import { getCustomTheme } from "./src/theme";
 
 const metadata = "metadata" in manifest ? manifest.metadata : undefined;
 const extra = "extra" in manifest ? manifest.extra : undefined;

packages/mobile/src/navigation/root/tab/TabBarComponent.tsx → packages/mobile/_src/navigation/root/tab/TabBarComponent.tsx

@@ -14,7 +14,7 @@ import { Text, TouchableOpacity, useWindowDimensions } from "react-native";
 import { useColorModeValue, useThemeColors } from "@/common/customHooks";
 import { colors } from "@/theme/colors";
 
-import BackgroundCutout from "../../../../assets/screens/navigation/background-cutout";
+import BackgroundCutout from "../../../../src/svgs/background-cutout";
 import DanceBlueRibbon from "../../../common/components/svgs/DBRibbon";
 import { useReactNavigationTheme } from "../../../theme";
 

packages/mobile/src/types/navigationTypes.ts → packages/mobile/_src/types/navigationTypes.ts

@@ -54,10 +54,10 @@ export type RootStackParamList = {
 export type RootStackScreenProps<T extends keyof RootStackParamList> =
   NativeStackScreenProps<RootStackParamList, T>;
 
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace ReactNavigation {
-    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-    interface RootParamList extends RootStackParamList {}
-  }
-}
+// declare global {
+//   // eslint-disable-next-line @typescript-eslint/no-namespace
+//   namespace ReactNavigation {
+//     // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+//     interface RootParamList extends RootStackParamList {}
+//   }
+// }

packages/mobile/app.config.json

@@ -10,7 +10,12 @@
     "notification": {
       "icon": "./assets/app/20th-appicon.png"
     },
-    "platforms": ["ios", "android"],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    },
+    "userInterfaceStyle": "automatic",
+    "platforms": ["ios", "android", "web"],
     "orientation": "portrait",
     "icon": "./assets/app/20th-appicon.png",
     "splash": {
@@ -40,7 +45,6 @@
           "cameraPermission": "Allow DanceBlue to access your microphone."
         }
       ],
-      "expo-av",
       "expo-secure-store",
       "expo-file-system",
       [
@@ -76,14 +80,18 @@
         }
       ],
       "expo-build-properties",
-      "expo-router"
+      "expo-router",
+      "expo-audio"
     ],
     "updates": {
       "enabled": true,
       "checkAutomatically": "ON_LOAD",
       "url": "https://u.expo.dev/86042d7a-cd35-415c-87ed-f53c008b3827"
     },
     "assetBundlePatterns": ["assets/**"],
+    "web": {
+      "bundler": "metro"
+    },
     "ios": {
       "supportsTablet": true,
       "config": {

packages/mobile/app.config.ts

@@ -28,7 +28,7 @@ const nativeVersion: Version = {
 
 // Both the sum of version.patch + buildsThisVersion and the sum of baseBuildCount + buildsThisVersion must increase each time a native build is submitted.
 const baseBuildCount = 46;
-const buildsThisVersion = 1;
+const buildsThisVersion = 2;
 
 /*
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

packages/mobile/babel.config.cjs

@@ -6,7 +6,10 @@ module.exports = function babel(api) {
   api.cache.forever();
 
   return {
-    presets: ["babel-preset-expo"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
     plugins: ["react-native-reanimated/plugin"],
   };
 };

packages/mobile/components.json

@@ -0,0 +1,6 @@
+{
+  "aliases": {
+    "components": "~/components",
+    "lib": "~/lib"
+  }
+}

packages/mobile/metro.config.cjs

@@ -1,24 +1,20 @@
 // Learn more https://docs.expo.io/guides/cus tomizing-metro
-// @ts-expect-error - CommonJS
 const { withSentryConfig } = require("@sentry/react-native/metro");
-// @ts-expect-error - CommonJS
 const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
 
 // Find the project and workspace directories
 // eslint-disable-next-line no-undef
 const projectRoot = __dirname;
 
-const config = withSentryConfig(getDefaultConfig(projectRoot));
+const config = getDefaultConfig(projectRoot);
 
 /** @type {Partial<Record<string, string>>} */
 const ALIASES = {
   "type-graphql": "type-graphql/shim",
 };
 
-// @ts-expect-error - It is defined by expo/metro-config
-config.resolver /*
-Only ignore the first bit
- */.resolveRequest =
+config.resolver.resolveRequest =
   /** @type {import("metro-resolver").CustomResolver} */
   (context, moduleName, platform) => {
     // Ensure you call the default resolver.
@@ -30,9 +26,9 @@ Only ignore the first bit
     );
   };
 
-// @ts-expect-error - It is defined by expo/metro-config
-config.resolver /*
-Only ignore the first bit
- */.unstable_enablePackageExports = true;
+config.resolver.unstable_enablePackageExports = true;
+config.resolver.unstable_conditionNames = ["require", "react-native"];
 
-module.exports = config;
+module.exports = withNativeWind(withSentryConfig(config), {
+  input: "./src/global.css",
+});

packages/mobile/nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.