chore(website): create new playground layout

modelina-website/package.json

@@ -20,6 +20,7 @@
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.9",
+    "@tippyjs/react": "^4.2.6",
     "cssnano": "^5.1.14",
     "js-base64": "^3.7.4",
     "lodash": "^4.17.21",
@@ -28,6 +29,7 @@
     "postcss": "^8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.12.0",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "15.5.0",
     "rehype-raw": "^6.1.1",

modelina-website/src/components/CodeBlock.tsx

@@ -224,7 +224,7 @@ export default function CodeBlock({
               className: 'pl-2 float-left left-0 sticky bg-code-editor-dark',
               style: {}
             }}
-            lineNumberProps={(lineNumber: any) => {
+            linenumberprops={(lineNumber: any) => {
               const isHighlighted = highlightedLines?.includes(lineNumber) || false;
               return {
                 className: `${

modelina-website/src/components/InfoModal.tsx

@@ -5,7 +5,7 @@ interface InfoModalProps {
     children: React.ReactNode;
 }
 
-export default function InfoModal(props: InfoModalProps){
+export default function InfoModal(props: InfoModalProps) {
 
     const [showModal, setShowModal] = useState(false);
 
@@ -21,24 +21,24 @@ export default function InfoModal(props: InfoModalProps){
 
     const MyModal = () => {
         return (
-            <>  
-                <div className='fixed inset-0 bg-black bg-opacity-10' onClick={onCloseModal}></div>
-                <div className='fixed max-w-[45rem] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-2 rounded-md'>
-                    <div className=' px-3 py-2 text-sm font-mono'>
+            <>
+                <div className='fixed inset-0 bg-black bg-opacity-10' onClick={onCloseModal} style={{ zIndex: 1000 }}></div>
+                <div className='fixed max-w-[45rem] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white text-black p-2 rounded-md' style={{ zIndex: 1001 }}>
+                    <div className='px-3 py-2 text-sm font-mono'>
                         <div className=' flex justify-between mb-3'><h2>{props.text}</h2><button onClick={onCloseModal} className='p-1 px-2 -mt-1 -mr-2 border-2 border-slate-200 items-center justify-center aspect-1 text-xs rounded-full'><p>X</p></button></div>
                         <div className="max-h-64 overflow-y-auto min-w-40">
                             {props.children}
-                        </div>    
+                        </div>
                     </div>
                 </div>
             </>
         )
     }
 
-    return(
+    return (
         <>
             <button onClick={onOpenModal}>
-                <div className=' p-1 bg-slate-50 -ml-6 mr-2 rounded-full'>
+                <div className='p-1 bg-slate-600 w-5 h-5 flex justify-center items-center rounded-full'>
                     <svg
                         className=" "
                         width="7"
@@ -54,7 +54,7 @@ export default function InfoModal(props: InfoModalProps){
                     </svg>
                 </div>
             </button>
-            {showModal && <MyModal/>}
+            {showModal && <MyModal />}
         </>
     )
 

modelina-website/src/components/contexts/PlaygroundContext.tsx

@@ -0,0 +1,185 @@
+'use client';
+import React, {
+  createContext,
+  useContext,
+  Dispatch,
+  SetStateAction,
+  useState,
+  useMemo
+} from 'react';
+import { defaultAsyncapiDocument, ModelinaOptions } from '@/types';
+
+interface ModelsGeneratorProps {
+  code: string;
+  name: string;
+}
+
+interface LoadedState {
+  editorLoaded: boolean;
+  hasReceivedCode: boolean;
+}
+
+interface PlaygroundContextProps {
+  showOptions: boolean;
+  setShowOptions: Dispatch<SetStateAction<boolean>>;
+  showOutputNavigation: boolean;
+  setShowOutputNavigation: Dispatch<SetStateAction<boolean>>;
+  config: ModelinaOptions;
+  setConfig: Dispatch<SetStateAction<ModelinaOptions>>;
+  input: string;
+  setInput: Dispatch<SetStateAction<string>>;
+  models: ModelsGeneratorProps[];
+  setModels: Dispatch<SetStateAction<ModelsGeneratorProps[]>>;
+  generatorCode: string;
+  setGeneratorCode: Dispatch<SetStateAction<string>>;
+  loaded: LoadedState;
+  setLoaded: Dispatch<SetStateAction<LoadedState>>;
+  showGeneratorCode: boolean;
+  setShowGeneratorCode: Dispatch<SetStateAction<boolean>>;
+  error: boolean;
+  setError: Dispatch<SetStateAction<boolean>>;
+  statusCode: number;
+  setStatusCode: Dispatch<SetStateAction<number>>;
+  errorMessage: string;
+  setErrorMessage: Dispatch<SetStateAction<string>>;
+  isLoaded: boolean;
+  setIsLoaded: Dispatch<SetStateAction<boolean>>;
+  hasLoadedQuery: boolean;
+  setHasLoadedQuery: Dispatch<SetStateAction<boolean>>;
+  renderModels: React.ReactNode | null;
+  setRenderModels: (models: React.ReactNode) => void;
+}
+
+const PlaygroundContext = createContext<PlaygroundContextProps | undefined>(undefined);
+
+export const PlaygroundContextProvider: React.FC<{ children: React.ReactNode; }> = ({ children }) => {
+  const defaultConfig: ModelinaOptions = {
+    language: 'typescript',
+    propertyNamingFormat: 'default',
+    modelNamingFormat: 'default',
+    enumKeyNamingFormat: 'default',
+    indentationType: 'spaces',
+    showTypeMappingExample: false,
+    tsMarshalling: false,
+    tsModelType: 'class',
+    tsEnumType: 'enum',
+    tsModuleSystem: 'CJS',
+    tsIncludeDescriptions: false,
+    tsIncludeExampleFunction: false,
+    tsIncludeJsonBinPack: false,
+    csharpArrayType: 'Array',
+    csharpAutoImplemented: false,
+    csharpOverwriteHashcode: false,
+    csharpIncludeJson: false,
+    csharpOverwriteEqual: false,
+    csharpIncludeNewtonsoft: false,
+    csharpNamespace: 'asyncapi.models',
+    csharpNullable: false,
+    phpIncludeDescriptions: false,
+    phpNamespace: 'AsyncAPI/Models',
+    cplusplusNamespace: 'AsyncapiModels',
+    javaPackageName: 'asyncapi.models',
+    javaIncludeJackson: false,
+    javaIncludeMarshaling: false,
+    javaArrayType: 'Array',
+    javaOverwriteHashcode: false,
+    javaOverwriteEqual: false,
+    javaOverwriteToString: false,
+    javaJavaDocs: false,
+    javaJavaxAnnotation: false,
+    goPackageName: 'asyncapi.models',
+    kotlinPackageName: 'asyncapi.models'
+  };
+
+  const [showOptions, setShowOptions] = useState(true);
+  const [showOutputNavigation, setShowOutputNavigation] = useState(true);
+  const [config, setConfig] = useState<ModelinaOptions>(defaultConfig);
+  const [input, setInput] = useState(JSON.stringify(defaultAsyncapiDocument, null, 4));
+  const [models, setModels] = useState<ModelsGeneratorProps[]>([]);
+  const [generatorCode, setGeneratorCode] = useState('');
+  const [loaded, setLoaded] = useState({
+    editorLoaded: false,
+    hasReceivedCode: false,
+  });
+  const [showGeneratorCode, setShowGeneratorCode] = useState(false);
+  const [error, setError] = useState(false);
+  const [statusCode, setStatusCode] = useState(400);
+  const [errorMessage, setErrorMessage] = useState('Bad Request');
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasLoadedQuery, setHasLoadedQuery] = useState(false);
+  const [renderModels, setRenderModels] = React.useState<React.ReactNode | null>(null);
+
+  const contextValue = useMemo(() => ({
+    showOptions,
+    setShowOptions,
+    showOutputNavigation,
+    setShowOutputNavigation,
+    config,
+    setConfig,
+    input,
+    setInput,
+    models,
+    setModels,
+    generatorCode,
+    setGeneratorCode,
+    loaded,
+    setLoaded,
+    showGeneratorCode,
+    setShowGeneratorCode,
+    error,
+    setError,
+    statusCode,
+    setStatusCode,
+    errorMessage,
+    setErrorMessage,
+    isLoaded,
+    setIsLoaded,
+    hasLoadedQuery,
+    setHasLoadedQuery,
+    renderModels,
+    setRenderModels
+  }), [
+    showOptions,
+    setShowOptions,
+    showOutputNavigation,
+    setShowOutputNavigation,
+    config,
+    setConfig,
+    input,
+    setInput,
+    models,
+    setModels,
+    generatorCode,
+    setGeneratorCode,
+    loaded,
+    setLoaded,
+    showGeneratorCode,
+    setShowGeneratorCode,
+    error,
+    setError,
+    statusCode,
+    setStatusCode,
+    errorMessage,
+    setErrorMessage,
+    isLoaded,
+    setIsLoaded,
+    hasLoadedQuery,
+    setHasLoadedQuery,
+    renderModels,
+    setRenderModels,
+  ]);
+
+  return (
+    <PlaygroundContext.Provider value={contextValue}>
+      {children}
+    </PlaygroundContext.Provider>
+  );
+}
+
+export const usePlaygroundContext = () => {
+  const context = useContext(PlaygroundContext);
+  if (!context) {
+    throw new Error('usePlaygroundContext must be used within a PlaygroundContextProvider');
+  }
+  return context;
+};