Experiments: Testing with Storybook

.github/workflows/ci.yml

@@ -15,6 +15,7 @@ env:
 jobs:
   webassembly:
     name: WebAssembly
+    if: false # DISABLED TEMPORARY
     runs-on: ubuntu-latest
     env:
       CARGO_TERM_COLOR: always
@@ -42,6 +43,7 @@ jobs:
 
   web:
     name: Web
+    if: false # DISABLED TEMPORARY
     runs-on: ubuntu-latest
     steps:
     - uses: actions/cache@v3

.gitignore

@@ -37,3 +37,7 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# storybook
+build-storybook.log
+/storybook-static

.storybook/main.js

@@ -0,0 +1,28 @@
+module.exports = {
+  stories: [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        cssLoaderOptions: {
+          // When the css files are splitted over multiple files
+          importLoaders: 1,
+        },
+        postcssLoaderOptions: {
+          // When using PostCSS v8
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  framework: '@storybook/react',
+  core: { builder: 'webpack5' },
+  staticDirs: ['../public'],
+  typescript: { reactDocgen: false },
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../src/styles/globals.css'
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}