profile
viewpoint

Ask questionsAddon-docs: Preview code of imported html component in MDX

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

storybookjs/storybook

Answer questions 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

useful!
source:https://uonfu.com/
Github User Rank List