Merge branch '19-fix-coding-style-and-rule' into 'master'

Resolve "fix coding style and rule"

Closes #19

See merge request cloud/external/kangaroo_client!6

.babelrc

@@ -1,52 +1,53 @@
 {
-  "presets": [
-    "next/babel"
-  ],
+  "presets": ["next/babel"],
   "plugins": [
-    ["inline-react-svg", {
-      "svgo": {
-        "plugins": [
-          { "cleanupAttrs": true },
-          { "removeDoctype": true },
-          { "removeXMLProcInst": true },
-          { "removeComments": true },
-          { "removeMetadata": true },
-          { "removeDesc": true },
-          { "removeUselessDefs": true },
-          { "removeEditorsNSData": true },
-          { "removeEmptyAttrs": true },
-          { "removeHiddenElems": true },
-          { "removeEmptyText": true },
-          { "removeEmptyContainers": true },
-          { "cleanupEnableBackground": true },
-          { "minifyStyles": true },
-          { "convertStyleToAttrs": true },
-          { "convertColors": true },
-          { "convertPathData": true },
-          { "convertTransform": true },
-          { "removeUnknownsAndDefaults": true },
-          { "removeNonInheritableGroupAttrs": true },
-          { "removeUselessStrokeAndFill": true },
-          { "removeUnusedNS": true },
-          { "cleanupIDs": true },
-          { "cleanupNumericValues": true },
-          { "cleanupListOfValues": true },
-          { "moveElemsAttrsToGroup": true },
-          { "moveGroupAttrsToElems": true },
-          { "collapseGroups": true },
-          { "mergePaths": true },
-          { "convertShapeToPath": true },
-          { "removeXMLNS": true }
-        ]
+    [
+      "inline-react-svg",
+      {
+        "svgo": {
+          "plugins": [
+            { "cleanupAttrs": true },
+            { "removeDoctype": true },
+            { "removeXMLProcInst": true },
+            { "removeComments": true },
+            { "removeMetadata": true },
+            { "removeDesc": true },
+            { "removeUselessDefs": true },
+            { "removeEditorsNSData": true },
+            { "removeEmptyAttrs": true },
+            { "removeHiddenElems": true },
+            { "removeEmptyText": true },
+            { "removeEmptyContainers": true },
+            { "cleanupEnableBackground": true },
+            { "minifyStyles": true },
+            { "convertStyleToAttrs": true },
+            { "convertColors": true },
+            { "convertPathData": true },
+            { "convertTransform": true },
+            { "removeUnknownsAndDefaults": true },
+            { "removeNonInheritableGroupAttrs": true },
+            { "removeUselessStrokeAndFill": true },
+            { "removeUnusedNS": true },
+            { "cleanupIDs": true },
+            { "cleanupNumericValues": true },
+            { "cleanupListOfValues": true },
+            { "moveElemsAttrsToGroup": true },
+            { "moveGroupAttrsToElems": true },
+            { "collapseGroups": true },
+            { "mergePaths": true },
+            { "convertShapeToPath": true },
+            { "removeXMLNS": true }
+          ]
+        }
       }
-    }],
+    ],
     [
-      "babel-plugin-styled-components", 
+      "babel-plugin-styled-components",
       {
-        "ssr": true, 
-        "displayName": true, 
-        "preprocess": false 
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
       }
     ]
   ]
-}
+}

.eslintignore

@@ -3,4 +3,6 @@
 **/__mocks__/**
 **/next-env.d.ts
 **/polyfill.js
-**/next.config.js
+**/next.config.js
+**/_document.js
+**/_app.js

.eslintrc.json

@@ -1,76 +1,34 @@
 {
   "env": {
+    "es6": true,
     "browser": true,
-    "es6": true
+    "jest": true,
+    "node": true
   },
   "extends": [
+    "eslint:recommended",
     "plugin:react/recommended",
-    "airbnb",
     "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint"
   ],
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
-  },
   "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 2018,
-    "sourceType": "module"
-  },
-  "plugins": [
-    "react",
-    "@typescript-eslint",
-    "prettier"
-  ],
+  "plugins": ["jsx-a11y", "@typescript-eslint", "prettier"],
   "rules": {
-    "import/extensions": [
-      "error",
-      "ignorePackages",
-      {
-        "js": "never",
-        "jsx": "never",
-        "ts": "never",
-        "tsx": "never"
-      }
-    ],
-    "prettier/prettier": "error",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-unused-vars": "off",
-    "camelcase": "off",
-    "@typescript-eslint/camelcase": [
-      0,
-      {
-        "properties": "never"
-      }
-    ],
-    "react/jsx-props-no-spreading": "off",
-    "react/jsx-filename-extension": [
-      1,
-      {
-        "extensions": [
-          ".js",
-          ".jsx",
-          ".ts",
-          ".tsx"
-        ]
-      }
-    ]
+    "react/display-name": "off",
+    // "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
   },
   "settings": {
+    "react": {
+      "version": "detect"
+    },
     "import/resolver": {
       "node": {
-        "extensions": [
-          ".js",
-          ".jsx",
-          ".ts",
-          ".tsx"
-        ]
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
     }
   }
-}
+}

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+.next
+yarn.lock
+package-lock.json
+public
+out

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5"
-}
+  "trailingComma": "all"
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

README.md

@@ -1,2 +1,3 @@
 # PDF Reader Web
+
 Web solution to view & highlight PDF Files

__test__/button.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-undef */
 import React from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
@@ -18,7 +17,7 @@ describe('Button component', () => {
 
   test('check button primary theme', () => {
     const { getByText } = render(
-      <Button appearance="primary">btn content</Button>
+      <Button appearance="primary">btn content</Button>,
     );
 
     expect(getByText('btn content')).toHaveStyle(`
@@ -34,7 +33,7 @@ describe('Button component', () => {
       counter += 1;
     };
     const { getByText } = render(
-      <Button onClick={handleClick}>btn content</Button>
+      <Button onClick={handleClick}>btn content</Button>,
     );
 
     fireEvent.mouseDown(getByText('btn content'));

__test__/dialog.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-undef */
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';

__test__/drawer.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-undef */
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
@@ -16,9 +15,7 @@ describe('Drawer component', () => {
   test('close drawer', () => {
     const { getByTestId } = render(<Drawer>content</Drawer>);
     const ele = getByTestId('drawer');
-    const style = window.getComputedStyle(ele as HTMLElement) as {
-      [key: string]: any;
-    };
+    const style = window.getComputedStyle(ele as HTMLElement);
 
     expect(style.transform).toBe('translate(0,267px)');
   });
@@ -26,9 +23,7 @@ describe('Drawer component', () => {
   test('open drawer', () => {
     const { getByTestId } = render(<Drawer open>content</Drawer>);
     const ele = getByTestId('drawer');
-    const style = window.getComputedStyle(ele as HTMLElement) as {
-      [key: string]: any;
-    };
+    const style = window.getComputedStyle(ele as HTMLElement);
 
     expect(style.transform).toBe('translate(0,0)');
   });

__test__/inputBox.test.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-undef */
 import React from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import InputBox from '../components/InputBox';
+import TextareaBox from '../components/TextareaBox';
 
 describe('Input Box component', () => {
   afterEach(cleanup);
@@ -16,7 +16,7 @@ describe('Input Box component', () => {
   });
 
   test('textarea element', () => {
-    const { container } = render(<InputBox variant="multiline" />);
+    const { container } = render(<TextareaBox />);
     const textAreaNode = container.querySelector('TextArea') as HTMLElement;
     expect(textAreaNode.tagName).toBe('TEXTAREA');
   });
@@ -32,7 +32,7 @@ describe('Input Box component', () => {
   test('check disabled input', () => {
     const handleChange = jest.fn();
     const { getByTestId } = render(
-      <InputBox disabled onChange={handleChange} />
+      <InputBox disabled onChange={handleChange} />,
     );
     fireEvent.change(getByTestId('input'), { target: { value: 'text' } });
 

__test__/selectBox.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-undef */
 import React from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
@@ -12,19 +11,19 @@ describe('SelectBox component', () => {
     {
       key: 1,
       content: 'option 1',
-      value: 1,
+      child: 1,
     },
     {
       key: 2,
       content: 'option 2',
-      value: 2,
+      child: 2,
     },
   ];
 
   test('default value', () => {
     const { getAllByTestId } = render(<SelectBox options={options} />);
     const ele = getAllByTestId('selected')[0].querySelector(
-      'div'
+      'div',
     ) as HTMLDivElement;
 
     expect(ele.textContent).toBe('option 1');
@@ -34,7 +33,7 @@ describe('SelectBox component', () => {
     const { container } = render(<SelectBox options={options} />);
 
     fireEvent.mouseDown(
-      container.querySelector('[data-testid="selected"]') as HTMLElement
+      container.querySelector('[data-testid="selected"]') as HTMLElement,
     );
 
     expect(container.querySelectorAll('span')[1].textContent).toBe('option 2');

__test__/slider.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-undef */
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';

__test__/typography.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-undef */
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
@@ -11,7 +10,7 @@ describe('Typography component', () => {
 
   test('check title style', () => {
     const { getByText } = render(
-      <Typography variant="title">title</Typography>
+      <Typography variant="title">title</Typography>,
     );
 
     expect(getByText('title')).toHaveStyle('font-size: 16px;color: #000000;');
@@ -19,7 +18,7 @@ describe('Typography component', () => {
 
   test('check subtitle style', () => {
     const { queryByText } = render(
-      <Typography variant="subtitle">title</Typography>
+      <Typography variant="subtitle">title</Typography>,
     );
 
     expect(queryByText('title')).toHaveStyle('font-size: 14px;color: #000000;');

actions/index.ts

@@ -1,9 +1,8 @@
-import { Dispatch } from 'react';
 import pdfActions from './pdf';
 import mainActions from './main';
 import searchActions from './search';
 
-const useActions = (dispatch: Dispatch<any>): Record<string, any> => ({
+const useActions: ActionType = (dispatch) => ({
   ...pdfActions(dispatch),
   ...mainActions(dispatch),
   ...searchActions(dispatch),

actions/main.ts

@@ -1,18 +1,13 @@
 import * as types from '../constants/actionTypes';
 
-const actions: ActionType = dispatch => ({
-  toggleDisplayMode: (state: string): void =>
+const actions: ActionType = (dispatch) => ({
+  toggleDisplayMode: (state) =>
     dispatch({ type: types.TOGGLE_DISPLAY_MODE, payload: state }),
-  setNavbar: (state: string): void =>
-    dispatch({ type: types.SET_NAVBAR, payload: state }),
-  setSidebar: (state: string): void =>
-    dispatch({ type: types.SET_SIDEBAR, payload: state }),
-  setTool: (state: string): void =>
-    dispatch({ type: types.SET_TOOL, payload: state }),
-  setInfo: (state: Record<string, any>): void =>
-    dispatch({ type: types.SET_INFO, payload: state }),
-  setLoading: (state: boolean): void =>
-    dispatch({ type: types.SET_LOADING, payload: state }),
+  setNavbar: (state) => dispatch({ type: types.SET_NAVBAR, payload: state }),
+  setSidebar: (state) => dispatch({ type: types.SET_SIDEBAR, payload: state }),
+  setTool: (state) => dispatch({ type: types.SET_TOOL, payload: state }),
+  setInfo: (state) => dispatch({ type: types.SET_INFO, payload: state }),
+  setLoading: (state) => dispatch({ type: types.SET_LOADING, payload: state }),
 });
 
 export default actions;

actions/pdf.ts

@@ -1,28 +1,25 @@
 import * as types from '../constants/actionTypes';
 
-const actions: ActionType = dispatch => ({
-  setTotalPage: (page: number): void =>
+const actions: ActionType = (dispatch) => ({
+  setTotalPage: (page) =>
     dispatch({ type: types.SET_TOTAL_PAGE, payload: page }),
-  setCurrentPage: (page: number): void =>
+  setCurrentPage: (page) =>
     dispatch({ type: types.SET_CURRENT_PAGE, payload: page }),
-  setPdf: (pdf: Record<string, any>): void =>
-    dispatch({ type: types.SET_PDF, payload: pdf }),
-  setProgress: (progress: ProgressType): void =>
+  setPdf: (pdf) => dispatch({ type: types.SET_PDF, payload: pdf }),
+  setProgress: (progress) =>
     dispatch({ type: types.SET_PROGRESS, payload: progress }),
-  setViewport: (viewport: ViewportType): void =>
+  setViewport: (viewport) =>
     dispatch({ type: types.SET_VIEWPORT, payload: viewport }),
-  changeScale: (scale: number | string): void =>
+  changeScale: (scale) =>
     dispatch({ type: types.CHANGE_SCALE, payload: scale }),
-  changeRotate: (rotation: number): void =>
+  changeRotate: (rotation) =>
     dispatch({ type: types.CHANGE_ROTATE, payload: rotation }),
-  addAnnots: (annotations: AnnotationType[], init = true): void =>
+  addAnnots: (annotations, init = true) =>
     dispatch({ type: types.ADD_ANNOTS, payload: { annotations, init } }),
-  updateAnnots: (annotations: AnnotationType[]): void =>
+  updateAnnots: (annotations) =>
     dispatch({ type: types.UPDATE_ANNOTS, payload: annotations }),
-  updateWatermark: (watermark: WatermarkType): void =>
+  updateWatermark: (watermark) =>
     dispatch({ type: types.UPDATE_WATERMARK, payload: watermark }),
-  setTextDivs: (pageNum: number, elements: HTMLElement[]): void =>
-    dispatch({ type: types.SET_TEXT_DIV, payload: { [pageNum]: elements } }),
 });
 
 export default actions;

actions/search.ts

@@ -1,11 +1,11 @@
 import * as types from '../constants/actionTypes';
 
-const actions: ActionType = dispatch => ({
-  setQueryString: (state: string): void =>
+const actions: ActionType = (dispatch) => ({
+  setQueryString: (state) =>
     dispatch({ type: types.SET_QUERY_STRING, payload: state }),
-  setCurrentIndex: (state: number): void =>
+  setCurrentIndex: (state) =>
     dispatch({ type: types.SET_CURRENT_INDEX, payload: state }),
-  setMatchesMap: (state: MatchType[]): void =>
+  setMatchesMap: (state) =>
     dispatch({ type: types.SET_MATCHES_MAP, payload: state }),
 });
 

apis/index.ts

@@ -2,7 +2,7 @@ import invokeApi from '../helpers/apiHelpers';
 import apiPath from '../constants/apiPath';
 import config from '../config';
 
-export const initialPdfFile = async (token: string): Promise<any> =>
+export const initialPdfFile = async (token: string): Promise<unknown> =>
   invokeApi({
     path: apiPath.initPdf,
     method: 'GET',
@@ -11,16 +11,19 @@ export const initialPdfFile = async (token: string): Promise<any> =>
     },
   });
 
-export const saveFile = async (token: string, data: any): Promise<any> =>
+export const saveFile = async (
+  token: string,
+  data: Record<string, unknown>,
+): Promise<unknown> =>
   invokeApi({
     path: `${apiPath.saveFile}?f=${token}`,
     method: 'POST',
     data,
   });
 
-export const fetchXfdf = (token: string): Promise<any> =>
-  fetch(`${config.API_HOST}${apiPath.getXfdf}?f=${token}`).then(res =>
-    res.text()
+export const fetchXfdf = (token: string): Promise<string> =>
+  fetch(`${config.API_HOST}${apiPath.getXfdf}?f=${token}`).then((res) =>
+    res.text(),
   );
 
 export default {};

bitbucket-pipelines.yml

@@ -1,34 +0,0 @@
-# This is a sample build configuration for Docker.
-# Check our guides at https://confluence.atlassian.com/x/O1toN for more examples.
-# Only use spaces to indent your .yml configuration.
-# -----
-# You can specify a custom docker image from Docker Hub as your build environment.
-# image: atlassian/default-image:latest
-
-# enable Docker for your repository
-options:
-  docker: true
-
-image: kdanmobile/10.14.2:latest
-
-
-pipelines:
-  branches:
-    master:
-      - step:
-          script:
-            - yarn install
-            - yarn test
-            - NODE_ENV=production ENV=production yarn build
-            - docker build -t ${AWS_REGISTRY_URL}/pdf-reader-web:production --build-arg BRANCH=$BITBUCKET_BRANCH --build-arg COMMIT=$BITBUCKET_COMMIT --build-arg ENV=production .
-            - eval $(aws ecr get-login --region ${AWS_DEFAULT_REGION} --no-include-email)
-            - docker push ${AWS_REGISTRY_URL}/pdf-reader-web:production
-    develop:
-      - step:
-          script:
-            - yarn install
-            # - yarn test
-            - NODE_ENV=production ENV=preparing yarn build
-            - docker build -t ${AWS_REGISTRY_URL}/pdf-reader-web:preparing --build-arg BRANCH=$BITBUCKET_BRANCH --build-arg COMMIT=$BITBUCKET_COMMIT --build-arg ENV=preparing .
-            - eval $(aws ecr get-login --region ${AWS_DEFAULT_REGION} --no-include-email)
-            - docker push ${AWS_REGISTRY_URL}/pdf-reader-web:preparing

components/AnnotationItem/data.ts

@@ -1,4 +1,4 @@
-const data: Record<string, any> = {
+const data: Record<string, { text: string; icon: string }> = {
   Highlight: {
     text: 'Highlight',
     icon: 'highlight',

components/AnnotationItem/index.tsx

@@ -25,7 +25,7 @@ const AnnotationItem = ({
 }: Props): React.ReactElement => {
   const handleClick = (): void => {
     const ele: HTMLElement = document.getElementById(
-      `page_${page}`
+      `page_${page}`,
     ) as HTMLElement;
 
     scrollIntoView(ele);

components/AnnotationListHead/index.tsx

@@ -28,8 +28,8 @@ const index: React.FC<Props> = ({ close, addAnnots, hasAnnots }: Props) => {
   };
 
   const handleImport = (): void => {
-    uploadFile('.xfdf').then(data => {
-      const annotations = parseAnnotationFromXml(data);
+    uploadFile('.xfdf').then((data) => {
+      const annotations = parseAnnotationFromXml(data as string);
       addAnnots(annotations);
     });
   };

components/Box/styled.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled('div')<{ styles?: string[] }>`
-  ${props => props.styles}
+  ${(props) => props.styles}
 `;
 
 export default Wrapper;

components/Button/index.tsx

@@ -20,7 +20,7 @@ export type Props = {
   shouldFitContainer?: boolean;
   align?: 'left' | 'center' | 'right';
   children: React.ReactNode;
-  style?: {};
+  style?: Record<string, string>;
   isActive?: boolean;
   tabIndex?: number;
 };

components/Button/styled.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css, CSSProp } from 'styled-components';
 
 const align: { [index: string]: string } = {
   left: 'flex-start',
@@ -6,7 +6,7 @@ const align: { [index: string]: string } = {
   right: 'flex-end',
 };
 
-const staticStyles = css`
+const staticStyles = `
   border-width: 0;
   border-radius: 4px;
   box-sizing: border-box;
@@ -19,7 +19,7 @@ const staticStyles = css`
   min-width: 80px;
 `;
 
-const btnTheme: { [index: string]: any } = {
+const btnTheme: Record<string, CSSProp> = {
   default: css`
     color: black;
     background-color: transparent;
@@ -93,7 +93,7 @@ const btnTheme: { [index: string]: any } = {
   `,
 };
 
-const activeTheme: { [index: string]: any } = {
+const activeTheme: Record<string, CSSProp> = {
   default: css`
     background-color: ${({ theme }) => theme.colors['soft-blue']};
   `,
@@ -116,20 +116,19 @@ export const NormalButton = styled('div')<{
   isActive?: boolean;
 }>`
   ${staticStyles}
-  ${props => btnTheme[props.appearance || 'default']};
-  ${props =>
+
+  ${(props) => btnTheme[props.appearance || 'default']};
+  ${(props) =>
     props.shouldFitContainer
       ? css`
           width: 100%;
         `
       : null}
-  ${props =>
-    props.isActive
-      ? activeTheme[props.appearance || 'default']
-      : null}
+  ${(props) =>
+    props.isActive ? activeTheme[props.appearance || 'default'] : null}
 
   display: inline-flex;
-  justify-content: ${props => align[props.align || 'center']};
+  justify-content: ${(props) => align[props.align || 'center']};
   align-items: center;
 `;
 

components/ColorPicker/index.tsx

@@ -19,21 +19,12 @@ import {
   Swatch,
 } from './styled';
 
-type ColorType = {
-  h?: string;
-  s?: string;
-  l?: string;
-  v?: string;
-  a?: string;
-  hex?: string;
-};
-
 type Props = {
   hex: string;
-  hsl: object;
-  hsv: object;
+  hsl: unknown;
+  hsv: unknown;
   onChange: (info: ColorType) => void;
-  onSubmit: (color: any) => void;
+  onSubmit: (color: unknown) => void;
 };
 
 const ColorPicker: React.FC<Props> = ({
@@ -89,7 +80,10 @@ const ColorPicker: React.FC<Props> = ({
   );
 };
 
-const areEqual = (prevProps: any, nextProps: any) => {
+const areEqual = (
+  prevProps: Record<string, unknown>,
+  nextProps: Record<string, unknown>,
+) => {
   if (prevProps.color !== nextProps.color) {
     return false;
   }

components/ColorPicker/styled.ts

@@ -41,6 +41,6 @@ export const Swatch = styled('div')<{ bg: string }>`
   width: 28px;
   height: 28px;
   border-radius: 14px;
-  background-color: ${props => props.bg};
+  background-color: ${(props) => props.bg};
   margin-right: 10px;
 `;

components/ColorSelector/index.tsx

@@ -47,7 +47,7 @@ const ColorSelector: React.FC<Props> = ({
       <Blanket onMouseDown={pickerToggle} />
       <ColorPicker
         color={selectedColor}
-        onSubmit={(color: any): void => {
+        onSubmit={(color: { hex: string }): void => {
           pickerToggle();
           onClick(color.hex);
         }}
@@ -88,7 +88,7 @@ const ColorSelector: React.FC<Props> = ({
         ))}
         <Item
           onMouseDown={pickerToggle}
-          selected={!colorList.find(ele => selectedColor === ele.color)}
+          selected={!colorList.find((ele) => selectedColor === ele.color)}
         >
           <Icon glyph="color-picker" />
         </Item>

components/Cursor/styled.ts

@@ -1,15 +1,15 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
-const size: Record<string, any> = {
-  textfield: css`
+const size: Record<string, string> = {
+  textfield: `
     width: 150px;
     height: 50px;
   `,
-  checkbox: css`
+  checkbox: `
     width: 50px;
     height: 50px;
   `,
-  radio: css`
+  radio: `
     border-radius: 100%;
     width: 50px;
     height: 50px;
@@ -26,7 +26,7 @@ export const Zone = styled.div<{
   border-radius: 8px;
   z-index: 99999;
 
-  ${props => size[props.appearance]}
+  ${(props) => size[props.appearance]}
 
   p {
     font-size: 1rem;

components/Divider/index.tsx

@@ -7,10 +7,10 @@ export type Props = {
   orientation?: 'vertical' | 'horizontal';
   variant?: 'fullWidth' | 'inset' | 'middle';
   light?: boolean;
-  style?: Record<string, any>;
+  style?: Record<string, string>;
 };
 
-const Divider: React.FC<Props> = props => <Component {...props} />;
+const Divider: React.FC<Props> = (props) => <Component {...props} />;
 
 Divider.defaultProps = {
   absolute: false,

components/Divider/styled.ts

@@ -10,10 +10,10 @@ export const Component = styled('hr')<{
   margin: 6px 0;
   border: none;
   flex-shrink: 0;
-  background-color: ${props =>
+  background-color: ${(props) =>
     props.light ? 'white' : ({ theme }) => theme.colors['light-gray']};
 
-  ${props =>
+  ${(props) =>
     props.absolute
       ? css`
           position: absolute;
@@ -23,7 +23,7 @@ export const Component = styled('hr')<{
         `
       : ''}
 
-  ${props =>
+  ${(props) =>
     props.orientation === 'vertical'
       ? css`
           height: 100%;
@@ -32,14 +32,14 @@ export const Component = styled('hr')<{
         `
       : ''}
 
-  ${props =>
+  ${(props) =>
     props.variant === 'inset'
       ? css`
           margin-left: 52px;
         `
       : ''}
 
-  ${props =>
+  ${(props) =>
     props.variant === 'middle'
       ? css`
           margin-left: 10px;

components/Drawer/styled.ts

@@ -1,25 +1,25 @@
 import styled, { css } from 'styled-components';
 
-const position: { [index: string]: any } = {
-  left: css`
+const position: { [index: string]: string } = {
+  left: `
     top: 0;
     bottom: 0;
     left: 0;
     right: auto;
   `,
-  top: css`
+  top: `
     top: 0;
     bottom: auto;
     left: 0;
     right: 0;
   `,
-  right: css`
+  right: `
     top: 0;
     bottom: 0;
     left: auto;
     right: 0;
   `,
-  bottom: css`
+  bottom: `
     top: auto;
     bottom: 0;
     left: 0;
@@ -27,17 +27,17 @@ const position: { [index: string]: any } = {
   `,
 };
 
-const close: { [index: string]: any } = {
-  left: css`
+const close: { [index: string]: string } = {
+  left: `
     transform: translate(-267px, 0);
   `,
-  top: css`
+  top: `
     transform: translate(0, -267px);
   `,
-  right: css`
+  right: `
     transform: translate(267px, 0);
   `,
-  bottom: css`
+  bottom: `
     transform: translate(0, 267px);
   `,
 };
@@ -49,12 +49,12 @@ export const Slide = styled('div')<{
 }>`
   position: fixed;
   transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-  z-index: ${props => props.zIndex};
+  z-index: ${(props) => props.zIndex};
   background-color: white;
 
-  ${props => position[props.anchor]}
+  ${(props) => position[props.anchor]}
 
-  ${props =>
+  ${(props) =>
     props.open
       ? css`
           transform: translate(0, 0);

components/Embed/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Wrapper, Bg, CloseImg } from './styled';
 
-const EmbedComp = () => {
+const EmbedComp: React.FC = () => {
   const handleClose = () => {
     const wrapper = document.getElementById('embed-wrapper') as HTMLElement;
     const embeds = document.getElementsByTagName('embed');

components/ExpansionPanel/styled.ts

@@ -5,7 +5,7 @@ export const Container = styled('div')<{ showBottomBorder: boolean }>`
   flex-direction: column;
   width: 100%;
 
-  ${props =>
+  ${(props) =>
     props.showBottomBorder
       ? css`
           border-bottom: 1px solid ${({ theme }) => theme.colors.black12};
@@ -20,7 +20,7 @@ export const Label = styled.span`
 export const ContentWrapper = styled('div')<{ isCollapse: boolean }>`
   display: inline-block;
   transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  max-height: ${props => (props.isCollapse ? '0px' : '800px')};
+  max-height: ${(props) => (props.isCollapse ? '0px' : '800px')};
   background-color: ${({ theme }) => theme.colors['hyper-light-gray']};
   overflow: hidden;
 `;

components/FreeText/index.tsx

@@ -52,7 +52,7 @@ const FreeText: React.FC<AnnotationElementPropsType> = ({
         obj_type,
         newPosition,
         viewport.height,
-        scale
+        scale,
       ),
     });
   };

components/FreeTextOption/index.tsx

@@ -43,7 +43,7 @@ const TextOption: React.SFC<OptionPropsType> = ({
               setDataState({ fontName: option.child });
             }}
           />
-          {styleOptions.map(ele => (
+          {styleOptions.map((ele) => (
             <Item
               key={ele.key}
               size="small"
@@ -86,7 +86,7 @@ const TextOption: React.SFC<OptionPropsType> = ({
           {t('align')}
         </Typography>
         <Group>
-          {alignOptions.map(ele => (
+          {alignOptions.map((ele) => (
             <Item
               key={ele.key}
               size="small"

components/Highlight/index.tsx

@@ -8,7 +8,7 @@ import { strip } from '../../helpers/utility';
 
 import { Popper } from './styled';
 
-const Highlight: React.SFC<AnnotationElementPropsType> = ({
+const Highlight: React.FC<AnnotationElementPropsType> = ({
   id,
   obj_type,
   obj_attr: { page, position, bdcolor, transparency },
@@ -24,18 +24,18 @@ const Highlight: React.SFC<AnnotationElementPropsType> = ({
 }: AnnotationElementPropsType) => (
   <>
     {Array.isArray(position) &&
-      position.map((ele: any, index: number) => {
-        const annotRect = rectCalc(ele, viewport.height, scale);
+      position.map((ele: unknown, index: number) => {
+        const annotRect = rectCalc(ele as PositionType, viewport.height, scale);
 
         return (
           <Markup
             id={id}
             key={`block_${page + index}`}
             position={{
-              top: `${annotRect.top.toFixed(2)}px`,
-              left: `${annotRect.left.toFixed(2)}px`,
-              width: `${annotRect.width.toFixed(2)}px`,
-              height: `${annotRect.height.toFixed(2)}px`,
+              top: annotRect.top,
+              left: annotRect.left,
+              width: annotRect.width,
+              height: annotRect.height,
             }}
             bdcolor={bdcolor || ''}
             opacity={transparency || 0}
@@ -48,7 +48,7 @@ const Highlight: React.SFC<AnnotationElementPropsType> = ({
         );
       })}
     {!isCollapse ? (
-      <Popper position={mousePosition}>
+      <Popper position={mousePosition as PointType}>
         <AnnotationOptions
           onUpdate={onUpdate}
           onDelete={onDelete}

components/Highlight/styled.ts

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
-export const Popper = styled('div')<{ position: Record<string, any> }>`
+export const Popper = styled.div<{ position: PointType }>`
   position: absolute;
-  top: ${props => props.position.y}px;
-  left: ${props => props.position.x}px;
+  top: ${(props) => props.position.y}px;
+  left: ${(props) => props.position.x}px;
   transform: translate(-50%, -80px);
   z-index: 10;
 `;

components/HighlightOption/index.tsx

@@ -30,7 +30,7 @@ const HighlightOption: React.SFC<OptionPropsType> = ({
           {t('style')}
         </Typography>
         <Group>
-          {data.lineType.map(ele => (
+          {data.lineType.map((ele) => (
             <Item
               key={ele.key}
               selected={type === ele.key}

components/Icon/data.ts

@@ -1,8 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React from 'react';
-
 import Close from '../../public/icons/close.svg';
 import DownArrow from '../../public/icons/arrow00.svg';
 import Edit from '../../public/icons/navbar/rename00.svg';
@@ -79,7 +75,7 @@ import Clear from '../../public/icons/sidebar/clear.svg';
 import None from '../../public/icons/sidebar/None.svg';
 import Dropdown from '../../public/icons/sidebar/Dropdown00.svg';
 
-const data: { [index: string]: any } = {
+const data: Record<string, { Normal: string; Hover?: string }> = {
   close: {
     Normal: Close,
   },

components/Icon/index.tsx

@@ -6,9 +6,9 @@ import data from './data';
 type Props = {
   id?: string;
   glyph: string;
-  onClick?: (e: any) => void;
+  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   onBlur?: () => void;
-  style?: {};
+  style?: Record<string, string>;
   isActive?: boolean;
   isDisabled?: boolean;
 };
@@ -38,7 +38,7 @@ const Icon: React.FC<Props> = ({
               }
             : onClick
         }
-        onMouseDown={e => {
+        onMouseDown={(e) => {
           e.preventDefault();
         }}
         onBlur={onBlur}

components/Icon/styled.ts

@@ -11,9 +11,9 @@ export const IconWrapper = styled('div')<{
   height: auto;
   align-items: center;
   justify-content: center;
-  opacity: ${props => (props.isDisabled ? 0.7 : 1)};
+  opacity: ${(props) => (props.isDisabled ? 0.7 : 1)};
 
-  ${props =>
+  ${(props) =>
     props.isDisabled
       ? css`
           [data-status='normal'] {

components/Image/index.tsx

@@ -35,7 +35,7 @@ const Image: React.FC<AnnotationElementPropsType> = ({
         obj_type,
         newPosition,
         viewport.height,
-        scale
+        scale,
       ),
     });
   };

components/Ink/index.tsx

@@ -27,7 +27,7 @@ const Ink: React.FC<AnnotationElementPropsType> = ({
   const pointCalc = (
     _points: PointType[][],
     h: number,
-    s: number
+    s: number,
   ): PointType[][] => {
     const reducer = _points.reduce(
       (acc: PointType[][], cur: PointType[]): PointType[][] => {
@@ -38,14 +38,14 @@ const Ink: React.FC<AnnotationElementPropsType> = ({
         acc.push(p);
         return acc;
       },
-      []
+      [],
     );
 
     return reducer;
   };
 
   const rectCalcWithPoint = (
-    pointsGroup: PointType[][]
+    pointsGroup: PointType[][],
   ): HTMLCoordinateType => {
     const xArray: number[] = [];
     const yArray: number[] = [];
@@ -81,7 +81,7 @@ const Ink: React.FC<AnnotationElementPropsType> = ({
     const xDistance = left - rect.left;
     const yDistance = rect.top - top;
 
-    const newPosition = (position as PointType[][])[0].map(ele => ({
+    const newPosition = (position as PointType[][])[0].map((ele) => ({
       x: (ele.x + xDistance) * (xScaleRate || 1),
       y: (ele.y + yDistance) * (yScaleRate || 1),
     }));
@@ -101,7 +101,7 @@ const Ink: React.FC<AnnotationElementPropsType> = ({
 
   const calcViewBox = (
     { top, left, width, height }: HTMLCoordinateType,
-    _borderWidth: number
+    _borderWidth: number,
   ): string => `
     ${left - _borderWidth / 2} ${top - _borderWidth / 2} ${width} ${height}
   `;
@@ -123,7 +123,7 @@ const Ink: React.FC<AnnotationElementPropsType> = ({
                 key={key}
                 d={svgPath(
                   ele as PointType[],
-                  bezierCommand(controlPoint(line, 0.2))
+                  bezierCommand(controlPoint(line, 0.2)),
                 )}
                 fill="none"
                 stroke={bdcolor}

components/Ink/styled.ts

@@ -6,7 +6,7 @@ export const SVG = styled.svg`
   touch-action: none;
 `;
 
-export const PolyLine = styled('polyline')<{isCovered: boolean}>`
+export const PolyLine = styled('polyline')<{ isCovered: boolean }>`
   pointer-events: visiblepainted;
-  cursor: ${props => (props.isCovered ? 'pointer' : 'default')};
+  cursor: ${(props) => (props.isCovered ? 'pointer' : 'default')};
 `;

components/InputBox/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { Input, TextArea } from './styled';
+import { Input } from './styled';
 
 type Props = {
   id?: string;
@@ -13,25 +13,17 @@ type Props = {
   disabled?: boolean;
   error?: boolean;
   shouldFitContainer?: boolean;
-  variant?: 'standard' | 'multiline';
 };
 
-type Ref = any;
-
-const InputBox = forwardRef<Ref, Props>(
-  (
-    { variant = 'standard', onChange, disabled = false, ...rest }: Props,
-    ref
-  ) => {
-    const handleChange = (
-      e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ): void => {
+const InputBox = forwardRef<HTMLInputElement, Props>(
+  ({ onChange, disabled = false, ...rest }: Props, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
       if (onChange && !disabled) {
         onChange(e.target.value);
       }
     };
 
-    return variant === 'standard' ? (
+    return (
       <Input
         data-testid="input"
         ref={ref}
@@ -39,15 +31,8 @@ const InputBox = forwardRef<Ref, Props>(
         onChange={handleChange}
         {...rest}
       />
-    ) : (
-      <TextArea
-        ref={ref}
-        disabled={disabled}
-        onChange={handleChange}
-        {...rest}
-      />
     );
-  }
+  },
 );
 
 InputBox.defaultProps = {
@@ -65,7 +50,6 @@ InputBox.defaultProps = {
   disabled: false,
   error: false,
   shouldFitContainer: false,
-  variant: 'standard',
 };
 
 export default InputBox;

components/InputBox/styled.ts

@@ -20,29 +20,9 @@ export const Input = styled('input')<{
   shouldFitContainer?: boolean;
 }>`
   ${baseStyles}
-  width: ${props => (props.shouldFitContainer ? '100%' : 'auto')};
+  width: ${(props) => (props.shouldFitContainer ? '100%' : 'auto')};
 
-  ${props =>
-    props.error
-      ? css`
-          border: 1.5px solid ${({ theme }) => theme.colors.error};
-        `
-      : css`
-          :focus {
-            border: 1.5px solid ${({ theme }) => theme.colors.primary};
-          }
-        `}
-`;
-
-export const TextArea = styled('textarea')<{
-  error?: boolean;
-  shouldFitContainer?: boolean;
-}>`
-  ${baseStyles}
-  height: 54px;
-  width: ${props => (props.shouldFitContainer ? '100%' : 'auto')};
-
-  ${props =>
+  ${(props) =>
     props.error
       ? css`
           border: 1.5px solid ${({ theme }) => theme.colors.error};

components/Line/index.tsx

@@ -26,7 +26,7 @@ const Note: React.SFC<AnnotationElementPropsType> = ({
   const getActualPoint = (
     { start, end }: LinePositionType,
     h: number,
-    s: number
+    s: number,
   ): LinePositionType => {
     const x1 = start.x * scale;
     const y1 = h - start.y * s;
@@ -46,7 +46,7 @@ const Note: React.SFC<AnnotationElementPropsType> = ({
 
   const pointCalc = (
     { start, end }: LinePositionType,
-    borderWidth: number
+    borderWidth: number,
   ): LinePositionType => ({
     start: {
       x: start.x + borderWidth,
@@ -61,7 +61,7 @@ const Note: React.SFC<AnnotationElementPropsType> = ({
   const rectCalc = (
     { start, end }: LinePositionType,
     h: number,
-    s: number
+    s: number,
   ): HTMLCoordinateType => {
     const startY = h - start.y * s;
     const endY = h - end.y * s;
@@ -78,16 +78,16 @@ const Note: React.SFC<AnnotationElementPropsType> = ({
   const annotRect = rectCalc(
     position as LinePositionType,
     viewport.height,
-    scale
+    scale,
   );
   const { start, end } = getActualPoint(
     position as LinePositionType,
     viewport.height,
-    scale
+    scale,
   );
   const { start: completeStart, end: completeEnd } = pointCalc(
     { start, end } as LinePositionType,
-    actualbdwidth
+    actualbdwidth,
   );
 
   const actualWidth = annotRect.width + actualbdwidth + 15;
@@ -113,7 +113,7 @@ const Note: React.SFC<AnnotationElementPropsType> = ({
         obj_type,
         newPosition,
         viewport.height,
-        scale
+        scale,
       ),
     });
   };

components/Loading/index.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 
 import { Spinner, Bounce1, Bounce2, Bounce3 } from './styled';
 
-type Props = {};
-
-const Loading: React.SFC<Props> = () => {
+const Loading: React.FC = () => {
   return (
     <Spinner>
       <Bounce1 />

components/Markup/index.tsx

@@ -4,7 +4,7 @@ import Markup from './styled';
 
 type Props = {
   id?: string;
-  position: Record<string, any>;
+  position: Record<string, number>;
   bdcolor: string;
   opacity: number;
   markupType: string;
@@ -14,7 +14,7 @@ type Props = {
   onMouseOut?: () => void;
 };
 
-const index: React.SFC<Props> = ({
+const index: React.FC<Props> = ({
   id,
   position,
   bdcolor,

components/Markup/styled.ts

@@ -1,12 +1,13 @@
 import styled, { css } from 'styled-components';
 
-const MarkupStyle: Record<string, any> = {
+const MarkupStyle: Record<string, unknown> = {
   Highlight: css<{ isCovered: boolean; bdcolor: string }>`
-    background-color: ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
+    background-color: ${(props) =>
+      props.isCovered ? '#297fb8' : props.bdcolor};
   `,
   Underline: css<{ isCovered: boolean; bdcolor: string; scale: number }>`
-    border-bottom: ${props => props.scale * 2}px solid
-      ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
+    border-bottom: ${(props) => props.scale * 2}px solid
+      ${(props) => (props.isCovered ? '#297fb8' : props.bdcolor)};
   `,
   Squiggly: css<{ isCovered: boolean; bdcolor: string }>`
     overflow: hidden;
@@ -18,8 +19,8 @@ const MarkupStyle: Record<string, any> = {
         ellipse,
         transparent,
         transparent 8px,
-        ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 9px,
-        ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 10px,
+        ${(props) => (props.isCovered ? '#297fb8' : props.bdcolor)} 9px,
+        ${(props) => (props.isCovered ? '#297fb8' : props.bdcolor)} 10px,
         transparent 11px
       );
       background-size: 22px 26px;
@@ -35,8 +36,8 @@ const MarkupStyle: Record<string, any> = {
         ellipse,
         transparent,
         transparent 8px,
-        ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 9px,
-        ${props => (props.isCovered ? '#297fb8' : props.bdcolor)} 10px,
+        ${(props) => (props.isCovered ? '#297fb8' : props.bdcolor)} 9px,
+        ${(props) => (props.isCovered ? '#297fb8' : props.bdcolor)} 10px,
         transparent 11px
       );
       background-size: 22px 26px;
@@ -51,18 +52,18 @@ const MarkupStyle: Record<string, any> = {
     &:after {
       content: '';
       position: absolute;
-      height: ${props => props.scale * 2}px;
+      height: ${(props) => props.scale * 2}px;
       width: 100%;
       left: 0;
       top: 40%;
-      background-color: ${props =>
+      background-color: ${(props) =>
         props.isCovered ? '#297fb8' : props.bdcolor};
     }
   `,
 };
 
 const Markup = styled('div')<{
-  position: Record<string, any>;
+  position: Record<string, number>;
   bdcolor: string;
   markupType: string;
   opacity: number;
@@ -71,15 +72,16 @@ const Markup = styled('div')<{
 }>`
   position: absolute;
   cursor: pointer;
-  opacity: ${props => props.opacity};
+  opacity: ${(props) => props.opacity};
 
-  ${props => css`
-    top: ${props.position.top};
-    left: ${props.position.left};
-    width: ${props.position.width};
-    height: ${props.position.height};
+  ${(props) => css`
+    top: ${props.position.top}px;
+    left: ${props.position.left}px;
+    width: ${props.position.width}px;
+    height: ${props.position.height}px;
   `}
-  ${props => MarkupStyle[props.markupType]}
+
+  ${(props) => MarkupStyle[props.markupType] as string}
 `;
 
 export default Markup;

components/Navbar/index.tsx

@@ -25,7 +25,7 @@ const Navbar: React.FC<Props> = ({
   <Container isHidden={displayMode === 'full'}>
     <Typography variant="title">{fileName}</Typography>
     <Separator />
-    {data.btnGroup.map(ele => (
+    {data.btnGroup.map((ele) => (
       <Icon
         key={ele.key}
         glyph={ele.content}

components/Navbar/styled.ts

@@ -15,7 +15,7 @@ export const Container = styled('div')<{ isHidden: boolean }>`
 
   transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 
-  ${props =>
+  ${(props) =>
     props.isHidden
       ? css`
           transform: translate(0, -60px);

components/OuterRect/data.ts

@@ -2,7 +2,7 @@ const RADIUS = 6;
 
 const generateCirclesData = (
   width: number,
-  height: number
+  height: number,
 ): Array<CircleType> => [
   {
     direction: 'top-left',

components/OuterRect/index.tsx

@@ -56,7 +56,7 @@ const index: React.FC<Props> = ({
   const handleMouseDown = (e: React.MouseEvent | React.TouchEvent): void => {
     e.preventDefault();
     const operatorId = (e.target as HTMLElement).getAttribute(
-      'data-id'
+      'data-id',
     ) as string;
     const coord = getAbsoluteCoordinate(document.body, e);
 
@@ -80,7 +80,7 @@ const index: React.FC<Props> = ({
   const calcMoveResult = (
     currentPosition: PointType,
     startPosition: PointType,
-    objPosition: ObjPositionType
+    objPosition: ObjPositionType,
   ): CoordType => ({
     left: currentPosition.x - (startPosition.x - objPosition.left),
     top: currentPosition.y - (startPosition.y - objPosition.top),
@@ -88,7 +88,7 @@ const index: React.FC<Props> = ({
 
   const calcScaleResult = (
     currentPosition: PointType,
-    objPosition: ObjPositionType
+    objPosition: ObjPositionType,
   ): CoordType => {
     const scaleData = calcDragAndDropScale({
       ...objPosition,
@@ -114,8 +114,8 @@ const index: React.FC<Props> = ({
           calcMoveResult(
             { x: cursorPosition.x, y: cursorPosition.y },
             { x: state.clickX, y: state.clickY },
-            state
-          )
+            state,
+          ),
         );
       } else if (onScale) {
         onScale(
@@ -124,8 +124,8 @@ const index: React.FC<Props> = ({
               x: cursorPosition.x,
               y: cursorPosition.y,
             },
-            state
-          )
+            state,
+          ),
         );
       }
     }

components/OuterRect/styled.ts

@@ -14,7 +14,7 @@ export const Rect = styled.rect`
   stroke-width: 3;
 `;
 
-const arrowDirection: { [index: string]: any } = {
+const arrowDirection: { [index: string]: string } = {
   'top-right': 'ne-resize',
   top: 'n-resize',
   'top-left': 'nw-resize',
@@ -26,5 +26,5 @@ const arrowDirection: { [index: string]: any } = {
 };
 
 export const Circle = styled('circle')<{ direction: string }>`
-  cursor: ${props => arrowDirection[props.direction]};
+  cursor: ${(props) => arrowDirection[props.direction]};
 `;

components/OuterRectForLine/index.tsx

@@ -44,7 +44,7 @@ const index: React.FC<Props> = ({
 
   const handleMouseDown = (e: React.MouseEvent): void => {
     const operatorId = (e.target as HTMLElement).getAttribute(
-      'data-id'
+      'data-id',
     ) as string;
     const coord = getAbsoluteCoordinate(document.body, e);
 

components/Page/index.tsx

@@ -13,12 +13,12 @@ import {
   Inner,
 } from './styled';
 
-let pdfPage: any = null;
+let pdfPage: PdfPageType | null = null;
 
 type Props = {
   pageNum: number;
   renderingState: RenderingStateType;
-  getPage: () => Promise<any>;
+  getPage: GetPageType;
   viewport: ViewportType;
   rotation: number;
   scale: number;
@@ -41,16 +41,16 @@ const PageView: React.FC<Props> = ({
   matchesMap,
 }: Props) => {
   const rootEle = useRef<HTMLDivElement | null>(null);
-  const [renderTask, setRenderTask] = useState<any>(null);
+  const [renderTask, setRenderTask] = useState<RenderTaskType | null>(null);
 
-  const renderPage = async (): Promise<any> => {
+  const renderPage = async (): Promise<void> => {
     if (getPage) {
-      getPage().then(obj => {
+      getPage().then((obj: PdfPageType) => {
         pdfPage = obj;
 
         const setTextDivs = (elements: HTMLElement[]) => {
           if (queryString && matchesMap.length) {
-            matchesMap.forEach(item => {
+            matchesMap.forEach((item) => {
               if (pageNum === item.page) {
                 const id = `${item.page}_${item.index}`;
                 renderMatches(elements, getPage, item.index, queryString, id);

components/Page/styled.ts

@@ -12,9 +12,9 @@ export const PageWrapper = styled('div')<{
   display: inline-block;
   margin: 25px auto;
 
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
-  transform: rotate(${props => props.rotation}deg);
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.height}px;
+  transform: rotate(${(props) => props.rotation}deg);
   background-color: white;
 
   &:first-of-type {

components/Pagination/styled.ts

@@ -33,7 +33,7 @@ export const ArrowButton = styled('button')<{ variant: string }>`
   align-items: center;
   justify-content: center;
 
-  ${props =>
+  ${(props) =>
     props.variant === 'left'
       ? css`
           border-top-left-radius: 4px;

components/Portal/index.tsx

@@ -16,7 +16,7 @@ type Props = {
 
 const Portal: React.FC<Props> = ({ zIndex = 0, children = '' }) => {
   const [container, setContainer] = useState(
-    canUseDOM() ? createContainer(zIndex) : undefined
+    canUseDOM() ? createContainer(zIndex) : undefined,
   );
 
   useEffect(() => {

components/Search/index.tsx

@@ -36,7 +36,7 @@ const Search: React.FC<Props> = ({
   close,
 }: Props) => {
   const { t } = useTranslation('toolbar');
-  const inputRef = useRef(null) as MutableRefObject<any>;
+  const inputRef = useRef() as MutableRefObject<HTMLInputElement>;
 
   const handleKeyDown = (e: React.KeyboardEvent): void => {
     if (e.keyCode === 13 && inputRef.current.value) {

components/Search/styled.ts

@@ -11,7 +11,7 @@ export const Wrapper = styled('div')<{ open: boolean }>`
   padding: 9px 16px;
   box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.38);
   z-index: 2;
-  transform: translateY(${props => (props.open ? '0' : '-120px')});
+  transform: translateY(${(props) => (props.open ? '0' : '-120px')});
   transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 `;
 
@@ -56,7 +56,7 @@ export const ArrowButton = styled('button')<{ variant: string }>`
   align-items: center;
   justify-content: center;
 
-  ${props =>
+  ${(props) =>
     props.variant === 'top'
       ? css`
           margin-left: 1px;

components/SelectBox/index.tsx

@@ -14,12 +14,12 @@ import {
 } from './styled';
 
 type Props = {
-  onChange: (item: SelectOptionType) => void;
+  onChange?: (item: SelectOptionType) => void;
   options: SelectOptionType[];
   defaultValue?: React.ReactNode;
   isDivide?: boolean;
   useInput?: boolean;
-  style?: {};
+  style?: Record<string, string>;
 };
 
 const SelectBox: React.FC<Props> = ({
@@ -79,8 +79,9 @@ const SelectBox: React.FC<Props> = ({
     if (!isCollapse && selectRef.current) {
       const position = selectRef.current.getBoundingClientRect();
       if (optionRef.current) {
-        optionRef.current.style.top = `${selectRef.current.clientHeight +
-          position.top}px`;
+        optionRef.current.style.top = `${
+          selectRef.current.clientHeight + position.top
+        }px`;
         optionRef.current.style.left = `${position.left}px`;
       }
     }

components/Shape/index.tsx

@@ -43,7 +43,7 @@ const Shape: React.FC<AnnotationElementPropsType> = ({
         obj_type,
         newPosition,
         viewport.height,
-        scale
+        scale,
       ),
     });
   };

components/ShapeOption/index.tsx

@@ -34,14 +34,14 @@ const ShapeOption: React.SFC<OptionPropsType> = ({
         <SelectBox
           options={shapeOptions}
           style={{ marginRight: '10px' }}
-          onChange={(item: Record<string, any>): void => {
+          onChange={(item: Record<string, unknown>): void => {
             setDataState({ shape: item.key });
           }}
         />
         {shape !== 'line' && shape !== 'arrow' && (
           <SelectBox
             options={typeOptions}
-            onChange={(item: Record<string, any>): void => {
+            onChange={(item: Record<string, unknown>): void => {
               setDataState({ type: item.key });
             }}
           />

components/Skeleton/styled.ts

@@ -1,4 +1,4 @@
-import styled, { css, keyframes } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 const animate = keyframes`
   0% {
@@ -12,9 +12,9 @@ const animate = keyframes`
   }
 `;
 
-const shape: { [index: string]: any } = {
+const shape: { [index: string]: string } = {
   rect: '',
-  text: css`
+  text: `
     margin-top: 8px;
     margin-bottom: 8px;
     transform-origin: 0 65%;
@@ -26,7 +26,7 @@ const shape: { [index: string]: any } = {
       content: ' ';
     }
   `,
-  circle: css`
+  circle: `
     border-radius: 50%;
   `,
 };
@@ -37,7 +37,7 @@ export const Element = styled('div')<{ variant: string }>`
   animation: ${animate} 1.5s ease-in-out infinite;
   margin: 5px 0;
 
-  ${props => shape[props.variant]}
+  ${(props) => shape[props.variant]}
 `;
 
 export default Element;

components/Sliders/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { fromEvent } from 'rxjs';
+import { fromEvent, Subscription } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 
 import { OuterWrapper, Wrapper, Rail, Track } from './styled';
@@ -24,11 +24,12 @@ const Sliders: React.FC<Props> = ({
   const sliderRef = useRef<HTMLDivElement>(null);
   const [valueState, setValueState] = useState(defaultValue);
   const [isActive, setActive] = useState(false);
-  let mouseSubscription: any = null;
-  let touchSubscription: any = null;
+  let mouseSubscription: Subscription | null = null;
+  let touchSubscription: Subscription | null = null;
 
   const parseValueToPercent = (val: number): number => Math.floor(val * 100);
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const getFingerMoveValue = (event: any): void => {
     const { current: slider } = sliderRef;
     let clientX = 0;
@@ -59,7 +60,7 @@ const Sliders: React.FC<Props> = ({
     }
   };
 
-  const handleTouchMove = (event: any): void => {
+  const handleTouchMove = (event: Event): void => {
     event.preventDefault();
     getFingerMoveValue(event);
   };
@@ -68,12 +69,12 @@ const Sliders: React.FC<Props> = ({
     event.preventDefault();
 
     setActive(false);
-    mouseSubscription.unsubscribe();
-    touchSubscription.unsubscribe();
+    if (mouseSubscription) mouseSubscription.unsubscribe();
+    if (touchSubscription) touchSubscription.unsubscribe();
   };
 
   const handleMouseDown = (
-    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
   ): void => {
     event.preventDefault();
 

components/Sliders/styled.ts

@@ -15,7 +15,7 @@ export const Wrapper = styled.div`
 
 export const Rail = styled('div')<{ track: number }>`
   height: 10px;
-  width: ${props => props.track}%;
+  width: ${(props) => props.track}%;
   border-radius: 7px;
   background-color: ${({ theme }) => theme.colors.primary};
 `;
@@ -28,13 +28,13 @@ export const Track = styled('span')<{ track: number; isActive: boolean }>`
   background-color: ${({ theme }) => theme.colors['french-blue']};
   cursor: pointer;
   top: -5px;
-  left: calc(${props => props.track}% - 10px);
+  left: calc(${(props) => props.track}% - 10px);
   position: absolute;
   transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   border: 2px solid white;
   box-sizing: border-box;
 
-  ${props =>
+  ${(props) =>
     props.isActive
       ? css`
           box-shadow: 0px 0px 0px 8px rgba(144, 202, 249, 0.23);

components/StickyNote/index.tsx

@@ -26,7 +26,7 @@ const StickyNote: React.SFC<AnnotationElementPropsType> = ({
   };
 
   const handleChange = (
-    event: React.ChangeEvent<HTMLTextAreaElement>
+    event: React.ChangeEvent<HTMLTextAreaElement>,
   ): void => {
     const textValue = event.currentTarget.value;
 

components/StickyNote/styled.ts

@@ -2,8 +2,8 @@ import styled from 'styled-components';
 
 export const TextAreaContainer = styled('div')<{ top: string; left: string }>`
   position: absolute;
-  top: ${props => props.top};
-  left: ${props => props.left};
+  top: ${(props) => props.top};
+  left: ${(props) => props.left};
   z-index: 10;
 `;
 

components/Tabs/styled.ts

@@ -24,7 +24,7 @@ export const Btn = styled('button')<{ isActive?: boolean }>`
   font-weight: bold;
   box-sizing: border-box;
 
-  ${props =>
+  ${(props) =>
     props.isActive
       ? css`
           background-color: ${({ theme }) => theme.colors.primary};

components/TextField/index.tsx

@@ -36,7 +36,7 @@ const TextField: React.FC<AnnotationElementPropsType> = ({
         obj_type,
         newPosition,
         viewport.height,
-        scale
+        scale,
       ),
     });
   };

components/TextField/styled.ts

@@ -1,11 +1,11 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
-const style: Record<string, any> = {
+const style: Record<string, string> = {
   textfield: '',
-  checkbox: css`
+  checkbox: `
     border-radius: 8px;
   `,
-  radio: css`
+  radio: `
     border-radius: 100%;
   `,
 };
@@ -20,7 +20,7 @@ export const TextBox = styled.div<{ type: string }>`
   justify-content: center;
   align-items: center;
 
-  ${props => style[props.type]}
+  ${(props) => style[props.type]}
 `;
 
 export default TextBox;

components/TextareaBox/index.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react';
+
+import { TextArea } from './styled';
+
+type Props = {
+  id?: string;
+  name?: string;
+  onChange?: (val: string) => void;
+  onBlur?: () => void;
+  value?: string | number;
+  defaultValue?: string | number;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  shouldFitContainer?: boolean;
+};
+
+const InputBox = forwardRef<HTMLTextAreaElement, Props>(
+  ({ onChange, disabled = false, ...rest }: Props, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
+      if (onChange && !disabled) {
+        onChange(e.target.value);
+      }
+    };
+
+    return (
+      <TextArea
+        ref={ref}
+        disabled={disabled}
+        onChange={handleChange}
+        {...rest}
+      />
+    );
+  },
+);
+
+InputBox.defaultProps = {
+  id: '',
+  name: '',
+  onChange: () => {
+    // do something
+  },
+  onBlur: () => {
+    // do something
+  },
+  value: '',
+  defaultValue: undefined,
+  placeholder: '',
+  disabled: false,
+  error: false,
+  shouldFitContainer: false,
+};
+
+export default InputBox;

components/TextareaBox/styled.ts

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+
+const baseStyles = css`
+  border: 1.5px solid ${({ theme }) => theme.colors.black38};
+  border-radius: 4px;
+  padding: 7px 15px;
+  outline: none;
+  transition: border 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  font-size: 1.2rem;
+  box-sizing: border-box;
+
+  :disabled {
+    color: ${({ theme }) => theme.colors.black56};
+    cursor: not-allowed;
+  }
+`;
+
+export const TextArea = styled('textarea')<{
+  error?: boolean;
+  shouldFitContainer?: boolean;
+}>`
+  ${baseStyles}
+  height: 54px;
+  width: ${(props) => (props.shouldFitContainer ? '100%' : 'auto')};
+
+  ${(props) =>
+    props.error
+      ? css`
+          border: 1.5px solid ${({ theme }) => theme.colors.error};
+        `
+      : css`
+          :focus {
+            border: 1.5px solid ${({ theme }) => theme.colors.primary};
+          }
+        `}
+`;

components/Thumbnail/index.tsx

@@ -17,7 +17,7 @@ const index: React.FC<Props> = ({
 }: Props) => {
   const [dataUrl, setDataUrl] = useState('');
 
-  const getDataUrl = async (): Promise<any> => {
+  const getDataUrl = async (): Promise<void> => {
     const imageDataUrl = await getPdfImage(pageNum);
     setDataUrl(imageDataUrl);
   };

components/Thumbnail/styled.ts

@@ -5,7 +5,7 @@ export const Wrapper = styled.div`
   justify-content: center;
   align-items: center;
   margin: 20px 0;
-  width: 180px;
+  width: 230px;
   height: 180px;
 `;
 
@@ -15,8 +15,10 @@ export const PageNum = styled.div`
 
 export const Img = styled.img`
   border: 1px solid ${({ theme }) => theme.colors.black38};
+  max-width: 200px;
+  max-height: 180px;
   width: auto;
-  height: 100%;
+  height: auto;
   box-sizing: border-box;
   cursor: pointer;
 `;

components/ThumbnailViewer/index.tsx

@@ -100,7 +100,7 @@ const Thumbnails: React.FC<Props> = ({
   useEffect(() => {
     if (isActive && elements.length) {
       const ele: HTMLElement = document.getElementById(
-        `thumbnail_${currentPage}`
+        `thumbnail_${currentPage}`,
       ) as HTMLElement;
       scrollIntoView(ele);
     }

components/Toolbar/data.ts

@@ -1,4 +1,10 @@
-const dataset = (t: (key: string) => string): Record<string, any> => ({
+type OptionType = {
+  key: string;
+  content: string;
+  child: string | number;
+};
+
+const dataset = (t: (key: string) => string): Record<string, OptionType[]> => ({
   scaleOptions: [
     {
       key: 'fit',

components/Toolbar/styled.ts

@@ -16,7 +16,7 @@ export const Container = styled('div')<{
 }>`
   position: fixed;
   top: 86px;
-  left: ${props => (props.displayMode === 'normal' ? '267px' : 0)};
+  left: ${(props) => (props.displayMode === 'normal' ? '267px' : 0)};
   right: 0;
   margin: auto;
   max-width: 572px;
@@ -33,7 +33,7 @@ export const Container = styled('div')<{
 
   transition: all 225ms ease-in-out;
 
-  ${props =>
+  ${(props) =>
     props.hidden
       ? css`
           animation: ${closeToolbar} 3s forwards;

components/Typography/index.tsx

@@ -6,7 +6,7 @@ type Props = {
   variant?: 'title' | 'subtitle' | 'body';
   light?: boolean;
   children: React.ReactNode;
-  style?: {};
+  style?: Record<string, string>;
   align?: 'left' | 'center' | 'right';
 };
 

components/Typography/styled.ts

@@ -2,26 +2,26 @@ import styled from 'styled-components';
 
 export const Title = styled('p')<{ light?: boolean; align?: string }>`
   font-size: 1.35rem;
-  color: ${props =>
+  color: ${(props) =>
     props.light ? ({ theme }) => theme.colors.black38 : '#000000'};
   margin: 5px;
   white-space: nowrap;
-  text-align: ${props => (props.align ? props.align : 'center')};
+  text-align: ${(props) => (props.align ? props.align : 'center')};
 `;
 
 export const Subtitle = styled('p')<{ light?: boolean; align?: string }>`
   font-size: 1.2rem;
-  color: ${props =>
+  color: ${(props) =>
     props.light ? ({ theme }) => theme.colors.black38 : '#000000'};
   margin: 5px;
   white-space: nowrap;
-  text-align: ${props => (props.align ? props.align : 'center')};
+  text-align: ${(props) => (props.align ? props.align : 'center')};
 `;
 
 export const Body = styled('p')<{ light?: boolean; align?: string }>`
   font-size: 1.2rem;
-  color: ${props =>
+  color: ${(props) =>
     props.light ? ({ theme }) => theme.colors.black38 : '#000000'};
   margin: 5px;
-  text-align: ${props => (props.align ? props.align : 'center')};
+  text-align: ${(props) => (props.align ? props.align : 'center')};
 `;

components/Viewer/index.tsx

@@ -19,7 +19,7 @@ const Viewer = forwardRef<Ref, Props>(
         <Wrapper width={width}>{children}</Wrapper>
       </OuterWrapper>
     );
-  }
+  },
 );
 
 export default Viewer;

components/Viewer/styled.ts

@@ -16,6 +16,6 @@ export const OuterWrapper = styled.div`
 export const Wrapper = styled('div')<{ width: number }>`
   display: inline-flex;
   flex-direction: column;
-  width: ${props => props.width}px;
+  width: ${(props) => props.width}px;
   margin: 0 10px;
 `;

components/WatermarkImageSelector/index.tsx

@@ -16,7 +16,7 @@ const ImageSelector: React.FC<Props> = ({
   onChange,
 }: Props): React.ReactElement => {
   const handleClick = (): void => {
-    uploadFile('.png,.jpg,.jpeg,.svg').then(urlData => {
+    uploadFile('.png,.jpg,.jpeg,.svg').then((urlData: string) => {
       onChange(urlData);
     });
   };

components/WatermarkOption/index.tsx

@@ -24,10 +24,10 @@ type Props = WatermarkType & {
   isActive: boolean;
   onSave: () => void;
   onDelete: () => void;
-  setDataState: (arg: Record<string, any>) => void;
+  setDataState: (arg: Record<string, string | number>) => void;
 };
 
-const WatermarkOption: React.SFC<Props> = ({
+const WatermarkOption: React.FC<Props> = ({
   onClick,
   type,
   opacity = 0,

components/WatermarkTextBox/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import InputBox from '../InputBox';
+import TextareaBox from '../TextareaBox';
 import Typography from '../Typography';
 
 import { ContentWrapper } from './styled';
@@ -20,12 +20,7 @@ const TextBox: React.FC<Props> = ({
     <ContentWrapper>
       <Typography variant="subtitle">{t('text')}</Typography>
     </ContentWrapper>
-    <InputBox
-      variant="multiline"
-      onChange={onChange}
-      value={value}
-      shouldFitContainer
-    />
+    <TextareaBox onChange={onChange} value={value} shouldFitContainer />
   </>
 );
 

config/jest.config.js

@@ -8,9 +8,7 @@ module.exports = {
     '\\.(ts|tsx|js|jsx)?$': 'babel-jest',
     '^.+\\.(ts|tsx)$': 'ts-jest',
   },
-  setupFilesAfterEnv: [
-    '@testing-library/jest-dom/extend-expect',
-  ],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
 };

constants/actionTypes.ts

@@ -22,3 +22,26 @@ export const SET_TEXT_DIV = 'SET_TEXT_DIV';
 export const SET_QUERY_STRING = 'SET_QUERY_STRING';
 export const SET_MATCHES_MAP = 'SET_MATCHES_MAP';
 export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX';
+
+export default {
+  TOGGLE_DISPLAY_MODE,
+  SET_NAVBAR,
+  SET_SIDEBAR,
+  SET_TOOL,
+  SET_INFO,
+  SET_LOADING,
+  SET_CURRENT_PAGE,
+  SET_TOTAL_PAGE,
+  SET_PDF,
+  SET_PROGRESS,
+  SET_VIEWPORT,
+  CHANGE_SCALE,
+  CHANGE_ROTATE,
+  ADD_ANNOTS,
+  UPDATE_ANNOTS,
+  UPDATE_WATERMARK,
+  SET_TEXT_DIV,
+  SET_QUERY_STRING,
+  SET_MATCHES_MAP,
+  SET_CURRENT_INDEX,
+};

constants/index.ts

@@ -2,19 +2,19 @@ export const MAX_SCALE = 5;
 export const MIN_SCALE = 0.25;
 export const RENDER_RANGE = 3;
 
-export const MARKUP_TYPE: Record<string, any> = {
+export const MARKUP_TYPE: Record<string, string> = {
   highlight: 'Highlight',
   underline: 'Underline',
   squiggly: 'Squiggly',
   strikeout: 'StrikeOut',
 };
 
-export const FORM_TYPE: Record<string, any> = {
+export const FORM_TYPE: Record<string, string> = {
   textfield: 'textfield',
   checkbox: 'checkbox',
 };
 
-export const ANNOTATION_TYPE: Record<string, any> = {
+export const ANNOTATION_TYPE: Record<string, string> = {
   ...MARKUP_TYPE,
   ...FORM_TYPE,
   ink: 'Ink',

containers/Annotation.tsx

@@ -56,7 +56,7 @@ const Annotation: React.FC<Props> = ({
     setMouseOver(false);
   };
 
-  const handleUpdate: OnUpdateType = data => {
+  const handleUpdate: OnUpdateType = (data) => {
     const newAttributes = {
       ...annotations[index].obj_attr,
       ...data,

containers/AnnotationList.tsx

@@ -22,7 +22,7 @@ const AnnotationList: React.FC = () => {
         <Head />
         <Body
           annotations={annotations.filter((ele: AnnotationType) =>
-            ANNOT_TYPE_ARRAY.includes(ele.obj_type)
+            ANNOT_TYPE_ARRAY.includes(ele.obj_type),
           )}
           isActive={isActive}
         />

containers/CheckboxTool.tsx

@@ -26,7 +26,7 @@ const CheckboxTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
 
   const addCheckbox = (
     pageEle: HTMLElement,
-    event: MouseEvent | TouchEvent
+    event: MouseEvent | TouchEvent,
   ): void => {
     const pageNum = pageEle.getAttribute('data-page-num') || 0;
     const coordinate = getAbsoluteCoordinate(pageEle, event);
@@ -46,7 +46,7 @@ const CheckboxTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
     };
 
     const newCheckbox = appendUserIdAndDate(
-      parseAnnotationObject(annotData, viewport.height, scale)
+      parseAnnotationObject(annotData, viewport.height, scale),
     );
 
     addAnnots([newCheckbox]);
@@ -60,7 +60,7 @@ const CheckboxTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
         addCheckbox(pageEle, event);
       }
     },
-    [viewport, scale]
+    [viewport, scale],
   );
 
   useEffect(() => {

containers/FreeTextTool.tsx

@@ -38,7 +38,7 @@ const HighlightTool: React.FC<Props> = ({
   const { addAnnots } = useActions(dispatch);
 
   const setDataState = (obj: OptionPropsType): void => {
-    setData(prev => ({
+    setData((prev) => ({
       ...prev,
       ...obj,
     }));
@@ -47,7 +47,7 @@ const HighlightTool: React.FC<Props> = ({
   const addFreeText = (
     pageEle: HTMLElement,
     event: MouseEvent | TouchEvent,
-    attributes: OptionPropsType
+    attributes: OptionPropsType,
   ): void => {
     const {
       fontStyle,
@@ -80,7 +80,7 @@ const HighlightTool: React.FC<Props> = ({
     };
 
     const freeText = appendUserIdAndDate(
-      parseAnnotationObject(annotData, viewport.height, scale)
+      parseAnnotationObject(annotData, viewport.height, scale),
     );
 
     addAnnots([freeText]);
@@ -94,7 +94,7 @@ const HighlightTool: React.FC<Props> = ({
         addFreeText(pageEle, event, data);
       }
     },
-    [data, viewport, scale]
+    [data, viewport, scale],
   );
 
   useEffect(() => {

containers/FreehandTool.tsx

@@ -41,7 +41,7 @@ const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
   const { addAnnots, updateAnnots } = useActions(dispatch);
 
   const setDataState = (obj: OptionPropsType): void => {
-    setData(prev => ({
+    setData((prev) => ({
       ...prev,
       ...obj,
     }));
@@ -72,13 +72,13 @@ const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
           },
         };
         const freehand = appendUserIdAndDate(
-          parseAnnotationObject(annotData, viewport.height, scale)
+          parseAnnotationObject(annotData, viewport.height, scale),
         );
 
         addAnnots([freehand]);
       }
     },
-    [data, viewport, scale]
+    [data, viewport, scale],
   );
 
   const handleMouseUp = useCallback((): void => {
@@ -122,7 +122,7 @@ const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
         type,
         { x: cursorPosition.x, y: cursorPosition.y },
         viewport.height,
-        scale
+        scale,
       ) as PointType;
 
       const lastPosition = position[0].slice(-1)[0];

containers/HighlightTools.tsx

@@ -17,8 +17,8 @@ type Props = {
   onClick: () => void;
 };
 
-let timer: any = null;
-let textLayer: any = null;
+let timer = 0;
+let textLayer: HTMLElement | null = null;
 
 const HighlightTools: React.FC<Props> = ({
   title,
@@ -36,7 +36,7 @@ const HighlightTools: React.FC<Props> = ({
   const { addAnnots, updateAnnots } = useActions(dispatch);
 
   const setDataState = (obj: OptionPropsType): void => {
-    setData(prev => ({
+    setData((prev) => ({
       ...prev,
       ...obj,
     }));
@@ -64,11 +64,11 @@ const HighlightTools: React.FC<Props> = ({
 
           if (textLayer.getAttribute('data-id') !== 'text-layer') {
             textLayer = textLayer.querySelector(
-              '[data-id="text-layer"]'
+              '[data-id="text-layer"]',
             ) as HTMLElement;
           }
           if (textLayer) {
-            textLayer.style.zIndex = 10;
+            textLayer.style.zIndex = '10';
 
             const newMarkup = getMarkupWithSelection({
               ...data,
@@ -85,13 +85,13 @@ const HighlightTools: React.FC<Props> = ({
       }
       if (selection?.isCollapsed) {
         if (textLayer) {
-          textLayer.style.zIndex = 0;
+          textLayer.style.zIndex = '0';
         }
 
         setCurrentId('');
       }
     },
-    [data, scale, currentId]
+    [data, scale, currentId],
   );
 
   const handleSelectStart = () => {
@@ -110,8 +110,8 @@ const HighlightTools: React.FC<Props> = ({
         });
 
         if (newMarkup) {
-          const array: any = [];
-          annotations.forEach(ele => {
+          const array: AnnotationType[] = [];
+          annotations.forEach((ele) => {
             if (ele.id === currentId) {
               // eslint-disable-next-line no-param-reassign
               ele.obj_attr.position = newMarkup.obj_attr.position;
@@ -140,7 +140,7 @@ const HighlightTools: React.FC<Props> = ({
         document.addEventListener('selectionchange', handleSelectChange);
       }
     } else if (textLayer) {
-      textLayer.style.zIndex = 0;
+      textLayer.style.zIndex = '0';
     }
 
     return (): void => {

containers/ImageTool.tsx

@@ -37,8 +37,8 @@ const ImageTool: React.FC<Props> = ({ onClickSidebar }: Props) => {
     }
   };
 
-  const getImgDimension = (url: string) => {
-    return new Promise(resolve => {
+  const getImgDimension = (url: string): Promise<ViewportType> => {
+    return new Promise((resolve) => {
       const img = new Image();
       img.src = url;
       img.onload = () => {
@@ -57,36 +57,38 @@ const ImageTool: React.FC<Props> = ({ onClickSidebar }: Props) => {
       if (file) {
         const objectUrl = window.URL.createObjectURL(file);
 
-        getImgDimension(objectUrl).then(({ width, height }: any) => {
-          let objWidth = width;
-          let objHeight = height;
-
-          if (width > viewport.width || height > viewport.height) {
-            const widthRate = viewport.width / width;
-            objWidth = width * widthRate - 100;
-            objHeight = height * widthRate - 100;
-          }
-
-          const annotData = {
-            obj_type: ANNOTATION_TYPE.image,
-            obj_attr: {
-              page: currentPage,
-              position: {
-                top: viewport.height / 2 - objHeight / 2,
-                left: viewport.width / 2 - objWidth / 2,
-                bottom: viewport.height / 2 + objHeight / 2,
-                right: viewport.width / 2 + objWidth / 2,
+        getImgDimension(objectUrl).then(
+          ({ width, height }: ViewportType): void => {
+            let objWidth = width;
+            let objHeight = height;
+
+            if (width > viewport.width || height > viewport.height) {
+              const widthRate = viewport.width / width;
+              objWidth = width * widthRate - 100;
+              objHeight = height * widthRate - 100;
+            }
+
+            const annotData = {
+              obj_type: ANNOTATION_TYPE.image,
+              obj_attr: {
+                page: currentPage,
+                position: {
+                  top: viewport.height / 2 - objHeight / 2,
+                  left: viewport.width / 2 - objWidth / 2,
+                  bottom: viewport.height / 2 + objHeight / 2,
+                  right: viewport.width / 2 + objWidth / 2,
+                },
+                src: objectUrl,
               },
-              src: objectUrl,
-            },
-          };
+            };
 
-          const imageObj = appendUserIdAndDate(
-            parseAnnotationObject(annotData, viewport.height, scale)
-          );
+            const imageObj = appendUserIdAndDate(
+              parseAnnotationObject(annotData, viewport.height, scale),
+            );
 
-          addAnnots([imageObj]);
-        });
+            addAnnots([imageObj]);
+          },
+        );
       }
     }
   };