Material-UI v1 Support

Question

Material-UI v1 Support

usulpro opened this issue 7 years ago · comments

We started storybook-addon-material-ui@0.9.0-alpha with support material-ui@1.0.0-alpha

install:

npm i storybook-addon-material-ui@next

Your issues and feedback are very welcome!!!

Oleg Proskurin commented 6 years ago

PR #73

Oleg Proskurin · Answer 1 · Mon Jul 17 2017 06:08:12 GMT+0800 (China Standard Time)

Usage:

addDecorator(muiTheme()) // use light theme

or

addDecorator(muiTheme('dark')) // use dark theme

or

addDecorator(muiTheme(theme1, theme2, theme3)) // use custom theme

at this stage of alpha only first theme will be used

Steven Ginn · Answer 2 · Wed Aug 16 2017 04:58:12 GMT+0800 (China Standard Time)

We can't use our own themes because the code explicitly uses lightBaseTheme and not the currentTheme

https://github.com/react-theming/storybook-addon-material-ui/blob/next/src/muiTheme.js#L40

Oleg Proskurin · Answer 3 · Wed Aug 16 2017 06:02:29 GMT+0800 (China Standard Time)

@sginn thanks for reporting this. it will be fixed

Oleg Proskurin · Answer 4 · Mon Aug 21 2017 02:58:41 GMT+0800 (China Standard Time)

npm i storybook-addon-material-ui@next should pull the update

matthiasp42 · Answer 5 · Fri Oct 13 2017 20:53:45 GMT+0800 (China Standard Time)

Version "^0.9.0-alpha.1" doesn't seem compatible with Material-UIs version "v1.0.0-beta.16".
I'm getting errors such as:

ModuleNotFoundError: Module not found: Error: Can't resolve 'material-ui/styles/palette'

Maybe it is expected, as i don't expect you guys to keep up with every single beta update, but I wanted to leave a note anyway.

Thanks

Oleg Proskurin · Answer 6 · Sun Oct 15 2017 01:16:13 GMT+0800 (China Standard Time)

Thanks @matthiasp42 ! I'll check it out!

Andrew Frankel · Answer 7 · Tue Nov 21 2017 03:10:07 GMT+0800 (China Standard Time)

@usulpro seeing the same error in beta.21:

ERROR in ./node_modules/storybook-addon-material-ui/dist/muiTheme.js
Module not found: Error: Can't resolve 'material-ui/styles/palette'

Just a quick skim, /src/styles/createPalette.js might be of interest here.

Ivan Wang · Answer 8 · Sat Nov 25 2017 08:29:20 GMT+0800 (China Standard Time)

WOW this git issue is amazing. Thanks for the awesome attitude and update speed! I would use a button to buy you a coffee if you have one.

I am facing the same issue as above Can't resolve 'material-ui/styles/palette' with material-ui@^1.0.0-beta.21

Xander Wouters · Answer 9 · Thu Feb 15 2018 00:12:05 GMT+0800 (China Standard Time)

@HAKASHUN are you going to open a PR with your changes? :)

Oleg Proskurin · Answer 10 · Thu Feb 15 2018 00:33:16 GMT+0800 (China Standard Time)

Such PR would be appreciated!! 👍

Ben Teichman · Answer 11 · Fri Feb 23 2018 02:33:15 GMT+0800 (China Standard Time)

In the interim, you should be able to add a custom alias to the storybook webpack.config.js

  resolve: {
    alias: {
      'material-ui/styles/palette': 'material-ui/styles/createPalette',
    },
  },

I was able to get the following working with storybook-addon-material-ui@next although I have yet to get the drawer panel to appear

// .storybook/config.js

import '@babel/polyfill';
import { configure, setAddon } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import infoAddon from '@storybook/addon-info';

setAddon(infoAddon);

setOptions({
  name: 'My App',
  url: 'https://example.com',
  goFullScreen: false,
  showStoriesPanel: true,
  showAddonPanel: true,
  showSearchBox: false,
  addonPanelInRight: false,
});

const req = require.context('../stories', true, /.stories.tsx?$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

// .storybook/addons.js

import '@storybook/addon-knobs/register';
import '@storybook/addon-options/register';
import './register-material-ui';

// .storybook/register-material-ui.js

import * as react from 'react';
import addons from '@storybook/addons';
import { ADDON_ID, PANEL_ID } from 'storybook-addon-material-ui';
import PanelContainer from 'storybook-addon-material-ui/dist/containers/PanelContainer';

// removed temporarily until I might need it
// import reactTapEventPlugin from 'react-tap-event-plugin';

// function inject() {
//   try {
//     reactTapEventPlugin();
//   } catch (err) {
//     console.warn(err);
//   }
// }
// inject();

addons.register(ADDON_ID, (api) => {
  const channel = addons.getChannel();
  addons.addPanel(PANEL_ID, {
    title: 'Material-UI',
    render: () => react.createElement(PanelContainer, { channel, api }),
  });
});

// .storybook/palette-alias.js

export default function createPalette(palette) {
  return {
    palette,
  };
}

// .storybook/webpack.config.js

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      // although in my original example I used an alias to createPalette.js, this allowed me to mock
      // the functionality myself to mimic the behaviour added by @HAKASHUN
      'material-ui/styles/palette': path.resolve('.storybook/palette-alias.js'),
    },
  },
};

// stories/index.stories.tsx

import * as React from 'react';

import { storiesOf } from '@storybook/react';
import { muiTheme } from 'storybook-addon-material-ui';
import Login from '../src/pages/login';
import reduxAddon from './redux-addon';
import theme from './theme';

storiesOf('Login', module)
  .addDecorator(muiTheme(theme))
  .addDecorator(reduxAddon)
  .add('form', () => <Login />);

// stories/theme.js

import { createMuiTheme } from 'material-ui/styles';
import theme from '../src/theme';

export default createMuiTheme({ themeName: 'My Theme', ...theme } as any);

Niels van Galen Last · Answer 12 · Fri Mar 02 2018 23:53:08 GMT+0800 (China Standard Time)

@usulpro any updates or ETA when this (and also update for React to v16.x) could be ready?

Rafael Stavarengo · Answer 13 · Fri Apr 06 2018 02:55:57 GMT+0800 (China Standard Time)

Hi Guys.
Getting the same error Can't resolve 'material-ui/styles/palette'
I'm using

material-ui 1.0.0-beta.40
storybook-addon-material-ui 0.9.0-alpha.1
react 16.3.1.
The project was created with create-react-app.

Here is the full error message

ERROR in ./node_modules/storybook-addon-material-ui/dist/muiTheme.js
Module not found: Error: Can't resolve 'material-ui/styles/palette' in '/home/stavarengo/Projects/celebryts/valar/node_modules/storybook-addon-material-ui/dist'
 @ ./node_modules/storybook-addon-material-ui/dist/muiTheme.js 21:15-52
 @ ./node_modules/storybook-addon-material-ui/dist/index.js
 @ ./.storybook/addons.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js

ERROR in ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react-dom/lib/EventConstants' in '/home/stavarengo/Projects/celebryts/valar/node_modules/react-tap-event-plugin/src'
 @ ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js 22:21-60
 @ ./node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./node_modules/storybook-addon-material-ui/dist/register.js
 @ ./node_modules/storybook-addon-material-ui/dist/index.js
 @ ./.storybook/addons.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js

ERROR in ./node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Can't resolve 'react-dom/lib/EventPluginHub' in '/home/stavarengo/Projects/celebryts/valar/node_modules/react-tap-event-plugin/src'
 @ ./node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-41
 @ ./node_modules/storybook-addon-material-ui/dist/register.js
 @ ./node_modules/storybook-addon-material-ui/dist/index.js
 @ ./.storybook/addons.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js

ERROR in ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react-dom/lib/EventPluginUtils' in '/home/stavarengo/Projects/celebryts/valar/node_modules/react-tap-event-plugin/src'
 @ ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js 23:23-64
 @ ./node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./node_modules/storybook-addon-material-ui/dist/register.js
 @ ./node_modules/storybook-addon-material-ui/dist/index.js
 @ ./.storybook/addons.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js

ERROR in ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react-dom/lib/EventPropagators' in '/home/stavarengo/Projects/celebryts/valar/node_modules/react-tap-event-plugin/src'
 @ ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js 24:23-64
 @ ./node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./node_modules/storybook-addon-material-ui/dist/register.js
 @ ./node_modules/storybook-addon-material-ui/dist/index.js
 @ ./.storybook/addons.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js

ERROR in ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react-dom/lib/SyntheticUIEvent' in '/home/stavarengo/Projects/celebryts/valar/node_modules/react-tap-event-plugin/src'
 @ ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js 25:23-64
 @ ./node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./node_modules/storybook-addon-material-ui/dist/register.js
 @ ./node_modules/storybook-addon-material-ui/dist/index.js
 @ ./.storybook/addons.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js

ERROR in ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react-dom/lib/ViewportMetrics' in '/home/stavarengo/Projects/celebryts/valar/node_modules/react-tap-event-plugin/src'
 @ ./node_modules/react-tap-event-plugin/src/TapEventPlugin.js 27:22-62
 @ ./node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./node_modules/storybook-addon-material-ui/dist/register.js
 @ ./node_modules/storybook-addon-material-ui/dist/index.js
 @ ./.storybook/addons.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js

Rohit · Answer 14 · Sat May 19 2018 06:23:16 GMT+0800 (China Standard Time)

Now that material-ui 1.0.0 is released and stable (https://www.npmjs.com/package/@material-ui/core).

This would be a good time to address this issue.

Stanislas Ormières · Answer 15 · Sun May 20 2018 21:32:54 GMT+0800 (China Standard Time)

Hi, I would really like to use this addon with the v1, and I really would like to help. I forked the repo, but I am not sure what I need to change : there seems to be quite a lot of unused code, the linting is not consistent....
I managed to make the example work, though. See https://github.com/laruiss/storybook-addon-material-ui : if you clone it, checkout the next branch, npm install and then npm run storybook you will see the examples working with material-ui v1
N.B.: I had to remove the react-tap-event-plugin

Oleg Proskurin · Answer 16 · Sun Jun 10 2018 02:59:47 GMT+0800 (China Standard Time)

tried to test it and got
TypeError: Object(...) is not a function
did you change api?

upd: ok fixed

Oleg Proskurin · Answer 17 · Sun Jun 10 2018 20:43:46 GMT+0800 (China Standard Time)

@laruiss I merged you PR and restored addon-panel. Works fine!
Thank you for your help!!! 🙏

Oleg Proskurin · Answer 18 · Sun Jun 10 2018 20:47:03 GMT+0800 (China Standard Time)

Hey guys! I just published alpha.5!
Now Material-UI v1 themes are supported. 💥 ✨ 🎉

At this moment this addon has only basic functionality: passing themes into decorator and switching them from addon panel.

To install alpha version:

npm i storybook-addon-material-ui@next --save-dev

Note that you need to register addon panel this way:

// addons.js

import 'storybook-addon-material-ui/register';

Material-UI v1 has new customization abilities https://material-ui.com/customization/themes/
so we cant use previous addon version with them. It should be updated and some parts will have to be created from scratch.

Let me know how do you use this addon and what features are most wanted. Should we support the entire theme or only palette?

I created this short survey to quickly collect responses.
(it's just one page with 10 checkboxes and doesn't take much of your time)
https://app.qpointsurvey.com/s?c=F2VOSpTXOlnHHqMaZKSSV5a1ylaCDoRfhut3oNCox34~
please give me your feedback, or left your comments here

Oleg Proskurin · Answer 19 · Mon Jul 02 2018 04:40:39 GMT+0800 (China Standard Time)

https://github.com/react-theming/storybook-addon-material-ui/releases/tag/0.9.0-alpha.6

Oleg Proskurin · Answer 20 · Sat Jul 28 2018 00:07:48 GMT+0800 (China Standard Time)

https://twitter.com/UsulPro/status/1022781130246905856