Add a way to declare redirects

[TrevorBurnham]

Is your feature request related to a problem? Please describe

I want to move a story from A/MyComponent to B/MyComponent to better organize my storybook. However, this would mean that links to ?path=/docs/a-mycomponent would no longer take users to the MyComponent story. I want to preserve compatibility with those links.

Describe the solution you'd like

I'd like to be able to declare redirects, perhaps as entries in the Storybook config:

module.exports = {
  stories: ['../src/**/*.stories.@(js|mdx)'],
  addons: ['@storybook/addon-essentials'],
  redirects: [
    {from: 'A/MyComponent', to: 'B/MyComponent'}
  ]
}

Describe alternatives you've considered

I tried declaring a story with the same title as the old one that returns a linkTo the new one:

import {linkTo} from '@storybook/addon-links';

export default {
  title: 'A/MyComponent',
  parameters: {
    docs: {
      page: () => {
        linkTo('B/MyComponent')();
        return <div />;
      },
    },
  },
};

This works, but it results in an extra entry being added to the sidebar/search: The sidebar shows both A/MyComponent and B/MyComponent. And apart from the sidebar issue (which could be addressed by #9209), it's a lot of code for a simple redirect.

Are you able to assist to bring the feature to reality?

Yes, I'd be happy to work on this as either a feature in Storybook proper (part of @storybook/router?) or as an addon. (The storybook-redirect addon is made for a different purpose.) I could use some pointers on how the router works, though.

[shilman]

Converting this to a discussion. We’re reserving feature issues for things that are on our short-term roadmap. We’ll check back periodically to see whether this is a good candidate to be added. If this feature would be useful to you, please upvote!

[stuartjnelson]

I think its an awesome suggestion. For anyone looking for a way to do it now (which I feel is a bit hacky but functions). I added in the .storybook/manager-head.html file the following. Be interested what anyone else has been able to get working

<script>
  // Define your array of slugs and their corresponding target URLs
    const redirectMapping = [
    { slug: 'component-slug', targetUrl: 'redirect-target-path' }

  // If find a match then return the matched `targetUrl`
  const matchUrl = (currentUrl) => 
    redirectMapping.reduce((matchedRedirectPath, { slug, targetUrl }) => 
      currentUrl.includes(slug) ? targetUrl : matchedRedirectPath, '');


  navigation.addEventListener("navigate", e => {
    const matchedRedirect = matchUrl(e.destination.url)

    if(matchedRedirect) {
      window.location = `${window.location.origin}/${matchedRedirect}`
    }
  });
</script>

[ryallen-nokia]

You can add additional routes and/or redirects via .storybook/middleware.js:

// .storybook/middleware.js

const expressMiddleWare = (router) => {
  router.get('/favicon.svg', (req, res) => {
    res.redirect('/static/img/my-icon.svg');
  });
};

module.exports = expressMiddleWare;