Merge pull request #31 from Permaweb/style/add-prettier

Style/add prettier
RTradeLtd · Aug 13, 2019 · 8a8dce9 · 8a8dce9
2 parents fa0ca71 + 4704657
commit 8a8dce9
Show file tree

Hide file tree

Showing 20 changed files with 2,559 additions and 2,033 deletions.
diff --git a/.appveyor.yml b/.appveyor.yml
@@ -1,5 +1,5 @@
 environment:
-  nodejs_version: "11"
+  nodejs_version: '11'
   GH_TOKEN:
     secure: iF9O6+0EP1bpkx/6WURZbhtIRDQEzFw8F9Saim8lL22aNl3jUiS+MiQHTmkFvjh2
 

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,30 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'prettier',
+    'prettier/@typescript-eslint',
+    'prettier/react'
+  ],
+  plugins: ['@typescript-eslint', 'prettier', 'react'],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-member-accessibility': [
+      'error',
+      { accessibility: 'no-public' }
+    ]
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+}
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  semi: false,
+  trailingComma: "none",
+  singleQuote: true,
+  printWidth: 80,
+  tabWidth: 2
+};
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,5 +2,11 @@
   "editor.formatOnSave": true,
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
-  "npm.packageManager": "yarn"
-}
+  "npm.packageManager": "yarn",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ]
+}
diff --git a/craco.config.js b/craco.config.js
@@ -2,8 +2,8 @@ module.exports = {
   babel: {
     presets: ['mobx'],
     plugins: [
-      ['@babel/plugin-proposal-decorators', { 'legacy': true }],
-      ['@babel/plugin-proposal-class-properties', { 'loose': true }]
+      ['@babel/plugin-proposal-decorators', { legacy: true }],
+      ['@babel/plugin-proposal-class-properties', { loose: true }]
     ]
   }
 }
diff --git a/package.json b/package.json
@@ -36,32 +36,35 @@
     "@babel/cli": "^7.4.3",
     "@babel/core": "^7.4.3",
     "@babel/polyfill": "^7.4.3",
-    "@textile/tslint-rules": "^1.0.3",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
+    "@typescript-eslint/eslint-plugin": "^1.13.0",
+    "@typescript-eslint/parser": "^1.13.0",
     "babel-preset-mobx": "^2.0.0",
     "concurrently": "^4.1.0",
     "electron": "^4.1.4",
     "electron-builder": "^20.39.0",
     "electron-builder-squirrel-windows": "^20.40.0",
-    "tslint": "^5.16.0",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.3",
+    "prettier": "^1.18.2",
     "typescript": "^3.4.5",
     "wait-on": "^3.2.0"
   },
   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
+    "lint": "tsc --noEmit && eslint 'src/**/*.{js,ts,tsx}' --fix",
+    "format": "prettier --write \"./src/**/*.{tsx,ts,js}\"",
     "eject": "react-scripts eject",
     "pack": "electron-builder --dir",
     "dist": "build --x64 --c.extraMetadata.main=public/electron.js --windows --linux",
     "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
     "preelectron-pack": "yarn build",
     "release": "build"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": [
     ">0.2%",
     "not dead",
@@ -98,4 +101,4 @@
     ]
   },
   "homepage": "./"
-}
+}
diff --git a/public/electron.js b/public/electron.js
@@ -1,29 +1,33 @@
-const electron = require('electron');
-const app = electron.app;
-const BrowserWindow = electron.BrowserWindow;
+/* eslint-disable @typescript-eslint/no-var-requires */
+const electron = require('electron')
+const app = electron.app
+const BrowserWindow = electron.BrowserWindow
 
-const path = require('path');
-const url = require('url');
-const isDev = require('electron-is-dev');
+const path = require('path')
+const isDev = require('electron-is-dev')
 
-let mainWindow;
+let mainWindow
 
 function createWindow() {
-  mainWindow = new BrowserWindow({ width: 900, height: 680 });
-  mainWindow.loadURL(isDev ? 'http://127.0.0.1:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
-  mainWindow.on('closed', () => mainWindow = null);
+  mainWindow = new BrowserWindow({ width: 900, height: 680 })
+  mainWindow.loadURL(
+    isDev
+      ? 'http://127.0.0.1:3000'
+      : `file://${path.join(__dirname, '../build/index.html')}`
+  )
+  mainWindow.on('closed', () => (mainWindow = null))
 }
 
-app.on('ready', createWindow);
+app.on('ready', createWindow)
 
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
-    app.quit();
+    app.quit()
   }
-});
+})
 
 app.on('activate', () => {
   if (mainWindow === null) {
-    createWindow();
+    createWindow()
   }
-});
+})
diff --git a/public/index.html b/public/index.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <title>Epona Js</title>
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"
-    type="text/css">
-  <title>Epona Js</title>
-</head>
-
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-</body>
-
-</html>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -1,22 +1,26 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { observer, inject } from 'mobx-react'
-import 'react-semantic-toasts/styles/react-semantic-alert.css';
+import 'react-semantic-toasts/styles/react-semantic-alert.css'
 import Editor from './Editor'
 import Files from './Files'
 import { Dimmer, Loader } from 'semantic-ui-react'
 import { SemanticToastContainer } from 'react-semantic-toasts'
-import 'medium-editor/dist/css/medium-editor.css';
-import 'medium-editor/dist/css/themes/default.css';
+import 'medium-editor/dist/css/medium-editor.css'
+import 'medium-editor/dist/css/themes/default.css'
 import keymap from './keymap'
 // @ts-ignore
 import { ShortcutManager } from 'react-shortcuts'
 
-@inject('store') @observer
+@inject('store')
+@observer
 class App extends Component {
   static childContextTypes = {
     shortcuts: PropTypes.object.isRequired
   }
+  static propTypes = {
+    store: PropTypes.object.isRequired
+  }
   componentDidMount() {
     this.props.store.getFiles()
   }
@@ -37,28 +41,28 @@ class App extends Component {
               </div>
             )
           } else {
-            innerView = (
-              <Files />
-            )
+            innerView = <Files />
           }
           return (
-            <div style={{ width: '80%', maxWidth: '800px', margin: '1em auto' }}>
+            <div
+              style={{ width: '80%', maxWidth: '800px', margin: '1em auto' }}
+            >
               {innerView}
               <Dimmer active={store.isLoading} inverted>
-                <Loader size='massive'></Loader>
+                <Loader size="massive"></Loader>
               </Dimmer>
             </div>
           )
         default:
           return (
             <Dimmer active={store.status === 'offline'}>
-              <Loader size='massive'></Loader>
+              <Loader size="massive"></Loader>
             </Dimmer>
           )
       }
     })(store.status)
     return (
-      <div className='App'>
+      <div className="App">
         {view}
         <SemanticToastContainer />
       </div>

diff --git a/src/DeleteButton.js b/src/DeleteButton.js
@@ -1,18 +1,31 @@
 import React, { Component } from 'react'
 import { observer, inject } from 'mobx-react'
 import { Button } from 'semantic-ui-react'
+import PropTypes from 'prop-types'
 
-@inject('store') @observer
+@inject('store')
+@observer
 class DeleteButton extends Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    store: PropTypes.object.isRequired
+  }
   deleteFile(id) {
     this.props.store.deleteFile(id)
   }
   render() {
     const { id } = this.props
 
     return (
-      <Button size='mini' onClick={() => { this.deleteFile(id) }}>Delete</Button>
-    );
+      <Button
+        size="mini"
+        onClick={() => {
+          this.deleteFile(id)
+        }}
+      >
+        Delete
+      </Button>
+    )
   }
 }