build: move to new v.6 of storybook (#305)

Signed-off-by: Nastya Rusina <nastya@union.ai>

.storybook/StorybookContainer.tsx

@@ -3,27 +3,30 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import * as React from 'react';
 import { QueryClientProvider } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
 import { ErrorBoundary } from '../src/components/common/ErrorBoundary';
 import { createQueryClient } from '../src/components/data/queryCache';
 import { muiTheme } from '../src/components/Theme/muiTheme';
 
 const useStyles = makeStyles((theme: Theme) => ({
-    container: {
-        display: 'flex',
-        padding: theme.spacing(1)
-    }
+  container: {
+    display: 'flex',
+    padding: theme.spacing(1)
+  }
 }));
 
 export const StorybookContainer: React.FC = ({ children }) => {
-    const [queryClient] = React.useState(() => createQueryClient());
-    return (
-        <ThemeProvider theme={muiTheme}>
-            <CssBaseline />
-            <ErrorBoundary>
-                <QueryClientProvider client={queryClient}>
-                    <div className={useStyles().container}>{children}</div>
-                </QueryClientProvider>
-            </ErrorBoundary>
-        </ThemeProvider>
-    );
+  const [queryClient] = React.useState(() => createQueryClient());
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <CssBaseline />
+      <ErrorBoundary>
+        <MemoryRouter>
+          <QueryClientProvider client={queryClient}>
+            <div className={useStyles().container}>{children}</div>
+          </QueryClientProvider>
+        </MemoryRouter>
+      </ErrorBoundary>
+    </ThemeProvider>
+  );
 };

.storybook/main.js

@@ -1,4 +1,20 @@
 module.exports = {
-    stories: ['../src/components/**/*.stories.tsx'],
-    addons: ['@storybook/addon-knobs']
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: '@storybook/react',
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.modules = ['src', 'node_modules'];
+    config.module.rules = [
+      ...config.module.rules,
+      {
+        // needed to ensure proper same level of typing between app and storybook built.
+        // without it we have troubles with exporting flyteidl types due to nested namespace nature of
+        // flyteidl.d.ts file.
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: ['babel-loader', { loader: 'ts-loader', options: { transpileOnly: true } }]
+      }
+    ];
+    return config;
+  }
 };

.storybook/preview.js

@@ -1,26 +1,20 @@
-import '../src/protobuf';
-import { withKnobs } from '@storybook/addon-knobs';
-import { addDecorator } from '@storybook/react';
-import * as React from 'react';
-import StoryRouter from 'storybook-react-router';
+import React from 'react';
 import { StorybookContainer } from './StorybookContainer';
 
-addDecorator(withKnobs);
-addDecorator(StoryRouter());
-addDecorator(Story => (
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+};
+
+export const decorators = [
+  Story => (
     <StorybookContainer>
-        <Story />
+      <Story />
     </StorybookContainer>
-));
-
-// Storybook executes this module in both bootstap phase (Node)
-// and a story's runtime (browser). However, cannot call `setupWorker`
-// in Node environment, so need to check if we're in a browser.
-if (typeof global.process === 'undefined') {
-    const { worker } = require('./worker');
-
-    // Start the mocking when each story is loaded.
-    // Repetitive calls to the `.start()` method will check for an existing
-    // worker and reuse it.
-    worker.start();
-}
+  )
+];