add eslint, remove tslint, enable eslint with prettier

mrisoli · Feb 28, 2019 · 8d5a403 · 8d5a403
1 parent f457256
commit 8d5a403
Show file tree

Hide file tree

Showing 12 changed files with 15,934 additions and 111 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,8 @@
+node_modules
+dist
+coverage
+storybook-static
+
+jest.config.js
+jest.setup.js
+next.config.js
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,29 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "google",
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": ["eslint-plugin", "@typescript-eslint", "jest", "prettier", "react"],
+  "rules": {
+    "prettier/prettier": "error",
+    "@typescript-eslint/indent": ["error", 2]
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "next build",
     "build-storybook": "build-storybook",
     "dev": "next",
-    "lint": "tslint --project tsconfig.json --format stylish",
+    "lint": "eslint . --ext .js,.ts",
     "snapshot": "build-storybook && percy-storybook --widths=320,1280",
     "start": "next start",
     "storybook": "start-storybook -p 6006",
@@ -48,20 +48,26 @@
     "@types/react-dom": "^16.8.2",
     "@types/storybook__react": "^4.0.1",
     "@types/styled-components": "^4.1.11",
+    "@typescript-eslint/eslint-plugin": "^1.4.2",
     "babel-core": "^6.26.3",
     "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.5",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.10.0",
+    "eslint": "^5.14.1",
+    "eslint-config-google": "^0.12.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-eslint-plugin": "^2.0.1",
+    "eslint-plugin-jest": "^22.3.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
     "husky": "^1.3.1",
     "jest": "^24.1.0",
     "jest-junit": "^6.3.0",
     "lint-staged": "^8.1.4",
     "prettier": "1.16.4",
     "react-addons-test-utils": "^15.6.2",
     "react-test-renderer": "^16.8.3",
-    "tslint": "^5.13.0",
-    "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.3.3333"
   }
 }
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -10,17 +10,19 @@ export const Layout: React.SFC<LayoutProps> = ({
   children,
   title = "Next.js Boilerplate",
   theme = defaultTheme
-}) => (
-  <ThemeProvider theme={theme}>
-    <React.Fragment>
-    <Head>
-      <title>{title}</title>
-      <meta charSet='utf-8' />
-      <meta name='viewport' content='initial-scale=1.0, width=device-width' />
-    </Head>
+}) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <React.Fragment>
+        <Head>
+          <title>{title}</title>
+          <meta charSet='utf-8' />
+          <meta name='viewport' content='initial-scale=1.0, width=device-width' />
+        </Head>
 
-    {children}
-    </React.Fragment>
+        {children}
+      </React.Fragment>
 
-  </ThemeProvider>
-);
+    </ThemeProvider>
+  )
+};
diff --git a/src/components/types.ts b/src/components/types.ts
@@ -1,6 +1,6 @@
-import { IThemeInterface } from "../theme/types"
+import { ThemeInterface } from '../theme/types';
 
-export type LayoutProps = {
+export interface LayoutProps {
   title?: string;
-  theme?: IThemeInterface;
+  theme?: ThemeInterface;
 }
diff --git a/src/theme/styled-components.ts b/src/theme/styled-components.ts
@@ -1,15 +1,15 @@
-import * as styledComponents from "styled-components";
-import { ThemedStyledComponentsModule } from "styled-components";
+import * as styledComponents from 'styled-components';
+import { ThemedStyledComponentsModule } from 'styled-components';
 
-import { IThemeInterface } from "./types";
+import { ThemeInterface } from './types';
 
 const {
-    default: styled,
-    css,
-    createGlobalStyle,
-    keyframes,
-    ThemeProvider
-} = styledComponents as ThemedStyledComponentsModule<IThemeInterface>;
+  default: styled,
+  css,
+  createGlobalStyle,
+  keyframes,
+  ThemeProvider,
+} = styledComponents as ThemedStyledComponentsModule<ThemeInterface>;
 
 export { css, createGlobalStyle, keyframes, ThemeProvider };
 export default styled;
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -1,5 +1,5 @@
-import { IThemeInterface } from "./types";
+import { ThemeInterface } from './types';
 
-export const defaultTheme: IThemeInterface = {
-  primaryColor: "#000"
+export const defaultTheme: ThemeInterface = {
+  primaryColor: '#000',
 };
diff --git a/src/theme/types.ts b/src/theme/types.ts
@@ -1,3 +1,3 @@
-export interface IThemeInterface {
+export interface ThemeInterface {
   primaryColor: string;
 }
diff --git a/stories/index.stories.tsx b/stories/index.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { action } from '@storybook/addon-actions'
 import { linkTo } from '@storybook/addon-links'

diff --git a/tsconfig.json b/tsconfig.json