Merge pull request #1568 from lifeiscontent/chore/cleanup-storybook

.github/workflows/web.yml

@@ -13,7 +13,7 @@ jobs:
         with:
           cache-dependency-path: web/package-lock.json
           cache: "npm"
-          node-version: "16.x"
+          node-version: "18.x"
       - run: npm install
         working-directory: ./web
       - run: npm run lint

web/.storybook/main.js → web/.storybook/main.ts

@@ -1,5 +1,7 @@
-const startCase = require('lodash/startCase');
-function buildSection(context) {
+import type { StorybookConfig } from '@storybook/nextjs';
+import { startCase } from 'lodash';
+
+function buildSection(context: string) {
   return {
     // 👇 The directory field sets the directory your stories
     directory: `../src/${context}`,
@@ -9,23 +11,23 @@ function buildSection(context) {
     files: `**/*.stories.*`,
   };
 }
-module.exports = {
+
+const config: StorybookConfig = {
   stories: [buildSection('components'), buildSection('containers')],
   addons: [
+    '@storybook/addon-links',
     '@storybook/addon-essentials',
-    'storybook-addon-apollo-client',
     '@storybook/addon-interactions',
+    'storybook-addon-apollo-client',
   ],
   staticDirs: ['../public'],
-  features: {
-    storyStoreV7: true,
-    interactionsDebugger: true,
-  },
   framework: {
     name: '@storybook/nextjs',
     options: {},
   },
   docs: {
-    autodocs: true,
+    autodocs: 'tag',
   },
 };
+
+export default config;

web/.storybook/manager.js → web/.storybook/manager.ts

@@ -1,6 +1,5 @@
 import { addons } from '@storybook/addons';
-
-import startCase from 'lodash/startCase';
+import { startCase } from 'lodash';
 
 addons.setConfig({
   sidebar: {

web/.storybook/preview.ts

@@ -0,0 +1,21 @@
+import { MockedProvider } from '@apollo/client/testing';
+import type { Preview } from '@storybook/react';
+import { createCache } from '../src/lib/apolloClient';
+
+const preview: Preview = {
+  parameters: {
+    apolloClient: {
+      MockedProvider,
+      cache: createCache(),
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

web/.tool-versions

@@ -1 +1 @@
-nodejs 16.14.0
+nodejs 18.16.0

web/jest.config.js

@@ -1,61 +1,15 @@
-const esModules = [
-  'bail',
-  'character-entities',
-  'comma-separated-tokens',
-  'decode-named-character-reference',
-  'hast-util-whitespace',
-  'is-plain-obj',
-  'mdast-util-definitions',
-  'mdast-util-from-markdown',
-  'mdast-util-to-hast',
-  'mdast-util-to-string',
-  'micromark',
-  'property-information',
-  'react-markdown',
-  'remark-parse',
-  'remark-rehype',
-  'space-separated-tokens',
-  'trough',
-  'unified',
-  'unist-builder',
-  'unist-util-generated',
-  'unist-util-is',
-  'unist-util-position',
-  'unist-util-stringify-position',
-  'unist-util-visit',
-  'trim-lines',
-  'vfile',
-].join('|');
+const nextJest = require('next/jest');
 
-module.exports = {
-  collectCoverageFrom: [
-    '**/*.{js,jsx,ts,tsx}',
-    '!**/*.d.ts',
-    '!**/node_modules/**',
-  ],
-  moduleNameMapper: {
-    // Handle CSS imports (with CSS modules)
-    // https://jestjs.io/docs/webpack#mocking-css-modules
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
 
-    // Handle CSS imports (without CSS modules)
-    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
-
-    // Handle image imports
-    // https://jestjs.io/docs/webpack#handling-static-assets
-    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': `<rootDir>/__mocks__/fileMock.js`,
-  },
+// Add any custom config to be passed to Jest
+const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
-  testEnvironment: 'jsdom',
-  transform: {
-    // Use babel-jest to transpile tests with the next/babel preset
-    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
-    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
-    [`(${esModules}).+\\.js$`]: ['babel-jest', { presets: ['next/babel'] }],
-  },
-  transformIgnorePatterns: [
-    `[/\\\\]node_modules[/\\\\](?!${esModules}).+\\.(js|jsx|mjs|cjs|ts|tsx)$`,
-    '^.+\\.module\\.(css|sass|scss)$',
-  ],
+  testEnvironment: 'jest-environment-jsdom',
 };
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

web/jest.setup.js

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