chore: update storybook and stories (#2007)

* chore(deps): update storybook/x

* chore: migrate addons to .storybook/main.js

* chore: migrate storybook config to .storybook/main.js

* chore(deps): fix storybook postCSS

* chore(deps): migrate static-dir flag to main.js

@see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag

* chore: ignore storybook-static/

* chore(deps): use storybook-CRA dep

This addresses the following warning when running `npm run storybook`:

  WARN Storybook support for Create React App is now a separate preset.
  WARN To use the new preset, install `@storybook/preset-create-react-app` and add it to the list of `addons` in your `.storybook/main.js` config file.
  WARN The built-in preset has been disabled in Storybook 6.0.

* chore(deps): use webpack5 with storybook

@see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5

* fix: storybook webpack errors

Resolves the following error:

  Error: NormalModuleFactory.beforeResolve (IgnorePlugin) is no longer a
  waterfall hook, but a bailing hook instead. Do not return the passed
  object, but modify it instead. Returning false will ignore the request
  and results in no module created.

* fix: npm run storybook succeeds

but displays error in built website

* fix: Support CSFv3 storybook components

@see https://storybook.js.org/docs/react/api/csf

* chore: update Cid.stories.js

* fix: default storybook argTypes

* chore: update JsonEditor.stories.js

* chore: update AddFilesInfo.stories.js

* fix: Cid.stories.js

* chore: update info-boxes/**/*.stories.js

* update: breadcrumbs.stories.js

* chore: run storiesOf migration script

* Ran `git ls-files | grep 'stories.js' | xargs -n1 -- npx --yes sb migrate storiesof-to-csf --glob`
* Normalized default stories exports
  * Added jsdoc comment for default exports
  * export default as object literal

* chore: add jsdoc for story exports

* chore: update eslint rules

* disable default export rule for stories
* enable react/prop-types validation warning

* feat: Migrate FilesList.stories

* chore: update .storybook/main.js

* fix: mark PinningModal file prop as required

* feat: Finish migrating PinningModal story

* fix: remove countly.init error for storybook

* feat: Migrate remaining storybook stories

* fix: npm install and build

* fix: eslint should pass CI

* chore: fix typecheck failures

* fix: run @storybook/cli migrate storiesof-to-csf

Migrated leftover storiesOf stories with:
`npx @storybook/cli migrate storiesof-to-csf -g '**/(Radio|PublishModal).stories.js'`

* fix: run eslint --fix

* fix: build-storybook warnings & errors

* fix: PublishModal.stories.js renders properly

* feat: add test-storybook to CI

* chore: add test-storybook.yml

.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