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.

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

Stories doc block in mdx broken in 8.1.0 #27143

Closed
shilman opened this issue May 15, 2024 Discussed in #27142 · 1 comment · Fixed by #27144
Closed

Stories doc block in mdx broken in 8.1.0 #27143

shilman opened this issue May 15, 2024 Discussed in #27142 · 1 comment · Fixed by #27144

Comments

@shilman
Copy link
Member

shilman commented May 15, 2024

Discussed in #27142

Originally posted by ryanelian May 15, 2024

Summary

I have stories written like this:

RouterProvider.mdx

import { Canvas, Meta } from '@storybook/blocks';

import { Title, Subtitle, Description, Primary, Controls, Stories, Source } from '@storybook/blocks';

import RouterProviderStories from './RouterProvider.stories';

<Meta of={RouterProviderStories} />

<Title />

<Subtitle />

Redacted

<Stories />

RouterProvider.stories.tsx

import type { Meta } from '@storybook/react';

import { RouterProvider } from 'react-aria-components';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/RouterProvider',
  component: RouterProvider,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
  },
} satisfies Meta<typeof RouterProvider>;

export default meta;

export { RouterProviderStory } from './RouterProvider.story';

Where that story re-exported from another file is a way for us to customize the rendering of the component and display source code appropriate for our use case:

import component from './RouterProvider.story.source';
import sourceCode from './RouterProvider.story.source?raw';

export const RouterProviderStory = {
  name: 'RouterProvider',
  render: component,
  parameters: {
    layout: 'centered',
    storySource: {
      source: sourceCode,
    },
    design: [
      {
        type: 'link',
        url: 'https://react-spectrum.adobe.com/react-aria/routing.html',
      },
    ],
    docs: {
      source: {
        code: sourceCode,
      },
    },
  },
};

The component being rendered and the source code of the component is not relevant for this discussion, and therefore not included to not distract the focus from the core issue.

When updating to version 8.1.0, these MDX <Stories /> block failed to render.

Additional information

For some reason, stories generated by autodocs tags: ['autodocs'], gets story blocks generated correctly.

But stories that are hand-written using MDX do not.

Create a reproduction

No response

@shilman shilman self-assigned this May 15, 2024
@shilman shilman changed the title Storybook <Stories /> doc block in mdx no longer rendering after upgrading to version 8.1.0 Stories doc block in mdx broken in 8.1.0 May 15, 2024
@shilman
Copy link
Member Author

shilman commented May 15, 2024

This is a regression due to #26634. Working on a fix.

As a temporary workaround you can manually update the stories filter function in your .storybook/preview.ts to ignore tags entirely:

// .storybook/preview.ts
export default {
  parameters: {
    docs: {
      stories: {
        filter: (story: PreparedStory) => !story.parameters.docs?.disable,
      }
   }
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

1 participant