Storybook: Addon-docs: Preview code of imported html component in MDX

[alazurenko]

Dear maintainers,

I've faced with an issue of not able to preview code of imported html component.
It is possible to see the preview of live component but when I expand show code I see the string representation of import, in case below it is html.

config.js

import { configure } from "@storybook/html";
configure(require.context('../src', true, /\.stories\.(js|mdx)$/), module);

button.html

<button class="my-button">Default</button>

button.stories.mdx

import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
import html from "./button.html";

<Meta title="Component|Button" />
<Preview>
  <Story name="default">
    {html}
  </Story>
</Preview>

Contrary, If I'd use html directly in the story I'm getting error directly in live preview:
Expecting an HTML snippet or DOM node from the story: "default" of "Component|Button". but able to see code.

button.stories.mdx

<Meta title="Component|Button" />
<Preview>
  <Story name="default">
    <button class="my-button">Default</button>
  </Story>
</Preview>

Versions

"@storybook/addon-docs": "^5.2.0-beta.39",
"@storybook/html": "^5.2.0-beta.39",

I appreciate your help.
Thanks

[shilman]

@alazurenko please take a look at these examples: https://raw.githubusercontent.com/storybookjs/storybook/next/examples/html-kitchen-sink/stories/addon-docs.stories.mdx

[alazurenko]

@shilman Thanks for the snippet!

In this case I don't have live preview of component and I'm getting this in code preview:

() => {
  const btn = document.createElement('button');
  btn.innerHTML = 'Hello Button';
  btn.addEventListener('click', action('Click'));
  return btn;
}

Whereas I'd like to see plain HTML for given input:

<button>Hello Button</button>

Would be great to display html code via import like in my first example.

[rootical]

Also running into this issue. By importing html I would expect a proper preview :)

[shilman]

@rootical that's not how storybook works, so it's not how docs works either. for now they are one-to-one equivalent

[alazurenko]

What is the correct way to override the source for the component's story in the preview?

For instance:
button.stories.mdx

import button from "./button-standard.html";
import { Preview, Source } from "@storybook/addon-docs/blocks";

<Preview>
   <Story name="standard">
    {button}
   </Story>
    <Source>
       // this is what is going to be shown in the `Show Code` section.
    </Source>
</Preview>

Unfortunately, that way it doesn't work :/

[shilman]

@alazurenko coming soon: https://github.com/storybookjs/storybook/issues/7479

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!