Panel not loading

[icex]

For some reason the panel is not loading(just the loader spinning). I've tried in SB 6.4.x and Storybook 6.5.0-alpha.3. No errors in console or server.

[jeslage]

Hey @icex,

thanks for the issue. I tried it locally with Storybook Version 6.4.9 and addon version 2.1.0 but I can't reproduce your issue. Could you share your configuration of the addon from your .storybook/preview file? That could help to track it down.

[icex]

Hello,

Thank you kindly for your reply. My preview file is a bit more complex but I've trimmed it down to what you have in your example. If I add anything else to it it won't work. For example a simple addParameters() will stop it from working(see below). Anything else I tried to add from my original preview file(different decorators) will stop it from working .

It also doesn't work when I try to run it from source code instead of npm package.

import { addParameters } from '@storybook/html';
import React from 'react';
import { ThemeProvider, createGlobalStyle } from 'styled-components';
import { ThemePlaygroundProps } from 'storybook-addon-theme-playground';

const GlobalStyles = createGlobalStyle`
  body {
    background: #fff;
    margin:0;
    font-family: Helvetica, sans-serif;
  }
`;

const uiThemes = [
  {
    name: 'Default Theme',
    theme: {
      color: {
        primary: '#00ffa2',
        secondary: '#004466',
        tertiary: '#fbe9a0'
      },
      headline: {
        fontFamily: "'Crimson Pro', serif",
        fontWeight: 900,
        fontSize: '32px'
      },
      copy: {
        fontFamily: "'Hepta Slab', serif",
        fontWeight: 400,
        fontSize: '14px'
      },
      spacings: [40, 80, 120, 160],
      rectangle: {
        width: '40px',
        height: '20px',
        margin: {
          top: 60,
          bottom: 60,
          left: 20,
          right: 20
        }
      }
    }
  },
  {
    name: 'Another Theme',
    theme: {
      color: {
        primary: '#ff9922',
        secondary: '#224422',
        tertiary: '#662255'
      },
      headline: {
        fontFamily: "'Hepta Slab', serif",
        fontWeight: 700,
        fontSize: '52px'
      },
      copy: {
        fontFamily: "'Crimson Pro', serif",
        fontWeight: 200,
        fontSize: '20px'
      },
      spacings: [20, 40, 60, 90],
      rectangle: {
        width: '100px',
        height: '100px',
        margin: {
          top: 20,
          bottom: 20,
          left: 20,
          right: 20
        }
      }
    }
  }
];

interface Options extends ThemePlaygroundProps {
  theme: typeof uiThemes;
}

const options: Options = {
  theme: uiThemes,
  provider: ThemeProvider,
  controls: {
    'headline.fontWeight': {
      type: 'range',
      max: 900,
      min: 1,
      description: 'Define the font weight of the variable font'
    },
    'copy.fontWeight': {
      type: 'range',
      max: 900,
      min: 1,
      description: 'Define the font weight of the variable font'
    },
    'headline.fontFamily': {
      type: 'select',
      options: [
        { value: "'Hepta Slab', serif", label: 'Hepta Slab' },
        { value: "'Crimson Pro', serif", label: 'Crimson Pro' }
      ],
      description: 'Select the headline font family'
    },
    'copy.fontFamily': {
      type: 'select',
      options: [
        { value: "'Hepta Slab', serif", label: 'Hepta Slab' },
        { value: "'Crimson Pro', serif", label: 'Crimson Pro' }
      ],
      description: 'Select the copy font family'
    }
  }
};

export const parameters = {
  themePlayground: options,
  decorators: [ (storyFn) => (
    <>
      <GlobalStyles />
      {storyFn()}
    </>
  )],
};

addParameters({
  actions: {
    handles: ['click', 'abcFocus', 'abcBlur'],
  },
});

[jeslage]

Are you using storybook with react or html? It seems that the import { addParameters } from @storybook/html is messing up the configuration. This add-on is currently only tested with @storybook/react. If I change the import to import { addParameters } from @storybook/react everything works as expected. Another issue is, that the following code is wrong, but this could also be a copy/paste mistake.

export const parameters = {
  themePlayground: options,
  decorators: [ (storyFn) => (
    <>
      <GlobalStyles />
      {storyFn()}
    </>
  )],
};

// You need to export the parameters and decorators separately 
export const parameters = {
  themePlayground: options
};

export const decorators = [
  (storyFn) => (
    <>
      <GlobalStyles />
      {storyFn()}
    </>
  )
];