chore(deps): bump storybook to 6.2.7 (#1505)

Author: MarcusNotheis

.github/workflows/release.yml

@@ -44,7 +44,18 @@ jobs:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
 
-      - name: deploy docs
+      - name: Deploy Release Docs
         run: yarn deploy:storybook
         env:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+
+      - name: Build Next Docs
+        run: yarn build:storybook
+
+      - name: Deploy Next Docs
+        uses: JamesIves/github-pages-deploy-action@4.1.1
+        with:
+          branch: gh-pages # The branch the action should deploy to.
+          folder: .out # The folder the action should deploy.
+          target-folder: master
+          clean: true

.storybook/main.cjs

@@ -1,13 +1,7 @@
 const path = require('path');
-
 const root = path.resolve(__dirname, '..');
-require('dotenv').config({
-  path: path.join(root, '.env')
-});
-
-const DEPENDENCY_REGEX = /node_modules\/(@ui5\/webcomponents(-(base|core|fiori|icons|theme-base))?|lit-html)\//;
 
-let addons = [
+const addons = [
   '@storybook/addon-toolbars',
   '@storybook/addon-docs',
   '@storybook/addon-controls',
@@ -21,56 +15,7 @@ if (process.env.NODE_ENV === 'development') {
 module.exports = {
   stories: ['../docs/**/*.stories.mdx', '../packages/**/*.stories.@(tsx|jsx|mdx)'],
   addons: addons,
-  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.
-    if (configType === 'PRODUCTION') {
-      config.module.rules.push({
-        test: /\.(js|mjs)$/,
-        include: DEPENDENCY_REGEX,
-        loader: 'babel-loader',
-        options: {
-          sourceType: 'unambiguous',
-          babelrc: false,
-          configFile: false,
-          compact: false,
-          presets: [
-            [
-              '@babel/preset-env',
-              {
-                // Allow importing core-js in entrypoint and use browserlist to select polyfills
-                useBuiltIns: 'entry',
-                // Set the corejs version we are using to avoid warnings in console
-                // This will need to change once we upgrade to corejs@3
-                corejs: 3,
-                // Do not transform modules to CJS
-                modules: false,
-                // Exclude transforms that make all code slower
-                exclude: ['transform-typeof-symbol']
-              }
-            ]
-          ],
-          plugins: [
-            [
-              '@babel/plugin-transform-runtime',
-              {
-                version: require('@babel/runtime/package.json').version,
-                useESModules: true
-              }
-            ]
-          ],
-          cacheDirectory: true,
-          cacheCompression: false,
-
-          // If an error happens in a package, it's possible to be
-          // because it was compiled. Thus, we don't want the browser
-          // debugger to show the original code. Instead, the code
-          // being evaluated would be much more helpful.
-          sourceMaps: false
-        }
-      });
-    }
+  webpack: async (config) => {
     config.resolve.alias = {
       ...config.resolve.alias,
       '@shared': path.join(root, 'shared'),
@@ -81,7 +26,9 @@ module.exports = {
       '@ui5/webcomponents-react-base/types': path.join(root, 'packages', 'base', 'types'),
       '@ui5/webcomponents-react-base': path.join(root, 'packages', 'base', 'src')
     };
-
     return config;
-  }
+  },
+  features: {
+    postcss: false,
+  },
 };

.storybook/manager.js

@@ -40,5 +40,7 @@ addons.setConfig({
    */
   enableShortcuts: false,
 
-  showRoots: true
+  sidebar: {
+    showRoots: true
+  }
 });

package.json

@@ -23,14 +23,14 @@
     "examples:start-seed": "cd examples/seed-test && SKIP_PREFLIGHT_CHECK=true yarn start"
   },
   "dependencies": {
-    "@storybook/addon-actions": "6.2.3",
-    "@storybook/addon-controls": "6.2.3",
-    "@storybook/addon-docs": "6.2.3",
-    "@storybook/addon-toolbars": "6.2.3",
-    "@storybook/addons": "6.2.3",
-    "@storybook/cli": "6.2.3",
-    "@storybook/react": "6.2.3",
-    "@storybook/theming": "6.2.3",
+    "@storybook/addon-actions": "6.2.7",
+    "@storybook/addon-controls": "6.2.7",
+    "@storybook/addon-docs": "6.2.7",
+    "@storybook/addon-toolbars": "6.2.7",
+    "@storybook/addons": "6.2.7",
+    "@storybook/cli": "6.2.7",
+    "@storybook/react": "6.2.7",
+    "@storybook/theming": "6.2.7",
     "@ui5/webcomponents": "1.0.0-rc.14",
     "@ui5/webcomponents-fiori": "1.0.0-rc.14",
     "@ui5/webcomponents-icons": "1.0.0-rc.14",
@@ -53,7 +53,7 @@
     "@babel/runtime": "7.13.10",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-node-resolve": "^11.0.0",
-    "@storybook/addon-a11y": "^6.2.3",
+    "@storybook/addon-a11y": "^6.2.7",
     "@storybook/storybook-deployer": "^2.8.7",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.2",

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

@@ -698,9 +698,9 @@ By adding the `visibleRowCountMode` prop and setting it to `TableVisibleRowCount
       withNavigationHighlight: { table: { disable: true } },
       markNavigatedRow: { table: { disable: true } },
       containerHeight: {
+        options: [250, 500, 750, 1000],
         control: {
-          type: 'radio',
-          options: [250, 500, 750, 1000]
+          type: 'radio'
         },
         description:
           'Select an option to change the height of the surrounding container of the table (in `px`). <br /> __Note__: This is not an actual prop of the table.'
@@ -836,9 +836,9 @@ In the example below you can have a look at this behavior:
       withNavigationHighlight: { table: { disable: true } },
       markNavigatedRow: { table: { disable: true } },
       containerWidth: {
+        options: [400, 600, 800, 'auto'],
         control: {
-          type: 'radio',
-          options: [400, 600, 800, 'auto']
+          type: 'radio'
         },
         description:
           'Select an option to change the width of the surrounding container of the table (in `px`). <br /> __Note__: This is not an actual prop of the table.'

packages/main/src/webComponents/Input/Input.stories.mdx

@@ -108,7 +108,7 @@ and the `showSuggestions` prop is set to `true`.
       },
       text: { description: `Defines the text of the <code>SuggestionItem</code>.` },
       type: {
-        control: { options: ['Inactive', 'Active', 'Detail'] },
+        options: ['Inactive', 'Active', 'Detail'],
         description: `Defines the visual indication and behavior of the item. Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>. <br><br> <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover, while when <code>Inactive</code> or <code>Detail</code> - will not.`
       },
       disabled: { table: { disable: true } },

packages/main/src/webComponents/TabContainer/TabContainer.stories.mdx

@@ -111,7 +111,8 @@ selected
       },
       selected: { description: `Specifies if the <code>Tab</code> is selected.` },
       semanticColor: {
-        control: { type: 'radio', options: Object.values(SemanticColor) },
+        options: Object.values(SemanticColor),
+        control: { type: 'radio' },
         description: `Defines the <code>Tab</code> semantic color. <br><br> The color is applied to: <ul> <li>the <code>Tab</code> icon</li> <li>the <code>text</code> when <code>Tab</code> overflows</li> <li>the tab selection line</li> </ul><br/><br/>Available semantic colors are: <code>"Default"</code>, <code>"Neutral"</code>, <code>"Positive"</code>, <code>"Critical"</code> and <code>"Negative"</code>.<br/><br/><b>Note:</b> The color value depends on the current theme.`
       },
       stableDomRef: { description: `Defines the stable selector that you can use via getStableDomRef method.` },

packages/main/src/webComponents/UploadCollection/UploadCollection.stories.mdx

@@ -167,8 +167,8 @@ export const UploadCollectionComponent = () => {
         description: `The upload progress in percentage. <br><br> <b>Note:</b> Expected values are in the interval [0, 100].`
       },
       uploadState: {
+        options: ['Complete', 'Error', 'Ready', 'Uploading'],
         control: {
-          options: ['Complete', 'Error', 'Ready', 'Uploading'],
           type: 'radio'
         },
         description: `If set to <code>Uploading</code> or <code>Error</code>, a progress indicator showing the <code>progress</code> is displayed. Also if set to <code>Error</code>, a refresh button is shown. When this icon is pressed <code>retry</code> event is fired. If set to <code>Uploading</code>, a terminate button is shown. When this icon is pressed <code>terminate</code> event is fired.`

shared/stories/createSelectArgTypes.ts

@@ -7,9 +7,9 @@ export const createSelectArgTypes = (definition: ArgDefinition) => {
 
   for (const arg in definition) {
     argTypes[arg] = {
+      options: Array.isArray(definition[arg]) ? definition[arg] : Object.values(definition[arg]),
       control: {
-        type: 'radio',
-        options: Array.isArray(definition[arg]) ? definition[arg] : Object.values(definition[arg])
+        type: 'radio'
       }
     };
   }