geonizeli/x-stake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add js and ts lints

Browse Source
This commit is contained in:
João Geonizeli
2021-08-04 16:16:10 -03:00
parent 8d089c0b7a
commit d623b653b2
20 changed files with 1129 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
.eslintrc Normal file
View File

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

4
app/javascript/channels/consumer.js
View File

@@ -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();

5
app/javascript/channels/index.js
View File

@@ -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$/)
channels.keys().forEach(channels)
const channels = require.context(".", true, /_channel\.js$/);
channels.keys().forEach(channels);

12
app/javascript/modules.d.ts vendored
View File

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

2
app/javascript/packs/application.ts
View File

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

2
app/javascript/packs/react.ts
View File

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

13
app/javascript/src/App.tsx
View File

@@ -1,9 +1,6 @@
import React from "react"
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
import React from "react";
import { 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>
)
}
);
};

7
app/javascript/src/components/Header.tsx
View File

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

9
app/javascript/src/components/Navbar.tsx
View File

@@ -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">

32
app/javascript/src/components/SideNav.tsx
View File

@@ -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
role="row"
className="fixed left-0 right-0 bottom-0 mt-16 top-0 z-40 xl:static xl:w-72"
role="menu"
>
<div
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
key={item.label}
className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer"
>
<a href="#">{item.label}</a>
<Link to={item.path} key={item.label} role="menuitem">
<li className="text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer">
{item.label}
</li>
</Link>
))}
</ul>
</aside>

17
app/javascript/src/contexts/AppContext.tsx
View File

@@ -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>>
sideNavExpanded: boolean
}
setSideNavExpanded: Dispatch<SetStateAction<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 (
<Context.Provider value={{ sideNavExpanded, setSideNavExpanded }}>
{children}
</Context.Provider>
)
}
);
};

16
app/javascript/src/contexts/AuthProvider.tsx
View File

@@ -1,13 +1,15 @@
import { Auth0Provider } from '@auth0/auth0-react'
import React, { FC } from 'react'
/* eslint-disable @typescript-eslint/ban-ts-comment */
import { Auth0Provider } from "@auth0/auth0-react";
import type { FC } from "react";
import React from "react";
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>
)
}
);
};

15
app/javascript/src/index.tsx
View File

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

18
app/javascript/src/pages/Home/Home.tsx
View File

@@ -1,9 +1,11 @@
import React, { FC } from 'react'
import { Container } from '../../components/Container'
import { Header } from '../../components/Header'
import { Navbar } from '../../components/Navbar'
import { PoolListing } from '../../components/PoolListing'
import { SideNav } from '../../components/SideNav'
import type { FC } from "react";
import React from "react";
import { Container } from "../../components/Container";
import { Header } from "../../components/Header";
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>
</>
)
}
);
};

2
app/javascript/src/pages/Home/index.ts
View File

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

2
app/javascript/src/pages/index.ts
View File

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

2
app/javascript/src/pages/index.tsx
View File

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

4
app/javascript/stylesheets/tailwind.config.js
View File

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

9
package.json
View File

@@ -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"
}
}

1047
yarn.lock generated
View File

File diff suppressed because it is too large Load Diff