feat: new hive lab (#7374)

Co-authored-by: Piotr Monwid-Olechnowicz <hasparus@gmail.com>

Author: mskorokhodov

package.json

@@ -98,6 +98,7 @@
     "prettier-plugin-tailwindcss": "0.6.9",
     "pretty-quick": "4.0.0",
     "rimraf": "4.4.1",
+    "tailwindcss": "3.4.17",
     "ts-node": "10.9.2",
     "tsup": "8.4.0",
     "tsx": "4.19.2",
@@ -124,7 +125,8 @@
       "cookie@<0.7.0": "0.7.2",
       "tar-fs": "2.1.4",
       "ip": "npm:neoip@2.1.0",
-      "miniflare@3>undici": "5.29.0"
+      "miniflare@3>undici": "5.29.0",
+      "tailwindcss": "3.4.17"
     },
     "patchedDependencies": {
       "mjml-core@4.14.0": "patches/mjml-core@4.14.0.patch",

packages/web/app/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/laboratory/components",
+    "utils": "@/laboratory/lib/utils",
+    "ui": "@/laboratory/components/ui",
+    "lib": "@/laboratory/lib",
+    "hooks": "@/laboratory/hooks"
+  },
+  "registries": {}
+}

packages/web/app/package.json

@@ -13,6 +13,10 @@
   },
   "devDependencies": {
     "@date-fns/utc": "2.1.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fastify/cors": "9.0.1",
     "@fastify/static": "7.0.4",
     "@fastify/vite": "6.0.7",
@@ -24,13 +28,14 @@
     "@graphql-typed-document-node/core": "3.2.0",
     "@headlessui/react": "2.2.0",
     "@hookform/resolvers": "3.10.0",
-    "@monaco-editor/react": "4.7.0",
+    "@monaco-editor/react": "4.8.0-rc.2",
     "@n1ru4l/react-time-ago": "1.1.0",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.4",
     "@radix-ui/react-avatar": "1.1.2",
     "@radix-ui/react-checkbox": "1.1.3",
     "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-dropdown-menu": "2.1.4",
     "@radix-ui/react-hover-card": "1.1.4",
@@ -46,6 +51,7 @@
     "@radix-ui/react-switch": "1.1.2",
     "@radix-ui/react-tabs": "1.1.2",
     "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "1.1.1",
     "@radix-ui/react-tooltip": "1.1.6",
     "@repeaterjs/repeater": "3.0.6",
@@ -61,8 +67,10 @@
     "@storybook/react-vite": "8.4.7",
     "@stripe/react-stripe-js": "3.1.1",
     "@stripe/stripe-js": "5.5.0",
+    "@tanstack/react-form": "^1.27.0",
     "@tanstack/react-query": "5.63.0",
     "@tanstack/react-router": "1.34.9",
+    "@tanstack/react-router-devtools": "^1.139.13",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/router-devtools": "1.34.9",
     "@tanstack/zod-adapter": "1.120.5",
@@ -100,16 +108,21 @@
     "graphiql": "4.0.0-alpha.5",
     "graphql": "16.9.0",
     "graphql-sse": "2.5.3",
+    "graphql-ws": "5.16.1",
     "immer": "10.1.3",
     "js-cookie": "3.0.5",
     "json-schema-typed": "8.0.1",
     "json-schema-yup-transformer": "1.6.12",
     "jsurl2": "2.2.0",
+    "lodash": "4.17.21",
     "lodash.debounce": "4.0.8",
     "lucide-react": "0.469.0",
+    "lz-string": "^1.5.0",
     "mini-svg-data-uri": "1.4.4",
-    "monaco-editor": "0.50.0",
+    "monaco-editor": "^0.52.2",
+    "monaco-graphql": "^1.7.2",
     "monaco-themes": "0.4.4",
+    "next-themes": "^0.4.6",
     "query-string": "9.1.1",
     "react": "18.3.1",
     "react-day-picker": "8.10.1",
@@ -129,6 +142,7 @@
     "recharts": "2.15.1",
     "regenerator-runtime": "0.14.1",
     "snarkdown": "2.0.0",
+    "sonner": "^2.0.7",
     "storybook": "8.4.7",
     "supertokens-auth-react": "0.38.0",
     "supertokens-web-js": "0.9.0",
@@ -142,6 +156,7 @@
     "use-debounce": "10.0.4",
     "valtio": "1.13.2",
     "vite": "7.1.11",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "vite-tsconfig-paths": "5.1.4",
     "wonka": "6.3.4",
     "yup": "1.6.1",

packages/web/app/src/components/ui/separator.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-restricted-imports */
-import * as React from 'react';
+import React from 'react';
 import { cn } from '@/lib/utils';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 

packages/web/app/src/index.css

@@ -101,6 +101,12 @@
     --chart-1: 220 70% 50%;
     --chart-2: 340 75% 55%;
   }
+
+  .hive-laboratory {
+    --primary: 40 89% 60%;
+    --background: 223 70% 4%;
+    --card: 220 21.43% 5.49%;
+  }
 }
 
 @layer base {

packages/web/app/src/laboratory/components/graphql-type.tsx

@@ -0,0 +1,38 @@
+import {
+  GraphQLEnumType,
+  GraphQLList,
+  GraphQLNonNull,
+  GraphQLScalarType,
+  type GraphQLInputType,
+  type GraphQLOutputType,
+} from 'graphql';
+
+export const GraphQLType = (props: {
+  type: GraphQLOutputType | GraphQLInputType;
+  className?: string;
+}) => {
+  if (props.type instanceof GraphQLNonNull) {
+    return (
+      <span>
+        <GraphQLType type={props.type.ofType} />
+        <span className="!text-muted-foreground">!</span>
+      </span>
+    );
+  }
+
+  if (props.type instanceof GraphQLList) {
+    return (
+      <span>
+        <span className="!text-muted-foreground">[</span>
+        <GraphQLType type={props.type.ofType} />
+        <span className="!text-muted-foreground">]</span>
+      </span>
+    );
+  }
+
+  if (props.type instanceof GraphQLScalarType || props.type instanceof GraphQLEnumType) {
+    return <span className="text-teal-500 dark:text-teal-400">{props.type.name}</span>;
+  }
+
+  return <span className="text-amber-500 dark:text-amber-400">{props.type.name}</span>;
+};

packages/web/app/src/laboratory/components/icons.tsx

@@ -0,0 +1,45 @@
+import type { LucideProps } from 'lucide-react';
+
+export const GraphQLIcon = (props: LucideProps) => {
+  return (
+    <svg
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M49.9994 6.90218L87.3224 28.4506V71.5475L49.9994 93.0959L12.6764 71.5475V28.4506L49.9994 6.90218ZM16.8641 30.8684V62.5242L44.2789 15.0405L16.8641 30.8684ZM49.9994 13.5077L18.3969 68.2448H81.6019L49.9994 13.5077ZM77.4142 72.4325H22.5846L49.9994 88.2604L77.4142 72.4325ZM83.1347 62.5242L55.7199 15.0405L83.1347 30.8684V62.5242Z"
+        fill="currentColor"
+      />
+      <path
+        d="M49.9994 18.14C54.8706 18.14 58.8194 14.1912 58.8194 9.32C58.8194 4.44885 54.8706 0.5 49.9994 0.5C45.1283 0.5 41.1794 4.44885 41.1794 9.32C41.1794 14.1912 45.1283 18.14 49.9994 18.14Z"
+        fill="currentColor"
+      />
+      <path
+        d="M85.2286 38.4796C90.0998 38.4796 94.0486 34.5308 94.0486 29.6596C94.0486 24.7884 90.0998 20.8396 85.2286 20.8396C80.3575 20.8396 76.4086 24.7884 76.4086 29.6596C76.4086 34.5308 80.3575 38.4796 85.2286 38.4796Z"
+        fill="currentColor"
+      />
+      <path
+        d="M85.2286 79.1587C90.0998 79.1587 94.0486 75.2099 94.0486 70.3387C94.0486 65.4675 90.0998 61.5187 85.2286 61.5187C80.3575 61.5187 76.4086 65.4675 76.4086 70.3387C76.4086 75.2099 80.3575 79.1587 85.2286 79.1587Z"
+        fill="currentColor"
+      />
+      <path
+        d="M49.9994 99.4982C54.8706 99.4982 58.8194 95.5494 58.8194 90.6782C58.8194 85.807 54.8706 81.8582 49.9994 81.8582C45.1283 81.8582 41.1794 85.807 41.1794 90.6782C41.1794 95.5494 45.1283 99.4982 49.9994 99.4982Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.7653 79.1587C19.6365 79.1587 23.5853 75.2099 23.5853 70.3387C23.5853 65.4675 19.6365 61.5187 14.7653 61.5187C9.89416 61.5187 5.94531 65.4675 5.94531 70.3387C5.94531 75.2099 9.89416 79.1587 14.7653 79.1587Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.7653 38.4796C19.6365 38.4796 23.5853 34.5308 23.5853 29.6596C23.5853 24.7884 19.6365 20.8396 14.7653 20.8396C9.89416 20.8396 5.94531 24.7884 5.94531 29.6596C5.94531 34.5308 9.89416 38.4796 14.7653 38.4796Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};