-
-
Notifications
You must be signed in to change notification settings - Fork 9.9k
Closed
Description
Describe the bug
I have a story decorator:
import type { Decorator } from '@storybook/react';
export const withTheme: Decorator = (StoryFn, { globals: { theme }, viewMode }) => {
if (!theme) {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
if (viewMode === 'docs') {
// Make stories in docs mode all light theme, except for the `Themed` story (fragile, I know)
// This should only really run once when the docs page loads, but I can't figure out
// What event to use to listen for that. So it runs too much, but ¯\_(ツ)_/¯
document.querySelectorAll('.sbdocs-preview').forEach((element) => {
if (!element.getAttribute('data-user-color-scheme') && element.previousElementSibling?.id !== 'themed') {
element.setAttribute('data-user-color-scheme', 'light');
}
});
} else {
// Set theme data attribute
document.documentElement.setAttribute('data-user-color-scheme', theme);
}
return <StoryFn />;
};I want to reduce examples of any in my codebase, so I would like to type the globals so that document.documentElement.setAttribute('data-user-color-scheme', theme); sets a string instead of an any type
Suggestion would be to change the Globals type to an interface to allow extending with user types.
To Reproduce
View https://stackblitz.com/edit/github-4qskx4?file=src%2FwithTheme.tsx and inspect the type of the theme variable in the function arguments
System
Environment Info:
System:
OS: macOS 13.5.1
CPU: (10) arm64 Apple M1 Max
Binaries:
Node: 18.7.0 - ~/.volta/tools/image/node/18.7.0/bin/node
Yarn: 3.2.4 - ~/.volta/tools/image/yarn/3.2.4/bin/yarn
npm: 8.17.0 - ~/.volta/tools/image/npm/8.17.0/bin/npm
Browsers:
Chrome: 116.0.5845.110
Safari: 16.6
npmPackages:
@storybook/addon-a11y: 7.1.0 => 7.1.0
@storybook/addon-actions: 7.1.0 => 7.1.0
@storybook/addon-docs: 7.1.0 => 7.1.0
@storybook/addon-essentials: 7.1.0 => 7.1.0
@storybook/addon-interactions: 7.1.0 => 7.1.0
@storybook/addon-links: 7.1.0 => 7.1.0
@storybook/addons: 7.1.0 => 7.1.0
@storybook/expect: ^27.5.2-0 => 27.5.2-0
@storybook/jest: 0.2.2--canary.42.5953151068.0 => 0.2.2--canary.42.5953151068.0
@storybook/react: 7.1.0 => 7.1.0
@storybook/react-vite: 7.1.0 => 7.1.0
@storybook/test-runner: 0.12.0 => 0.12.0
@storybook/testing-library: ^0.1.0 => 0.1.0
@storybook/types: 7.1.0 => 7.1.0
### Additional context
_No response_
Reactions are currently unavailable
Metadata
Metadata
Assignees
Type
Projects
Status
Done