Missing properties from Type ThemePlaygroundProps - overrides, config about storybook-addon-theme-playground HOT 3 CLOSED

Hey,
good point. This is a bug, i will work on that and will let you know when i released it. In the meantime you can try to add empty objects to the config and overrides keys. Does this work for you then?

const options = {
  theme: themeLight,
  provider: ThemeProvider,
  overrides: {},
  config: {}
};

from storybook-addon-theme-playground.

Thanks for reply. Unfortunately not:
Doing so I get this typescript complaint:

error:

Argument of type '{ theme: { maxTextWidth: string; pad10: string; pad20: string; fontFamily: string; fontSizeDefault: number; fontSizeL: number; primary: string; textLight: string; grey1: string; grey2: string; grey3: string; blue1: string; blue2: string; warn: string; success: string; }; provider: BaseThemeProviderComponent<...>; ov...' is not assignable to parameter of type 'ThemePlaygroundProps'.
  Types of property 'config' are incompatible.
    Type '{}' is missing the following properties from type 'ConfigProps': labelFormat, showCode, debounce, debounceRate

I assume its because I need to supply the strict config or overrides types, but dont' know how to access them. Perhaps even if you do solve the problem it might be good to expose those types so that they can be used like this:

import { ThemeConfigProps } from 'storybook-addon-theme-playground';

// other stuff ...
const options: ThemeConfigProps<typeof themeLight> = {
  theme: themeLight,
  provider: ThemeProvider,
  overrides: {},
  config: {}
};

or if you prefer via extending interface

interface ThemeOptions extends ThemeConfigProps {
  theme: typeof themeLight;
};

const options: ThemeOptions = {
  theme: themeLight,
  provider: ThemeProvider,
  overrides: {},
  config: {}
};

from storybook-addon-theme-playground.

I released a new version. You can update to version 1.3.4. The package exports the interface ThemePlaygroundProps and the properties config and overrides are optional now.

import { withThemePlayground, ThemePlaygroundProps } from 'storybook-addon-theme-playground';

interface ThemeOptions extends ThemePlaygroundProps {
  theme: typeof themeLight;
};

const options: ThemeOptions = {
  theme: themeLight,
  provider: ThemeProvider
};

export const decorators = [withThemePlayground(options)];

If you have still issues with the implementation, just let me know!

from storybook-addon-theme-playground.