Storybook: addon question: theming in preview

[alexreardon]

Hi there,

Is there a way to render components such as Button from import {Button} from l'@storybook/components' inside of the preview? Right now I get errors like this:

Button.js:61 Uncaught TypeError: Cannot read property 'size' of undefined
    at push../node_modules/@storybook/components/dist/Button/Button.js.ButtonWrapper.withComponent.target (Button.js:61)

Minimum use case:

import React from 'react';
import { Button } from '@storybook/components';

export default {
  title: 'Button',
};

export const button = () => <Button>Test</Button>;

The issue is that the theme is not being populated. Is there a component I should be wrapping the Button inside of for the preview to have the theme populated?

[alexreardon]

I am doing this because I want to render my addon panel in the preview for the purpose of development

[alexreardon]

I found a way:

import React from 'react';
import { Button } from '@storybook/components';
import { convert, ThemeProvider, themes } from '@storybook/theming';

export default {
  title: 'Button',
};

export const panel = () => (
  <ThemeProvider theme={convert(themes.normal)}>
    <Button>Hey</Button>
  </ThemeProvider>
);

I ended up looking through the storybook source to find this way

[alexreardon]

I also needed to populate the global style so things looked the same as the panel. I ended up creating this:

import {
  convert,
  ThemeProvider,
  themes,
  Global,
  createGlobal,
  color,
  typography,
  background,
} from '@storybook/theming';

function WithStorybookTheme(props: { children: React.ReactNode }) {
  return (
    <>
      <Global styles={createGlobal({ color, typography, background })} />
      <ThemeProvider theme={convert(themes.normal)}>{props.children}</ThemeProvider>
    </>
  );

[alexreardon]

I ended up with this for anyone who needs it:

import { convert, createGlobal, Global, Theme, ThemeProvider, themes } from '@storybook/theming';
import React from 'react';

export default function WithStorybookTheme({
  children,
  mode = 'normal',
}: {
  children: React.ReactNode;
  mode?: 'normal' | 'dark';
}) {
  const theme: Theme = convert(mode === 'dark' ? themes.dark : themes.normal);

  return (
    <>
      <ThemeProvider theme={theme}>
        <Global styles={createGlobal(theme)} />
        {children}
      </ThemeProvider>
    </>
  );
}

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!