From c5d4b7bdef75c3554b6e0138506bf59846512cfe Mon Sep 17 00:00:00 2001
From: Adarsh <adarshrawat8304@gmail.com>
Date: Fri, 22 Mar 2024 06:48:45 +0000
Subject: [PATCH 1/2] feat: added resizable property in components

---
 modelina-website/package-lock.json            | 35 +++++++
 modelina-website/package.json                 |  2 +
 .../src/components/playground/Content.tsx     | 92 ++++++++++---------
 modelina-website/src/pages/playground.tsx     |  2 +-
 4 files changed, 87 insertions(+), 44 deletions(-)

diff --git a/modelina-website/package-lock.json b/modelina-website/package-lock.json
index 343dfd77d8..4ab3635aec 100644
--- a/modelina-website/package-lock.json
+++ b/modelina-website/package-lock.json
@@ -23,6 +23,7 @@
         "react-dom": "18.2.0",
         "react-icons": "^4.12.0",
         "react-markdown": "^8.0.7",
+        "react-resizable-panels": "^2.0.13",
         "react-syntax-highlighter": "15.5.0",
         "rehype-raw": "^6.1.1",
         "rehype-slug": "^5.1.0",
@@ -37,6 +38,7 @@
         "@types/node": "16.11.7",
         "@types/react": "18.0.27",
         "@types/react-dom": "18.0.10",
+        "@types/react-resizable": "^3.0.7",
         "@types/react-syntax-highlighter": "^15.5.6",
         "autoprefixer": "^10.4.13",
         "cross-env": "^7.0.3",
@@ -557,6 +559,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-resizable": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-3.0.7.tgz",
+      "integrity": "sha512-V4N7/xDUME+cxKya/A73MmFrHofTupVdE45boRxeA8HL4Q5pJh3AuG0FWCEy2GB84unIMSRISyEAS/GHWum9EQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-syntax-highlighter": {
       "version": "15.5.10",
       "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.10.tgz",
@@ -5547,6 +5558,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/react-resizable-panels": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.0.13.tgz",
+      "integrity": "sha512-DZxLv5Pc6rfuqkgQ+2JW3eLPiX3BgAAR38Cd0lXuCVHXEZLrD+3W4Nag5TqCoNgEM/4IUU9L/pLM2toOUOd6UQ==",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "15.5.0",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
@@ -7248,6 +7268,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-resizable": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-3.0.7.tgz",
+      "integrity": "sha512-V4N7/xDUME+cxKya/A73MmFrHofTupVdE45boRxeA8HL4Q5pJh3AuG0FWCEy2GB84unIMSRISyEAS/GHWum9EQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-syntax-highlighter": {
       "version": "15.5.10",
       "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.10.tgz",
@@ -10623,6 +10652,12 @@
         }
       }
     },
+    "react-resizable-panels": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.0.13.tgz",
+      "integrity": "sha512-DZxLv5Pc6rfuqkgQ+2JW3eLPiX3BgAAR38Cd0lXuCVHXEZLrD+3W4Nag5TqCoNgEM/4IUU9L/pLM2toOUOd6UQ==",
+      "requires": {}
+    },
     "react-syntax-highlighter": {
       "version": "15.5.0",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
diff --git a/modelina-website/package.json b/modelina-website/package.json
index 4806ccb794..d3fa5947c2 100644
--- a/modelina-website/package.json
+++ b/modelina-website/package.json
@@ -31,6 +31,7 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.12.0",
     "react-markdown": "^8.0.7",
+    "react-resizable-panels": "^2.0.13",
     "react-syntax-highlighter": "15.5.0",
     "rehype-raw": "^6.1.1",
     "rehype-slug": "^5.1.0",
@@ -45,6 +46,7 @@
     "@types/node": "16.11.7",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
+    "@types/react-resizable": "^3.0.7",
     "@types/react-syntax-highlighter": "^15.5.6",
     "autoprefixer": "^10.4.13",
     "cross-env": "^7.0.3",
diff --git a/modelina-website/src/components/playground/Content.tsx b/modelina-website/src/components/playground/Content.tsx
index 6e6f457185..daee98ca9b 100644
--- a/modelina-website/src/components/playground/Content.tsx
+++ b/modelina-website/src/components/playground/Content.tsx
@@ -8,6 +8,7 @@ import CustomError from '../CustomError';
 import OutputNavigation from './OutputNavigation';
 import { OptionsNavigation } from './OptionsNavigation';
 import GeneratedModelsComponent from './GeneratedModels';
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 interface ContentProps {
   setNewConfig: (config: string, configValue: any, updateCode?: boolean) => void;
@@ -37,53 +38,58 @@ export const Content: FunctionComponent<ContentProps> = ({ setNewConfig, setNewQ
 
   return (
     <div className="h-full w-full flex">
-      {/* OPTIONS & EDITOR */}
-      <div className="h-full w-[50%] flex">
-        {
-          showOptions && <div className={`bg-[#1f2937] text-white h-full w-[100%] md:w-[40%]`}>
-            <OptionsNavigation setNewConfig={setNewConfig} />
-          </div>
-        }
-        <div className={`h-full ${showOptions ? "w-[60%]" : "w-full"}`}>
-          <div className="max-xl:col-span-2 xl:grid-cols-1 h-full">
-            <div className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold">
-              <MonacoEditorWrapper
-                value={input}
-                onChange={(_, change) => {
-                  setInput(change);
-                  generateNewCode(change);
-                }}
-                editorDidMount={() => {
-                  setLoaded({ ...loaded, editorLoaded: true });
-                }}
-                language="json"
-              />
+      <PanelGroup direction="horizontal">
+        {/* OPTIONS & EDITOR */}
+        <Panel className="flex flex-row" id="left-panel">
+          {
+            showOptions && 
+            <div className={`bg-[#1f2937] text-white h-full w-[100%] md:w-[40%]`}>
+              <OptionsNavigation setNewConfig={setNewConfig} />
+            </div>
+          }
+          <div className={`h-full w-full`}>
+            <div className="max-xl:col-span-2 xl:grid-cols-1 h-full">
+              <div className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold">
+                <MonacoEditorWrapper
+                  value={input}
+                  onChange={(_, change) => {
+                    setInput(change);
+                    generateNewCode(change);
+                  }}
+                  editorDidMount={() => {
+                    setLoaded({ ...loaded, editorLoaded: true });
+                  }}
+                  language="json"
+                />
+              </div>
             </div>
           </div>
-        </div>
-      </div>
+        </Panel>
 
-      {/* OUTPUT NAVIGATION AND OUTPUTS */}
-      <div className="h-full w-[50%] flex">
-        {
-          showOutputNavigation && <div className='h-full w-[100%] md:w-[30%]'>
-            <OutputNavigation />
-          </div>
-        }
-        <div className={`h-full ${showOutputNavigation ? "w-[70%]" : "w-full"}`}>
-          <div className={`h-full`}>
-            {error ? (
-              <CustomError statusCode={statusCode} errorMessage={errorMessage} />
-            ) : (
-              <PlaygroundGeneratedContext.Provider
-                value={PlaygroundGeneratedContextValue}
-              >
-                <GeneratedModelsComponent setNewQuery={setNewQuery} />
-              </PlaygroundGeneratedContext.Provider>
-            )}
+        <PanelResizeHandle />
+
+        {/* OUTPUT NAVIGATION AND OUTPUTS */}
+        <Panel className="flex flex-row" id="right-panel" minSize={4}>  
+          {
+            showOutputNavigation && <div className='h-full w-[100%] md:w-[30%]'>
+              <OutputNavigation />
+            </div>
+          }
+          <div className={`h-full ${showOutputNavigation ? "w-[70%]" : "w-full"}`}>
+            <div className={`h-full`}>
+              {error ? (
+                <CustomError statusCode={statusCode} errorMessage={errorMessage} />
+              ) : (
+                <PlaygroundGeneratedContext.Provider
+                  value={PlaygroundGeneratedContextValue}
+                >
+                  <GeneratedModelsComponent setNewQuery={setNewQuery} />
+                </PlaygroundGeneratedContext.Provider>
+              )}
+            </div>
           </div>
-        </div>
-      </div>
+        </Panel>
+      </PanelGroup>
     </div>
   );
 };
diff --git a/modelina-website/src/pages/playground.tsx b/modelina-website/src/pages/playground.tsx
index 19c97605de..13ee4cff22 100644
--- a/modelina-website/src/pages/playground.tsx
+++ b/modelina-website/src/pages/playground.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { useEffect, useState } from 'react';
 import Playground from '@/components/playground/Playground';
 import GenericLayout from '@/components/layouts/GenericLayout';

From 92dd00ddacf12889197f572feefe61352c3c2740 Mon Sep 17 00:00:00 2001
From: Adarsh <adarshrawat8304@gmail.com>
Date: Tue, 26 Mar 2024 17:04:49 +0000
Subject: [PATCH 2/2] feat : added requested changes
 https://github.com/asyncapi/modelina/pull/1908#issuecomment-2019916486

---
 .../src/components/playground/Content.tsx     | 55 ++++++++++---------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/modelina-website/src/components/playground/Content.tsx b/modelina-website/src/components/playground/Content.tsx
index daee98ca9b..670cd8da44 100644
--- a/modelina-website/src/components/playground/Content.tsx
+++ b/modelina-website/src/components/playground/Content.tsx
@@ -39,14 +39,15 @@ export const Content: FunctionComponent<ContentProps> = ({ setNewConfig, setNewQ
   return (
     <div className="h-full w-full flex">
       <PanelGroup direction="horizontal">
-        {/* OPTIONS & EDITOR */}
+        {/* OPTIONS */}
+        {
+          showOptions && 
+          <div className={`bg-[#1f2937] text-white h-full w-[20%]`}>
+            <OptionsNavigation setNewConfig={setNewConfig} />
+          </div>
+        }
+        {/* EDITOR */}
         <Panel className="flex flex-row" id="left-panel">
-          {
-            showOptions && 
-            <div className={`bg-[#1f2937] text-white h-full w-[100%] md:w-[40%]`}>
-              <OptionsNavigation setNewConfig={setNewConfig} />
-            </div>
-          }
           <div className={`h-full w-full`}>
             <div className="max-xl:col-span-2 xl:grid-cols-1 h-full">
               <div className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold">
@@ -66,27 +67,27 @@ export const Content: FunctionComponent<ContentProps> = ({ setNewConfig, setNewQ
           </div>
         </Panel>
 
-        <PanelResizeHandle />
+        <PanelResizeHandle className="w-1.5 bg-blue-700" />
 
-        {/* OUTPUT NAVIGATION AND OUTPUTS */}
-        <Panel className="flex flex-row" id="right-panel" minSize={4}>  
-          {
-            showOutputNavigation && <div className='h-full w-[100%] md:w-[30%]'>
-              <OutputNavigation />
-            </div>
-          }
-          <div className={`h-full ${showOutputNavigation ? "w-[70%]" : "w-full"}`}>
-            <div className={`h-full`}>
-              {error ? (
-                <CustomError statusCode={statusCode} errorMessage={errorMessage} />
-              ) : (
-                <PlaygroundGeneratedContext.Provider
-                  value={PlaygroundGeneratedContextValue}
-                >
-                  <GeneratedModelsComponent setNewQuery={setNewQuery} />
-                </PlaygroundGeneratedContext.Provider>
-              )}
-            </div>
+        {/* OUTPUT NAVIGATION */}
+        {
+          showOutputNavigation && 
+          <div className='h-full w-[20%]'>
+            <OutputNavigation />
+          </div>
+        }
+        {/* OUTPUTS */}
+        <Panel className="flex flex-row" id="right-panel">  
+          <div className={`h-full w-full`}>
+            {error ? (
+              <CustomError statusCode={statusCode} errorMessage={errorMessage} />
+            ) : (
+              <PlaygroundGeneratedContext.Provider
+                value={PlaygroundGeneratedContextValue}
+              >
+                <GeneratedModelsComponent setNewQuery={setNewQuery} />
+              </PlaygroundGeneratedContext.Provider>
+            )}
           </div>
         </Panel>
       </PanelGroup>