chore: add eslint (#231)

* chore: add eslint

* ci: add lint step to ci workflow

* chore(eslint): resolve errors

Co-authored-by: Dhaiwat Pandya <[email protected]>

Author: with-heart

.eslintrc

@@ -0,0 +1,20 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:jest/recommended",
+    "plugin:jest-dom/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
+  }
+}

.github/workflows/ci.yaml

@@ -25,6 +25,8 @@ jobs:
           key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
       - name: Install Dependencies
         run: yarn install
+      - name: Lint code
+        run: yarn lint
       - name: Test code
         run: yarn test
       - name: Build

package.json

@@ -12,6 +12,7 @@
     "prepare": "husky install",
     "format": "prettier --write",
     "build": "preconstruct build",
+    "lint": "eslint packages/**/src/ --ext .ts,.tsx --config .eslintrc",
     "test": "jest",
     "test:watch": "yarn test --watch",
     "test:coverage": "jest --coverage --colors",
@@ -33,11 +34,19 @@
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.9.0",
+    "@typescript-eslint/parser": "^5.9.0",
     "chromatic": "^6.1.0",
+    "eslint": "^8.6.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jest": "^25.3.4",
+    "eslint-plugin-jest-dom": "^4.0.1",
+    "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "lint-staged": "^12.1.3",
     "msw": "^0.35.0",
+    "prettier": "^2.5.1",
     "ts-jest": "^26.4.4",
     "whatwg-fetch": "^3.6.2"
   },

packages/components/src/components/Address/Address.stories.tsx

@@ -6,7 +6,7 @@ import { Button, VStack } from '@chakra-ui/react';
 
 export default {
   title: 'Components/Address',
-  component: Address
+  component: Address,
 };
 
 export const Default = () => <Address value="testaddress.eth" />;

packages/components/src/components/Address/Address.test.tsx

@@ -4,21 +4,21 @@ import {
   render,
   fireEvent,
   waitFor,
-  getByTestId
+  getByTestId,
 } from '@testing-library/react';
 
 import { Address } from './Address';
 
 /**
  * We need to mock the Clipboard API by creating a global navigator object.
  *
- * We're assigning an empty function to `writeText`
- * as we're only testing if it has been called with specific argument.
+ * We're assigning a mocked jest function to `writeText` as we're only testing
+ * if it has been called with specific argument.
  */
 Object.assign(navigator, {
   clipboard: {
-    writeText: () => {}
-  }
+    writeText: jest.fn(),
+  },
 });
 
 describe('Address', () => {
@@ -45,8 +45,6 @@ describe('Address copiable prop true', () => {
     const { container } = render(<Address copiable value="taylorswift.eth" />);
     const addressContainer = getByTestId(container, 'address-container');
 
-    jest.spyOn(navigator.clipboard, 'writeText');
-
     fireEvent.click(addressContainer);
 
     await waitFor(() => {
@@ -60,6 +58,6 @@ describe('Address copiable prop true', () => {
     const { container } = render(
       <Address value="0x00000000000000" shortened />
     );
-    expect(container.textContent).toContain('0x00...0000');
+    expect(container).toHaveTextContent('0x00...0000');
   });
 });

packages/components/src/components/Address/Address.tsx

@@ -3,7 +3,7 @@ import {
   Flex,
   FormControl,
   FormErrorMessage,
-  Text
+  Text,
 } from '@chakra-ui/react';
 import { CopyIcon, CheckIcon } from '@chakra-ui/icons';
 import React, { useState, useEffect } from 'react';
@@ -29,7 +29,7 @@ export interface AddressProps {
 export const Address: React.FC<AddressProps> = ({
   value,
   copiable = false,
-  shortened = false
+  shortened = false,
 }) => {
   const [error, setError] = useState<null | string>(null);
   const [copied, setCopied] = useState<boolean>(false);

packages/components/src/components/AddressInput/AddressInput.stories.tsx

@@ -9,8 +9,8 @@ export default {
   component: AddressInput,
   parameters: {
     // TODO: Fix window.ethereum is undefined breaking chromatic
-    chromatic: { disableSnapshot: true }
-  }
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 const WithUseWallet = () => {
@@ -21,7 +21,7 @@ const WithUseWallet = () => {
     <VStack>
       <AddressInput
         value={value}
-        onChange={e => setValue(e)}
+        onChange={(e) => setValue(e)}
         provider={provider!}
       />
       <Text>Value: {value}</Text>
@@ -40,7 +40,7 @@ const Component = ({ ...props }) => {
     <VStack>
       <AddressInput
         value={value}
-        onChange={e => setValue(e)}
+        onChange={(e) => setValue(e)}
         provider={provider}
         placeholder="Enter input address"
         {...props}

packages/components/src/components/AddressInput/AddressInput.test.tsx

@@ -18,16 +18,16 @@ const WINDOW_ETHEREUM = {
     }
 
     throw Error(`Unknown request: ${request.method}`);
-  }
+  },
 };
 
 jest.mock('ethers', () => {
   const original = jest.requireActual('ethers');
   return {
     ...original,
     ethers: {
-      ...original.ethers
-    }
+      ...original.ethers,
+    },
   };
 });
 
@@ -38,7 +38,7 @@ const Component = () => {
   return (
     <AddressInput
       value={value}
-      onChange={e => setValue(e)}
+      onChange={(e) => setValue(e)}
       provider={provider}
       placeholder="Input address"
     />
@@ -48,7 +48,7 @@ const Component = () => {
 describe('AddressInput', () => {
   it('renders AddressInput correctly', () => {
     const { container } = render(<Component />);
-    expect(container);
+    expect(container).toBeTruthy();
   });
 
   it('changes Input value correctly', () => {

packages/components/src/components/AddressInput/AddressInput.tsx

@@ -3,7 +3,7 @@ import {
   FormLabel,
   Input,
   FormErrorMessage,
-  InputProps
+  InputProps,
 } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 import { ethers } from 'ethers';
@@ -34,7 +34,7 @@ export interface AddressInputProps {
  */
 export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
   provider,
-  value,
+  value: _value,
   onChange,
   label,
   ...props
@@ -46,7 +46,7 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
 
   const getAddressFromEns = async () => {
     try {
-      let address = await provider.resolveName(debouncedValue);
+      const address = await provider.resolveName(debouncedValue);
       if (!address) {
         setError('Invalid Input');
       }
@@ -67,7 +67,7 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
         debouncedValue.endsWith('.eth') ||
         debouncedValue.endsWith('.xyz')
       ) {
-        getAddressFromEns().then(address => onChange(address ? address : ''));
+        getAddressFromEns().then((address) => onChange(address ? address : ''));
       }
     }
   }, [debouncedValue]);
@@ -85,7 +85,7 @@ export const AddressInput: React.FC<AddressInputProps & InputProps> = ({
       <Input
         isInvalid={!!error}
         value={inputValue}
-        onChange={e => setInputValue(e.target.value)}
+        onChange={(e) => setInputValue(e.target.value)}
         {...props}
       />
       <FormErrorMessage>{error ? ' ' + error : ''}</FormErrorMessage>

packages/components/src/components/NFT/NFT.stories.tsx

@@ -3,7 +3,7 @@ import { NFT } from '.';
 
 export default {
   title: 'Components/NFT',
-  component: NFT
+  component: NFT,
 };
 
 export const image = () => (