Merge pull request #100 from sandboxnu/eslint

Add eslint configuration

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  extends: ['airbnb-typescript', 'eslint-config-prettier'],
+  parserOptions: {
+    project: './tsconfig.eslint.json',
+  },
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        printWidth: 80,
+        arrowParens: 'avoid',
+        trailingComma: 'all',
+      },
+    ],
+    // incompatible with prettier
+    'react/jsx-curly-newline': 'off',
+    'react/jsx-indent': 'off',
+    'react/jsx-wrap-multilines': 'off',
+    'react/jsx-closing-tag-location': 'off',
+    'react/no-array-index-key': 'warn',
+    '@typescript-eslint/indent': 'off',
+
+    // we're using typescript, so we have prop types
+    'react/prop-types': 'off',
+
+    // personal preference
+    'react/jsx-props-no-spreading': 'off',
+  },
+};

package.json

@@ -7,8 +7,11 @@
   "dependencies": {
     "@material-ui/core": "4.11.0",
     "@material-ui/icons": "4.9.1",
+    "@material-ui/styles": "4.11.3",
     "autoprefixer": "10.0.2",
     "chart.js": "2.9.3",
+    "chartjs-plugin-dragdata": "1.1.3",
+    "csstype": "3.0.6",
     "filter": "0.1.1",
     "gaussian-convolution-kernel": "1.0.0",
     "ml-dataset-iris": "1.1.1",
@@ -22,13 +25,16 @@
     "react": "16.13.1",
     "react-chartjs-2": "2.10.0",
     "react-dom": "16.13.1",
+    "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "serialize-javascript": "4.0.0",
+    "tailwind": "4.0.0",
+    "tailwindcss": "1.9.6",
+    "tailwindcss-blend-mode": "1.0.0",
     "typeface-open-sans": "0.0.75",
     "typeface-roboto": "0.0.75",
     "typeface-roboto-mono": "0.0.75",
-    "typefaces": "0.0.1",
-    "chartjs-plugin-dragdata": "1.1.3"
+    "typefaces": "0.0.1"
   },
   "devDependencies": {
     "@testing-library/dom": "5.6.1",
@@ -41,25 +47,31 @@
     "@types/react": "16.9.49",
     "@types/react-dom": "16.9.8",
     "@types/react-router-dom": "5.1.7",
+    "@typescript-eslint/eslint-plugin": "4.14.1",
+    "@typescript-eslint/parser": "4.14.1",
+    "eslint": "7.19.0",
+    "eslint-config-airbnb-typescript": "12.0.0",
+    "eslint-config-prettier": "7.2.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-react-hooks": "4.2.0",
     "postcss": "8.1.13",
     "postcss-cli": "7.1.2",
+    "prettier": "2.2.1",
     "react-scripts": "4.0.1",
-    "tailwind": "4.0.0",
-    "tailwindcss": "1.9.6",
-    "tailwindcss-blend-mode": "1.0.0",
     "typescript": "4.0.2"
   },
   "scripts": {
     "start": "npm run watch:css && react-scripts start",
     "build": "npm run build:css && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "lint": "eslint . --fix",
     "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
     "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

postcss.config.js

@@ -1,6 +1,5 @@
 const tailwindcss = require('tailwindcss');
+
 module.exports = {
-    plugins: [
-        tailwindcss('./tailwind.config.js')
-    ]
+  plugins: [tailwindcss('./tailwind.config.js')],
 };

src/App.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
+import Navbar from './Navbar';
+import Footer from './footer';
+
+import './index.css';
+import AboutPage from './aboutPage/AboutPage';
+import LandingPage from './landingPage/LandingPage';
+import ModulePage from './modulePage/ModulePage';
+
+// change colors as needed
+const THEME = createMuiTheme({
+  palette: {
+    primary: {
+      main: '#394D73', // same as footer color
+    },
+    secondary: {
+      main: '#0FD4C0', // logo teal
+    },
+  },
+});
+
+function App() {
+  return (
+    <BrowserRouter>
+      <div className="App" id="app">
+        <ThemeProvider theme={THEME}>
+          <div className="App-header">
+            <Navbar />
+          </div>
+          <main className="font-mono text-lg font-charcoal">
+            <Switch>
+              <Route exact path="/" component={LandingPage} />
+              <Route path="/home" component={LandingPage} />
+              <Route path="/modules/:module" component={ModulePage} />
+              <Route path="/about" component={AboutPage} />
+            </Switch>
+          </main>
+          <div>
+            <Footer />
+          </div>
+        </ThemeProvider>
+      </div>
+    </BrowserRouter>
+  );
+}
+
+export default App;

src/ModuleDropdown.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import descriptions from './media/modules/module_descriptions.json';
+
+export default function ModuleDropdown() {
+  const [buttonHover, setButtonHover] = useState(false);
+  const [dropdownHover, setDropdownHover] = useState(false);
+
+  return (
+    <div className="">
+      <button
+        type="button"
+        onMouseOver={() => setButtonHover(true)}
+        onFocus={() => setButtonHover(true)}
+        onMouseOut={() => setButtonHover(false)}
+        onBlur={() => setButtonHover(false)}
+      >
+        <p className="text-xs text-white uppercase font-opensans font-bold">
+          Modules
+        </p>
+      </button>
+      <div
+        className={`absolute ${
+          !(buttonHover || dropdownHover) && 'hidden'
+        } -mt-1 -ml-10 justify-start rounded-b divide-y divide-moduleDarkBlue bg-navbar`}
+        onMouseOver={() => setDropdownHover(true)}
+        onFocus={() => setDropdownHover(true)}
+        onMouseOut={() => setDropdownHover(false)}
+        onBlur={() => setDropdownHover(false)}
+      >
+        <br />
+        {descriptions.modules.map(module => (
+          <div className="py-1 mx-2 text-left">
+            <a
+              className="text-xs uppercase font-opensans font-bold text-white hover:text-moduleTeal"
+              href={`/modules/${module.path}`}
+              key={module.number.toString()}
+            >
+              {module.dropdownTitle}
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/Navbar.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import ModuleDropdown from './ModuleDropdown';
+import logo from './media/landingPage/logo_blink.svg';
+
+export default function Navbar() {
+  return (
+    <nav className="flex justify-between px-2 bg-navbar" id="navbar-container">
+      <div className="flex my-1 ml-6 sm:ml-12 lg:ml-40" id="logo-container">
+        <a href="/">
+          <object
+            className="pointer-events-none py-2 w-24 h-10"
+            type="image/svg+xml"
+            data={logo}
+          >
+            Logo
+          </object>
+        </a>
+      </div>
+      <div className="my-3 justify-between" id="links-container">
+        <ul className="flex sm:mr-6 lg:mr-40" id="nav-list">
+          <li className="mr-8 border-b-2 border-transparent hover:border-teal-a-eye duration-300 ease-in-out">
+            <a className="" href="/">
+              <p className="text-xs text-white uppercase font-opensans font-bold">
+                Home
+              </p>
+            </a>
+          </li>
+          <li className="mx-8 -mt-1 border-b-2 border-transparent hover:border-teal-a-eye duration-300 ease-in-out">
+            {/* <a className="" href="/modules"><p className="text-xs text-white uppercase font-opensans font-bold">Modules</p></a> */}
+            <ModuleDropdown />
+          </li>
+          <li className="mx-8 border-b-2 border-transparent hover:border-teal-a-eye duration-300 ease-in-out">
+            <a className="" href="/about">
+              <p className="text-xs text-white uppercase font-opensans font-bold">
+                About
+              </p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+}