chore: update storybook and stories

.eslintignore

@@ -0,0 +1 @@
+!.storybook

.eslintrc.js

@@ -7,7 +7,19 @@ module.exports = {
     }
   },
   extends: ['react-app', 'standard', 'plugin:jsx-a11y/recommended'],
-  plugins: ['jsx-a11y'],
+  plugins: ['jsx-a11y', 'storybook'],
   // ignore .ts files because it fails to parse it.
-  ignorePatterns: 'src/**/*.ts'
+  ignorePatterns: 'src/**/*.ts',
+  rules: {
+    'react/prop-types': [0, { ignore: ['className'], customValidators: [], skipUndeclared: true }] // TODO: set this rule to error when all issues are resolved.
+  },
+  overrides: [
+    {
+      files: ['src/**/*.stories.js'],
+      excludedFiles: '*.test.js',
+      rules: {
+        'import/no-anonymous-default-export': 'off'
+      }
+    }
+  ]
 }

.github/workflows/ci.yml

@@ -152,6 +152,10 @@ jobs:
     needs: build
     uses: ./.github/workflows/test-e2e.yml
 
+  test-storybook:
+    name: 'test:e2e'
+    uses: ./.github/workflows/test-storybook.yml
+
   # separate check for TS
   typecheck:
     name: typecheck
@@ -171,7 +175,7 @@ jobs:
   release:
     name: 'Run semantic release'
     runs-on: ubuntu-latest
-    needs: [build, publishPreview, eslint, typecheck, test-e2e, test-unit]
+    needs: [build, publishPreview, eslint, typecheck, test-e2e, test-unit, test-storybook]
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v2

.github/workflows/test-storybook.yml

@@ -0,0 +1,34 @@
+on:
+  workflow_call:
+
+jobs:
+
+  test-storybook:
+    name: 'test:storybook'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.12.0
+      - name: Setup npm@8.1.0
+        run: |
+          npm install -g npm@8.1.0
+
+      - name: Cache bigger downloads
+        uses: actions/cache@v2
+        id: cache
+        with:
+          path: ${{ github.workspace }}/.cache
+          key: ${{ runner.os }}-${{ hashFiles('package.json', 'package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ hashFiles('package.json', 'package-lock.json') }}
+            ${{ runner.os }}-
+
+      - name: Install dependencies
+        run: npm ci --prefer-offline --no-audit --progress=false --cache ${{ github.workspace }}/.cache/npm
+
+      - name: Run test-storybook:ci
+        run: npm run test-storybook:ci

.gitignore

@@ -8,6 +8,7 @@
 /playwright-report
 test/e2e/setup/ipfs-backend.json
 test/e2e/state.json
+storybook-static
 
 # production
 /build

.storybook/main.js

@@ -0,0 +1,58 @@
+/**
+ * @file StoryBook configuration file
+ * @see https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#from-version-52x-to-53x
+ */
+
+const webpack = require('webpack')
+
+const webpackOverride = require('../config-overrides')
+
+/** @type {import('@storybook/core-common').StorybookConfig} */
+const storybookConfig = {
+  core: {
+    builder: 'webpack5'
+  },
+  reactOptions: {
+    legacyRootApi: true
+  },
+  stories: [
+    '../src/**/*.stories.@(ts|js|tsx|jsx)'
+  ],
+  framework: '@storybook/react',
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+    // '@storybook/addon-knobs',
+    '@storybook/addon-controls',
+    // '@storybook/addon-postcss',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-coverage'
+  ],
+  staticDirs: [
+    '../public'
+  ],
+  features: {
+    postcss: false,
+    storyStoreV7: true
+  },
+  webpackFinal: async (config) => {
+    return webpackOverride({
+      ...config,
+      // @see https://github.com/storybookjs/storybook/issues/18276#issuecomment-1137101774
+      plugins: config.plugins.map(plugin => {
+        if (plugin.constructor.name === 'IgnorePlugin') {
+          return new webpack.IgnorePlugin({
+            resourceRegExp: plugin.options.resourceRegExp,
+            contextRegExp: plugin.options.contextRegExp
+          })
+        }
+
+        return plugin
+      })
+    })
+  }
+}
+
+module.exports = storybookConfig

.storybook/preview.js

@@ -0,0 +1,40 @@
+import { Provider } from 'redux-bundler-react'
+import { I18nextProvider } from 'react-i18next'
+import { DndProvider } from 'react-dnd'
+import 'react-virtualized/styles.css'
+import '../src/index.css'
+
+import getStore from '../src/bundles'
+import i18n from '../src/i18n'
+import DndBackend from '../src/lib/dnd-backend'
+
+/**
+ * @type {import('@storybook/addons').BaseAnnotations}
+ */
+const baseAnnotations = {
+  decorators: [
+    (Story) => (
+      <Provider store={getStore(undefined)}>
+        <I18nextProvider i18n={i18n} >
+          <DndProvider backend={DndBackend}>
+            <Story />
+          </DndProvider>
+        </I18nextProvider>
+      </Provider>
+    )
+  ],
+  /**
+   * @see https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
+   */
+  argTypes: {
+    onChange: {
+      action: 'changed'
+    },
+    onClick: {
+      action: 'clicked'
+    }
+  }
+}
+
+export const decorators = baseAnnotations.decorators
+export const argTypes = baseAnnotations.argTypes