Properly point the eslint config to the entire evergreen directory + autofix errors

.eslintrc.json

@@ -18,6 +18,9 @@
   },
   "plugins": ["react"],
   "rules": {
-    "space-before-function-paren": "off"
+    "space-before-function-paren": "off",
+    "no-unused-vars": "error",
+    "indent": "off",
+    "react/display-name": "off"
   }
 }

package.json

@@ -32,7 +32,7 @@
   "sideEffects": false,
   "scripts": {
     "test": "yarn run eslint && ava",
-    "eslint": "eslint src/**/*.js --fix",
+    "eslint": "eslint 'src/**/*.js'",
     "prepublishOnly": "rm -rf esm commonjs umd && yarn build",
     "dev": "start-storybook -p 6006",
     "create-package": "./tools/create-package.js",
@@ -142,7 +142,7 @@
   },
   "lint-staged": {
     "!(codemods)/**/*.js": [
-      "yarn run eslint",
+      "yarn run eslint --fix",
       "prettier --write"
     ],
     "*.{json,md}": [

src/autocomplete/src/Autocomplete.js

@@ -43,9 +43,9 @@ const AutocompleteItems = ({
   highlightedIndex,
   inputValue,
   isFilterDisabled,
+  itemToString,
   itemsFilter = fuzzyFilter(itemToString),
   itemSize,
-  itemToString,
   originalItems,
   popoverMaxHeight,
   renderItem,

src/buttons/src/Button.js

@@ -6,7 +6,7 @@ import { IconWrapper } from '../../icons/src/IconWrapper'
 import { Spinner } from '../../spinner'
 import useButtonAppearance from '../../theme/src/hooks/useButtonAppearance'
 
-/* eslint-disable-next-line react/prop-types */
+/* eslint-disable react/prop-types */
 const ButtonIcon = memo(function ButtonIcon({ icon, size, spacing, edge }) {
   if (!icon) return null
 
@@ -25,6 +25,7 @@ const ButtonIcon = memo(function ButtonIcon({ icon, size, spacing, edge }) {
     />
   )
 })
+/* eslint-enable react/prop-types */
 
 export const internalStyles = {
   position: 'relative',

src/checkbox/stories/index.stories.js

@@ -10,14 +10,14 @@ const refCallback = el => {
 }
 
 function IndeterminateWithRefExample() {
+  const ref = useRef()
+
   useEffect(() => {
     if (ref && ref.current) {
       refCallback(ref.current)
     }
   }, [ref])
 
-  const ref = useRef()
-
   return (
     <Checkbox
       checked

src/corner-dialog/src/CornerDialog.js

@@ -12,9 +12,9 @@ import positions from '../../constants/src/Position'
 import { CrossIcon } from '../../icons'
 
 const animationEasing = {
-  deceleration: `cubic-bezier(0.0, 0.0, 0.2, 1)`,
-  acceleration: `cubic-bezier(0.4, 0.0, 1, 1)`,
-  spring: `cubic-bezier(0.175, 0.885, 0.320, 1.175)`
+  deceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+  acceleration: 'cubic-bezier(0.4, 0.0, 1, 1)',
+  spring: 'cubic-bezier(0.175, 0.885, 0.320, 1.175)'
 }
 
 const ANIMATION_DURATION = 240

src/dialog/src/Dialog.js

@@ -9,8 +9,8 @@ import { Button, IconButton } from '../../buttons'
 import { CrossIcon } from '../../icons'
 
 const animationEasing = {
-  deceleration: `cubic-bezier(0.0, 0.0, 0.2, 1)`,
-  acceleration: `cubic-bezier(0.4, 0.0, 1, 1)`
+  deceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+  acceleration: 'cubic-bezier(0.4, 0.0, 1, 1)'
 }
 
 const ANIMATION_DURATION = 200

src/file-picker/src/FilePicker.js

@@ -47,9 +47,10 @@ const FilePicker = memo(
     const handleBlur = useCallback(
       e => {
         // Setting e.target.files to an array fails. It must be a FileList
-        if (e && e.target)
+        if (e && e.target) {
           e.target.files =
             fileInputRef && fileInputRef.current && fileInputRef.current.files
+        }
 
         safeInvoke(onBlur, e)
       },

src/overlay/src/Overlay.js

@@ -15,11 +15,11 @@ const noop = () => {}
 const emptyProps = {}
 
 const animationEasing = {
-  standard: `cubic-bezier(0.4, 0.0, 0.2, 1)`,
-  deceleration: `cubic-bezier(0.0, 0.0, 0.2, 1)`,
-  acceleration: `cubic-bezier(0.4, 0.0, 1, 1)`,
-  sharp: `cubic-bezier(0.4, 0.0, 0.6, 1)`,
-  spring: `cubic-bezier(0.175, 0.885, 0.320, 1.175)`
+  standard: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+  deceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+  acceleration: 'cubic-bezier(0.4, 0.0, 1, 1)',
+  sharp: 'cubic-bezier(0.4, 0.0, 0.6, 1)',
+  spring: 'cubic-bezier(0.175, 0.885, 0.320, 1.175)'
 }
 
 const ANIMATION_DURATION = 240

src/positioner/src/Positioner.js

@@ -8,7 +8,7 @@ import { useMergedRef, usePrevious } from '../../hooks'
 import getPosition from './getPosition'
 
 const animationEasing = {
-  spring: `cubic-bezier(0.175, 0.885, 0.320, 1.175)`
+  spring: 'cubic-bezier(0.175, 0.885, 0.320, 1.175)'
 }
 
 const getCSS = ({ initialScale, animationDuration }) => ({
@@ -21,7 +21,7 @@ const getCSS = ({ initialScale, animationDuration }) => ({
   '&[data-state="entering"], &[data-state="entered"]': {
     opacity: 1,
     visibility: 'visible',
-    transform: `scale(1)`
+    transform: 'scale(1)'
   },
   '&[data-state="exiting"]': {
     opacity: 0,

src/radio/src/Radio.js

@@ -76,7 +76,7 @@ const Radio = memo(
           width={size}
           height={size}
         >
-          <CircleIcon size={size/2} />
+          <CircleIcon size={size / 2} />
         </Box>
         {label && (
           <Text

src/select-menu/src/OptionsList.js

@@ -85,6 +85,8 @@ const OptionsList = memo(function OptionsList(props) {
     [optionsFilter, searchValue]
   )
 
+  const options = search(originalOptions)
+
   const getFilteredOptions = useCallback(() => {
     return search(options)
   }, [options])
@@ -210,7 +212,6 @@ const OptionsList = memo(function OptionsList(props) {
     }
   }, [selected])
 
-  const options = search(originalOptions)
   const listHeight = height - (hasFilter ? 32 : 0)
   const currentIndex = getCurrentIndex()
   const scrollToIndex = currentIndex === -1 ? 0 : currentIndex

src/side-sheet/src/SheetClose.js

@@ -6,8 +6,8 @@ import { CrossIcon } from '../../icons'
 import { Position } from '../../constants'
 
 const animationEasing = {
-  deceleration: `cubic-bezier(0.0, 0.0, 0.2, 1)`,
-  acceleration: `cubic-bezier(0.4, 0.0, 1, 1)`
+  deceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+  acceleration: 'cubic-bezier(0.4, 0.0, 1, 1)'
 }
 
 const ANIMATION_DURATION = 240
@@ -17,13 +17,13 @@ const sharedStyles = {
   borderRadius: 9999,
   position: 'absolute',
   cursor: 'pointer',
-  backgroundColor: `rgba(255, 255, 255, 0.4)`,
-  transition: `background-color 120ms`,
+  backgroundColor: 'rgba(255, 255, 255, 0.4)',
+  transition: 'background-color 120ms',
   '&:hover': {
-    backgroundColor: `rgba(255, 255, 255, 0.6)`
+    backgroundColor: 'rgba(255, 255, 255, 0.6)'
   },
   '&:active': {
-    backgroundColor: `rgba(255, 255, 255, 0.4)`
+    backgroundColor: 'rgba(255, 255, 255, 0.4)'
   }
 }
 
@@ -43,31 +43,31 @@ const sheetCloseStyles = {
     left: 0,
     marginLeft: -12,
     marginTop: 12,
-    transform: `translateX(-100%)`,
+    transform: 'translateX(-100%)',
     ...withAnimations(
       css.keyframes('rotate360InAnimation', {
-        from: { transform: `translateX(100%) rotate(0deg)` },
-        to: { transform: `translateX(-100%) rotate(-360deg)` }
+        from: { transform: 'translateX(100%) rotate(0deg)' },
+        to: { transform: 'translateX(-100%) rotate(-360deg)' }
       }),
       css.keyframes('rotate360OutAnimation', {
-        from: { transform: `translateX(-100%) rotate(0deg)` },
-        to: { transform: `translateX(100%) rotate(360deg)` }
+        from: { transform: 'translateX(-100%) rotate(0deg)' },
+        to: { transform: 'translateX(100%) rotate(360deg)' }
       })
     )
   },
   [Position.LEFT]: {
     marginRight: -12,
     right: 0,
     marginTop: 12,
-    transform: `translateX(100%)`,
+    transform: 'translateX(100%)',
     ...withAnimations(
       css.keyframes('leftRotate360InAnimation', {
-        from: { transform: `translateX(-100%) rotate(0deg)` },
-        to: { transform: `translateX(100%), rotate(360deg)` }
+        from: { transform: 'translateX(-100%) rotate(0deg)' },
+        to: { transform: 'translateX(100%), rotate(360deg)' }
       }),
       css.keyframes('leftRotate360OutAnimation', {
-        from: { transform: `translateX(100%) rotate(0deg)` },
-        to: { transform: `translateX(-100%), rotate(360deg)` }
+        from: { transform: 'translateX(100%) rotate(0deg)' },
+        to: { transform: 'translateX(-100%), rotate(360deg)' }
       })
     )
   },
@@ -76,15 +76,15 @@ const sheetCloseStyles = {
     marginRight: 12,
     top: '100%',
     marginTop: 12,
-    transform: `translateY(0)`,
+    transform: 'translateY(0)',
     ...withAnimations(
       css.keyframes('topRotate360InAnimation', {
-        from: { transform: `translateY(-200%) rotate(0deg)` },
-        to: { transform: `translateY(0%), rotate(360deg)` }
+        from: { transform: 'translateY(-200%) rotate(0deg)' },
+        to: { transform: 'translateY(0%), rotate(360deg)' }
       }),
       css.keyframes('topRotate360OutAnimation', {
-        from: { transform: `translateY(0%) rotate(0deg)` },
-        to: { transform: `translateY(-200%), rotate(360deg)` }
+        from: { transform: 'translateY(0%) rotate(0deg)' },
+        to: { transform: 'translateY(-200%), rotate(360deg)' }
       })
     )
   },
@@ -93,15 +93,15 @@ const sheetCloseStyles = {
     marginRight: 12,
     bottom: '100%',
     marginBottom: 12,
-    transform: `translateY(0)`,
+    transform: 'translateY(0)',
     ...withAnimations(
       css.keyframes('bottomRotate360InAnimation', {
-        from: { transform: `translateY(200%) rotate(0deg)` },
-        to: { transform: `translateY(0%), rotate(360deg)` }
+        from: { transform: 'translateY(200%) rotate(0deg)' },
+        to: { transform: 'translateY(0%), rotate(360deg)' }
       }),
       css.keyframes('bottomRotate360OutAnimation', {
-        from: { transform: `translateY(0%) rotate(0deg)` },
-        to: { transform: `translateY(200%), rotate(360deg)` }
+        from: { transform: 'translateY(0%) rotate(0deg)' },
+        to: { transform: 'translateY(200%), rotate(360deg)' }
       })
     )
   }

src/side-sheet/src/SideSheet.js

@@ -53,8 +53,8 @@ const subpaneProps = {
 }
 
 const animationEasing = {
-  deceleration: `cubic-bezier(0.0, 0.0, 0.2, 1)`,
-  acceleration: `cubic-bezier(0.4, 0.0, 1, 1)`
+  deceleration: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+  acceleration: 'cubic-bezier(0.4, 0.0, 1, 1)'
 }
 
 const ANIMATION_DURATION = 240
@@ -72,54 +72,54 @@ const withAnimations = (animateIn, animateOut) => {
 
 const animationStylesClass = {
   [Position.LEFT]: {
-    transform: `translateX(-100%)`,
+    transform: 'translateX(-100%)',
     ...withAnimations(
       css.keyframes('anchoredLeftSlideInAnimation', {
-        from: { transform: `translateX(-100%)` },
-        to: { transform: `translateX(0)` }
+        from: { transform: 'translateX(-100%)' },
+        to: { transform: 'translateX(0)' }
       }),
       css.keyframes('anchoredLeftSlideOutAnimation', {
-        from: { transform: `translateX(0)` },
-        to: { transform: `translateX(-100%)` }
+        from: { transform: 'translateX(0)' },
+        to: { transform: 'translateX(-100%)' }
       })
     )
   },
   [Position.RIGHT]: {
-    transform: `translateX(100%)`,
+    transform: 'translateX(100%)',
     ...withAnimations(
       css.keyframes('anchoredRightSlideInAnimation', {
-        from: { transform: `translateX(100%)` },
-        to: { transform: `translateX(0)` }
+        from: { transform: 'translateX(100%)' },
+        to: { transform: 'translateX(0)' }
       }),
       css.keyframes('anchoredRightSlideOutAnimation', {
-        from: { transform: `translateX(0)` },
-        to: { transform: `translateX(100%)` }
+        from: { transform: 'translateX(0)' },
+        to: { transform: 'translateX(100%)' }
       })
     )
   },
   [Position.TOP]: {
-    transform: `translateY(-100%)`,
+    transform: 'translateY(-100%)',
     ...withAnimations(
       css.keyframes('anchoredTopSlideInAnimation', {
-        from: { transform: `translateY(-100%)` },
-        to: { transform: `translateY(0)` }
+        from: { transform: 'translateY(-100%)' },
+        to: { transform: 'translateY(0)' }
       }),
       css.keyframes('anchoredTopSlideOutAnimation', {
-        from: { transform: `translateY(0)` },
-        to: { transform: `translateY(-100%)` }
+        from: { transform: 'translateY(0)' },
+        to: { transform: 'translateY(-100%)' }
       })
     )
   },
   [Position.BOTTOM]: {
-    transform: `translateY(100%)`,
+    transform: 'translateY(100%)',
     ...withAnimations(
       css.keyframes('anchoredBottomSlideInAnimation', {
-        from: { transform: `translateY(100%)` },
-        to: { transform: `translateY(0)` }
+        from: { transform: 'translateY(100%)' },
+        to: { transform: 'translateY(0)' }
       }),
       css.keyframes('anchoredBottomSlideOutAnimation', {
-        from: { transform: `translateY(0)` },
-        to: { transform: `translateY(100%)` }
+        from: { transform: 'translateY(0)' },
+        to: { transform: 'translateY(100%)' }
       })
     )
   }

src/switch/src/Switch.js

@@ -5,7 +5,7 @@ import Box, { spacing, position, layout } from 'ui-box'
 import useSwitchAppearance from '../../theme/src/hooks/useSwitchAppearance'
 
 const animationEasing = {
-  spring: `cubic-bezier(0.175, 0.885, 0.320, 1.175)`
+  spring: 'cubic-bezier(0.175, 0.885, 0.320, 1.175)'
 }
 
 const handleStyleClass = css({

src/table/src/EditableCell.js

@@ -97,7 +97,7 @@ const EditableCell = memo(function EditableCell(props) {
         }}
         {...rest}
       >
-        {children ? children : placeholder}
+        {children || placeholder}
       </TextTableCell>
       {isEditing && (
         <Portal>

src/table/src/SearchTableHeaderCell.js

@@ -18,7 +18,7 @@ const invisibleInputClass = css({
   },
 
   '&::placeholder': {
-    color: `rgba(67, 90, 111, 0.7)`
+    color: 'rgba(67, 90, 111, 0.7)'
   }
 }).toString()