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;