Merge pull request #23 from MetaCell/feature/18-new

Feature/18 Layout, Side dock, Header , initial frontend setup

package.json

@@ -4,20 +4,21 @@
   "main": "public/electron.js",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
-    "@material-ui/core": "4.12.1",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.4",
+    "@mui/styles": "^5.8.4",
     "@projectstorm/react-diagrams": "^6.6.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.5.0",
     "ajv": "^6.12.6",
     "closest": "0.0.1",
+    "css-loader": "^6.7.1",
     "dagre": "^0.8.5",
     "electron-debug": "^3.2.0",
     "electron-is-dev": "^1.2.0",

src/App.css

@@ -51,8 +51,8 @@
   position: absolute;
   top: 50px;
   left: 0px;
-  height: 100%;
-  width: 100%;
+  height: 92vh;
+  width: 100vw;
   background-color: gray;
   margin-top: 5px;
 }

src/App.js

@@ -1,14 +1,17 @@
 import './App.css';
-import Main from './components/Main';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from './theme';
+import Layout from './components/common/Layout';
+import Loader from './components/common/Loader';
 
 function App() {
   return (
-    <div className="App">
-      <div className="topBar"></div>
-      <div className="main">
-        <Main />
-      </div>
-    </div>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Layout />
+      {/* <Loader /> */}
+    </ThemeProvider>
   );
 }
 

src/assets/styles/variables.js

@@ -0,0 +1,37 @@
+const vars = {
+  fontFamily: 'Inter, sans-serif',
+  primaryBg: '#f1f1f1',
+  textWhite: '#FFFFFF',
+  chipTextColor: '#F2F2F7',
+  chipBgColor: 'rgba(60, 60, 67, 0.4)',
+
+  chipPrimaryTextColor: 'rgba(255, 255, 255, 0.8)',
+  chipPrimaryBgColor: 'rgba(0, 122, 255, 0.6)',
+
+  breadcrumbLinkColor: '#A2A2A2',
+  breadcrumbTextColor: '#292929',
+
+  buttonPrimaryBgColor: '4353FF',
+  buttonPrimaryBgHoverColor: '#3443E1',
+  buttonPrimaryDisabledBgColor: 'rgba(0, 122, 255, 0.4)',
+
+  listItemActiveBg: '#007AFF',
+  listSelectedTextColor: '#3C3C43',
+  listBoxShadow: '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.12), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.04)',
+  listBorderColor: 'rgba(0, 0, 0, 0.04)',
+
+  dividerColor: 'rgba(118, 120, 125, 0.12)',
+
+  dropdownBg: 'rgba(246, 246, 248, 0.8)',
+  dropdownTextColor: 'rgba(60, 60, 67, 0.6)',
+
+  overlayColor: 'rgba(0, 0, 0, 0.4)',
+
+  progressBg: '#E5E5E5',
+  progressBar: '#017AFF',
+  progressShadow: 'inset 0 0 0.0625rem #E3E3E3',
+
+  switchShadow: '0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06)'
+};
+
+export default vars;

src/components/Main.js

@@ -21,12 +21,12 @@ export default class Main extends React.Component {
 	var model = new DiagramModel();
 
 	//3-A) create a default node
-	var node1 = new JSCustomNodeModel({
-		name: 'Node 1',
-		color: 'rgb(0,192,255)',
-        pnlClass: 'ProcessingMechanism',
-		shape: 'default'
-	});
+	// var node1 = new JSCustomNodeModel({
+	// 	name: 'Node 1',
+	// 	color: 'rgb(0,192,255)',
+    //     pnlClass: 'ProcessingMechanism',
+	// 	shape: 'default'
+	// });
 
 	var node4 = new JSCustomNodeModel({
 		name: 'Node 4',
@@ -35,47 +35,48 @@ export default class Main extends React.Component {
 		shape: 'circle'
 	});
 
-	var node5 = new JSCustomNodeModel({
-		name: 'Node 5',
-		color: 'rgb(0,192,255)',
-        pnlClass: 'ProcessingMechanism',
-		shape: 'hexagon'
-	});
+	// var node5 = new JSCustomNodeModel({
+	// 	name: 'Node 5',
+	// 	color: 'rgb(0,192,255)',
+    //     pnlClass: 'ProcessingMechanism',
+	// 	shape: 'hexagon'
+	// });
 
-	node4.setPosition(900,200);
-	node5.setPosition(550,500);
+	node4.setPosition(700,200);
+	// node5.setPosition(550,500);
 
-	node1.setPosition(100, 100);
+	// node1.setPosition(100, 100);
 	// let port1 = node1.addOutPort('Out');
 
 	//3-B) create another default node
-	var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
-	node2.addInPort('in');
-	node2.setPosition(400, 100);
+	// var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	// node2.addInPort('in');
+	// node2.setPosition(400, 100);
 
-	var node3 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
-	node3.addInPort('in');
-	node3.setPosition(200, 400);
+	// var node3 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
+	// node3.addInPort('in');
+	// node3.setPosition(200, 400);
 
 	// link the ports
 	// let link1 = port1.link(port2);
 	// link1.getOptions().testName = 'Test';
 	// link1.addLabel('Hello World!');
-    const link1 = new DefaultLinkModel();
-    link1.setSourcePort(node1.getPort('out'));
-    link1.setTargetPort(node2.getPort('in'));
-	const link2 = new DefaultLinkModel();
-    link2.setSourcePort(node1.getPort('out'));
-    link2.setTargetPort(node3.getPort('in'));
+    // const link1 = new DefaultLinkModel();
+    // link1.setSourcePort(node1.getPort('out'));
+    // link1.setTargetPort(node2.getPort('in'));
+	// const link2 = new DefaultLinkModel();
+    // link2.setSourcePort(node1.getPort('out'));
+    // link2.setTargetPort(node3.getPort('in'));
 
 	//4) add the models to the root graph
-	model.addAll(node1, node2, node3, link1, link2, node4, node5);
+	// model.addAll(node1, node2, node3, link1, link2, node4, node5);
+	model.addAll(node4);
 
 	//5) load model into engine
 	engine.setModel(model);
 
     return (
-        <div style={{ height: '100%', width: '100%'}}>
+        <div className='main'>
             <CanvasWidget className="diagram-container" engine={engine} />
         </div>
     );