chore: update to storybook 6

.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')
 });
@@ -14,8 +12,13 @@ const DEPENDENCY_REGEX = BUILD_FOR_IE11
   : /node_modules\/(@ui5\/webcomponents(-(base|core|fiori|icons|theme-base))?|lit-html)\//;
 
 module.exports = {
-  stories: ['../docs/**/*.stories.mdx', '../packages/**/*.stories.mdx', '../packages/**/*.stories.[tj]sx'],
-  addons: ['@storybook/addon-knobs', '@storybook/addon-docs', '@storybook/addon-actions'],
+  stories: ['../docs/**/*.stories.mdx', '../packages/**/*.stories.mdx', '../packages/**/*.stories.@(tsx|jsx)'],
+  addons: [
+    '@storybook/addon-toolbars',
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-actions'
+  ],
   webpack: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -27,35 +30,6 @@ module.exports = {
       type: 'javascript/auto'
     });
 
-    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);
-
     if ((IS_RELEASE_BUILD && configType === 'PRODUCTION') || BUILD_FOR_IE11) {
       config.module.rules.push({
         test: /\.(js|mjs)$/,
@@ -102,8 +76,6 @@ module.exports = {
         }
       });
     }
-
-    config.resolve.extensions.push('.ts', '.tsx');
     config.resolve.alias = {
       ...config.resolve.alias,
       '@shared': path.join(PATHS.root, 'shared'),

.storybook/manager.js

@@ -38,5 +38,7 @@ addons.setConfig({
    * enable/disable shortcuts
    * @type {Boolean}
    */
-  enableShortcuts: false
+  enableShortcuts: false,
+
+  showRoots: true
 });

.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';
@@ -21,13 +20,14 @@ addParameters({
       return a[1].kind === b[1].kind
         ? 0
         : a[1].id.localeCompare(b[1].id, undefined, { numeric: true, caseFirst: 'upper' });
-    },
-    showRoots: true
-  }
+    }
+  },
+  passArgsFirst: true,
+  viewMode: 'docs',
+  docs: { forceExtractedArgTypes: true },
+  actions: { argTypesRegex: '^on.*' }
 });
 
-addDecorator(withKnobs);
-
 const ThemeContainer = ({ theme, contentDensity, children, direction }) => {
   useEffect(() => {
     if (contentDensity === ContentDensity.Compact) {
@@ -38,7 +38,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 +54,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.globals.theme || Themes.sap_fiori_3}
+        contentDensity={context.globals.contentDensity}
+        direction={context.globals.direction}
       >
         {getStory(context)}
       </ThemeContainer>
@@ -65,3 +65,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'
+        }
+      ]
+    }
+  }
+};

docs/welcome/Welcome.stories.mdx → docs/1-Welcome.stories.mdx

@@ -2,7 +2,7 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 
-<Meta title="1 Welcome / Getting Started" />
+<Meta title="Getting Started" />
 
 # UI5 Web Components for React
 [![](https://github.com/SAP/ui5-webcomponents-react/workflows/build/badge.svg)](https://github.com/SAP/ui5-webcomponents-react/actions?query=workflow:%22build%22)

docs/MigrationGuide.stories.mdx → docs/2-MigrationGuide.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 
-<Meta title="1 Welcome / Migration Guide" />
+<Meta title="Migration Guide" />
 
 # Migration Guide
 <br />

docs/welcome/Styling.stories.mdx → docs/3-Styling.stories.mdx

@@ -1,9 +1,9 @@
 
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { MyCustomElement } from '../styling/MyCustomElement';
+import { MyCustomElement } from './styling/MyCustomElement';
 import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
 
-<Meta title="1 Welcome / Style Web Components" />
+<Meta title="Style Web Components" />
 
 # How can I style my Web Components?
 [Open Github Project](https://github.com/SAP/ui5-webcomponents-react)

docs/welcome/TestSetup.stories.mdx → docs/4-TestSetup.stories.mdx

@@ -1,7 +1,7 @@
 
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 
-<Meta title="1 Welcome / Test Setup" />
+<Meta title="Test Setup" />
 
 # Test Setup for UI5 Web Components for React
 

package.json

@@ -20,19 +20,19 @@
     "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-rc.0",
+    "@storybook/addon-controls": "6.0.0-rc.0",
+    "@storybook/addon-docs": "6.0.0-rc.0",
+    "@storybook/addon-knobs": "6.0.0-rc.0",
+    "@storybook/addon-toolbars": "6.0.0-rc.0",
+    "@storybook/addons": "6.0.0-rc.0",
+    "@storybook/cli": "6.0.0-rc.0",
+    "@storybook/react": "6.0.0-rc.0",
+    "@storybook/theming": "6.0.0-rc.0",
     "@ui5/webcomponents": "1.0.0-rc.7",
     "@ui5/webcomponents-fiori": "1.0.0-rc.7",
     "@ui5/webcomponents-icons": "1.0.0-rc.7",
     "react": "16.8.0",
-    "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "16.8.0"
   },
   "devDependencies": {