feat: move template selection into modal UI

src/components/Content.tsx

@@ -4,7 +4,7 @@ import SplitPane from 'react-split-pane';
 import { Editor } from './Editor/Editor';
 import { Navigation } from './Navigation';
 import { Template } from './Template';
-import NewFile from './NewFile';
+import { NewFileModal } from './Modals/NewFileModal';
 import { VisualiserTemplate } from './Visualiser';
 
 import { debounce } from '../helpers';
@@ -50,31 +50,28 @@ export const Content: React.FunctionComponent<ContentProps> = () => { // eslint-
   return (
     <div className="flex flex-1 flex-row relative">
       <div className="flex flex-1 flex-row relative">
-        {newFileEnabled && <NewFile />}
-
-        {!newFileEnabled && 
-          <SplitPane
-            size={viewEnabled ? secondPaneSize : 0}
-            minSize={0}
-            maxSize={secondPaneMaxSize}
-            pane1Style={
-              navigationEnabled || editorEnabled ? undefined : { width: '0px' }
-            }
-            pane2Style={
-              viewEnabled ? { overflow: 'auto' } : { width: '0px' }
-            }
-            primary={viewEnabled ? 'first' : 'second'}
-            defaultSize={localStorageRightPaneSize}
-            onChange={debounce((size: string) => {
-              localStorage.setItem(splitPosRight, String(size));
-            }, 100)}
-          >
-            {navigationAndEditor}
-            {viewType === 'template' && <Template />}
-            {viewType === 'visualiser' && <VisualiserTemplate />}
-          </SplitPane> 
-        }
+        {newFileEnabled && <NewFileModal />}
+        <SplitPane
+          size={viewEnabled ? secondPaneSize : 0}
+          minSize={0}
+          maxSize={secondPaneMaxSize}
+          pane1Style={
+            navigationEnabled || editorEnabled ? undefined : { width: '0px' }
+          }
+          pane2Style={
+            viewEnabled ? { overflow: 'auto' } : { width: '0px' }
+          }
+          primary={viewEnabled ? 'first' : 'second'}
+          defaultSize={localStorageRightPaneSize}
+          onChange={debounce((size: string) => {
+            localStorage.setItem(splitPosRight, String(size));
+          }, 100)}
+        >
+          {navigationAndEditor}
+          {viewType === 'template' && <Template />}
+          {viewType === 'visualiser' && <VisualiserTemplate />}
+        </SplitPane> 
       </div>
     </div>
   );
-};
+};

src/components/Modals/ConfirmModal.tsx

@@ -9,6 +9,7 @@ interface ConfirmModalProps {
   cancelDisabled?: boolean;
   opener?: React.ReactNode;
   show?: boolean;
+  containerClassName? : string;
   onSubmit?: () => void;
   onCancel?: () => void;
 }
@@ -25,6 +26,7 @@ export const ConfirmModal: React.FunctionComponent<ConfirmModalProps> = ({
   onCancel = () => {
     // This is intentional
   },
+  containerClassName,
   children,
 }) => {
   const [showModal, setShowModal] = useState(show);
@@ -86,7 +88,7 @@ export const ConfirmModal: React.FunctionComponent<ConfirmModalProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full sm:p-6">
+              <div className={`inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full sm:p-6 ${containerClassName}`}>
                 <div>
                   <div>
                     <Dialog.Title

src/components/Modals/NewFileModal.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { BsFillCheckCircleFill } from 'react-icons/bs';
+import toast from 'react-hot-toast';
+
+import { ConfirmModal } from './index';
+import examples from '../../examples';
+import { EditorService } from '../../services';
+import state from '../../state';
+
+export const NewFileModal: React.FunctionComponent = () => {
+  const sidebarState = state.useSidebarState();
+  const [selectedTemplate, setSelectedTemplate] = useState({ title: '', template: '' });
+
+  const handleSubmit = () => {
+    EditorService.updateState({ content: selectedTemplate.template, updateModel: true });
+    const panels = state.sidebar.panels;
+    panels.merge({
+      newFile: false,
+    });
+
+    toast.success(
+      <div>
+        <span className="block text-bold">
+          Succesfully reused the {`"${selectedTemplate.title}"`} template.
+        </span>
+      </div>
+    );
+  };
+
+  const realLifeExamples = examples.filter((template) => template.type === 'real-example');
+  const templates = examples.filter((template) => template.type === 'protocol-example');
+
+  return (
+    <ConfirmModal containerClassName="sm:max-w-6xl" onCancel={() => sidebarState.panels.newFile.set(false)} title="AsyncAPI Templates - Start with our template examples" confirmText="Use Template" confirmDisabled={false} show={true} onSubmit={handleSubmit}>
+      <div className="flex content-center justify-center">
+        <div className="w-full  overflow-auto space-y-8 ">
+          <div>
+            <span className="uppercase text-gray-800 text-sm underline font-bold">Templates</span>
+            <div className="grid grid-cols-3 gap-4 py-4">
+              {templates.map(({ title, description: Description, template }) => {
+                const isSelected = selectedTemplate.title === title;
+                const containerStyles = isSelected ? 'border-pink-500' : 'border-gray-200';
+                const textStyles = isSelected ? 'text-pink-600' : 'text-gray-600';
+
+                return (
+                  <button
+                    onClick={() => setSelectedTemplate({ title, template })}
+                    key={title}
+                    className={`group text-left flex flex-col cursor-pointer rounded-lg p-4 pb-6 border-2 hover:border-pink-500 ${containerStyles}`}
+                  >
+                    <div className="flex justify-between w-full">
+                      <span className={`block text-md  font-bold leading-0 group-hover:text-pink-600 ${textStyles} `}>{title}</span>
+                      {isSelected && <BsFillCheckCircleFill className="w-5 h-5 text-pink-600" />}
+                    </div>
+                    <span className="block text-sm text-gray-500 font-light mt-1 group-hover:text-gray-900">
+                      <Description />
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          <div>
+            <span className="uppercase text-gray-800 text-sm underline font-bold">Real world Examples</span>
+            <div className="grid grid-cols-3 gap-4 py-4">
+              {realLifeExamples.map(({ title, description: Description, template }) => {
+                const isSelected = selectedTemplate.title === title;
+                const containerStyles = isSelected ? 'border-pink-500' : 'border-gray-200';
+                const textStyles = isSelected ? 'text-pink-600' : 'text-gray-600';
+
+                return (
+                  <button
+                    onClick={() => setSelectedTemplate({ title, template })}
+                    key={title}
+                    className={`group text-left flex flex-col cursor-pointer rounded-lg p-4 pb-6 border-2 border-gray-200  hover:border-pink-500 ${containerStyles}`}
+                  >
+                    <div className="flex justify-between w-full">
+                      <span className={`block text-md  font-bold leading-0 group-hover:text-pink-600 ${textStyles} `}>{title}</span>
+                      {isSelected && <BsFillCheckCircleFill className="w-5 h-5 text-pink-600" />}
+                    </div>
+                    <span className="block text-sm text-gray-500 font-light mt-1 group-hover:text-gray-900">
+                      <Description />
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          <span className=" text-xs block text-gray-900 text-right ">
+            Don&apos;t see what you&apos;re looking for? <br />
+            <a
+              target="_blank"
+              href="https://github.com/asyncapi/studio/issues/new?assignees=&labels=enhancement&template=enhancement.md&title=Template%20Request:%20{%20template%20name%20and%20type%20}"
+              className="underline text-pink-500"
+              rel="noreferrer"
+            >
+              Request a template or add one to the list &rarr;
+            </a>
+          </span>
+        </div>
+      </div>
+    </ConfirmModal>
+  );
+};

src/components/Sidebar.tsx

@@ -90,7 +90,7 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = () => {
     // newFile
     {
       name: 'newFile',
-      state: () => sidebarState.panels.newFile.get(),
+      state: () => false,
       icon: <VscNewFile className="w-5 h-5" />,
     },
   ];

src/examples/index.tsx

@@ -22,12 +22,6 @@ export default [
     template: simple,
     type: templateTypes.protocol
   },
-  {
-    title: 'Simple Hello World',
-    description: () => <>A basic example of a service that is in charge of processing user signups. Great place to start learning AsyncAPI.</>,
-    template: simple,
-    type: templateTypes.protocol
-  },
   {
     title: 'Apache Kafka',
     description: () => <>A framework implementation of a software bus using stream-processing. Open Source developed by the Apache Software Foundation.</>,