Storybook: Code preview with CSF Stories with MDX Docs shows only imported function

[aizerin]

Describe the bug
When creating story according to this recipe https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs

To Reproduce
Steps to reproduce the behaviour:

1. Create story by recipe mentioned above
2. Start storybook
3. See the docs tabs

Expected behaviour
Code will be available from real story

Screenshots

Code snippets

import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
import * as stories from "./mix.stories.js";

<Meta title="a/mix" />

# Button

<Preview>
  <Story name="basic">{stories.basic()}</Story>
</Preview>

import React from "react";
import { Button } from "@storybook/react/demo";

export default {
  title: "a/mix",
  includeStories: []
};

export const basic = () => <Button>Hello Button</Button>;

System:

  System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 70.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: ^5.3.7 => 5.3.7
    @storybook/addon-docs: ^5.3.7 => 5.3.7
    @storybook/addon-links: ^5.3.7 => 5.3.7
    @storybook/addons: ^5.3.7 => 5.3.7
    @storybook/react: ^5.3.7 => 5.3.7

[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!

[lpoulter]

I'm seeing the same had raised an issue will close that. Would be good to get some clarification on this.

[shilman]

Hope to spend time on this during this 6.0 cycle. This is a dealbreaker for the currently recommended CSF/MDX mix.

[persefoniai]

@aizerin we hit this same issue which lead us to this issue posting. Wanted to share one potential route for addressing it. In the mdx file's Meta tag you can add:

parameters={{ docs: { source: { code: stories.jsxCode, } } }}

along with a corresponding export within the story file that contains the desired source as the jsxCode export. Bit of a bandaid approach, but may be good enough until 6.0 may address it. Currently tested and working in 6.0.0-beta.6.

[lpoulter]

Can you show an example of "along with a corresponding export within the story file that contains the desired source as the jsxCode export."

[persefoniai]

@lpoulter Sure. Here you go using the OP examples:

mdx

```import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
import * as stories from "./mix.stories.js";

Button

{stories.basic()}

**story**

```import React from "react";
import { Button } from "@storybook/react/demo";

export default {
  title: "a/mix",
  includeStories: []
};

export const basic = () => <Button>Hello Button</Button>;

export const jsxCode = `<Button>Hello Button</Button>;`

If you are using the external Source block you can also pipe the source code in without the Meta param approach:

<Source code={stories.jsxCode} />

which could potentially let you get into more complicated combinations depending upon what you are doing with your mdx layout. Or the last option we found was you can pipe it to the Story directly for more control if you have multiple Preview blocks:

<Preview>
     <Story name="basic" parameters={{docs: { source: { code: stories.jsxCode}}}}>...

HTH.

[shilman]

Thanks gang. Still hoping to get this into 6.0.

[NaviMarella]

Thanks for above discussion.

In a typescript project with mdx/csf docs, I observed show code button shows compiled code in storybook.

<Story name="Story imported from typescript file" parameters={{ docs: { source: { code: stories.usecase1 } } }}>{stories.usecase1()}</Story>

Any suggestions on how to show non transpiled code ??

[shilman]

Closing as dupe to #8444 which I'm trying to work on this week

[shilman]

Fix here https://github.com/storybookjs/storybook/pull/11752 available in 6.0.0-rc.21.