New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update the compatibility to Storybook 8. #108
Comments
Not sure how this works for @deRaaf, as I get the following console error:
|
I don't have the error mentioned by @MacroMan but the following one when I click on the addon toolbar's icon:
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 |
This addon did not produce the following build error, I did a mistake. It was an issue with
See also storybookjs/storybook#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 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: #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:
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? |
@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 |
Fixed in v3.0.1 |
@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 |
@soullivaneuh Is there any error in the browser console or Storybook server log? Have you added the addon to your |
I just updated Storybook to latest Here is my dependencies list:
Here is my 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 |
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.
The text was updated successfully, but these errors were encountered: