From a1ff57b411dd6aa869ad33f7e46766e44eb38df4 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Mon, 15 Jan 2024 20:59:31 +0000
Subject: [PATCH 1/3] Docs: Removal of CSF in MDX format

---
 .../themes/docs/getting-started/bootstrap.md  | 37 +++++++-------
 .../themes/docs/getting-started/emotion.md    | 27 +++++-----
 .../docs/getting-started/material-ui.md       | 51 +++++++++----------
 .../docs/getting-started/styled-components.md | 27 +++++-----
 .../themes/docs/getting-started/tailwind.md   | 47 ++++++++---------
 docs/api/main-config-stories.md               |  2 +-
 .../common/component-story-mdx-embed.mdx.mdx  | 11 ----
 ...ponent-story-mdx-reference-storyid.mdx.mdx |  7 ---
 .../common/mdx-canvas-doc-block.mdx.mdx       | 13 -----
 .../common/mdx-changelog-stories.mdx.mdx      | 12 -----
 .../my-component-with-story-content.mdx.mdx   | 12 -----
 ...storybook-automigration-mdx-legacy.npm.mdx |  3 ++
 ...torybook-automigration-mdx-legacy.pnpm.mdx |  3 ++
 ...torybook-automigration-mdx-legacy.yarn.mdx |  3 ++
 ...book-main-register-essentials-addon.js.mdx |  2 +-
 ...book-main-register-essentials-addon.ts.mdx |  2 +-
 .../storybook-migration-mdx-stories.npm.mdx   |  3 ++
 .../storybook-migration-mdx-stories.pnpm.mdx  |  3 ++
 .../storybook-migration-mdx-stories.yarn.mdx  |  3 ++
 docs/snippets/html/checkbox-story.mdx.mdx     | 45 ----------------
 docs/snippets/preact/histogram-story.mdx.mdx  | 27 ----------
 docs/writing-docs/mdx.md                      | 38 +++++++++-----
 22 files changed, 134 insertions(+), 244 deletions(-)
 delete mode 100644 docs/snippets/common/component-story-mdx-embed.mdx.mdx
 delete mode 100644 docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx
 delete mode 100644 docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
 delete mode 100644 docs/snippets/common/mdx-changelog-stories.mdx.mdx
 delete mode 100644 docs/snippets/common/my-component-with-story-content.mdx.mdx
 create mode 100644 docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx
 create mode 100644 docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx
 create mode 100644 docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx
 create mode 100644 docs/snippets/common/storybook-migration-mdx-stories.npm.mdx
 create mode 100644 docs/snippets/common/storybook-migration-mdx-stories.pnpm.mdx
 create mode 100644 docs/snippets/common/storybook-migration-mdx-stories.yarn.mdx
 delete mode 100644 docs/snippets/html/checkbox-story.mdx.mdx
 delete mode 100644 docs/snippets/preact/histogram-story.mdx.mdx

diff --git a/code/addons/themes/docs/getting-started/bootstrap.md b/code/addons/themes/docs/getting-started/bootstrap.md
index a5070d6a3032..fd0a59d6fdce 100644
--- a/code/addons/themes/docs/getting-started/bootstrap.md
+++ b/code/addons/themes/docs/getting-started/bootstrap.md
@@ -4,7 +4,7 @@
 
 <!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Import Bootstrap"](#🥾-import-bootstrap). -->
 
-To get started, **install the package** as a dev dependency
+To get started, **install the package** as a dev dependency.
 
 yarn:
 
@@ -29,14 +29,11 @@ pnpm add -D @storybook/addon-themes
 Now, **include the addon** in your `.storybook/main.js` file.
 
 ```diff
-module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    "@storybook/addon-essentials",
-+   "@storybook/addon-themes"
+    '@storybook/addon-essentials',
++   '@storybook/addon-themes',
   ],
 };
 ```
@@ -46,10 +43,10 @@ module.exports = {
 To give your stories access to Bootstrap's styles and JavaScript, import them into your `.storybook/preview.js` file.
 
 ```diff
-import { Preview } from "@storybook/your-renderer";
+import { Preview } from '@storybook/your-renderer';
 
-+import "bootstrap/dist/css/bootstrap.min.css";
-+import "bootstrap/dist/js/bootstrap.bundle";
++import 'bootstrap/dist/css/bootstrap.min.css';
++import 'bootstrap/dist/js/bootstrap.bundle';
 
 const preview: Preview = {
   parameters: { /* ... */ },
@@ -65,23 +62,23 @@ Bootstrap now supports light and dark color modes out of the box as well as the
 To enable switching between these modes in a click for your stories, use our `withThemeByDataAttribute` decorator by adding the following code to your `.storybook/preview.js` file.
 
 ```diff
--import { Preview } from "@storybook/your-renderer";
-+import { Preview, Renderer } from "@storybook/your-renderer";
-+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+-import { Preview } from '@storybook/your-renderer';
++import { Preview, Renderer } from '@storybook/your-renderer';
++import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
-import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap/dist/js/bootstrap.bundle";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle';
 
 const preview: Preview = {
   parameters: { /* ... */ },
 + decorators: [
 +  withThemeByDataAttribute<Renderer>({
 +    themes: {
-+      light: "light",
-+      dark: "dark",
++      light: 'light',
++      dark: 'dark',
 +    },
-+    defaultTheme: "light",
-+    attributeName: "data-bs-theme",
++    defaultTheme: 'light',
++    attributeName: 'data-bs-theme',
 +  }),
 + ]
 };
diff --git a/code/addons/themes/docs/getting-started/emotion.md b/code/addons/themes/docs/getting-started/emotion.md
index 4d5118d0785d..1671b93b3583 100644
--- a/code/addons/themes/docs/getting-started/emotion.md
+++ b/code/addons/themes/docs/getting-started/emotion.md
@@ -4,7 +4,7 @@
 
 <!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Provide your themes"](#🎨-provide-your-themes). -->
 
-To get started, **install the package** as a dev dependency
+To get started, **install the package** as a dev dependency.
 
 yarn:
 
@@ -26,17 +26,14 @@ pnpm add -D @storybook/addon-themes
 
 ## 🧩 Register Addon
 
-Now, **include the addon** in your `.storybook/main.js` file
+Now, **include the addon** in your `.storybook/main.js` file.
 
 ```diff
-module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-essentials",
-+   "@storybook/addon-themes"
+    '@storybook/addon-essentials',
++   '@storybook/addon-themes',
   ],
 };
 ```
@@ -45,14 +42,14 @@ module.exports = {
 
 Finally, provide your theme(s) and global styles component to your stories with our `withThemeFromJSXProvider` decorator.
 
-Make the following changes to your `.storybook/preview.js`
+Make the following changes to your `.storybook/preview.js`:
 
 ```diff
--import { Preview } from "@storybook/your-renderer";
-+import { Preview, Renderer } from "@storybook/your-renderer";
-+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+-import { Preview } from '@storybook/your-renderer';
++import { Preview, Renderer } from '@storybook/your-renderer';
++import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 +import { ThemeProvider } from '@emotion/react';
-+import { GlobalStyles, lightTheme, darkTheme } from "../src/themes"; // import your custom theme configs
++import { GlobalStyles, lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs
 
 
 const preview: Preview = {
@@ -63,7 +60,7 @@ const preview: Preview = {
 +      light: lightTheme,
 +      dark: darkTheme,
 +    },
-+    defaultTheme: "light",
++    defaultTheme: 'light',
 +    Provider: ThemeProvider,
 +    GlobalStyles: GlobalStyles,
 +  }),
diff --git a/code/addons/themes/docs/getting-started/material-ui.md b/code/addons/themes/docs/getting-started/material-ui.md
index 267705d29340..1b88fae1451a 100644
--- a/code/addons/themes/docs/getting-started/material-ui.md
+++ b/code/addons/themes/docs/getting-started/material-ui.md
@@ -4,7 +4,7 @@
 
 <!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Import fonts"](#🔤-import-fonts). -->
 
-To get started, **install the package** as a dev dependency
+To get started, **install the package** as a dev dependency.
 
 yarn:
 
@@ -26,17 +26,14 @@ pnpm add -D @storybook/addon-themes
 
 ## 🧩 Register Addon
 
-Now, **include the addon** in your `.storybook/main.js` file
+Now, **include the addon** in your `.storybook/main.js` file.
 
 ```diff
-module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-essentials",
-+   "@storybook/addon-themes",
+    '@storybook/addon-essentials',
++   '@storybook/addon-themes',
   ],
 };
 ```
@@ -48,14 +45,14 @@ module.exports = {
 These can be imported into your `.storybook/preview.js` file.
 
 ```diff
-import { Preview } from "@storybook/your-renderer";
+import { Preview } from '@storybook/your-renderer';
 
 +// Load Material UI fonts
-+import "@fontsource/roboto/300.css";
-+import "@fontsource/roboto/400.css";
-+import "@fontsource/roboto/500.css";
-+import "@fontsource/roboto/700.css";
-+import "@fontsource/material-icons";
++import '@fontsource/roboto/300.css';
++import '@fontsource/roboto/400.css';
++import '@fontsource/roboto/500.css';
++import '@fontsource/roboto/700.css';
++import '@fontsource/material-icons';
 
 const preview: Preview = {
   parameters: { /* ... */ },
@@ -68,21 +65,21 @@ export default preview;
 
 While Material UI comes with a default theme that works out of the box. You can create your own theme(s) and provide them to your stories with our `withThemeFromJSXProvider` decorator.
 
-Make the following changes to your `.storybook/preview.js`
+Make the following changes to your `.storybook/preview.js`:
 
 ```diff
--import { Preview } from "@storybook/your-renderer";
-+import { Preview, Renderer } from "@storybook/your-renderer";
-+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
-+import { CssBaseline, ThemeProvider } from "@mui/material";
-+import { lightTheme, darkTheme } from "../src/themes"; // import your custom theme configs
+-import { Preview } from '@storybook/your-renderer';
++import { Preview, Renderer } from '@storybook/your-renderer';
++import { withThemeFromJSXProvider } from '@storybook/addon-themes';
++import { CssBaseline, ThemeProvider } from '@mui/material';
++import { lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs
 
 // Load Roboto fonts
-import "@fontsource/roboto/300.css";
-import "@fontsource/roboto/400.css";
-import "@fontsource/roboto/500.css";
-import "@fontsource/roboto/700.css";
-import "@fontsource/material-icons";
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import '@fontsource/material-icons';
 
 const preview: Preview = {
   parameters: { /* ... */ },
@@ -92,7 +89,7 @@ const preview: Preview = {
 +       light: lightTheme,
 +       dark: darkTheme,
 +     },
-+     defaultTheme: "light",
++     defaultTheme: 'light',
 +     Provider: ThemeProvider,
 +     GlobalStyles: CssBaseline,
 +   }),
diff --git a/code/addons/themes/docs/getting-started/styled-components.md b/code/addons/themes/docs/getting-started/styled-components.md
index 514e95f25a85..e5e31361f121 100644
--- a/code/addons/themes/docs/getting-started/styled-components.md
+++ b/code/addons/themes/docs/getting-started/styled-components.md
@@ -4,7 +4,7 @@
 
 <!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Provide your themes"](#🎨-provide-your-themes). -->
 
-To get started, **install the package** as a dev dependency
+To get started, **install the package** as a dev dependency.
 
 yarn:
 
@@ -26,17 +26,14 @@ pnpm add -D @storybook/addon-themes
 
 ## 🧩 Register Addon
 
-Now, **include the addon** in your `.storybook/main.js` file
+Now, **include the addon** in your `.storybook/main.js` file.
 
 ```diff
-module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-essentials",
-+   "@storybook/addon-themes"
+    '@storybook/addon-essentials',
++   '@storybook/addon-themes',
   ],
 };
 ```
@@ -45,14 +42,14 @@ module.exports = {
 
 Finally, provide your theme(s) and global styles component to your stories with our `withThemeFromJSXProvider` decorator.
 
-Make the following changes to your `.storybook/preview.js`
+Make the following changes to your `.storybook/preview.js`:
 
 ```diff
--import { Preview } from "@storybook/your-renderer";
-+import { Preview, Renderer } from "@storybook/your-renderer";
-+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+-import { Preview } from '@storybook/your-renderer';
++import { Preview, Renderer } from '@storybook/your-renderer';
++import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 +import { ThemeProvider } from 'styled-components';
-+import { GlobalStyles, lightTheme, darkTheme } from "../src/themes"; // import your custom theme configs
++import { GlobalStyles, lightTheme, darkTheme } from '../src/themes'; // Import your custom theme configs
 
 const preview: Preview = {
   parameters: { /* ... */ },
@@ -62,7 +59,7 @@ const preview: Preview = {
 +       light: lightTheme,
 +       dark: darkTheme,
 +     },
-+     defaultTheme: "light",
++     defaultTheme: 'light',
 +     Provider: ThemeProvider,
 +     GlobalStyles: GlobalStyles,
 +   }),
diff --git a/code/addons/themes/docs/getting-started/tailwind.md b/code/addons/themes/docs/getting-started/tailwind.md
index 6156c45757a0..c5475c621550 100644
--- a/code/addons/themes/docs/getting-started/tailwind.md
+++ b/code/addons/themes/docs/getting-started/tailwind.md
@@ -4,7 +4,7 @@
 
 <!-- **NOTE:** As of Storybook 7.2, `@storybook/addon-themes` ships in `@storybook/addon-essentials`. If you're using Storybook >= 7.2, skip to ["Import your css"](#🥾-import-your-css). -->
 
-To get started, **install the package** as a dev dependency
+To get started, **install the package** as a dev dependency.
 
 yarn:
 
@@ -29,14 +29,11 @@ pnpm add -D @storybook/addon-themes
 Now, **include the addon** in your `.storybook/main.js` file.
 
 ```diff
-module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-essentials",
-+   "@storybook/addon-themes"
+    '@storybook/addon-essentials',
++   '@storybook/addon-themes',
   ],
 };
 ```
@@ -46,9 +43,9 @@ module.exports = {
 To give your stories access to Tailwind styles, import them into your `.storybook/preview.js` file.
 
 ```diff
-import { Preview } from "@storybook/your-renderer";
+import { Preview } from '@storybook/your-renderer';
 
-+import "../src/index.css";
++import '../src/index.css';
 
 const preview: Preview = {
   parameters: { /* ... */ },
@@ -64,11 +61,11 @@ Tailwind supports light and dark color modes out of the box. These modes can be
 To enable switching between these modes in a click for your stories, use our `withThemeByClassName` decorator by adding the following code to your `.storybook/preview.js` file.
 
 ```diff
--import { Preview } from "@storybook/your-renderer";
-+import { Preview, Renderer } from "@storybook/your-renderer";
-+import { withThemeByClassName } from "@storybook/addon-themes";
+-import { Preview } from '@storybook/your-renderer';
++import { Preview, Renderer } from '@storybook/your-renderer';
++import { withThemeByClassName } from '@storybook/addon-themes';
 
-import "../src/index.css";
+import '../src/index.css';
 
 
 const preview: Preview = {
@@ -76,10 +73,10 @@ const preview: Preview = {
 + decorators: [
 +  withThemeByClassName<Renderer>({
 +    themes: {
-+      light: "",
-+      dark: "dark",
++      light: '',
++      dark: 'dark',
 +    },
-+    defaultTheme: "light",
++    defaultTheme: 'light',
 +  }),
 + ]
 };
@@ -92,11 +89,11 @@ export default preview;
 If you've configured Tailwind to toggle themes with a data attribute, use our `withThemeByDataAttribute` decorator by adding the following code to your `.storybook/preview.js` file.
 
 ```diff
--import { Preview } from "@storybook/your-renderer";
-+import { Preview, Renderer } from "@storybook/your-renderer";
-+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+-import { Preview } from '@storybook/your-renderer';
++import { Preview, Renderer } from '@storybook/your-renderer';
++import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
-import "../src/index.css";
+import '../src/index.css';
 
 
 const preview: Preview = {
@@ -104,11 +101,11 @@ const preview: Preview = {
 + decorators: [
 +  withThemeByDataAttribute<Renderer>({
 +    themes: {
-+      light: "light",
-+      dark: "dark",
++      light: 'light',
++      dark: 'dark',
 +    },
-+    defaultTheme: "light",
-+    attributeName: "data-theme",
++    defaultTheme: 'light',
++    attributeName: 'data-theme',
 +  }),
 + ]
 };
diff --git a/docs/api/main-config-stories.md b/docs/api/main-config-stories.md
index b59d0cb93bf0..89b7051588ba 100644
--- a/docs/api/main-config-stories.md
+++ b/docs/api/main-config-stories.md
@@ -101,7 +101,7 @@ Where to start looking for story files, relative to the root of your project.
 
 Type: `string`
 
-Default: `'**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))'`
+Default: `'**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'`
 
 A glob, relative to `StoriesSpecifier.directory` (with no leading `./`), that matches the filenames to load.
 
diff --git a/docs/snippets/common/component-story-mdx-embed.mdx.mdx b/docs/snippets/common/component-story-mdx-embed.mdx.mdx
deleted file mode 100644
index a87ba2dda8d1..000000000000
--- a/docs/snippets/common/component-story-mdx-embed.mdx.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Story } from '@storybook/addon-docs';
-
-# Some header
-
-And Markdown here
-
-<Story id="some--id" />
-```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx b/docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx
deleted file mode 100644
index d79599c9cecb..000000000000
--- a/docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Story } from '@storybook/addon-docs';
-
-<Story id="some-component--some-name" />
-```
\ No newline at end of file
diff --git a/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx b/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
deleted file mode 100644
index dbd2297f3da2..000000000000
--- a/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-```md
-<!-- ExampleStory.stories.mdx -->
-
-import { Canvas, Meta } from '@storybook/addon-docs';
-
-import { ExampleComponent} from './ExampleComponent';
-
-<Meta title="SampleComponent" component={ ExampleComponent } />
-
-<Canvas columns={2}  withSource="open" withToolbar>
-  <!-- Your stories go here -->
-</Canvas>
-```
\ No newline at end of file
diff --git a/docs/snippets/common/mdx-changelog-stories.mdx.mdx b/docs/snippets/common/mdx-changelog-stories.mdx.mdx
deleted file mode 100644
index bc0aeb2980a7..000000000000
--- a/docs/snippets/common/mdx-changelog-stories.mdx.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```md
-
-<!-- Changelog.stories.mdx -->
-
-import { Meta } from '@storybook/addon-docs';
-
-import Changelog from '../CHANGELOG.md';
-
-<Meta title="Changelog" />
-
-<Changelog />
-```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-with-story-content.mdx.mdx b/docs/snippets/common/my-component-with-story-content.mdx.mdx
deleted file mode 100644
index 66451f49bbbf..000000000000
--- a/docs/snippets/common/my-component-with-story-content.mdx.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```md
-<!-- MyComponent.stories.mdx -->
-
-import { Canvas } from '@storybook/addon-docs';
-
-import { MyComponent } from './MyComponent';
-
-<Canvas>
-  <h2>Some here</h2>
-  <MyComponent />
-</Canvas>
-```
diff --git a/docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx b/docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx
new file mode 100644
index 000000000000..b54577026015
--- /dev/null
+++ b/docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx
@@ -0,0 +1,3 @@
+```shell
+npx storybook@latest automigrate mdx1to2
+```
diff --git a/docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx b/docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx
new file mode 100644
index 000000000000..4c17825bf1a8
--- /dev/null
+++ b/docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@latest automigrate mdx1to2
+```
diff --git a/docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx b/docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx
new file mode 100644
index 000000000000..277d34f73467
--- /dev/null
+++ b/docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn dlx storybook@latest automigrate mdx1to2
+```
diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
index 6e7e2fca09fe..ee4ecfbd706c 100644
--- a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
@@ -3,7 +3,7 @@
 
 export default {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
 };
 ```
diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx
index d4e42fd31129..88f505b62b7b 100644
--- a/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx
+++ b/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
 };
 
diff --git a/docs/snippets/common/storybook-migration-mdx-stories.npm.mdx b/docs/snippets/common/storybook-migration-mdx-stories.npm.mdx
new file mode 100644
index 000000000000..f2f2c30f2fac
--- /dev/null
+++ b/docs/snippets/common/storybook-migration-mdx-stories.npm.mdx
@@ -0,0 +1,3 @@
+```shell
+npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx”
+```
diff --git a/docs/snippets/common/storybook-migration-mdx-stories.pnpm.mdx b/docs/snippets/common/storybook-migration-mdx-stories.pnpm.mdx
new file mode 100644
index 000000000000..5f9ac39d6e7c
--- /dev/null
+++ b/docs/snippets/common/storybook-migration-mdx-stories.pnpm.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx”
+```
diff --git a/docs/snippets/common/storybook-migration-mdx-stories.yarn.mdx b/docs/snippets/common/storybook-migration-mdx-stories.yarn.mdx
new file mode 100644
index 000000000000..499212af80b1
--- /dev/null
+++ b/docs/snippets/common/storybook-migration-mdx-stories.yarn.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx”
+```
diff --git a/docs/snippets/html/checkbox-story.mdx.mdx b/docs/snippets/html/checkbox-story.mdx.mdx
deleted file mode 100644
index e81434c68848..000000000000
--- a/docs/snippets/html/checkbox-story.mdx.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-```md
-<!-- Checkbox.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-export const Checkbox = (args) => `<label>
-  ${args?.label}
-  <input
-    type="checkbox"
-    ${args?.checked ? 'checked' : ''}
-    ${args?.appearance ? `class="${args.appearance}"` : ''}
-  />
-</label>`;
-
-<Meta title="MDX/Checkbox" component={Checkbox} />
-
-# Checkbox
-
-With `MDX`, we can define a story for `Checkbox` right in the middle of our
-Markdown documentation.
-
-<Canvas>
-  <Story 
-    name="Unchecked"
-    args={{ 
-      label: 'Unchecked',
-    }}
-    render={Checkbox} />
-  <Story 
-    name="Checked"
-    args={{ 
-      label: 'Unchecked', 
-      checked: true,
-    }}
-    render={Checkbox} />
-  <Story 
-    name="Secondary" 
-    args={{
-      label: 'Secondary', 
-      checked: true, 
-      appearance: 'secondary',
-    }}
-    render={Checkbox} />
-</Canvas>
-```
diff --git a/docs/snippets/preact/histogram-story.mdx.mdx b/docs/snippets/preact/histogram-story.mdx.mdx
deleted file mode 100644
index e0843151cc72..000000000000
--- a/docs/snippets/preact/histogram-story.mdx.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```md
-<!-- Histogram.stories.mdx -->
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs/';
-
-import { Histogram } from './Histogram';
-
-<Meta title="Histogram" component={Histogram} />
-
-<!--
- 👇 Render functions are a framework specific feature to allow you control on how the component renders.
-  See https://storybook.js.org/docs/api/csf
-  to learn how to use render functions.
--->
-
-<Canvas>
-  <Story 
-    name="Default"
-    args={{
-      dataType: 'latency',
-      showHistogramLabels: true,
-      histogramAccentColor: '#1EA7FD',
-      label: 'Latency distribution',
-    }}
-    render={(args) => <Histogram {...args} />} />
-</Canvas>
-```
\ No newline at end of file
diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md
index cfe98b9bc4a7..d975995be3ef 100644
--- a/docs/writing-docs/mdx.md
+++ b/docs/writing-docs/mdx.md
@@ -12,7 +12,7 @@ In addition, you can write pure documentation pages in MDX and add them to Story
 
 <Callout variant="info">
 
-Writing stories directly in MDX was deprecated in Storybook 7. Please reference the [previous documentation](../../../release-6-5/docs/writing-docs/mdx.md) for guidance on that feature.
+Writing stories directly in MDX was removed in Storybook 8, and we're no longer supporting it. Please reference the [previous documentation](../../../release-6-5/docs/writing-docs/mdx.md) for guidance on that feature or [migrate](../migration-guide.md) to the new format.
 
 </Callout>
 
@@ -63,12 +63,6 @@ The first thing you'll notice is that the component documentation is divided int
 - **CSF** is great for succinctly defining stories (component examples). If you use TypeScript, it also provides type safety and auto-completion.
 - **MDX** is great for writing structured documentation and composing it with interactive JSX elements.
 
-<Callout variant="info" icon="💡">
-
-If you’re coming from a previous version of Storybook, you might be accustomed to using MDX both for **documentation** and for defining **stories** in the same `.stories.mdx` file. We’ve deprecated this functionality and plan to remove it in a future version of Storybook. We provide [migration](#automigration) scripts to help you onto the new format.
-
-</Callout>
-
 ### Anatomy of MDX
 
 Assuming you’re already familiar with writing stories with [CSF](../writing-stories/index.md), we can dissect the MDX side of things in greater detail.
@@ -210,9 +204,17 @@ The [`remark-gfm`](https://github.com/remarkjs/remark-gfm) package isn't provide
 
 To help you transition to the new version, we've created a migration helper in our CLI. We recommend using it and reaching out using the default communication channels (e.g., [GitHub discussions](https://github.com/storybookjs/storybook/discussions/new?category=help)) for problems you encounter.
 
-```shell
-npx storybook@latest automigrate mdx1to2
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-automigration-mdx-legacy.npm.mdx',
+    'common/storybook-automigration-mdx-legacy.pnpm.mdx',
+    'common/storybook-automigration-mdx-legacy.yarn.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 ## Setup custom documentation
 
@@ -386,7 +388,7 @@ By applying this pattern with the Controls addon, all anchors will be ignored in
 
 ### The MDX documentation doesn't render in my environment
 
-As Storybook relies on MDX 2 to render documentation, some technical limitations may prevent you from migrating to this version. If that's the case, we've prepared a set of instructions to help you transition to this new version.
+As Storybook relies on the latest version of [MDX](https://mdxjs.com/) to render documentation, some technical limitations may prevent you from migrating to this version. If that's the case, we've prepared a set of instructions to help you transition to this new version.
 
 #### Storybook doesn't create documentation for my component stories
 
@@ -394,7 +396,19 @@ If you run into a situation where Storybook is not able to detect and render the
 
 #### The documentation doesn't render using `stories.mdx`
 
-Starting with Storybook 7.0, we've deprecated documenting stories with the `.stories.mdx` file extension. If you're still using the `stories.mdx` extension, we recommend [migrating](#automigration) as soon as possible to avoid any issues, as the majority of APIs and [Doc Blocks](./doc-blocks.md) used by Storybook were overhauled to support MDX 2 and the new MDX compiler (e.g., the [`Meta`](../api/doc-block-meta.md) block).
+If you're still writing stories directly in MDX, with the `stories.mdx` format, we're no longer supporting it and recommend migrating to the new format to avoid issues, as the majority of APIs and [Doc Blocks](./doc-blocks.md) used by Storybook were overhauled to support the latest MDX release (e.g., the [`Meta`](../api/doc-block-meta.md) block). To help you transition to the new format, we provide a migration helper in our CLI to automate the process.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-migration-mdx-stories.npm.mdx',
+    'common/storybook-migration-mdx-stories.pnpm.mdx',
+    'common/storybook-migration-mdx-stories.yarn.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 #### MDX 1 fallback
 

From 05cd1590ba3df6c90bb078bc59ff97de1cde92eb Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Mon, 15 Jan 2024 21:28:17 +0000
Subject: [PATCH 2/3] remove section snippets and fix headings

---
 .../main-config-features-legacy-mdx-1.js.mdx  | 12 -------
 .../main-config-features-legacy-mdx-1.ts.mdx  | 16 ---------
 docs/writing-docs/autodocs.md                 |  2 +-
 docs/writing-docs/build-documentation.md      |  2 +-
 docs/writing-docs/doc-blocks.md               |  2 +-
 docs/writing-docs/mdx.md                      | 33 +------------------
 6 files changed, 4 insertions(+), 63 deletions(-)
 delete mode 100644 docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx
 delete mode 100644 docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx

diff --git a/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx b/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx
deleted file mode 100644
index e961bf074cb3..000000000000
--- a/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```js
-// .storybook/main.js
-
-export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-  framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  features: {
-    legacyMdx1: true, // 👈 Enables MDX v1 support
-  },
-};
-```
diff --git a/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx b/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx
deleted file mode 100644
index c983311700f4..000000000000
--- a/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-```ts
-// .storybook/main.ts
-
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
-
-const config: StorybookConfig = {
-  framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  features: {
-    legacyMdx1: true, // 👈 Enables MDX v1 support
-  },
-};
-
-export default config;
-```
diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
index 4e066de59f64..e902c99eb942 100644
--- a/docs/writing-docs/autodocs.md
+++ b/docs/writing-docs/autodocs.md
@@ -290,7 +290,7 @@ If you're still encountering issues, we recommend reaching out to the community
 
 If you turned off inline rendering for your stories via the [`inline`](../api/doc-block-story.md#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.
 
-#### Learn more about Storybook documentation
+**Learn more about Storybook documentation**
 
 - Autodocs for creating documentation for your stories
 - [MDX](./mdx.md) for customizing your documentation
diff --git a/docs/writing-docs/build-documentation.md b/docs/writing-docs/build-documentation.md
index fffb922a5c9b..aeaec7bf5ae9 100644
--- a/docs/writing-docs/build-documentation.md
+++ b/docs/writing-docs/build-documentation.md
@@ -50,7 +50,7 @@ You can use any hosting provider to deploy your documentation, for instance:
 - [Netlify](https://www.netlify.com/)
 - [S3](https://aws.amazon.com/en/s3/)
 
-#### Learn more about Storybook documentation
+**Learn more about Storybook documentation**
 
 - [Autodocs](./autodocs.md) for creating documentation for your stories
 - [MDX](./mdx.md) for customizing your documentation
diff --git a/docs/writing-docs/doc-blocks.md b/docs/writing-docs/doc-blocks.md
index 12cfaee8317b..d42b5e8749fe 100644
--- a/docs/writing-docs/doc-blocks.md
+++ b/docs/writing-docs/doc-blocks.md
@@ -278,7 +278,7 @@ Storybook's Doc Blocks are highly customizable and helpful building blocks to as
 
 <!-- prettier-ignore-end -->
 
-#### Learn more about Storybook documentation
+**Learn more about Storybook documentation**
 
 - [Autodocs](./autodocs.md) for creating documentation for your stories
 - [MDX](./mdx.md) for customizing your documentation
diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md
index d975995be3ef..a5a4c02ea235 100644
--- a/docs/writing-docs/mdx.md
+++ b/docs/writing-docs/mdx.md
@@ -410,37 +410,6 @@ If you're still writing stories directly in MDX, with the `stories.mdx` format,
 
 <!-- prettier-ignore-end -->
 
-#### MDX 1 fallback
-
-If you're still having issues with MDX documentation, you can enable MDX 1 as a fallback. To do so, you'll need to take some additional steps.
-
-Run the following command to install the required dependency.
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-fallback-mdx-install.yarn.js.mdx',
-    'common/storybook-fallback-mdx-install.npm.js.mdx',
-    'common/storybook-fallback-mdx-install.pnpm.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-Update your Storybook configuration (in `.storybook/main.js|ts`), and provide the `legacyMdx1` feature flag to enable MDX 1 support.
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/main-config-features-legacy-mdx-1.js.mdx',
-    'common/main-config-features-legacy-mdx-1.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
 ### The migration seems flaky and keeps failing
 
 By default, running the [migration command](#automigration) will try and migrate all existing MDX files in your project according to the MDX 2 specification. However, this might not always be possible, and you might run into issues during the migration. To help you troubleshoot those issues, we've prepared some recommendations that might help you.
@@ -473,7 +442,7 @@ If you're still encountering issues, we recommend reaching out to the community
 
 If you turned off inline rendering for your stories via the [`inline`](../api/doc-block-story.md#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.
 
-#### Learn more about Storybook documentation
+**Learn more about Storybook documentation**
 
 - [Autodocs](./autodocs.md) for creating documentation for your stories
 - MDX for customizing your documentation

From 37a0edf48e0d73e6217830805b5796572cda04bb Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 19 Jan 2024 12:35:25 +0000
Subject: [PATCH 3/3] Remove section and update link

---
 docs/writing-docs/mdx.md | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md
index a5a4c02ea235..9af354c5ac63 100644
--- a/docs/writing-docs/mdx.md
+++ b/docs/writing-docs/mdx.md
@@ -12,7 +12,7 @@ In addition, you can write pure documentation pages in MDX and add them to Story
 
 <Callout variant="info">
 
-Writing stories directly in MDX was removed in Storybook 8, and we're no longer supporting it. Please reference the [previous documentation](../../../release-6-5/docs/writing-docs/mdx.md) for guidance on that feature or [migrate](../migration-guide.md) to the new format.
+Writing stories directly in MDX was removed in Storybook 8, and we're no longer supporting it. Please reference the [previous documentation](../../../release-6-5/docs/writing-docs/mdx.md) for guidance on that feature or [migrate](../migration-guide.md#storiesmdx-to-mdxcsf) to the new format.
 
 </Callout>
 
@@ -394,22 +394,6 @@ As Storybook relies on the latest version of [MDX](https://mdxjs.com/) to render
 
 If you run into a situation where Storybook is not able to detect and render the documentation for your component stories, it may be due to a misconfiguration in your Storybook. Check your configuration file (i.e., `.storybook/main.js|ts`) and ensure the `stories` configuration element provides the correct path to your stories location(e.g., `../src/**/*.stories.@(js|jsx|mjs|ts|tsx)`).
 
-#### The documentation doesn't render using `stories.mdx`
-
-If you're still writing stories directly in MDX, with the `stories.mdx` format, we're no longer supporting it and recommend migrating to the new format to avoid issues, as the majority of APIs and [Doc Blocks](./doc-blocks.md) used by Storybook were overhauled to support the latest MDX release (e.g., the [`Meta`](../api/doc-block-meta.md) block). To help you transition to the new format, we provide a migration helper in our CLI to automate the process.
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-migration-mdx-stories.npm.mdx',
-    'common/storybook-migration-mdx-stories.pnpm.mdx',
-    'common/storybook-migration-mdx-stories.yarn.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
 ### The migration seems flaky and keeps failing
 
 By default, running the [migration command](#automigration) will try and migrate all existing MDX files in your project according to the MDX 2 specification. However, this might not always be possible, and you might run into issues during the migration. To help you troubleshoot those issues, we've prepared some recommendations that might help you.