feat: opengb web (#252)

Related to https://github.com/rivet-gg/opengb/pull/458
rivet-gg · Sep 12, 2024 · f5b841c · f5b841c
1 parent 88bb7be
commit f5b841c
Show file tree

Hide file tree

Showing 68 changed files with 3,006 additions and 136 deletions.
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -25,8 +25,8 @@
     "vite": "^5.2.0"
   },
   "scripts": {
-    "dev": "storybook dev -p 6006",
-    "storybook": "storybook dev -p 6006",
+    "dev": "storybook dev -p 6006 --no-open",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build"
   }
 }
diff --git a/apps/hub/src/domains/auth/forms/device-link-form.tsx b/apps/hub/src/domains/auth/forms/device-link-form.tsx
@@ -1,11 +1,11 @@
 import { GameSelect } from "@/domains/game/components/game-select";
 import { useDialog } from "@/hooks/use-dialog";
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/domains/auth/forms/login-form.tsx b/apps/hub/src/domains/auth/forms/login-form.tsx
@@ -1,11 +1,11 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   Input,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { type UseFormReturn, useFormContext } from "react-hook-form";

diff --git a/apps/hub/src/domains/auth/forms/otp-form.tsx b/apps/hub/src/domains/auth/forms/otp-form.tsx
@@ -1,7 +1,6 @@
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";
 
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FormControl,
   FormField,
@@ -11,6 +10,7 @@ import {
   InputOTP,
   InputOTPGroup,
   InputOTPSlot,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
 import type { InputHTMLAttributes } from "react";

diff --git a/apps/hub/src/domains/game/forms/backend-env-autoscaling-config-form.tsx b/apps/hub/src/domains/game/forms/backend-env-autoscaling-config-form.tsx
@@ -1,4 +1,3 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   Flex,
   FormControl,
@@ -11,6 +10,7 @@ import {
   Link,
   Slider,
   SmallText,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/domains/game/forms/backend-env-variables-form.tsx b/apps/hub/src/domains/game/forms/backend-env-variables-form.tsx
@@ -1,4 +1,3 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import { faTrash } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -14,6 +13,7 @@ import {
   Strong,
   Switch,
   Text,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import {
   type Control,

diff --git a/apps/hub/src/domains/game/forms/cdn-manage-auth-users-form.tsx b/apps/hub/src/domains/game/forms/cdn-manage-auth-users-form.tsx
@@ -1,4 +1,3 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import { faTrash } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -11,6 +10,7 @@ import {
   FormMessage,
   Input,
   Text,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import {
   type UseFormReturn,

diff --git a/apps/hub/src/domains/game/forms/cdn-new-custom-domain-form.tsx b/apps/hub/src/domains/game/forms/cdn-new-custom-domain-form.tsx
@@ -1,11 +1,11 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   Input,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/domains/game/forms/create-dynamic-server-form.tsx b/apps/hub/src/domains/game/forms/create-dynamic-server-form.tsx
@@ -1,4 +1,3 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import { findDuplicated } from "@/lib/utils";
 import { faPlus, faTrash } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -26,6 +25,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import {
   type UseFormReturn,

diff --git a/apps/hub/src/domains/game/forms/game-billing-form.tsx b/apps/hub/src/domains/game/forms/game-billing-form.tsx
@@ -1,4 +1,3 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FormControl,
   FormField,
@@ -11,6 +10,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  createSchemaForm,
   formatCurrency,
 } from "@rivet-gg/components";
 import { useEffect } from "react";

diff --git a/apps/hub/src/domains/game/forms/game-create-form.tsx b/apps/hub/src/domains/game/forms/game-create-form.tsx
@@ -1,10 +1,10 @@
 import { GroupSelect } from "@/domains/group/components/group-select";
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/domains/game/forms/game-logo-form.tsx b/apps/hub/src/domains/game/forms/game-logo-form.tsx
@@ -1,11 +1,11 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FileInput,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  createSchemaForm,
   fileSize,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";

diff --git a/apps/hub/src/domains/game/forms/group-create-game-form.tsx b/apps/hub/src/domains/game/forms/group-create-game-form.tsx
@@ -2,7 +2,6 @@ import {
   safeAsyncValidation,
   validateAgainstApi,
 } from "@/lib/async-validation";
-import { createSchemaForm } from "@/lib/create-schema-form";
 import { convertStringToId } from "@/lib/utils";
 import { rivetClient } from "@/queries/global";
 import {
@@ -12,6 +11,7 @@ import {
   FormLabel,
   FormMessage,
   Input,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/domains/game/forms/matchmaker-lobby-config-form.tsx b/apps/hub/src/domains/game/forms/matchmaker-lobby-config-form.tsx
@@ -1,11 +1,11 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   Input,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/domains/game/forms/namespace-create-form.tsx b/apps/hub/src/domains/game/forms/namespace-create-form.tsx
@@ -2,7 +2,6 @@ import {
   safeAsyncValidation,
   validateAgainstApi,
 } from "@/lib/async-validation";
-import { createSchemaForm } from "@/lib/create-schema-form";
 import { convertStringToId } from "@/lib/utils";
 import { rivetClient } from "@/queries/global";
 import {
@@ -12,6 +11,7 @@ import {
   FormLabel,
   FormMessage,
   Input,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/domains/group/forms/group-create-form.tsx b/apps/hub/src/domains/group/forms/group-create-form.tsx
@@ -1,5 +1,4 @@
 import { safeAsyncValidation } from "@/lib/async-validation";
-import { createSchemaForm } from "@/lib/create-schema-form";
 import { TraversableErrors, VALIDATION_ERRORS } from "@/lib/traversable-errors";
 import { rivetClient } from "@/queries/global";
 import {
@@ -9,6 +8,7 @@ import {
   FormLabel,
   FormMessage,
   Input,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/domains/group/forms/group-image-form.tsx b/apps/hub/src/domains/group/forms/group-image-form.tsx
@@ -1,11 +1,11 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FileInput,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  createSchemaForm,
   fileSize,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";

diff --git a/apps/hub/src/domains/group/forms/group-invite-form.tsx b/apps/hub/src/domains/group/forms/group-invite-form.tsx
@@ -1,4 +1,3 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   Flex,
   FormControl,
@@ -13,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
   Switch,
+  createSchemaForm,
   timing,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";

diff --git a/apps/hub/src/domains/group/forms/group-name-form.tsx b/apps/hub/src/domains/group/forms/group-name-form.tsx
@@ -1,11 +1,11 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   Input,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/domains/user/forms/user-avatar-form.tsx b/apps/hub/src/domains/user/forms/user-avatar-form.tsx
@@ -1,11 +1,11 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FileInput,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  createSchemaForm,
   fileSize,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";

diff --git a/apps/hub/src/domains/user/forms/user-name-form.tsx b/apps/hub/src/domains/user/forms/user-name-form.tsx
@@ -1,11 +1,11 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import {
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   Input,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/apps/hub/src/forms/feedback-form.tsx b/apps/hub/src/forms/feedback-form.tsx
@@ -1,4 +1,3 @@
-import { createSchemaForm } from "@/lib/create-schema-form";
 import { faBug, faConciergeBell } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -11,6 +10,7 @@ import {
   RadioGroup,
   RadioGroupItem,
   Textarea,
+  createSchemaForm,
 } from "@rivet-gg/components";
 import { type UseFormReturn, useFormContext } from "react-hook-form";
 import z from "zod";

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -3,29 +3,37 @@
   "private": true,
   "version": "1.0.0",
   "type": "module",
-  "files": ["dist"],
+  "files": ["dist", "src", "public"],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "exports": {
     ".": {
       "import": "./src/index.ts"
     },
+    "./header": "./src/header/index.tsx",
+    "./auto-form": "./src/auto-form/index.tsx",
     "./theme.css": "./public/theme.css",
-    "./tailwind-base": "./src/tailwind-base.ts"
+    "./tailwind-base": "./src/tailwind-base.ts",
+    "./layout": "./src/layout/index.ts"
   },
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/view": "^6.28.4",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/pro-regular-svg-icons": "^6.5.2",
     "@fortawesome/pro-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
@@ -42,9 +50,12 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.1.1",
     "@radix-ui/react-visually-hidden": "^1.0.3",
-    "@rivet-gg/api": "https://github.com/rivet-gg/rivet/raw/539f11efb856bc936576fe593fe051c0d7e1355d/sdks/typescript/archive.tgz",
+    "@react-hookz/web": "^24.0.4",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-virtual": "^3.10.1",
+    "@uiw/codemirror-extensions-basic-setup": "^4.23.0",
+    "@uiw/codemirror-theme-github": "^4.23.0",
+    "@uiw/react-codemirror": "^4.23.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
@@ -60,7 +71,8 @@
     "recharts": "^2.12.7",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/mime": "^4.0.0",

diff --git a/packages/components/public/theme.css b/packages/components/public/theme.css
@@ -42,6 +42,7 @@
   --border: 12 6.5% 15.1%;
   --input: 12 6.5% 15.1%;
   --ring: 18.59deg 100% 50%;
+  --background-main: 0 7.14% 5.49%;
 }
 
   :root {

diff --git a/packages/components/src/auto-form/common/label.tsx b/packages/components/src/auto-form/common/label.tsx
@@ -0,0 +1,23 @@
+import { cn } from "../../lib/utils";
+import { FormLabel } from "../../ui/form";
+
+function AutoFormLabel({
+  label,
+  isRequired,
+  className,
+}: {
+  label: string;
+  isRequired: boolean;
+  className?: string;
+}) {
+  return (
+    <>
+      <FormLabel className={cn(className)}>
+        {label}
+        {isRequired && <span className="text-destructive"> *</span>}
+      </FormLabel>
+    </>
+  );
+}
+
+export default AutoFormLabel;