Merge pull request #25609 from storybookjs/docs_remove_stories_mdx

Docs: Removal of CSF in MDX format
storybookjs · Jan 19, 2024 · da24504 · da24504
2 parents be122d8 + 7455664
commit da24504
Show file tree

Hide file tree

Showing 24 changed files with 121 additions and 306 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,22 +61,22 @@ 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 = {
   parameters: { /* ... */ },
 + decorators: [
 +  withThemeByClassName<Renderer>({
 +    themes: {
-+      light: "",
-+      dark: "dark",
++      light: '',
++      dark: 'dark',
 +    },
-+    defaultTheme: "light",
++    defaultTheme: 'light',
 +  }),
 + ]
 };
@@ -92,23 +89,23 @@ 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 = {
   parameters: { /* ... */ },
 + decorators: [
 +  withThemeByDataAttribute<Renderer>({
 +    themes: {
-+      light: "light",
-+      dark: "dark",
++      light: 'light',
++      dark: 'dark',
 +    },
-+    defaultTheme: "light",
-+    attributeName: "data-theme",
++    defaultTheme: 'light',
++    attributeName: 'data-theme',
 +  }),
 + ]
 };