From 425d4e5fa21e640dd08c33ff5364ef97d68b3507 Mon Sep 17 00:00:00 2001 From: jog1t <39823706+jog1t@users.noreply.github.com> Date: Sat, 21 Sep 2024 15:20:19 +0000 Subject: [PATCH] refactor: modify components to be usable with next (#330) --- .vscode/settings.json | 3 + apps/hub/src/routeTree.gen.ts | 21 ++ .../environments/$namespaceId/modules.tsx | 23 ++ packages/components/package.json | 2 +- packages/components/src/action-card.tsx | 5 +- packages/components/src/animated-currency.tsx | 1 + packages/components/src/asset-image.tsx | 1 + .../components/src/auto-form/fields/file.tsx | 1 + .../components/src/auto-form/fields/union.tsx | 1 + packages/components/src/auto-form/index.tsx | 1 + packages/components/src/copy-area.tsx | 1 + packages/components/src/datepicker.tsx | 8 +- packages/components/src/header/index.tsx | 62 +++--- packages/components/src/header/nav-item.tsx | 2 +- packages/components/src/hooks/use-dialog.tsx | 1 + packages/components/src/index.ts | 5 + packages/components/src/lib/config.ts | 19 +- .../components/src/lib/create-schema-form.tsx | 1 + packages/components/src/lib/modules.ts | 141 ++++++++++++ packages/components/src/logs-view.tsx | 1 + packages/components/src/module-card.tsx | 116 ++++++++++ packages/components/src/module-icon.tsx | 26 +++ packages/components/src/modules-store.tsx | 200 ++++++++++++++++++ packages/components/src/tailwind-base.ts | 3 + packages/components/src/ui/alert.tsx | 1 + packages/components/src/ui/button.tsx | 1 + packages/components/src/ui/calendar.tsx | 23 +- packages/components/src/ui/card.tsx | 28 +-- packages/components/src/ui/date-picker.tsx | 7 +- packages/components/src/ui/file-input.tsx | 1 + packages/components/src/ui/form.tsx | 1 + packages/components/src/ui/resizable.tsx | 1 + packages/components/src/ui/scroll-area.tsx | 5 +- packages/components/src/uptime.tsx | 1 + .../components/src/virtual-scroll-area.tsx | 1 + packages/components/tsconfig.json | 3 +- yarn.lock | 15 +- 37 files changed, 638 insertions(+), 95 deletions(-) create mode 100644 apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.tsx create mode 100644 packages/components/src/lib/modules.ts create mode 100644 packages/components/src/module-card.tsx create mode 100644 packages/components/src/module-icon.tsx create mode 100644 packages/components/src/modules-store.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 8e47f58c..e45fd89d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,5 +4,8 @@ "editor.formatOnSave": true, "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" + }, + "[typescript]": { + "editor.defaultFormatter": "biomejs.biome" } } diff --git a/apps/hub/src/routeTree.gen.ts b/apps/hub/src/routeTree.gen.ts index 0a92f85e..ed5c9632 100644 --- a/apps/hub/src/routeTree.gen.ts +++ b/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", diff --git a/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.tsx b/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.tsx new file mode 100644 index 00000000..0cad7437 --- /dev/null +++ b/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 ( + <> + + + ); +} + +export const Route = createFileRoute( + "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules", +)({ + component: GameIdModules, + loader: async () => { + const categories = await loadModuleCategories(); + return { + categories, + }; + }, +}); diff --git a/packages/components/package.json b/packages/components/package.json index 4df67955..ba7ef19b 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/src/action-card.tsx b/packages/components/src/action-card.tsx index aeee8f49..f093b96f 100644 --- a/packages/components/src/action-card.tsx +++ b/packages/components/src/action-card.tsx @@ -1,3 +1,4 @@ +"use client"; import type { ReactNode } from "react"; import { Card, @@ -14,6 +15,7 @@ export interface ActionCardProps { children?: ReactNode; action?: ReactNode; footer?: ReactNode; + className?: string; } export const ActionCard = ({ @@ -21,10 +23,11 @@ export const ActionCard = ({ action, footer, description, + className, children, }: ActionCardProps) => { return ( - +
{title} diff --git a/packages/components/src/animated-currency.tsx b/packages/components/src/animated-currency.tsx index cc9ffe5c..8040dcc2 100644 --- a/packages/components/src/animated-currency.tsx +++ b/packages/components/src/animated-currency.tsx @@ -1,3 +1,4 @@ +"use client"; import { LazyMotion, animate, diff --git a/packages/components/src/asset-image.tsx b/packages/components/src/asset-image.tsx index 095e8d02..61e9f4b9 100644 --- a/packages/components/src/asset-image.tsx +++ b/packages/components/src/asset-image.tsx @@ -1,3 +1,4 @@ +"use client"; import { useConfig } from "./lib/config"; export function AssetImage( diff --git a/packages/components/src/auto-form/fields/file.tsx b/packages/components/src/auto-form/fields/file.tsx index 6f2390c7..a9c0925c 100644 --- a/packages/components/src/auto-form/fields/file.tsx +++ b/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"; diff --git a/packages/components/src/auto-form/fields/union.tsx b/packages/components/src/auto-form/fields/union.tsx index 5a9db4b0..bec891a2 100644 --- a/packages/components/src/auto-form/fields/union.tsx +++ b/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"; diff --git a/packages/components/src/auto-form/index.tsx b/packages/components/src/auto-form/index.tsx index ee0136a7..2f830883 100644 --- a/packages/components/src/auto-form/index.tsx +++ b/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"; diff --git a/packages/components/src/copy-area.tsx b/packages/components/src/copy-area.tsx index cc0719ee..9bce293e 100644 --- a/packages/components/src/copy-area.tsx +++ b/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"; diff --git a/packages/components/src/datepicker.tsx b/packages/components/src/datepicker.tsx index 4935698e..fdffff0f 100644 --- a/packages/components/src/datepicker.tsx +++ b/packages/components/src/datepicker.tsx @@ -69,12 +69,7 @@ export function DatePicker({ ) : null} - + ); @@ -143,7 +138,6 @@ export function RangeDatePicker({ ) : null} + + + Docs + + + + + Support + + + + ), }: HeaderProps) { return (
@@ -43,43 +58,20 @@ export function Header({ Toggle navigation menu - -