Skip to content
This repository was archived by the owner on Jan 31, 2025. It is now read-only.

Commit 425d4e5

Browse files
jog1tjog1t
committed
refactor: modify components to be usable with next (#330)
1 parent f5b841c commit 425d4e5

37 files changed

+638
-95
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,8 @@
44
"editor.formatOnSave": true,
55
"[typescriptreact]": {
66
"editor.defaultFormatter": "biomejs.biome"
7+
},
8+
"[typescript]": {
9+
"editor.defaultFormatter": "biomejs.biome"
710
}
811
}

‎apps/hub/src/routeTree.gen.ts

+21
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdIndexImpo
3939
import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/versions'
4040
import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdTokensImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/tokens'
4141
import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/servers'
42+
import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules'
4243
import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/matchmaker'
4344
import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdLobbiesImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/lobbies'
4445
import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdCdnImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/cdn'
@@ -222,6 +223,13 @@ const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute =
222223
AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
223224
} as any)
224225

226+
const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesRoute =
227+
AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport.update({
228+
path: '/modules',
229+
getParentRoute: () =>
230+
AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
231+
} as any)
232+
225233
const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerRoute =
226234
AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport.update({
227235
path: '/matchmaker',
@@ -522,6 +530,13 @@ declare module '@tanstack/react-router' {
522530
preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport
523531
parentRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport
524532
}
533+
'/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules': {
534+
id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules'
535+
path: '/modules'
536+
fullPath: '/games/$gameId/environments/$namespaceId/modules'
537+
preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport
538+
parentRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport
539+
}
525540
'/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers': {
526541
id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers'
527542
path: '/servers'
@@ -661,6 +676,7 @@ export const routeTree = rootRoute.addChildren({
661676
},
662677
),
663678
AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerRoute,
679+
AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesRoute,
664680
AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute:
665681
AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute.addChildren(
666682
{
@@ -819,6 +835,7 @@ export const routeTree = rootRoute.addChildren({
819835
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/cdn",
820836
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/lobbies",
821837
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/matchmaker",
838+
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules",
822839
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers",
823840
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/tokens",
824841
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/versions",
@@ -859,6 +876,10 @@ export const routeTree = rootRoute.addChildren({
859876
"filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/matchmaker.tsx",
860877
"parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
861878
},
879+
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules": {
880+
"filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.tsx",
881+
"parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
882+
},
862883
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers": {
863884
"filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/servers.tsx",
864885
"parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId",

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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ModulesStore, loadModuleCategories } from "@rivet-gg/components";
2+
import { createFileRoute } from "@tanstack/react-router";
3+
4+
function GameIdModules() {
5+
const { categories } = Route.useLoaderData();
6+
return (
7+
<>
8+
<ModulesStore categories={categories} includeModulesDocumentation />
9+
</>
10+
);
11+
}
12+
13+
export const Route = createFileRoute(
14+
"/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules",
15+
)({
16+
component: GameIdModules,
17+
loader: async () => {
18+
const categories = await loadModuleCategories();
19+
return {
20+
categories,
21+
};
22+
},
23+
});

‎packages/components/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"input-otp": "^1.2.3",
6565
"lucide-react": "^0.439.0",
6666
"react": "^18.2.0",
67-
"react-day-picker": "^8.10.1",
67+
"react-day-picker": "^9.0.9",
6868
"react-dom": "^18.2.0",
6969
"react-hook-form": "^7.51.1",
7070
"react-resizable-panels": "^2.0.19",

‎packages/components/src/action-card.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import type { ReactNode } from "react";
23
import {
34
Card,
@@ -14,17 +15,19 @@ export interface ActionCardProps {
1415
children?: ReactNode;
1516
action?: ReactNode;
1617
footer?: ReactNode;
18+
className?: string;
1719
}
1820

1921
export const ActionCard = ({
2022
title,
2123
action,
2224
footer,
2325
description,
26+
className,
2427
children,
2528
}: ActionCardProps) => {
2629
return (
27-
<Card>
30+
<Card className={className}>
2831
<CardHeader>
2932
<div className="flex flex-row items-center justify-between space-y-0 gap-2 pb-2">
3033
<CardTitle className="font-bold">{title}</CardTitle>

‎packages/components/src/animated-currency.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import {
23
LazyMotion,
34
animate,

‎packages/components/src/asset-image.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import { useConfig } from "./lib/config";
23

34
export function AssetImage(

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import { faTrash } from "@fortawesome/pro-solid-svg-icons";
23
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
34
import { type ChangeEvent, useState } from "react";

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import { useState } from "react";
23
import type * as z from "zod";
34
import { FormControl, FormItem, FormMessage } from "../../ui/form";

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import React from "react";
23
import { type DefaultValues, type FormState, useForm } from "react-hook-form";
34
import type { z } from "zod";

‎packages/components/src/copy-area.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import { faCopy } from "@fortawesome/pro-solid-svg-icons";
23
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
34
import { Slot } from "@radix-ui/react-slot";

‎packages/components/src/datepicker.tsx

+1-7
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,7 @@ export function DatePicker({
6969
</SelectContent>
7070
</Select>
7171
) : null}
72-
<Calendar
73-
mode="single"
74-
selected={date}
75-
onSelect={onDateChange}
76-
initialFocus
77-
/>
72+
<Calendar mode="single" selected={date} onSelect={onDateChange} />
7873
</PopoverContent>
7974
</Popover>
8075
);
@@ -143,7 +138,6 @@ export function RangeDatePicker({
143138
</Select>
144139
) : null}
145140
<Calendar
146-
initialFocus
147141
mode="range"
148142
defaultMonth={date?.from}
149143
selected={date}

‎packages/components/src/header/index.tsx

+27-35
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ interface HeaderProps {
1616
links?: ReactNode;
1717
suffix?: ReactNode;
1818
logo?: ReactNode;
19+
support?: ReactNode;
1920
}
2021

2122
export function Header({
@@ -26,6 +27,20 @@ export function Header({
2627
links,
2728
suffix,
2829
logo,
30+
support = (
31+
<Flex direction="col" justify="end" gap="6">
32+
<NavItem asChild>
33+
<a href="https://rivet.gg/docs" target="_blank" rel="noreferrer">
34+
Docs
35+
</a>
36+
</NavItem>
37+
<NavItem asChild>
38+
<a href="https://rivet.gg/support" target="_blank" rel="noreferrer">
39+
Support
40+
</a>
41+
</NavItem>
42+
</Flex>
43+
),
2944
}: HeaderProps) {
3045
return (
3146
<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({
4358
<span className="sr-only">Toggle navigation menu</span>
4459
</Button>
4560
</SheetTrigger>
46-
<SheetContent side="left">
47-
<nav className="grid min-h-full gap-6 text-lg font-medium">
48-
<div className="flex-1">
49-
<Flex direction="col" gap="6">
50-
<a
51-
href="/"
52-
className="flex items-center gap-2 text-lg font-semibold"
53-
>
54-
<AssetImage
55-
className="h-6"
56-
src="/logo/cream.svg"
57-
alt="Rivet logo"
58-
/>
59-
</a>
61+
<SheetContent side="left" className="overflow-auto p-0">
62+
<nav className="min-h-full text-lg font-medium h-full max-w-full">
63+
<div className="flex flex-col min-h-full">
64+
<a
65+
href="/"
66+
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"
67+
>
68+
{logo}
69+
</a>
70+
<div className="flex flex-1 flex-col px-6 gap-6">
6071
{mobileBreadcrumbs}
61-
</Flex>
72+
</div>
73+
<div className="px-6 py-6">{support}</div>
6274
</div>
63-
<Flex direction="col" justify="end" gap="6">
64-
<NavItem asChild>
65-
<a
66-
href="https://rivet.gg/docs"
67-
target="_blank"
68-
rel="noreferrer"
69-
>
70-
Docs
71-
</a>
72-
</NavItem>
73-
<NavItem asChild>
74-
<a
75-
href="https://rivet.gg/support"
76-
target="_blank"
77-
rel="noreferrer"
78-
>
79-
Support
80-
</a>
81-
</NavItem>
82-
</Flex>
8375
</nav>
8476
</SheetContent>
8577
</Sheet>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export function NavItem({ className, asChild, ...props }: NavItemProps) {
1212
<Comp
1313
className={cn(
1414
className,
15-
"text-muted-foreground data-[active]:text-foreground hover:text-foreground transition-colors",
15+
"text-muted-foreground data-[active]:text-foreground aria-current-page:text-foreground hover:text-foreground transition-colors",
1616
)}
1717
{...props}
1818
/>

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import {
23
type ComponentProps,
34
type ComponentType,

‎packages/components/src/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ export * from "./animated-currency";
2222
export * from "./live-badge";
2323
export * from "./relative-time";
2424
export * from "./code";
25+
export * from "./modules-store";
26+
export * from "./module-icon";
27+
export * from "./module-card";
2528
export * from "./ui/typography";
2629
export * from "./ui/skeleton";
2730
export * from "./ui/sheet";
@@ -68,9 +71,11 @@ export * from "./lib/formatter";
6871
export * from "./lib/exit-signals";
6972
export * from "./lib/config";
7073
export * from "./lib/create-schema-form";
74+
export * from "./lib/modules";
7175
export * from "./auto-form";
7276
export * from "./hooks";
7377
export * as styleHelpers from "./ui/helpers/index";
7478
export { toast } from "sonner";
7579

7680
export { VisuallyHidden } from "@radix-ui/react-visually-hidden";
81+
export { Slot, Slottable } from "@radix-ui/react-slot";

‎packages/components/src/lib/config.ts

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
"use client";
12
import { createContext, useContext } from "react";
23

34
interface Config {
@@ -10,30 +11,30 @@ interface Config {
1011
sentry?: {
1112
dsn: string;
1213
projectId: string;
13-
}
14-
outerbaseProviderToken: string,
14+
};
15+
outerbaseProviderToken: string;
1516
}
1617

1718
export const ConfigContext = createContext<Config>({
1819
apiUrl: "",
1920
assetsUrl: "",
20-
outerbaseProviderToken: '',
21+
outerbaseProviderToken: "",
2122
});
2223
export const useConfig = () => useContext(ConfigContext);
2324
export const ConfigProvider = ConfigContext.Provider;
2425

2526
const getApiEndpoint = (apiEndpoint: string) => {
26-
if (apiEndpoint == '__AUTO__') {
27-
if (location.hostname.startsWith('hub.')) {
27+
if (apiEndpoint == "__AUTO__") {
28+
if (location.hostname.startsWith("hub.")) {
2829
// Connect to the corresponding API endpoint
29-
return 'https://' + location.hostname.replace('hub.', 'api.');
30+
return "https://" + location.hostname.replace("hub.", "api.");
3031
} else {
3132
// Default to staging servers for all other endpoints
32-
return 'https://api.staging2.gameinc.io';
33+
return "https://api.staging2.gameinc.io";
3334
}
3435
}
3536
return apiEndpoint;
36-
}
37+
};
3738

3839
export const getConfig = (): Config => {
3940
const el = document.getElementById("RIVET_CONFIG");
@@ -46,5 +47,5 @@ export const getConfig = (): Config => {
4647
return {
4748
...parsed,
4849
apiUrl: getApiEndpoint(parsed.apiUrl),
49-
}
50+
};
5051
};

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

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

0 commit comments

Comments
 (0)