+
+
)
}
diff --git a/apps/studio-next/src/app/page.tsx b/apps/studio-next/src/app/page.tsx
index 5e8dc6c85..e53256269 100644
--- a/apps/studio-next/src/app/page.tsx
+++ b/apps/studio-next/src/app/page.tsx
@@ -1,9 +1,7 @@
-import { Editor } from '@/components/Editor/Editor';
-
-export default function Home() {
+import dynamic from 'next/dynamic';
+const StudioWrapper = dynamic(() => import('@/components/StudioWrapper'), {ssr: false})
+export default async function Home() {
return (
-
+
+
+ 
+
+ beta
+
+
+
+
+
+
+
+
+ );
+ }
+ const unsubscribe = appState.subscribe((state) => {
+ state.initErrors.forEach((e) => {
+ toast.error(e.message);
+ });
+ unsubscribe();
+ appState.setState({ initErrors: [] });
+ });
+
+ return (
+
+
+ );
+};
diff --git a/apps/studio-next/src/components/Content.tsx b/apps/studio-next/src/components/Content.tsx
new file mode 100644
index 000000000..8a61b3d79
--- /dev/null
+++ b/apps/studio-next/src/components/Content.tsx
@@ -0,0 +1,78 @@
+import SplitPane from './SplitPane';
+import { Editor } from './Editor/Editor';
+import { Navigation } from './Navigation';
+import { Navigationv3 } from './Navigationv3';
+import { Template } from './Template';
+import { VisualiserTemplate } from './Visualiser';
+
+import { debounce } from '@/helpers';
+import { usePanelsState, useDocumentsState } from '@/state';
+
+import { FunctionComponent } from 'react';
+
+interface ContentProps {}
+
+export const Content: FunctionComponent
+
+
+
+ );
+};
diff --git a/apps/studio-next/src/components/Editor/CodeMirror.tsx b/apps/studio-next/src/components/Editor/CodeMirror.tsx
deleted file mode 100644
index 2928d7a0f..000000000
--- a/apps/studio-next/src/components/Editor/CodeMirror.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client';
-
-import { EditorView, basicSetup } from 'codemirror';
-import { EditorState } from '@codemirror/state';
-import { useEffect, useRef } from 'react';
-import {
- oneDarkTheme,
- oneDarkHighlightStyle,
-} from '@codemirror/theme-one-dark';
-import { json } from '@codemirror/lang-json';
-import { yaml } from '@codemirror/lang-yaml';
-import { syntaxHighlighting } from '@codemirror/language';
-import { indentWithTab } from '@codemirror/commands';
-import { keymap } from '@codemirror/view';
-
-interface ICodeMirrorProps {
- language: 'json' | 'yaml';
- value: string;
- onChange: (value: string) => void;
- readOnly?: boolean;
- autoFocus?: boolean;
- className?: string;
-}
-
-export const CodeMirror = (props: ICodeMirrorProps) => {
- const { language, value, onChange, autoFocus, className } = props;
-
- const editorRef = useRef
+ {
+ localStorage.setItem(splitPosRight, String(size));
+ }, 100)}
+ >
+ {navigationAndEditor}
+ {viewType === 'template' && }
+ {viewType === 'visualiser' &&
+
+
- handleUpdateFile('asyncapi', { content: value })} />
+
+
);
-}
\ No newline at end of file
+};
diff --git a/apps/studio-next/src/components/Editor/EditorDropdown.tsx b/apps/studio-next/src/components/Editor/EditorDropdown.tsx
new file mode 100644
index 000000000..51b0a1a5d
--- /dev/null
+++ b/apps/studio-next/src/components/Editor/EditorDropdown.tsx
@@ -0,0 +1,252 @@
+import React from 'react';
+import toast from 'react-hot-toast';
+import { show } from '@ebay/nice-modal-react';
+import { FaEllipsisH } from 'react-icons/fa';
+
+import {
+ ImportURLModal,
+ ImportBase64Modal,
+ GeneratorModal,
+ ConvertModal,
+} from '../Modals';
+import { Dropdown } from '../common';
+
+import { useServices } from '@/services';
+import { useDocumentsState, useFilesState } from '../../state';
+
+interface EditorDropdownProps {}
+
+export const EditorDropdown: React.FunctionComponent
+
+ -
+
- + {importUrlButton} + +
- + {importFileButton} + +
- + {importBase64Button} + +
- + {generateButton} + +
- + {saveFileButton} + +
- + {convertLangAndSaveButton} + +
- + {convertLangButton} + +
- + {convertButton} + +
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/apps/studio-next/src/components/Editor/MonacoWrapper.tsx b/apps/studio-next/src/components/Editor/MonacoWrapper.tsx
new file mode 100644
index 000000000..4eb7cfe20
--- /dev/null
+++ b/apps/studio-next/src/components/Editor/MonacoWrapper.tsx
@@ -0,0 +1,42 @@
+'use client'
+import { useMemo } from 'react';
+import MonacoEditor from '@monaco-editor/react';
+
+import { debounce } from '@/helpers';
+import { useServices } from '@/services';
+import { useFilesState, useSettingsState } from '@/state';
+
+import { FunctionComponent } from 'react';
+import type { EditorProps as MonacoEditorProps } from '@monaco-editor/react';
+
+export const MonacoWrapper: FunctionComponent
+ {documentFromText}
+
+
+
+
+
+ -
+
-
+
+
+ -
+
+
+
+
+
+
+
+ Would you like to create a new file?
+
+ + All the existing changes will be lost and overwritten. +
+
+
+ Document succesfully converted!
+
+
+ ),
+ error: (
+
+
+ Failed to convert document.
+
+
+ ),
+ });
+ };
+
+ return (
+
+ {allowedVersions.length > 0 ? (
+
+
+
+
+
+ ) : (
+ Uses the latest version.
+ )}
+
+
+ Document succesfully converted!
+
+
+ ),
+ error: (
+
+
+ Failed to convert document.
+
+
+ ),
+ });
+ }
+
+ let content = '';
+ if (convertOnlyToLatest) {
+ content = `Your document is using not latest version of AsyncAPI. Convert your document to latest (${latestVersion}) version`;
+ } else {
+ content = 'There is a new version of AsyncAPI. Convert your document to newest version if you want.';
+ }
+
+ return (
+
+
+ + {content} +
+-
+ {reservedAllowedVersions.map(v => v !== '2.0.0' && (
+
- + + See the release notes for {v} + + + ))} +
+
+
+
+ ) : null}
+
+
+ Succesfully generated!
+
+
+ ),
+ error: (
+
+
+ Failed to generate.
+
+
+ ),
+ });
+ };
+
+ const onCancel = () => {
+ setTimeout(() => {
+ setTemplate('');
+ setProblem(null);
+ setConfirmDisabled(true);
+ modal.hide();
+ }, 200);
+ };
+
+ return (
+
+
+
+
+
+
+ {template && (
+
+ )}
+
+ )[String(template)]?.schema : {}}
+ supportedProtocols={template ? (templates as Record)[String(template)]?.supportedProtocols : []}
+ setConfirmDisabled={setConfirmDisabled}
+ />
+
+ {problem && (
+
+
+ )}
+
+
+ {problem.validationErrors &&
+ problem.validationErrors.length &&
+ problem.validationErrors.filter(error => error.message).length
+ ? (
+
+
+
+
+
+
+ {problem.title}
+
+ -
+ {problem.validationErrors.map(error => (
+
- + {error.message} + + ))} +
+ {problem.detail} +
+ ) + } +
+
+ );
+ }, [templateName]);
+
+ if (document === null) {
+ return null;
+ }
+
+ if (!templateName) {
+ return null;
+ }
+
+ if (!hasSupportedProtocols) {
+ return (
+
+
+
+
+ {property.description}
+
+
+ AsyncAPI document doesn't have at least one server with supported protocols. For the selected generation, these are supported: {supportedProtocols.join(', ')}
+
+ );
+ }
+
+ if (!properties || !Object.keys(properties).length) {
+ return (
+
+ {'The given generation hasn\'t parameters to pass'}
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+const TemplateParameters = forwardRef(TemplateParametersSans);
+export { TemplateParameters };
diff --git a/apps/studio-next/src/components/Modals/Generator/template-parameters.json b/apps/studio-next/src/components/Modals/Generator/template-parameters.json
new file mode 100644
index 000000000..cd065e7eb
--- /dev/null
+++ b/apps/studio-next/src/components/Modals/Generator/template-parameters.json
@@ -0,0 +1 @@
+{"@asyncapi/dotnet-nats-template":{"title":".NET Nats Project","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"version":{"description":"Version of the generated library","type":"string","default":"0.0.1"},"projectName":{"description":"Name of the generated library","type":"string","default":"AsyncapiNatsClient"},"repositoryUrl":{"description":"Repository url for the project file, often needed for release pipelines","type":"string"},"targetFramework":{"description":"The project target framework","type":"string","default":"netstandard2.0;netstandard2.1"},"packageVersion":{"description":"PackageVersion of the generated library","type":"string"},"assemblyVersion":{"description":"AssemblyVersion of the generated library","type":"string"},"fileVersion":{"description":"FileVersion of the generated library","type":"string"},"serializationLibrary":{"description":"Which serialization library should the models use? `newtonsoft` or `json` (system.text.json)","type":"string","default":"json"}},"required":[],"additionalProperties":false},"supportedProtocols":["nats"]},"@asyncapi/go-watermill-template":{"title":"GO Lang Watermill Project","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"moduleName":{"description":"name of the go module to be generated","type":"string","default":"go-async-api"}},"required":[],"additionalProperties":false},"supportedProtocols":["amqp"]},"@asyncapi/html-template":{"title":"HTML website","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"sidebarOrganization":{"description":"Defines how the sidebar should be organized. 'byTags' to categorize operations by tags in the root of the document, `byTagsNoRoot` does the same but for pub/sub tags.","type":"string"},"baseHref":{"description":"Sets the base URL for links and forms.","type":"string"},"version":{"description":"Override the version of your application provided under `info.version` location in the specification file.","type":"string"},"singleFile":{"description":"If set this parameter to true generate single html file with scripts and styles inside","type":"boolean","default":false},"outFilename":{"description":"The name of the output HTML file","type":"string","default":"index.html"},"pdf":{"description":"Set to `true` to get index.pdf generated next to your index.html","type":"boolean","default":false},"pdfTimeout":{"description":"The timeout (in ms) used to generate the pdf","type":"number","default":30000},"favicon":{"description":"URL/Path of the favicon","type":"string","default":""},"config":{"description":"Stringified JSON or a path to a JSON file to override the default React component config. The config override is merged with the default config using the [JSON Merge Patch](https://tools.ietf.org/html/rfc7386) algorithm.","type":"string","default":""}},"required":[],"additionalProperties":false}},"@asyncapi/java-spring-cloud-stream-template":{"title":"Java Spring Cloud Stream Project","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"actuator":{"description":"If present, it adds the dependencies for spring-boot-starter-web, spring-boot-starter-actuator and micrometer-registry-prometheus.","type":"boolean","default":false},"artifactId":{"description":"The Maven artifact id. Alternatively you can set the specification extension info.x-artifact-id","type":"string","default":"project-name"},"artifactType":{"description":"The type of project to generate, application or library. The default is application. When generating an application, the pom.xml file will contain the complete set of dependencies required to run an app, and it will contain an Application class with a main function. Otherwise the pom file will include only the dependencies required to compile a library.","type":"string","default":"application"},"binder":{"description":"The name of the binder implementation, one of kafka, rabbit or solace. Default: kafka. If you need other binders to be supported, please let us know!","type":"string","default":"kafka"},"dynamicType":{"description":"When using channels with parameters, i.e. dynamic topics where the topic could be different for each message, this determines whether to use the StreamBridge or a message header. StreamBridge can be used with all binders, but some binders such as Solace can use the topic set in a header for better performance. Possible values are streamBridge and header. Default is streamBridge.","type":"string","default":"streamBridge"},"groupId":{"description":"The Maven group id. Alternatively you can set the specification extension info.x-group-id","type":"string","default":"com.company"},"host":{"description":"The host connection property. Currently this only works with the Solace binder. Example: tcp://myhost.com:55555.","type":"string","default":"tcp://localhost:55555"},"javaPackage":{"description":"The Java package of the generated classes. Alternatively you can set the specification extension info.x-java-package","type":"string"},"msgVpn":{"description":"The message vpn connection property. Currently this only works with the Solace binder.","type":"string","default":"default"},"parametersToHeaders":{"description":"If true, this will create headers on the incoming messages for each channel parameter. Currently this only works with messages originating from Solace (using the solace_destination header) and RabbitMQ (using the amqp_receivedRoutingKey header.)","type":"boolean","default":false},"password":{"description":"The client password connection property. Currently this only works with the Solace binder.","type":"string","default":"default"},"reactive":{"description":"If true, this will generate reactive style functions using the Flux class. Defalt: false.","type":"boolean","default":false},"solaceSpringCloudVersion":{"description":"The version of the solace-spring-cloud-bom dependency used when generating an application. Alternatively you can set the specification extension info.x-solace-spring-cloud-version.","type":"string","default":"2.1.0"},"springBootVersion":{"description":"The version of Spring Boot used when generating an application. Alternatively you can set the specification extension info.x-spring-booot-version. Example: 2.2.6.RELEASE.","type":"string","default":"2.4.7"},"springCloudVersion":{"description":"The version of the spring-cloud-dependencies BOM dependency used when generating an application. Alternatively you can set the specification extension info.x-spring-cloud-version. Example: Hoxton.RELEASE.","type":"string","default":"2020.0.3"},"springCloudStreamVersion":{"description":"The version of the spring-cloud-stream dependency specified in the Maven file, when generating a library. When generating an application, the spring-cloud-dependencies BOM is used instead. Example: 3.0.1.RELEASE","type":"string","default":"3.1.3"},"username":{"description":"The client username connection property. Currently this only works with the Solace binder","type":"string","default":"default"},"view":{"description":"The view that the template uses. By default it is the client view, which means that when the document says publish, we subscribe. In the case of the provider view, when the document says publish, we publish. Values are client or provider. The default is client.","type":"string","default":"client"},"useServers":{"description":"This option works when binder is kafka. By default it is set to false. When set to true, it will concatenate all the urls in the servers section as a list of brokers for kafka.","type":"string"}},"required":[],"additionalProperties":false}},"@asyncapi/java-spring-template":{"title":"Java Spring Project","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"inverseOperations":{"description":"Generate application that will publish messages to `publish` operation of channels and read messages from `subscribe` operation of channels. Literally this flag just swap `publish` and `subscribe` operations in channels.","type":"boolean","default":false},"disableEqualsHashCode":{"description":"Disable generation of equals and hashCode methods for model classes.","type":"boolean","default":false},"listenerPollTimeout":{"description":"Only for Kafka. Timeout to use when polling the consumer.","type":"number","default":3000},"listenerConcurrency":{"description":"Only for Kafka. Number of threads to run in the listener containers.","type":"number","default":3},"connectionTimeout":{"description":"Only for MQTT. This value, measured in seconds, defines the maximum time interval the client will wait for the network connection to the MQTT server to be established. The default timeout is 30 seconds. A value of 0 disables timeout processing meaning the client will wait until the network connection is made successfully or fails.","type":"number","default":30},"disconnectionTimeout":{"description":"Only for MQTT. The completion timeout in milliseconds when disconnecting. The default disconnect completion timeout is 5000 milliseconds.","type":"number","default":5000},"completionTimeout":{"description":"Only for MQTT. The completion timeout in milliseconds for operations. The default completion timeout is 30000 milliseconds.","type":"number","default":30000},"mqttClientId":{"description":"Only for MQTT. Provides the client identifier for the MQTT server. This parameter overrides the value of the clientId if it's set in the AsyncAPI file.","type":"string"},"asyncapiFileDir":{"description":"Parameter of @asyncapi/generator-hooks#createAsyncapiFile, allows to specify where original AsyncAPI file will be stored.","type":"string","default":"src/main/resources/api/"},"javaPackage":{"description":"The Java package of the generated classes. Alternatively you can set the specification extension info.x-java-package","type":"string","default":"com.asyncapi"},"addTypeInfoHeader":{"description":"Only for Kafka. Add type information to the message header","type":"boolean","default":true},"springBoot2":{"description":"Generate template files for the Spring Boot version 2. For kafka protocol it will also force to use spring-kafka 2.9.9","type":"boolean","default":false},"maven":{"description":"Generate pom.xml Maven build file instead of Gradle build","type":"boolean","default":false}},"required":[],"additionalProperties":false},"supportedProtocols":["kafka","amqp","mqtt"]},"@asyncapi/java-template":{"title":"Java Project","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"server":{"description":"The server you want to use in the code.","type":"string"},"asyncapiFileDir":{"description":"Custom location of the AsyncAPI file that you provided as an input in generation. By default it is located in the root of the output directory","type":"string"},"user":{"description":"Username for the server to generate code for","type":"string","default":"app"},"password":{"description":"Password for the server to generate code for","type":"string","default":"passw0rd"},"package":{"description":"Java package name for generated code","type":"string","default":"com.asyncapi"},"mqTopicPrefix":{"description":"MQ topic prefix. Used for ibmmq protocols. Default will work with dev MQ instance","type":"string","default":"dev//"}},"required":["server"],"additionalProperties":false},"supportedProtocols":["ibmmq","ibmmq-secure","kafka","kafka-secure"]},"@asyncapi/markdown-template":{"title":"Markdown Documentation","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"frontMatter":{"description":"The name of a JSON or YAML formatted file containing values to provide the YAML frontmatter for static-site or documentation generators. The file may contain {{title}} and {{version}} replaceable tags.","type":"string"},"outFilename":{"description":"The name of the output markdown file","type":"string","default":"asyncapi.md"},"toc":{"description":"Include a Table-of-Contents in the output markdown.","type":"boolean","default":true},"version":{"description":"Override the version of your application provided under `info.version` location in the specification file.","type":"string"}},"required":[],"additionalProperties":false}},"@asyncapi/nodejs-template":{"title":"NodeJS Project","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"server":{"description":"The server you want to use in the code.","type":"string"},"asyncapiFileDir":{"description":"Custom location of the AsyncAPI file that you provided as an input in generation. By default it is located in the root of the output directory","type":"string"},"securityScheme":{"description":"Name of the security scheme. Only scheme with X509 and Kafka protocol is supported for now.","type":"string"},"certFilesDir":{"description":"Directory where application certificates are located. This parameter is needed when you use X509 security scheme and your cert files are not located in the root of your application.","type":"string","default":"./"}},"required":["server"],"additionalProperties":false},"supportedProtocols":["amqp","mqtt","mqtts","kafka","kafka-secure","ws"]},"@asyncapi/nodejs-ws-template":{"title":"NodeJS WebSocket Project","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"server":{"description":"The server you want to use in the code.","type":"string"},"asyncapiFileDir":{"description":"Custom location of the AsyncAPI file that you provided as an input in generation. By default it is located in the root of the output directory","type":"string"}},"required":["server"],"additionalProperties":false},"supportedProtocols":["ws"]},"@asyncapi/python-paho-template":{"title":"Python Paho Project","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"view":{"description":"The view that the template uses. By default it is the client view, which means that when the document says publish, we subscribe. In the case of the provider view, when the document says publish, we publish. Values are client or provider. The default is client.","type":"string"}},"required":[],"additionalProperties":false}},"@asyncapi/ts-nats-template":{"title":"Typescript Nats Project","schema":{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"generateTestClient":{"description":"Generate the test client","type":"boolean","default":false},"promisifyReplyCallback":{"description":"Use promises as callbacks for reply operation","type":"boolean","default":false}},"required":[],"additionalProperties":false},"supportedProtocols":["nats"]}}
\ No newline at end of file
diff --git a/apps/studio-next/src/components/Modals/ImportBase64Modal.tsx b/apps/studio-next/src/components/Modals/ImportBase64Modal.tsx
new file mode 100644
index 000000000..64ee1d22a
--- /dev/null
+++ b/apps/studio-next/src/components/Modals/ImportBase64Modal.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { create } from '@ebay/nice-modal-react';
+
+import { ConfirmModal } from './index';
+
+import { useServices } from '../../services';
+
+export const ImportBase64Modal = create(() => {
+ const [base64, setBase64] = useState('');
+ const { editorSvc } = useServices();
+
+ const onSubmit = () => {
+ toast.promise(editorSvc.importBase64(base64), {
+ loading: 'Importing...',
+ success: (
+
+
+ Document succesfully imported!
+
+
+ ),
+ error: (
+
+
+ Failed to import document.
+
+
+ ),
+ });
+ };
+
+ return (
+
+
+