web/package.json

@@ -1,50 +1,51 @@
-{
-  "name": "web",
-  "version": "0.0.0",
-  "private": true,
-  "browserslist": {
-    "development": [
-      "last 1 version"
-    ],
-    "production": [
-      "defaults",
-      "not IE 11",
-      "not IE_Mob 11"
-    ]
-  },
-  "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@redwoodjs/auth": "^0.26.2",
-    "@redwoodjs/forms": "^0.26.2",
-    "@redwoodjs/router": "^0.26.2",
-    "@redwoodjs/web": "^0.26.2",
-    "cloudinary-react": "^1.6.7",
-    "controlkit": "^0.1.9",
-    "get-active-classes": "^0.0.11",
-    "golden-layout": "^1.5.9",
-    "gotrue-js": "^0.9.27",
-    "jquery": "^3.5.1",
-    "monaco-editor": "^0.20.0",
-    "monaco-editor-webpack-plugin": "^1.9.1",
-    "netlify-identity-widget": "^1.9.1",
-    "opencascade.js": "^0.1.15",
-    "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-dropzone": "^11.2.1",
-    "react-ga": "^3.3.0",
-    "react-helmet": "^6.1.0",
-    "react-image-crop": "^8.6.6",
-    "rich-markdown-editor": "^11.0.2",
-    "styled-components": "^5.2.0",
-    "three": "^0.118.3"
-  },
-  "devDependencies": {
-    "autoprefixer": "9.8.6",
-    "html-webpack-plugin": "^4.5.0",
-    "opentype.js": "^1.3.3",
-    "postcss-loader": "4.0.2",
-    "tailwindcss": "^1.9.1",
-    "worker-loader": "^3.0.7"
-  }
-}
+{
+  "name": "web",
+  "version": "0.0.0",
+  "private": true,
+  "browserslist": {
+    "development": [
+      "last 1 version"
+    ],
+    "production": [
+      "defaults",
+      "not IE 11",
+      "not IE_Mob 11"
+    ]
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@redwoodjs/auth": "^0.26.2",
+    "@redwoodjs/forms": "^0.26.2",
+    "@redwoodjs/router": "^0.26.2",
+    "@redwoodjs/web": "^0.26.2",
+    "cloudinary-react": "^1.6.7",
+    "controlkit": "^0.1.9",
+    "get-active-classes": "^0.0.11",
+    "golden-layout": "^1.5.9",
+    "gotrue-js": "^0.9.27",
+    "jquery": "^3.5.1",
+    "monaco-editor": "^0.20.0",
+    "monaco-editor-webpack-plugin": "^1.9.1",
+    "netlify-identity-widget": "^1.9.1",
+    "opencascade.js": "^0.1.15",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-dropzone": "^11.2.1",
+    "react-ga": "^3.3.0",
+    "react-helmet": "^6.1.0",
+    "react-image-crop": "^8.6.6",
+    "react-mosaic-component": "^4.1.1",
+    "rich-markdown-editor": "^11.0.2",
+    "styled-components": "^5.2.0",
+    "three": "^0.118.3"
+  },
+  "devDependencies": {
+    "autoprefixer": "9.8.6",
+    "html-webpack-plugin": "^4.5.0",
+    "opentype.js": "^1.3.3",
+    "postcss-loader": "4.0.2",
+    "tailwindcss": "^1.9.1",
+    "worker-loader": "^3.0.7"
+  }
+}

web/src/components/IdeContainer/IdeContainer.js

@@ -1,18 +1,35 @@
-import IdeEditor from 'src/components/IdeEditor'
-import IdeViewer from 'src/components/IdeViewer'
-import IdeConsole from 'src/components/IdeConsole'
-
-const IdeContainer = () => {
-  return (
-    <div className="p-8 border-2">
-      <h2>hi I'm IDE container</h2>
-      <div className="flex">
-        <IdeEditor />
-        <IdeViewer />
-        <IdeConsole />
-      </div>
-    </div>
-  )
-}
-
-export default IdeContainer
+import IdeEditor from 'src/components/IdeEditor'
+import IdeViewer from 'src/components/IdeViewer'
+import IdeConsole from 'src/components/IdeConsole'
+import { Mosaic, MosaicWindow } from 'react-mosaic-component'
+import 'react-mosaic-component/react-mosaic-component.css'
+
+const ELEMENT_MAP = {
+  Editor: <IdeEditor/>,
+  Viewer: <IdeViewer/>,
+  Console: <IdeConsole/>,
+}
+
+const IdeContainer = () => {
+  return (<div className='h-screen'>
+    <Mosaic
+      renderTile={ (id, path) => (
+        <MosaicWindow path={path} title={id}>
+          { ELEMENT_MAP[id] }
+        </MosaicWindow>
+      )}
+      initialValue={{
+        direction: 'row',
+        first: 'Editor',
+        second: {
+          direction: 'column',
+          first: 'Viewer',
+          second: 'Console',
+          splitPercentage: 70,
+        },
+      }}
+    />
+  </div>)
+}
+
+export default IdeContainer