feat: lint (#1368)

* fix: remove eslint and prettier from root

* feat: init eslint-config-faststore

* chore: remove eslint and prettier config from root

* chore: remove tsconfig from root

* feat: config prettier

* feat: eslint rules

* chore: remove eslint-config-faststore

* feat: lint script on ui package

* fix: ui eslint errors

* feat: eslint on sdk package

* fix: remove eslint package from ui package

* feat: eslint on lighthouse package

* feat: rule to ignore params with _

* feat: eslint on graphql utils package

* feat: eslint on api package

* feat: eslint on docs app

* fix: docs eslint errors

* fix: docs eslint errors

.eslintrc

@@ -0,0 +1,39 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "ignoreRestSiblings": true,
+        "argsIgnorePattern": "_+"
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "react/prop-types": ["error", { "skipUndeclared": true }]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.prettierrc

@@ -1 +1,14 @@
-"@vtex/prettier-config"
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}

apps/docs/package.json

@@ -6,6 +6,7 @@
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "build": "docusaurus build",
+    "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",

apps/docs/src/components/CodeBlockWrapper/CodeBlockWrapper.tsx

@@ -3,8 +3,8 @@ import type { MouseEventHandler } from 'react'
 
 
 interface CodeBlockWrapperState {
-  isCodeBlockCollapsed: Boolean
-  isCollapsibleModeOn: Boolean
+  isCodeBlockCollapsed: boolean
+  isCollapsibleModeOn: boolean
 }
 
 interface CodeBlockWrapperProps {

apps/docs/src/components/DocStructure/DocStructure.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Link from '@docusaurus/Link'
-import useBaseUrl from '@docusaurus/useBaseUrl'
+import baseUrl from '@docusaurus/useBaseUrl'
 
 let docs = [
   {
@@ -39,7 +39,7 @@ const DocStructure = () => {
         {docs.map((item, i) => (
           <Link key={i}
             className="focus:no-underline hover:no-underline"
-            to={useBaseUrl(item.url)}
+            to={baseUrl(item.url)}
           >
             <h4 className="block font-black  text-text hover:text-rebelPink">{item.title}</h4>
             <p className="text-details">{item.description}</p>

apps/docs/src/components/DocUpdate/DocUpdate.js

@@ -56,8 +56,8 @@ const DocUpdate = () => {
               <div className="mb-2 leading-9">
                 {item.type === 'Fixed' && (
                   <svg className='inline-block align-middle mr-2' width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M8.13462 15.7692V15.7692C4.05585 15.7692 0.75 12.4634 0.75 8.38462V8.38462C0.75 4.30585 4.05585 1 8.13462 1V1C12.2134 1 15.5192 4.30585 15.5192 8.38462V8.38462C15.5192 12.4634 12.2134 15.7692 8.13462 15.7692Z" stroke="#142032" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                    <path d="M11.4166 6.74316L7.31408 10.8457L4.85254 8.38419" stroke="#142032" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M8.13462 15.7692V15.7692C4.05585 15.7692 0.75 12.4634 0.75 8.38462V8.38462C0.75 4.30585 4.05585 1 8.13462 1V1C12.2134 1 15.5192 4.30585 15.5192 8.38462V8.38462C15.5192 12.4634 12.2134 15.7692 8.13462 15.7692Z" stroke="#142032" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                    <path d="M11.4166 6.74316L7.31408 10.8457L4.85254 8.38419" stroke="#142032" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                   </svg>
                 )}
                 {item.type === 'Removed' && (
@@ -68,8 +68,8 @@ const DocUpdate = () => {
                 )}
                 {item.type === 'Improved' && (
                   <svg className='inline-block align-middle mr-2' width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M8.13462 15.7692V15.7692C4.05585 15.7692 0.75 12.4634 0.75 8.38462V8.38462C0.75 4.30585 4.05585 1 8.13462 1V1C12.2134 1 15.5192 4.30585 15.5192 8.38462V8.38462C15.5192 12.4634 12.2134 15.7692 8.13462 15.7692Z" stroke="#142032" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                    <path d="M11.4166 6.74316L7.31408 10.8457L4.85254 8.38419" stroke="#142032" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M8.13462 15.7692V15.7692C4.05585 15.7692 0.75 12.4634 0.75 8.38462V8.38462C0.75 4.30585 4.05585 1 8.13462 1V1C12.2134 1 15.5192 4.30585 15.5192 8.38462V8.38462C15.5192 12.4634 12.2134 15.7692 8.13462 15.7692Z" stroke="#142032" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                    <path d="M11.4166 6.74316L7.31408 10.8457L4.85254 8.38419" stroke="#142032" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                   </svg>
                 )}
                 {item.type === 'Added' && (
@@ -100,7 +100,7 @@ const DocUpdate = () => {
     comp = (
       <div className="mb-6">
         <h3 className="inline-block mr-3 text-2xl font-extralight align-middle">Documentation Updates</h3>
-        <p>There weren't any documentation updates in the last month.</p>
+        <p>There {"weren't"} any documentation updates in the last month.</p>
       </div>
     )
   }

apps/docs/src/components/GraphQLExplorer/GraphQLExplorer.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ApolloExplorerReact } from '@apollo/explorer'
 import { useColorMode } from '@docusaurus/theme-common'
 
-var GraphQLExplorer = function ({ query, vars }) {
+const GraphQLExplorer = function ({ query, vars }) {
   const { isDarkTheme } = useColorMode()
   return (
     <div>

apps/docs/src/components/PropsSection/PropsSection.jsx

@@ -12,6 +12,7 @@ const PropsSection = ({ name }) => {
 
   return Object.keys(props).map(key => (
     <PropsComponent
+      key={key}
       name={key}
       type={props[key].type?.name}
       defaultValue={props[key].defaultValue?.value ?? null}

apps/docs/src/components/hooks/useInterval.ts

@@ -3,7 +3,7 @@
 import { useEffect, useRef } from 'react';
 
 export function useInterval(callback, delay) {
-  const savedCallback = useRef();
+  const savedCallback = useRef<any>();
 
   // Remember the latest function.
   useEffect(() => {
@@ -12,7 +12,6 @@ export function useInterval(callback, delay) {
 
   // Set up the interval.
   useEffect(() => {
-    // @ts-ignore
     const tick = () => savedCallback.current();
 
     if (delay !== null) {

apps/docs/src/components/hooks/useWindowSize.ts

@@ -11,16 +11,17 @@ export function useWindowSize(): WindowSizeInterface {
   // Initialize state with undefined width/height so server and client renders match
   // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
   const [windowSize, setWindowSize] = useState<WindowSizeInterface>({
-    windowWidth: undefined,
-    windowHeight: undefined,
-    scrollHeight: undefined,
+    windowWidth: 0,
+    windowHeight: 0,
+    scrollHeight: 0,
   });
 
   // Return if running on server
   if (onServer()) {
     return { windowWidth: 0, windowHeight: 0, scrollHeight: 0 };
   }
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     function handleResize() {
       setWindowSize({

apps/docs/src/pages/sections/FaqPage/FaqPage.js

@@ -43,7 +43,7 @@ const FaqPage = () => {
   return (
     <div>
       {data.map(({ question, answer }) => (
-        <FaqQuestion question={question} answer={answer}></FaqQuestion>
+        <FaqQuestion key={question} question={question} answer={answer}></FaqQuestion>
       ))}
     </div>
   )

apps/docs/src/pages/sections/StarterComponentPage/StarterComponentPage.js

@@ -29,7 +29,7 @@ const StarterComponentPage = ({ data = {} }) => {
             </p>
             <ul>
               {data.features?.map((feature) => (
-                <li className=" ml-5 list-disc">{feature}</li>
+                <li key={feature} className=" ml-5 list-disc">{feature}</li>
               ))}
             </ul>
           </div>

apps/docs/src/pages/sections/StarterSubmissionForm/StarterSubmissionForm.jsx

@@ -30,7 +30,7 @@ function StarterSubmissionForm() {
         ).then(() => setIsSent(true))
         .catch(() => alert("There was an error, please try again"))
     }
-    const thankYouMessage = <p className="text-seriousBlack">Thank you for submitting your Starter! We'll get in touch with you as soon as possible!</p>
+    const thankYouMessage = <p className="text-seriousBlack">Thank you for submitting your Starter! {"We'll"} get in touch with you as soon as possible!</p>
     const form = <form className={styles.submissionForm} onSubmit={submitStarter}>
         <label htmlFor="ContactEmail">Contact Email</label>
         <input
@@ -71,7 +71,7 @@ function StarterSubmissionForm() {
         <label htmlFor="Description">Description of Starter ({textAreaCount}/200)</label>
         <textarea
             required
-            maxlength="200"
+            maxLength="200"
             placeholder="Description of Starter (Content limited to 200 characters)"
             name="Description"
             value={Description}
@@ -80,7 +80,7 @@ function StarterSubmissionForm() {
         <label htmlFor="Features">Significant features (1 per line)</label>
         <textarea
             required
-            maxlength="200"
+            maxLength="200"
             placeholder="Features"
             name="Features"
             value={Features}

apps/docs/src/pages/starters/submissions.js

@@ -12,7 +12,7 @@ function Submissions() {
                     <div className="tracking-wider uppercase text-sm text-fontSecondary"><Link href="/starters">← Back</Link></div>
                     <p className="pt-20 uppercase text-sm text-seriousBlack font-bold">Starter Community</p>
                     <h1 className="text-5xl text-seriousBlack font-VTEXTrust py-5">Submit your starter</h1>
-                    <p className='text-lg pt-3 text-[#4A596B]'>Submit your starter and get featured on the FastStore Community Starters Library! If your starter meets our basic standards, we'll add it as quickly as possible to the Library.</p>
+                    <p className='text-lg pt-3 text-[#4A596B]'>Submit your starter and get featured on the FastStore Community Starters Library! If your starter meets our basic standards, {"we'll"} add it as quickly as possible to the Library.</p>
                 </div>
                 <img src ="https://vtexhelp.vtexassets.com/assets/docs/src/starter-submissions___d566d94c0e7e97fe4393a8eee8f3eec0.png"
                     className='block sm:w-1/3 sm:object-contain pt-12 sm:ml-10' />

package.json

@@ -10,46 +10,25 @@
     "lint": "turbo run lint",
     "test": "turbo run test",
     "size": "turbo run size",
-    "format": "prettier --write \"**/*.{ts,tsx,json}\"",
     "release": "lerna version minor --yes && lerna publish from-git --yes",
-    "generate-ui-component": "yarn plop --plopfile generators/plopfile.ts"
+    "generate-ui-component": "yarn plop --plopfile generators/plopfile.ts",
+    "clean": "turbo run clean && rm -rf node_modules",
+    "format": "prettier --ignore-path .gitignore --write \"**/*.{js,jsx,ts,tsx,md}\""
   },
   "workspaces": [
     "packages/*",
     "apps/*"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,jsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.json": [
-      "prettier --write"
-    ]
-  },
   "devDependencies": {
-    "@vtex/prettier-config": "^0.3.5",
-    "eslint": "^7.32.0",
-    "eslint-config-vtex": "^14.1.1",
-    "eslint-config-vtex-react": "^8.1.1",
-    "eslint-plugin-jest-dom": "^3.9.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^4.11.0",
-    "husky": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "lerna": "^3.22.1",
-    "lint-staged": "^10.5.1",
     "plop": "^2.7.6",
-    "prettier": "^2.2.1",
-    "turbo": "latest",
-    "typescript": "^4.1.2"
-  },
-  "resolutions": {
-    "@typescript-eslint/eslint-plugin": "^4",
-    "@typescript-eslint/parser": "^4"
+    "prettier": "^2.7.0",
+    "turbo": "latest"
   }
 }

packages/api/package.json

@@ -17,6 +17,7 @@
     "develop": "tsdx watch --entry ./local/server.ts --target node --onSuccess \"node ./dist\"",
     "develop:no-server": "concurrently \"yarn generate -w\" \"tsdx watch\"",
     "build": "graphql-codegen --config codegen.yml && tsdx build",
+    "lint": "eslint src/**/*.ts",
     "test": "tsdx test",
     "generate": "graphql-codegen --config codegen.yml"
   },