chore(examples): upgrade Storybook to v10 to support Vite 8

tonyolsson · tonyolsson · commit bf0b1b47e98a · 2026-07-01T20:39:06.000+02:00
diff --git a/examples/.storybook/main.ts b/examples/.storybook/main.ts
@@ -1,15 +1,16 @@
-import path from "path";
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { fileURLToPath } from "node:url";
+import path, { dirname } from "path";
 import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
   staticDirs: ["../public"],
-  addons: [
-    "@storybook/addon-essentials",
-    "@storybook/addon-a11y",
-    "@storybook/addon-interactions",
-  ],
+  addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
   framework: {
     name: "@storybook/react-vite",
     options: {},
diff --git a/examples/.storybook/preview.tsx b/examples/.storybook/preview.tsx
@@ -6,7 +6,7 @@ import {
   axisLightTheme,
 } from "@axiscommunications/fluent-theme";
 import { FluentProvider } from "@fluentui/react-components";
-import type { Decorator, Preview } from "@storybook/react";
+import type { Decorator, Preview } from "@storybook/react-vite";
 import { MemoryRouter } from "react-router-dom";
 import { ApplicationStateProvider } from "../src/context/ApplicationStateProvider";
 
diff --git a/examples/package.json b/examples/package.json
@@ -50,17 +50,14 @@
   },
   "devDependencies": {
     "@playwright/test": "1.59.1",
-    "@storybook/addon-a11y": "8.6.18",
-    "@storybook/addon-essentials": "8.6.18",
-    "@storybook/addon-interactions": "8.6.18",
-    "@storybook/blocks": "8.6.18",
-    "@storybook/react": "8.6.18",
-    "@storybook/react-vite": "8.6.18",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
     "@types/node": "^25.5.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "15.5.13",
-    "storybook": "8.6.18",
-    "typescript": "^5.8.3"
+    "storybook": "10.4.6",
+    "typescript": "^5.8.3",
+    "@storybook/addon-docs": "10.4.6"
   }
 }
diff --git a/examples/src/storybook/assets/icons.docs.mdx b/examples/src/storybook/assets/icons.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/addon-docs/blocks";
 import * as IconStories from "./icons.stories";
 
 <Meta of={IconStories} />
diff --git a/examples/src/storybook/assets/icons.stories.tsx b/examples/src/storybook/assets/icons.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { IconShowcase } from "./icon-showcase";
 
 const meta: Meta = {
diff --git a/examples/src/storybook/assets/illustrations.docs.mdx b/examples/src/storybook/assets/illustrations.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/addon-docs/blocks";
 import * as IllustrationStories from "./illustrations.stories";
 
 <Meta of={IllustrationStories} />
diff --git a/examples/src/storybook/assets/illustrations.stories.tsx b/examples/src/storybook/assets/illustrations.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { IllustrationShowcase } from "./illustration-showcase";
 
 const meta: Meta = {
diff --git a/examples/src/storybook/components/advanced-data-grid.stories.tsx b/examples/src/storybook/components/advanced-data-grid.stories.tsx
@@ -3,7 +3,7 @@ import {
   AdvancedDataGrid,
   AdvancedDataGridProps,
 } from "@axiscommunications/fluent-advanced-data-grid";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { ReactElement } from "react";
 import { AdvancedDataGridExample } from "../../stories/advanced-data-grid/examples/advanced-data-grid-example";
 import { AdvancedDataGridMinimalExample } from "../../stories/advanced-data-grid/examples/advanced-data-grid-minimal-example";
diff --git a/examples/src/storybook/components/empty-view.docs.mdx b/examples/src/storybook/components/empty-view.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Controls, Description, Meta, Story, Subtitle, Title } from "@storybook/blocks";
+import { Canvas, Controls, Description, Meta, Story, Subtitle, Title } from "@storybook/addon-docs/blocks";
 import * as EmptyViewStories from "./empty-view.stories";
 
 <Meta of={EmptyViewStories} />
diff --git a/examples/src/storybook/components/empty-view.stories.tsx b/examples/src/storybook/components/empty-view.stories.tsx
@@ -1,6 +1,6 @@
 import { MainEmptyView } from "@axiscommunications/fluent-empty-view";
 import { makeStyles } from "@fluentui/react-components";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { DialogEmptyViewExample } from "../../stories/empty-view/examples/dialog";
 import { MainEmptyViewExample } from "../../stories/empty-view/examples/main";
 import { PanelEmptyViewExample } from "../../stories/empty-view/examples/panel";
diff --git a/examples/src/storybook/components/password-input.docs.mdx b/examples/src/storybook/components/password-input.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Controls, Description, Meta, Subtitle, Title } from "@storybook/blocks";
+import { Canvas, Controls, Description, Meta, Subtitle, Title } from "@storybook/addon-docs/blocks";
 import * as PasswordInputStories from "./password-input.stories";
 
 <Meta of={PasswordInputStories} />
diff --git a/examples/src/storybook/components/password-input.stories.tsx b/examples/src/storybook/components/password-input.stories.tsx
@@ -1,6 +1,6 @@
 import { PasswordInput } from "@axiscommunications/fluent-password-input";
 import { makeStyles } from "@fluentui/react-components";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { PasswordInputExample } from "../../stories/password-input/password-input-example";
 
 const useStyles = makeStyles({
diff --git a/examples/src/storybook/components/side-navigation.stories.tsx b/examples/src/storybook/components/side-navigation.stories.tsx
@@ -1,6 +1,6 @@
 import { SideNavigation } from "@axiscommunications/fluent-side-navigation";
 import { makeStyles } from "@fluentui/react-components";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CollapsibleSideNavigationExample } from "../../stories/side-navigation/examples/collapsible-side-navigation-example";
 import { CompactSideNavigationExample } from "../../stories/side-navigation/examples/compact-side-navigation-example";
 import { IconOnlySideNavigationExample } from "../../stories/side-navigation/examples/icon-only-side-navigation-example";
diff --git a/examples/src/storybook/components/slider.docs.mdx b/examples/src/storybook/components/slider.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Controls, Description, Meta, Subtitle, Title } from "@storybook/blocks";
+import { Canvas, Controls, Description, Meta, Subtitle, Title } from "@storybook/addon-docs/blocks";
 import * as SliderStories from "./slider.stories";
 
 <Meta of={SliderStories} />
diff --git a/examples/src/storybook/components/slider.stories.tsx b/examples/src/storybook/components/slider.stories.tsx
@@ -1,6 +1,6 @@
 import { Slider } from "@axiscommunications/fluent-slider";
 import { makeStyles } from "@fluentui/react-components";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { ReactElement } from "react";
 import { CustomSliderExample } from "../../stories/slider/examples/custom-example";
 import { DisabledSliderExample } from "../../stories/slider/examples/disabled-example";
diff --git a/examples/src/storybook/theme/theme.docs.mdx b/examples/src/storybook/theme/theme.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/addon-docs/blocks";
 import * as ThemeStories from "./theme.stories";
 
 <Meta of={ThemeStories} />
diff --git a/examples/src/storybook/theme/theme.stories.tsx b/examples/src/storybook/theme/theme.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ThemePage } from "../../stories/theme/theme-page";
 
 const meta: Meta = {
diff --git a/examples/src/storybook/ui-patterns/stories/AxisIcons.stories.tsx b/examples/src/storybook/ui-patterns/stories/AxisIcons.stories.tsx
@@ -1,7 +1,7 @@
 import * as AxisIcons from "@axiscommunications/fluent-icons";
 import { Button, Input, Text } from "@fluentui/react-components";
 import { Search20Regular } from "@fluentui/react-icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { ComponentType } from "react";
 import { useState } from "react";
 
diff --git a/examples/src/storybook/ui-patterns/stories/BadgePatterns.stories.tsx b/examples/src/storybook/ui-patterns/stories/BadgePatterns.stories.tsx
@@ -14,7 +14,7 @@ import {
   tokens,
 } from "@fluentui/react-components";
 import { AlertRegular, LockClosedRegular } from "@fluentui/react-icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 /**
  * # Badges in Tables
diff --git a/examples/src/storybook/ui-patterns/stories/BreadcrumbHeader.stories.tsx b/examples/src/storybook/ui-patterns/stories/BreadcrumbHeader.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { BreadcrumbHeader } from "../components/composites/BreadcrumbHeader";
 
 /**
diff --git a/examples/src/storybook/ui-patterns/stories/DataDisplay.stories.tsx b/examples/src/storybook/ui-patterns/stories/DataDisplay.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { StatCard } from "../components/composites/StatCard";
 
 /**
diff --git a/examples/src/storybook/ui-patterns/stories/FileUploadPatterns.stories.tsx b/examples/src/storybook/ui-patterns/stories/FileUploadPatterns.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FileUpload } from "../components/composites/FileUpload";
 
 /**
diff --git a/examples/src/storybook/ui-patterns/stories/FilterChip.stories.tsx b/examples/src/storybook/ui-patterns/stories/FilterChip.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import {
   FilterChip,
diff --git a/examples/src/storybook/ui-patterns/stories/FilterToolbar.stories.tsx b/examples/src/storybook/ui-patterns/stories/FilterToolbar.stories.tsx
@@ -1,5 +1,5 @@
 import { FilterRegular } from "@fluentui/react-icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { FilterToolbar } from "../components/composites/FilterToolbar";
 
diff --git a/examples/src/storybook/ui-patterns/stories/FormPatterns.stories.tsx b/examples/src/storybook/ui-patterns/stories/FormPatterns.stories.tsx
@@ -1,5 +1,5 @@
 import { Button, Input, makeStyles, tokens } from "@fluentui/react-components";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { FormField } from "../components/composites/FormField";
 
diff --git a/examples/src/storybook/ui-patterns/stories/FullPageHeader.stories.tsx b/examples/src/storybook/ui-patterns/stories/FullPageHeader.stories.tsx
@@ -7,7 +7,7 @@ import {
   tokens,
 } from "@fluentui/react-components";
 import { ArrowResetRegular, SaveRegular } from "@fluentui/react-icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useMemo, useState } from "react";
 import { FullPageHeader } from "../components/composites/FullPageHeader";
 
diff --git a/examples/src/storybook/ui-patterns/stories/InlineFilterDrawer.stories.tsx b/examples/src/storybook/ui-patterns/stories/InlineFilterDrawer.stories.tsx
@@ -6,7 +6,7 @@ import {
   Layer20Regular,
   Location20Regular,
 } from "@fluentui/react-icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import {
   type FilterGroup,
diff --git a/examples/src/storybook/ui-patterns/stories/Introduction.mdx b/examples/src/storybook/ui-patterns/stories/Introduction.mdx
@@ -1,5 +1,5 @@
 {/* Introduction.mdx */}
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Introduction" />
 
diff --git a/examples/src/storybook/ui-patterns/stories/LayoutPatterns.stories.tsx b/examples/src/storybook/ui-patterns/stories/LayoutPatterns.stories.tsx
@@ -10,7 +10,7 @@ import {
   PeopleRegular,
   RocketRegular,
 } from "@fluentui/react-icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { FilterToolbar } from "../components/composites/FilterToolbar";
 import { FullPageHeader } from "../components/composites/FullPageHeader";
 
diff --git a/examples/src/storybook/ui-patterns/stories/MessageBar.stories.tsx b/examples/src/storybook/ui-patterns/stories/MessageBar.stories.tsx
@@ -28,7 +28,7 @@ import {
   SettingsFilled,
   SettingsRegular,
 } from "@fluentui/react-icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { type CSSProperties, useState } from "react";
 import { FullPageHeader } from "../components/composites/FullPageHeader";
 import {
diff --git a/examples/src/storybook/ui-patterns/stories/PageHeader.stories.tsx b/examples/src/storybook/ui-patterns/stories/PageHeader.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { PageHeader } from "../components/composites/PageHeader";
 
 /**
@@ -23,7 +23,7 @@ const meta: Meta<typeof PageHeader> = {
     docs: {
       description: {
         component:
-          "A page-level header with optional breadcrumbs, a title, an optional description, and right-aligned action buttons. Only `title` is required; provide the other props as the page needs them.\n\n<p align='right'><a href='https://www.figma.com/design/0kVLp2qecBWQiQXEQidCeJ/Axis-Global-components?node-id=86-367'><img width='240' src='./figma-global-components-cover.svg' alt='Open in Figma — AXIS Fluent Global components' /></a></p>",
+          "A page-level header with optional breadcrumbs, a title, an optional description, and right-aligned action buttons. Only `title` is required; provide the other props as the page needs them.\n\n<p align='right'><a href='https://www.figma.com/design/0kVLp2qecBWQiQXEQidCeJ/Axis-Global-components?node-id=86-367'><img width='240' src='/figma-global-components-cover.svg' alt='Open in Figma — AXIS Fluent Global components' /></a></p>",
       },
     },
   },
diff --git a/examples/src/storybook/ui-patterns/stories/Pagination.stories.tsx b/examples/src/storybook/ui-patterns/stories/Pagination.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { Pagination } from "../components/composites/Pagination";
 
diff --git a/examples/src/storybook/ui-patterns/stories/ResponsiveSuiteLayout.stories.tsx b/examples/src/storybook/ui-patterns/stories/ResponsiveSuiteLayout.stories.tsx
@@ -52,8 +52,8 @@ import {
   Heading,
   Markdown,
   Title,
-} from "@storybook/blocks";
-import type { Meta, StoryObj } from "@storybook/react";
+} from "@storybook/addon-docs/blocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { type CSSProperties, useEffect, useMemo, useState } from "react";
 import { FilterToolbar } from "../components/composites/FilterToolbar";
 import { FullPageHeader } from "../components/composites/FullPageHeader";
diff --git a/examples/src/storybook/ui-patterns/stories/SectionHeader.stories.tsx b/examples/src/storybook/ui-patterns/stories/SectionHeader.stories.tsx
@@ -1,5 +1,5 @@
 import { AddRegular, ArrowSyncRegular } from "@fluentui/react-icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { SectionHeader } from "../components/composites/SectionHeader";
 
 const meta: Meta<typeof SectionHeader> = {
diff --git a/examples/src/storybook/ui-patterns/stories/SuiteHeader.stories.tsx b/examples/src/storybook/ui-patterns/stories/SuiteHeader.stories.tsx
@@ -7,7 +7,7 @@ import {
   SettingsRegular,
   ShareRegular,
 } from "@fluentui/react-icons";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import logoBlack from "../../../assets/logo-black.svg";
 import {
   SuiteHeader,
diff --git a/examples/src/storybook/ui-patterns/stories/TablePatterns.stories.tsx b/examples/src/storybook/ui-patterns/stories/TablePatterns.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { DataTable } from "../components/composites/DataTable";
 
 /**
diff --git a/examples/src/storybook/ui-patterns/stories/UIPatternsIntroduction.mdx b/examples/src/storybook/ui-patterns/stories/UIPatternsIntroduction.mdx
@@ -1,5 +1,5 @@
 {/* UIPatternsIntroduction.mdx */}
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="UI patterns/Introduction" />
 
diff --git a/examples/src/storybook/ui-patterns/stories/Wizard.stories.tsx b/examples/src/storybook/ui-patterns/stories/Wizard.stories.tsx
@@ -1,5 +1,5 @@
 import { tokens } from "@fluentui/react-components";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { Wizard, type WizardStep } from "../components/composites/Wizard";
 
diff --git a/examples/src/storybook/utilities/hooks.docs.mdx b/examples/src/storybook/utilities/hooks.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/addon-docs/blocks";
 import * as HookStories from "./hooks.stories";
 
 <Meta of={HookStories} />
diff --git a/examples/src/storybook/utilities/hooks.stories.tsx b/examples/src/storybook/utilities/hooks.stories.tsx
@@ -10,7 +10,7 @@ import {
   makeStyles,
   tokens,
 } from "@fluentui/react-components";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useMemo, useState } from "react";
 
 const useStyles = makeStyles({
diff --git a/examples/src/storybook/utilities/styles.docs.mdx b/examples/src/storybook/utilities/styles.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Subtitle, Title } from "@storybook/addon-docs/blocks";
 import * as StyleStories from "./styles.stories";
 
 <Meta of={StyleStories} />
diff --git a/examples/src/storybook/utilities/styles.stories.tsx b/examples/src/storybook/utilities/styles.stories.tsx
@@ -1,5 +1,5 @@
 import { makeStyles } from "@fluentui/react-components";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MainMenu } from "../../stories/main-menu/examples/main-menu";
 import { MainMenuVertical } from "../../stories/main-menu/examples/main-menu-vertical";
 import { StyledTabListComponent } from "../../stories/tab-list-utilities/tab-list-example";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { Meta, StoryObj } from "@storybook/react";`
	`1`	`+import type { Meta, StoryObj } from "@storybook/react-vite";`
`2`	`2`	`import { IconShowcase } from "./icon-showcase";`
`3`	`3`
`4`	`4`	`const meta: Meta = {`