update whole project

.eslintignore

@@ -1,8 +1,10 @@
+!.storybook
+.history
+.next
+.nyc_output
+coverage
 tmp
 *.min.js
-
-build
 out
-
-docs
 cypress/integration/examples
+cypress/fixtures/example.json

.eslintrc.js

@@ -11,16 +11,10 @@ module.exports = {
   plugins: ['react-hooks'],
   env: {
     browser: true,
+    es2020: true,
     node: true,
   },
-  globals: {
-    jest: true,
-  },
   parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-  },
   settings: {
     react: {
       // Tells eslint-plugin-react to automatically detect the version of React to use
@@ -41,6 +35,7 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'warn',
     'react-hooks/rules-of-hooks': 'error',
     '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unused-vars': [
       'error',
       { ignoreRestSiblings: true },

.github/workflows/main.yml

@@ -23,30 +23,13 @@ jobs:
         run: |
           node -v
           npm -v
+          yarn -v
 
-      - name: Run npm install
-        run: npm install
+      - name: Install
+        run: yarn
 
-      - name: Run lint
-        run: npm run lint
+      - name: Lint
+        run: yarn lint
 
-      - name: Run unit tests
-        run: npm run test:ci:unit
-
-  e2e:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '*'
-
-      - name: Run npm install
-        run: npm install
-
-      - name: Run build
-        run: npm run build:coverage
-
-      - name: Run e2e test
-        run: npm run ci:test:e2e
+      - name: Test
+        run: yarn test:ci

.gitignore

@@ -34,4 +34,5 @@ yarn-error.log*
 
 # cypress
 cypress/integration/examples
+cypress/fixtures/example.json
 cypress/screenshots

.storybook/main.js

@@ -0,0 +1,7 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  webpackFinal: async baseConfig => {
+    return { ...baseConfig };
+  },
+};

.storybook/middleware.js

@@ -0,0 +1,5 @@
+const setRoutes = require('../server/routes');
+
+module.exports = function expressMiddleware(router) {
+  setRoutes(router);
+};

.storybook/preview-head.html

@@ -0,0 +1,24 @@
+<style>
+  html {
+    height: 100%;
+    overflow: hidden;
+    font-family: sans-serif;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  #root,
+  #docs-root {
+    height: 100%;
+    overflow: auto;
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RouterContext } from 'next/dist/next-server/lib/router-context';
+// NOTE: can add a global CSS
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};
+
+export const decorators = [
+  Story => (
+    // https://github.com/vercel/next.js/issues/15543#issuecomment-664955766
+    <RouterContext.Provider
+      value={{
+        prefetch: () => {
+          return Promise.resolve();
+        },
+        push: () => {
+          return Promise.resolve();
+        },
+        replace: () => {
+          return Promise.resolve();
+        },
+      }}
+    >
+      <Story />
+    </RouterContext.Provider>
+  ),
+];

cypress/support/index.d.ts → @types/cypress/index.d.ts

@@ -1,16 +1,10 @@
-// in cypress/support/index.d.ts
-// load type definitions that come with Cypress module
-/// <reference types="cypress" />
-
 declare namespace Cypress {
-  interface ConfigOptions {
+  interface ResolvedConfigOptions {
     custom: {
-      pages: {
-        default: string;
-        posts: string;
+      components: {
+        [k: string]: string;
       };
-      mockServerPort: number;
-      waitTime: number;
+      logWaitTime: number;
     };
   }
 
@@ -22,7 +16,7 @@ declare namespace Cypress {
       selectorToCheckUiRenderDone,
     }: {
       url: string;
-      reqBeforeCallback?: (request: any, proxy: VoidFunction) => void;
+      reqBeforeCallback?: (request: any) => void;
       reqAfterCallback?: (request: any, response: any) => void;
       selectorToCheckUiRenderDone?: any[];
     }): VoidFunction;

babel.config.js

@@ -3,11 +3,27 @@ module.exports = function (api) {
   api.cache(true);
 
   const plugins = [];
-  if (process.env.CYPRESS_coverage) {
-    plugins.push('istanbul');
+  if (process.env.COVERAGE) {
+    plugins.push([
+      'istanbul',
+      {
+        exclude: ['**/.storybook', '**/*.stories.*', '**/*.cspec.*'],
+      },
+    ]);
   }
   return {
-    presets: ['next/babel'],
+    presets: [
+      [
+        'next/babel',
+        {
+          'preset-env': {
+            targets: {
+              browsers: ['last 2 Chrome versions'],
+            },
+          },
+        },
+      ],
+    ],
     plugins,
   };
 };

cypress.json

@@ -1,21 +1,18 @@
 {
+  "baseUrl": "http://localhost:6006",
   "custom": {
-    "mockServerPort": 3030,
-    "pages": {
-      "default": "/",
-      "posts": "/posts"
+    "components": {
+      "example-button--primary": "/iframe.html?id=example-button--primary&viewMode=story",
+      "test-homepage--base": "/iframe.html?id=test-homepage--base&viewMode=story",
+      "test-postspage--base": "/iframe.html?id=test-postspage--base&viewMode=story",
+      "components-card--base": "/iframe.html?id=components-card--base&viewMode=story"
     },
-    "waitTime": 0
+    "logWaitTime": 0
   },
-  "fixturesFolder": "assets",
-  "ignoreTestFiles": [
-    "**/examples/*.spec.*",
-    "**/node_modules/**",
-    "**/coverage/**",
-    "**/out/**"
-  ],
-  "integrationFolder": "cypress/integration",
-  "testFiles": ["**/*.cspec.*"],
+  "defaultCommandTimeout": 10000,
+  "ignoreTestFiles": ["**/examples/*.spec.*", "**/node_modules/**"],
+  "integrationFolder": ".",
+  "testFiles": ["./cypress/integration/**/*.cspec.*", "./src/**/*.cspec.*"],
   "video": false,
   "viewportHeight": 1080,
   "viewportWidth": 1920

cypress/integration/onLoad/default.cspec.ts → cypress/integration/test/onLoad/index.cspec.ts

@@ -3,11 +3,13 @@ describe('/ - on load', () => {
 
   it(`should show UIs correctly after initial loading`, () => {
     cy.waitForInitialUIRenderDone({
-      url: customConfigs.pages.default,
+      url: customConfigs.components['test-homepage--base'],
       selectorToCheckUiRenderDone: ['Welcome to Next.js!'],
     });
 
-    cy.log(`**should show all link titles below**`);
+    cy.log(`**should show all link titles below**`).wait(
+      customConfigs.logWaitTime
+    );
     cy.contains('h3', 'Documentation').should('be.visible');
     cy.contains('h3', 'Learn').should('be.visible');
     cy.contains('h3', 'Modal').should('be.visible');