refactor: modify components to be usable with next (#330)

.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

@@ -39,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'
@@ -222,6 +223,13 @@ const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute =
       AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
   } as any)
 
+const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesRoute =
+  AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport.update({
+    path: '/modules',
+    getParentRoute: () =>
+      AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
+  } as any)
+
 const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerRoute =
   AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport.update({
     path: '/matchmaker',
@@ -522,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'
@@ -661,6 +676,7 @@ export const routeTree = rootRoute.addChildren({
               },
             ),
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerRoute,
+          AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesRoute,
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute:
             AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute.addChildren(
               {
@@ -819,6 +835,7 @@ 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",
@@ -859,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",

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} includeModulesDocumentation />
+    </>
+  );
+}
+
+export const Route = createFileRoute(
+  "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules",
+)({
+  component: GameIdModules,
+  loader: async () => {
+    const categories = await loadModuleCategories();
+    return {
+      categories,
+    };
+  },
+});

packages/components/package.json

@@ -64,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,
@@ -14,17 +15,19 @@ export interface ActionCardProps {
   children?: ReactNode;
   action?: ReactNode;
   footer?: ReactNode;
+  className?: string;
 }
 
 export const ActionCard = ({
   title,
   action,
   footer,
   description,
+  className,
   children,
 }: ActionCardProps) => {
   return (
-    <Card>
+    <Card className={className}>
       <CardHeader>
         <div className="flex flex-row items-center justify-between space-y-0 gap-2 pb-2">
           <CardTitle className="font-bold">{title}</CardTitle>

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">
@@ -43,43 +58,20 @@ export function Header({
                 <span className="sr-only">Toggle navigation menu</span>
               </Button>
             </SheetTrigger>
-            <SheetContent side="left">
-              <nav className="grid min-h-full gap-6 text-lg font-medium">
-                <div className="flex-1">
-                  <Flex direction="col" gap="6">
-                    <a
-                      href="/"
-                      className="flex items-center gap-2 text-lg font-semibold"
-                    >
-                      <AssetImage
-                        className="h-6"
-                        src="/logo/cream.svg"
-                        alt="Rivet logo"
-                      />
-                    </a>
+            <SheetContent side="left" className="overflow-auto p-0">
+              <nav className="min-h-full text-lg font-medium h-full max-w-full">
+                <div className="flex flex-col min-h-full">
+                  <a
+                    href="/"
+                    className="flex sticky p-6 top-0 z-10 bg-background/10 backdrop-blur block w-full items-center gap-2 text-lg font-semibold"
+                  >
+                    {logo}
+                  </a>
+                  <div className="flex flex-1 flex-col px-6 gap-6">
                     {mobileBreadcrumbs}
-                  </Flex>
+                  </div>
+                  <div className="px-6 py-6">{support}</div>
                 </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>
               </nav>
             </SheetContent>
           </Sheet>

packages/components/src/header/nav-item.tsx

@@ -12,7 +12,7 @@ export function NavItem({ className, asChild, ...props }: NavItemProps) {
     <Comp
       className={cn(
         className,
-        "text-muted-foreground data-[active]:text-foreground hover:text-foreground transition-colors",
+        "text-muted-foreground data-[active]:text-foreground aria-current-page:text-foreground hover:text-foreground transition-colors",
       )}
       {...props}
     />

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,9 +71,11 @@ 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";
 export { toast } from "sonner";
 
 export { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+export { Slot, Slottable } from "@radix-ui/react-slot";

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),
-  }
+  };
 };

packages/components/src/lib/create-schema-form.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Button, type ButtonProps, Form } from "@rivet-gg/components";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { type ComponentProps, type ReactNode, useEffect } from "react";