Fix storybook

.storybook/main.js

@@ -1,4 +1,21 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  stories: [
+    '../src/stories/**/*.stories.mdx',
+    '../src/stories/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-postcss',
+  ],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
 }

.storybook/preview.js

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

package.json

@@ -69,10 +69,11 @@
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.6.0",
-    "@storybook/addon-actions": "^6.1.10",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.1.10",
-    "@storybook/react": "^6.2.9",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "^6.3.12",
     "@testing-library/react-hooks": "^2.0.1",
     "@types/codemirror": "0.0.108",
     "@types/dashify": "^1.0.0",
@@ -109,6 +110,7 @@
     "@types/webpack-env": "^1.14.0",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
+    "autoprefixer": "^10.3.7",
     "babel-loader": "^8.2.2",
     "chalk": "^4.0.0",
     "compression-webpack-plugin": "^6.1.1",
@@ -129,6 +131,7 @@
     "json-loader": "^0.5.7",
     "path-browserify": "^1.0.1",
     "png2icons": "^2.0.1",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "prettier": "^2.0.2",
     "react-hot-loader": "^4.12.13",
     "react-test-renderer": "^16.9.0",

src/stories/utils/themes.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from 'styled-components'
 import { ThemeTypes } from '../../design/lib/styled/types'
 import { selectV2Theme } from '../../design/lib/styled/styleFunctions'
 import styled from '../../design/lib/styled'
+import GlobalStyle from '../../design/components/atoms/GlobalStyle'
 
 interface ThemedWrapperProps {
   theme?: ThemeTypes
@@ -15,6 +16,7 @@ export const ThemedWrapper: FC<ThemedWrapperProps> = ({
 }) => {
   return (
     <ThemeProvider theme={selectV2Theme(theme)}>
+      <GlobalStyle />
       <StyledBackground>{children}</StyledBackground>
     </ThemeProvider>
   )