Add Storybook

.storybook/main.js

@@ -0,0 +1,55 @@
+const path = require('path');
+const compilationHash = require('../public/compilationHash');
+
+module.exports = {
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  staticDirs: ['../public'],
+  framework: "@storybook/react",
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+  webpackFinal: async (config) => {
+    config.resolve.alias = {
+      config: path.resolve(__dirname, '../config/'),
+      src: path.resolve(__dirname, '../src/'),
+    };
+
+    config.module.rules.unshift({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            svgoConfig: {
+              plugins: {
+                removeViewBox: false,
+              },
+            },
+          },
+        },
+        'url-loader',
+      ],
+    })
+
+    return config;
+  },
+  env: (config) => ({
+    ...config,
+    COMPILATION_HASH: compilationHash,
+  }),
+}

.storybook/preview-head.html

@@ -0,0 +1,12 @@
+<link href="/mapstyle/iconfont/iconfont.css" rel="stylesheet" />
+
+<link href="/build/css/app-%COMPILATION_HASH%.css" rel="stylesheet" />
+
+<style>
+  /* We don't want to have a theme dependant background (dark mode) */
+  @media (prefers-color-scheme: dark) {
+    body:not([data-theme='light']) {
+      background-color: white;
+    }
+  }
+</style>

.storybook/preview.js

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

babel.config.js

@@ -9,7 +9,7 @@ module.exports = function (api) {
           browsers: ['Chrome >= 60', 'Firefox >= 44', 'Safari >= 10', 'Edge >= 17'],
         },
         useBuiltIns: 'entry',
-        corejs: 2,
+        corejs: 3,
       },
     ],
     '@babel/preset-react',