initial changes

KhudaDad414 · Dec 18, 2023 · 540cb00 · 540cb00
1 parent 75b1473
commit 540cb00
Show file tree

Hide file tree

Showing 37 changed files with 14,864 additions and 26,460 deletions.
diff --git a/apps/studio/.gitignore b/apps/studio/.gitignore
@@ -2,4 +2,5 @@
 /node_modules
 .vscode/
 /lib
-/build
+/build
+.next
diff --git a/apps/studio/src/main.css → apps/studio/app/globals.css b/apps/studio/src/main.css → apps/studio/app/globals.css
@@ -1,3 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
 /** Preloader */
 #preloader {
 	position: fixed;

diff --git a/apps/studio/app/layout.tsx b/apps/studio/app/layout.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import Head from 'next/head'
+import 'reactflow/dist/style.css';
+import './globals.css'
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/animations/shift-away.css';
+import '@asyncapi/react-component/styles/default.min.css';
+import { Metadata } from 'next';
+
+const title = 'AsyncAPI Studio'
+const description = 'Studio for AsyncAPI specification, where you can validate, view preview documentation, and generate templates from AsyncAPI document.'
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    type: 'website',
+    url: 'https://studio.asyncapi.com/',
+    title,
+    description,
+    images: [
+      {
+        url: '/img/meta-studio-og-image.jpeg',
+        width: 800,
+        height: 600,
+        alt: 'Og Image Alt',
+      }
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    site: '@AsyncAPISpec',
+    creator: '@AsyncAPISpec',
+    title,
+    description,
+    images: [
+      {
+        url: '/img/meta-studio-og-image.jpeg',
+        alt: 'Twitter Image Alt',
+        width: 800,
+        height: 600,
+        type: 'image/jpeg',
+      }
+    ]
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <Head>
+        <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-194x194.png" />
+      </Head>
+      <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        {children}
+      </body>
+    </html>)
+}
diff --git a/apps/studio/app/page.tsx b/apps/studio/app/page.tsx
@@ -0,0 +1,58 @@
+
+'use client'
+
+import React, { useEffect, useState } from 'react';
+import { StrictMode } from 'react';
+import { Provider as ModalsProvider } from '@ebay/nice-modal-react';
+import { createServices, Services, ServicesProvider } from '../src/services';
+import { App}  from '../src/App';
+
+function configureMonacoEnvironment() {
+  if (typeof window !== 'undefined') {
+    window.MonacoEnvironment = {
+      getWorker(_, label) {
+        switch (label) {
+        case 'editorWorkerService':
+          return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
+        case 'json':
+          return new Worker(
+            new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url),
+          );
+        case 'yaml':
+        case 'yml':
+          return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
+        default:
+          throw new Error(`Unknown worker ${label}`);
+        }
+      },
+    };
+  }
+}
+
+function Page() {
+  const [services, setServices] = useState<Services>();
+  useEffect(() => {
+    const fetchData = async () => {
+      const servicess = await createServices();
+      setServices(servicess)
+      configureMonacoEnvironment();
+    };
+
+    fetchData();
+  }, []);
+
+  if (!services) {
+    return <h1>Loading....</h1>;
+  }
+  return (
+    <StrictMode>
+      <ServicesProvider value={services}>
+        <ModalsProvider>
+          <App />
+        </ModalsProvider>
+      </ServicesProvider>
+    </StrictMode>
+  );
+}
+
+export default Page;
diff --git a/apps/studio/next-env.d.ts b/apps/studio/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/studio/next.config.mjs b/apps/studio/next.config.mjs
@@ -0,0 +1,11 @@
+import withYaml  from 'next-plugin-yaml';
+export default withYaml(
+  {
+    webpack: config => {
+      config.resolve.fallback = {
+        fs: false
+      }
+      return config;
+    },
+  }
+);
diff --git a/apps/studio/package.json b/apps/studio/package.json
@@ -33,13 +33,16 @@
     "@ebay/nice-modal-react": "^1.2.10",
     "@headlessui/react": "^1.7.4",
     "@hookstate/core": "^4.0.0-rc21",
-    "@monaco-editor/react": "^4.4.6",
+    "@monaco-editor/react": "^4.6.0",
     "@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-editor": "0.45.0",
     "monaco-yaml": "4.0.2",
+    "next": "^14.0.4",
+    "next-plugin-yaml": "^1.0.1",
+    "next-transpile-modules": "^10.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "2.4.0",
@@ -48,9 +51,9 @@
     "zustand": "^4.1.4"
   },
   "scripts": {
-    "dev": "npm run start",
-    "start": "craco start",
-    "build": "npm run generate:template-parameters && craco build",
+    "dev": "next dev",
+    "start": "next start",
+    "build": "npm run generate:template-parameters && next build",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf build",
     "test": "npm run test:unit",
     "test:unit": "craco test --watchAll=false --detectOpenHandles",
@@ -98,7 +101,7 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "assert": "^2.0.0",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.16",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "conventional-changelog-conventionalcommits": "^5.0.0",
@@ -111,13 +114,12 @@
     "https-browserify": "^1.0.0",
     "markdown-toc": "^1.2.0",
     "path-browserify": "^1.0.1",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "process": "^0.11.10",
     "raw-loader": "^4.0.2",
-    "react-scripts": "5.0.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.3.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.3",
     "url": "^0.11.0",
@@ -137,4 +139,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/apps/studio/postcss.config.js b/apps/studio/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/apps/studio/src/App.tsx b/apps/studio/src/App.tsx
@@ -1,3 +1,4 @@
+
 import { AsyncAPIStudio } from './studio';
 
 import type { FunctionComponent } from 'react';

diff --git a/apps/studio/src/components/Editor/MonacoWrapper.tsx b/apps/studio/src/components/Editor/MonacoWrapper.tsx
@@ -1,20 +1,20 @@
 import { useMemo } from 'react';
-import MonacoEditor from '@monaco-editor/react';
-
+import dynamic from 'next/dynamic';
 import { debounce } from '../../helpers';
 import { useServices } from '../../services';
 import { useFilesState, useSettingsState } from '../../state';
 
 import type { FunctionComponent } from 'react';
 import type { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
-
+const DynamicMonaco = dynamic(() => import('@monaco-editor/react'), {
+  ssr: false,
+});
 export const MonacoWrapper: FunctionComponent<MonacoEditorProps> = ({
   ...props
 }) => {
   const { editorSvc, parserSvc } = useServices();
   const { autoSaving, savingDelay } = useSettingsState(state => state.editor);
   const file = useFilesState(state => state.files['asyncapi']);
-
   const onChange = useMemo(() => {
     return debounce((v: string) => {
       editorSvc.updateState({ content: v, file: { from: 'storage', source: undefined } });
@@ -24,11 +24,27 @@ export const MonacoWrapper: FunctionComponent<MonacoEditorProps> = ({
   }, [autoSaving, savingDelay]);
 
   return (
-    <MonacoEditor
+    <DynamicMonaco
       language={file.language}
       defaultValue={file.content}
       theme="asyncapi-theme"
-      onMount={editorSvc.onDidCreate.bind(editorSvc)}
+      onMount={(arg) => {
+        if (!window?.MonacoEnvironment) return
+        editorSvc.onDidCreate.bind(editorSvc)(arg)
+        window.MonacoEnvironment.getWorkerUrl = (moduleId, label) => {
+          switch (label) {
+          case 'editorWorkerService':
+            return '_next/static/editor.worker.js';
+          case 'json':
+            return '_next/static/json.worker.js';
+          case 'yaml':
+          case 'yml':
+            return '_next/monaco-yaml/yaml.worker.js';
+          default:
+            throw new Error(`Unknown worker ${label}`);
+          }
+        }
+      }}
       onChange={onChange}
       options={{
         wordWrap: 'on',

diff --git a/apps/studio/src/components/Editor/ShareButton.tsx b/apps/studio/src/components/Editor/ShareButton.tsx
@@ -8,7 +8,12 @@ interface ShareButtonProps {}
 
 export const ShareButton: React.FunctionComponent<ShareButtonProps> = () => {
   const { editorSvc } = useServices();
+  const [navigator, setNavigator] = React.useState<any>(null);
 
+  React.useEffect(() => {
+    setNavigator(window.navigator);
+  }, []);
+
   const handleShare = () => {
     toast.promise(
       (async function () {

diff --git a/apps/studio/src/components/Navigation.tsx b/apps/studio/src/components/Navigation.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react';
 import { useServices } from '../services';
 import { useDocumentsState, useFilesState } from '../state';
 
-import type { AsyncAPIDocumentInterface } from '@asyncapi/parser/cjs';
+import type { AsyncAPIDocumentInterface } from '@asyncapi/parser';
 
 interface NavigationProps {
   className?: string;

diff --git a/apps/studio/src/components/Navigationv3.tsx b/apps/studio/src/components/Navigationv3.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react';
 import { useServices } from '../services';
 import { useDocumentsState, useFilesState } from '../state';
 
-import type { AsyncAPIDocumentInterface } from '@asyncapi/parser/cjs';
+import type { AsyncAPIDocumentInterface } from '@asyncapi/parser';
 
 interface NavigationProps {
   className?: string;

diff --git a/apps/studio/src/components/SplitPane/Resizer.tsx b/apps/studio/src/components/SplitPane/Resizer.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable */
-// @ts-nocheck
+
 
 export const RESIZER_DEFAULT_CLASSNAME = 'Resizer';
 
-function Resizer(props) {
+function Resizer(props: any) {
   const {
     className,
     onClick,
     onDoubleClick,
     onMouseDown,
     onTouchEnd,
     onTouchStart,
-    resizerClassName,
+    resizerClassName = RESIZER_DEFAULT_CLASSNAME,
     split,
     style,
   } = props;
@@ -47,8 +47,4 @@ function Resizer(props) {
   );
 }
 
-Resizer.defaultProps = {
-  resizerClassName: RESIZER_DEFAULT_CLASSNAME,
-};
-
 export default Resizer;
diff --git a/apps/studio/src/components/Template/HTMLWrapper.tsx b/apps/studio/src/components/Template/HTMLWrapper.tsx
@@ -4,7 +4,7 @@ import { AsyncApiComponentWP } from '@asyncapi/react-component';
 import { useServices } from '../../services';
 import { appState, useDocumentsState, useSettingsState, useOtherState, otherState } from '../../state';
 
-import { AsyncAPIDocumentInterface } from '@asyncapi/parser/cjs';
+import { AsyncAPIDocumentInterface } from '@asyncapi/parser';
 
 interface HTMLWrapperProps {}
 

diff --git a/apps/studio/src/components/Terminal/ProblemsTab.tsx b/apps/studio/src/components/Terminal/ProblemsTab.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { VscError, VscWarning, VscInfo, VscLightbulb, VscSearch, VscClose, VscSettingsGear } from 'react-icons/vsc';
 import { useModal } from '@ebay/nice-modal-react';
-import { DiagnosticSeverity } from '@asyncapi/parser/cjs';
+import { DiagnosticSeverity } from '@asyncapi/parser';
 
 import { SettingsModal } from '../Modals/Settings/SettingsModal';
 
@@ -11,7 +11,7 @@ import { debounce } from '../../helpers';
 import { useDocumentsState, useSettingsState } from '../../state';
 
 import type { FunctionComponent } from 'react';
-import type { Diagnostic } from '@asyncapi/parser/cjs';
+import type { Diagnostic } from '@asyncapi/parser';
 
 interface ProblemsTabProps {}
 

diff --git a/apps/studio/src/components/Visualiser/FlowDiagram.tsx b/apps/studio/src/components/Visualiser/FlowDiagram.tsx
@@ -6,7 +6,7 @@ import { Controls } from './Controls';
 import { getElementsFromAsyncAPISpec } from './utils/node-factory';
 import { calculateNodesForDynamicLayout } from './utils/node-calculator';
 
-import type { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser/cjs';
+import type { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser';
 import type { FunctionComponent } from 'react';
 
 interface FlowDiagramProps {

diff --git a/apps/studio/src/components/Visualiser/Nodes/ApplicationNode.tsx b/apps/studio/src/components/Visualiser/Nodes/ApplicationNode.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Handle, Position } from 'reactflow';
-import { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser/cjs';
+import { OldAsyncAPIDocument as AsyncAPIDocument } from '@asyncapi/parser';
 
 import { useServices } from '../../../services';
 import { Markdown } from '../../common';