style(website): make Playground Mobile Responsive

modelina-website/package.json

@@ -21,6 +21,7 @@
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.9",
     "@tippyjs/react": "^4.2.6",
+    "clsx": "^2.1.1",
     "cssnano": "^5.1.14",
     "js-base64": "^3.7.4",
     "lodash": "^4.17.21",

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

@@ -20,6 +20,8 @@ interface LoadedState {
 }
 
 interface PlaygroundContextProps {
+  showInputEditor: boolean;
+  setShowInputEditor: Dispatch<SetStateAction<boolean>>;
   showOptions: boolean;
   setShowOptions: Dispatch<SetStateAction<boolean>>;
   showOutputNavigation: boolean;
@@ -50,9 +52,13 @@ interface PlaygroundContextProps {
   setRenderModels: (models: React.ReactNode) => void;
 }
 
-const PlaygroundContext = createContext<PlaygroundContextProps | undefined>(undefined);
+const PlaygroundContext = createContext<PlaygroundContextProps | undefined>(
+  undefined
+);
 
-export const PlaygroundContextProvider: React.FC<{ children: React.ReactNode; }> = ({ children }) => {
+export const PlaygroundContextProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
   const defaultConfig: ModelinaOptions = {
     language: 'typescript',
     propertyNamingFormat: 'default',
@@ -94,95 +100,108 @@ export const PlaygroundContextProvider: React.FC<{ children: React.ReactNode; }>
     kotlinPackageName: 'asyncapi.models'
   };
 
+  const [showInputEditor, setShowInputEditor] = useState(true);
   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 [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,
+    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 [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,
-  ]);
+  const contextValue = useMemo(
+    () => ({
+      showInputEditor,
+      setShowInputEditor,
+      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
+    }),
+    [
+      showInputEditor,
+      setShowInputEditor,
+      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('Playground was unable to load the context to display, please report this problem on GitHub.');
+    throw new Error(
+      'Playground was unable to load the context to display, please report this problem on GitHub.'
+    );
   }
   return context;
-};
+};