Lint / Format Config (#337)

* Fixed lint / format configs
* Added .editorconfig
* Fixed Husky hooks, now on pre-commit lint-check will be run
* Fixed all lint issues

.editorconfig

@@ -0,0 +1,9 @@
+# http://editorconfig.org
+
+  [*]
+  indent_style = space
+  indent_size = 2
+  end_of_line = lf
+  charset = utf-8
+  trim_trailing_whitespace = true
+  insert_final_newline = true

.eslintrc.json

@@ -20,7 +20,7 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
-    "prettier"
+    "plugin:prettier/recommended"
   ],
   "rules": {
     "@typescript-eslint/no-explicit-any": "off",

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged

.nvmrc

@@ -1 +1 @@
-v15.5.1
+v16.15.1

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+ "arrowParens": "avoid",
+ "bracketSpacing": true,
+ "endOfLine": "auto",
+ "printWidth": 120,
+ "proseWrap": "preserve",
+ "quoteProps": "consistent",
+ "semi": false,
+ "singleQuote": false,
+ "tabWidth": 2,
+ "trailingComma": "none"
+}

package.json

@@ -11,7 +11,8 @@
     "eject": "react-scripts eject",
     "lint:ci": "eslint --color 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:check": "eslint --quiet 'src/**/*.{js,jsx,ts,tsx}'",
-    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'"
+    "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@hookform/resolvers": "^2.8.1",
@@ -69,10 +70,11 @@
     "@typescript-eslint/parser": "^4.18.0",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^5.1.3",
-    "lint-staged": "^10.5.4",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
     "prettier": "^2.2.0",
     "source-map-explorer": "2.5.2",
     "typescript": "^4.2.3"
@@ -94,9 +96,14 @@
       "last 1 safari version"
     ]
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [
-      "yarn lint:fix"
+      "yarn lint:check"
     ]
   }
 }

src/App.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import { withLDProvider } from 'launchdarkly-react-client-sdk';
-import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom';
-import mixpanel from 'mixpanel-browser';
-import {QueryClient, QueryClientProvider} from 'react-query';
-import {Box, makeStyles, ThemeProvider} from '@material-ui/core';
-import {SnackbarProvider} from 'notistack';
+import React from "react"
+import { withLDProvider } from "launchdarkly-react-client-sdk"
+import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom"
+import mixpanel from "mixpanel-browser"
+import { QueryClient, QueryClientProvider } from "react-query"
+import { Box, makeStyles, ThemeProvider } from "@material-ui/core"
+import { SnackbarProvider } from "notistack"
 
-import {DAOExplorerRouter} from 'modules/explorer/router';
-import {DAOCreate} from 'modules/creator';
-import {CreatorProvider} from 'modules/creator/state';
-import ScrollToTop from 'modules/common/ScrollToTop';
-import {theme} from 'theme';
+import { DAOExplorerRouter } from "modules/explorer/router"
+import { DAOCreate } from "modules/creator"
+import { CreatorProvider } from "modules/creator/state"
+import ScrollToTop from "modules/common/ScrollToTop"
+import { theme } from "theme"
 
-import 'App.css';
-import {TZKTSubscriptionsProvider} from 'services/bakingBad/context/TZKTSubscriptions';
-import {Landing} from 'modules/home/Landing';
-import {WarningFooter} from 'modules/common/WarningFooter';
-import {ActionSheetProvider} from 'modules/explorer/context/ActionSheets';
-import {legacyTheme} from 'theme/legacy';
-import {Footer} from 'modules/common/Footer';
-import {FAQ} from 'modules/home/FAQ';
-import { EnvKey, getEnv } from 'services/config';
+import "App.css"
+import { TZKTSubscriptionsProvider } from "services/bakingBad/context/TZKTSubscriptions"
+import { Landing } from "modules/home/Landing"
+import { WarningFooter } from "modules/common/WarningFooter"
+import { ActionSheetProvider } from "modules/explorer/context/ActionSheets"
+import { legacyTheme } from "theme/legacy"
+import { Footer } from "modules/common/Footer"
+import { FAQ } from "modules/home/FAQ"
+import { EnvKey, getEnv } from "services/config"
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 60000),
+      retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 60000),
       retry: false,
       retryOnMount: false,
       refetchOnMount: false,
       refetchOnWindowFocus: true,
       staleTime: 5000,
-      cacheTime: 30000,
-    },
-  },
-});
+      cacheTime: 30000
+    }
+  }
+})
 
 const styles = makeStyles({
   success: {
@@ -43,53 +43,52 @@ const styles = makeStyles({
     height: 54,
     fontSize: 13,
     lineHeight: "0px",
-    opacity: 1,
+    opacity: 1
   },
   error: {
     backgroundColor: "#ED254E !important",
     padding: "6px 28px",
     height: 54,
     fontSize: 13,
     lineHeight: "0px",
-    opacity: 1,
+    opacity: 1
   },
   info: {
     backgroundColor: "#3866F9 !important",
     padding: "6px 28px",
     height: 54,
     fontSize: 13,
     lineHeight: "0px",
-    opacity: 1,
-  },
-});
-
+    opacity: 1
+  }
+})
 
 const MIXPANEL_TOKEN = getEnv(EnvKey.REACT_APP_MIXPANEL_TOKEN)
 const MIXPANEL_DEBUG_ENABLED = getEnv(EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED)
 
 if (!MIXPANEL_TOKEN) {
-  throw new Error(`${EnvKey.REACT_APP_MIXPANEL_TOKEN} env variable is missing`);
+  throw new Error(`${EnvKey.REACT_APP_MIXPANEL_TOKEN} env variable is missing`)
 }
 
 if (!MIXPANEL_DEBUG_ENABLED) {
-  throw new Error(`${EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED} env variable is missing`);
+  throw new Error(`${EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED} env variable is missing`)
 }
 
 mixpanel.init(MIXPANEL_TOKEN, {
-  debug: MIXPANEL_DEBUG_ENABLED === "true",
-});
-mixpanel.track("Visit");
+  debug: MIXPANEL_DEBUG_ENABLED === "true"
+})
+mixpanel.track("Visit")
 
 const App: React.FC = () => {
-  const classes = styles();
+  const classes = styles()
 
   return (
     <ThemeProvider theme={theme}>
       <SnackbarProvider
         classes={{
           variantSuccess: classes.success,
           variantError: classes.error,
-          variantInfo: classes.info,
+          variantInfo: classes.info
         }}
       >
         <QueryClientProvider client={queryClient}>
@@ -135,14 +134,12 @@ const App: React.FC = () => {
         </QueryClientProvider>
       </SnackbarProvider>
     </ThemeProvider>
-  );
-};
-
+  )
+}
 
 const env = getEnv(EnvKey.REACT_APP_ENV)
 
 export default withLDProvider({
-  clientSideID: env === "PROD" ?
-    getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_PROD) :
-    getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_DEV),
-})(App);
+  clientSideID:
+    env === "PROD" ? getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_PROD) : getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_DEV)
+})(App)

src/index.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React from "react"
+import ReactDOM from "react-dom"
 
-import App from "App";
-import { TezosProvider } from "services/beacon/context";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import dayjs from "dayjs";
-import BigNumber from "bignumber.js";
+import App from "App"
+import { TezosProvider } from "services/beacon/context"
+import localizedFormat from "dayjs/plugin/localizedFormat"
+import dayjs from "dayjs"
+import BigNumber from "bignumber.js"
 
 // BigNumber.config({ DECIMAL_PLACES:  })
 
-dayjs.extend(localizedFormat);
+dayjs.extend(localizedFormat)
 
 ReactDOM.render(
   <React.StrictMode>
@@ -18,4 +18,4 @@ ReactDOM.render(
     </TezosProvider>
   </React.StrictMode>,
   document.getElementById("root")
-);
+)