Add eslint integration

iterative · Sep 25, 2019 · bd774bf · bd774bf
1 parent 14b49fb
commit bd774bf
Show file tree

Hide file tree

Showing 37 changed files with 1,059 additions and 356 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -32,6 +32,8 @@ jobs:
 
       - run: yarn test
 
+      - run: yarn eslint
+
       - save_cache:
           paths:
             - node_modules

diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "start": "NODE_ENV=production node server.js",
     "test": "jest",
     "prettier-js": "prettier --write '{pages,src}/**/*.{js,jsx}'",
-    "prettier-md": "prettier --write 'static/docs/**/*.md'"
+    "prettier-md": "prettier --write 'static/docs/**/*.md'",
+    "eslint": "yarn run eslint"
   },
   "repository": {
     "type": "git",
@@ -52,17 +53,23 @@
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
+    "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "babel-plugin-transform-define": "^1.3.1",
     "babel-plugin-transform-object-assign": "^6.22.0",
+    "eslint": "^6.4.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.14.3",
     "husky": "^3.0.4",
     "jest": "^24.9.0",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged --no-restage --bail"
+      "pre-commit": "pretty-quick --staged --no-restage --bail && eslint src"
     }
   }
 }
diff --git a/pages/doc.js b/pages/doc.js
@@ -1,3 +1,5 @@
+/* global docsearch:readonly */
+
 import React, { Component } from 'react'
 // nextjs
 import { HeadInjector } from '../src/Documentation/HeadInjector'

diff --git a/src/Diagram/index.js b/src/Diagram/index.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
   media,
@@ -15,12 +16,21 @@ const LearnMore = ({ href }) => (
   <LearnMoreArea href={href}>
     <a href={href}>
       <span>Learn&nbsp;more</span>
-      <img src="/static/img/learn_more_arrow.svg" width={18} height={18} />
+      <img
+        src="/static/img/learn_more_arrow.svg"
+        width={18}
+        height={18}
+        alt=""
+      />
     </a>
   </LearnMoreArea>
 )
 
-const ColumnOne = ({ fullWidth }) => (
+LearnMore.propTypes = {
+  href: PropTypes.string.isRequired
+}
+
+const ColumnOne = () => (
   <Column>
     <Caption text={`#945dd6`}>ML project version control</Caption>
     <Description fullWidth>
@@ -39,7 +49,7 @@ const ColumnOne = ({ fullWidth }) => (
   </Column>
 )
 
-const ColumnTwo = ({ fullWidth }) => (
+const ColumnTwo = () => (
   <Column>
     <Caption text={`#13adc7`}>ML experiment management</Caption>
     <Description fullWidth>
@@ -60,7 +70,7 @@ const ColumnTwo = ({ fullWidth }) => (
   </Column>
 )
 
-const ColumnThree = ({ fullWidth }) => (
+const ColumnThree = () => (
   <Column>
     <Caption text={`#f46837`}>Deployment & Collaboration</Caption>
     <Description fullWidth>
@@ -106,7 +116,7 @@ export class DiagramSection extends Component {
 
           <OnlyDesktop>
             <Graphic>
-              <img src="/static/img/graphic.png" />
+              <img src="/static/img/graphic.png" alt="" />
             </Graphic>
             <Columns>
               <ColumnOne />

diff --git a/src/Documentation/HeadInjector.js b/src/Documentation/HeadInjector.js
@@ -1,4 +1,6 @@
 import Head from 'next/head'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 export const HeadInjector = ({ sectionName = 'Documentation' }) => (
   <Head>
@@ -22,3 +24,7 @@ export const HeadInjector = ({ sectionName = 'Documentation' }) => (
     <title>{sectionName} | Machine Learning Version Control System · DVC</title>
   </Head>
 )
+
+HeadInjector.propTypes = {
+  sectionName: PropTypes.string
+}
diff --git a/src/Documentation/Markdown/Markdown.js b/src/Documentation/Markdown/Markdown.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 // components
 import ReactMarkdown from 'react-markdown'
 import { LightButton } from '../LightButton'
@@ -43,17 +44,17 @@ const HeadingRenderer = ({ level, children }) => {
   const slug = kebabCase(text)
   const anchor =
     level !== 1 ? (
-      <a class="anchor" aria-hidden="true" href={`#${slug}`}>
+      <a className="anchor" aria-hidden="true" href={`#${slug}`}>
         <svg
-          class="octicon octicon-link"
+          className="octicon octicon-link"
           viewBox="0 0 16 16"
           version="1.1"
           width="16"
           height="16"
           aria-hidden="true"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
           ></path>
         </svg>
@@ -62,6 +63,11 @@ const HeadingRenderer = ({ level, children }) => {
   return React.createElement('h' + level, { id: slug }, anchor, content)
 }
 
+HeadingRenderer.propTypes = {
+  level: PropTypes.number.isRequired,
+  children: PropTypes.node.isRequired
+}
+
 const HtmlRenderer = props => {
   if (props.tag !== 'details' && props.tag !== 'abbr') {
     return React.createElement(props.tag, {}, props.children)
@@ -91,6 +97,11 @@ const CodeBlock = ({ value, language }) => {
   )
 }
 
+CodeBlock.propTypes = {
+  language: PropTypes.string.isRequired,
+  value: PropTypes.node.isRequired
+}
+
 export default class Markdown extends React.PureComponent {
   constructor() {
     super()
@@ -175,6 +186,14 @@ export default class Markdown extends React.PureComponent {
   }
 }
 
+Markdown.propTypes = {
+  markdown: PropTypes.string.isRequired,
+  githubLink: PropTypes.string.isRequired,
+  prev: PropTypes.string.isRequired,
+  next: PropTypes.string.isRequired,
+  onNavigate: PropTypes.func.isRequired
+}
+
 const Content = styled.article`
   min-width: 200px;
   margin: 30px;
@@ -330,8 +349,8 @@ export const GithubLink = styled(LightButton)`
   float: right;
   margin: 5px 0 10px 10px;
   z-index: 1;
-  position relative;
-  
+  position: relative;
+
   ${media.tablet`
     float: none;
     margin: 0 0 15px 0;

diff --git a/src/Documentation/Markdown/lang/dvc.js b/src/Documentation/Markdown/lang/dvc.js
@@ -1,3 +1,5 @@
+/* global exports:readonly */
+
 'use strict'
 
 Object.defineProperty(exports, '__esModule', {
@@ -35,7 +37,7 @@ let _javascript = function(hljs) {
     contains: [
       {
         begin: /^\s*\$/,
-        end: /\n|\Z/,
+        end: /\n|$/,
         returnBegin: true,
         keywords: {
           keyword:
@@ -44,23 +46,23 @@ let _javascript = function(hljs) {
         },
         contains: [
           {
-            begin: /^\s*\$\s(dvc|git) [a-z\-]+/,
+            begin: /^\s*\$\s(dvc|git) [a-z-]+/,
             returnBegin: true,
             contains: [
               {
                 begin: /^\s*\$\s/,
                 className: 'skipped'
               },
               {
-                begin: /git [a-z\-]+/,
+                begin: /git [a-z-]+/,
                 keywords: {
                   keyword:
                     'git commit status pull push fetch add init checkout ' +
                     'merge clone tag'
                 }
               },
               {
-                begin: /dvc [a-z\-]+/,
+                begin: /dvc [a-z-]+/,
                 lexemes: '[a-z-]+',
                 keywords: {
                   built_in:
@@ -90,7 +92,7 @@ let _javascript = function(hljs) {
       hljs.HASH_COMMENT_MODE,
       {
         begin: /^\s*[^\s#$]/,
-        end: /\n|\Z/,
+        end: /\n|$/,
         className: 'meta'
       }
     ]

diff --git a/src/Documentation/Markdown/lang/usage.js b/src/Documentation/Markdown/lang/usage.js
@@ -1,3 +1,5 @@
+/* global exports:readonly */
+
 'use strict'
 
 Object.defineProperty(exports, '__esModule', {
@@ -25,14 +27,14 @@ var _javascript = function(hljs) {
     contains: [
       {
         begin: /^\s*(usage:|positional arguments:|optional arguments:)/,
-        end: /\n|\Z/,
-        lexemes: /\b-?[a-z\._]+\b/,
+        end: /\n|$/,
+        lexemes: /\b-?[a-z._]+\b/,
         keywords: {
           keyword: 'usage arguments optional positional'
         },
         contains: [
           {
-            begin: / dvc [a-z\-]+/,
+            begin: / dvc [a-z-]+/,
             lexemes: '[a-z-]+',
             keywords: {
               built_in:

diff --git a/src/Documentation/RightPanel/RightPanel.js b/src/Documentation/RightPanel/RightPanel.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { LightButton } from '../LightButton'
 // utils
@@ -21,7 +22,7 @@ const imageChecker = (images, callback) => {
       })
     }
 
-    const decrement = e => {
+    const decrement = () => {
       counter -= 1
 
       if (!counter) {
@@ -59,7 +60,7 @@ export default class RightPanel extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.headings != prevProps.headings) {
+    if (this.props.headings !== prevProps.headings) {
       this.initHeadingsPosition()
     }
   }
@@ -157,6 +158,16 @@ export default class RightPanel extends React.PureComponent {
   }
 }
 
+RightPanel.propTypes = {
+  headings: PropTypes.arrayOf(
+    PropTypes.objectOf({
+      slug: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  githubLink: PropTypes.string.isRequired
+}
+
 const Wrapper = styled.div`
   width: 170px;
   min-width: 170px;

diff --git a/src/Documentation/SidebarMenu/SidebarMenu.js b/src/Documentation/SidebarMenu/SidebarMenu.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import PerfectScrollbar from 'perfect-scrollbar'
 import scrollIntoView from 'dom-scroll-into-view'
+import PropTypes from 'prop-types'
 
 // components
 import DownloadButton from '../../DownloadButton'
@@ -80,6 +81,14 @@ class SidebarMenuItem extends React.PureComponent {
   }
 }
 
+SidebarMenuItem.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  activePaths: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onNavigate: PropTypes.func.isRequired
+}
+
 export default class SidebarMenu extends React.Component {
   state = {
     isScrollHidden: false
@@ -135,6 +144,13 @@ export default class SidebarMenu extends React.Component {
   }
 }
 
+SidebarMenu.propTypes = {
+  id: PropTypes.string.isRequired,
+  sidebar: PropTypes.arrayOf(PropTypes.string).isRequired,
+  currentPath: PropTypes.string.isRequired,
+  onNavigate: PropTypes.func.isRequired
+}
+
 const Menu = styled.div`
   position: sticky;
   top: 60px;

diff --git a/src/Documentation/SidebarMenu/helper.test.js b/src/Documentation/SidebarMenu/helper.test.js
@@ -1,3 +1,5 @@
+/* eslint-env jest */
+
 describe('SidebarMenu/helper', () => {
   beforeEach(() => {
     jest.resetModules()

diff --git a/src/DownloadButton/index.js b/src/DownloadButton/index.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
 
 import isClient from '../utils/isClient'
@@ -170,6 +171,10 @@ export default class DownloadButton extends Component {
   }
 }
 
+DownloadButton.propTypes = {
+  openTop: PropTypes.bool
+}
+
 const Handler = styled.span`
   position: relative;
   display: inline-block;