Not passing themes to muiTheme() causes rendering errors

[bareynol]

As per docs, not passing any args to muiTheme() should create default light and dark themes.

Selecting the dark theme does not change the theme being used within storybook.

In addition, selecting "Full" in the Addon Panel causes the app to crash with the following errors:

VM1064:1 Uncaught ReferenceError: values is not defined
    at up (eval at result (vendors~main.e871950bc4ef8d8872b2.bundle.js:125459), <anonymous>:1:32)
    at Object.up (vendors~main.e871950bc4ef8d8872b2.bundle.js:125460)
    at createMixins (vendors~main.e871950bc4ef8d8872b2.bundle.js:3694)
    at createMuiTheme (vendors~main.e871950bc4ef8d8872b2.bundle.js:3772)
    at main.1058035e48e9fd4d513b.bundle.js:488
    at renderWithHooks (vendors~main.e871950bc4ef8d8872b2.bundle.js:38766)
    at mountIndeterminateComponent (vendors~main.e871950bc4ef8d8872b2.bundle.js:40848)
    at beginWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:41453)
    at performUnitOfWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:45140)
    at workLoop (vendors~main.e871950bc4ef8d8872b2.bundle.js:45180)

The above error occurred in one of your React components:
    in Unknown (created by AddonPanel)
    in div (created by Context.Consumer)
    in ModeSection (created by AddonPanel)
    in div (created by Context.Consumer)
    in FlexBlock (created by AddonPanel)
    in div (created by AddonPanel)
    in AddonPanel (created by WithChannel(AddonPanel))
    in WithChannel(AddonPanel)
    in div (created by Context.Consumer)
    in Styled(div)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by Context.Consumer)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.

vendors~main.e871950bc4ef8d8872b2.bundle.js:8033 Uncaught ReferenceError: values is not defined
    at up (eval at result (vendors~main.e871950bc4ef8d8872b2.bundle.js:125459), <anonymous>:1:32)
    at Object.up (vendors~main.e871950bc4ef8d8872b2.bundle.js:125460)
    at createMixins (vendors~main.e871950bc4ef8d8872b2.bundle.js:3694)
    at createMuiTheme (vendors~main.e871950bc4ef8d8872b2.bundle.js:3772)
    at main.1058035e48e9fd4d513b.bundle.js:488
    at renderWithHooks (vendors~main.e871950bc4ef8d8872b2.bundle.js:38766)
    at mountIndeterminateComponent (vendors~main.e871950bc4ef8d8872b2.bundle.js:40848)
    at beginWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:41453)
    at performUnitOfWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:45140)
    at workLoop (vendors~main.e871950bc4ef8d8872b2.bundle.js:45180)

react_devtools_backend.js:6 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

vendors~main.e871950bc4ef8d8872b2.bundle.js:46140 Uncaught ReferenceError: values is not defined
    at up (eval at result (vendors~main.e871950bc4ef8d8872b2.bundle.js:125459), <anonymous>:1:32)
    at Object.up (vendors~main.e871950bc4ef8d8872b2.bundle.js:125460)
    at createMixins (vendors~main.e871950bc4ef8d8872b2.bundle.js:3694)
    at createMuiTheme (vendors~main.e871950bc4ef8d8872b2.bundle.js:3772)
    at main.1058035e48e9fd4d513b.bundle.js:488
    at renderWithHooks (vendors~main.e871950bc4ef8d8872b2.bundle.js:38766)
    at mountIndeterminateComponent (vendors~main.e871950bc4ef8d8872b2.bundle.js:40848)
    at beginWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:41453)
    at performUnitOfWork (vendors~main.e871950bc4ef8d8872b2.bundle.js:45140)
    at workLoop (vendors~main.e871950bc4ef8d8872b2.bundle.js:45180)

[bareynol]

doing some digging into this myself. I'll see if I can fix it and submit a PR

[bareynol]

It seems that when custom themes are passed in via .storybook/stories.js, only the object which specifies the MUI overrides are used:

https://github.com/react-theming/storybook-addon-material-ui/blob/version-1/.storybook/stories.js#L27

import { overridings as theme1 } from './.themes/customTheme1';
import { overridings as theme2 } from './.themes/customTheme2';
import themeF3, { overridings as theme3 } from './.themes/customTheme3';
import { overridings as theme4 } from './.themes/customTheme4';
import { overridings as theme5 } from './.themes/customTheme5';

...
  .addDecorator(muiTheme([theme1, theme2, theme3, theme4, theme5]))
...

overriding object can be found here: https://github.com/react-theming/storybook-addon-material-ui/blob/version-1/.storybook/.themes/customTheme1.js#L15

---

In the muiTheme() definition, while themes received are objects, the default lightBaseTheme and darkBaseTheme are created using createMuiTheme()

I believe this is presenting an issue in the FullTheme component and causing a crash because this component calls createMuiTheme() on the currently selected theme when sending it to the object inspector:

https://github.com/react-theming/storybook-addon-material-ui/blob/version-1/src/UI/FullTheme.js#L31

Calling createMuiTheme twice on a set of overrides causes the same error as listed above.

[bareynol]

Removing createMuiTheme() on the default light/dark themes and adding palette: { type: 'light' } to the lightBaseTheme configuration did the following for me on a local build:

1. stopped the app from crashing when selecting "full theme" in the addon panel
2. fixed the default dark theme not being applied to components in storybook

[bareynol]

I think part of my issue overall is that I was using material-ui/core v4, whereas, from what I can tell, this repo only supports Material-ui v3 (though that doesn't appear to be documented anywhere).

So it seems like this addon uses MuiThemeProvider as a decorator, and not the ThemeProvider introduced in v4.

[rvillalba-novetta]

Same observations here. Button on the right seems to imply that its v3 as well thought I wasn't sure at first. This should be documented in the README. Support for v4 would be great.