Skip to content

Globals type should be an interface to allow extending #23977

@jasikpark

Description

@jasikpark

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_

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions