feat: Use Next.js in studio-next (#1062)

.changeset/giant-bulldogs-pretend.md

@@ -0,0 +1,5 @@
+---
+"studio-next": patch
+---
+
+Use Next.js framework

.sonarcloud.properties

@@ -1,4 +1,4 @@
 # Disable specific file since it would introduce more complexity to reduce it - mainly code complexity and complex template literals
 sonar.exclusions=apps/studio/public/js/monaco/**,apps/studio/src/tailwind.css,apps/studio/src/components/SplitPane/**
 # Disable duplicate code in tests since it would introduce more complexity to reduce it.
-sonar.cpd.exclusions=apps/studio/**
+sonar.cpd.exclusions=apps/studio/**,apps/studio-next/src/components/Navigationv3.tsx,apps/studio-next/src/components/Navigation.tsx

apps/studio-next/next.config.js

@@ -1,4 +1,41 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  webpack: (
+    config,
+    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
+  ) => {
+    config.module.rules.push({
+      test: /\.yml$/i,
+      type: 'asset/source',
+    })
+
+    if (isServer) return config
+    // Important: return the modified config
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      assert: require.resolve('assert/'),
+      buffer: require.resolve('buffer'),
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      path: require.resolve('path-browserify'),
+      stream: require.resolve('stream-browserify'),
+      zlib: require.resolve('browserify-zlib'),
+      url: require.resolve('url/'),
+      util: require.resolve('util/'),
+      debug: false,
+      canvas: false,
+      fs: false,
+    }
+
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        process: 'process/browser',
+        Buffer: ['buffer', 'Buffer'],
+      })
+    );
+
+    return config
+  },
+}
 
 module.exports = nextConfig

apps/studio-next/package.json

@@ -9,12 +9,26 @@
     "lint": "echo 'No linting configured'"
   },
   "dependencies": {
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/commands": "^6.3.3",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-yaml": "^6.0.0",
-    "@codemirror/language": "^6.10.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
+    "@asyncapi/avro-schema-parser": "^3.0.19",
+    "@asyncapi/converter": "^1.4.16",
+    "@asyncapi/openapi-schema-parser": "^3.0.18",
+    "@asyncapi/parser": "^3.0.11",
+    "@asyncapi/protobuf-schema-parser": "^3.2.8",
+    "@asyncapi/react-component": "^1.2.2",
+    "@asyncapi/specs": "^6.5.4",
+    "@ebay/nice-modal-react": "^1.2.10",
+    "@headlessui/react": "^1.7.4",
+    "@hookstate/core": "^4.0.0-rc21",
+    "@monaco-editor/react": "^4.4.6",
+    "@tippyjs/react": "^4.2.6",
+    "js-base64": "^3.7.3",
+    "js-file-download": "^0.4.12",
+    "js-yaml": "^4.1.0",
+    "monaco-editor": "0.34.1",
+    "monaco-yaml": "4.0.2",
+    "react-hot-toast": "2.4.0",
+    "react-icons": "^4.6.0",
+    "reactflow": "^11.2.0",
     "@stoplight/yaml": "^4.3.0",
     "@codemirror/view": "^6.26.3",
     "@types/node": "20.4.6",
@@ -31,5 +45,48 @@
     "tippy.js": "^6.3.7",
     "typescript": "5.1.6",
     "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@asyncapi/dotnet-nats-template": "^0.12.1",
+    "@asyncapi/go-watermill-template": "^0.2.72",
+    "@asyncapi/html-template": "^2.3.0",
+    "@asyncapi/java-spring-cloud-stream-template": "^0.13.4",
+    "@asyncapi/java-spring-template": "^1.5.1",
+    "@asyncapi/java-template": "^0.2.1",
+    "@asyncapi/markdown-template": "^1.5.0",
+    "@asyncapi/nodejs-template": "^2.0.1",
+    "@asyncapi/nodejs-ws-template": "^0.9.33",
+    "@asyncapi/python-paho-template": "^0.2.13",
+    "@asyncapi/ts-nats-template": "^0.10.3",
+    "@tailwindcss/typography": "^0.5.8",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.3",
+    "@types/js-yaml": "^4.0.5",
+    "@types/json-schema": "^7.0.11",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "assert": "^2.0.0",
+    "autoprefixer": "^10.4.13",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "eslint-config-next": "14.1.4",
+    "eslint-plugin-security": "^1.5.0",
+    "eslint-plugin-sonarjs": "^0.16.0",
+    "https-browserify": "^1.0.0",
+    "markdown-toc": "^1.2.0",
+    "path-browserify": "^1.0.1",
+    "postcss": "^8.4.31",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "tailwindcss": "^3.2.4",
+    "ts-node": "^10.9.1",
+    "url": "^0.11.0",
+    "util": "^0.12.5",
+    "web-vitals": "^3.1.0",
+    "webpack": "^5.75.0"
   }
 }

apps/studio-next/public/_redirects

@@ -0,0 +1,19 @@
+# Redirect editor.asyncapi.org to Studio
+
+http://editor.asyncapi.org/* https://studio.asyncapi.com 301!
+https://editor.asyncapi.org/* https://studio.asyncapi.com 301!
+
+# Redirect playground.asyncapi.io to Studio
+
+http://playground.asyncapi.io/* https://studio.asyncapi.com/?redirectedFrom=playground 301!
+https://playground.asyncapi.io/* https://studio.asyncapi.com/?redirectedFrom=playground 301!
+
+http://playground.asyncapi.io/* load=:load https://studio.asyncapi.com/?redirectedFrom=playground&load=:load 301!
+https://playground.asyncapi.io/* load=:load https://studio.asyncapi.com/?redirectedFrom=playground&load=:load 301!
+http://playground.asyncapi.io/* load=:load readOnly=:readOnly https://studio.asyncapi.com/?redirectedFrom=playground&load=:load&readOnly=true 301!
+https://playground.asyncapi.io/* load=:load readOnly=:readOnly https://studio.asyncapi.com/?redirectedFrom=playground&load=:load&readOnly=true 301!
+
+http://playground.asyncapi.io/* url=:url https://studio.asyncapi.com/?redirectedFrom=playground&url=:url 301!
+https://playground.asyncapi.io/* url=:url https://studio.asyncapi.com/?redirectedFrom=playground&url=:url 301!
+http://playground.asyncapi.io/* url=:url readOnly=:readOnly https://studio.asyncapi.com/?redirectedFrom=playground&url=:url&readOnly=true 301!
+https://playground.asyncapi.io/* url=:url readOnly=:readOnly https://studio.asyncapi.com/?redirectedFrom=playground&url=:url&readOnly=true 301!