Skip to content

Commit

Permalink
Merge pull request #25609 from storybookjs/docs_remove_stories_mdx
Browse files Browse the repository at this point in the history
Docs: Removal of CSF in MDX format
  • Loading branch information
jonniebigodes authored Jan 19, 2024
2 parents be122d8 + 7455664 commit da24504
Show file tree
Hide file tree
Showing 24 changed files with 121 additions and 306 deletions.
37 changes: 17 additions & 20 deletions code/addons/themes/docs/getting-started/bootstrap.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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',
],
};
```
Expand All @@ -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: { /* ... */ },
Expand All @@ -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',
+ }),
+ ]
};
Expand Down
27 changes: 12 additions & 15 deletions code/addons/themes/docs/getting-started/emotion.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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',
],
};
```
Expand All @@ -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 = {
Expand All @@ -63,7 +60,7 @@ const preview: Preview = {
+ light: lightTheme,
+ dark: darkTheme,
+ },
+ defaultTheme: "light",
+ defaultTheme: 'light',
+ Provider: ThemeProvider,
+ GlobalStyles: GlobalStyles,
+ }),
Expand Down
51 changes: 24 additions & 27 deletions code/addons/themes/docs/getting-started/material-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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',
],
};
```
Expand All @@ -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: { /* ... */ },
Expand All @@ -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: { /* ... */ },
Expand All @@ -92,7 +89,7 @@ const preview: Preview = {
+ light: lightTheme,
+ dark: darkTheme,
+ },
+ defaultTheme: "light",
+ defaultTheme: 'light',
+ Provider: ThemeProvider,
+ GlobalStyles: CssBaseline,
+ }),
Expand Down
27 changes: 12 additions & 15 deletions code/addons/themes/docs/getting-started/styled-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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',
],
};
```
Expand All @@ -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: { /* ... */ },
Expand All @@ -62,7 +59,7 @@ const preview: Preview = {
+ light: lightTheme,
+ dark: darkTheme,
+ },
+ defaultTheme: "light",
+ defaultTheme: 'light',
+ Provider: ThemeProvider,
+ GlobalStyles: GlobalStyles,
+ }),
Expand Down
47 changes: 22 additions & 25 deletions code/addons/themes/docs/getting-started/tailwind.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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',
],
};
```
Expand All @@ -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: { /* ... */ },
Expand All @@ -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',
+ }),
+ ]
};
Expand All @@ -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',
+ }),
+ ]
};
Expand Down
Loading

0 comments on commit da24504

Please sign in to comment.