storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.08k stars 9.25k forks source link

[Bug]: Primary block shares state (from @storybook/preview-api useState hook) with the first story on the Docs page #29183

Open merri-dei opened 5 days ago

merri-dei commented 5 days ago

Describe the bug

I have a modal component I'm documenting via Storybook that is shown via a click of a button. I used the useState hook of @storybook/preview-api to set the open state of the modal when the button is clicked. It's working in that the modal is shown, however, the state appears to be shared between the primary block and the first story so two modals are actually rendered when any of the two canvases' button is clicked. The first modal is from the primary block, and the second is from the first story, where the second modal overlaps the first. But when the args are updated via the primary block's control panel, it doesn't apply to the first story, so what happens is the modal with the updated content is hidden behind the modal with the original content. I know it's confusing so here's a video of the issue:

https://github.com/user-attachments/assets/c2f3aaea-dcb0-4a93-958c-52e73ba2eaab

Reproduction link

https://stackblitz.com/edit/github-y4gwez?file=src%2Fstories%2FModal.stories.tsx

Reproduction steps

  1. Go to the link above.
  2. On the primary doc block's control panel, update the description arg to have more content.
  3. Click the OPEN MODAL button of the primary doc block. Notice that there are two modals rendered stacked together where the top modal doesn't have the updated content.

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: 8.3.0 => 8.3.0 
    @storybook/addon-interactions: 8.3.0 => 8.3.0 
    @storybook/addon-links: 8.3.0 => 8.3.0 
    @storybook/addon-onboarding: 8.3.0 => 8.3.0 
    @storybook/blocks: 8.3.0 => 8.3.0 
    @storybook/nextjs: 8.3.0 => 8.3.0 
    @storybook/preview-api: ^8.3.0 => 8.3.0 
    @storybook/react: 8.3.0 => 8.3.0 
    @storybook/test: 8.3.0 => 8.3.0 
    storybook: 8.3.0 => 8.3.0

Additional context

No response