chore: add more lint rules and fix errors

rsmelo92 · Jan 27, 2024 · e224664 · e224664
1 parent a6dfe4b
commit e224664
Show file tree

Hide file tree

Showing 9 changed files with 1,152 additions and 64 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -4,15 +4,38 @@ module.exports = {
  extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
+ "plugin:react/recommended",
  'plugin:react-hooks/recommended',
+ "plugin:import/recommended",
+ "plugin:jsx-a11y/recommended",
+ "plugin:@typescript-eslint/recommended",
+ "eslint-config-prettier"
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
- plugins: ['react-refresh'],
+ plugins: ['react-refresh', 'import'],
  rules: {
  'react-refresh/only-export-components': [
  'warn',
  { allowConstantExport: true },
  ],
+ "react/react-in-jsx-scope": "off",
+ "import/no-unresolved": "error",
+ "react/no-unescaped-entities": "off",
+ "import/no-unresolved": "off",
  },
+ "settings": {
+ "react": {
+ "version": "detect"
+ },
+ "import/parsers": {
+ "@typescript-eslint/parser": [".ts", ".tsx"]
+ },
+ "import/resolver": {
+ "typescript": {
+ "alwaysTryTypes": true
+ }
+ }
+ }
 }
+
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
  "dev": "vite",
  "build": "tsc && vite build",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "lint:fix": "eslint --fix-dry-run . --ext ts,tsx",
  "preview": "vite preview"
  },
  "dependencies": {
@@ -25,12 +26,18 @@
  "@types/node": "^20.11.0",
  "@types/react": "^18.2.43",
  "@types/react-dom": "^18.2.17",
- "@typescript-eslint/eslint-plugin": "^6.14.0",
- "@typescript-eslint/parser": "^6.14.0",
+ "@typescript-eslint/eslint-plugin": "^6.19.1",
+ "@typescript-eslint/parser": "^6.19.1",
  "@vitejs/plugin-react-swc": "^3.5.0",
- "eslint": "^8.55.0",
+ "eslint": "^8.56.0",
+ "eslint-config-prettier": "^9.1.0",
+ "eslint-import-resolver-typescript": "^3.6.1",
+ "eslint-plugin-import": "^2.29.1",
+ "eslint-plugin-jsx-a11y": "^6.8.0",
+ "eslint-plugin-react": "^7.33.2",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-react-refresh": "^0.4.5",
+ "prettier": "^3.2.4",
  "typescript": "^5.2.2",
  "vite": "^5.0.8"
  }

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -11,7 +11,7 @@ export const Hero = () => {
  </h1>
  </div>
  <div>
- <img className={classes.image} src={profile} width={600} height={600} />
+ <img alt="Profile" className={classes.image} src={profile} width={600} height={600} />
  </div>
  </div>
  </section>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -9,7 +9,7 @@ export const Navbar = () => {
  return (
  <nav className={classes.nav}>
  <Link to={ROOT_PATH}>
- <img src={Logo} width={45} height={45} />
+ <img alt="Logo" src={Logo} width={45} height={45} />
  </Link>
  <ul className={classes.list}>
  <li>

diff --git a/src/components/Works/Student.tsx b/src/components/Works/Student.tsx
@@ -20,7 +20,7 @@ export const Student = () => {
  <div>
  <div className={classes.cover}>
  <div>
- {showCover ? <img className={classes.animatedImage} src={cover} /> : <img src={cover} />}
+ {showCover ? <img alt="cover" className={classes.animatedImage} src={cover} /> : <img alt="cover" src={cover} />}
  </div>
  </div>
  <div className={classes.wrapper}>

diff --git a/src/components/Works/Surfe.tsx b/src/components/Works/Surfe.tsx
@@ -7,7 +7,7 @@ export const Surfe = () => {
  <div>
  <div className={classes.cover}>
  <div>
- <img className={classes.image} src={cover} />
+ <img alt="cover" className={classes.image} src={cover} />
  </div>
  </div>
  <div className={classes.wrapper}>

diff --git a/src/components/Works/Works.tsx b/src/components/Works/Works.tsx
@@ -36,6 +36,9 @@ export const Works = ({ title }: Props) => {
  <div className={classes.grid}>
  <div
  className={classes.box}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("architect")}
  onClick={() => setCurrentData("architect")}
  >
  <div
@@ -48,6 +51,9 @@ export const Works = ({ title }: Props) => {
  </div>
  <div className={clsx(classes.forceDark, classes.box)}>
  <div
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("designsystem")}
  onClick={() => setCurrentData("designsystem")}
  className={classes.boxContent}
  style={{
@@ -65,6 +71,9 @@ export const Works = ({ title }: Props) => {
  </div>
  <div className={clsx(classes.forceDark, classes.box)}>
  <div
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("surfe")}
  onClick={() => setCurrentData("surfe")}
  className={classes.boxContent}
  style={{
@@ -75,6 +84,9 @@ export const Works = ({ title }: Props) => {
  </div>
  <div className={classes.box}>
  <div
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("consultar")}
  onClick={() => setCurrentData("consultar")}
  className={classes.boxContent}
  style={{
@@ -84,6 +96,9 @@ export const Works = ({ title }: Props) => {
  </div>
  <div className={classes.box}>
  <div
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("lesgow")}
  onClick={() => setCurrentData("lesgow")}
  className={classes.boxContent}
  style={{
@@ -113,6 +128,9 @@ export const Works = ({ title }: Props) => {
  </div>
  <div className={classes.box}>
  <div
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("student")}
  onClick={() => setCurrentData("student")}
  className={classes.boxContent}
  style={{
@@ -122,6 +140,9 @@ export const Works = ({ title }: Props) => {
  </div>
  <div className={clsx(classes.forceDark, classes.box)}>
  <div
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("lawsuit")}
  onClick={() => setCurrentData("lawsuit")}
  className={classes.boxContent}
  style={{
@@ -132,6 +153,9 @@ export const Works = ({ title }: Props) => {
  </div>
  <div className={classes.box}>
  <div
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("bilheteriapp")}
  onClick={() => setCurrentData("bilheteriapp")}
  className={classes.boxContent}
  style={{
@@ -141,6 +165,9 @@ export const Works = ({ title }: Props) => {
  </div>
  <div className={clsx(classes.forceDark, classes.box)}>
  <div
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("onlineoffice")}
  onClick={() => setCurrentData("onlineoffice")}
  className={classes.boxContent}
  style={{
@@ -161,6 +188,9 @@ export const Works = ({ title }: Props) => {
  </div>
  <div className={clsx(classes.forceDark, classes.box)}>
  <div
+ role="button"
+ tabIndex={0}
+ onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && setCurrentData("ooapp")}
  onClick={() => setCurrentData("ooapp")}
  className={classes.boxContent}
  style={{

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'