Tech Story: [M3-7947] - Update storybook to 8.0.5

packages/manager/.changeset/pr-10336-tech-stories-1711993874664.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update Storybook to 8.0.5 ([#10336](https://github.com/linode/manager/pull/10336))

packages/manager/.storybook/main.ts

@@ -20,7 +20,6 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
-  features: { storyStoreV7: true },
   typescript: {
     reactDocgenTypescriptOptions: {
       // makes union prop types like variant and size appear as select controls
@@ -33,6 +32,8 @@ const config: StorybookConfig = {
           ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName)
           : true,
     },
+
+    reactDocgen: 'react-docgen-typescript',
   },
   docs: {
     autodocs: true,

packages/manager/.storybook/manager.ts

@@ -1,5 +1,5 @@
 import { create } from '@storybook/theming';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import Logo from '../src/assets/logo/akamai-logo-color.svg';
 
 const theme = create({

packages/manager/.storybook/preview.tsx

@@ -53,7 +53,6 @@ const preview: Preview = {
     }),
   ],
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: {
       grid: {
         disable: true,

packages/manager/.storybook/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+export default defineConfig({
+  plugins: [react()],
+});

packages/manager/package.json

@@ -110,18 +110,19 @@
   },
   "devDependencies": {
     "@linode/eslint-plugin-cloud-manager": "^0.0.3",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-controls": "^7.6.17",
-    "@storybook/addon-docs": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
-    "@storybook/addon-measure": "^7.6.17",
-    "@storybook/addon-storysource": "^7.6.17",
-    "@storybook/addon-viewport": "^7.6.17",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/client-api": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/theming": "^7.6.17",
+    "@storybook/addon-actions": "^8.0.5",
+    "@storybook/addon-controls": "^8.0.5",
+    "@storybook/addon-docs": "^8.0.5",
+    "@storybook/addon-mdx-gfm": "^8.0.5",
+    "@storybook/addon-measure": "^8.0.5",
+    "@storybook/addon-storysource": "^8.0.5",
+    "@storybook/addon-viewport": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/manager-api": "^8.0.5",
+    "@storybook/preview-api": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-vite": "^8.0.5",
+    "@storybook/theming": "^8.0.5",
     "@swc/core": "^1.3.1",
     "@testing-library/cypress": "^10.0.0",
     "@testing-library/jest-dom": "~6.4.2",
@@ -184,7 +185,7 @@
     "eslint-plugin-react-hooks": "^3.0.0",
     "eslint-plugin-scanjs-rules": "^0.2.1",
     "eslint-plugin-sonarjs": "^0.5.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^3.1.2",
     "eslint-plugin-xss": "^0.1.10",
     "factory.ts": "^0.5.1",
@@ -200,8 +201,8 @@
     "reselect-tools": "^0.0.7",
     "serve": "^14.0.1",
     "simple-git": "^3.19.0",
-    "storybook": "^7.6.17",
-    "storybook-dark-mode": "^3.0.3",
+    "storybook": "^8.0.5",
+    "storybook-dark-mode": "^4.0.1",
     "ts-node": "^10.9.2",
     "vite": "^5.0.12",
     "vite-plugin-svgr": "^3.2.0",

packages/manager/src/components/EditableText/EditableText.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import * as React from 'react';
 
 import { EditableText } from './EditableText';

packages/manager/src/components/PrimaryNav/SideMenu.stories.tsx

@@ -1,5 +1,5 @@
 import MenuIcon from '@mui/icons-material/Menu';
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';

packages/manager/src/components/TagsInput/TagsInput.stories.tsx

@@ -1,4 +1,4 @@
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 

packages/manager/src/components/TagsPanel/TagsPanel.stories.tsx

@@ -1,4 +1,4 @@
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 

packages/manager/src/components/intro.stories.mdx → packages/manager/src/components/intro.mdx

@@ -1,13 +1,13 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Intro/Welcome" />
 
 # Welcome
 
-_The mission of **Linode** is to accelerate innovation by making cloud computing simple, affordable, and accessible to all._
+The mission of **Linode** is to accelerate innovation by making cloud computing simple, affordable, and accessible to all.
 
-- Linode Storybook is a resource for the UI, behavior, code, and guidelines for use of all components in the Cloud Manager.
-- It is the single source truth for approved components and a living document that will incorporate new components and refinements for existing components.
+* Linode Storybook is a resource for the UI, behavior, code, and guidelines for use of all components in the Cloud Manager.
+* It is the single source truth for approved components and a living document that will incorporate new components and refinements for existing components.
 
 ## Contributing to the Design System