feat : add studio tour for first time user

apps/studio/package.json

@@ -36,6 +36,7 @@
     "@monaco-editor/react": "^4.4.6",
     "@stoplight/yaml": "^4.3.0",
     "@tippyjs/react": "^4.2.6",
+    "driver.js": "^1.3.1",
     "js-base64": "^3.7.3",
     "js-file-download": "^0.4.12",
     "js-yaml": "^4.1.0",
@@ -108,6 +109,7 @@
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "cross-env": "^7.0.3",
     "esbuild": "0.18.20",
+    "eslint-config-custom": "workspace:*",
     "https-browserify": "^1.0.0",
     "markdown-toc": "^1.2.0",
     "path-browserify": "^1.0.1",
@@ -123,8 +125,7 @@
     "url": "^0.11.0",
     "util": "^0.12.5",
     "web-vitals": "^3.1.0",
-    "webpack": "^5.75.0",
-    "eslint-config-custom": "workspace:*"
+    "webpack": "^5.75.0"
   },
   "jest": {
     "transformIgnorePatterns": [

apps/studio/src/App.tsx

@@ -1,9 +1,19 @@
 import { AsyncAPIStudio } from './studio';
 
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent } from "react";
+import { useEffect } from "react";
+import { driverObj } from "./helpers/driver";
 
 export const App: FunctionComponent = () => {
-  return (
-    <AsyncAPIStudio />
-  );
+  useEffect(() => {
+    const alreadyVisitedSession = sessionStorage.getItem("alreadyVisited");
+    const alreadyVisitedLocal = localStorage.getItem("alreadyVisited");
+    if (!alreadyVisitedSession && !alreadyVisitedLocal) {
+      sessionStorage.setItem("alreadyVisited", "true");
+      localStorage.setItem("alreadyVisited", "true");
+      driverObj.drive();
+    }
+  }, []);
+
+  return <AsyncAPIStudio />;
 };

apps/studio/src/components/Editor/Editor.tsx

@@ -21,7 +21,7 @@ export const Editor: React.FunctionComponent<EditorProps> = () => {
         size={editorHeight}
         defaultSize={editorHeight}
       >
-        <div className="flex flex-1 flex-col h-full overflow-hidden">
+        <div className="flex flex-1 flex-col h-full overflow-hidden" id="editor">
           <EditorSidebar />
           <MonacoWrapper />
         </div>

apps/studio/src/components/Editor/EditorSidebar.tsx

@@ -36,7 +36,7 @@ export const EditorSidebar: React.FunctionComponent<
         className="flex flex-row items-center"
         style={{ height: '30px', lineHeight: '30px' }}
       >
-        <div>
+        <div  id="editor-dropdown">
           <ul className="flex">
             <li>
               <ShareButton />

apps/studio/src/components/Navigationv3.tsx

@@ -327,7 +327,7 @@ export const Navigationv3: React.FunctionComponent<NavigationProps> = ({
 
   const components = document.components();
   return (
-    <div className={`flex flex-none flex-col overflow-y-auto overflow-x-hidden bg-gray-800 h-full ${className}`}>
+    <div className={`flex flex-none flex-col overflow-y-auto overflow-x-hidden bg-gray-800 h-full ${className}`}  id="information">
       <ul>
         <li className="mb-4">
           <div

apps/studio/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile, VscSettingsGear } from 'react-icons/vsc';
+import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile, VscSettingsGear,VscPlayCircle } from 'react-icons/vsc';
 import { show as showModal } from '@ebay/nice-modal-react';
 
 import { Tooltip } from './common';
@@ -8,6 +8,7 @@
 
 import type { FunctionComponent, ReactNode } from 'react';
 import type { PanelsState } from '../state/panels.state';
+import { driverObj } from '../helpers/driver';
 
 function updateState(panelName: keyof PanelsState['show'], type?: PanelsState['secondaryPanelType']) {
   const settingsState = panelsState.getState();
@@ -115,7 +116,7 @@
   navigation = navigation.filter(item => item.enabled);
 
   return (
-    <div className="flex flex-col bg-gray-800 shadow-lg border-r border-gray-700 justify-between">
+    <div className="flex flex-col bg-gray-800 shadow-lg border-r border-gray-700 justify-between" id="navbar">
       <div className="flex flex-col">
         {navigation.map(item => (
           <Tooltip content={item.tooltip} placement='right' hideOnClick={true} key={item.name}>
@@ -133,12 +134,23 @@
         ))}
       </div>
       <div className="flex flex-col">
+      <Tooltip content='Start Tour' placement='right' hideOnClick={true}>
+          <button
+            title="Start Tour"  
+            className='flex text-gray-500 hover:text-white focus:outline-none border-box p-4'
+            type="button"  
+            onClick={() => (driverObj.drive())}
+          >
+            <VscPlayCircle className="w-6 h-6" />
+          </button>
+        </Tooltip>
         <Tooltip content='Studio settings' placement='right' hideOnClick={true}>
           <button
             title="Studio settings"  
             className='flex text-gray-500 hover:text-white focus:outline-none border-box p-4'
             type="button"  
             onClick={() => showModal(SettingsModal)}
+            id="studio-setting"
           >
             <VscSettingsGear className="w-5 h-5" />
           </button>

apps/studio/src/components/Template/HTMLWrapper.tsx

@@ -59,7 +59,7 @@ export const HTMLWrapper: React.FunctionComponent<HTMLWrapperProps> = () => {
   return (
     parsedSpec && (
       <div className="flex flex-1 flex-col h-full overflow-hidden">
-        <div className="overflow-auto">
+        <div className="overflow-auto" id="html-preview">
           <AsyncApiComponentWP
             schema={parsedSpec}
             config={{ 

apps/studio/src/components/Terminal/Terminal.tsx

@@ -15,7 +15,7 @@ export const Terminal: React.FunctionComponent<TerminalProps> = () => {
   ];
 
   return (
-    <div className="bg-gray-800 border-t border-gray-700 flex-grow relative h-full overflow-hidden">
+    <div className="bg-gray-800 border-t border-gray-700 flex-grow relative h-full overflow-hidden" id="terminal">
       <TerminalTabs tabs={tabs} active="problems" />
     </div>
   );

apps/studio/src/components/Toolbar.tsx

@@ -9,7 +9,7 @@ export const Toolbar: React.FunctionComponent<ToolbarProps> = () => {
       <div className="px-2 border-b border-gray-700 bg-gray-800">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center">
-            <div className="flex-shrink-0 ml-1.5">
+            <div className="flex-shrink-0 ml-1.5" id="tour-example">
               <img
                 className="inline-block h-16"
                 src={`${process.env.PUBLIC_URL}/img/logo-studio.svg`}
@@ -20,6 +20,7 @@ export const Toolbar: React.FunctionComponent<ToolbarProps> = () => {
               </span>
             </div>
           </div>
+          <div id='communicate'>
           <ul className="flex items-center text-pink-500 mr-2">
             <li className="text-xl opacity-75 hover:opacity-100">
               <a href='https://asyncapi.com' title='AsyncAPI Website' target='_blank' rel="noreferrer">
@@ -37,6 +38,7 @@ export const Toolbar: React.FunctionComponent<ToolbarProps> = () => {
               </a>
             </li>
           </ul>
+          </div>
         </div>
       </div>
     </div>

apps/studio/src/helpers/driver.ts

@@ -0,0 +1,114 @@
+import { driver } from "driver.js";
+import "driver.js/dist/driver.css";
+
+export const driverObj = driver({
+  popoverClass: "driverjs-theme",
+  showProgress: true,
+  showButtons: ["next", "previous", "close"],
+  nextBtnText: "Next",
+  prevBtnText: "Back",
+
+  steps: [
+    {
+      element: "#tour-example",
+      popover: {
+        title: "Welcome to AsyncAPI Studio",
+        description:
+          "Discover a powerful tool for designing, documenting, and managing AsyncAPI-based applications. This tour will guide you through key features to enhance your API development workflow.",
+        side: "left",
+        align: "start",
+      },
+    },
+    {
+      element: "#navbar",
+      popover: {
+        title: "Control Center",
+        description:
+          "This controle center allows you to toggle the editor, information panel, and HTML preview on or off. It's also your gateway to creating new API templates for various protocols like Apache Kafka, WebSocket, HTTP, and more. Customize your workspace and jumpstart your API design process from here.",
+        side: "left",
+        align: "start",
+      },
+    },
+    {
+      element: "#information",
+      popover: {
+        title: "Information Panel",
+        description:
+          "Explore your API structure using this information panel. Quickly access Servers, Channels, Operations, Messages, and Schemas - the building blocks of your AsyncAPI specification.",
+        side: "left",
+        align: "start",
+      },
+    },
+    {
+      element: "#editor",
+      popover: {
+        title: "The Powerful Editor",
+        description:
+          "Create and edit your AsyncAPI documents with ease. Enjoy features like syntax highlighting, auto-completion, and real-time validation to streamline your API design process.",
+        side: "bottom",
+        align: "start",
+      },
+    },
+    {
+      element: "#editor-dropdown",
+      popover: {
+        title: "Share and Editor Options",
+        description:
+          "Collaborate on your work and access document management tools. Import, export, and convert your API specifications with just a few clicks.",
+        side: "top",
+        align: "start",
+      },
+    },
+    {
+      element: "#terminal",
+      popover: {
+        title: "Terminal",
+        description:
+          "Quickly identify and resolve issues in your specification. View errors, warnings, and helpful messages to ensure your API documentation is error-free.",
+        side: "bottom",
+        align: "start",
+      },
+    },
+    {
+      element: "#html-preview",
+      popover: {
+        title: "Instant HTML Preview",
+        description:
+          "See your API documentation come to life in real-time. This panel renders a human-readable version of your specification as you make changes.",
+        side: "top",
+        align: "start",
+      },
+    },
+    {
+      element: "#studio-setting",
+      popover: {
+        title: "Studio Settings",
+        description:
+          "Customize your AsyncAPI Studio experience. Adjust preferences and settings to tailor the tool to your workflow.",
+        side: "top",
+        align: "start",
+      },
+    },
+    {
+      element: "#communicate",
+      popover: {
+        title: "Join AsyncAPI Community",
+        description:
+          "Connect with fellow AsyncAPI developers. Join our Slack community to share ideas, get help, and stay updated on AsyncAPI news and events.",
+        side: "top",
+        align: "start",
+      },
+    },
+    {
+      element: "#Thank-you",
+      popover: {
+        title: "Thank You",
+        description:
+          "Thanks for exploring AsyncAPI Studio. We hope you find it valuable for your API projects. Feel free to reach out with any questions or feedback. Happy coding!",
+        side: "top",
+        align: "start",
+      },
+    },
+  ],
+});
+

apps/studio/src/main.css

@@ -112,4 +112,66 @@
 
 .tippy-box[data-placement^="right"] > .tippy-arrow:before {
   border-right-color: rgba(17, 24, 39) !important;
+}
+
+.driver-popover.driverjs-theme {
+  background-color: #1a1a1a;
+  border: 1px solid #333333;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.driver-popover.driverjs-theme .driver-popover-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #db2777;
+}
+
+.driver-popover.driverjs-theme .driver-popover-description {
+  font-size: 14px;
+  color: #cccccc;
+  font-family: sans-serif;
+}
+
+.driver-popover.driverjs-theme button {
+  background-color: #db2777 ;
+  color: #ffffff !important;
+  border: none !important;
+  font-size: 14px;
+  padding: 8px 20px;
+  border-radius: 4px;
+  margin-left: 10px;
+  text-shadow: none;
+  font-weight: bold;
+  text-align: center;
+}
+
+.driver-popover.driverjs-theme .driver-popover-close-btn {
+  color: #999999;
+  font-size: 20px;
+  background-color: transparent;
+  top: 13px;
+  right: 5px;
+  padding: 0%;
+}
+
+.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: #1a1a1a;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: #1a1a1a;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: #1a1a1a;
+}
+
+.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: #1a1a1a;
 }

apps/studio/src/state/other.state.ts

@@ -6,7 +6,7 @@ export type OtherState = {
 }
 
 export const otherState = create<OtherState>(() => ({
-  editorHeight: 'calc(100% - 36px)',
+  editorHeight: 'calc(100% - 161px)',
   templateRerender: false,
 }));