Added Prettier Pre-Commit Hooks

.prettierignore

@@ -0,0 +1,5 @@
+package.json
+package-lock.json
+**/node_modules/**
+**/.yoga/**
+**/dist/**

package.json

@@ -24,7 +24,14 @@
   },
   "devDependencies": {
     "apollo": "^2.10.0",
+    "husky": "^2.4.1",
     "now": "^15.3.0",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "pretty-quick": "^1.11.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
   }
-}
+}

packages/gatsby-theme/images.d.ts

@@ -1,4 +1,4 @@
-declare module '*.png'
-declare module '*.jpg'
-declare module '*.jpeg'
-declare module '*.gif'
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';

packages/gatsby-theme/index.ts

@@ -1,2 +1,2 @@
 // no-op
-export * from './src/components/shared/base';
+export * from './src/components/shared/base';

packages/gatsby-theme/src/assets/icons/GraphQLConf.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from 'react';
 
-export default () =>
+export default () => (
   <svg
     width="18"
     height="22"
@@ -29,3 +29,4 @@ export default () =>
       </linearGradient>
     </defs>
   </svg>
+);

packages/gatsby-theme/src/assets/icons/LinkArrow.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
+import * as React from 'react';
 
-export default () =>
+export default () => (
   <svg
     width="10"
     height="10"
@@ -14,3 +14,4 @@ export default () =>
       fill="#000"
     />
   </svg>
+);

packages/gatsby-theme/src/components/Chapter.tsx

@@ -17,11 +17,9 @@ type Tutorial = {
 type FrontMatter = {
   pageTitle: string | null;
   description: string | null;
-}
+};
 
-const Chapter: React.FunctionComponent<ChapterProps> = ({
- num, tutorial
-}) => {
+const Chapter: React.FunctionComponent<ChapterProps> = ({ num, tutorial }) => {
   return (
     <Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">
       <Flex alignItems="center">
@@ -31,7 +29,6 @@ const Chapter: React.FunctionComponent<ChapterProps> = ({
             <Heading as="h2">{tutorial.frontmatter.pageTitle}</Heading>
           </Link>
           <Text>{tutorial.frontmatter.description}</Text>
-
         </div>
       </Flex>
     </Card>

packages/gatsby-theme/src/components/Loader.tsx

@@ -169,10 +169,10 @@ export const CenteredLoader: React.SFC<{ height?: string }> = ({ height }) => {
   return (
     <div
       style={{
-        minHeight: `${height ? height : "100%"}`,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
+        minHeight: `${height ? height : '100%'}`,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       <Loader />

packages/gatsby-theme/src/components/index.d.ts

@@ -1,2 +1,2 @@
 declare module 'gatsby-mdx';
-declare module 'prismjs/components/prism-core';
+declare module 'prismjs/components/prism-core';

packages/gatsby-theme/src/components/listing.tsx

@@ -1,8 +1,8 @@
-import { Link } from "gatsby";
-import * as React from "react";
-import { styled } from "../styles";
-import { useAllTutorialQuery } from "../hooks/useAllTutorialQuery";
-import { getTutorialSlug } from "../utils/getTutorialSlug";
+import { Link } from 'gatsby';
+import * as React from 'react';
+import { styled } from '../styles';
+import { useAllTutorialQuery } from '../hooks/useAllTutorialQuery';
+import { getTutorialSlug } from '../utils/getTutorialSlug';
 
 const Post = styled.article`
   box-shadow: 0 0.3rem 1rem rgba(25, 17, 34, 0.05);

packages/gatsby-theme/src/components/shared/base.d.ts

@@ -8,9 +8,9 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.9
 
-import * as React from "react";
-import * as StyledComponents from "styled-components";
-import * as StyledSystem from "styled-system";
+import * as React from 'react';
+import * as StyledComponents from 'styled-components';
+import * as StyledSystem from 'styled-system';
 
 export {};
 

packages/gatsby-theme/src/components/shared/styledHelpers.tsx

@@ -1,4 +1,4 @@
-import { styled } from "../../styles";
+import { styled } from '../../styles';
 
 export const Content = styled.div`
   max-width: ${p => p.theme.middleContainerWidth}px;

packages/gatsby-theme/src/components/templates/Tutorial.tsx

@@ -19,10 +19,13 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
     return null;
   }
   const { pageTitle } = data!.mdx!.frontmatter!;
-  const tutorialTitle = optionalChaining(() => data!.tutorialTitle!.frontmatter!.tutorialTitle!);
-  const chapters = optionalChaining(() => data!.pageTitles!.edges!.map(
-    a => a.node!.frontmatter!.pageTitle!,
-  )) || [];
+  const tutorialTitle = optionalChaining(
+    () => data!.tutorialTitle!.frontmatter!.tutorialTitle!,
+  );
+  const chapters =
+    optionalChaining(() =>
+      data!.pageTitles!.edges!.map(a => a.node!.frontmatter!.pageTitle!),
+    ) || [];
   const { location } = props;
 
   return (

packages/gatsby-theme/src/hooks/useLayoutQuery.ts

@@ -1,6 +1,6 @@
-import { graphql, useStaticQuery } from "gatsby";
+import { graphql, useStaticQuery } from 'gatsby';
 
-import { LayoutInformationQuery } from "src/graphqlTypes";
+import { LayoutInformationQuery } from 'src/graphqlTypes';
 
 export const useLayoutQuery = () => {
   const { site }: LayoutInformationQuery = useStaticQuery(graphql`

packages/gatsby-theme/src/index.d.ts

@@ -1 +1 @@
-declare module 'gatsby-mdx/mdx-renderer';
+declare module 'gatsby-mdx/mdx-renderer';

packages/gatsby-theme/src/pages/callback.tsx

@@ -2,25 +2,25 @@ import * as React from 'react';
 
 function getParameterByName(name: string, url: string) {
   if (!url) url = window.location.href;
-  name = name.replace(/[\[\]]/g, "\\$&");
-  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+  name = name.replace(/[\[\]]/g, '\\$&');
+  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
     results = regex.exec(url);
   if (!results) return null;
-  if (!results[2]) return "";
-  return decodeURIComponent(results[2].replace(/\+/g, " "));
+  if (!results[2]) return '';
+  return decodeURIComponent(results[2].replace(/\+/g, ' '));
 }
 
 function Callback() {
-  let githubCode = getParameterByName("code", window.location.href);
+  let githubCode = getParameterByName('code', window.location.href);
   let targetWindow = window.opener;
-  targetWindow.postMessage(githubCode, "*");
+  targetWindow.postMessage(githubCode, '*');
 }
 
 export default class AuthCallback extends React.Component {
   componentDidMount() {
-    Callback()
+    Callback();
   }
   render() {
-    return null
+    return null;
   }
 }

packages/gatsby-theme/src/styles/global.ts

@@ -1,6 +1,6 @@
-import { createGlobalStyle } from "./styled";
+import { createGlobalStyle } from './styled';
 
-import normalize from "./normalize";
+import normalize from './normalize';
 
 export const GlobalStyles = createGlobalStyle`
 ${normalize}

packages/gatsby-theme/src/styles/mobile.ts

@@ -1,4 +1,4 @@
-import { css } from ".";
+import { css } from '.';
 
 export const mobile = (inner: any) => css`
   @media (max-width: ${p => p.theme.breakpoints[1]}) {

packages/gatsby-theme/src/styles/normalize.ts

@@ -1,5 +1,5 @@
-import { css } from "styled-components";
-import { theme } from "./theme";
+import { css } from 'styled-components';
+import { theme } from './theme';
 
 export default css`
   /*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */
@@ -54,9 +54,9 @@ export default css`
   */
 
   body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol';
   }
 
   /**
@@ -177,9 +177,9 @@ export default css`
   */
 
   button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
     -webkit-appearance: button;
   }
 
@@ -188,9 +188,9 @@ export default css`
   */
 
   button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
+  [type='button']::-moz-focus-inner,
+  [type='reset']::-moz-focus-inner,
+  [type='submit']::-moz-focus-inner {
     border-style: none;
     padding: 0;
   }
@@ -200,9 +200,9 @@ export default css`
   */
 
   button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
+  [type='button']:-moz-focusring,
+  [type='reset']:-moz-focusring,
+  [type='submit']:-moz-focusring {
     outline: 1px dotted ButtonText;
   }
 
@@ -235,8 +235,8 @@ export default css`
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
 
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
+  [type='number']::-webkit-inner-spin-button,
+  [type='number']::-webkit-outer-spin-button {
     height: auto;
   }
 
@@ -245,7 +245,7 @@ export default css`
   * 2. Correct the outline style in Safari.
   */
 
-  [type="search"] {
+  [type='search'] {
     -webkit-appearance: textfield; /* 1 */
     outline-offset: -2px; /* 2 */
   }
@@ -254,7 +254,7 @@ export default css`
   * Remove the inner padding in Chrome and Safari on macOS.
   */
 
-  [type="search"]::-webkit-search-decoration {
+  [type='search']::-webkit-search-decoration {
     -webkit-appearance: none;
   }
 

packages/gatsby-theme/src/styles/theme/ThemeInterface.ts

@@ -1,7 +1,7 @@
-import { Colors, Sizes, ZIndex, Shadows } from "./index";
+import { Colors, Sizes, ZIndex, Shadows } from './index';
 
 export interface ThemeInterface extends Sizes, ZIndex {
-  mode: "light" | "dark";
+  mode: 'light' | 'dark';
   colors: Colors;
   shadows: Shadows;
 }