Merge pull request #2 from team-alembic/add_tslint

Add tslint
team-alembic · Jan 28, 2020 · 3c28d08 · 3c28d08
2 parents af1055f + 72e68a7
commit 3c28d08
Show file tree

Hide file tree

Showing 28 changed files with 286 additions and 280 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "singleQuote": false
+}
diff --git a/package.json b/package.json
@@ -11,9 +11,11 @@
   "dependencies": {
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.15",
+    "@fortawesome/fontawesome": "^1.1.8",
     "@fortawesome/fontawesome-common-types": "^0.2.21",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-brands-svg-icons": "^5.12.0",
+    "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@fortawesome/react-fontawesome": "^0.1.8",
     "@mdx-js/loader": "^1.3.0",
@@ -52,10 +54,18 @@
     "@storybook/addons": "^5.1.10",
     "@storybook/react": "^5.3.3",
     "@types/storybook__react": "^4.0.2",
-    "babel-loader": "^8.0.6"
+    "babel-loader": "^8.0.6",
+    "tslint": "^5.20.1",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-react": "^4.1.0",
+    "tslint-react-hooks": "^2.2.1",
+    "typescript": "^3.7.4"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "tslint": "tslint -p tsconfig.json -c tslint.json",
+    "tslint-fix": "tslint --fix -p tsconfig.json -c tslint.json",
+    "tslint-check": "tslint-config-prettier-check tslint.json"
   }
 }
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Box } from "theme-ui";
+import { Box, jsx } from "theme-ui";
 
 export interface BannerProps {
   backgroundImageUrl: string;

diff --git a/src/components/DefaultHead/index.tsx b/src/components/DefaultHead/index.tsx
@@ -12,8 +12,8 @@ export const DefaultHead = ({ siteYaml, children }: HeadProps) => {
   const { name, streetAddress, city, latitude, longitude } = location
 
   const seo = {
-    title: title,
-    description: description,
+    title,
+    description,
     url: siteUrl,
     image: defaultImage
   };

diff --git a/src/components/EventCard/index.tsx b/src/components/EventCard/index.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Box, Flex, jsx, Styled } from "theme-ui";
 import SiteYamlType from "../../types/siteYaml";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 // import { MDXRenderer } from "gatsby-plugin-mdx";
 
 export interface EventCardProps {

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Box, Flex, jsx, Styled } from "theme-ui";
 import SiteYamlType from "../../types/siteYaml";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { IconButton } from "../buttons/index";
 import { SocialIcon } from "../SocialIcon";

diff --git a/src/components/FooterLinkGroup/index.tsx b/src/components/FooterLinkGroup/index.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Box, Flex, Styled } from "theme-ui";
+import { Box, Flex, jsx, Styled } from "theme-ui";
 
 export const FooterComplete = () => (
   <FooterLinkGroup>

diff --git a/src/components/Head/index.tsx b/src/components/Head/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import Helmet from "react-helmet";
-import SiteYamlType from "../../types/siteYaml";
 import FrontmatterType from "../../types/frontmatter";
+import SiteYamlType from "../../types/siteYaml";
 
 export interface HeadProps {
   siteYaml: SiteYamlType;

diff --git a/src/components/HeaderNav/index.tsx b/src/components/HeaderNav/index.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { useState, useEffect } from "react";
-import { jsx, Box, Flex, Styled } from "theme-ui";
+import { useEffect, useState } from "react";
+import { Box, Flex, jsx, Styled } from "theme-ui";
 import SiteYamlType from "../../types/siteYaml";
 import { Logo } from "../Logo";
 
@@ -18,24 +18,17 @@ export interface HeaderNavProps {
   page: string;
 }
 
-export const HeaderNav = ({
-  togglePageFix,
-  siteYaml,
-  logo,
-  page
-}: HeaderNavProps) => {
+export const HeaderNav = ({ togglePageFix, siteYaml, logo, page }: HeaderNavProps) => {
   const { title, headerNav } = siteYaml;
 
   const [headerBg, setHeaderBg] = useState("headerTransparent");
 
   useEffect(() => {
-    window.addEventListener("scroll", function() {
-      let currentOffset = window.pageYOffset;
-      let windowWidth = window.innerWidth;
-      let breakPoint = windowWidth > 800 ? 200 : 100;
-      setHeaderBg(
-        currentOffset > breakPoint ? "headerOpaque" : "headerTransparent"
-      );
+    window.addEventListener("scroll", () => {
+      const currentOffset = window.pageYOffset;
+      const windowWidth = window.innerWidth;
+      const breakPoint = windowWidth > 800 ? 200 : 100;
+      setHeaderBg(currentOffset > breakPoint ? "headerOpaque" : "headerTransparent");
     });
   });
 
@@ -45,15 +38,15 @@ export const HeaderNav = ({
         backgroundColor: page === "home" ? headerBg : "headerOpaque",
         transition: ".6s",
         paddingX: [4, 4, 5],
-        paddingY: 3
+        paddingY: 3,
       }}
     >
       <BurgerNav
         togglePageFix={togglePageFix}
         title={title}
         links={headerNav.map(link => ({
           description: link.description,
-          href: link.href
+          href: link.href,
         }))}
         logo={logo}
         page={page}
@@ -64,7 +57,7 @@ export const HeaderNav = ({
         logo={logo}
         links={headerNav.map(link => ({
           description: link.description,
-          href: link.href
+          href: link.href,
         }))}
       />
     </Box>
@@ -85,7 +78,7 @@ const Navbar = ({ links, title, logo, page }: NavbarProps) => {
         sx={{
           justifyContent: "space-between",
           alignItems: "center",
-          paddingY: 3
+          paddingY: 3,
         }}
       >
         <Styled.a href="/">
@@ -98,22 +91,22 @@ const Navbar = ({ links, title, logo, page }: NavbarProps) => {
           css={{
             a: {
               opacity: 0.8,
-              transition: ".4s"
+              transition: ".4s",
             },
             "&:hover > a": {
-              opacity: 1
+              opacity: 1,
             },
             "&:hover > a:not(:hover)": {
-              opacity: ".5"
-            }
+              opacity: ".5",
+            },
           }}
         >
           {links.map((link: LinkProps, i: number) => (
             <Styled.a
               key={i}
               href={link.href}
               sx={{
-                textDecoration: "none"
+                textDecoration: "none",
               }}
             >
               <HeaderLink>{link.description.toUpperCase()}</HeaderLink>
@@ -135,10 +128,10 @@ const HeaderLogo = ({ children, logo, page }: HeaderLogoProps) => {
   const [smallHeadingOpacity, setHeadingOpacity] = useState(0);
 
   useEffect(() => {
-    window.addEventListener("scroll", function() {
-      let currentOffset = window.pageYOffset;
-      let windowWidth = window.innerWidth;
-      let breakPoint = windowWidth > 800 ? 500 : 100;
+    window.addEventListener("scroll", () => {
+      const currentOffset = window.pageYOffset;
+      const windowWidth = window.innerWidth;
+      const breakPoint = windowWidth > 800 ? 500 : 100;
       setHeadingOpacity(currentOffset > breakPoint ? 1 : 0);
     });
   });
@@ -160,7 +153,7 @@ const HeaderLogo = ({ children, logo, page }: HeaderLogoProps) => {
           display: "inline-block",
           verticalAlign: "super",
           marginLeft: "20px",
-          transition: ".6s opacity"
+          transition: ".6s opacity",
         }}
       >
         {children}
@@ -183,7 +176,7 @@ const HeaderLink = ({ children }: ChildrenProps) => (
       marginX: [4, 4, 5],
       letterSpacing: [0, 0, "1px"],
       fontWeight: "light",
-      font: "modern"
+      font: "modern",
     }}
   >
     {children}
@@ -195,7 +188,7 @@ const BurgerLink = ({ children }: ChildrenProps) => (
     sx={{
       variant: "borderStyles.veryLightBorderTop",
       width: "100%",
-      padding: 4
+      padding: 4,
     }}
   >
     <Styled.p
@@ -210,8 +203,8 @@ const BurgerLink = ({ children }: ChildrenProps) => (
         "&:hover": {
           color: "background",
           backgroundColor: "elixirLight",
-          variant: "boxShadowStyles.mediumShadow"
-        }
+          variant: "boxShadowStyles.mediumShadow",
+        },
       }}
     >
       {children}
@@ -227,7 +220,7 @@ const IconBar = () => (
       marginY: "6px",
       backgroundColor: "background",
       opacity: 0.8,
-      borderRadius: 4
+      borderRadius: 4,
     }}
   />
 );
@@ -252,13 +245,7 @@ interface BurgerNavProps {
   page: string;
 }
 
-const BurgerNav = ({
-  links,
-  title,
-  togglePageFix,
-  logo,
-  page
-}: BurgerNavProps) => {
+const BurgerNav = ({ links, title, togglePageFix, logo, page }: BurgerNavProps) => {
   const [value, setValue] = useState("none");
 
   const dropDownOnClick = () => {
@@ -278,7 +265,7 @@ const BurgerNav = ({
         sx={{
           justifyContent: "space-between",
           alignItems: "center",
-          paddingY: 3
+          paddingY: 3,
         }}
       >
         <Styled.a href="/">
@@ -298,15 +285,15 @@ const BurgerNav = ({
           variant: "textStyles.modern",
           fontSize: 3,
           zIndex: 25,
-          left: 0
+          left: 0,
         }}
       >
         <Flex
           sx={{
             width: "100%",
             flexDirection: "column",
             textAlign: "center",
-            zIndex: 5
+            zIndex: 5,
           }}
         >
           {links.map((link, i) => (
@@ -326,7 +313,7 @@ const BurgerNav = ({
             width: "100%",
             height: "100%",
             backgroundColor: "darkness",
-            opacity: "0.2"
+            opacity: "0.2",
           }}
         />
       </Box>

diff --git a/src/components/HeroEvent/index.tsx b/src/components/HeroEvent/index.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { Box, Flex, jsx, Styled } from "theme-ui";
-import { IconButton } from "../buttons/index";
 import SiteYamlType from "../../types/siteYaml";
+import { IconButton } from "../buttons/index";
 
 import { Logo } from "../Logo";
 

diff --git a/src/components/MapDescription/index.tsx b/src/components/MapDescription/index.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Box, Flex, jsx, Styled, Container } from "theme-ui";
+import { Box, Container, Flex, jsx, Styled } from "theme-ui";
 import { Map } from "../Map";
 
 export interface MapDescriptionProps {

diff --git a/src/components/NextEvent/index.tsx b/src/components/NextEvent/index.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx, Container, Flex, Styled } from "theme-ui";
 import { MDXRenderer } from "gatsby-plugin-mdx";
+import { Container, Flex, jsx, Styled } from "theme-ui";
 
 export interface NextEventProps {
   siteYaml: any;
@@ -45,7 +45,7 @@ export const NextEvent = ({
               margin: 1,
               fontWeight: "normal"
             }}
-          ></Styled.h4>
+          />
           <Styled.h3
             sx={{
               margin: 1,

diff --git a/src/components/OrganisersRow/index.tsx b/src/components/OrganisersRow/index.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Box, Flex, Styled, Container } from "theme-ui";
+import { Box, Container, Flex, jsx, Styled } from "theme-ui";
 
 import { Avatar } from "../Avatar";
 

diff --git a/src/components/PageInformation/index.tsx b/src/components/PageInformation/index.tsx
@@ -1,24 +1,20 @@
 /** @jsx jsx */
-import { Box, Flex, jsx, Styled } from "theme-ui";
-import { Container } from "theme-ui";
+import { Box, Container, Flex, jsx, Styled } from "theme-ui";
 
 export interface PageInformationProps {
   heading1: string;
   paragraph1: string;
 }
 
-export const PageInformation = ({
-  heading1,
-  paragraph1
-}: PageInformationProps) => {
+export const PageInformation = ({ heading1, paragraph1 }: PageInformationProps) => {
   return (
     <Container sx={{ display: "flex", justifyContent: "center" }}>
       <Box sx={{ width: "100%", marginTop: [5, 0, 0] }}>
         <Heading>{heading1}</Heading>
         <Flex
           sx={{
             width: "100%",
-            flexDirection: ["column", "row", "row"]
+            flexDirection: ["column", "row", "row"],
           }}
         >
           <Paragraph>{paragraph1}</Paragraph>
@@ -40,7 +36,7 @@ const Paragraph = ({ children }: ChildrenProps) => (
       flexDirection: "column",
       fontFamily: "body",
       marginX: [0, 0, 90],
-      marginBottom: 40
+      marginBottom: 40,
     }}
   >
     {children}
@@ -56,7 +52,7 @@ const Heading = ({ children }: ChildrenProps) => (
       variant: "textStyles.heading",
       marginY: 50,
       fontFamily: "body",
-      fontWeight: "normal"
+      fontWeight: "normal",
     }}
   >
     {children}