Storybook MDX file does not display source

[konsalex]

Hey folks,

I am trying to write a Story with MDX format and for some reason I get No code available

Any clue why this is happening.

The story looks like this:

import { useCallback, useRef, useState } from 'react';
import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Example } from './story';
import { useRenderCount } from '@neo4j-ndl/react/src/_common/hooks';
import { Button, TextInput } from '@neo4j-ndl/react/src';

<Meta title="Hooks/useRenderCount" />

# useRenderCount

This is a test

<Canvas>
  <Story name="Overview">
    {() => {
      const renderCount = useRenderCount();
      const [state, setState] = useState(0);
      return (
        <div className="n-flex n-flex-col n-gap-2 n-max-w-max">
          <Button onClick={() => setState(state + 1)}>Update state</Button>
          <TextInput value={renderCount} />
        </div>
      );
    }}
  </Story>
</Canvas>

And I followed the way Monday.com writes their MDX stories which seems to work as expected: https://github.com/mondaycom/monday-ui-react-core/blob/master/src/hooks/useClickableProps/__stories__/useClickableProps.stories.mdx

[ShaunEvening]

Hi @konsalex 👋

Writing stories in MDX has been deprecated in Storybook 7. Do you have the same issue if you write your story in the CSF format instead?

[ShaunEvening]

No worries we can do that!

You can write a CSF file for stories that aren't for a component 😁 Then you can import those stories and render them in your MDX docs.

Here's a StackBlitz example that I put together for you
https://stackblitz.com/edit/react-hook-story?file=src%2Fhooks%2FuseRenderCount%2FuseRenderCount.mdx

[konsalex]

@integrayshaun thanks for the taking the time 🙏 Really appreciate it.

The example still not working, as you can see the Show Code tab is still a {} 🤔

[ShaunEvening]

Right! Sorry about that.

So in this case if you want to show the code from the render function you will need to add it manually. When you put the render method into a component you'll get the usage of the component without any props like so:

To instead show a code snippet that demonstrate the use of your hook, you can pass the code to the Canvas' source prop. I have updated the StackBlitz to show you how.

[konsalex]

@integrayshaun thanks for the guidance. Ended up creating a pattern which is more maintainable as the code will live only in one place, and not manually pasted as a string.

story/
├── StoryBlock // The actual code that will run the hook example
├── hook.stories.tsx // The CSF compatible file
└── hook.mdx // The MDX doc of the hook, utilising Vite's `?raw` import flag

Example for future reference from folks:
https://stackblitz.com/edit/react-hook-story-cigb35?file=src%2Fhooks%2FuseRenderCount%2FStoryCode.tsx

[joevaugh4n]

Brilliant, great work @konsalex (and thanks for sharing your solution too)!

[konsalex]

Thanks @joevaugh4n .

Is there any way with current Storybook's API to remove the story for the Sidebar, so only the Docs will be rendered? 🤔

In our case have only the useRenderCount doc page and not the two stories alongside it:

[konsalex]

Hacked around a bit more:
https://stackblitz.com/edit/react-hook-story-cigb35?file=.storybook%2Fmain.ts

That's the solution I found to remove the extra story, a bit hacky maybe?

So I use the .mdx file as a template, and then I export a single story called Docs which is then skipped due to name conflict and the proper doc is rendered.

import mdx from "./useRenderCount.mdx";

const meta = {
  title: 'Hooks/useRenderCount',
  render: StoryBlock,
  parameters: {
    docs: {
      page: mdx,
    },
  },
} satisfies Meta;

export default meta;

export const Docs = {}

But seems to work.

If you know some any better way please enlighten me

[dpavloff]

Hey @konsalex!

For your interest, passing config.docs.docsMode: true in main.js config will tell storybook to render only docs pages (either .mdx or stories. files)

const config: StorybookConfig = {
  ...
  
  docs: {
      autodocs: true,
      docsMode: true
    }
}