Misc eslint and typescript fixes

Author: alse

.eslintrc

@@ -41,11 +41,11 @@
     "react/no-string-refs": 2,
     "react/no-typos": 1,
     "react/no-unknown-property": 1,
-    "react/no-unused-prop-types": 1,
+    "react/no-unused-prop-types": 0,
     "react/no-unused-state": 1,
     "react/prefer-stateless-function": 1,
     "react/prop-types": 2,
-    "react/require-default-props": 1,
+    "react/require-default-props": 0,
     "react/require-render-return": 2,
     "react/self-closing-comp": 1,
     "react/sort-comp": 1,
@@ -73,7 +73,10 @@
       "rules": {
         "no-undef": 0,
         "no-unused-vars": 0,
-        "@typescript-eslint/no-unused-vars": 2,
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          { "argsIgnorePattern": "^_" }
+        ],
         "no-unused-expressions": 0,
         "@typescript-eslint/no-unused-expressions": ["error"]
       }

Makefile

@@ -30,6 +30,11 @@ format:
 	$(info Task: format:check)
 	$(EXEC) sh -c 'npm run format:check:app || exit 255'
 
+.PHONY: types
+format:
+	$(info Task: types)
+	$(EXEC) sh -c 'npm run types || exit 255'
+
 .PHONY: build
 build:
 	$(info Task: build production)

package.json

@@ -11,8 +11,8 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
     "start-docker": "docker run -e FLOW_DEBUG=true -e FLOW_SESSIONCOOKIESSECURE=false -p 8080:8080 gcr.io/dl-flow/playground-api:latest ?",
     "snyk-protect": "snyk protect",
-    "tsc": "tsc",
-    "ci:check": "npm run format:check:app && npm run lint && npm run tsc"
+    "types": "tsc",
+    "ci:check": "npm run format:check:app && npm run lint && npm run types"
   },
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",

src/components/AccountAvatars.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { useThemeUI, Flex, Box, Badge } from 'theme-ui';
+import Avatar from 'components/Avatar';
 import { motion } from 'framer-motion';
+import React from 'react';
 import { Account, Project } from 'src/api/apollo/generated/graphql';
-import Avatar from 'components/Avatar';
+import { Badge, Box, Flex, useThemeUI } from 'theme-ui';
 
 export const AccountAvatar: React.FC<{
   onClick: (e: any, i: number) => void;
@@ -11,7 +11,7 @@ export const AccountAvatar: React.FC<{
   return (
     <motion.div>
       <Box
-        //@ts-ignore
+        // @ts-expect-error #TODO: switch to button
         onClick={onClick}
         mx="0.5rem"
         sx={{
@@ -105,7 +105,7 @@ const AccountAvatars: React.FC<{
                   }}
                 />
                 <Badge
-                  px={'5px'}
+                  px="5px"
                   sx={{
                     fontSize: 3,
                     backgroundColor: isSelected
@@ -128,5 +128,3 @@ const AccountAvatars: React.FC<{
 };
 
 export default AccountAvatars;
-
-// @ts-ignore-end

src/components/AccountPicker.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
-import { Flex, useThemeUI } from 'theme-ui';
 import { Account, Project } from 'api/apollo/generated/graphql';
 import AccountAvatars from 'components/AccountAvatars';
 import AccountSigners from 'components/AccountSigners';
+import React, { useEffect } from 'react';
+import { Flex, useThemeUI } from 'theme-ui';
 
 type AccountPickerProps = {
   project: Project;
@@ -81,7 +81,7 @@ const AccountPicker: React.FC<AccountPickerProps> = ({
           maxSelection={maxSelection}
         />
         <Flex
-          px={'0.5rem'}
+          px="0.5rem"
           sx={{
             alignItems: 'center',
           }}

src/components/AccountSigners.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-import { useThemeUI, Flex, Badge, Text } from 'theme-ui';
+import { AccountAvatar, AvatarList } from 'components/AccountAvatars';
+import Avatar from 'components/Avatar';
 import { motion } from 'framer-motion';
+import React from 'react';
 import { Account, Project } from 'src/api/apollo/generated/graphql';
-import Avatar from 'components/Avatar';
-import { AccountAvatar, AvatarList } from 'components/AccountAvatars';
+import { Badge, Flex, Text, useThemeUI } from 'theme-ui';
 
 export const Outline: React.FC = ({ children }) => {
   const { theme } = useThemeUI();
 
   return (
     <motion.div>
       <Flex
-        mx={'0.5rem'}
+        mx="0.5rem"
         sx={{
           justifyContent: 'center',
           alignItems: 'center',
@@ -100,7 +100,7 @@ const AccountSigners: React.FC<{
                   }}
                 />
                 <Badge
-                  px={'5px'}
+                  px="5px"
                   sx={{
                     fontSize: 3,
                     backgroundColor: theme.colors.primary,

src/components/ActionButton.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { motion } from 'framer-motion';
+import React from 'react';
 import { CSSProperties } from 'styled-components';
 import Button from './Button';
 
 interface ActionButtonProps {
-  children?: any;
+  children?: React.ReactNode;
   onClick?: any;
   className?: string;
   style?: CSSProperties;

src/components/Arguments/index.tsx

@@ -1,25 +1,25 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { FaRegCheckCircle, FaRegTimesCircle, FaSpinner } from 'react-icons/fa';
-import { AiFillCloseCircle } from 'react-icons/ai';
-import { motion, AnimatePresence } from 'framer-motion';
-import { EntityType } from 'providers/Project';
-import { useProject } from 'providers/Project/projectHooks';
-import { RemoveToastButton } from 'layout/RemoveToastButton';
-import { useThemeUI, Box, Text, Flex } from 'theme-ui';
 import {
   Account,
   ResultType,
   useSetExecutionResultsMutation,
 } from 'api/apollo/generated/graphql';
+import { AnimatePresence, motion } from 'framer-motion';
+import { RemoveToastButton } from 'layout/RemoveToastButton';
+import { EntityType } from 'providers/Project';
+import { useProject } from 'providers/Project/projectHooks';
+import React, { useEffect, useRef, useState } from 'react';
+import { AiFillCloseCircle } from 'react-icons/ai';
+import { FaRegCheckCircle, FaRegTimesCircle, FaSpinner } from 'react-icons/fa';
+import { Box, Flex, Text, useThemeUI } from 'theme-ui';
 
 import { ArgumentsProps } from 'components/Arguments/types';
 import { ExecuteCommandRequest } from 'monaco-languageclient';
 
 import {
   ControlContainer,
-  ToastContainer,
   HoverPanel,
   StatusMessage,
+  ToastContainer,
 } from './styles';
 
 import {
@@ -229,9 +229,9 @@ const Arguments: React.FC<ArgumentsProps> = (props) => {
   const [notifications, setNotifications] = useState<{
     [identifier: string]: string[];
   }>({});
-  /* eslint-disable */
   // compare 'state' field for each account, set 'notifications' state for new data
-  // @ts-ignore: <- this state is only used to compare and render notifications
+  // <- this state is only used to compare and render notifications
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setProjectAccts] = useState(project.accounts);
   const [counter, setCounter] = useState(0);
   useEffect(() => {

src/components/Avatar.tsx

@@ -16,7 +16,12 @@ const Avatar: React.FC<AvatarProps> = ({ seed, index, style }) => {
   }
 
   return (
-    <img className="avatar" src={avataaar(rng().toString())} style={style} />
+    <img
+      className="avatar"
+      src={avataaar(rng().toString())}
+      style={style}
+      alt="Avatar"
+    />
   );
 };
 

src/components/Button.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Button as ThemedButton } from 'theme-ui';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import React from 'react';
 import { FaSpinner } from 'react-icons/fa';
 import { CSSProperties } from 'styled-components';
+import { Button as ThemedButton } from 'theme-ui';
 
 interface StyledButtonProps {
   style?: CSSProperties;
@@ -58,7 +58,7 @@ const StyledButton: React.FC<StyledButtonProps> = styled(ThemedButton)`
 `;
 
 interface ButtonProps {
-  children?: any;
+  children?: React.ReactNode;
   onClick?: any;
   className?: string;
   style?: CSSProperties;