chore: set up tslint (#60)

chore: set up tslint

.gitattributes

@@ -1 +1 @@
-src/generated/* linguist-vendored
+generated/* linguist-vendored

codegen.yml

@@ -2,7 +2,7 @@ overwrite: true
 schema: "http://localhost:8000/___graphql"
 documents: "src/**/*.graphql"
 generates:
-  src/generated/graphql.ts:
+  generated/graphql.ts:
     plugins:
       - "typescript"
       - "typescript-operations"

package-lock.json

@@ -5274,6 +5274,12 @@
         }
       }
     },
+    "diff": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+      "dev": true
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -16611,6 +16617,106 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
       "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
     },
+    "tslint": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.18.0.tgz",
+      "integrity": "sha512-Q3kXkuDEijQ37nXZZLKErssQVnwCV/+23gFEMROi8IlbaBG6tXqLPQJ5Wjcyt/yHPKBC+hD5SzuGaMora+ZS6w==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "builtin-modules": "^1.1.1",
+        "chalk": "^2.3.0",
+        "commander": "^2.12.1",
+        "diff": "^3.2.0",
+        "glob": "^7.1.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^0.5.1",
+        "resolve": "^1.3.2",
+        "semver": "^5.3.0",
+        "tslib": "^1.8.0",
+        "tsutils": "^2.29.0"
+      },
+      "dependencies": {
+        "builtin-modules": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+          "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
+          "dev": true
+        }
+      }
+    },
+    "tslint-config-prettier": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz",
+      "integrity": "sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg==",
+      "dev": true
+    },
+    "tslint-eslint-rules": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/tslint-eslint-rules/-/tslint-eslint-rules-5.4.0.tgz",
+      "integrity": "sha512-WlSXE+J2vY/VPgIcqQuijMQiel+UtmXS+4nvK4ZzlDiqBfXse8FAvkNnTcYhnQyOTW5KFM+uRRGXxYhFpuBc6w==",
+      "dev": true,
+      "requires": {
+        "doctrine": "0.7.2",
+        "tslib": "1.9.0",
+        "tsutils": "^3.0.0"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
+          "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=",
+          "dev": true,
+          "requires": {
+            "esutils": "^1.1.6",
+            "isarray": "0.0.1"
+          }
+        },
+        "esutils": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
+          "integrity": "sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U=",
+          "dev": true
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "tslib": {
+          "version": "1.9.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
+          "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==",
+          "dev": true
+        },
+        "tsutils": {
+          "version": "3.17.1",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
+          "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        }
+      }
+    },
+    "tslint-react-hooks": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tslint-react-hooks/-/tslint-react-hooks-2.2.1.tgz",
+      "integrity": "sha512-bqIg2uZe+quJMfSOGc4OOZ4awo6TP1ejGDGS6IKg2WIrS0XnWfhUJ99i3B8rUpnZhuD4vRSvyYIbXPUmEqQxxQ==",
+      "dev": true
+    },
+    "tsutils": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.8.1"
+      }
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -16661,6 +16767,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "typescript": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz",
+      "integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g=="
+    },
     "ua-parser-js": {
       "version": "0.7.20",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",

package.json

@@ -21,6 +21,8 @@
     "develop": "gatsby develop",
     "fetch-users": "node ./scripts/fetchUsers.js",
     "format": "prettier --write src/**/*.{js,jsx}",
+    "lint": "tslint -c tslint.json '{src,scripts}/**/*.{js,ts,tsx}'",
+    "lint:fix": "npm run lint -- --fix",
     "serve": "gatsby serve",
     "start": "npm run develop",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
@@ -49,7 +51,8 @@
     "react-helmet": "^5.2.1",
     "react-highlight": "^0.12.0",
     "react-perfect-scrollbar": "^1.5.3",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.3.2",
+    "typescript": "^3.5.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.4.0",
@@ -65,6 +68,10 @@
     "@types/styled-components": "^4.1.18",
     "babel-plugin-styled-components": "^1.10.6",
     "discord.js": "^11.5.1",
-    "prettier": "^1.18.2"
+    "prettier": "^1.18.2",
+    "tslint": "^5.18.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-react-hooks": "^2.2.1"
   }
 }

scripts/buildHelpers.js

@@ -33,9 +33,9 @@ module.exports = {
     const avatar = target ? target.avatar : this.getDefaultAvatar(hash)
 
     return {
-      name,
-      hash,
       avatar,
+      hash,
+      name,
     }
   },
   resolveAuthors(users, authors) {

scripts/fetchUsers.js

@@ -22,6 +22,7 @@ const writeS = (content, dest) => {
 }
 
 client.once("ready", async () => {
+  // tslint:disable-next-line no-console
   console.log("Bot ready, fetching user list...")
   const tph = client.guilds.get(TPH)
   if (!tph) {
@@ -29,16 +30,19 @@ client.once("ready", async () => {
   }
   const guild = await tph.fetchMembers()
   const memberInfo = guild.members.map(member => ({
-    identifier: `${member.user.username}#${member.user.discriminator}`,
     avatar: member.user.displayAvatarURL,
+    identifier: `${member.user.username}#${member.user.discriminator}`,
   }))
   const wrs = fs.createWriteStream(DESTINATION)
+  // tslint:disable-next-line no-console
   console.log(`Fetched ${memberInfo.length} users, writing to ${DESTINATION}`)
   writeS(memberInfo, wrs).on("finish", () => {
+    // tslint:disable-next-line no-console
     console.log("Finished writing list")
     process.exit(0)
   })
 })
 
+// tslint:disable-next-line no-console
 console.log("Attempting to log in...")
 client.login(process.env.BOT_TOKEN)

src/SidebarProvider.tsx

@@ -1,21 +1,21 @@
 import React, { useState } from "react"
 
-interface SidebarProviderProps {
+interface ISidebarProviderProps {
   children: React.ReactNode
 }
 
-export interface SidebarContextInterface {
+export interface ISidebarContextInterface {
   current: number
   setCurrent: (index: number) => void
 }
 
-export const SidebarContext = React.createContext<SidebarContextInterface | null>(
+export const SidebarContext = React.createContext<ISidebarContextInterface | null>(
   null
 )
 
 export function SidebarProvider({
   children,
-}: SidebarProviderProps): JSX.Element {
+}: ISidebarProviderProps): JSX.Element {
   const [current, setCurrent] = useState(0)
 
   function selectFirstLevel(index: number) {

src/components/Footer/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import * as SC from "./styles"
 import { Container } from "../Container"
+import * as SC from "./styles"
 
 export function Footer() {
   return (

src/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from "gatsby"
 import React, { PropsWithChildren } from "react"
-import { Container } from "../Container"
 import logo from "../../images/tph-logo.png"
+import { Container } from "../Container"
 import * as SC from "./styles"
 
 function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {

src/components/Layout/index.tsx

@@ -5,16 +5,16 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
+import { graphql, useStaticQuery } from "gatsby"
 import React, { PropsWithChildren } from "react"
-import { useStaticQuery, graphql } from "gatsby"
 
+import Scrollbar from "react-perfect-scrollbar"
+import "react-perfect-scrollbar/dist/css/styles.css"
+import { GlobalStyles } from "../../globalStyles"
 import { Container } from "../Container"
 import { Footer } from "../Footer"
 import { Header } from "../Header"
-import { GlobalStyles } from "../../globalStyles"
 import * as SC from "./styles"
-import Scrollbar from "react-perfect-scrollbar"
-import "react-perfect-scrollbar/dist/css/styles.css"
 
 export function Layout({ children }: PropsWithChildren<{}>) {
   const data = useStaticQuery(graphql`

src/components/Markdown/index.tsx

@@ -1,12 +1,12 @@
-import React from "react"
-import * as SC from "./styles"
 import Prism from "prismjs"
-import "prismjs/components/prism-python"
 import "prismjs/components/prism-markup-templating"
 import "prismjs/components/prism-php"
+import "prismjs/components/prism-python"
 import "prismjs/plugins/line-numbers/prism-line-numbers.css"
+import React from "react"
+import * as SC from "./styles"
 
-interface MarkdownProps {
+interface IMarkdownProps {
   content: string
 }
 

src/components/ResourceBreadcrumb/index.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 
-import { IFileOrFolder } from "../ResourcesSidebar/index"
 import ChevronUp from "../../icons/chevron-up.svg"
 import { traversePaths } from "../../utils"
+import { IFileOrFolder } from "../ResourcesSidebar/index"
 import * as SC from "./styles"
 
-interface ResourceBreadcrumbProps {
+interface IResourceBreadcrumbProps {
   relativePath: any
 }
 
@@ -24,7 +24,7 @@ function flatten([
   return flatten([...currNode.children, ...previousNodes, currNode])
 }
 
-export function ResourceBreadcrumb({ relativePath }: ResourceBreadcrumbProps) {
+export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) {
   const paths = relativePath.split("/")
   const breadcrumbItems = flatten([traversePaths(paths)])
 

src/components/ResourceBreadcrumb/styles.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components"
 import { Link } from "gatsby"
+import styled from "styled-components"
 
 export const ResourceBreadcrumbWrapper = styled.div`
   display: flex;

src/components/ResourceHeader/index.tsx

@@ -1,11 +1,11 @@
 import React, { Fragment } from "react"
 
-import { StackedAvatars } from "../StackedAvatars"
 import ChevronUp from "../../icons/chevron-up.svg"
 import { ResourceBreadcrumb } from "../ResourceBreadcrumb"
+import { StackedAvatars } from "../StackedAvatars"
 import * as SC from "./styles"
 
-interface ResourceHeaderProps {
+interface IResourceHeaderProps {
   relativePath: any
   title: any
   authors: any

src/components/ResourceHeader/styles.tsx

@@ -1,5 +1,5 @@
-import styled, { css } from "styled-components"
 import { Link } from "gatsby"
+import styled, { css } from "styled-components"
 import { fontFamily, modularScale } from "../../design/typography"
 
 export const ResourceHeaderWrapper = styled.div`

src/components/ResourcesLayout/index.tsx

@@ -8,9 +8,9 @@
 import React, { PropsWithChildren } from "react"
 
 import { GlobalStyles } from "../../globalStyles"
+import { SidebarProvider } from "../../SidebarProvider"
 import { ResourcesSidebar } from "../ResourcesSidebar"
 import * as SC from "./styles"
-import { SidebarProvider } from "../../SidebarProvider"
 
 export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
   return (

src/components/ResourcesSidebar/index.tsx

@@ -1,10 +1,10 @@
-import React, { useState, PropsWithChildren } from "react"
-import { useStaticQuery, graphql, Link } from "gatsby"
-import useBuildTree from "./useBuildTree"
-import useSidebar from "./../../hooks/useSidebar"
-import Banner from "../../images/tph-banner.svg"
+import { graphql, Link, useStaticQuery } from "gatsby"
+import React, { PropsWithChildren, useState } from "react"
 import TriangleDown from "../../icons/triangle-down.svg"
+import Banner from "../../images/tph-banner.svg"
+import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
+import useBuildTree from "./useBuildTree"
 
 export interface IFile {
   title: string

src/components/ResourcesSidebar/styles.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components"
 import { Link } from "gatsby"
+import styled from "styled-components"
 import ChevronUp from "../../icons/chevron-up.svg"
 
 export const ResourcesSidebarWrapper = styled.div`

src/components/ResourcesSidebar/useBuildTree.tsx

@@ -1,13 +1,13 @@
-import partition from "ramda/es/partition"
 import chain from "ramda/es/chain"
+import partition from "ramda/es/partition"
 
 import { traversePaths } from "../../utils"
 import {
-  IFileOrFolder,
-  IFile,
-  IFolder,
   IAllResourcesQuery,
+  IFile,
+  IFileOrFolder,
   IFileQuery,
+  IFolder,
 } from "./index"
 
 function generateFolder({
@@ -44,7 +44,7 @@ function generateFile({
 }
 
 function join([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] {
-  if (!head) return []
+  if (!head) { return [] }
 
   const [similarFs, remaining] = partition(
     obj => obj.title === head.title && obj.type === head.type,

src/components/ResourcesSidebarSection/index.tsx

@@ -1,14 +1,14 @@
 import React, { PropsWithChildren } from "react"
 import * as SC from "./styles"
 
-export interface ResourcesSidebarSectionProps {
+export interface IResourcesSidebarSectionProps {
   readonly title: string
 }
 
 export function ResourcesSidebarSection({
   title,
   children,
-}: PropsWithChildren<ResourcesSidebarSectionProps>) {
+}: PropsWithChildren<IResourcesSidebarSectionProps>) {
   return (
     <div>
       <SC.SidebarTitle>{title}</SC.SidebarTitle>

src/components/SEO/index.tsx

@@ -1,8 +1,8 @@
+import { graphql, useStaticQuery } from "gatsby"
 import React from "react"
 import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
 
-interface SEOProps {
+interface ISEOProps {
   readonly description?: string
   readonly lang?: string
   readonly meta?: any[]
@@ -16,7 +16,7 @@ export function SEO({
   meta = [],
   keywords = [],
   title,
-}: SEOProps) {
+}: ISEOProps) {
   const { site } = useStaticQuery(
     graphql`
       query {

src/components/StackedAvatars/index.tsx

@@ -2,11 +2,11 @@ import React from "react"
 
 import * as SC from "./styles"
 
-interface StackedAvatarsProps {
+interface IStackedAvatarsProps {
   authors: any
 }
 
-export function StackedAvatars({ authors }: StackedAvatarsProps) {
+export function StackedAvatars({ authors }: IStackedAvatarsProps) {
   return (
     <SC.StackedAvatarsWrapper count={authors.length}>
       {authors.map((author, index) => (

src/pages/about.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment } from "react"
 import { graphql } from "gatsby"
+import React, { Fragment } from "react"
+import { MarkdownRemark, Query } from "../../generated/graphql"
 import { Markdown } from "../components/Markdown"
-import { MarkdownRemark, Query } from "../generated/graphql"
 import { SEO } from "../components/SEO"
 
 function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {

src/pages/index.tsx

@@ -1,5 +1,5 @@
-import React, { Fragment } from "react"
 import { Link } from "gatsby"
+import React, { Fragment } from "react"
 
 import { SEO } from "../components/SEO"
 

src/pages/rules.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment } from "react"
 import { graphql } from "gatsby"
+import React, { Fragment } from "react"
+import { MarkdownRemark, Query } from "../../generated/graphql"
 import { Markdown } from "../components/Markdown"
-import { MarkdownRemark, Query } from "../generated/graphql"
 import { SEO } from "../components/SEO"
 
 function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {

src/templates/languagePost.tsx

@@ -1,8 +1,8 @@
-import React, { Fragment } from "react"
 import { graphql } from "gatsby"
+import React, { Fragment } from "react"
 import { Markdown } from "../components/Markdown"
-import { SEO } from "../components/SEO"
 import { ResourceHeader } from "../components/ResourceHeader"
+import { SEO } from "../components/SEO"
 
 // @todo maybe find alternative type for data
 function LanguagePost({ data }: any) {

src/utils/index.ts

@@ -2,7 +2,7 @@ import { IFileOrFolder } from "../components/ResourcesSidebar/index"
 
 export function traversePaths(
   [head, ...tail]: string[],
-  basePath = "/resources"
+  basePath: string = "/resources"
 ): IFileOrFolder {
   const path = basePath + "/" + head
   const isFile = !tail.length

tslint.json

@@ -0,0 +1,34 @@
+{
+  "defaultSeverity": "error",
+  "extends": [
+    "tslint:latest",
+    "tslint-config-prettier",
+    "tslint-eslint-rules",
+    "tslint-react-hooks"
+  ],
+  "linterOptions": {
+    "exclude": ["node_modules"]
+  },
+  "rules": {
+    "no-constant-condition": true,
+    "no-console": false,
+    "interface-name": [true, "always-prefix"],
+    "object-curly-spacing": true,
+    "object-literal-sort-keys": false,
+
+    "member-access": [true, "no-public"],
+    "no-var-keyword": true,
+    "typedef": [
+      true,
+      "parameter",
+      "property-declaration",
+      "member-variable-declaration"
+    ],
+    "no-eval": true,
+    "no-parameter-reassignment": true,
+    "no-submodule-imports": false,
+
+    "react-hooks-nesting": "error"
+  },
+  "rulesDirectory": ["node_modules/tslint-eslint-rules/dist/rules"]
+}