Skip to content
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

Jump to bottom

Docs: Removal of CSF in MDX format #25609

Merged
merged 10 commits into from
Jan 19, 2024
Merged

Docs: Removal of CSF in MDX format #25609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a1ff57b
Docs: Removal of CSF in MDX format
jonniebigodes Jan 15, 2024
05cd159
remove section snippets and fix headings
jonniebigodes Jan 15, 2024
a6f140d
Merge branch 'next' into docs_remove_stories_mdx
jonniebigodes Jan 15, 2024
0e67c61
Merge branch 'next' into docs_remove_stories_mdx
jonniebigodes Jan 16, 2024
3bdcf69
Merge branch 'next' into docs_remove_stories_mdx
jonniebigodes Jan 16, 2024
e92c20e
Merge branch 'next' into docs_remove_stories_mdx
jonniebigodes Jan 16, 2024
01ed115
Merge branch 'next' into docs_remove_stories_mdx
jonniebigodes Jan 17, 2024
8720e89
Merge branch 'next' into docs_remove_stories_mdx
jonniebigodes Jan 17, 2024
37a0edf
Remove section and update link
jonniebigodes Jan 19, 2024
7455664
Merge branch 'next' into docs_remove_stories_mdx
jonniebigodes Jan 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 17 additions & 20 deletions code/addons/themes/docs/getting-started/bootstrap.md
View file
Open in desktop
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). -->
Copy link
Member

Choose a reason for hiding this comment

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

@jonniebigodes if this is merged into next, shouldn't the note be removed as this all now refers to SB8?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good call on this @yannbf, I'll check it and update this.


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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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