style: update recorder api playground styles

apps/recorder/package.json

@@ -9,8 +9,11 @@
   "dependencies": {
     "@graphiql/react": "^0.28.2",
     "@graphiql/toolkit": "^0.11.1",
-    "@tanstack/react-router": "^1.95.5",
-    "@tanstack/router-devtools": "^1.95.5",
+    "@konobangu/design-system": "workspace:*",
+    "@konobangu/tailwind-config": "workspace:*",
+    "@tanstack/react-router": "^1.95.6",
+    "@tanstack/router-devtools": "^1.95.6",
+    "graphiql": "^3.8.3",
     "graphql-ws": "^5.16.2",
     "oidc-client-ts": "^3.1.0",
     "react": "^19.0.0",
@@ -18,11 +21,13 @@
     "react-oidc-context": "^3.2.0"
   },
   "devDependencies": {
-    "@rsbuild/core": "^1.1.8",
-    "@rsbuild/plugin-react": "^1.0.7",
-    "@tanstack/router-plugin": "^1.95.5",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "typescript": "^5.7.2"
+    "@konobangu/typescript-config": "workspace:*",
+    "@rsbuild/core": "^1.1.13",
+    "@rsbuild/plugin-react": "^1.1.0",
+    "@tanstack/router-plugin": "^1.95.6",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3"
   }
 }

apps/recorder/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+    },
+}

apps/recorder/rsbuild.config.ts

@@ -6,12 +6,12 @@ export default defineConfig({
   plugins: [pluginReact()],
   html: {
     favicon: './public/assets/favicon.ico',
-    tags: [
-      {
-        tag: 'script',
-        attrs: { src: 'https://cdn.tailwindcss.com' },
-      },
-    ],
+    // tags: [
+    //   {
+    //     tag: 'script',
+    //     attrs: { src: 'https://cdn.tailwindcss.com' },
+    //   },
+    // ],
   },
   tools: {
     rspack: {
@@ -19,6 +19,9 @@ export default defineConfig({
     },
   },
   source: {
+    entry: {
+      index: './src/main.tsx',
+    },
     define: {
       'process.env.AUTH_TYPE': JSON.stringify(process.env.AUTH_TYPE),
       'process.env.OIDC_CLIENT_ID': JSON.stringify(process.env.OIDC_CLIENT_ID),

apps/recorder/src/controllers/__root.tsx

@@ -26,7 +26,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 function RootComponent() {
   return (
     <>
-      <div className="flex gap-2 p-2 text-lg">
+      {/* <div className="flex gap-2 p-2 text-lg ">
         <Link
           to="/"
           activeProps={{
@@ -43,8 +43,8 @@ function RootComponent() {
         >
           GraphQL
         </Link>
-      </div>
-      <hr />
+      </div> */}
+      {/* <hr /> */}
       <Outlet />
       <TanStackRouterDevtools position="bottom-right" />
     </>

apps/recorder/src/controllers/graphql/index.tsx

@@ -1,10 +1,10 @@
-import { GraphiQLProvider, QueryEditor } from '@graphiql/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { createFileRoute } from '@tanstack/react-router';
+import GraphiQL from 'graphiql';
 import { useMemo } from 'react';
 import { useAuth } from 'react-oidc-context';
 import { beforeLoadGuard } from '../../auth/guard';
-import '@graphiql/react/dist/style.css';
+import 'graphiql/graphiql.css';
 
 export const Route = createFileRoute('/graphql/')({
   component: RouteComponent,
@@ -27,11 +27,5 @@ function RouteComponent() {
     [auth]
   );
 
-  return (
-    <GraphiQLProvider fetcher={fetcher}>
-      <div className="graphiql-container h-svh">
-        <QueryEditor />
-      </div>
-    </GraphiQLProvider>
-  );
+  return <GraphiQL fetcher={fetcher} className="h-svh" />;
 }

apps/recorder/src/controllers/index.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({
   component: RouteComponent,
-});
+})
 
 function RouteComponent() {
-  return <div>Hello to playground!</div>;
+  return <div>Hello to playground!</div>
 }

apps/recorder/src/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/recorder/src/main.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './app';
+import './main.css';
 
 const rootEl = document.getElementById('root');
 if (rootEl) {
+  rootEl.classList.add('min-h-svh');
   const root = ReactDOM.createRoot(rootEl);
   root.render(
     <React.StrictMode>

apps/recorder/tailwind.config.ts

@@ -0,0 +1 @@
+export { config as default } from '@konobangu/tailwind-config/config';

apps/recorder/tsconfig.json

@@ -1,15 +1,10 @@
 {
   "extends": "@konobangu/typescript-config/base.json",
   "compilerOptions": {
-    "lib": ["DOM", "ES2022", "DOM.AsyncIterable", "DOM.Iterable"],
+    "lib": ["DOM", "ES2024", "DOM.AsyncIterable", "DOM.Iterable"],
     "jsx": "react-jsx",
-    "target": "ES2020",
     "noEmit": true,
-    "skipLibCheck": true,
-    "useDefineForClassFields": true,
     "module": "ESNext",
-    "isolatedModules": true,
-    "resolveJsonModule": true,
     "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
     "strict": true,