[Bug]: `@storybook/addon-themes` `withThemeByClassName` type error

[Wayne-Jones]

Describe the bug

I get a Typescript error in my preview.tsx file with the function withThemeByClassName from @storybook/addon-themes but I believe the issue might be with all the Theme functions. I'm using withThemesByClassName to pass in the light/dark mode classes so that TailwindCSS can take over and handle the light/dark displays of components. While this type error seems to not have an issue with the functionality of the adding/changing of classes, I just wanted to raise this issue.

This is the full output of the type issue:

Type 'DecoratorFunction<Renderer, Args>' is not assignable to type 'DecoratorFunction<ReactRenderer, { [x: string]: any; }>'.
  Types of parameters 'c' and 'c' are incompatible.
    Type 'StoryContext<ReactRenderer, { [x: string]: any; }>' is not assignable to type 'StoryContext<Renderer, Args>'.
      Types of property 'originalStoryFn' are incompatible.
        Type 'StoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Renderer, Args>'.
          Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Renderer, Args>'.
            Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'LegacyStoryFn<Renderer, Args>'.
              Types of parameters 'context' and 'context' are incompatible.
                Type 'StoryContext<Renderer, Args>' is not assignable to type 'StoryContext<ReactRenderer, Args>'.
                  Types of property 'canvasElement' are incompatible.
                    Type 'unknown' is not assignable to type 'HTMLElement'.ts(2322)
(alias) withThemeByClassName<Renderer>({ themes, defaultTheme, parentSelector, }: ClassNameStrategyConfiguration): DecoratorFunction<Renderer, Args>
import withThemeByClassName

Seems like decorators is expecting DecoratorFunction<ReactRenderer, Args> instead of DecoratorFunction<Renderer, Args>

This is a React Project built on Next.JS / TailwindCSS.

To Reproduce

I converted my preview file to preview.tsx in order to pass in Google Fonts via NextFont import to each story. But here is what I have in the preview file.

decorators: [
    withThemeByClassName({
      themes: {
          light: 'light',
          dark: 'dark',
      },
      defaultTheme: 'light',
    }),
    (Story) => (
      <div className={`${montserrat.className}`}>
        <Story />
      </div>
    )
  ]

System

Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Chrome: 120.0.6099.56
    Edge: Spartan (44.19041.3570.0), Chromium (119.0.2151.93)
  npmPackages:
    @storybook/addon-a11y: ^7.6.3 => 7.6.3
    @storybook/addon-essentials: ^7.6.3 => 7.6.3
    @storybook/addon-interactions: ^7.6.3 => 7.6.3
    @storybook/addon-links: ^7.6.3 => 7.6.3
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8
    @storybook/addon-themes: ^7.6.3 => 7.6.3
    @storybook/blocks: ^7.6.3 => 7.6.3
    @storybook/jest: ^0.2.3 => 0.2.3
    @storybook/nextjs: ^7.6.3 => 7.6.3
    @storybook/react: ^7.6.3 => 7.6.3
    @storybook/testing-library: ^0.2.2 => 0.2.2
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    storybook: ^7.6.3 => 7.6.3
    storybook-dark-mode: ^3.0.3 => 3.0.3

Additional context

No response

[pqminh]

let try to add your Rerender to withThemeByClassName like this: import { Renderer } from '@storybook/your-rerender'; withThemeByClassName<Renderer> example: import { ReactRenderer } from '@storybook/react';

withThemeByClassName<ReactRenderer>({ themes: { light: 'light', dark: 'dark', }, defaultTheme: 'light', })

[Wayne-Jones]

@pqminh Yup that resolves the type issue

[teleki]

This was a problem for me, too. Indeed, the above solution worked. Same setup: Storybook 7.6.5 for nextjs with TypeScript and TailwindCSS on MacOS. Adding the explicit type to the withThemeByClassName<ReactRenderer> call fixes the problem.

[AnandChandrakar]

Hi @Wayne-Jones, I was able to recreate the issue and going through the docs found that the workaround syntax suggested by @pqminh is actually in the docs for all css providers, not just Tailwind. So I think the issue is related to syntax actually.

https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started

[Wayne-Jones]

@AnandChandrakar Ah I see, I think I was going off of this page tutorial which is a direct link from the docs in the Setup section. This doesn't have that addition: https://storybook.js.org/recipes/tailwindcss

[Wayne-Jones]

@ShaunEvening Would you be able to update the Recipes page to match what's in the addons themes doc?