You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
importtype{Decorator}from'@storybook/react';exportconstwithTheme: 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 attributedocument.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.
This discussion was converted from issue #23977 on August 29, 2023 10:19.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Describe the bug
I have a story decorator:
I want to reduce examples of
anyin my codebase, so I would like to type theglobalsso thatdocument.documentElement.setAttribute('data-user-color-scheme', theme);sets astringinstead of ananytypeSuggestion would be to change the
Globalstype 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
themevariable in the function argumentsSystem
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.0Beta Was this translation helpful? Give feedback.
All reactions