Update to Storybook v7

Apply the following changes to perform the bulk of the migration: - `npx storybook@next upgrade --prerelease` This includes a number of automigrations which update core config to match the new v7 API - Disable `storyStoreV7` as a temporary workaround for an error loading stories. This will be re-enabled (v7 default) once the remaining issues are resolved - Disable auto docs generation for now, need to clean up stories to properly take advantage of CSF3 benefits etc. - Migrate to CSF3 story structure and syntax `npx storybook@next migrate csf-2-to-3 --glob="src/**/*.stories.js"` `npx storybook@next migrate csf-2-to-3 --glob="packages/**/*.stories.js"` This is only a partial migration and the remainder will need to be completed manually to take full advantage of the improvements and simplifications introduced in CSF3 - Remove the root prefix in each story (e.g. `Components/`) and move to a centralised config in `.storybook/main.js` via the `stories` entry. Experiemental components etc. will be identified differently after the CSF3 migration is completed fully
tektoncd · Feb 27, 2023 · a0f17a1 · a0f17a1
1 parent 53f3ba8
commit a0f17a1
Show file tree

Hide file tree

Showing 46 changed files with 22,015 additions and 38,730 deletions.
diff --git a/.eslintrc.js b/.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',

diff --git a/.storybook/.babelrc b/.storybook/.babelrc
diff --git a/.storybook/main.js b/.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;
diff --git a/.storybook/manager.js b/.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
 });
diff --git a/.storybook/preview.js b/.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;