Update the compatibility to Storybook 8.

[deRaaf]

Although the addon still seems to work it gives a warning in Storybook 8 as it depends on an earlier version.

Might want to add it here as well.

[MacroMan]

Not sure how this works for @deRaaf, as I get the following console error:

Uncaught (in promise) SB_PREVIEW_API_0005 (CalledPreviewMethodBeforeInitializationError): Called `Preview.onPreloadStories()` before initialization.

The preview needs to load the story index before most methods can be called. If you want
to call `onPreloadStories`, try `await preview.initializationPromise;` first.

If you didn't call the above code, then likely it was called by an addon that needs to
do the above.

[soullivaneuh]

I don't have the error mentioned by @MacroMan but the following one when I click on the addon toolbar's icon:

Warning: Received `false` for a non-boolean attribute `active`.

If you want to write it to the DOM, pass a string instead: active="false" or active={value.toString()}.

If you used to conditionally omit it with active={condition && value}, pass active={condition ? value : undefined} instead.

However, I can select a pseudo states and get it applied to my component without any significant problem.

So it looks like there is some part to fix/adapt here, but nothing vital.

Here is also the direct link to the addon migration guide: https://storybook.js.org/docs/addons/addon-migration-guide

[soullivaneuh]

Update: This addon cause trouble at build time:

This addon did not produce the following build error, I did a mistake. It was an issue with whitespace-se/storybook-addon-html.

> bun run build-storybook
...
x Build failed in 4.03s
=> Failed to build the preview
RollupError: Expected ',', got ':'
    at error (file://./node_modules/rollup/dist/es/shared/parseAst.js:337:30)
    at nodeConverters (file://./node_modules/rollup/dist/es/shared/parseAst.js:2084:9)
    at convertNode (file://./node_modules/rollup/dist/es/shared/parseAst.js:969:12)
    at convertProgram (file://./node_modules/rollup/dist/es/shared/parseAst.js:960:48)
    at parseAstAsync (file://./node_modules/rollup/dist/es/shared/parseAst.js:2150:20)
    at async Module.tryParseAsync (file://./node_modules/rollup/dist/es/shared/node-entry.js:13511:21)
    at async Module.setSource (file://./node_modules/rollup/dist/es/shared/node-entry.js:13092:35)
    at async ModuleLoader.addModuleSource (file://./node_modules/rollup/dist/es/shared/node-entry.js:17755:13)

See also storybookjs/storybook#25885.

[benjazehr]

I found a way to recreate a dark/light switcher that suits our case (adding a class to the html tag). For those interested, this is working with storybook@8.0.0:

preview.jsx

import {global} from '@storybook/global';
import {useEffect, useGlobals} from '@storybook/preview-api';
…
export const withToggleDarkMode = (StoryFn) => {
  const [globals] = useGlobals();
  const darkMode = [true, 'true'].includes(globals['darkMode']);

  useEffect(() => {
    if (darkMode) {
      global.document.documentElement.classList.add('color-scheme-dark');
      global.document.documentElement.classList.remove('color-scheme-light');
    } else {
      global.document.documentElement.classList.remove('color-scheme-dark');
      global.document.documentElement.classList.add('color-scheme-light');
    }
  }, [darkMode]);

  return StoryFn();
};
…
export const decorators = [withToggleDarkMode];

manager.jsx

import {addons, types, useGlobals} from '@storybook/manager-api';
import {IconButton} from '@storybook/components';
import {SunIcon, MoonIcon} from '@storybook/icons';
…
addons.register('dark-mode-toggler', () => {
  addons.add('dark-mode-toggler/toolbar', {
    title: 'Toggle Dark Mode',
    type: types.TOOL,
    match: ({tabId, viewMode}) => !tabId && viewMode === 'story',
    render: () => {
      const [globals, updateGlobals] = useGlobals();
      const isActive = [true, 'true'].includes(globals['darkMode']);

      const toggleMyTool = useCallback(() => {
        updateGlobals({ darkMode: !isActive });
      }, [isActive]);

      useEffect(() => {
        try {
          const intialDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
          updateGlobals({darkMode: intialDarkMode});
        } catch (e) {}
      }, []);

      return (
        <IconButton title="Toggle Dark Mode" onClick={toggleMyTool}>
          {isActive ? <SunIcon /> : <MoonIcon />}
        </IconButton>
      );
    },
  });
});

[MacroMan]

PR and alpha release for v8 support: #100

[pvUXMA]

I just tried to migrate our project from SB v7 to v8.0.4. I get an error at runtime when I run storybook dev that seems to be caused by your add-on.

Stacktrace:

Uncaught ReferenceError: Icons is not defined
    at B (manager-bundle.js:2:6698)
    at renderWithHooks (chunk-UOBNU442.js:92:907)
    at mountIndeterminateComponent (chunk-UOBNU442.js:96:25851)
    at beginWork (chunk-UOBNU442.js:98:28381)
    at HTMLUnknownElement.callCallback2 (chunk-UOBNU442.js:31:42734)
    at Object.invokeGuardedCallbackImpl (chunk-UOBNU442.js:31:43261)
    at invokeGuardedCallback (chunk-UOBNU442.js:31:44569)
    at beginWork$1 (chunk-UOBNU442.js:115:5396)
    at performUnitOfWork (chunk-UOBNU442.js:111:56150)
    at workLoopSync (chunk-UOBNU442.js:111:54884)

Project environment:

• Monorepo with turbo
• React + SB 8.0.4
• pnpm as package manager
• storybook-addon-pseudo-states @ 3.0.0

I already discovered that you released v3.0.0 yesterday - I used that version. Reading the changelog it should have fixed the error above? Still persists here, am I missing something?
Error just happens at SB runtime, build command runs without any issues.

[soullivaneuh]

I did update this addon to v3.0.0. The warning message is gone... but also the plugin addon button itself. 🙃

Before I had (v2.2.1):

Then (v3.0.0):

As you can see, the related call to action has disappear.

Is there any change I have to do? 🤔

[ghengeveld]

@soullivaneuh Are you sure this isn’t because you have too many icons in the toolbar? It seems to just have fallen off due to lack of space?

Update: Fixed in v3.0.1

[wegry]

@pvUXMA see #111.

[ghengeveld]

Fixed in v3.0.1

[soullivaneuh]

@ghengeveld I still not have the icon being present as described on #108 (comment).

Tested with v3.0.1 specifically and latest v3.1.1

[ghengeveld]

@soullivaneuh Is there any error in the browser console or Storybook server log? Have you added the addon to your .storybook/main.js or .storybook/main.ts file as described here?

[soullivaneuh]

I just updated Storybook to latest 8.0.10, it did not resolves the issue.

Here is my dependencies list:

❯ bun pm ls
[0.06ms] ".env"
node_modules (2934)
├── @storybook/addon-a11y@8.0.10
├── @storybook/addon-essentials@8.0.10
├── @storybook/addon-links@8.0.10
├── @storybook/addon-storysource@8.0.10
├── @storybook/addon-themes@8.0.10
├── @storybook/blocks@8.0.10
├── @storybook/manager-api@8.0.10
├── @storybook/react@8.0.10
├── @storybook/react-vite@8.0.10
├── @storybook/theming@8.0.10
├── @testing-library/jest-dom@6.4.2
├── @testing-library/react@14.2.1
├── @testing-library/user-event@14.5.2
├── @types/bun@1.1.0
├── @types/react@18.2.64
├── @types/react-dom@18.2.21
├── @types/web@0.0.143
├── @typescript-eslint/eslint-plugin@7.3.1
├── @typescript-eslint/parser@7.3.1
├── @vitejs/plugin-react@4.2.1
├── @vitest/coverage-istanbul@1.3.1
├── chromatic@11.0.8
├── eslint@8.56.0
├── eslint-config-airbnb@19.0.4
├── eslint-config-airbnb-typescript@18.0.0
├── eslint-config-standard@17.1.0
├── eslint-plugin-import@2.29.1
├── eslint-plugin-import-newlines@1.4.0
├── eslint-plugin-jsx-a11y@6.8.0
├── eslint-plugin-n@16.6.2
├── eslint-plugin-promise@6.1.1
├── eslint-plugin-react@7.34.1
├── eslint-plugin-react-hooks@4.6.0
├── eslint-plugin-react-refresh@0.4.6
├── eslint-plugin-storybook@0.8.0
├── glob@10.3.10
├── happy-dom@14.3.6
├── react@18.2.0
├── react-dom@18.2.0
├── storybook@8.0.10
├── storybook-addon-grid@0.4.2
├── storybook-addon-pseudo-states@3.1.1
├── stylelint@16.2.1
├── stylelint-config-standard@36.0.0
├── stylelint-value-no-unknown-custom-properties@6.0.1
├── typescript@5.4.3
├── usehooks-ts@2.16.0
├── vite@5.2.6
└── vitest@1.3.1

Here is my .storybook/main.ts configuration file:

import type {
  StorybookConfig,
} from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: [
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-storysource',
    '@storybook/addon-themes',
    'storybook-addon-pseudo-states',
    'storybook-addon-grid',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {
      strictMode: true,
    },
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config;

I'll try with a fresh install of Storybook.

[soullivaneuh]

@ghengeveld I just tested with a fresh install of Storybook, same issue.

I created a reproduction case on this repository if you want to give a try: https://github.com/pocivaneuh/storybook-pseudo-states

[soullivaneuh]

@ghengeveld I just did an upgrade to Storybook 8.2.4 to my reproduction case project, still not working.

[ghengeveld]

Alright, I’ll take another look.

[vasicvuk]

Any update on this issue? Thanks

[mijnnaamisramon]

I'd like an update as well :)

[ghengeveld]

I'll likely have time for this next week.

[ghengeveld]

Should be fixed in v4.0.0.

[soullivaneuh]

@ghengeveld Sorry to bother you with that (again 😛), but it still not work from my side.

Same result: The pseudo-state-addon related button is not present on the addons bar.

I did an upgrade of you plugin to v4.0.0 and currently latest Storybook version which is v8.2.9.

You can take a look and reproduce the problem right here: https://github.com/pocivaneuh/storybook-pseudo-states/commit/adda9a4cdb1f5c16f7cac4d9f23ae0e07badffa0

Am I missing something with the configuration? 🤔

Best regards

[ghengeveld]

@soullivaneuh Thanks, I missed it because the internal Storybook loads the addon differently. After a bunch of spelunking we found the issue in a misconfiguration. If you upgrade to v4.0.2 the problem should be resolved.