Merge release/0.2.0 to master

release/0.2.0

Author: de7ign

.eslintrc.json

@@ -14,6 +14,31 @@
     },
     "extends": ["airbnb", "prettier"],
     "rules": {
-        "indent": [2, 2, {"SwitchCase": 1}]
-    }
+        "indent": [2, 2, {"SwitchCase": 1}],
+        "import/extensions": [
+            "error",
+            "ignorePackages",
+            {
+                "js": "never",
+                "jsx": "never",
+                "ts": "never",
+                "tsx": "never"
+            }
+        ]
+    },
+    "settings": {
+        "import/resolver": {
+            "node": {
+                "paths": ["src/**/*"],
+                "extensions": [".js", ".jsx", ".ts", ".tsx"]
+            }
+        }
+    },
+    "overrides": [{
+        "files": ["*.ts"],
+        "parser": "@typescript-eslint/parser",
+        "plugins":  [
+            "@typescript-eslint"
+        ]
+    }]
 }

.gitignore

@@ -84,3 +84,5 @@ typings/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.yarnrc

package.json

@@ -1,29 +1,34 @@
 {
   "name": "automata",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "homepage": "http://nihalmurmu.github.io/automata",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^3.7.1",
-    "@material-ui/icons": "^3.0.1",
+    "@material-ui/core": "^4.9.5",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.45",
     "classnames": "^2.2.6",
     "js-file-download": "^0.4.7",
+    "keycharm": "^0.3.1",
     "prop-types": "^15.7.2",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-ga": "^2.5.7",
-    "react-scripts": "^2.1.8",
-    "vis": "^4.21.0"
+    "react-scripts": "3.4.1",
+    "typescript": "^3.8.3",
+    "uuid": "^7.0.2",
+    "vis-data": "^6.3.5",
+    "vis-network": "^7.4.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint src/**/*.jsx",
-    "pretty": "npx prettier --write src/**/*.jsx src/**/*.js",
-    "pretty-lint": "npm run pretty && npm run lint",
-    "predeploy": "npm run build",
+    "lint": "yarn run eslint src/**/*.jsx src/**/*.js src/**/*.ts --fix",
+    "pretty": "yarn run prettier --write src/**/*.jsx src/**/*.js src/**/*.ts",
+    "pretty-lint": "yarn run pretty && yarn run lint",
+    "predeploy": "yarn run build",
     "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
@@ -36,12 +41,17 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "@types/uuid": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
+    "babel-eslint": "^10.1.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-import": "^2.17.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^2.5.0",
     "gh-pages": "^2.0.1",
     "prettier": "^1.17.0"
   }

src/App.jsx

@@ -1,25 +1,43 @@
-import React from "react";
+import React, { StrictMode } from "react";
 import "./App.css";
 import ReactGA from "react-ga";
 import Header from "./components/header/Header";
 import Workspace from "./components/workspace/Workspace";
 import Notice from "./components/notice/Notice";
 import Footer from "./components/footer/Footer";
+import MuiSnackbar from "./components/snackbar/MuiSnackbar";
 
 class App extends React.Component {
+  muiSnackbarRef = React.createRef();
+
   componentDidMount() {
-    ReactGA.initialize("UA-138685124-2");
-    ReactGA.pageview(window.location.pathname);
+    if (process.env.NODE_ENV === "production") {
+      ReactGA.initialize("UA-138685124-2");
+      ReactGA.pageview(window.location.pathname);
+    }
   }
 
+  /**
+   * Displays the snackbar notification
+   *
+   * @param {String} variant - error, warning, info, success
+   * @param {String} message - The notification message
+   */
+  displaySnackbar = (variant, message) => {
+    this.muiSnackbarRef.current.openSnackbar(variant, message);
+  };
+
   render() {
     return (
-      <div className="App">
-        <Header />
-        <Workspace />
-        <Notice />
-        <Footer />
-      </div>
+      <StrictMode>
+        <div className="App">
+          <Header />
+          <Workspace snackbar={this.displaySnackbar} />
+          <Notice />
+          <Footer />
+          <MuiSnackbar ref={this.muiSnackbarRef} />
+        </div>
+      </StrictMode>
     );
   }
 }

src/components/drawer/TemporaryDrawer.jsx

@@ -18,7 +18,7 @@ const styles = {
 class TemporaryDrawer extends Component {
   state = {
     open: false,
-    selectedModeKey: 0,
+    selectedModeKey: 1,
     selectedLinkKey: null
   };
 
@@ -27,6 +27,7 @@ class TemporaryDrawer extends Component {
   };
 
   handleModeListItemClick = (event, key) => {
+    if (key !== 1) return;
     this.setState({ selectedModeKey: key, selectedLinkKey: null });
   };
 
@@ -37,7 +38,6 @@ class TemporaryDrawer extends Component {
   render() {
     const { classes } = this.props;
     const { open, selectedModeKey, selectedLinkKey } = this.state;
-
     const sideList = (
       <div className={classes.list}>
         <List>
@@ -55,7 +55,11 @@ class TemporaryDrawer extends Component {
                 selected={selectedModeKey === key}
                 onClick={event => this.handleModeListItemClick(event, key)}
               >
-                <ListItemText primary={value} secondary="*coming soon*" />
+                {key === 1 ? (
+                  <ListItemText primary={value} />
+                ) : (
+                  <ListItemText primary={value} secondary="*coming soon*" />
+                )}
               </ListItem>
             );
           })}

src/components/footer/Footer.jsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  Typography,
-  Grid,
-  Paper,
-  withStyles,
-} from "@material-ui/core";
+import { Typography, Grid, Paper, withStyles } from "@material-ui/core";
 import PropTypes from "prop-types";
 
 const styles = theme => ({

src/components/notice/Notice.jsx

@@ -16,32 +16,23 @@ const Notice = props => {
       <Card className={classes.root} id="notice" elevation={6}>
         <CardContent>
           <Typography variant="title" gutterBottom>
-            How to get hands dirty
+            How to get started.
           </Typography>
-          <Typography variant="body2">Operation on States</Typography>
-          <Typography variant="body1" gutterBottom>
-            + Double click to create a state.
+          <hr />
+          <Typography variant="body2" gutterBottom>
+            &bull; Double click to create a state.
             <br />
-            + Double click on a non-final state to make it a final state.
+            &bull; Double click on a state to make it a final state and
+            vice-versa.
             <br />
-            + Double click on a final state to make it a non-final state.
+            &bull; Press and hold down shift button, then click-drag from one
+            state to other state you wish to join.
             <br />
-            + Select a node, and edit the node label in text field above
+            &bull; Select a node/edge, and edit the node label in text field
+            above
             <br />
-          </Typography>
-          <Typography variant="body2">Operation on Transition edges</Typography>
-          <Typography variant="body1" gutterBottom>
-            + Press and hold down shift button, then click-drag from one node to
-            other node you wish to join.
-            <br />
-            + Select a edge, and edit the node label in text field above
-            <br />
-          </Typography>
-          <Typography variant="body2">Delete ?</Typography>
-          <Typography variant="body1">
-            Just select the object you want to delete and press
+            &bull; Just select the node/edge you want to delete and press
             &apos;delete&apos; key!
-            <br />
           </Typography>
         </CardContent>
       </Card>
@@ -51,10 +42,10 @@ const Notice = props => {
           <Typography variant="title" gutterBottom>
             Alpha Release
           </Typography>
-          <Typography variant="body1">
-            Application is in active development phase
-            <br />
-            This web application is currently in the stages of its development.
+          <hr />
+          <Typography variant="body2">
+            This Application is currently in the stages of its active
+            development.
             <br />
             It has some quirks and many parts are not yet available.
             <br />