add js and ts lints

.eslintrc

@@ -0,0 +1,13 @@
+{
+  "extends": ["vtex"],
+  "ignorePatterns": [
+    "__mocks__/",
+    "__generated__/"
+  ],
+  "overrides": [
+    {
+      "files": ["**/*.tsx"],
+      "extends": ["vtex-react"]
+    }
+  ]
+}

app/javascript/channels/consumer.js

@@ -1,6 +1,6 @@
 // Action Cable provides the framework to deal with WebSockets in Rails.
 // You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
 
-import { createConsumer } from "@rails/actioncable"
+import { createConsumer } from "@rails/actioncable";
 
-export default createConsumer()
+export default createConsumer();

app/javascript/channels/index.js

@@ -1,5 +1,6 @@
 // Load all the channels within this directory and all subdirectories.
 // Channel files must be named *_channel.js.
 
-const channels = require.context('.', true, /_channel\.js$/)
+const channels = require.context(".", true, /_channel\.js$/);
-channels.keys().forEach(channels)
+
+channels.keys().forEach(channels);

app/javascript/modules.d.ts

@@ -1,8 +1,8 @@
-declare module "@rails/ujs"
+declare module "@rails/ujs";
-declare module "turbolinks"
+declare module "turbolinks";
-declare module "@rails/activestorage"
+declare module "@rails/activestorage";
 
-declare module '*.png' {
+declare module "*.png" {
-  const png: string
+  const png: string;
-  export default png
+  export default png;
 }

app/javascript/packs/application.ts

@@ -12,4 +12,4 @@
 // Turbolinks.start()
 // ActiveStorage.start()
 
-import "stylesheets/application"
+import "stylesheets/application";

app/javascript/packs/react.ts

@@ -1 +1 @@
-import '../src/index'
+import "../src/index";

app/javascript/src/App.tsx

@@ -1,9 +1,6 @@
-import React from "react"
+import React from "react";
-import {
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-  BrowserRouter as Router,
+
-  Switch,
-  Route,
-} from "react-router-dom";
 import { AppContext } from "./contexts/AppContext";
 import { AuthProvider } from "./contexts/AuthProvider";
 import { Home } from "./pages";
@@ -26,5 +23,5 @@ export const App = () => {
         </main>
       </AppContext>
     </AuthProvider>
-  )
+  );
-}
+};

app/javascript/src/components/Header.tsx

@@ -1,8 +1,7 @@
-import * as React from "react";
+import type { FC } from "react";
+import React from "react";
 
-export type HeaderProps = {};
+export const Header: FC = ({ children }) => {
-
-export const Header = ({ children }: React.PropsWithChildren<HeaderProps>) => {
   return (
     <div className="w-full h-64 bg-gradient-to-br from-green-300 to-green-400 grid place-items-center">
       {children}

app/javascript/src/components/Navbar.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { useAuth0 } from "@auth0/auth0-react";
-import XStakeLogo from '../images/logo.png'
+
+import XStakeLogo from "../images/logo.png";
 import { useAppContext } from "../contexts/AppContext";
 
 export const Navbar = () => {
-  const { setSideNavExpanded } = useAppContext()
+  const { setSideNavExpanded } = useAppContext();
 
   const handleExpandSideNav = () => {
     setSideNavExpanded((prevState) => !prevState);
@@ -35,9 +36,9 @@ export const Navbar = () => {
       </button>
       <img
         src={XStakeLogo}
-        alt={"XStake Logo"}
+        alt="XStake Logo"
         width={64}
-        placeholder={"blurred"}
+        placeholder="blurred"
       />
       <h1 className="text-2xl font-bold">XStake</h1>
       <div className="w-full h-full flex items-center justify-end">

app/javascript/src/components/SideNav.tsx

@@ -1,35 +1,50 @@
 import * as React from "react";
 import cx from "classnames";
+import { Link } from "react-router-dom";
+
 import { useAppContext } from "../contexts/AppContext";
 
 type MenuItem = {
   label: string;
+  path: string;
 };
 
 const MenuItems: MenuItem[] = [
   {
     label: "Início",
+    path: "/",
   },
   {
     label: "Stake",
+    path: "/stake",
   },
   {
     label: "Carteira",
+    path: "/wallet",
   },
 ];
 
-
 export const SideNav = () => {
-  const { sideNavExpanded, setSideNavExpanded } = useAppContext()
+  const { sideNavExpanded, setSideNavExpanded } = useAppContext();
 
   const handleCloseSideNav = () => {
     setSideNavExpanded(false);
   };
 
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Escape") {
+      handleCloseSideNav();
+    }
+  };
+
   return (
-    <div className="fixed left-0 right-0 bottom-0 mt-16 top-0 z-40 xl:static xl:w-72">
+    <div
+      className="fixed left-0 right-0 bottom-0 mt-16 top-0 z-40 xl:static xl:w-72"
+      role="menu"
+    >
       <div
-        role="row"
+        role="none"
+        onKeyPress={handleKeyPress}
         onClick={() => handleCloseSideNav()}
         className={cx(
           "xl:hidden absolute w-full h-full bg-black bg-opacity-60 backdrop-filter backdrop-blur-sm z-30 transition-all duration-500",
@@ -43,12 +58,11 @@ export const SideNav = () => {
       >
         <ul>
           {MenuItems.map((item) => (
-            <li
+            <Link to={item.path} key={item.label} role="menuitem">
-              key={item.label}
+              <li className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer">
-              className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"
+                {item.label}
-            >
+              </li>
-              <a href="#">{item.label}</a>
+            </Link>
-            </li>
           ))}
         </ul>
       </aside>

app/javascript/src/contexts/AppContext.tsx

@@ -1,11 +1,12 @@
-import React, { createContext, Dispatch, FC, SetStateAction, useContext, useState } from 'react'
+import type { Dispatch, FC, SetStateAction } from "react";
+import React, { createContext, useContext, useState } from "react";
 
 export type AppContext = {
-  setSideNavExpanded: Dispatch<SetStateAction<boolean>>
+  setSideNavExpanded: Dispatch<SetStateAction<boolean>>;
-  sideNavExpanded: boolean
+  sideNavExpanded: boolean;
-}
+};
 
-const Context = createContext<AppContext | null>(null)
+const Context = createContext<AppContext | null>(null);
 
 export const useAppContext = (): AppContext => {
   const context = useContext(Context);
@@ -18,11 +19,11 @@ export const useAppContext = (): AppContext => {
 };
 
 export const AppContext: FC = ({ children }) => {
-  const [sideNavExpanded, setSideNavExpanded] = useState(false)
+  const [sideNavExpanded, setSideNavExpanded] = useState(false);
 
-    return (
+  return (
     <Context.Provider value={{ sideNavExpanded, setSideNavExpanded }}>
       {children}
     </Context.Provider>
-  )
+  );
-}
+};

app/javascript/src/contexts/AuthProvider.tsx

@@ -1,13 +1,15 @@
-import { Auth0Provider } from '@auth0/auth0-react'
+/* eslint-disable @typescript-eslint/ban-ts-comment */
-import React, { FC } from 'react'
+import { Auth0Provider } from "@auth0/auth0-react";
+import type { FC } from "react";
+import React from "react";
 
-export const AuthProvider: FC = ({children}) => {
+export const AuthProvider: FC = ({ children }) => {
   // @ts-ignore
-  const domain = window.AUTH_DOMAIN
+  const domain = window.AUTH_DOMAIN;
   // @ts-ignore
-  const clientId = window.AUTH_CLIENT_ID
+  const clientId = window.AUTH_CLIENT_ID;
   // @ts-ignore
-  const audience = window.AUTH_AUDIENCE
+  const audience = window.AUTH_AUDIENCE;
 
   return (
     <Auth0Provider
@@ -18,5 +20,5 @@ export const AuthProvider: FC = ({children}) => {
     >
       {children}
     </Auth0Provider>
-  )
+  );
-}
+};

app/javascript/src/index.tsx

@@ -1,12 +1,13 @@
-import React from 'react'
+import React from "react";
-import ReactDOM from 'react-dom'
+import ReactDOM from "react-dom";
-import { App } from './App'
 
-document.addEventListener('DOMContentLoaded', () => {
+import { App } from "./App";
+
+document.addEventListener("DOMContentLoaded", () => {
   ReactDOM.render(
     <React.StrictMode>
       <App />
     </React.StrictMode>,
-    document.getElementById('root'),
+    document.getElementById("root")
-  )
+  );
-})
+});

app/javascript/src/pages/Home/Home.tsx

@@ -1,9 +1,11 @@
-import React, { FC } from 'react'
+import type { FC } from "react";
-import { Container } from '../../components/Container'
+import React from "react";
-import { Header } from '../../components/Header'
+
-import { Navbar } from '../../components/Navbar'
+import { Container } from "../../components/Container";
-import { PoolListing } from '../../components/PoolListing'
+import { Header } from "../../components/Header";
-import { SideNav } from '../../components/SideNav'
+import { Navbar } from "../../components/Navbar";
+import { PoolListing } from "../../components/PoolListing";
+import { SideNav } from "../../components/SideNav";
 
 export const Home: FC = () => {
   return (
@@ -26,5 +28,5 @@ export const Home: FC = () => {
         </div>
       </div>
     </>
-  )
+  );
-}
+};

app/javascript/src/pages/Home/index.ts

@@ -1 +1 @@
-export * from './Home'
+export * from "./Home";

app/javascript/src/pages/index.ts

@@ -1 +1 @@
-export * from './Home'
+export * from "./Home";

app/javascript/src/pages/index.tsx

@@ -1 +1 @@
-export * from './Home'
+export * from "./Home";

app/javascript/stylesheets/tailwind.config.js

@@ -7,8 +7,8 @@ module.exports = {
     extend: {
       spacing: {
         ...defaultTheme.spacing,
-        'full': '100%',
+        full: "100%",
-      }
+      },
     },
   },
   variants: {

package.json

@@ -2,7 +2,10 @@
   "name": "x-stake",
   "private": true,
   "scripts": {
-    "dev": "./bin/webpack-dev-server"
+    "dev": "./bin/webpack-dev-server",
+    "lint": "eslint --ext .jsx,.js,.tsx,.ts app/javascript/",
+    "lint:fix": "eslint --fix --ext .jsx,.js,.tsx,.ts app/javascript/",
+    "tsc": "tsc --noEmit"
   },
   "dependencies": {
     "@auth0/auth0-react": "^1.6.0",
@@ -32,6 +35,10 @@
     "@types/ramda": "^0.27.44",
     "@types/react-router-dom": "^5.1.8",
     "dotenv-webpack": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-config-vtex": "^14.1.0",
+    "eslint-config-vtex-react": "^8.1.0",
+    "prettier": "^2.3.2",
     "webpack-dev-server": "^3.11.2"
   }
 }