refactor: migrate storybook from v5 to v8 and update component stories

.eslintrc.js

@@ -20,7 +20,8 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'eslint:recommended',
-    'plugin:@typescript-eslint/recommended'
+    'plugin:@typescript-eslint/recommended',
+    'plugin:storybook/recommended'
   ],
   rules: {
     'import/no-webpack-loader-syntax': 0,

.github/workflows/ci.yml

@@ -26,6 +26,9 @@ jobs:
       - name: Test
         run: yarn test
 
+      - name: Accessibility tests using Storybook
+        run: yarn playwright install && yarn test-storybook:ci
+
       - name: Build
         run: yarn build:prod
 

.gitignore

@@ -13,4 +13,5 @@ reports/
 .DS_Store
 npm-debug.log
 .idea
-.tsconfig-lint.json
+.tsconfig-lint.json
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@bumped-inc/storybook-addon-lingui-v3',
+    '@storybook/addon-docs',
+    '@storybook/addon-controls'
+  ],
+  docs: {
+    autodocs: true
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  core: {
+    builder: '@storybook/builder-webpack5'
+  },
+  stories: ['../app/components/**/stories/**/*.mdx', '../app/components/**/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)']
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import enMessages from '../app/translations/en.json';
+import { I18nProvider } from '@lingui/react';
+import { i18n } from '@lingui/core';
+import React from 'react';
+
+i18n.load('en', enMessages);
+i18n.activate('en');
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+};
+
+export const decorators = [
+  (Story: React.FC) => {
+    return (
+      <I18nProvider i18n={i18n}>
+        <Story />
+      </I18nProvider>
+    );
+  }
+];

.storybook/test-runner.ts

@@ -0,0 +1,22 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page) {
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true
+      }
+    });
+  }
+};
+
+export default config;

.storybook/webpack.config.js

@@ -32,7 +32,6 @@ module.exports = ({ config }) => {
     include: path.resolve(__dirname, '../')
   });
   config.resolve.modules.push('app');
-  config.resolve.extensions.push('.js', '.jsx', '.react.js');
-  config.module.rules[0].use[0].options.plugins = [require.resolve('babel-plugin-react-docgen')];
+  config.resolve.extensions.push('.js', '.jsx', '.react.js', '.ts', '.tsx');
   return config;
 };

app/components/Clickable/stories/clickable.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Clickable } from '../index';
+
+export default {
+  title: 'Clickable',
+  component: Clickable
+};
+
+const ClickableTemplate = (args) => <Clickable {...args} />;
+
+export const ClickableStoryComponent = ClickableTemplate.bind({});
+ClickableStoryComponent.args = {};

app/components/Header/stories/Header.stories.js

@@ -1,14 +1,19 @@
-/**
- *
- * Stories for Header
- *
- * @see https://github.com/storybookjs/storybook
- *
- */
-
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { text } from '@storybook/addon-knobs';
+import { MemoryRouter } from 'react-router-dom';
 import Header from '../index';
 
-storiesOf('Header').add('simple', () => <Header id={text('id', 'Header')} />);
+export default {
+  title: 'Header',
+  component: Header
+};
+
+const HeaderTemplate = (args) => (
+  <MemoryRouter>
+    <Header {...args} />
+  </MemoryRouter>
+);
+
+export const HeaderStoryComponent = HeaderTemplate.bind({});
+HeaderStoryComponent.args = {
+  id: 'Header'
+};

app/components/LaunchList/stories/LaunchList.stories.js

@@ -1,28 +1,27 @@
-/**
- *
- * Stories for LaunchList
- *
- * @see https://github.com/storybookjs/storybook
- *
- */
-
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { LaunchList } from '../index';
+import LaunchList from '../index';
 
-const loading = false;
-const launchData = {
-  launches: [
-    {
-      id: '1',
-      launchDateUtc: '2014-01-06T14:06:00',
-      missionName: 'Thaicom 6',
-      links: {
-        wikipedia: 'https://en.wikipedia.org/wiki/Thaicom_6',
-        flickrImages: ['https://farm9.staticflickr.com/8617/16789019815_f99a165dc5_o.jpg']
-      }
-    }
-  ]
+export default {
+  title: 'LaunchList',
+  component: LaunchList
 };
 
-storiesOf('LaunchList').add('simple', () => <LaunchList launchData={launchData} loading={loading} />);
+const LaunchListTemplate = (args) => <LaunchList {...args} />;
+
+export const LaunchListStoryComponent = LaunchListTemplate.bind({});
+LaunchListStoryComponent.args = {
+  launchData: {
+    launches: [
+      {
+        id: '1',
+        launchDateUtc: '2014-01-06T14:06:00',
+        missionName: 'Thaicom 6',
+        links: {
+          wikipedia: 'https://en.wikipedia.org/wiki/Thaicom_6',
+          flickrImages: ['https://farm9.staticflickr.com/8617/16789019815_f99a165dc5_o.jpg']
+        }
+      }
+    ]
+  },
+  loading: false
+};

app/containers/LanguageProvider/index.tsx

@@ -21,7 +21,6 @@ export interface LanguageProviderProps {
 
 export function LanguageProvider({ locale, messages, children }: PropsWithChildren<LanguageProviderProps>) {
   const localizedMessages = messages[locale];
-
   i18n.load(locale, localizedMessages);
   i18n.activate(locale);
 

app/tsconfig.json

@@ -16,6 +16,8 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "baseUrl": ".",
+    "typeRoots": ["node_modules/@types"],
+
     "paths": {
       "@app/*": ["./*"],
       "@components/*": ["components/*"],

internals/webpack/webpack.config.base.js

@@ -131,7 +131,8 @@ module.exports = (options) => ({
               },
               pngquant: {
                 quality: [0.65, 0.9],
-                speed: 4
+                speed: 4,
+                enabled: false
               },
               webp: {
                 quality: 75