Skip to content

Commit

Permalink
[storybook] Fixes transitions between story
Browse files Browse the repository at this point in the history
The custom decorator broke with the latest 8.3.* StoryBook migration.
This new hack solves the issue.
  • Loading branch information
jacomyal committed Sep 25, 2024
1 parent 8f825b6 commit 17219a5
Showing 1 changed file with 7 additions and 3 deletions.
10 changes: 7 additions & 3 deletions packages/storybook/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Preview } from "@storybook/html";

let _shouldReload = false;
const forceReloadDecorator: Preview["decorators"] = (storyFn, context) => {
if (context.globals.shouldReload) {
if (_shouldReload) {
// Change search params of the iframe
const searchParams = new URLSearchParams(window.parent.location.search);
searchParams.set(
Expand All @@ -18,10 +19,13 @@ const forceReloadDecorator: Preview["decorators"] = (storyFn, context) => {
// The reload is fired, but the story renderer is already started.
// To avoid blink effect and console error, we return the template inside a full
// invisible div
return `<div style="height:100%;width:100%;visibility:hidden">${storyFn()}</div>`;
return `<div style="height:100%;width:100%;">
${storyFn()}
<script>document.body.style.visibility = 'hidden';</script>
</div>`;
}

context.globals.shouldReload = true;
_shouldReload = true;
return storyFn();
};

Expand Down

0 comments on commit 17219a5

Please sign in to comment.