Upgrade Storybook to v7

webview/.storybook/main.ts

@@ -2,11 +2,15 @@ import webpack from 'webpack'
 import webpackConfig from '../webpack.config'
 
 export default {
+  reactOptions: { fastRefresh: true },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../../extension/src/test/fixtures/plotsDiff/staticImages'],
   addons: [
     'storybook-addon-themes',
-    'storybook-addon-designs',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     {

webview/package.json

@@ -10,8 +10,8 @@
     "dev": "webpack watch --mode development",
     "build": "webpack --mode production",
     "test": "jest --collect-coverage",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook --webpack-stats-json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --webpack-stats-json",
     "svgr": "svgr --out-dir src/shared/components/icons --ignore-existing ../node_modules/@vscode/codicons/src/icons && svgr -d src/shared/components/icons icons/"
   },
   "main": "./index.js",
@@ -38,14 +38,15 @@
     "vega-util": "1.17.1"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/addon-essentials": "7.0.7",
+    "@storybook/addon-interactions": "7.0.7",
+    "@storybook/addons": "7.0.7",
+    "@storybook/builder-webpack5": "7.0.7",
     "@storybook/manager-webpack5": "6.5.16",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.5.16",
-    "@storybook/testing-library": "0.0.13",
+    "@storybook/react": "7.0.7",
+    "@storybook/react-webpack5": "7.0.7",
+    "@storybook/testing-library": "0.1.0",
     "@svgr/cli": "7.0.0",
     "@swc/core": "1.3.51",
     "@swc/jest": "0.2.26",
@@ -72,7 +73,7 @@
     "raw-loader": "4.0.2",
     "sass": "1.62.0",
     "sass-loader": "13.2.2",
-    "storybook-addon-designs": "6.3.1",
+    "storybook": "7.0.7",
     "storybook-addon-themes": "6.1.0",
     "style-loader": "3.3.2",
     "ts-loader": "9.4.2",

webview/src/stories/ComparisonTable.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import { configureStore } from '@reduxjs/toolkit'
 import { userEvent, within } from '@storybook/testing-library'
 import React from 'react'
@@ -36,7 +36,7 @@ export default {
   title: 'Comparison Table'
 } as Meta
 
-const Template: Story = ({ plots, revisions }) => {
+const Template: StoryFn = ({ plots, revisions }) => {
   const store = configureStore({
     reducer: plotsReducers
   })

webview/src/stories/ComparisonTableHeader.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
 import { ComparisonTableHeader } from '../plots/components/comparisonTable/ComparisonTableHeader'
@@ -19,7 +19,7 @@ export default {
   title: 'Comparison Table Header'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   displayColor: string
   name: string
   onClicked: () => void

webview/src/stories/ContextMenu.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
@@ -18,7 +18,7 @@ export default {
   title: 'Context Menu'
 } as Meta
 
-const Template: Story<ContextMenuProps> = () => {
+const Template: StoryFn<ContextMenuProps> = () => {
   return (
     <WebviewWrapper>
       <ContextMenu

webview/src/stories/IconMenu.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
 import { SelectMenu } from '../shared/components/selectMenu/SelectMenu'
@@ -82,7 +82,7 @@ export default {
   title: 'Icon Menu'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   items: IconMenuItemProps[]
 }> = ({ items }) => (
   <WebviewWrapper>

webview/src/stories/Icons.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 
 import { IconWrapper } from './components/IconWrapper'
@@ -42,7 +42,7 @@ export default {
   title: 'Icons'
 } as Meta
 
-const Template: Story = () => {
+const Template: StoryFn = () => {
   return (
     <IconsWrapper>
       <IconWrapper name="Add">

webview/src/stories/Plots.stories.tsx

@@ -1,7 +1,7 @@
 import { configureStore } from '@reduxjs/toolkit'
 import React from 'react'
 import { Provider, useDispatch } from 'react-redux'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import { userEvent, within } from '@storybook/testing-library'
 import {
   PlotsData,
@@ -77,7 +77,7 @@ export default {
   title: 'Plots'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   data?: PlotsData
 }> = ({ data }) => {
   const store = configureStore({ reducer: plotsReducers })

webview/src/stories/Ribbon.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import { Provider, useDispatch } from 'react-redux'
 import { configureStore } from '@reduxjs/toolkit'
 import { MessageToWebviewType } from 'dvc/src/webview/contract'
@@ -37,7 +37,7 @@ export default {
   title: 'Plots Ribbon'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   data?: PlotsData
 }> = ({ data }) => {
   const store = configureStore({ reducer: plotsReducers })

webview/src/stories/Setup.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { MessageToWebviewType } from 'dvc/src/webview/contract'
 import { SetupData, SetupSection } from 'dvc/src/setup/webview/contract'
@@ -37,7 +37,7 @@ export default {
   title: 'Setup'
 } as Meta
 
-const Template: Story = ({ data }) => {
+const Template: StoryFn = ({ data }) => {
   const app = <App />
   window.postMessage(
     {

webview/src/stories/Slider.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
 import { Slider } from '../shared/components/slider/Slider'
@@ -14,7 +14,7 @@ export default {
   title: 'Slider'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   maximum: number
   defaultValue: number
   label: string

webview/src/stories/Table.stories.tsx

@@ -1,7 +1,7 @@
 import { configureStore } from '@reduxjs/toolkit'
 import React from 'react'
 import { Provider } from 'react-redux'
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import { rowsFixtureWithBranches } from 'dvc/src/test/fixtures/expShow/base/rows'
 import columnsFixture from 'dvc/src/test/fixtures/expShow/base/columns'
 import workspaceChangesFixture from 'dvc/src/test/fixtures/expShow/base/workspaceChanges'
@@ -104,17 +104,10 @@ export default {
     tableData
   },
   component: Experiments,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/AuQXbrFj60xA2QXOjo9Z65/Experiments-Panel-%E2%80%A2-496'
-    },
-    layout: 'fullscreen'
-  },
   title: 'Table'
 } as Meta
 
-const Template: Story<{ tableData: TableDataState }> = ({ tableData }) => {
+const Template: StoryFn<{ tableData: TableDataState }> = ({ tableData }) => {
   return (
     <Provider
       store={configureStore({
@@ -252,7 +245,7 @@ WithNoSortsOrFilters.args = {
   }
 }
 
-export const Scrolled: Story<{ tableData: TableDataState }> = ({
+export const Scrolled: StoryFn<{ tableData: TableDataState }> = ({
   tableData
 }) => {
   return (

webview/src/stories/Tooltip.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
 import Tooltip from '../shared/components/tooltip/Tooltip'
@@ -20,7 +20,7 @@ export default {
   title: 'Tooltip'
 } as Meta
 
-const Template: Story = args => (
+const Template: StoryFn = args => (
   <div
     style={{
       backgroundColor: 'gray',