Skip to content

chore: migrate to storybook 9 #35459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dmytrokirpa wants to merge 20 commits into
base: master
Choose a base branch
from
Draft

chore: migrate to storybook 9 #35459

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
b9050d0
fix(react-portal): replace Node.ELEMENT_NODE with hardcoded value for…
dmytrokirpa Oct 20, 2025
27a513d
change
dmytrokirpa Oct 20, 2025
8254135
Merge branch 'microsoft:master' into master
dmytrokirpa Oct 30, 2025
085b13d
Merge branch 'microsoft:master' into master
dmytrokirpa Nov 5, 2025
2110cee
chore: upgrade to storybook 9
dmytrokirpa Nov 5, 2025
27e6e5d
change files
dmytrokirpa Nov 5, 2025
e743873
Merge branch 'master' into chore/storybook9
dmytrokirpa Nov 5, 2025
07458f5
fix pazure-themes version
dmytrokirpa Nov 6, 2025
b21b54c
Merge branch 'master' into chore/storybook9
dmytrokirpa Nov 7, 2025
e87566e
update yarn.lock and import in globalTypes to use new path
dmytrokirpa Nov 8, 2025
ed15ae3
fix type issue
dmytrokirpa Nov 8, 2025
fbdc130
Merge branch 'master' into chore/storybook9
dmytrokirpa Nov 8, 2025
69044bd
update peer dependencies to use react-webpack5 and add storybook
dmytrokirpa Nov 8, 2025
d8d2e15
update import paths to include file extensions
dmytrokirpa Nov 8, 2025
1d2a5b3
fix web-components sb config
dmytrokirpa Nov 9, 2025
0ed1ac2
convert markdown tables to html as GFM syntax is not longer supported
dmytrokirpa Nov 9, 2025
a2cda0d
update import path for Storybook types
dmytrokirpa Nov 9, 2025
77c89d2
update mock path for Storybook addon documentation
dmytrokirpa Nov 9, 2025
ee3fb0a
Merge branch 'master' into chore/storybook9
dmytrokirpa Nov 11, 2025
de2cd48
Merge branch 'master' into chore/storybook9
dmytrokirpa Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
4 changes: 1 addition & 3 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,9 @@ const previewHeadTemplate = fs.readFileSync(path.resolve(__dirname, 'preview-hea
module.exports = /** @type {import('./types').StorybookConfig} */ ({
Copy link

@github-actions github-actions bot Nov 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Avatar Converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png 5 Changed
vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png 6 Changed
vr-tests-react-components/CalendarCompat 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 3270 Changed
vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png 842 Changed
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 3308 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 845 Changed
vr-tests-react-components/Charts-DonutChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png 29255 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 27057 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 616 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 608 Changed
vr-tests-react-components/Skeleton converged 8 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with circle - High Contrast.default.chromium.png 6 Changed
vr-tests-react-components/Skeleton converged.Opaque Skeleton with rectangle - Dark Mode.default.chromium.png 12 Changed
vr-tests-react-components/Skeleton converged.Opaque Skeleton with rectangle - High Contrast.default.chromium.png 4 Changed
vr-tests-react-components/Skeleton converged.Opaque Skeleton with rectangle.default.chromium.png 2 Changed
vr-tests-react-components/Skeleton converged.Opaque Skeleton with square - Dark Mode.default.chromium.png 3 Changed
vr-tests-react-components/Skeleton converged.Translucent Skeleton with rectangle - Dark Mode.default.chromium.png 2 Changed
vr-tests-react-components/Skeleton converged.Translucent Skeleton with rectangle - High Contrast.default.chromium.png 1 Changed
vr-tests-react-components/Skeleton converged.Translucent Skeleton with rectangle.default.chromium.png 2 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 677 Changed
vr-tests-react-components/TagPicker.disabled - RTL.chromium.png 635 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1319 Changed
vr-tests-web-components/RadioGroup 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/RadioGroup. - Dark Mode.normal.chromium_1.png 89 Changed
vr-tests-web-components/TextInput 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/TextInput. - Dark Mode.normal.chromium_1.png 288 Changed
vr-tests/Callout 7 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Callout.Bottom center.default.chromium.png 2128 Changed
vr-tests/Callout.Bottom right edge - RTL.default.chromium.png 1124 Changed
vr-tests/Callout.Bottom right edge.default.chromium.png 1130 Changed
vr-tests/Callout.Right bottom edge.default.chromium.png 3095 Changed
vr-tests/Callout.Left bottom edge.default.chromium.png 3182 Changed
vr-tests/Callout.Right center.default.chromium.png 2117 Changed
vr-tests/Callout.Root.default.chromium.png 2195 Changed
vr-tests/Coachmark 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Coachmark.Collapsed.default.chromium.png 159 Changed
vr-tests/Keytip 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Keytip.Disabled.default.chromium.png 26 Changed
vr-tests/Keytip.Offset.default.chromium.png 86 Changed
vr-tests/Keytip.Root.default.chromium.png 55 Changed
vr-tests/react-charting-AreaChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-AreaChart.Custom Accessibility.default.chromium.png 11 Changed
vr-tests/react-charting-LineChart 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-LineChart.Multiple - Dark Mode.default.chromium.png 181 Changed
vr-tests/react-charting-LineChart.Multiple.default.chromium.png 192 Changed
vr-tests/react-charting-LineChart.Multiple - RTL.default.chromium.png 200 Changed
vr-tests/react-charting-VerticalBarChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-VerticalBarChart.Basic - Secondary Y Axis.default.chromium.png 3 Changed
vr-tests/react-charting-VerticalBarChart.Grouped - Wrap Labels - Dark Mode.default.chromium.png 2987 Changed

There were 5 duplicate changes discarded. Check the build logs for more information.

stories: [],
addons: [
'@storybook/addon-essentials',
'@storybook/addon-a11y',
'@storybook/addon-docs',
'@storybook/addon-links',
// https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly
'@storybook/addon-mdx-gfm',

// internal monorepo custom addons
/** {@link file://./../packages/react-components/react-storybook-addon/package.json} */
Expand Down
2 changes: 2 additions & 0 deletions .storybook/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"module": "NodeNext",
"moduleResolution": "Bundler",
"noEmit": true,
"allowJs": true,
"checkJs": true,
Expand Down
2 changes: 1 addition & 1 deletion apps/chart-docsite/.storybook/manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { addons } from '@storybook/manager-api';
import { addons } from 'storybook/manager-api';

import fluentStorybookTheme from './theme';

Expand Down
2 changes: 1 addition & 1 deletion apps/chart-docsite/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Preview } from '@storybook/react';
import type { Preview } from '@storybook/react-webpack5';

import * as rootPreview from '../../../.storybook/preview';

Expand Down
2 changes: 1 addition & 1 deletion apps/chart-docsite/.storybook/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { create } from '@storybook/theming';
import { create } from 'storybook/theming';

import logo from '../public/fluentui-logo.svg';

Expand Down
2 changes: 1 addition & 1 deletion apps/chart-docsite/src/Introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta } from '@storybook/addon-docs';
import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Introduction" />

Expand Down
4 changes: 2 additions & 2 deletions apps/public-docsite-v9/.storybook/manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { addons } from '@storybook/manager-api';
import { addons } from 'storybook/manager-api';
import fluentStorybookTheme from './theme';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from '@storybook/core-events';
import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from 'storybook/internal/core-events';

addons.setConfig({
enableShortcuts: false,
Expand Down
2 changes: 1 addition & 1 deletion apps/public-docsite-v9/.storybook/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { create } from '@storybook/theming';
import { create } from 'storybook/theming';

import logo from '../public/fluentui-logo.svg';

Expand Down
2 changes: 1 addition & 1 deletion apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta } from '@storybook/blocks';
import { Meta } from '@storybook/addon-docs/blocks';
import { FullscreenLink } from './utils';
export const parentPath = 'concepts-developer-accessibility-scenarios';

Expand Down
2 changes: 1 addition & 1 deletion apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleComponents.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta } from '@storybook/addon-docs';
import { Meta } from '@storybook/addon-docs/blocks';
import { ScenariosListLink } from '../../AccessibilityScenarios/utils';

<Meta title="Concepts/Developer/Accessibility/Components Overview" />
Expand Down
2 changes: 1 addition & 1 deletion apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleExperiences.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta } from '@storybook/addon-docs';
import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Concepts/Developer/Accessibility/Experiences" />

Expand Down
Loading
Loading