chore: Add linter

.eslintrc.js

@@ -1,18 +1,17 @@
 module.exports = {
-  parser: 'babel-eslint',
-  extends: ['react-app', 'prettier'],
-  plugins: ['prettier'],
-  rules: {
-    'prettier/prettier': 'error',
-    quotes: ['error', 'backtick']
-  },
+  extends: [
+    `react-app`,
+    `prettier/@typescript-eslint`,
+    `plugin:prettier/recommended`,
+  ],
+  plugins: [`prettier`],
   overrides: [
     {
-      files: ['**/cypress/integration/**/*', '**/cypress/support/**/*'],
+      files: [`**/cypress/integration/**/*`, `**/cypress/support/**/*`],
       globals: {
         cy: false,
-        Cypress: false
-      }
-    }
-  ]
+        Cypress: false,
+      },
+    },
+  ],
 };

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   semi: true,
-  singleQuote: false,
+  singleQuote: true,
   tabWidth: 2,
   trailingComma: 'all'
 };

README.md

@@ -10,6 +10,7 @@ This repository is a monorepo managed with [Lerna](https://github.com/lerna/lern
 | Theme                                                          | Description                                  |
 | -------------------------------------------------------------- | -------------------------------------------- |
 | [gatsby-theme-material-ui](/packages/gatsby-theme-material-ui) | Core Theme to support the use of Material-UI |
+| [gatsby-material-ui-components](/packages/gatsby-material-ui-components) | Material-UI components for Gatsby |
 
 ## Running the examples locally
 

examples/simple/src/components/pro-tip.js

@@ -1,6 +1,6 @@
-import React from "react";
-import { Link } from "gatsby-theme-material-ui";
-import { makeStyles, SvgIcon, Typography } from "@material-ui/core";
+import React from 'react';
+import { Link } from 'gatsby-theme-material-ui';
+import { makeStyles, SvgIcon, Typography } from '@material-ui/core';
 
 function LightBulbIcon(props) {
   return (

examples/simple/src/gatsby-theme-material-ui-top-layout/theme.js

@@ -1,4 +1,4 @@
-import { createMuiTheme, colors } from "@material-ui/core";
+import { createMuiTheme, colors } from '@material-ui/core';
 
 // A custom theme for this app
 const theme = createMuiTheme({

examples/simple/src/pages/about.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { Link } from "gatsby-theme-material-ui";
-import { Container, Box, Typography } from "@material-ui/core";
+import React from 'react';
+import { Link } from 'gatsby-theme-material-ui';
+import { Container, Box, Typography } from '@material-ui/core';
 
-import ProTip from "../components/pro-tip";
+import ProTip from '../components/pro-tip';
 
 function MadeWithLove() {
   return (

examples/simple/src/pages/index.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { Link } from "gatsby-theme-material-ui";
-import { Container, Box, Typography } from "@material-ui/core";
+import React from 'react';
+import { Link } from 'gatsby-theme-material-ui';
+import { Container, Box, Typography } from '@material-ui/core';
 
-import ProTip from "../components/pro-tip";
+import ProTip from '../components/pro-tip';
 
 function MadeWithLove() {
   return (

examples/typescript/src/components/pro-tip.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
-import Typography from "@material-ui/core/Typography";
-import { Link } from "gatsby-theme-material-ui";
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+import Typography from '@material-ui/core/Typography';
+import { Link } from 'gatsby-theme-material-ui';
 
 function LightBulbIcon(props: SvgIconProps) {
   return (

examples/typescript/src/gatsby-theme-material-ui-top-layout/theme.tsx

@@ -1,5 +1,5 @@
-import red from "@material-ui/core/colors/red";
-import { createMuiTheme } from "@material-ui/core";
+import red from '@material-ui/core/colors/red';
+import { createMuiTheme } from '@material-ui/core';
 
 // A custom theme for this app
 const theme = createMuiTheme({

examples/typescript/src/pages/about.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { Link } from "gatsby-theme-material-ui";
-import { Container, Box, Typography } from "@material-ui/core";
+import React from 'react';
+import { Link } from 'gatsby-theme-material-ui';
+import { Container, Box, Typography } from '@material-ui/core';
 
-import ProTip from "../components/pro-tip";
+import ProTip from '../components/pro-tip';
 
 function MadeWithLove() {
   return (

examples/typescript/src/pages/index.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { Link } from "gatsby-theme-material-ui";
-import { Container, Box, Typography } from "@material-ui/core";
+import React from 'react';
+import { Link } from 'gatsby-theme-material-ui';
+import { Container, Box, Typography } from '@material-ui/core';
 
-import ProTip from "../components/pro-tip";
+import ProTip from '../components/pro-tip';
 
 function MadeWithLove() {
   return (

examples/using-redux/src/components/counter.js

@@ -1,6 +1,6 @@
-import React from "react";
-import { connect } from "react-redux";
-import { Box, Button, Typography } from "@material-ui/core";
+import React from 'react';
+import { connect } from 'react-redux';
+import { Box, Button, Typography } from '@material-ui/core';
 
 function Counter({ count, increment }) {
   return (

examples/using-redux/src/components/pro-tip.js

@@ -1,6 +1,6 @@
-import React from "react";
-import { Link } from "gatsby-theme-material-ui";
-import { makeStyles, SvgIcon, Typography } from "@material-ui/core";
+import React from 'react';
+import { Link } from 'gatsby-theme-material-ui';
+import { makeStyles, SvgIcon, Typography } from '@material-ui/core';
 
 function LightBulbIcon(props) {
   return (

examples/using-redux/src/gatsby-theme-material-ui-top-layout/components/top-layout.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { Provider } from "react-redux";
-import ThemeTopLayout from "gatsby-theme-material-ui-top-layout/src/components/top-layout";
+import React from 'react';
+import { Provider } from 'react-redux';
+import ThemeTopLayout from 'gatsby-theme-material-ui-top-layout/src/components/top-layout';
 
-import createStore from "../../state/createStore";
+import createStore from '../../state/createStore';
 
 export default function TopLayout({ children, theme }) {
   const store = createStore();

examples/using-redux/src/gatsby-theme-material-ui-top-layout/theme.js

@@ -1,4 +1,4 @@
-import { createMuiTheme, colors } from "@material-ui/core";
+import { createMuiTheme, colors } from '@material-ui/core';
 
 // A custom theme for this app
 const theme = createMuiTheme({

examples/using-redux/src/pages/about.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { Link } from "gatsby-theme-material-ui";
-import { Box, Container, Typography } from "@material-ui/core";
+import React from 'react';
+import { Link } from 'gatsby-theme-material-ui';
+import { Box, Container, Typography } from '@material-ui/core';
 
-import ProTip from "../components/pro-tip";
+import ProTip from '../components/pro-tip';
 
 function MadeWithLove() {
   return (

examples/using-redux/src/pages/index.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { Link } from "gatsby-theme-material-ui";
-import { Box, Container, Typography } from "@material-ui/core";
+import React from 'react';
+import { Link } from 'gatsby-theme-material-ui';
+import { Box, Container, Typography } from '@material-ui/core';
 
-import ProTip from "../components/pro-tip";
-import Counter from "../components/counter";
+import ProTip from '../components/pro-tip';
+import Counter from '../components/counter';
 
 function MadeWithLove() {
   return (

examples/using-redux/src/state/createStore.js

@@ -1,4 +1,4 @@
-import { createStore as reduxCreateStore } from "redux";
+import { createStore as reduxCreateStore } from 'redux';
 
 const reducer = (state, action) => {
   if (action.type === `INCREMENT`) {

package.json

@@ -14,20 +14,24 @@
     "prepare": "lerna run prepare",
     "all:outdated": "yarn outdated",
     "all:upgrade": "yarn upgrade-interactive --latest",
-    "lint": "eslint . --cache  --report-unused-disable-directives",
-    "lint:ci": "eslint . --report-unused-disable-directives",
-    "lint:fix": "eslint . --cache --fix"
+    "lint": "eslint . --report-unused-disable-directives",
+    "lint:fix": "eslint . --fix"
   },
   "workspaces": [
     "packages/*",
     "examples/*",
     "www"
   ],
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^3.7.0",
+    "@typescript-eslint/parser": "^3.7.0",
     "babel-eslint": "^10.0.2",
     "eslint": "^7.5.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",

packages/gatsby-material-ui-components/package.json

@@ -1,9 +1,16 @@
 {
   "name": "gatsby-material-ui-components",
+  "description": "Material-UI componentes for Gatsby",
   "version": "1.0.0",
   "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "keywords": [
+    "react",
+    "material-ui",
+    "gatsby",
+    "typescript"
+  ],
   "files": [
     "lib"
   ],

packages/gatsby-material-ui-components/src/button.tsx

@@ -1,5 +1,5 @@
-import MuiButton, { ButtonProps } from "@material-ui/core/Button";
+import MuiButton, { ButtonProps } from '@material-ui/core/Button';
 
-import patchButtonBaseComponent from "./patch-base-button-components";
+import patchButtonBaseComponent from './patch-base-button-components';
 
 export const Button = patchButtonBaseComponent<ButtonProps>(MuiButton);

packages/gatsby-material-ui-components/src/card-action-area.tsx

@@ -5,5 +5,5 @@ import MuiCardActionArea, {
 import patchButtonBaseComponent from './patch-base-button-components';
 
 export const CardActionArea = patchButtonBaseComponent<CardActionAreaProps>(
-  MuiCardActionArea
+  MuiCardActionArea,
 );

packages/gatsby-material-ui-components/src/fab.tsx

@@ -1,5 +1,5 @@
-import MuiFab, { FabProps } from "@material-ui/core/Fab";
+import MuiFab, { FabProps } from '@material-ui/core/Fab';
 
-import patchButtonBaseComponent from "./patch-base-button-components";
+import patchButtonBaseComponent from './patch-base-button-components';
 
 export const Fab = patchButtonBaseComponent<FabProps>(MuiFab);

packages/gatsby-material-ui-components/src/glink.tsx

@@ -1,20 +1,25 @@
 import React from 'react';
 import { Link, GatsbyLinkProps } from 'gatsby';
 
-interface ALinkProps extends Omit<GatsbyLinkProps<any> , 'to'> {
+interface ALinkProps extends Omit<GatsbyLinkProps<any>, 'to'> {
   href: string;
 }
 
-const ALink: React.FC<ALinkProps> = ({ href, children, innerRef, ...other }) => (
+const ALink: React.FC<ALinkProps> = ({
+  href,
+  children,
+  innerRef,
+  ...other
+}) => (
   <a href={href} ref={innerRef} {...other}>
     {children}
   </a>
 );
 
 export const GatsbyLink = React.forwardRef(
   (
-    props: Omit<GatsbyLinkProps<any>, 'ref'>,
-    ref: React.Ref<HTMLAnchorElement>
+    props: Omit<GatsbyLinkProps<unknown>, 'ref'>,
+    ref: React.Ref<HTMLAnchorElement>,
   ) => {
     const { to, activeClassName, partiallyActive, ...other } = props;
     const internal = /^\/(?!\/)/.test(to);
@@ -37,7 +42,7 @@ export const GatsbyLink = React.forwardRef(
       );
     }
     return <ALink href={to} innerRef={ref} {...other} />;
-  }
+  },
 );
 
-GatsbyLink.displayName = `Link`;
+GatsbyLink.displayName = 'Link';

packages/gatsby-material-ui-components/src/icon-button.tsx

@@ -1,5 +1,7 @@
-import MuiIconButton, { IconButtonProps } from "@material-ui/core/IconButton";
+import MuiIconButton, { IconButtonProps } from '@material-ui/core/IconButton';
 
-import patchButtonBaseComponent from "./patch-base-button-components";
+import patchButtonBaseComponent from './patch-base-button-components';
 
-export const IconButton = patchButtonBaseComponent<IconButtonProps>(MuiIconButton);
+export const IconButton = patchButtonBaseComponent<IconButtonProps>(
+  MuiIconButton,
+);

packages/gatsby-material-ui-components/src/index.tsx

@@ -1,7 +1,7 @@
-export * from "./link";
-export * from "./glink";
-export * from "./card-action-area";
-export * from "./button";
-export * from "./icon-button";
-export * from "./fab";
-export * from "./bottom-navigation-action";
+export * from './link';
+export * from './glink';
+export * from './card-action-area';
+export * from './button';
+export * from './icon-button';
+export * from './fab';
+export * from './bottom-navigation-action';

packages/gatsby-material-ui-components/src/link.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import MuiLink, { LinkProps } from "@material-ui/core/Link";
+import React from 'react';
+import MuiLink, { LinkProps } from '@material-ui/core/Link';
 
-import { GatsbyLink } from "./glink";
+import { GatsbyLink } from './glink';
 
 export const Link: React.FC<LinkProps & { to?: string }> = (props) => {
   const { to } = props;

packages/gatsby-material-ui-components/src/patch-base-button-components.tsx

@@ -8,12 +8,19 @@ export interface GatsbyProps {
 }
 
 export default function patchButtonBaseComponent<P extends ButtonBaseProps>(
-  BaseButtonComponent: React.ComponentType<P>
+  BaseButtonComponent: React.ComponentType<P>,
 ) {
   return React.forwardRef<React.Ref<unknown>, P & GatsbyProps>((props, ref) => {
     const { to, ...buttonProps } = props;
     const component = to ? GatsbyLink : `button`;
 
-    return <BaseButtonComponent component={component} ref={ref} to={to} {...(buttonProps as P)} />;
+    return (
+      <BaseButtonComponent
+        component={component}
+        ref={ref}
+        to={to}
+        {...(buttonProps as P)}
+      />
+    );
   });
 }

packages/gatsby-theme-material-ui-layout/README.md

@@ -1,4 +1,4 @@
-# gatsby-theme-material-ui-landing-page
+# gatsby-theme-material-ui-layout
 
 > A [Gatsby](https://github.com/gatsbyjs/gatsby) theme for
 > [Material-UI](https://github.com/mui-org/material-ui)

packages/gatsby-theme-material-ui-layout/components.js

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

packages/gatsby-theme-material-ui-layout/gatsby-browser.js

@@ -1,6 +1,6 @@
-import NProgress from "nprogress";
+import NProgress from 'nprogress';
 
-import wrapWithLayout from "./src/wrap-with-layout";
+import wrapWithLayout from './src/wrap-with-layout';
 
 export const wrapPageElement = wrapWithLayout;
 

packages/gatsby-theme-material-ui-layout/gatsby-ssr.js

@@ -1,3 +1,3 @@
-import wrapWithLayout from "./src/wrap-with-layout";
+import wrapWithLayout from './src/wrap-with-layout';
 
 export const wrapPageElement = wrapWithLayout;