Update to Storybook v7

.eslintrc.js

@@ -21,7 +21,8 @@ module.exports = {
   extends: [
     'airbnb',
     'plugin:prettier/recommended',
-    'plugin:cypress/recommended'
+    'plugin:cypress/recommended',
+    'plugin:storybook/recommended'
   ],
   globals: {
     Atomics: 'readonly',

.storybook/main.js

@@ -12,57 +12,66 @@ limitations under the License.
 */
 
 const path = require('path');
-
-module.exports = {
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-storysource'
-  ],
-  core: {
-    builder: {
-      name: 'webpack5',
-      options: {
+const config = {
+  addons: ['@storybook/addon-essentials', '@storybook/addon-storysource'],
+  core: { disableTelemetry: true },
+  docs: {
+    autodocs: 'tag',
+    defaultName: 'Documentation'
+  },
+  features: {
+    buildStoriesJson: true,
+    storyStoreV7: false
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      fastRefresh: true,
+      strictMode: false,
+      builder: {
         lazyCompilation: true,
         fsCache: true
       }
     }
   },
-  reactOptions: {
-    fastRefresh: true,
-    strictMode: false // set in the decorator instead to workaround Storybook issue 12977
-  },
   stories: [
-    '../src/**/*.stories.js',
-    '../packages/**/*.stories.js'
+    { directory: '../src', files: '**/*.stories.js', titlePrefix: 'Containers' },
+    { directory: '../packages/components', files: '**/*.stories.js', titlePrefix: 'Components' },
+    { directory: '../packages/graph', files: '**/*.stories.js', titlePrefix: 'Experimental/Graph' }
   ],
-  webpackFinal: async (config, { configType }) => {
+  webpackFinal: 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.
 
     config.module.rules.push({
       test: /\.mjs$/,
       type: 'javascript/auto'
-    },{
+    }, {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: {
-        presets: [
-          ['@babel/preset-env', { modules: 'commonjs' }]
-        ]
+        presets: [['@babel/preset-env', {
+          modules: 'commonjs'
+        }]]
       }
     }, {
       test: /\.scss$/,
       use: ['style-loader', 'css-loader', 'sass-loader'],
-      include: path.resolve(__dirname, '../'),
+      include: path.resolve(__dirname, '../')
     }, {
       test: /\.yaml$/,
       type: 'json',
       loader: 'yaml-loader',
-      options: { asJSON: true }
+      options: {
+        asJSON: true
+      }
     });
-
     return config;
   }
 };
+
+export default config;

.storybook/manager.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-2023 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 // import { themes } from '@storybook/theming';
 
 import theme from './theme';
@@ -22,7 +22,10 @@ addons.setConfig({
   panelPosition: 'bottom',
   showNav: true,
   showPanel: true,
-  sidebarAnimations: true,
+  sidebar: {
+    collapsedRoots: ['containers', 'experimental'],
+    showRoots: true
+  },
   theme,
   // theme: themes.dark
 });

.storybook/preview.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2023 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -15,12 +15,11 @@ import React from 'react';
 
 import Container from './Container';
 
-export const parameters = {
+const parameters = {
   options: {
-    storySort: (a, b) =>
-      a[1].kind === b[1].kind
-        ? 0
-        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })
+    storySort: {
+      order: ['Components', 'Containers', '*', 'Experimental']
+    }
   },
   backgrounds: {
     default: 'gray10',
@@ -42,7 +41,7 @@ export const parameters = {
   controls: { hideNoControlsWarning: true }
 };
 
-export const decorators = [
+const decorators = [
   (story, context) => (
     <Container
       notes={context.parameters.notes}
@@ -52,3 +51,10 @@ export const decorators = [
     />
   )
 ];
+
+const preview = {
+  decorators,
+  parameters
+};
+
+export default preview;