Almost working: allow/document how to use this when root storybook hosted at path

[patcon]

This is such a cool addon, and great for avoiding the limits of Chromatic and just hosting on github pages! Thank you, thank you, thank you 🙌

Just one issue: the picker links don't deal with storybooks hosted at username.github.io/, but not username.github.io/repo/

• Example: https://civictechto.github.io/polis-storybook/?path=/story/client-admin-header--default
  • picker for PR-7 links to the nonfunctional https://civictechto.github.io/PR-7/?path=/story/client-admin-header--default
  • instead of the functional https://civictechto.github.io/polis-storybook/PR-7/?path=/story/client-admin-header--default

I'm assuming this happens during the build, because the label "PR-7" comes from github itself. Will scope around a bit more, but I don't think there's a setting for this.

If it is, I'm happy to improve the document and submit a PR :)

Thanks for any advice

[patcon]

In case helpful, here's the PR where I made most of the changes (tho I did a few on mainline after merging): CivicTechTO/polis-storybook#8

[utarwyn]

Hello @patcon! Thank you for using the addon and for the kind words, much appreciated 🙏

This is not well documented but you can provide a custom hostname and base URL to the addon from your Storybook configuration in the preview.js file. ℹ️ Note that this only works if the value is static.

Here is an exemple based on your configuration:

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    branches: {
      hostname: "civictechto.github.io/polis-storybook",
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

But I will check if we can use a Storybook variable to compute this value.

[patcon]

Ah, thanks a million! Spent a little while exploring, but wasn't having any luck. But I tried your suggestion, and it mostly works -- so your message is perfectly timed to leave me with a small feeling of success at the end of the day :)

It now mostly works, but even when I copy that param config change to all branches, I can get to the branch instances (from main/master), but not back to the main default branch once there. See below -- it links to root path "/"

Screen.Recording.2024-10-07.at.7.17.41.PM.mov

I'll see if I can reason through what the issue is, but thanks for your help already 🙏

[patcon]

Ah, I think the issue is here, where the link target === default: [EDIT: nevermind! see below]

storybook-branch-switcher/src/util/location.ts

Line 18 in 3294713

path = "/";

[patcon]

Ah wow. OK, I lost a few hours on this, but when working locally: I didn't realize that it was getting a specific commit from github, and checking that out, instead of the branch head. Might want to make it more clear in the output what commit is being checked out. I was committing my troubleshooting changes to all branches, but wasn't pushing it beyond local.

If this seems like an understandable point of confusion, I can imagine 2 possible mitigations:

• improve output to make it really loud when local branch has more commits than remote, or
• add a "local-only" flag to simply check out a branch locally (which should make local debugging easier)

Would either of these be acceptable to you as PRs?

---

PS, it also seems to be the case that the above hack you suggested only works when default_root = false. Not sure if that's expected. Otherwise, even if a branch has default_root=false, it still send the default branch to example.com/subpath/ instead of example.com/subpath/main. In case that test case is helpful later :)

Thanks again

[patcon]

Wondering if maybe a local or mock provider could help people when they're doing infra work like this, to work more cleanly without pushing to github/gitlab etc.

{
// ...
  "provider": {
    "type": "local",
    // See below for thoughts on key name.
    "featureBranches": {
      "PR-7": "7-some-branch",
      "PR-9": "9-some-other-branch",
      "random-label": "literally-whatever-commit-ish",
    }
  }
}

featureBranches (not branches) bc we want to distinguish from branches including default "main" branch. we're just faking PRs/MRs. Maybe there's a more specific term the project could use for this entity. subBranches? childBranches? subStorybooks?

Happy to spin this out into its own issue, if you think it has merit :)

[patcon]

Another edge-case:
Going from one PR branch to another doubles up the path. (There is no issue if one always goes back to default root first)
https://civictechto.github.io/polis-storybook/PR-7/?path=/docs/overview--docs

Screen.Recording.2024-10-08.at.3.11.30.PM.mov