[Feature Request][v7]: Allow rendering custom Markdown just as in v6

[wintercounter]

Is your feature request related to a problem? Please describe

In v7 when I use the Description block in a standalone Docs MDX file, it immediately want to have a CRF file. Until now we could use Description to render custom markdown in without a stories file, now I cannot do that. We were rendering our Readme.md as our Introduction page.

import { Meta, Description } from '@storybook/blocks';
import Readme from '../README.md';

<Meta title="Introduction" />

<Description>{Readme}</Description>

Describe the solution you'd like

A Markdown component maybe? I simple re-export of https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/components/Description.tsx called Markdown inside blocks.

import { Meta, Markdown } from '@storybook/blocks';
import Readme from '../README.md';

<Meta title="Introduction" />

<Markdown>{Readme}</Markdown>

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes

Additional context

No response

[shilman]

@JReinhold WDYT?

[JReinhold]

Importing plain md files into docs is definitely a use case.
It was a deliberate decision to pull that out of the Description block to shrink it's surface are to more core features.

I would think that you could import .md files directly in MDX and just render it as components

import Readme from '../README.md';

<Readme />

What's required to make that work @shilman?

If we can't make that work I would agree with @wintercounter that a <Markdown /> block is valuable.

[wintercounter]

The problem with that would be that not everyone want's to use it as a React component, or they want to to some pre-processing on the string. For example in my case when I'm loading the main Readme.md of the repo, I might want to strip out the licences part.

This would also be a breaking change for those who import it as string already.

[JReinhold]

The problem with that would be that not everyone want's to use it as a React component, or they want to to some pre-processing on the string. For example in my case when I'm loading the main Readme.md of the repo, I might want to strip out the licences part.

So you mean that you import the md file, and then process it, and then pass the processed string to Description?

This would also be a breaking change for those who import it as string already.

The Description component is only deprecating the support of markdown children, not removing it entirely (unless something is wrong though!), so it's not a breaking change until 8.0, giving plenty of time to come up with alternatives.

[wintercounter]

I opened this ticket after trying out v7 beta and passing Markdown directly is Description is not working there anymore, I had to recreate my own component to make it work.

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.36 containing PR #20796 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease