storybookjs / storybook

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

[Bug]: withThemeByClassName decorators breaks any RSC story #26239

Open SalahAdDin opened 7 months ago

SalahAdDin commented 7 months ago

Describe the bug

We are using this addon for global themes and it works fine in any component but NextJS Pages(RSC): StoryBookDecoratorIssueWithRSC

It breaks only there giving Storybook preview hooks can only be called inside decorators and story functions.

To Reproduce

  1. Create a new NextJS project.
  2. Setup the addon:
    
    import path from "path";

import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = { addons: [ "@storybook/addon-a11y", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-links", "@storybook/addon-onboarding", "@storybook/addon-storysource", "@storybook/addon-themes", "storybook-addon-pseudo-states", "storybook-addon-rtl", "msw-storybook-addon", ], docs: { autodocs: true, }, features: { experimentalRSC: true },


```ts title="preview.ts"
const preview: Preview = {
  decorators: [
    withThemeByClassName<ReactRenderer>({
      themes: {
        light: "light-theme",
        dark: "dark-theme",
      },
      defaultTheme: "light",
    }),
  ],
  1. Create a page and its story.
  2. Run the project and check it.

System

Storybook Environment Info:

  System:
    OS: Linux 6.1 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - /usr/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 8.15.4 - /usr/bin/pnpm <----- active
  npmPackages:
    @storybook/addon-a11y: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/addon-essentials: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/addon-interactions: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/addon-links: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/addon-onboarding: 1.0.11 => 1.0.11 
    @storybook/addon-storysource: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/addon-themes: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/blocks: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/nextjs: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/react: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/test: ^8.0.0-beta.5 => 8.0.0-beta.6 
    @storybook/theming: ^8.0.0-beta.5 => 8.0.0-beta.6 
    eslint-plugin-storybook: 0.8.0 => 0.8.0 
    msw-storybook-addon: 2.0.0-beta.1 => 2.0.0-beta.1 
    storybook: ^8.0.0-beta.5 => 8.0.0-beta.6 
    storybook-addon-pseudo-states: 2.1.2 => 2.1.2 
    storybook-addon-rtl: 1.0.0 => 1.0.0

Additional context

No response

SalahAdDin commented 7 months ago

Related issues: https://github.com/storybookjs/storybook/issues/24625, https://github.com/storybookjs/storybook/issues/22132