Merge pull request #314 from Amsterdam/storybook-update

Updated storybook to beta

docs/CONTRIBUTING.md

@@ -4,6 +4,7 @@
 
 1. Run `yarn` to install dependencies  
 2. `yarn start` this will start storybook
+3. Start `yarn build:ts:es --watch` in another terminal if you want to make changes to components in the `packages` directory.
 
 Note that we have several packages: 
 1. [`stories`](stories), which contains our 'recipes' in MDX format that will display in Storybook. If you need to create a story, mind that you're supposed to create a page per feature / functionality.

stories/.storybook/main.js

@@ -1,58 +1,13 @@
 const path = require('path')
-const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin')
 
-const packages = path.resolve(__dirname, '../../', 'packages')
-const stories = path.resolve(__dirname, '../', 'src')
 module.exports = {
-  stories: ['../src/**/*.stories.(tsx|mdx)'],
+  stories: ['../src/**/*.stories.@(tsx|mdx)'],
   addons: [
-    '@storybook/addon-links/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-a11y/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-docs/register',
-    '@storybook/addon-viewport/register',
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-docs',
+    '@storybook/addon-viewport',
   ],
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.(stories|story)\.mdx$/,
-      use: [
-        {
-          loader: 'babel-loader',
-          options: {
-            plugins: ['@babel/plugin-transform-react-jsx'],
-            presets: ['@babel/preset-env'],
-          },
-        },
-        {
-          loader: '@mdx-js/loader',
-          options: {
-            compilers: [createCompiler({})],
-          },
-        },
-      ],
-    })
-
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      include: [stories, packages],
-      use: [
-        {
-          loader: 'ts-loader',
-        },
-      ],
-    })
-
-    config.resolve.extensions.push('.ts', '.tsx')
-
-    // Resolve every package to it's src directory
-    Object.assign(config.resolve.alias, {
-      '@datapunt/arm-core': path.join(packages, 'arm-core', '/src'),
-      '@datapunt/arm-cluster': path.join(packages, 'arm-cluster', '/src'),
-      '@datapunt/arm-draw': path.join(packages, 'arm-draw', '/src'),
-      '@datapunt/arm-nontiled': path.join(packages, 'arm-nontiled', '/src'),
-    })
-
-    return config
-  },
 }

stories/.storybook/preview.js

@@ -1,8 +1,9 @@
 import { GlobalStyle, ThemeProvider } from '@datapunt/asc-ui'
 import { addDecorator, addParameters } from '@storybook/react'
 import React from 'react'
+import styled from 'styled-components'
 import { withA11y } from '@storybook/addon-a11y'
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'
+import { DocsContainer, DocsPage } from '@storybook/addon-docs/blocks'
 import sortStories from './util/sort-stories'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-draw/dist/leaflet.draw.css'
@@ -12,12 +13,16 @@ const SORT_ORDER = {
   UI: ['DrawTool', 'ViewerContainer', 'Map Panel', 'BaseLayerToggle'],
 }
 
+const StoryWrapper = styled.div`
+  position: relative;
+`
+
 function withGlobalStyles(storyFn) {
   return (
     <ThemeProvider>
       <>
         <GlobalStyle />
-        {storyFn()}
+        <StoryWrapper>{storyFn()}</StoryWrapper>
       </>
     </ThemeProvider>
   )

stories/package.json

@@ -16,18 +16,14 @@
     "build": "build-storybook -c .storybook -o lib"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^5.3.19",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addon-viewport": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/react": "^5.3.19",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-styled-components": "^1.10.7",
-    "eslint-plugin-mdx": "^1.7.0",
-    "ts-loader": "^7.0.5"
+    "@storybook/addon-a11y": "^6.0.0-beta.32",
+    "@storybook/addon-actions": "^6.0.0-beta.32",
+    "@storybook/addon-docs": "^6.0.0-beta.32",
+    "@storybook/addon-knobs": "^6.0.0-beta.32",
+    "@storybook/addon-links": "^6.0.0-beta.32",
+    "@storybook/addon-viewport": "^6.0.0-beta.32",
+    "@storybook/react": "^6.0.0-beta.32",
+    "eslint-plugin-mdx": "^1.7.0"
   },
   "dependencies": {
     "@datapunt/arm-cluster": "^0.2.8-alpha.2",