storybook-addon-pseudo-states
storybook-addon-pseudo-states copied to clipboard
chromaui
Update the compatibility to Storybook 8.
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.
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.
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
~~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 https://github.com/storybookjs/storybook/discussions/25885.
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 [email protected]:
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>
);
},
});
});
PR and alpha release for v8 support: https://github.com/chromaui/storybook-addon-pseudo-states/pull/100
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.
I did update this addon to v3.0.0. The warning message is gone... but also the plugin addon button itself. :upside_down_face:
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? :thinking:
@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
@ghengeveld I still not have the icon being present as described on https://github.com/chromaui/storybook-addon-pseudo-states/issues/108#issuecomment-2026785731.
Tested with v3.0.1 specifically and latest v3.1.1
@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?
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/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── @vitejs/[email protected]
├── @vitest/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
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.
@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
@ghengeveld I just did an upgrade to Storybook 8.2.4 to my reproduction case project, still not working.
@ghengeveld Sorry to bother you with that (again :stuck_out_tongue:), 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? :thinking:
Best regards
@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.