storybookjs/storybook

[Bug]: Global async decorator breaks default background

Open

#21,067 opened on 2023年2月13日

GitHub で見る
 (0 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
addon: backgroundsbughas workaroundhelp wantedsev:S3

説明

Describe the bug

I have a global async decorator (added in preview.tsx) that returns null until an async operation is completed. This async decorator breaks default background, both set globally or overriden on a story.

I made a repro here : https://github.com/Mattgic/repro-sb-backgrounds-issue Background can be changed manually but default background (both set globally and story override) doesn't work.

Working on this repro I realise that the first story "docs" doesn't work. There is probably an issue with making such an async decorator, maybe it's an anti-pattern. If needed I can explain why I need such a thing.

My decorator looks like this :

const AsyncLoader: FC<{ children: ReactNode }> = ({ children }) => {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsReady(true);
    }, 1000);
  });

  // Background override works if we disable this block
  if (!isReady) {
    return null;
  }

  return <>{children}</>;
};

const fontLoaderDecorator = (StoryFn): JSX.Element => {
  return (
    <AsyncLoader>
      <StoryFn />
    </AsyncLoader>
  );
};

Note that if I add this decorator in each of my stories file, everything works fine. Problem only occurs when decorator is added globally, in preview.tsx.

To Reproduce

https://github.com/Mattgic/repro-sb-backgrounds-issue

System

Environment Info:

  System:
    OS: macOS 13.2
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.77
    Firefox: 109.0.1
    Safari: 16.3
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/addon-interactions: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/addon-links: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/blocks: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/node-logger: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/preset-create-react-app: ^4.1.2 => 4.1.2
    @storybook/react: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/react-webpack5: ^7.0.0-beta.46 => 7.0.0-beta.46
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

コントリビューターガイド