chore: update deps (#17)

Author: Meemaw

.eslintrc.production.js

@@ -1,31 +1,73 @@
 module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  reportUnusedDisableDirectives: true,
+  plugins: [
+    'react',
+    'prettier',
+    'jest',
+    'react-hooks',
+    'import',
+    'testing-library',
+    'testcafe',
+    '@typescript-eslint',
+  ],
   extends: [
     'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier/@typescript-eslint',
-    'plugin:prettier/recommended',
+    'airbnb',
+    'prettier',
+    'prettier/react',
+    'plugin:jest/recommended',
+    'plugin:testing-library/react',
     'plugin:testcafe/recommended',
+    'plugin:@typescript-eslint/recommended',
   ],
-  plugins: ['react', '@typescript-eslint', 'prettier', 'testcafe'],
   env: {
     browser: true,
     jest: true,
     node: true,
     es6: true,
   },
   rules: {
-    '@typescript-eslint/explicit-function-return-type': ['off'],
+    'arrow-body-style': ['off'],
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],
+    'no-use-before-define': ['off'],
+
+    'jsx-a11y/anchor-is-valid': ['off'],
+
+    'jest/expect-expect': ['off'],
+
+    'import/no-unresolved': ['off'],
+    'import/no-extraneous-dependencies': ['off'],
+    'import/extensions': ['off'],
+    'import/prefer-default-export': ['off'],
+    'import/order': [
+      1,
+      {
+        'newlines-between': 'always',
+        groups: [
+          'builtin',
+          ['external', 'internal'],
+          'parent',
+          ['sibling', 'index'],
+        ],
+      },
+    ],
+
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unused-vars': [
       'error',
       { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
     ],
   },
-  settings: {
-    react: {
-      pragma: 'React',
-      version: 'detect',
+  overrides: [
+    {
+      files: ['*.e2e.ts'],
+      rules: {
+        'jest/expect-expect': ['off'],
+        'jest/no-test-callback': ['off'],
+        'jest/no-done-callback': ['off'],
+      },
     },
-  },
-  parser: '@typescript-eslint/parser',
+  ],
 };

.github/workflows/website.yml

@@ -14,7 +14,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v1
         with:
-          node-version: '13.x'
+          node-version: '14.x'
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -46,7 +46,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v1
         with:
-          node-version: '13.x'
+          node-version: '14.x'
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -89,7 +89,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v1
         with:
-          node-version: '12.x'
+          node-version: '14.x'
       - name: Install packages
         run: |
           yarn install --frozen-lockfile

.prettierrc

@@ -1,6 +1,4 @@
 {
-  "printWidth": 100,
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "singleQuote": true
 }

.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
-  addons: ['@storybook/preset-typescript', '@storybook/addon-actions/register'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-links',
+    '@storybook/addon-storysource',
+  ],
 };

.storybook/webpack.config.js

@@ -2,8 +2,7 @@ const path = require('path');
 
 module.exports = ({ config }) => {
   // Required for absolute imports in Storybook
-  const resolvedModules = config.resolve.modules || [];
-  config.resolve.modules = [...resolvedModules, path.resolve(process.cwd(), 'src')];
+  config.resolve.modules.push(path.resolve(process.cwd(), 'src'));
 
   config.resolve.extensions.push('.ts', '.tsx');
   return config;

.vscode/settings.json

@@ -3,5 +3,14 @@
   "files.insertFinalNewline": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
 }

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:13-alpine as build
+FROM node:14-alpine as build
 
 COPY . /src
 WORKDIR /src
@@ -7,7 +7,7 @@ RUN yarn install --frozen-lockfile
 RUN yarn build
 RUN yarn install --frozen-lockfile --production --ignore-scripts --prefer-offline
 
-FROM node:13-alpine
+FROM node:14-alpine
 
 WORKDIR /usr/app
 

e2e/specs/HomePage.e2e.ts

@@ -1,11 +1,14 @@
+import 'testcafe';
 import { getByText } from '@testing-library/testcafe';
 
 import config from '../config';
 
 fixture('<HomePage />').page(config.baseURL);
 
 test('Can navigate to about page', async (t) => {
-  await t.expect(getByText('This is our homepage.').exists).ok('Renders HomePage text');
+  await t
+    .expect(getByText('This is our homepage.').exists)
+    .ok('Renders HomePage text');
 
   await t
     .click(getByText('About Us'))

jest.config.js renamed to jest.config.ts

@@ -1,13 +1,17 @@
-module.exports = {
+import type { Config } from '@jest/types';
+
+const config: Config.InitialOptions = {
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   globals: {
     'ts-jest': {
-      tsConfig: 'tsconfig.jest.json',
+      tsconfig: 'tsconfig.jest.json',
     },
   },
   // Required for absolute imports in Jest
   moduleDirectories: ['node_modules', 'src'],
 };
+
+export default config;

package.json

@@ -28,41 +28,49 @@
     "storybook": "start-storybook"
   },
   "dependencies": {
-    "ky": "^0.19.0",
-    "ky-universal": "^0.5.0",
-    "next": "^9.3.3",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "ky": "0.25.1",
+    "ky-universal": "0.8.2",
+    "next": "10.0.3",
+    "react": "17.0.1",
+    "react-dom": "17.0.1"
   },
   "devDependencies": {
-    "@ffmpeg-installer/ffmpeg": "^1.0.20",
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^5.3.17",
-    "@testing-library/jest-dom": "^5.0.2",
-    "@testing-library/react": "^10.0.1",
-    "@testing-library/testcafe": "^4.0.0",
-    "@types/jest": "^25.1.4",
-    "@types/node": "^13.9.8",
-    "@types/react": "^16.9.19",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.1.0",
-    "concurrently": "^5.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.9.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
-    "eslint-plugin-testcafe": "^0.2.1",
-    "jest": "^25.2.4",
-    "prettier": "^2.0.2",
-    "serverless": "^1.61.3",
-    "serverless-next.js": "^1.9.7",
-    "testcafe": "^1.8.1",
-    "ts-jest": "^25.3.0",
-    "typescript": "^3.7.5",
-    "wait-on": "^4.0.0"
+    "@ffmpeg-installer/ffmpeg": "1.0.20",
+    "@storybook/addon-actions": "6.1.10",
+    "@storybook/addon-links": "6.1.10",
+    "@storybook/addon-storysource": "6.1.10",
+    "@storybook/react": "6.1.10",
+    "@testing-library/jest-dom": "5.11.6",
+    "@testing-library/react": "11.2.2",
+    "@testing-library/testcafe": "4.3.1",
+    "@testing-library/user-event": "12.5.0",
+    "@types/jest": "26.0.17",
+    "@types/node": "14.14.11",
+    "@types/react": "17.0.0",
+    "@typescript-eslint/eslint-plugin": "4.9.1",
+    "@typescript-eslint/parser": "4.9.1",
+    "babel-loader": "8.2.2",
+    "concurrently": "5.3.0",
+    "eslint": "7.15.0",
+    "eslint-config-airbnb": "18.2.1",
+    "eslint-config-prettier": "7.0.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jest": "24.1.3",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.2.0",
+    "eslint-plugin-react": "7.21.5",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-testcafe": "0.2.1",
+    "eslint-plugin-testing-library": "3.10.1",
+    "jest": "26.6.3",
+    "next-page-tester": "0.10.0",
+    "prettier": "2.2.1",
+    "serverless-next.js": "1.14.0",
+    "testcafe": "1.9.4",
+    "ts-jest": "26.4.4",
+    "ts-node": "9.1.1",
+    "typescript": "4.1.2",
+    "wait-on": "5.2.0"
   },
   "husky": {
     "hooks": {

src/__tests__/pages/about.spec.ts

@@ -0,0 +1,21 @@
+import { getPage } from 'next-page-tester';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('/about', () => {
+  it('Should work', async () => {
+    const { page } = await getPage({ route: '/about' });
+    render(page);
+
+    expect(screen.getByText('We are a cool company.')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        '{"userId":1,"id":1,"title":"delectus aut autem","completed":false}'
+      )
+    ).toBeInTheDocument();
+
+    userEvent.click(screen.getByText('Home'));
+
+    await screen.findByText('This is our homepage.');
+  });
+});

src/components/AboutUs/AboutUs.stories.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { Meta } from '@storybook/react';
 
-import AboutUs from './AboutUs';
+import { AboutUs } from './AboutUs';
 
 export default {
   title: 'AboutUs',
-};
+  component: AboutUs,
+} as Meta;
 
 export const Default = () => <AboutUs />;

src/components/AboutUs/AboutUs.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 
-const About: React.FC = () => {
+export const AboutUs = () => {
   return (
     <div className="about-us">
       <h1>About</h1>
       <p>We are a cool company.</p>
     </div>
   );
 };
-
-export default About;

src/components/AboutUs/index.ts

@@ -1 +1 @@
-export { default } from './AboutUs';
+export { AboutUs } from './AboutUs';

src/containers/AboutPage/AboutPage.spec.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { Meta } from '@storybook/react';
 
-import AboutPage from './AboutPage';
+import { AboutPage } from './AboutPage';
 
 export default {
   title: 'AboutPage',
-};
+  component: AboutPage,
+} as Meta;
 
-export const Default = () => <AboutPage todos={{}} />;
+export const Default = () => <AboutPage todos={[]} />;

src/containers/AboutPage/AboutPage.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import Link from 'next/link';
-
-import AboutUs from 'components/AboutUs';
+import { AboutUs } from 'components/AboutUs';
+import { Todo } from 'pages/about';
 
 type Props = {
-  todos: object;
+  todos: Todo[];
 };
 
-const About = ({ todos }: Props) => {
+export const AboutPage = ({ todos }: Props) => {
   return (
     <>
       <ul>
@@ -26,5 +26,3 @@ const About = ({ todos }: Props) => {
     </>
   );
 };
-
-export default About;

src/containers/AboutPage/AboutPage.tsx

@@ -1 +1 @@
-export { default } from './AboutPage';
+export { AboutPage } from './AboutPage';