refactor: modify components to be usable with next

.vscode/settings.json

@@ -4,5 +4,8 @@
   "editor.formatOnSave": true,
   "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

apps/hub/src/routeTree.gen.ts

@@ -8,8 +8,6 @@
 
 // This file is auto-generated by TanStack Router
 
-import { createFileRoute } from '@tanstack/react-router'
-
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
@@ -41,6 +39,7 @@ import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdIndexImpo
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/versions'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdTokensImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/tokens'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/servers'
+import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/matchmaker'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdLobbiesImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/lobbies'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdCdnImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/cdn'
@@ -54,13 +53,6 @@ import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdLobbiesLo
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdBackendVariablesImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/backend/variables'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdBackendLogsImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/backend/logs'
 
-// Create Virtual Routes
-
-const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyImport =
-  createFileRoute(
-    '/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules',
-  )()
-
 // Create/Update Routes
 
 const AuthenticatedRoute = AuthenticatedImport.update({
@@ -210,19 +202,6 @@ const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdIndexRoute =
       AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
   } as any)
 
-const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyRoute =
-  AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyImport.update(
-    {
-      path: '/modules',
-      getParentRoute: () =>
-        AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
-    } as any,
-  ).lazy(() =>
-    import(
-      './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.lazy'
-    ).then((d) => d.Route),
-  )
-
 const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsRoute =
   AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsImport.update({
     path: '/versions',
@@ -244,6 +223,13 @@ const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute =
       AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
   } as any)
 
+const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesRoute =
+  AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport.update({
+    path: '/modules',
+    getParentRoute: () =>
+      AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
+  } as any)
+
 const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerRoute =
   AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport.update({
     path: '/matchmaker',
@@ -544,6 +530,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport
       parentRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport
     }
+    '/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules': {
+      id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules'
+      path: '/modules'
+      fullPath: '/games/$gameId/environments/$namespaceId/modules'
+      preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport
+      parentRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport
+    }
     '/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers': {
       id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers'
       path: '/servers'
@@ -565,13 +558,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsImport
       parentRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport
     }
-    '/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules': {
-      id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules'
-      path: '/modules'
-      fullPath: '/games/$gameId/environments/$namespaceId/modules'
-      preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyImport
-      parentRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport
-    }
     '/_authenticated/_layout/games/$gameId/environments/$namespaceId/': {
       id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId/'
       path: '/'
@@ -690,6 +676,7 @@ export const routeTree = rootRoute.addChildren({
               },
             ),
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerRoute,
+          AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesRoute,
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute:
             AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute.addChildren(
               {
@@ -699,7 +686,6 @@ export const routeTree = rootRoute.addChildren({
             ),
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdTokensRoute,
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsRoute,
-          AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyRoute,
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdIndexRoute,
         }),
     }),
@@ -849,10 +835,10 @@ export const routeTree = rootRoute.addChildren({
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/cdn",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/lobbies",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/matchmaker",
+        "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/tokens",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/versions",
-        "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/"
       ]
     },
@@ -890,6 +876,10 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/matchmaker.tsx",
       "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
     },
+    "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules": {
+      "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.tsx",
+      "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
+    },
     "/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers": {
       "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/servers.tsx",
       "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId",
@@ -906,10 +896,6 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/versions.tsx",
       "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
     },
-    "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules": {
-      "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.lazy.tsx",
-      "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
-    },
     "/_authenticated/_layout/games/$gameId/environments/$namespaceId/": {
       "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/index.tsx",
       "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"

apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.tsx

@@ -0,0 +1,23 @@
+import { ModulesStore, loadModuleCategories } from "@rivet-gg/components";
+import { createFileRoute } from "@tanstack/react-router";
+
+function GameIdModules() {
+  const { categories } = Route.useLoaderData();
+  return (
+    <>
+      <ModulesStore categories={categories} />
+    </>
+  );
+}
+
+export const Route = createFileRoute(
+  "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules",
+)({
+  component: GameIdModules,
+  loader: async () => {
+    const categories = await loadModuleCategories();
+    return {
+      categories,
+    };
+  },
+});

package.json

@@ -2,10 +2,7 @@
   "private": true,
   "packageManager": "[email protected]",
   "name": "hub",
-  "workspaces": [
-    "packages/*",
-    "apps/*"
-  ],
+  "workspaces": ["packages/*", "apps/*"],
   "scripts": {
     "start": "npx turbo dev",
     "build": "npx turbo build",

packages/components/package.json

@@ -3,11 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "type": "module",
-  "files": [
-    "dist",
-    "src",
-    "public"
-  ],
+  "files": ["dist", "src", "public"],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "exports": {
@@ -68,7 +64,7 @@
     "input-otp": "^1.2.3",
     "lucide-react": "^0.439.0",
     "react": "^18.2.0",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.0.9",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.1",
     "react-resizable-panels": "^2.0.19",

packages/components/src/action-card.tsx

@@ -1,3 +1,4 @@
+"use client";
 import type { ReactNode } from "react";
 import {
   Card,

packages/components/src/animated-currency.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   LazyMotion,
   animate,

packages/components/src/asset-image.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useConfig } from "./lib/config";
 
 export function AssetImage(

packages/components/src/auto-form/fields/file.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { faTrash } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { type ChangeEvent, useState } from "react";

packages/components/src/auto-form/fields/union.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import type * as z from "zod";
 import { FormControl, FormItem, FormMessage } from "../../ui/form";

packages/components/src/auto-form/index.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { type DefaultValues, type FormState, useForm } from "react-hook-form";
 import type { z } from "zod";

packages/components/src/copy-area.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { faCopy } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Slot } from "@radix-ui/react-slot";

packages/components/src/datepicker.tsx

@@ -69,12 +69,7 @@ export function DatePicker({
             </SelectContent>
           </Select>
         ) : null}
-        <Calendar
-          mode="single"
-          selected={date}
-          onSelect={onDateChange}
-          initialFocus
-        />
+        <Calendar mode="single" selected={date} onSelect={onDateChange} />
       </PopoverContent>
     </Popover>
   );
@@ -143,7 +138,6 @@ export function RangeDatePicker({
             </Select>
           ) : null}
           <Calendar
-            initialFocus
             mode="range"
             defaultMonth={date?.from}
             selected={date}

packages/components/src/header/index.tsx

@@ -16,6 +16,7 @@ interface HeaderProps {
   links?: ReactNode;
   suffix?: ReactNode;
   logo?: ReactNode;
+  support?: ReactNode;
 }
 
 export function Header({
@@ -26,6 +27,20 @@ export function Header({
   links,
   suffix,
   logo,
+  support = (
+    <Flex direction="col" justify="end" gap="6">
+      <NavItem asChild>
+        <a href="https://rivet.gg/docs" target="_blank" rel="noreferrer">
+          Docs
+        </a>
+      </NavItem>
+      <NavItem asChild>
+        <a href="https://rivet.gg/support" target="_blank" rel="noreferrer">
+          Support
+        </a>
+      </NavItem>
+    </Flex>
+  ),
 }: HeaderProps) {
   return (
     <header className="bg-background/60 sticky top-0 z-10 flex flex-col items-center border-b py-2 backdrop-blur">
@@ -60,26 +75,7 @@ export function Header({
                     {mobileBreadcrumbs}
                   </Flex>
                 </div>
-                <Flex direction="col" justify="end" gap="6">
-                  <NavItem asChild>
-                    <a
-                      href="https://rivet.gg/docs"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Docs
-                    </a>
-                  </NavItem>
-                  <NavItem asChild>
-                    <a
-                      href="https://rivet.gg/support"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Support
-                    </a>
-                  </NavItem>
-                </Flex>
+                {support}
               </nav>
             </SheetContent>
           </Sheet>

packages/components/src/hooks/use-dialog.tsx

@@ -1,3 +1,4 @@
+"use client";
 import {
   type ComponentProps,
   type ComponentType,

packages/components/src/index.ts

@@ -22,6 +22,9 @@ export * from "./animated-currency";
 export * from "./live-badge";
 export * from "./relative-time";
 export * from "./code";
+export * from "./modules-store";
+export * from "./module-icon";
+export * from "./module-card";
 export * from "./ui/typography";
 export * from "./ui/skeleton";
 export * from "./ui/sheet";
@@ -68,6 +71,7 @@ export * from "./lib/formatter";
 export * from "./lib/exit-signals";
 export * from "./lib/config";
 export * from "./lib/create-schema-form";
+export * from "./lib/modules";
 export * from "./auto-form";
 export * from "./hooks";
 export * as styleHelpers from "./ui/helpers/index";

packages/components/src/lib/config.ts

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from "react";
 
 interface Config {
@@ -10,30 +11,30 @@ interface Config {
   sentry?: {
     dsn: string;
     projectId: string;
-  }
-  outerbaseProviderToken: string,
+  };
+  outerbaseProviderToken: string;
 }
 
 export const ConfigContext = createContext<Config>({
   apiUrl: "",
   assetsUrl: "",
-  outerbaseProviderToken: '',
+  outerbaseProviderToken: "",
 });
 export const useConfig = () => useContext(ConfigContext);
 export const ConfigProvider = ConfigContext.Provider;
 
 const getApiEndpoint = (apiEndpoint: string) => {
-  if (apiEndpoint == '__AUTO__') {
-    if (location.hostname.startsWith('hub.')) {
+  if (apiEndpoint == "__AUTO__") {
+    if (location.hostname.startsWith("hub.")) {
       // Connect to the corresponding API endpoint
-      return 'https://' + location.hostname.replace('hub.', 'api.');
+      return "https://" + location.hostname.replace("hub.", "api.");
     } else {
       // Default to staging servers for all other endpoints
-      return 'https://api.staging2.gameinc.io';
+      return "https://api.staging2.gameinc.io";
     }
   }
   return apiEndpoint;
-}
+};
 
 export const getConfig = (): Config => {
   const el = document.getElementById("RIVET_CONFIG");
@@ -46,5 +47,5 @@ export const getConfig = (): Config => {
   return {
     ...parsed,
     apiUrl: getApiEndpoint(parsed.apiUrl),
-  }
+  };
 };