Web: v9 storybook upgrade (#56925)

* Web: v9 storybook upgrade

* Move storybook eslint to builds package.json

package.json

@@ -32,14 +32,8 @@
   "devDependencies": {
     "@gravitational/build": "workspace:*",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-controls": "^8.6.12",
-    "@storybook/addon-toolbars": "^8.6.12",
-    "@storybook/components": "^8.6.12",
-    "@storybook/preview-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test-runner": "^0.22.1",
+    "@storybook/react-vite": "^9.0.17",
+    "@storybook/addon-vitest": "^9.0.15",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -62,7 +56,7 @@
     "playwright": "^1.53.2",
     "prettier": "^3.6.2",
     "react-select-event": "^5.5.1",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.17",
     "svgo": "^4.0.0",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"

web/.storybook/main.ts

@@ -43,11 +43,7 @@ const config: StorybookConfig = {
     options: { builder: { viteConfigPath: 'web/.storybook/vite.config.mts' } },
   },
   staticDirs: ['public'],
-  addons: [
-    '@storybook/addon-toolbars',
-    '@storybook/addon-controls',
-    '@storybook/addon-actions',
-  ],
+  addons: [],
   viteFinal(config) {
     return {
       ...config,

web/.storybook/preview.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Preview } from '@storybook/react';
+import { Preview } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { http, HttpResponse } from 'msw';
 import { initialize, mswLoader } from 'msw-storybook-addon';

web/packages/build/eslint.config.mjs

@@ -21,6 +21,7 @@ import jestPlugin from 'eslint-plugin-jest';
 import jestDomPlugin from 'eslint-plugin-jest-dom';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import storybook from 'eslint-plugin-storybook';
 import testingLibraryPlugin from 'eslint-plugin-testing-library';
 import unusedImportsPlugin from 'eslint-plugin-unused-imports';
 import globals from 'globals';
@@ -51,10 +52,14 @@ export default tseslint.config(
       // WASM generated files
       '**/ironrdp/pkg/**',
       'web/packages/teleterm/build',
+      // allows for eslint-plugin-storybook to also lint
+      // configuration files inside the .storybook folder
+      '!.storybook',
     ],
   },
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
+  ...storybook.configs['flat/recommended'],
   reactPlugin.configs.flat.recommended,
   reactPlugin.configs.flat['jsx-runtime'],
   {

web/packages/build/package.json

@@ -25,6 +25,7 @@
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^9.0.17",
     "eslint-plugin-testing-library": "7.4.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^16.3.0",

web/packages/design/src/Alert/Alert.controls.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import { Alert, AlertKind, AlertProps } from './Alert';
 

web/packages/design/src/Alert/Alert.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 import { Restore } from 'design/Icon';
 

web/packages/design/src/CollapsibleInfoSection/CollapsibleInfoSection.story.tsx

@@ -16,8 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { Meta, StoryFn, type StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
 import styled from 'styled-components';
 
 import { Flex, H2, Text } from 'design';

web/packages/design/src/Flex/Stack.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import styled from 'styled-components';
 
 import Box from 'design/Box';

web/packages/design/src/StatusIcon/StatusIcon.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 
 import Flex from 'design/Flex';
 

web/packages/design/src/Tabs/Tabs.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { useState } from 'react';
 
 import { TabBorder, TabContainer, TabsContainer } from './Tabs';

web/packages/shared/components/Controls/MultiselectMenu.story.tsx

@@ -16,10 +16,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/preview-api';
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
 import type { ReactNode } from 'react';
+import { action } from 'storybook/actions';
+import { useArgs } from 'storybook/preview-api';
 
 import { Flex } from 'design';
 

web/packages/shared/components/Controls/SortMenu.story.tsx

@@ -16,9 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/preview-api';
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+import { useArgs } from 'storybook/preview-api';
 
 import { Flex } from 'design';
 

web/packages/shared/components/Controls/ViewModeSwitch.story.tsx

@@ -16,9 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/preview-api';
-import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+import { useArgs } from 'storybook/preview-api';
 
 import { Flex } from 'design';
 import { ViewMode } from 'gen-proto-ts/teleport/userpreferences/v1/unified_resource_preferences_pb';

web/packages/shared/components/DemoTerminal/DemoTerminal.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { DemoTerminal as Component } from './DemoTerminal';
 

web/packages/shared/components/DesktopSession/DesktopSession.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import DialogConfirmation from 'design/DialogConfirmation';
 import {

web/packages/shared/components/SlidingSidePanel/SlidingSidePanel.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { useState } from 'react';
 
 import { Box, ButtonPrimary } from 'design';

web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { MemoryRouter } from 'react-router';
 import styled from 'styled-components';
 

web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 
 import { ButtonBorder, Flex } from 'design';
 

web/packages/shared/components/UnifiedResources/shared/StatusInfo.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import { SlidingSidePanel } from 'shared/components/SlidingSidePanel';
 import { InfoGuideContainer } from 'shared/components/SlidingSidePanel/InfoGuide';

web/packages/teleport/src/Apps/TcpAppConnectDialog.story.tsx

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { MemoryRouter } from 'react-router';
 
 import {

web/packages/teleport/src/Bots/Details/BotDetails.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createMemoryHistory } from 'history';
 import { MemoryRouter, Route, Router } from 'react-router';

web/packages/teleport/src/Bots/Edit/EditDialog.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { MemoryRouter } from 'react-router';
 

web/packages/teleport/src/Discover/Database/SetupAccess/AwsRdsAuthRequirements.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import { DiscoverGuideId } from 'teleport/services/userPreferences/discoverPreference';
 

web/packages/teleport/src/Discover/Kubernetes/SelfHosted/HelmChart/HelmChart.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { delay, http, HttpResponse } from 'msw';
 import { PropsWithChildren } from 'react';
 import { withoutQuery } from 'web/packages/build/storybook';

web/packages/teleport/src/Discover/Server/DownloadScript/DownloadScript.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { delay, http, HttpResponse } from 'msw';
 import { PropsWithChildren } from 'react';
 import { withoutQuery } from 'web/packages/build/storybook';

web/packages/teleport/src/Player/Player.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { createMemoryHistory } from 'history';
 
 import { Flex } from 'design';

web/packages/teleport/src/Roles/RoleEditor/RoleEditor.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { delay, http, HttpResponse } from 'msw';
 import { useEffect, useState } from 'react';
 

web/packages/teleport/src/UnifiedResources/ResourceActionButton.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { MemoryRouter } from 'react-router';
 
 import { Flex, Stack, Text } from 'design';

web/packages/teleport/src/Users/UserAddEdit/UserAddEdit.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import { delay } from 'msw';
 
 import type { TraitsOption } from 'shared/components/TraitsEditor';

web/packages/teleport/src/Users/UserDelete/UserDelete.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import { delay } from 'msw';
 
 import { TeleportProviderBasic } from 'teleport/mocks/providers';

web/packages/teleport/src/Users/UserReset/UserReset.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 
 import { Attempt } from 'shared/hooks/useAttemptNext';

web/packages/teleport/src/Users/Users.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import { delay } from 'msw';
 
 import { TeleportProviderBasic } from 'teleport/mocks/providers';

web/packages/teleport/src/components/LabelsInput/LabelsInput.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { useState } from 'react';
 
 import Box from 'design/Box';

web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import { makeErrorAttempt, makeProcessingAttempt } from 'shared/hooks/useAsync';
 

web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLoginReason.story.tsx

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import {
   makeApp,

web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/storyHelpers.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ArgTypes } from '@storybook/react';
+import { ArgTypes } from '@storybook/react-vite';
 import { FC, PropsWithChildren } from 'react';
 
 import Dialog from 'design/Dialog';

web/packages/teleterm/src/ui/DocumentAuthorizeWebSession/DocumentAuthorizeWebSession.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import { wait } from 'shared/utils/wait';
 

web/packages/teleterm/src/ui/DocumentCluster/ActionButtons.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import { Box, Flex, Text } from 'design';
 import { HoverTooltip } from 'design/Tooltip';

web/packages/teleterm/src/ui/DocumentGateway/DocumentGateway.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { ComponentProps } from 'react';
 
 import {

web/packages/teleterm/src/ui/DocumentGatewayApp/DocumentGatewayApp.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import { Flex } from 'design';
 import { usePromiseRejectedOnUnmount, wait } from 'shared/utils/wait';

web/packages/teleterm/src/ui/ModalsHost/modals/HardwareKeys/index.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import { makeRootCluster } from 'teleterm/services/tshd/testHelpers';
 

web/packages/teleterm/src/ui/TabHost/TabHost.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { createRef } from 'react';
 
 import { makeRootCluster } from 'teleterm/services/tshd/testHelpers';

web/packages/teleterm/src/ui/TopBar/Connections/Connections.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { useLayoutEffect } from 'react';
 
 import { Flex, Text } from 'design';

web/packages/teleterm/src/ui/Vnet/DocumentVnetDiagReport.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { PropsWithChildren, useEffect } from 'react';
 
 import { Box } from 'design';

web/packages/teleterm/src/ui/Vnet/DocumentVnetInfo.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 
 import { makeRootCluster } from 'teleterm/services/tshd/testHelpers';
 import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvider';

web/packages/teleterm/src/ui/Vnet/VnetSliderStep.story.tsx

@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect } from 'react';
 
 import { Box } from 'design';