Build in version switcher

[Thoemmy]

Is your feature request related to a problem? Please describe.

The current problem is that it is difficult for me to show the developers in storybook which versions of this UI library are available.

Describe the solution you'd like

It would be greate if there is a selector next to the brand or underneath where you can switch the versions

Describe alternatives you've considered

Describing it in a mdx file which is not that intuitive

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

no

Additional context

Would be a nice too have feature i guess.
Should also be simple to implement.

[
    {
        "name": "v2.1 (stable)",
        "version": "2.1",
        "url": "https://v2.storybook.xyz"
    },
    {
        "name": "v1",
        "version": "1.0",
        "url": "https://v1.storybook.xyz"
    }
]

P.S. i searched for a familiar request but did not found one, so please if you have one in mind we can close this discussion or feature request

[Thoemmy]

As reference some documentation sites of different frameworks etc.

[kroeder]

Giving more examples of large documentations of frameworks and libraries that all offer this in their documentation

Storybook: left navigation bar

PrimeNG: top-right

Tailwind: top-left

React router: top-left

Bootstrap: top-right

React does it differently: landing-page content

[kroeder]

There was an API Addon_TypesEnum.experimental_SIDEBAR_TOP in v8 that enabled us (Storybook in my company) to create our own version-selector dropdown but it got removed in v9.

With a bit of back and forth between @JReinhold and me in discord, he convinced me the removal of that API is the correct decision for now

Maintaining that specific API isn't just about the API level, but especially on the design level, as now we would have to account for anything the user puts in that "slot" whenever we re-design anything in there.

That said, there are plenty of examples of other documentations that offer a version switcher.

My personal take

Who needs a version selector in Storybook?

Probably not apps but definitely libraries that are consumed by many apps and need to support multiple major and minor versions (same as e.g. Tailwind, Bootstrap, ...)

Proposal

Storybook should offer no slot where addon creators can do whatever they want (for the above mentioned reason) but instead an API where the core team can freely decide where to put such a version switcher in the future.

A list of versions can be either provided locally or requested asynchronously - both should work IMO

I'm not sure if this is the best place but it could be another field in main.ts and I would follow the suggestion by @Thoemmy with the object structure

// main.ts
const config = {
  framework: {
    name: '@storybook/...'
  },
  versionAPI: async () => { // ignore the naming
    const versions = await fetch("https://...");
    return versions.map(version => ({
      name: "v" + version.number, // used to visually show (stable) or (next) alongside the version
      version: version.number, // used to sort it correctly
      url: version.url, // points to another deployed storybook instance
    });
  }
}

Alternatively, a versions.ts to manage this in a separate file

const versions: VersionFn = async () => {
  const versions = await fetch("https://...");
  return versions.map(version => ({
    name: "v" + version.number,
    version: version.number,
    url: version.url,
  });
};

export default versions;

[kroeder]

API wise, it would probably make sense to wrap the function in an object to allow custom sorting etc.

See post of @JReinhold - I was confused 😄

const versions: StorybookVersions {
  customSort: (a, b) => { /* ... */ },
  versions: () => {
    const result = await fetch("https://...");
    return result.map(version => ({
      name: "v" + version.number,
      version: version.number,
      url: version.url,
    })
  }
};

export default versions;

[JReinhold]

Couldn't you just sort the array you return from versions? Instead of having a separate sorting API?

// main.ts
const config = {
  framework: {
    name: '@storybook/...'
  },
  versionAPI: async () => { // ignore the naming
    const versions = await fetch("https://...");
    return versions.map(version => ({
      name: "v" + version.number, // used to visually show (stable) or (next) alongside the version
      url: version.url, // points to another deployed storybook instance
    }).sort((a, b) => {...})
  }
}

[kroeder]

🤦 true, nevermind