add full typescript support

LedFx · May 31, 2021 · b63f166 · b63f166
1 parent cbd1ee2
commit b63f166
Show file tree

Hide file tree

Showing 42 changed files with 15,341 additions and 20,379 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,24 @@
+module.exports = {
+  extends: ["airbnb", "plugin:@typescript-eslint/recommended"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "prettier"],
+  settings: {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+    "import/resolver": {
+      typescript: {},
+    },
+  },
+  ignorePatterns: ["**/build/*", "*.js", "*.jsx"],
+  rules: {
+    quotes: [2, "single"],
+    "react/jsx-filename-extension": [2, { extensions: [".ts", ".tsx"] }],
+    "import/no-extraneous-dependencies": [
+      2,
+      { devDependencies: ["**/test.tsx", "**/test.ts"] },
+    ],
+    "@typescript-eslint/indent": [2, 2],
+    "react/react-in-jsx-scope": "off",
+  },
+};
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,33 @@
+"[javascript]": {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": false
+},
+"[javascriptreact]": {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": false
+},
+"[typescript]": {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": false
+},
+"[typescriptreact]": {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": false
+},
+"eslint.autoFixOnSave": true,
+"eslint.validate": [
+  "javascript",
+  "javascriptreact",
+  {
+    "autoFix": true,
+    "language": "typescript"
+  },
+  {
+    "autoFix": true,
+    "language": "typescriptreact"
+  }
+],
+"prettier.eslintIntegration": true,
+"editor.codeActionsOnSave": {
+  "source.fixAll.eslint": true
+}
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.1.9",
+    "@types/reactour": "^1.18.1",
     "axios": "^0.21.1",
     "clsx": "^1.1.1",
     "moment": "^2.29.1",
@@ -28,6 +29,7 @@
     "reactour": "^1.18.4",
     "serve": "^11.3.2",
     "styled-components": "^5.3.0",
+    "typescript": "^4.3.2",
     "web-vitals": "^1.1.2",
     "zustand": "^3.5.1"
   },
@@ -37,7 +39,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "yarn build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "eslintConfig": {
     "extends": [
@@ -58,18 +61,26 @@
     ]
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.27.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-flowtype": "^5.7.2",
     "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jest": "^24.3.6",
+    "eslint-plugin-json": "^3.0.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "gh-pages": "^3.2.0",
-    "react-is": "^17.0.2",
-    "webpack": "^5.38.1"
+    "prettier": "^2.3.0",
+    "react-is": "^17.0.2"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,43 +1,41 @@
-import { useEffect } from "react";
-import useStore from "./utils/apiStore";
-import useStyles from "./App.styles";
-import "./App.css";
-import "./assets/materialdesignicons.css";
+import { useEffect } from 'react';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import clsx from 'clsx';
+import CssBaseline from '@material-ui/core/CssBaseline';
 
-import clsx from "clsx";
-import CssBaseline from "@material-ui/core/CssBaseline";
+import useStore from './utils/apiStore';
+import useStyles from './App.styles';
+import './App.css';
+import './assets/materialdesignicons.css';
 
-import LeftBar from "./components/Bars/BarLeft";
-import TopBar from "./components/Bars/BarTop";
-import BottomBar from "./components/Bars/BarBottom";
-import MessageBar from "./components/Bars/BarMessage";
+import LeftBar from './components/Bars/BarLeft';
+import TopBar from './components/Bars/BarTop';
+import BottomBar from './components/Bars/BarBottom';
+import MessageBar from './components/Bars/BarMessage';
 
-import { MuiThemeProvider } from "@material-ui/core/styles";
-import { createMuiTheme } from "@material-ui/core/styles";
-
-import DialogNoHost from "./components/DialogNoHost";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import Home from "./pages/Home";
-import Devices from "./pages/Devices";
-import Device from "./pages/Device/Device";
-import Scenes from "./pages/Scenes";
-import Settings from "./pages/Settings";
-import Integrations from "./pages/Integrations";
+import DialogNoHost from './components/DialogNoHost';
+import Home from './pages/Home';
+import Devices from './pages/Devices';
+import Device from './pages/Device/Device';
+import Scenes from './pages/Scenes';
+import Settings from './pages/Settings';
+import Integrations from './pages/Integrations';
 
 const curacaoDarkTheme = createMuiTheme({
   palette: {
-    type: "dark",
+    type: 'dark',
     primary: {
-      main: "#0dbedc",
+      main: '#0dbedc',
     },
     secondary: {
-      main: "#999",
+      main: '#999',
     },
-    background: { default: "#030303", paper: "#151515" },
+    background: { default: '#030303', paper: '#151515' },
   },
   props: {
     MuiCard: {
-      variant: "outlined",
+      variant: 'outlined',
     },
   },
 });

diff --git a/src/App.styles.jsx b/src/App.styles.jsx
@@ -1,52 +1,52 @@
-import { makeStyles } from "@material-ui/core/styles";
-import { drawerWidth } from "./utils/helpers";
+import { makeStyles } from '@material-ui/core/styles';
+import { drawerWidth } from './utils/helpers';
 
 const useStyles = makeStyles((theme) => ({
-  "@global": {
-    "*::-webkit-scrollbar": {
-      backgroundColor: "#ffffff30",
-      width: "8px",
-      borderRadius: "8px",
+  '@global': {
+    '*::-webkit-scrollbar': {
+      backgroundColor: '#ffffff30',
+      width: '8px',
+      borderRadius: '8px',
     },
-    "*::-webkit-scrollbar-track": {
-      backgroundColor: "#00000060",
-      borderRadius: "8px",
+    '*::-webkit-scrollbar-track': {
+      backgroundColor: '#00000060',
+      borderRadius: '8px',
     },
-    "*::-webkit-scrollbar-thumb": {
-      backgroundColor: "#555555",
-      borderRadius: "8px",
+    '*::-webkit-scrollbar-thumb': {
+      backgroundColor: '#555555',
+      borderRadius: '8px',
     },
-    "*::-webkit-scrollbar-button": {
-      display: "none",
+    '*::-webkit-scrollbar-button': {
+      display: 'none',
     },
   },
   root: {
-    display: "flex",
+    display: 'flex',
   },
 
   drawerHeader: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     padding: theme.spacing(0, 1),
     ...theme.mixins.toolbar,
   },
   content: {
     flexGrow: 1,
-    background: "transparent",
+    background: 'transparent',
     padding: theme.spacing(3),
-    transition: theme.transitions.create("margin", {
+    transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
     marginLeft: -drawerWidth,
-    "@media (max-width: 580px)": {
-      marginLeft: "-100vw",
-      padding: "0 10px",
+    '@media (max-width: 580px)': {
+      marginLeft: '-100vw',
+      padding: '0 10px',
     },
   },
   contentShift: {
-    transition: theme.transitions.create("margin", {
+    transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.easeOut,
       duration: theme.transitions.duration.enteringScreen,
     }),

diff --git a/src/assets/Wled.jsx b/src/assets/Wled.jsx
@@ -1,18 +1,18 @@
-import React from 'react';
-
-const Wled = ({ stroke, strokeWidth, strokeLinejoin, strokeLinecap }) => {
-    return (
-        <svg viewBox="1.2738999999999998 0.896900000000001 21.511300000000002 17.9544">
-            <path
-                d="m 15.5751 0.919 c -0.0454 0.3682 -0.0069 0.7526 -0.0196 1.1271 c 0.0071 0.8159 -0.0141 1.6377 0.0106 2.45 c 0.1121 0.1017 0.317 0.0206 0.465 0.0467 c 2.2276 0 4.4552 0 6.6827 0 c 0.1466 -0.0782 0.0379 -0.3085 0.0714 -0.4487 c 0 -1.0419 0 -2.0839 0 -3.1258 c -0.0782 -0.1466 -0.3085 -0.0379 -0.4487 -0.0714 c -2.2366 0 -4.4731 0 -6.7097 0 c -0.0173 0.0074 -0.0345 0.0148 -0.0518 0.0222 z m -3.5569 3.5569 c -0.0454 0.3682 -0.0069 0.7526 -0.0196 1.1271 c -0.0036 0.8041 0.0083 1.6156 -0.016 2.4153 c -1.1386 0.0401 -2.2792 0.0095 -3.4186 0.0193 c -0.2245 -0.0414 -0.1307 0.2381 -0.1493 0.3678 c 0 2.2635 0 4.527 0 6.7905 c 0.0782 0.1466 0.3085 0.0379 0.4487 0.0714 c 1.0508 0 2.1016 0 3.1524 0 c 0.1465 -0.078 0.0388 -0.3084 0.0729 -0.4484 c 0.004 -1.0408 0.008 -2.0815 0.0121 -3.1223 c 1.1575 -0.0046 2.3151 -0.0091 3.4726 -0.0136 c 0.1462 -0.0786 0.0376 -0.3085 0.0712 -0.4487 c 0 -2.2364 0 -4.4729 0 -6.7093 c -0.0782 -0.1466 -0.3085 -0.0379 -0.4487 -0.0714 c -1.0419 0 -2.0839 0 -3.1258 0 c -0.0173 0.0074 -0.0345 0.0148 -0.0518 0.0222 z m -10.7247 10.7247 c -0.0454 0.3682 -0.0069 0.7526 -0.0196 1.1271 c 0.0071 0.8249 -0.0142 1.6556 0.0106 2.4769 c 0.1121 0.1017 0.317 0.0206 0.465 0.0467 c 2.2276 0 4.4552 0 6.6827 0 c 0.1466 -0.0782 0.0379 -0.3085 0.0714 -0.4487 c 0 -1.0509 0 -2.1018 0 -3.1527 c -0.0782 -0.1466 -0.3085 -0.0379 -0.4487 -0.0714 c -2.2366 0 -4.4731 0 -6.7097 0 c -0.0173 0.0074 -0.0345 0.0148 -0.0518 0.0222 z"
-                fill="currentColor"
-                stroke={stroke}
-                strokeWidth={strokeWidth}
-                strokeLinejoin={strokeLinejoin}
-                strokeLinecap={strokeLinecap}
-            />
-        </svg>
-    );
-};
-
-export default Wled;
+import React from 'react';
+
+const Wled = ({
+  stroke, strokeWidth, strokeLinejoin, strokeLinecap,
+}) => (
+  <svg viewBox="1.2738999999999998 0.896900000000001 21.511300000000002 17.9544">
+    <path
+      d="m 15.5751 0.919 c -0.0454 0.3682 -0.0069 0.7526 -0.0196 1.1271 c 0.0071 0.8159 -0.0141 1.6377 0.0106 2.45 c 0.1121 0.1017 0.317 0.0206 0.465 0.0467 c 2.2276 0 4.4552 0 6.6827 0 c 0.1466 -0.0782 0.0379 -0.3085 0.0714 -0.4487 c 0 -1.0419 0 -2.0839 0 -3.1258 c -0.0782 -0.1466 -0.3085 -0.0379 -0.4487 -0.0714 c -2.2366 0 -4.4731 0 -6.7097 0 c -0.0173 0.0074 -0.0345 0.0148 -0.0518 0.0222 z m -3.5569 3.5569 c -0.0454 0.3682 -0.0069 0.7526 -0.0196 1.1271 c -0.0036 0.8041 0.0083 1.6156 -0.016 2.4153 c -1.1386 0.0401 -2.2792 0.0095 -3.4186 0.0193 c -0.2245 -0.0414 -0.1307 0.2381 -0.1493 0.3678 c 0 2.2635 0 4.527 0 6.7905 c 0.0782 0.1466 0.3085 0.0379 0.4487 0.0714 c 1.0508 0 2.1016 0 3.1524 0 c 0.1465 -0.078 0.0388 -0.3084 0.0729 -0.4484 c 0.004 -1.0408 0.008 -2.0815 0.0121 -3.1223 c 1.1575 -0.0046 2.3151 -0.0091 3.4726 -0.0136 c 0.1462 -0.0786 0.0376 -0.3085 0.0712 -0.4487 c 0 -2.2364 0 -4.4729 0 -6.7093 c -0.0782 -0.1466 -0.3085 -0.0379 -0.4487 -0.0714 c -1.0419 0 -2.0839 0 -3.1258 0 c -0.0173 0.0074 -0.0345 0.0148 -0.0518 0.0222 z m -10.7247 10.7247 c -0.0454 0.3682 -0.0069 0.7526 -0.0196 1.1271 c 0.0071 0.8249 -0.0142 1.6556 0.0106 2.4769 c 0.1121 0.1017 0.317 0.0206 0.465 0.0467 c 2.2276 0 4.4552 0 6.6827 0 c 0.1466 -0.0782 0.0379 -0.3085 0.0714 -0.4487 c 0 -1.0509 0 -2.1018 0 -3.1527 c -0.0782 -0.1466 -0.3085 -0.0379 -0.4487 -0.0714 c -2.2366 0 -4.4731 0 -6.7097 0 c -0.0173 0.0074 -0.0345 0.0148 -0.0518 0.0222 z"
+      fill="currentColor"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinejoin={strokeLinejoin}
+      strokeLinecap={strokeLinecap}
+    />
+  </svg>
+);
+
+export default Wled;
diff --git a/src/components/Bars/BarBottom.jsx b/src/components/Bars/BarBottom.jsx
@@ -1,20 +1,20 @@
-import { makeStyles } from "@material-ui/core/styles";
-import { useState, useEffect } from "react";
-import BottomNavigation from "@material-ui/core/BottomNavigation";
-import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
-import Settings from "@material-ui/icons/Settings";
-import HomeIcon from "@material-ui/icons/Home";
-import Wallpaper from "@material-ui/icons/Wallpaper";
-import { useLocation } from 'react-router-dom'
+import { makeStyles } from '@material-ui/core/styles';
+import { useState, useEffect } from 'react';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import Settings from '@material-ui/icons/Settings';
+import HomeIcon from '@material-ui/icons/Home';
+import Wallpaper from '@material-ui/icons/Wallpaper';
+import { useLocation, Link } from 'react-router-dom';
 // import SettingsInputSvideoIcon from "@material-ui/icons/SettingsInputSvideo";
-import SettingsInputComponent from "@material-ui/icons/SettingsInputComponent";
-import { Link } from "react-router-dom";
+import SettingsInputComponent from '@material-ui/icons/SettingsInputComponent';
+
 const useStyles = makeStyles({
   root: {
-    width: "100%",
-    position: "fixed",
+    width: '100%',
+    position: 'fixed',
     bottom: 0,
-    background: "#121212",
+    background: '#121212',
   },
 });
 
@@ -24,8 +24,8 @@ export default function LabelBottomNavigation() {
   const [value, setValue] = useState(pathname);
 
   useEffect(() => {
-    setValue(pathname)
-  }, [pathname])
+    setValue(pathname);
+  }, [pathname]);
 
   return (
     <BottomNavigation
@@ -37,19 +37,19 @@ export default function LabelBottomNavigation() {
         component={Link}
         label="Home"
         value="/"
-        to={"/"}
+        to="/"
         icon={<HomeIcon />}
       />
       <BottomNavigationAction
         label="Devices"
         value="/Devices"
         component={Link}
-        to={"/Devices"}
+        to="/Devices"
         icon={<SettingsInputComponent />}
       />
       <BottomNavigationAction
         component={Link}
-        to={"/Scenes"}
+        to="/Scenes"
         label="Scenes"
         value="/Scenes"
         icon={<Wallpaper />}
@@ -68,7 +68,7 @@ export default function LabelBottomNavigation() {
         value="/Settings"
         icon={<Settings />}
         component={Link}
-        to={"/Settings"}
+        to="/Settings"
       />
     </BottomNavigation>
   );