[addon-docs] Link to another story

[thany]

Is your feature request related to a problem? Please describe.
Well of course. I need to link to another story to sort of build a "See also" or "For more information, see..." section.

Describe the solution you'd like
I would like to be able to just link to another story by writing a MD link, something like:

See [this cool component](Components|General/CoolComponent) for more information

Storybook would recognize that this is not a regular url, but a link to a story, and transform the link in such a way that it will navigate to that story, instead of trying to open the url as-is.

Describe alternatives you've considered
The best workaround at the moment would be to go to that story using the existing navigation, recording what the url is, and pasting that into the MD link. It doesn't feel like that's the most stable way to go, because I don't think those url's a completely chained to the components that are on them.

Are you able to assist bring the feature to reality?
Not sure I can, sorry.

Additional context
It might be worth noting that the documentation of MDX stories is a bit "all over the place". I feel there isn't a single source of truth when it comes to MDX. All I can find is a couple of use-cases (although very common ones) and their solutions, but not an exhaustive reference. Perhaps working on that may reveal that the feature being requested here, is already possible in some other way, that I have no way of being aware of.

[shilman]

This sounds reasonable. I'll try to take a pass at it while addressing these related issues #7799 #8184

[robbeman]

You could use addon-links for this. I just checked and it is possible to use the <LinkTo> component in mdx.

Update: This apparently doesn't work for page anchors, so you might want to look at the other thread if you want to do in page links.

[grgur]

I just used @robbeman's suggestion (thanks!) to navigate to another page with the <LinkTo> component. The router maintains scroll position (doesn't scroll back to the top) but using anchor links actually worked. Here's what I did:

import LinkTo from '@storybook/addon-links/react';

Please read the section on <LinkTo kind="writing-docs--page#writing-documentation-stories">Writing Documentation Stories</LinkTo>

Notes:

• writing-docs - the ID of the other page
• Appending --page was needed to navigate to another Docs page, although I don't like that it's hacky
• #writing-documentation-stories is the anchor to the h1 tag at the top of another page

I hope that helps.

[Bamblehorse]

LinkTo works nicely 🙂 did some more digging and found a new PR

Seems like since this issue was created you can potentially more reliably use a normal md link like this: [link to another story](/?path=/docs/addons-docs-docs-only--page#bottom)

https://github.com/storybookjs/storybook/pull/9051/files#diff-809d0afec1adb3c90fb654474a0bf015

[AndrewOttavianoAbb]

Don't know if this is the right place for this, but can you link to the "Docs" .mdx page for a give story. For example, if the user is reading a document for one story and it needs to refer to the document for another story, can you create a link for that?

I tried using the LinkTo component but no go. Here's what I've tried so far:

// This is what works for me right now to link to the story but it just goes to the story
<LinkTo kind="core-theme" story="color-palette">blah blah</LinkTo>

// I tried these to link to the docs page but no go
<LinkTo kind="docs/core-theme" story="color-palette">blah blah</LinkTo>
<LinkTo kind="/docs/core-theme" story="color-palette">blah blah</LinkTo>
<LinkTo kind="docs/core-theme">blah blah</LinkTo> // This just goes to /docs/story/core-theme first story :(

[ghost]

description: {
  component:
    'Description with a [link](/?path=/docs/another-page--page) to another page.'
}

This suggestion from @Bamblehorse will lead to http://localhost:6006/iframe.html?path=/?path=/docs/another-page--page, eg. a broken page.

[dreyks]

@mystrdat this might be a bug, but the immediate workaround is [link](/docs/another-page--page)

[ghost]

@mystrdat this might be a bug, but the immediate workaround is [link](/docs/another-page--page)

This seems to result in the same behavior, somehow Storybook actually modifies the url as such
[link](/docs/another-page--default) becomes href="?path=/docs/another-page--default"
and it leads to http://localhost:6006/iframe.html?path=/docs/another-page--default

[joakimbeng]

@mystrdat this might be a bug, but the immediate workaround is [link](/docs/another-page--page)

This seems to result in the same behavior, somehow Storybook actually modifies the url as such [link](/docs/another-page--default) becomes href="?path=/docs/another-page--default" and it leads to http://localhost:6006/iframe.html?path=/docs/another-page--default

Noticed the same issue myself. I tried writing <a href="/docs/another-page--default">Link</a> manually but it's the same thing there, Storybook prepends /iframe.html?path= to the href in that case as well.

[redjov]

@joakimbeng Add target='_self' to the anchor element and storybook will not prepend iframe.html

[mseyfayi]

For preventing iframe.html be added to the start of the URL, this trick can be used:

<a href="../?path=/docs/button--primary">Button</a>

Adding ../ at the start of the URL can fix this issue for now.

[dimitrieh]

I have created a test for internal linking for storybook 7.0 using beta 48 as this issue seems to persist there.

• Test Repo: https://github.com/dimitrieh/Test-Storybook-7-Internal-Linking
• Live URL: https://dimitrieh.github.io/Test-Storybook-7-Internal-Linking (behaved differently than the one locally spun up in dev mode)
• Loom video: https://www.loom.com/share/cc3a9260fe4a4adebc66e0cb63557323

Other related issues:

• Linking Docs to MDX removes the Storybook Viewer. #17921
• Addon-Docs: MDX links to internal docs cannot be opened in new tab #9502

cc: @yannbf

[mel-miller]

Adding ../ at the start of the URL can fix this issue for now.

Thanks! And FYI, this also works with Markdown linking syntax like so:

[Icon component](../?path=/docs/components-icon--icon)