Merge pull request #1506 from lifeiscontent/chore/migrate-to-next-13-…

…and-storybook-7

wip

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.workingDirectories": ["./web"]
+}

web/.eslintrc.json

@@ -1,10 +1,11 @@
 {
   "extends": [
     "eslint:recommended",
-    "next/core-web-vitals",
-    "prettier",
     "plugin:import/recommended",
-    "plugin:testing-library/react"
+    "next/core-web-vitals",
+    "plugin:testing-library/react",
+    "plugin:react/jsx-runtime",
+    "prettier"
   ],
   "overrides": [
     {

web/.storybook/main.js

@@ -1,5 +1,4 @@
 const startCase = require('lodash/startCase');
-
 function buildSection(context) {
   return {
     // 👇 The directory field sets the directory your stories
@@ -10,21 +9,23 @@ function buildSection(context) {
     files: `**/*.stories.*`,
   };
 }
-
 module.exports = {
   stories: [buildSection('components'), buildSection('containers')],
   addons: [
     '@storybook/addon-essentials',
-    'storybook-addon-next-router',
     'storybook-addon-apollo-client',
     '@storybook/addon-interactions',
   ],
   staticDirs: ['../public'],
-  core: {
-    builder: 'webpack5',
-  },
   features: {
     storyStoreV7: true,
     interactionsDebugger: true,
   },
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
 };

web/.storybook/preview.js

@@ -1,19 +1,6 @@
-import { RouterContext } from 'next/dist/shared/lib/router-context';
 import { MockedProvider } from '@apollo/client/testing';
 
-import * as NextImage from 'next/image';
-
-const OriginalNextImage = NextImage.default;
-
-Object.defineProperty(NextImage, 'default', {
-  configurable: true,
-  value: props => <OriginalNextImage {...props} unoptimized />,
-});
-
 export const parameters = {
-  nextRouter: {
-    Provider: RouterContext.Provider,
-  },
   apolloClient: {
     MockedProvider,
   },

web/__mocks__/next/link.js

@@ -1,7 +1,7 @@
-import React from 'react';
-
-export default function Link({ as, href, ...props }) {
-  return React.cloneElement(React.Children.only(props.children), {
-    href: as ?? href,
-  });
+export default function Link({ href, className, children }) {
+  return (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  );
 }

web/docs/feature-development/container.md

@@ -11,7 +11,7 @@ Let's write a test for the ArticleComments component.
 [web/src/containers/article-comments/index.spec.js][web/src/containers/article-comments/index.spec.js]
 
 ```js
-import React from 'react';
+import * as React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import { ArticleComments, ArticleCommentsCreateCommentMutation } from '.';
@@ -134,8 +134,7 @@ describe('ArticleComments', () => {
                   __typename: 'Comment',
                 },
               ],
-              body:
-                'Sit delectus in. Nesciunt saepe inventore. Quo quibusdam facere. Rem aliquam est. Est eveniet rerum. Porro enim consequatur. Sit culpa fuga. Accusamus dolores eaque. Id reiciendis totam. Quibusdam quod exercitationem.',
+              body: 'Sit delectus in. Nesciunt saepe inventore. Quo quibusdam facere. Rem aliquam est. Est eveniet rerum. Porro enim consequatur. Sit culpa fuga. Accusamus dolores eaque. Id reiciendis totam. Quibusdam quod exercitationem.',
               description: 'Eos facere consequuntur id.',
               favoritesCount: 0,
               slug: 'sunt-vitae-voluptatum-quas',

web/docs/feature-development/form.md

@@ -1,10 +1,9 @@
 # Testing Form components built with Formik
 
-
 [web/src/components/article-form/index.spec.js][web/src/components/article-form/index.spec.js]
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 // we use MockedProvider from apollo because the ArticleForm contains a Mutation for the tags input
 import { MockedProvider } from '@apollo/client/testing';
@@ -83,4 +82,5 @@ describe('ArticleForm', () => {
   });
 });
 ```
+
 [web/src/components/article-form/index.spec.js]: https://github.com/lifeiscontent/realworld/blob/master/web/src/components/article-form/index.spec.js

web/docs/feature-development/page.md

@@ -13,7 +13,7 @@ We'll be using a mock for [next/router][web/__mocks__/next/router.js]
 [web/src/containers/editor-page/index.spec.js][web/src/containers/editor-page/index.spec.js]
 
 ```js
-import React from 'react';
+import * as React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import EditorPage from '.';
 // we use MockedProvider from Apollo because we have some data we need to fetch

web/docs/feature-development/ui.md

@@ -18,7 +18,7 @@ what is interesting about the component model is you can hide the implementation
 if you don't expose properties like `style` or `className` to the react component, you can guarantee the style will be deterministic which makes it safe for refactoring later if you need to. Let take a look at what this might look like.
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
@@ -59,7 +59,7 @@ This will serve as our starting template
 [web/src/components/article-favorite-button/index.js][web/src/components/article-favorite-button/index.js]
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { gql } from '@apollo/client';
@@ -184,7 +184,7 @@ We'll use the `ArticleFavoriteButton` as an example.
 [web/src/components/article-favorite-button/index.stories.js][web/src/components/article-favorite-button/index.stories.js]
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import { ArticleFavoriteButton } from '.'; // import our UI Component
 import { action } from '@storybook/addon-actions'; // import some addons
 
@@ -237,7 +237,7 @@ since we have 2 actions (favorite/unfavorite) we can test them in jest, let's do
 [web/src/components/article-favorite-button/index.spec.js][web/src/components/article-favorite-button/index.spec.js]
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 
 describe('ArticleFavoriteButton', () => {

web/jest.config.js

@@ -23,6 +23,7 @@ const esModules = [
   'unist-util-position',
   'unist-util-stringify-position',
   'unist-util-visit',
+  'trim-lines',
   'vfile',
 ].join('|');
 
@@ -43,9 +44,6 @@ module.exports = {
     // Handle image imports
     // https://jestjs.io/docs/webpack#handling-static-assets
     '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.js`,
-
-    // Handle module aliases
-    '^@/components/(.*)$': '<rootDir>/components/$1',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],

web/jest.setup.js

@@ -4,16 +4,16 @@
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
-import { setGlobalConfig } from '@storybook/testing-react';
+import { setProjectAnnotations } from '@storybook/testing-react';
 import * as globalStorybookConfig from './.storybook/preview';
 import { WithApolloClient } from 'storybook-addon-apollo-client/dist/decorators';
-import { WithNextRouter } from 'storybook-addon-next-router/dist/decorators';
+import { RouterDecorator } from '@storybook/nextjs';
 
-setGlobalConfig({
+setProjectAnnotations({
   ...globalStorybookConfig,
   decorators: [
     ...globalStorybookConfig.decorators,
+    RouterDecorator,
     WithApolloClient,
-    WithNextRouter,
   ],
 });