added prettier

.eslintrc

@@ -9,7 +9,6 @@
     "react",
     "@typescript-eslint"
   ],
-  // https://www.npmjs.com/package/@typescript-eslint/eslint-plugin
   "rules": {
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
@@ -21,6 +20,7 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
   ]
-}
+}

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+*.css

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 80,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

.vscode/settings.json

@@ -2,5 +2,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "eslint.validate": ["javascript"]
+  "eslint.validate": ["javascript"],
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode" 
  }

README.md

@@ -13,8 +13,8 @@
 ![GitHub contributors](https://img.shields.io/github/contributors/gabrielogregorio/vavatips-frontend)
 ![GitHub language count](https://img.shields.io/github/languages/count/gabrielogregorio/vavatips-frontend)
 ![GitHub repo size](https://img.shields.io/github/repo-size/gabrielogregorio/vavatips-frontend)
-</div>
 
+</div>
 
 <h2 align="center">Valorant's tips</h2>
 
@@ -26,11 +26,12 @@
 </p>
 
 ## Introduction
-This project was developed using ReactJs, Typescript and React Testing Library. Backend is available at [vavatips-backend](https://github.com/gabrielogregorio/vavatips-backend)
 
+This project was developed using ReactJs, Typescript and React Testing Library. Backend is available at [vavatips-backend](https://github.com/gabrielogregorio/vavatips-backend)
 
 ## Run Project
-1. Fully start the backend, available in the [vavatips-backend]((https://github.com/gabrielogregorio/vavatips-backend)) repository.
+
+1. Fully start the backend, available in the [vavatips-backend](<(https://github.com/gabrielogregorio/vavatips-backend)>) repository.
 2. With the backend working, create an .env file, based on the .env.example file.
 
 ## Available scripts
@@ -56,6 +57,7 @@ Your app is ready to be deployed!
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
 ### `yarn start`
+
 Run in production mode, after run `yarn build`
 
 ### `yarn eject`
@@ -67,4 +69,3 @@ If you aren’t satisfied with the build tool and configuration choices, you can
 Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-

package.json

@@ -54,8 +54,10 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "eslint": "7",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.27.1",
     "msw": "^0.35.0",
+    "prettier": "2.5.0",
     "typescript": "^4.5.2"
   }
 }

prettier.md

@@ -0,0 +1 @@
+// https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

src/App.tsx

@@ -1,3 +1,3 @@
-import Routes from "./core/configs/App";
+import Routes from './core/configs/App';
 
-export default Routes
+export default Routes;

src/components/base/errorMsg/error.spec.tsx

@@ -1,14 +1,18 @@
-import { render, screen } from "@testing-library/react"
-import { ErrorMsg } from '.'
+import { render, screen } from '@testing-library/react';
+import { ErrorMsg } from '.';
 
 describe('<ErrorMsg />', () => {
   it('should render h1', () => {
-    render(<ErrorMsg msg="Mensagem de erro de exemplo" />)
-    expect(screen.getByText(/Mensagem de erro de exemplo/i)).toBeInTheDocument()
-  })
+    render(<ErrorMsg msg="Mensagem de erro de exemplo" />);
+    expect(
+      screen.getByText(/Mensagem de erro de exemplo/i),
+    ).toBeInTheDocument();
+  });
 
   it('should match snapshot', () => {
-    const { container } = render(<ErrorMsg msg="Mensagem de erro de exemplo" />)
-    expect(container.firstChild).toMatchSnapshot()
-  })
-})
+    const { container } = render(
+      <ErrorMsg msg="Mensagem de erro de exemplo" />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

src/components/base/errorMsg/index.tsx

@@ -1,9 +1,7 @@
-import React from "react"
-
 interface propsInterface {
-  msg: string
+  msg: string;
 }
 
 export const ErrorMsg = ({ msg }: propsInterface) => {
-  return <p className="errorMsg">{msg}</p>
-}
+  return <p className="errorMsg">{msg}</p>;
+};

src/components/base/img/img.spec.tsx

@@ -1,9 +1,11 @@
-import { render, screen } from "@testing-library/react"
-import { Img } from '.'
+import { render, screen } from '@testing-library/react';
+import { Img } from '.';
 
 describe('<Img />', () => {
   it('should render image', () => {
-    render(<Img src='image.png' alt="um texto qualquer" />)
-    expect(screen.getByRole('img', {name: 'um texto qualquer'})).toBeInTheDocument()
-  })
-})
+    render(<Img src="image.png" alt="um texto qualquer" />);
+    expect(
+      screen.getByRole('img', { name: 'um texto qualquer' }),
+    ).toBeInTheDocument();
+  });
+});

src/components/base/img/index.tsx

@@ -1,10 +1,8 @@
-import React from "react";
-
 interface propsInterface {
-  src: string,
-  alt: string
+  src: string;
+  alt: string;
 }
 
 export const Img = ({ src, alt }: propsInterface) => {
-  return <img src={src} alt={alt} />
-}
+  return <img src={src} alt={alt} />;
+};

src/components/base/input/index.tsx

@@ -1,22 +1,28 @@
-type typeInput = 'text' | 'password' | 'email'
+type typeInput = 'text' | 'password' | 'email';
 
 interface propsInterface {
-  text: string,
-  value: string,
-  type: typeInput,
-  disabled?:  boolean,
-  setValue: (e: any) => void
+  text: string;
+  value: string;
+  type: typeInput;
+  disabled?: boolean;
+  setValue: (e: any) => void;
 }
 
 export const Input = (props: propsInterface) => {
-  const disabled = props.disabled ?? false
+  const disabled = props.disabled ?? false;
 
   return (
     <div className="groupInput">
       <div className="groupInputSelet">
         <label htmlFor="">{props.text}</label>
-        <input disabled={disabled} type={props.type} value={props.value} placeholder={props.text} onChange={(e) => props.setValue(e.target.value)} />
+        <input
+          disabled={disabled}
+          type={props.type}
+          value={props.value}
+          placeholder={props.text}
+          onChange={(e) => props.setValue(e.target.value)}
+        />
       </div>
     </div>
-  )
-}
+  );
+};

src/components/base/input/input.spec.tsx

@@ -1,33 +1,40 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { Input } from '.'
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Input } from '.';
 
 describe('should test input component', () => {
   it('should render input', () => {
-    const fn = jest.fn()
-    render(<Input
-      text="Description from input"
-      value=""
-      type="text"
-      disabled={false}
-      setValue={fn} />)
-
-      expect(screen.getByPlaceholderText(/Description from input/i)).toBeInTheDocument()
-  })
+    const fn = jest.fn();
+    render(
+      <Input
+        text="Description from input"
+        value=""
+        type="text"
+        disabled={false}
+        setValue={fn}
+      />,
+    );
 
+    expect(
+      screen.getByPlaceholderText(/Description from input/i),
+    ).toBeInTheDocument();
+  });
 
   it('should call handleChange function on each key pressed', () => {
-    const fn = jest.fn()
-    render(<Input
-      text="Description from input"
-      value=""
-      type="text"
-      disabled={false}
-      setValue={fn} />)
+    const fn = jest.fn();
+    render(
+      <Input
+        text="Description from input"
+        value=""
+        type="text"
+        disabled={false}
+        setValue={fn}
+      />,
+    );
 
-    const input: any = screen.getByPlaceholderText(/Description from input/i)
+    const input: any = screen.getByPlaceholderText(/Description from input/i);
 
-    userEvent.type(input, 'a any text')
-    expect(fn).toHaveBeenCalledTimes('a any text'.length)
-  })
-})
+    userEvent.type(input, 'a any text');
+    expect(fn).toHaveBeenCalledTimes('a any text'.length);
+  });
+});

src/components/base/loader/index.tsx

@@ -1,7 +1,7 @@
-import styles from './style.module.css'
+import styles from './style.module.css';
 
 interface loaderProps {
-  active: boolean
+  active: boolean;
 }
 
 export const LoaderComponent = (props: loaderProps) => {
@@ -10,12 +10,8 @@ export const LoaderComponent = (props: loaderProps) => {
       <div data-testid="loader" className={styles.loader}>
         <div />
       </div>
-    ) : null
+    ) : null;
   }
 
-  return  (
-    <>
-      {renderActive()}
-    </>
-  )
-}
+  return <>{renderActive()}</>;
+};

src/components/base/loader/loader.spec.tsx

@@ -1,15 +1,14 @@
-import { render, screen } from '@testing-library/react'
-import { LoaderComponent } from '.'
+import { render, screen } from '@testing-library/react';
+import { LoaderComponent } from '.';
 
 describe('<LoaderComponent />', () => {
   it('should render LoaderComponent', () => {
-    render(<LoaderComponent active={true} />)
-    expect(screen.getByTestId('loader')).toBeInTheDocument()
-  })
+    render(<LoaderComponent active={true} />);
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+  });
 
   it('should not render LoaderComponent if active === false', () => {
-    render(<LoaderComponent active={false} />)
-    expect(screen.queryByTestId('loader')).not.toBeInTheDocument()
-  })
-
-})
+    render(<LoaderComponent active={false} />);
+    expect(screen.queryByTestId('loader')).not.toBeInTheDocument();
+  });
+});

src/components/base/selected/index.tsx

@@ -1,25 +1,30 @@
 interface propsInterface {
-  text: string,
-  value: string,
-  setValue: (event: any) => void,
-  render: () => any[]
+  text: string;
+  value: string;
+  setValue: (event: any) => void;
+  render: () => any[];
 }
 
 export const Selected = (props: propsInterface) => {
-
   function renderItems() {
-    return props.render?.().map(item => {
-      return <option value={item.name} key={item.id} >{item.name}</option>
-    })
+    return props.render?.().map((item) => {
+      return (
+        <option value={item.name} key={item.id}>
+          {item.name}
+        </option>
+      );
+    });
   }
-     
+
   return (
     <div className="groupInputSelet">
       <label>{props.text}</label>
-      <select value={props.value} onChange={(e) => props.setValue(e.target.value)} >
-      <option value=""></option>
+      <select
+        value={props.value}
+        onChange={(e) => props.setValue(e.target.value)}>
+        <option value=""></option>
         {renderItems()}
       </select>
     </div>
-  )
-}
+  );
+};