redesign

frontend/.storybook/main.js

@@ -1,18 +1,15 @@
-const path = require('path');
-
 module.exports = {
-  stories: ['../src/shared/components/**/*.stories.tsx'],
-  addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-links',
-    '@storybook/addon-storysource',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-docs/register',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-backgrounds/register',
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
-  webpackFinal: async config => {
-    config.resolve.modules.push(path.resolve(__dirname, '../src'));
-    return config;
-  },
-};
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "webpack5"
+  }
+}

frontend/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+  @font-face {
+    font-family: 'Open Sans';
+    src: url(/assets/fonts/OpenSans-Regular.ttf) format('truetype');
+  }
+</style>

frontend/.storybook/preview.js

@@ -0,0 +1,47 @@
+import BaseStyles from 'app/BaseStyles';
+import NormalizeStyles from 'app/NormalizeStyles';
+import themes from 'app/ThemeStyles';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'darkTheme',
+    toolbar: {
+      icon: 'circlehollow',
+      // Array of plain string values or MenuItem shape (see below)
+      items: ['lightTheme', 'darkTheme'],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+    },
+  },
+};
+
+export const decorators = [
+  (Story, context) => {
+    const theme = themes[context.globals.theme];
+    return (
+      <>
+        <ThemeProvider theme={theme}>
+          <BaseStyles />
+          <NormalizeStyles />
+          <MemoryRouter>
+            <Story />
+          </MemoryRouter>
+        </ThemeProvider>
+      </>
+    );
+  },
+];