diff --git a/.babelrc b/.babelrc index bdbd628..4722ed5 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,6 @@ { "presets": [ - "next/babel", - "stage-0" + "next/babel" ], "plugins": [ [ diff --git a/.circleci/config.yml b/.circleci/config.yml index 807fbc1..cc28fbb 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1,4 +1,3 @@ - version: 2 jobs: build: @@ -8,22 +7,15 @@ jobs: steps: - checkout - restore_cache: - name: Restore node_modules cache keys: - v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "package-lock.json" }} - v1-node-{{ arch }}-{{ .Branch }}- - v1-node-{{ arch }}- - - run: - name: Install Dependencies - command: npm install - - run: - name: Build - command: npm run build - - run: - name: Lint - command: npm run lint + - run: npm install + - run: npm run build + - run: npm run typecheck + - run: npm run lint - save_cache: - name: Save node_modules cache key: v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "package-lock.json" }} paths: - node_modules diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..15265a5 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +/.next +!.eslintrc.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c44febd --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,88 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin/dist/configs/recommended.json'); +const typescriptEslintPrettier = require('eslint-config-prettier/@typescript-eslint'); + +module.exports = { + env: { + node: true, + }, + parser: 'babel-eslint', + extends: [ + 'airbnb', + 'plugin:@typescript-eslint/recommended', + 'prettier', + 'prettier/react', + 'prettier/@typescript-eslint', + ], + plugins: ['prettier'], + rules: { + 'prettier/prettier': 'error', + 'react/jsx-filename-extension': 'off', + 'jsx-a11y/label-has-for': [ + 2, + { + components: ['Label'], + required: { + some: ['nesting', 'id'], + }, + allowChildren: true, + }, + ], + 'import/no-extraneous-dependencies': [ + 'error', + { + devDependencies: ['.eslintrc.js', '**/__tests__/**/*', 'setupTest.ts'], + }, + ], + '@typescript-eslint/no-unused-vars': [ + 'error', + { + devDependencies: ['.eslintrc.js', '**/__tests__/**/*'], + }, + ], + }, + settings: { + 'import/resolver': { + node: { + extensions: ['.js', '.ts', '.tsx'], + }, + }, + }, + overrides: [ + { + files: ['*.ts', '*.tsx'], + parser: '@typescript-eslint/parser', + // NOTE: Workaround for no nested extends possible. + // See https://github.com/eslint/eslint/issues/8813. + // Working solution would be following, if we had nested extends: + // ``` + // extends: [ + // 'airbnb-base', + // 'plugin:@typescript-eslint/recommended', + // 'prettier/@typescript-eslint', + // 'prettier', + // ], + // ``` + plugins: ['@typescript-eslint', 'prettier'], + rules: Object.assign( + typescriptEslintRecommended.rules, + typescriptEslintPrettier.rules, + { + '@typescript-eslint/explicit-function-return-type': 'error', + }, + ), + }, + { + files: [ + 'setupTest.js', + 'setupTest.ts', + '*.spec.js', + '*.spec.ts', + '*.spec.tsx', + ], + env: { + jest: true, + }, + }, + ], +}; diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..15265a5 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +/.next +!.eslintrc.js diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..9166a04 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,4 @@ +module.exports = { + trailingComma: 'all', + singleQuote: true, +}; diff --git a/README.md b/README.md index 2209d6b..7baca28 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,23 @@ # ampreact -⚡⚛ [AMP HTML][amp], [Next.js][next], [React][react], -[styled-components][styled], [GraphQL][graphql] — The most trendy website boilerplate -possible. +⚡⚛ [AMP HTML][], [Next.js][], [React][], [styled-components][], [GraphQL][], +and [TypeScript][] — The most trendy website boilerplate possible. ## About -The core of `ampreact` is built on [Next.js][next], used for all the routing and -serving of pages. For styling, [`styled-components`][styled] makes it easy—with +The core of `ampreact` is built on [Next.js][], used for all the routing and +serving of pages. For styling, [styled-components][] makes it easy—with just a small modification to the rendering of the `