✨ Making the catalog for embedded in tegration connections

apps/embedded-catalog/package.json → apps/embedded-catalog/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "embedded-catalog",
+  "name": "react",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -18,10 +18,13 @@
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"
   }

apps/embedded-catalog/react/postcss.config.js

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

apps/embedded-catalog/react/src/App.tsx

@@ -0,0 +1,17 @@
+import './App.css'
+
+function App() {
+
+  return (
+    <>
+      <div>
+        <h1 className="text-3xl font-bold underline">
+        Hello world!
+        </h1>
+      </div>
+
+    </>
+  )
+}
+
+export default App

apps/embedded-catalog/src/index.css → apps/embedded-catalog/react/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

apps/embedded-catalog/react/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

apps/embedded-catalog/vite.config.ts → apps/embedded-catalog/react/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({

apps/webapp/src/components/connections/ConnectionTable.tsx

@@ -79,7 +79,7 @@ export default function ConnectionTable() {
 
 
         </div>
-        {isGenerated ? <Dialog open={true}>
+        {isGenerated ? <Dialog open={isGenerated} onOpenChange={setIsGenerated}>
           <DialogTrigger asChild>
             <Button variant="outline" className="">
               <PlusCircledIcon className="mr-2 h-4 w-4" />