update to storybook 6 (beta)

Author: MarcusNotheis

.storybook/main.js

@@ -1,7 +1,5 @@
-const { highlightLog } = require('../scripts/utils');
 const path = require('path');
 const PATHS = require('../config/paths');
-const dedent = require('dedent');
 require('dotenv').config({
   path: path.join(PATHS.root, '.env')
 });
@@ -15,40 +13,17 @@ const DEPENDENCY_REGEX = BUILD_FOR_IE11
 
 module.exports = {
   stories: ['../docs/**/*.stories.mdx', '../packages/**/*.stories.mdx', '../packages/**/*.stories.[tj]sx'],
-  addons: ['@storybook/addon-knobs', '@storybook/addon-docs', '@storybook/addon-actions'],
+  addons: ['@storybook/addon-toolbars', '@storybook/addon-knobs', '@storybook/addon-docs', '@storybook/addon-actions'],
   webpack: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
 
-    const tsLoader = {
-      test: /\.tsx?$/,
-      include: PATHS.packages,
-      use: [
-        {
-          loader: require.resolve('babel-loader'),
-          options: {
-            envName: 'esm',
-            configFile: path.resolve(PATHS.root, 'babel.config.js')
-          }
-        }
-      ]
-    };
-
-    if (IS_RELEASE_BUILD) {
-      highlightLog('Warning: Prop Types Table Generation is active');
-      tsLoader.use.push(require.resolve('react-docgen-typescript-loader'));
-    } else {
-      highlightLog('Info: Prop Types Table Generation is disabled');
-      console.log(dedent`
-          The Prop Table Generation is very expensive during build-time and therefore disabled by default. 
-          If you need Prop-Tables, you can activate it by adding a '.env' file to the root of the project with the following content:
-          
-          UI5_WEBCOMPONENTS_FOR_REACT_RELEASE_BUILD=true\n\n 
-      `);
-    }
-
-    config.module.rules.push(tsLoader);
+    config.module.rules.push({
+      test: /assets\/.*\.json$/,
+      use: 'file-loader',
+      type: 'javascript/auto'
+    });
 
     if ((IS_RELEASE_BUILD && configType === 'PRODUCTION') || BUILD_FOR_IE11) {
       config.module.rules.push({
@@ -96,8 +71,6 @@ module.exports = {
         }
       });
     }
-
-    config.resolve.extensions.push('.ts', '.tsx');
     config.resolve.alias = {
       ...config.resolve.alias,
       '@shared': path.join(PATHS.root, 'shared'),

.storybook/preview.js

@@ -1,4 +1,3 @@
-import { select, withKnobs } from '@storybook/addon-knobs';
 import { makeDecorator } from '@storybook/addons';
 import { addDecorator, addParameters } from '@storybook/react';
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
@@ -26,8 +25,6 @@ addParameters({
   }
 });
 
-addDecorator(withKnobs);
-
 const ThemeContainer = ({ theme, contentDensity, children, direction }) => {
   useEffect(() => {
     if (contentDensity === ContentDensity.Compact) {
@@ -38,7 +35,7 @@ const ThemeContainer = ({ theme, contentDensity, children, direction }) => {
   }, [contentDensity]);
 
   useEffect(() => {
-    document.querySelector('html').setAttribute('dir', direction.toLowerCase());
+    document.querySelector('html').setAttribute('dir', direction);
   }, [direction]);
 
   useEffect(() => {
@@ -54,9 +51,9 @@ const withQuery = makeDecorator({
   wrapper: (getStory, context) => {
     return (
       <ThemeContainer
-        theme={select('Theme', Themes, Themes.sap_fiori_3)}
-        contentDensity={select('ContentDensity', ContentDensity, ContentDensity.Cozy)}
-        direction={select('Text Direction', ['LTR', 'RTL'], 'LTR')}
+        theme={context.globalArgs.theme || Themes.sap_fiori_3}
+        contentDensity={context.globalArgs.contentDensity}
+        direction={context.globalArgs.direction}
       >
         {getStory(context)}
       </ThemeContainer>
@@ -65,3 +62,74 @@ const withQuery = makeDecorator({
 });
 
 addDecorator(withQuery);
+
+export const globalArgTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Fiori Theme',
+    defaultValue: Themes.sap_fiori_3,
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        {
+          value: Themes.sap_fiori_3,
+          title: Themes.sap_fiori_3
+        },
+        {
+          value: Themes.sap_fiori_3_dark,
+          title: Themes.sap_fiori_3_dark
+        },
+        {
+          value: Themes.sap_belize,
+          title: Themes.sap_belize
+        },
+        {
+          value: Themes.sap_belize_hcb,
+          title: Themes.sap_belize_hcb
+        },
+        {
+          value: Themes.sap_belize_hcw,
+          title: Themes.sap_belize_hcw
+        }
+      ]
+    }
+  },
+  contentDensity: {
+    name: 'Content Density',
+    description: 'Content Density',
+    defaultValue: ContentDensity.Cozy,
+    toolbar: {
+      icon: 'component',
+      items: [
+        {
+          value: ContentDensity.Cozy,
+          title: ContentDensity.Cozy
+        },
+        {
+          value: ContentDensity.Compact,
+          title: ContentDensity.Compact
+        }
+      ]
+    }
+  },
+  direction: {
+    name: 'Direction',
+    description: 'Text Direction',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'transfer',
+      items: [
+        {
+          value: 'ltr',
+          title: 'LTR',
+          icon: 'arrowrightalt'
+        },
+        {
+          value: 'rtl',
+          title: 'RTL',
+          icon: 'arrowleftalt'
+        }
+      ]
+    }
+  }
+};

package.json

@@ -20,18 +20,17 @@
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push"
   },
   "dependencies": {
-    "@storybook/addon-actions": "5.3.18",
-    "@storybook/addon-docs": "5.3.18",
-    "@storybook/addon-info": "5.3.18",
-    "@storybook/addon-knobs": "5.3.18",
-    "@storybook/addons": "5.3.18",
-    "@storybook/cli": "5.3.18",
-    "@storybook/react": "5.3.18",
-    "@storybook/theming": "5.3.18",
+    "@storybook/addon-actions": "6.0.0-beta.12",
+    "@storybook/addon-docs": "6.0.0-beta.12",
+    "@storybook/addon-knobs": "6.0.0-beta.12",
+    "@storybook/addon-toolbars": "6.0.0-beta.12",
+    "@storybook/addons": "6.0.0-beta.12",
+    "@storybook/cli": "6.0.0-beta.12",
+    "@storybook/react": "6.0.0-beta.12",
+    "@storybook/theming": "6.0.0-beta.12",
     "@ui5/webcomponents": "1.0.0-rc.7",
     "@ui5/webcomponents-fiori": "1.0.0-rc.7",
-    "@ui5/webcomponents-icons": "1.0.0-rc.7",
-    "react-docgen-typescript-loader": "3.7.2"
+    "@ui5/webcomponents-icons": "1.0.0-rc.7"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",