docs(storybook): migrate to CSF format, add addon-docs

.storybook/addons.js

@@ -1,3 +1,4 @@
 import '@storybook/addon-storysource/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-docs';

.storybook/config.js

@@ -1,5 +1,4 @@
 import { configure, addDecorator } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { ThemeProvider } from 'styled-components';
 import themes from '../src/components/common/themes';
 import React from 'react';
@@ -13,27 +12,9 @@ const demoThemes = [
   themes.violetDark
 ];
 
-addDecorator(
-  withInfo({
-    inline: true,
-    header: false,
-    source: false,
-    maxPropsIntoLine: 1,
-    styles: stylesheet => ({
-      // Setting the style with a function
-      ...stylesheet,
-      table: {
-        background: 'red'
-      }
-    })
-  })
-);
 addDecorator(GlobalStyle);
 addDecorator(story => (
   <ThemeProvider theme={themes.default}>{story()}</ThemeProvider>
 ));
-const req = require.context('../src', true, /\.stories\.js$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-configure(loadStories, module);
+
+configure(require.context('../src/', true, /\.stories\.js$/), module);

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.(js|mdx)'],
+  addons: ['@storybook/addon-docs']
+};