fix: linting issues

Author: seveibar

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly",
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+  plugins: ["react"],
+  rules: {
+    "react/prop-types": ["off"],
+  },
+}

package.json

@@ -62,6 +62,8 @@
     "@storybook/preset-create-react-app": "^3.1.4",
     "@storybook/react": "^6.0.25",
     "babel-loader": "^8.1.0",
+    "eslint": "^7.12.1",
+    "eslint-plugin-react": "^7.21.5",
     "gh-pages": "^3.1.0",
     "react-is": "^16.13.1"
   },

src/components/ControllableWave/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react"
+import React from "react"
 import MouseTransformHandler from "../MouseTransformHandler"
 import Matrix from "immutable-transform-matrix"
 import Wave from "../Wave"
@@ -9,7 +9,6 @@ export const ControllableWave = ({
   curves,
   topLevelMatrix,
   setTopLevelMatrix,
-  wave,
   width,
   height,
   onDragDuration,

src/components/DurationBox/index.js

@@ -73,6 +73,7 @@ export const DurationBox = ({
 
           return (
             <Box
+              key={i}
               color={color}
               x={startX}
               width={endX - startX}

src/components/ReactTimeSeries/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react"
+import React, { useMemo } from "react"
 import { setIn } from "seamless-immutable"
 import useEventCallback from "use-event-callback"
 import { useAsyncMemo } from "use-async-memo"
@@ -22,6 +22,7 @@ const defaultEnabledTools = [
 const defaultGraphs = [{ keyName: "value" }]
 
 export const ReactTimeSeriesWithoutContext = ({
+  // eslint-disable-next-line
   corsProxy = defaultCorsProxy,
   interface: iface,
   sample,
@@ -32,10 +33,14 @@ export const ReactTimeSeriesWithoutContext = ({
   const getRandomColorUsingHash = useGetRandomColorUsingHash()
   const {
     timeFormat,
+    // eslint-disable-next-line
     enabledTools = defaultEnabledTools,
+    // eslint-disable-next-line
     durationLabels = emptyAr,
+    // eslint-disable-next-line
     timestampLabels = emptyAr,
     graphs = defaultGraphs,
+    // eslint-disable-next-line
     allowCustomLabels,
   } = iface
   let { timeData: sampleTimeData, audioUrl, csvUrl, annotation } = sample

src/components/TimeStamp/index.js

@@ -5,53 +5,51 @@ import Color from "color"
 import useEventCallback from "use-event-callback"
 import useToolMode from "../../hooks/use-tool-mode"
 
-export const Container = styled("div")(
-  ({ left, color, textColor, hasIcon }) => ({
-    position: "absolute",
-    bottom: 2,
-    fontSize: 14,
-    fontWeight: 600,
-    whiteSpace: "pre",
-    ...(hasIcon
-      ? {
-          left: left - 14,
-          bottom: -8,
-          padding: 4,
-        }
-      : {
-          borderLeft: `1px solid ${color}`,
-          left: left,
-          padding: 4,
-          paddingLeft: 6,
-          paddingRight: 6,
-          backgroundColor: Color(color).darken(0.5).fade(0.2).string(),
-        }),
-    color: "#fff",
-    cursor: "pointer",
-    "&:hover": hasIcon
-      ? {
-          backgroundColor: Color(color).fade(0.5).string(),
-        }
-      : {
-          backgroundColor: Color(color).darken(0.6).string(),
-        },
-    "& .icon": {
-      color: color,
-      width: 20,
-      height: 20,
-    },
-    "& .stem": hasIcon
-      ? {}
-      : {
-          position: "absolute",
-          left: -1,
-          bottom: -2,
-          width: 1,
-          height: 2,
-          backgroundColor: color,
-        },
-  })
-)
+export const Container = styled("div")(({ left, color, hasIcon }) => ({
+  position: "absolute",
+  bottom: 2,
+  fontSize: 14,
+  fontWeight: 600,
+  whiteSpace: "pre",
+  ...(hasIcon
+    ? {
+        left: left - 14,
+        bottom: -8,
+        padding: 4,
+      }
+    : {
+        borderLeft: `1px solid ${color}`,
+        left: left,
+        padding: 4,
+        paddingLeft: 6,
+        paddingRight: 6,
+        backgroundColor: Color(color).darken(0.5).fade(0.2).string(),
+      }),
+  color: "#fff",
+  cursor: "pointer",
+  "&:hover": hasIcon
+    ? {
+        backgroundColor: Color(color).fade(0.5).string(),
+      }
+    : {
+        backgroundColor: Color(color).darken(0.6).string(),
+      },
+  "& .icon": {
+    color: color,
+    width: 20,
+    height: 20,
+  },
+  "& .stem": hasIcon
+    ? {}
+    : {
+        position: "absolute",
+        left: -1,
+        bottom: -2,
+        width: 1,
+        height: 2,
+        backgroundColor: color,
+      },
+}))
 
 export const TimeStamp = ({ left, color, label, onClick, onRemove }) => {
   const [toolMode] = useToolMode()

src/components/Toolbar/index.js

@@ -41,8 +41,8 @@ const Container = styled("div")(({ themeColors }) => ({
   },
 }))
 
-const getSelectFieldStyles = (themeColors, timestamp) => ({
-  control: (styles, state) => ({
+const getSelectFieldStyles = (themeColors) => ({
+  control: (styles) => ({
     ...styles,
     border: `1px solid ${
       themeColors.dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)"