Doist / reactist

Open source React components made with ❀️ by Doist
http://doist.github.io/reactist
MIT License
247 stars 21 forks source link

chore: Fix links to Reactist components in storybook stories using LinkTo #795

Closed engfragui closed 1 year ago

engfragui commented 1 year ago

Short description

Follow-up to https://github.com/Doist/reactist/pull/794 where I tried to fix a couple of broken links in our storybook stories.

While browsing a couple of Reactist storybook stories, I've noticed that there are some broken links that don't include the path "reactist":

https://github.com/Doist/reactist/assets/1509326/26b1d8cf-3c44-41c7-97aa-b26bcb4fa96e

It turns out I didn't actually fix anything at all as the links are still missing the appropriate /reactist path which it seems not to be included in window.location.origin πŸ˜…

In this PR, I initially tried to address this by concatenating window.location.origin with window.location.pathname to (hopefully) get the correct Reactist URL path. However, that doesn't work either, because pathname will include /iframe.html as well (since the link is inside an iframe) so what I'm doing in this PR doesn't work either. To be fair, even if the concatenation had worked, it would not have looked great in our code πŸ˜…

I changed my approach to actually use the official Reactist add-on that "should" be used to link from a story to another story: https://storybook.js.org/addons/@storybook/addon-links (https://github.com/storybookjs/storybook/issues/8618) and hopefully that will do the trick (for real, this time).

This seems to be working well when testing on the storybook dev version deployed via Chromatic (linked in the builds below)

https://github.com/Doist/reactist/assets/1509326/018d7b54-7431-4f70-9779-c8fc279bc2c0

...so I have hopes it will work when it gets deployed to https://doist.github.io/reactist/

PR Checklist

Versioning

Bumped patch. This is just a doc change.

engfragui commented 1 year ago

I'm happy to confirm that this works as expected after being deployed to production πŸŽ‰

https://github.com/Doist/reactist/assets/1509326/35ff4c82-997d-4136-94a3-d57bd5966233