Closed deRaaf closed 1 week ago
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 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>
);
},
});
});
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:
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
@pvUXMA see #111.
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/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.
@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.
Alright, I’ll take another look.
Any update on this issue? Thanks
I'd like an update as well :)
I'll likely have time for this next week.
Should be fixed in v4.0.0.
@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.
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.