feat: switch to vitest and storybook vite (#549)

.eslintrc.js

@@ -0,0 +1,224 @@
+/**
+ * Based on: eslint-config-react-app
+ * */
+module.exports = {
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+    node: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  parser: '@typescript-eslint/parser',
+  extends: ['plugin:react-hooks/recommended'],
+  plugins: ['import', 'jsx-a11y', 'react', '@typescript-eslint'],
+  rules: {
+    // http://eslint.org/docs/rules/
+    'array-callback-return': 'warn',
+    'dot-location': ['warn', 'property'],
+    eqeqeq: ['warn', 'smart'],
+    'new-parens': 'warn',
+    'no-caller': 'warn',
+    'no-cond-assign': ['warn', 'except-parens'],
+    'no-const-assign': 'warn',
+    'no-control-regex': 'warn',
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    'no-delete-var': 'warn',
+    'no-dupe-args': 'warn',
+    'no-dupe-keys': 'warn',
+    'no-duplicate-case': 'warn',
+    'no-empty-character-class': 'warn',
+    'no-empty-pattern': 'warn',
+    'no-eval': 'warn',
+    'no-ex-assign': 'warn',
+    'no-extend-native': 'warn',
+    'no-extra-bind': 'warn',
+    'no-extra-label': 'warn',
+    'no-fallthrough': 'warn',
+    'no-func-assign': 'warn',
+    'no-implied-eval': 'warn',
+    'no-invalid-regexp': 'warn',
+    'no-iterator': 'warn',
+    'no-label-var': 'warn',
+    'no-labels': ['warn', { allowLoop: true, allowSwitch: false }],
+    'no-lone-blocks': 'warn',
+    'no-loop-func': 'warn',
+    'no-mixed-operators': [
+      'warn',
+      {
+        groups: [
+          ['&', '|', '^', '~', '<<', '>>', '>>>'],
+          ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
+          ['&&', '||'],
+          ['in', 'instanceof'],
+        ],
+        allowSamePrecedence: false,
+      },
+    ],
+    'no-multi-str': 'warn',
+    'no-native-reassign': 'warn',
+    'no-negated-in-lhs': 'warn',
+    'no-new-func': 'warn',
+    'no-new-object': 'warn',
+    'no-new-symbol': 'warn',
+    'no-new-wrappers': 'warn',
+    'no-obj-calls': 'warn',
+    'no-octal': 'warn',
+    'no-octal-escape': 'warn',
+    // TODO: Remove this option in the next major release of CRA.
+    // https://eslint.org/docs/user-guide/migrating-to-6.0.0#-the-no-redeclare-rule-is-now-more-strict-by-default
+    'no-redeclare': ['warn', { builtinGlobals: false }],
+    'no-regex-spaces': 'warn',
+    'no-restricted-syntax': ['warn', 'WithStatement'],
+    'no-script-url': 'warn',
+    'no-self-assign': 'warn',
+    'no-self-compare': 'warn',
+    'no-sequences': 'warn',
+    'no-shadow-restricted-names': 'warn',
+    'no-sparse-arrays': 'warn',
+    'no-template-curly-in-string': 'warn',
+    'no-this-before-super': 'warn',
+    'no-throw-literal': 'warn',
+    'no-unexpected-multiline': 'warn',
+    'no-unreachable': 'wa' + 'rn',
+    'no-unused-expressions': [
+      'error',
+      {
+        allowShortCircuit: true,
+        allowTernary: true,
+        allowTaggedTemplates: true,
+      },
+    ],
+    'no-unused-labels': 'warn',
+    'no-useless-computed-key': 'warn',
+    'no-useless-concat': 'warn',
+    'no-useless-escape': 'warn',
+    'no-useless-rename': [
+      'warn',
+      {
+        ignoreDestructuring: false,
+        ignoreImport: false,
+        ignoreExport: false,
+      },
+    ],
+    'no-with': 'warn',
+    'no-whitespace-before-property': 'warn',
+    'require-yield': 'warn',
+    'rest-spread-spacing': ['warn', 'never'],
+    strict: ['warn', 'never'],
+    'unicode-bom': ['warn', 'never'],
+    'use-isnan': 'warn',
+    'valid-typeof': 'warn',
+    'no-restricted-properties': [
+      'error',
+      {
+        object: 'require',
+        property: 'ensure',
+        message:
+          'Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting',
+      },
+      {
+        object: 'System',
+        property: 'import',
+        message:
+          'Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting',
+      },
+    ],
+    'getter-return': 'warn',
+
+    // https://github.com/benmosher/eslint-plugin-import/tree/master/docs/rules
+    'import/first': 'error',
+    'import/no-amd': 'error',
+    'import/no-webpack-loader-syntax': 'error',
+
+    // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
+    'react/forbid-foreign-prop-types': ['warn', { allowInPropTypes: true }],
+    'react/jsx-no-comment-textnodes': 'warn',
+    'react/jsx-no-duplicate-props': 'warn',
+    'react/jsx-no-target-blank': 'warn',
+    'react/jsx-no-undef': 'error',
+    'react/jsx-pascal-case': [
+      'warn',
+      {
+        allowAllCaps: true,
+        ignore: [],
+      },
+    ],
+    'react/jsx-uses-react': 'warn',
+    'react/jsx-uses-vars': 'warn',
+    'react/no-danger-with-children': 'warn',
+    // Disabled because of undesirable warnings
+    // See https://github.com/facebook/create-react-app/issues/5204 for
+    // blockers until its re-enabled
+    // 'react/no-deprecated': 'warn',
+    'react/no-direct-mutation-state': 'warn',
+    'react/no-is-mounted': 'warn',
+    'react/no-typos': 'error',
+    'react/require-render-return': 'error',
+    'react/style-prop-object': 'warn',
+
+    // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
+    'jsx-a11y/accessible-emoji': 'warn',
+    'jsx-a11y/alt-text': 'warn',
+    'jsx-a11y/anchor-has-content': 'warn',
+    'jsx-a11y/anchor-is-valid': [
+      'warn',
+      {
+        aspects: ['invalidHref'],
+      },
+    ],
+    'jsx-a11y/aria-activedescendant-has-tabindex': 'warn',
+    'jsx-a11y/aria-props': 'warn',
+    'jsx-a11y/aria-proptypes': 'warn',
+    'jsx-a11y/aria-role': 'warn',
+    'jsx-a11y/aria-unsupported-elements': 'warn',
+    'jsx-a11y/heading-has-content': 'warn',
+    'jsx-a11y/iframe-has-title': 'warn',
+    'jsx-a11y/img-redundant-alt': 'warn',
+    'jsx-a11y/no-access-key': 'warn',
+    'jsx-a11y/no-distracting-elements': 'warn',
+    'jsx-a11y/no-redundant-roles': 'warn',
+    'jsx-a11y/role-has-required-aria-props': 'warn',
+    'jsx-a11y/role-supports-aria-props': 'warn',
+    'jsx-a11y/scope': 'warn',
+
+    // TypeScript's `noFallthroughCasesInSwitch` option is more robust (#6906)
+    'default-case': 'off',
+    // 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/291)
+    'no-dupe-class-members': 'off',
+    // 'tsc' already handles this (https://github.com/typescript-eslint/typescript-eslint/issues/477)
+    'no-undef': 'off',
+
+    // Add TypeScript specific rules (and turn off ESLint equivalents)
+    '@typescript-eslint/no-array-constructor': 'warn',
+    '@typescript-eslint/no-namespace': 'error',
+    '@typescript-eslint/no-use-before-define': [
+      'warn',
+      {
+        functions: false,
+        classes: false,
+        variables: false,
+        typedefs: false,
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        args: 'none',
+        ignoreRestSiblings: true,
+      },
+    ],
+    '@typescript-eslint/no-useless-constructor': 'warn',
+  },
+};

.storybook/main.js

@@ -1,4 +1,7 @@
 module.exports = {
+  // features: {
+  //   storyStoreV7: true,
+  // },
   stories: [
     '../src/stories/**/*.@(story|stories).mdx',
     '../src/stories/**/*.@(story|stories).@(ts|tsx|js|jsx)',
@@ -18,6 +21,28 @@ module.exports = {
     },
   ],
   core: {
-    builder: 'webpack5',
+    builder: '@storybook/builder-vite',
+  },
+  /**
+   * In preparation for the vite build plugin, add the needed config here.
+   * @param config {import('vite').UserConfig}
+   */
+  async viteFinal(config) {
+    // The build fails to correctly minify the `ansi-to-html` module with esbuild, so we fallback to Terser.
+    // It's a package used by "Storybook" for the Webpreview, so it's interesting why it fails.
+    config.build.minify = 'terser';
+
+    if (config.optimizeDeps) {
+      config.optimizeDeps.include = [
+        ...config.optimizeDeps.include,
+        '@storybook/react/dist/esm/client/docs/config',
+        '@storybook/react/dist/esm/client/preview/config',
+        '@storybook/addon-docs/preview.js',
+        '@storybook/addon-actions/preview.js',
+        '@storybook/theming',
+        'intersection-observer',
+      ];
+    }
+    return config;
   },
 };

.storybook/manager.js

@@ -1,10 +1,13 @@
 import { addons } from '@storybook/addons';
 import { themes } from '@storybook/theming';
 import { themeOptions } from './theme';
+import { ignoreErrorMessages } from './utils/ignore-errors';
 
 addons.setConfig({
   theme: {
     ...themes.dark,
     ...themeOptions,
   },
 });
+
+ignoreErrorMessages();

.storybook/preview.js

@@ -1,6 +1,7 @@
 import 'intersection-observer';
 import 'tailwindcss/tailwind.css';
 import { themes } from '@storybook/theming';
+import { ignoreErrorMessages } from './utils/ignore-errors';
 
 export const parameters = {
   docs: {
@@ -10,3 +11,7 @@ export const parameters = {
     expanded: true,
   },
 };
+
+if (process.env.NODE_ENV !== 'test') {
+  ignoreErrorMessages();
+}

.storybook/utils/ignore-errors.js

@@ -0,0 +1,21 @@
+/**
+ * Storybook logs out some errors that are just noise for us, since we can't really do anything about it.
+ * Instead of them cluttering the console, we filter them out by overwriting the `console.error` object.
+ **/
+export const ignoreErrorMessages = () => {
+  const logError = console.error.bind(console);
+  const ignoreErrors = [
+    'Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.',
+    'The pseudo class',
+  ];
+  console.error = (...args) => {
+    if (
+      ignoreErrors.some((ignore) => {
+        return args[0].startsWith(ignore);
+      })
+    ) {
+      return;
+    }
+    logError(...args);
+  };
+};