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

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

[shilman]

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

[persefoniai]

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

mdx

import * as stories from "./mix.stories.js";

<Meta title="a/mix" parameters={{ docs: { source: { code: stories.jsxCode } } }} />

# Button

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

story

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.