storybook: [Bug]: Storybook 7.x storysource addon doesn't show whole story code

is there any update? it seems that there is a lot of issues with the show code , source code mechanism

thanks for response guys, We’ve been able to make it work with this inside `.storybook/preview

export const parameters = {
  docs: { source: { type: 'code' } },
...

I am also seeing this issue on v7.5. The information outlined in “Displaying full source” on the landing page does not appear to make a difference.

@valentinpalkovic, The end goal isn’t to see other stories’ source code, but to see the full component code of the corresponding story that is selected. Right now, we’re just seeing the args.

Screenshot of the current result:

Compared to the desired (screenshot pulled from the Storysource landing page gif)

Also having this problem.

It’s a monorepo using @storybook/addon-essentials, I have a root configuration which is referenced in the leaf packages for individual component projects. When I was migrating to SB7, some of the stories would have this problem. Others would render as expected. It wasn’t immediately clear to me what the difference between the projects was; they are have the same or share configurations between them with varying degrees of upkeep.

Checking today, now they are all having this problem. I don’t know what has caused this update, since there’s different kinds of changes happening in the repo all the time.

Referring to the documentation as @SalahAdDin suggested, there is a mention in the @storybook/addon-storysource docs with the following message:

Storybook 6.0 introduced an unintentional change to source-loader, in which only the source of the selected story is shown in the addon. To restore the old behavior, pass theinjectStoryParameters: false option.

The examples there are confusing to me. It suggests that @storybook/addon-docs has an option called sourceLoaderOptions. Visiting the docs for that plugin (which is inside of @storybook/addon-essentials) has no mention of that option; only csfPluginOptions and mdxPluginOptions.

So if one was to update the behavior through options within @storybook/addon-essentials, what is the correct configuration?

docs: { source: { type: ‘code’ } },

It does not work for us.

Could anyone find a workaround to this issue? 😦

I also encountered the same problem while displaying a source code by using storysource. Has anyone got the solutions of it ??

@oeem1011 I also ran in into a similar issue when trying out a few tactics. My initial thought was to simply convert the exported component into a string:

import { Button } from './Button';

const meta = {
  title: 'Example/Button',
  component: Button,
  parameters: {
    layout: 'centered',
    storySource: {
      source: `${Button}`
    }
  }, //...continued

But like you said it coverts the code. It might work for some crude use-cases, but isn’t a great option.

Since upgrading to Storybook v8 I can only see the current story source, and there is no way to reveal the full story source.

This issue appears to be fixed in 8.x but it would be nice if a fix is made available for those who can’t upgrade yet 🙏

I found that there is a storySource parameter you can add to override what the rendered story code can be.

For example:

Button.stories.ts

const meta = {
  title: 'Example/Button',
  component: Button,
  parameters: {
    layout: 'centered',
    storySource: {
      source: 'foo' //Put your code here
    }
  },

Based on how the addon works, it looks like it tries to load the loaderSource first, then defaults to an object of the args:

/core/addons/storysource/src/StoryPanel.tsx

export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
  const story = api.getCurrentStoryData();
  const selectedStoryRef = React.useRef<HTMLDivElement>(null);
  //The param I'm passing in the above example
  const { source: loaderSource, locationsMap }: SourceParams = useParameter('storySource', {});
  const { source: { originalSource: docsSource } = {} }: DocsParams = useParameter('docs', {});
  // prefer to use the source from source-loader, but fallback to
  // source provided by csf-plugin for vite usage
  const source = loaderSource || docsSource || 'loading source...';

Seeing the same issue:

• @storybook/addon-storysource: “^7.6.7”
• @storybook/web-components: “7.6.4”

Output shows the following:

{
  args: {
    ['icon-group']: 'general'
  }
}

versus the desired:

<component-name icon-group="general"></component-name>

The code preview in the doc view works just fine, which is ultimately what I want in the addon view that updates with the controls.