Convert TSLint to ESLint and remove unused CMS and deps

.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+    'plugin:react/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/explicit-module-boundary-types': 'error',
+  },
+}

README.md

@@ -37,28 +37,6 @@
 
     Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data.
 
-## 📝 Netlify CMS
-
-_Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows._ — [Netlify CMS Docs](https://www.netlifycms.org/docs/intro/)
-
-Netlify CMS starts in parallel with Gatsby. You can access it at `http://localhost:8000/admin/`.
-
-`/admin/` path can be changed by changing `publicPath` option in `gatsby-config.js`:
-
-```js
-...
-{
-  resolve: `gatsby-plugin-netlify-cms`,
-  options: {
-    modulePath: `${__dirname}/src/cms/cms.jsx`,
-    enableIdentityWidget: false,
-    publicPath: 'admin',
-    htmlTitle: 'Admin cesko.digital',
-  },
-},
-...
-```
-
 ## ⌨️ Commands
 
 `yarn develop`: Start development version of the project.
@@ -86,11 +64,7 @@ Netlify CMS starts in parallel with Gatsby. You can access it at `http://localho
 
 ### Styling
 
-We are using [Styled Components](https://styled-components.com/docs) and [Rebass](https://rebassjs.org/getting-started) for styling components and also for layout. Rebass provides easy [theming](https://rebassjs.org/theming).
-
-### Linting
-
-We use [TSLint](https://palantir.github.io/tslint/) to lint our code in combination with [Prettier](https://prettier.io/). Setting up TSLint was inspired by [Maxime Heckel](https://blog.maximeheckel.com/posts/getting-started-with-typescript-on-gatsby-8544b47c1d27).
+We are using [Styled Components](https://styled-components.com/docs).
 
 ### MDX
 

gatsby-config.js

@@ -19,22 +19,6 @@ module.exports = {
     `gatsby-transformer-sharp`,
     // Docs: https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/
     `gatsby-plugin-sharp`,
-    {
-      // Docs: https://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms/
-      // Netlify CMS admin config also in /static/admin/config.yml
-      resolve: `gatsby-plugin-netlify-cms`,
-      options: {
-        // This loads settings for Netlify CMS, custom widgets etc.
-        modulePath: `${__dirname}/src/cms/cms.jsx`,
-        // Do no bundle Identity Widget
-        // Docs: https://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms/#enableidentitywidget
-        enableIdentityWidget: false,
-        // Specifies public path to administration
-        publicPath: 'admin',
-        // Browser title displayed in administration
-        htmlTitle: 'Admin cesko.digital',
-      },
-    },
     {
       // Docs: https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/
       resolve: `gatsby-plugin-mdx`,
@@ -61,8 +45,6 @@ module.exports = {
     },
     // Docs: https://www.gatsbyjs.org/packages/gatsby-plugin-typescript/
     `gatsby-plugin-typescript`,
-    // Docs: https://www.gatsbyjs.org/packages/gatsby-plugin-tslint/
-    `gatsby-plugin-tslint`,
     // This (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // Docs: https://www.gatsbyjs.org/packages/gatsby-plugin-offline/

package.json

@@ -13,7 +13,8 @@
     "clean": "gatsby clean",
     "format": "prettier --write \"**/*.{js,jsx,json,md,ts,tsx}\"",
     "type-check": "tsc --noEmit",
-    "lint": "tslint --project .",
+    "lint": "eslint './{src,stories}/**/*.{ts,tsx,js,jsx}'",
+    "lint:fix": "eslint --fix './{src,stories}/**/*.{ts,tsx,js,jsx}'",
     "test": "jest",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
@@ -29,18 +30,12 @@
     "gatsby-plugin-offline": "^3.2.16",
     "gatsby-plugin-react-helmet": "^3.3.9",
     "gatsby-plugin-sharp": "^2.6.18",
-    "gatsby-plugin-tslint": "^0.0.2",
     "gatsby-plugin-typescript": "^2.4.13",
     "gatsby-source-filesystem": "^2.3.18",
     "gatsby-transformer-sharp": "^2.5.10",
-    "netlify-cms-app": "^2.12.16",
-    "netlify-cms-locales": "^1.16.0",
-    "netlify-cms-widget-mdx": "^0.4.3",
-    "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0",
-    "rebass": "^4.0.7",
     "styled-components": "^5.1.1"
   },
   "devDependencies": {
@@ -57,21 +52,24 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-helmet": "^6.1.0",
     "@types/react-test-renderer": "^16.9.2",
+    "@types/rebass": "^4.0.7",
+    "@types/styled-components": "^5.1.4",
+    "@typescript-eslint/eslint-plugin": "^4.4.1",
+    "@typescript-eslint/parser": "^4.4.1",
     "babel-jest": "^26.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-remove-graphql-queries": "^2.9.12",
     "babel-preset-gatsby": "^0.5.1",
     "babel-preset-react-app": "^9.1.2",
+    "eslint": "^7.11.0",
+    "eslint-config-prettier": "^6.13.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.1.0",
     "prettier": "^2.0.5",
     "react-is": "^16.13.1",
     "react-test-renderer": "^16.13.1",
-    "tslint": "^6.1.2",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-loader": "^3.5.4",
-    "tslint-plugin-prettier": "^2.3.0",
-    "tslint-react": "^5.0.0",
     "typescript": "^3.9.6"
   },
   "resolutions": {

src/components/__tests__/seo.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import { PureSEO as SEO } from '../seo'
+import { GraphQLData, PureSEO as SEO } from '../seo'
 
 describe('SEO', () => {
   it('renders correctly', () => {
-    // Created using the query from SEO.js
-    const data = {
+    const data: GraphQLData = {
       site: {
         siteMetadata: {
           title: 'cesko.digital',
+          description: 'lorem ipsum',
+          author: 'Jose',
         },
       },
     }

src/components/layout.tsx

@@ -6,15 +6,15 @@
  */
 
 import { graphql, useStaticQuery } from 'gatsby'
-import React from 'react'
+import React, { ReactNode } from 'react'
 
 import { Theme } from '../theme'
 
 interface Props {
-  children?: any
+  children: ReactNode
 }
 
-const Layout = ({ children }: Props) => {
+const Layout: React.FC<Props> = ({ children }: Props) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {

src/components/seo.tsx

@@ -9,8 +9,20 @@ import React from 'react'
 import Helmet from 'react-helmet'
 import { useStaticQuery, graphql } from 'gatsby'
 
+interface SiteMetadata {
+  description: string
+  title: string
+  author: string
+}
+
+export type GraphQLData = {
+  site: {
+    siteMetadata: SiteMetadata
+  }
+}
+
 interface PureSEOProps {
-  data: any
+  data: GraphQLData
   description?: string
   lang?: string
   meta?: []
@@ -24,11 +36,10 @@ interface SEOProps {
   title: string
 }
 
-export const PureSEO = ({
+export const PureSEO: React.FC<PureSEOProps> = ({
   data,
   description,
   lang,
-  meta,
   title,
 }: PureSEOProps) => {
   const metaDescription = description || data.site.siteMetadata.description
@@ -78,7 +89,7 @@ export const PureSEO = ({
   )
 }
 
-const SEO = ({ description, lang, meta, title }: SEOProps) => {
+const SEO: React.FC<SEOProps> = ({ description }: SEOProps) => {
   const data = useStaticQuery(
     graphql`
       query {

src/layouts/DefaultLayout.tsx

@@ -1,13 +1,14 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 
 interface Props {
-  children: any
+  children: ReactNode
 }
 
-export default ({ children }: Props) => (
+const DefaultLayout: React.FC<Props> = ({ children }: Props) => (
   <div>
     <h1>Default layout</h1>
 
     <div>{children}</div>
   </div>
 )
+export default DefaultLayout

src/pages/404.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import Layout from '../components/layout'
 import SEO from '../components/seo'
 
-const NotFoundPage = () => (
+const NotFoundPage: React.FC = () => (
   <Layout>
     <SEO title="404: Not found" />
     <h1>NOT FOUND</h1>

src/pages/index.tsx

@@ -4,7 +4,7 @@ import { Link } from 'gatsby'
 import Layout from '../components/layout'
 import SEO from '../components/seo'
 
-const IndexPage = () => (
+const IndexPage: React.FC = () => (
   <Layout>
     <SEO title="Home" />
 

src/pages/page-2.tsx

@@ -4,7 +4,7 @@ import { Link } from 'gatsby'
 import Layout from '../components/layout'
 import SEO from '../components/seo'
 
-const SecondPage = () => (
+const SecondPage: React.FC = () => (
   <Layout>
     <SEO title="Page two" />
 

src/theme/index.tsx

@@ -0,0 +1,18 @@
+import React, { Fragment, ReactNode } from 'react'
+import { ThemeProvider } from 'styled-components'
+
+import { defaultTheme as theme } from './default'
+import { GlobalStyle } from './GlobalStyle'
+
+interface Props {
+  children: ReactNode
+}
+
+export const Theme: React.FC<Props> = ({ children }: Props) => (
+  <ThemeProvider theme={theme}>
+    <Fragment>
+      <GlobalStyle />
+      {children}
+    </Fragment>
+  </ThemeProvider>
+)