Skip to content

Commit a5b3540

Browse files
dmytrokirpadmytrokirpa
authored
chore: migrate to storybook 9 (#35459)
1 parent 1441a0c commit a5b3540

File tree

455 files changed

+1868
-2762
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

455 files changed

+1868
-2762
lines changed

‎.storybook/main.js‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const path = require('path');
22
const fs = require('fs');
3+
// ESM import workaround for CJS modules
4+
const remarkGfm = require('remark-gfm').default;
35

46
const {
57
loadWorkspaceAddon,
@@ -17,11 +19,19 @@ const previewHeadTemplate = fs.readFileSync(path.resolve(__dirname, 'preview-hea
1719
module.exports = /** @type {import('./types').StorybookConfig} */ ({
1820
stories: [],
1921
addons: [
20-
'@storybook/addon-essentials',
2122
'@storybook/addon-a11y',
23+
{
24+
name: '@storybook/addon-docs',
25+
options: {
26+
mdxPluginOptions: {
27+
mdxCompileOptions: {
28+
// Enable GitHub Flavored Markdown support in MDX files
29+
remarkPlugins: [remarkGfm],
30+
},
31+
},
32+
},
33+
},
2234
'@storybook/addon-links',
23-
// https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly
24-
'@storybook/addon-mdx-gfm',
2535

2636
// internal monorepo custom addons
2737
/** {@link file://./../packages/react-components/react-storybook-addon/package.json} */

‎apps/chart-docsite/.storybook/manager.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { addons } from '@storybook/manager-api';
1+
import { addons } from 'storybook/manager-api';
22

33
import fluentStorybookTheme from './theme';
44

‎apps/chart-docsite/.storybook/preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Preview } from '@storybook/react';
1+
import type { Preview } from '@storybook/react-webpack5';
22

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

‎apps/chart-docsite/.storybook/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { create } from '@storybook/theming';
1+
import { create } from 'storybook/theming';
22

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

‎apps/chart-docsite/src/Introduction.mdx‎

Lines changed: 24 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta } from '@storybook/addon-docs';
1+
import { Meta } from '@storybook/addon-docs/blocks';
22

33
<Meta title="Introduction" />
44

@@ -18,152 +18,29 @@ To get started with the charts package in your project:
1818
npm install @fluentui/react-charts
1919
```
2020

21-
or
22-
23-
```
24-
yarn add @fluentui/react-charts
25-
```
26-
27-
2. Import and use the charts in your React application.
28-
29-
3. Refer to the individual chart examples for detailed usage instructions and examples.
30-
31-
## Available charts across platforms
32-
33-
<table>
34-
<tr>
35-
<th>Chart</th>
36-
<th>Fluent v8</th>
37-
<th>Fluent v9</th>
38-
<th>Fluent Web Component</th>
39-
</tr>
40-
<tr>
41-
<td>Documentation</td>
42-
<td>[Link](https://aka.ms/fluentcharting)</td>
43-
<td>[Link](https://react.fluentui.dev/?path=/docs/charts_introduction--docs)</td>
44-
<td>[Link](https://github.com/microsoft/fluentui/tree/master/packages/charts/chart-web-components#readme)</td>
45-
</tr>
46-
<tr>
47-
<td>AreaChart</td>
48-
<td>Stable</td>
49-
<td>Stable</td>
50-
<td>Planned</td>
51-
</tr>
52-
<tr>
53-
<td>DonutChart</td>
54-
<td>Stable</td>
55-
<td>Stable</td>
56-
<td>Stable</td>
57-
</tr>
58-
<tr>
59-
<td>GaugeChart</td>
60-
<td>Stable</td>
61-
<td>Stable</td>
62-
<td>Planned</td>
63-
</tr>
64-
<tr>
65-
<td>HeatMapChart</td>
66-
<td>Stable</td>
67-
<td>Stable</td>
68-
<td>Planned</td>
69-
</tr>
70-
<tr>
71-
<td>HorizontalBarChart</td>
72-
<td>Stable</td>
73-
<td>Stable</td>
74-
<td>Stable</td>
75-
</tr>
76-
<tr>
77-
<td>HorizontalBarChart with Axis</td>
78-
<td>Stable</td>
79-
<td>Stable</td>
80-
<td>Planned</td>
81-
</tr>
82-
<tr>
83-
<td>HorizontalBarChart Stacked</td>
84-
<td>Stable</td>
85-
<td>HorizontalBarChart</td>
86-
<td>HorizontalBarChart</td>
87-
</tr>
88-
<tr>
89-
<td>HorizontalBarChart MultiStacked</td>
90-
<td>Stable</td>
91-
<td>HorizontalBarChart</td>
92-
<td>HorizontalBarChart</td>
93-
</tr>
94-
<tr>
95-
<td>Legends</td>
96-
<td>Stable</td>
97-
<td>Stable</td>
98-
<td>Planned</td>
99-
</tr>
100-
<tr>
101-
<td>LineChart</td>
102-
<td>Stable</td>
103-
<td>Stable</td>
104-
<td>Planned</td>
105-
</tr>
106-
<tr>
107-
<td>PieChart</td>
108-
<td>Stable</td>
109-
<td>Use donut chart</td>
110-
<td>Use donut chart</td>
111-
</tr>
112-
<tr>
113-
<td>SankeyChart</td>
114-
<td>Stable</td>
115-
<td>Stable</td>
116-
<td>Planned</td>
117-
</tr>
118-
<tr>
119-
<td>Sparkline</td>
120-
<td>Stable</td>
121-
<td>Stable</td>
122-
<td>-</td>
123-
</tr>
124-
<tr>
125-
<td>TreeChart</td>
126-
<td>Stable</td>
127-
<td>-</td>
128-
<td>-</td>
129-
</tr>
130-
<tr>
131-
<td>VerticalBarChart</td>
132-
<td>Stable</td>
133-
<td>Stable</td>
134-
<td>Planned</td>
135-
</tr>
136-
<tr>
137-
<td>VerticalBarChart Grouped</td>
138-
<td>Stable</td>
139-
<td>Stable</td>
140-
<td>Planned</td>
141-
</tr>
142-
<tr>
143-
<td>VerticalBarChart Stacked</td>
144-
<td>Stable</td>
145-
<td>Stable</td>
146-
<td>Planned</td>
147-
</tr>
148-
<tr>
149-
<td>Plotly Schema Chart (new)</td>
150-
<td>Stable</td>
151-
<td>Stable</td>
152-
<td>-</td>
153-
</tr>
154-
<tr>
155-
<td>Scatter Chart (new)</td>
156-
<td>Stable</td>
157-
<td>Stable</td>
158-
<td>-</td>
159-
</tr>
160-
<tr>
161-
<td>Gantt Chart (new)</td>
162-
<td>June 2025</td>
163-
<td>July 2025</td>
164-
<td>-</td>
165-
</tr>
166-
</table>
21+
| Chart | Fluent v8 | Fluent v9 | Fluent Web Component |
22+
| ------------------------------- | ------------------------------------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- |
23+
| Documentation | [Link](https://aka.ms/fluentcharting) | [Link](https://react.fluentui.dev/?path=/docs/charts_introduction--docs) | [Link](https://github.com/microsoft/fluentui/tree/master/packages/charts/chart-web-components#readme) |
24+
| AreaChart | Stable | Stable | Planned |
25+
| DonutChart | Stable | Stable | Stable |
26+
| GaugeChart | Stable | Stable | Planned |
27+
| HeatMapChart | Stable | Stable | Planned |
28+
| HorizontalBarChart | Stable | Stable | Stable |
29+
| HorizontalBarChart with Axis | Stable | Stable | Planned |
30+
| HorizontalBarChart Stacked | Stable | HorizontalBarChart | HorizontalBarChart |
31+
| HorizontalBarChart MultiStacked | Stable | HorizontalBarChart | HorizontalBarChart |
32+
| Legends | Stable | Stable | Planned |
33+
| LineChart | Stable | Stable | Planned |
34+
| PieChart | Stable | Use donut chart | Use donut chart |
35+
| SankeyChart | Stable | Stable | Planned |
36+
| Sparkline | Stable | Stable | - |
37+
| TreeChart | Stable | - | - |
38+
| VerticalBarChart | Stable | Stable | Planned |
39+
| VerticalBarChart Grouped | Stable | Stable | Planned |
40+
| VerticalBarChart Stacked | Stable | Stable | Planned |
41+
| Plotly Schema Chart (new) | Stable | Stable | - |
42+
| Scatter Chart (new) | Stable | Stable | - |
43+
| Gantt Chart (new) | June 2025 | July 2025 | - |
16744

16845
## Using v8 charts in fluent v9
16946

‎apps/public-docsite-v9/.storybook/manager.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { addons } from '@storybook/manager-api';
1+
import { addons } from 'storybook/manager-api';
22
import fluentStorybookTheme from './theme';
33
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
4-
import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from '@storybook/core-events';
4+
import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from 'storybook/internal/core-events';
55

66
addons.setConfig({
77
enableShortcuts: false,

‎apps/public-docsite-v9/.storybook/theme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { create } from '@storybook/theming';
1+
import { create } from 'storybook/theming';
22

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

‎apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta } from '@storybook/blocks';
1+
import { Meta } from '@storybook/addon-docs/blocks';
22
import { FullscreenLink } from './utils';
33
export const parentPath = 'concepts-developer-accessibility-scenarios';
44

‎apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleComponents.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta } from '@storybook/addon-docs';
1+
import { Meta } from '@storybook/addon-docs/blocks';
22
import { ScenariosListLink } from '../../AccessibilityScenarios/utils';
33

44
<Meta title="Concepts/Developer/Accessibility/Components Overview" />

‎apps/public-docsite-v9/src/Concepts/Accessibility/AccessibleExperiences.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta } from '@storybook/addon-docs';
1+
import { Meta } from '@storybook/addon-docs/blocks';
22

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

0 commit comments

Comments
 (0)