Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for Material UI Core 5.x #130

Open
markitecht opened this issue Aug 23, 2021 · 6 comments
Open

Support for Material UI Core 5.x #130

markitecht opened this issue Aug 23, 2021 · 6 comments

Comments

@markitecht
Copy link

We have dependencies on Core 5+ and would very much like to use this Add-on.
@aleccaputo
Copy link

Same here.

2 similar comments
@urban-intersol
Copy link

Same here.

@go-to-the-future
Copy link

Same here.

@d0whc3r
Copy link

d0whc3r commented Oct 14, 2021

Hi, I made a little patch to avoid errors, but it doesn't work as expected

Here is the patch (for the dist files)

diff --git a/node_modules/storybook-addon-material-ui/dist/.themes/index.js b/node_modules/storybook-addon-material-ui/dist/.themes/index.js
index 279c973..2f58f03 100644
--- a/node_modules/storybook-addon-material-ui/dist/.themes/index.js
+++ b/node_modules/storybook-addon-material-ui/dist/.themes/index.js
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.lightTheme = void 0;
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
-var lightTheme = (0, _styles.createMuiTheme)({
+var lightTheme = (0, _styles.createTheme)({
   palette: {
     primary: {
       main: 'rgb(98, 126, 157)'
diff --git a/node_modules/storybook-addon-material-ui/dist/UI/FullTheme.js b/node_modules/storybook-addon-material-ui/dist/UI/FullTheme.js
index 17ad4c2..18ac26d 100644
--- a/node_modules/storybook-addon-material-ui/dist/UI/FullTheme.js
+++ b/node_modules/storybook-addon-material-ui/dist/UI/FullTheme.js
@@ -15,7 +15,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactInspector = require("react-inspector");
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,7 +47,7 @@ var _default = function _default(_ref) {
     expandLevel: 1,
     expandPaths: "$.palette",
     sortObjectKeys: sortObjectKeys,
-    data: (0, _styles.createMuiTheme)(theme)
+    data: (0, _styles.createTheme)(theme)
   }));
 };
 
diff --git a/node_modules/storybook-addon-material-ui/dist/UI/MuiDecorator.js b/node_modules/storybook-addon-material-ui/dist/UI/MuiDecorator.js
index ea790c0..eab4ed1 100644
--- a/node_modules/storybook-addon-material-ui/dist/UI/MuiDecorator.js
+++ b/node_modules/storybook-addon-material-ui/dist/UI/MuiDecorator.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var _WithChannel = _interopRequireDefault(require("../adk/WithChannel"));
 
@@ -20,16 +20,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var currentTheme = function currentTheme(data) {
   try {
     var theme = data.themes[data.themeInd];
-    return (0, _styles.createMuiTheme)(theme);
+    return (0, _styles.createTheme)(theme);
   } catch (err) {
-    return (0, _styles.createMuiTheme)({});
+    return (0, _styles.createTheme)({});
   }
 };
 
 var MuiDecorator = function MuiDecorator(_ref) {
   var data = _ref.data,
       story = _ref.story;
-  return _react.default.createElement(_styles.MuiThemeProvider, {
+  return _react.default.createElement(_styles.ThemeProvider, {
     theme: currentTheme(data)
   }, _react.default.createElement("div", null, story));
 };
diff --git a/node_modules/storybook-addon-material-ui/dist/UI/Palette.js b/node_modules/storybook-addon-material-ui/dist/UI/Palette.js
index 998120f..6c26658 100644
--- a/node_modules/storybook-addon-material-ui/dist/UI/Palette.js
+++ b/node_modules/storybook-addon-material-ui/dist/UI/Palette.js
@@ -15,7 +15,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactInspector = require("react-inspector");
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var _colorPicker = _interopRequireDefault(require("@usulpro/color-picker"));
 
@@ -169,7 +169,7 @@ function (_React$Component) {
 
         _this.setState({
           path: path,
-          editColor: (0, _styles.createMuiTheme)({
+          editColor: (0, _styles.createTheme)({
             palette: palette
           }).palette[path[0]][path[1]],
           isPickerOpen: isPickerOpen
@@ -282,10 +282,10 @@ function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      var _createMuiTheme = (0, _styles.createMuiTheme)({
+      var _createTheme = (0, _styles.createTheme)({
         palette: this.state.palette
       }),
-          palette = _createMuiTheme.palette;
+          palette = _createTheme.palette;
 
       var colorSet = function colorSet(name) {
         return _this2.renderColorSet(palette[name], name, _this2.state.palette.type === 'dark');
diff --git a/node_modules/storybook-addon-material-ui/dist/components/ThemePropBlock.js b/node_modules/storybook-addon-material-ui/dist/components/ThemePropBlock.js
index 692d08a..e5999bb 100644
--- a/node_modules/storybook-addon-material-ui/dist/components/ThemePropBlock.js
+++ b/node_modules/storybook-addon-material-ui/dist/components/ThemePropBlock.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 
 var _SclToggle = _interopRequireDefault(require("../material-desktop/SclToggle"));
 
diff --git a/node_modules/storybook-addon-material-ui/dist/components/ThemePropItem.js b/node_modules/storybook-addon-material-ui/dist/components/ThemePropItem.js
index c0973b5..8419768 100644
--- a/node_modules/storybook-addon-material-ui/dist/components/ThemePropItem.js
+++ b/node_modules/storybook-addon-material-ui/dist/components/ThemePropItem.js
@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
 
-var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
 
-var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));
+var _Slide = _interopRequireDefault(require("@mui/material/Slide"));
 
 var _colorPicker = _interopRequireDefault(require("@usulpro/color-picker"));
 
diff --git a/node_modules/storybook-addon-material-ui/dist/components/ThemeSideBar.js b/node_modules/storybook-addon-material-ui/dist/components/ThemeSideBar.js
index 38891d0..8bb291a 100644
--- a/node_modules/storybook-addon-material-ui/dist/components/ThemeSideBar.js
+++ b/node_modules/storybook-addon-material-ui/dist/components/ThemeSideBar.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 
 var _ContentCopy = _interopRequireDefault(require("@material-ui/icons/ContentCopy"));
 
diff --git a/node_modules/storybook-addon-material-ui/dist/containers/MuiTheme.js b/node_modules/storybook-addon-material-ui/dist/containers/MuiTheme.js
index 5c6a34e..0742ba4 100644
--- a/node_modules/storybook-addon-material-ui/dist/containers/MuiTheme.js
+++ b/node_modules/storybook-addon-material-ui/dist/containers/MuiTheme.js
@@ -9,15 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
-var _createPalette = _interopRequireDefault(require("@material-ui/core/styles/createPalette"));
+var _createPalette = _interopRequireDefault(require("@mui/material/styles/createPalette"));
 
-var _purple = _interopRequireDefault(require("@material-ui/core/colors/purple"));
+var _purple = _interopRequireDefault(require("@mui/material/colors/purple"));
 
-var _green = _interopRequireDefault(require("@material-ui/core/colors/green"));
+var _green = _interopRequireDefault(require("@mui/material/colors/green"));
 
-var _red = _interopRequireDefault(require("@material-ui/core/colors/red"));
+var _red = _interopRequireDefault(require("@mui/material/colors/red"));
 
 var _config = require("../config");
 
@@ -80,9 +80,9 @@ function (_React$Component) {
 
     _this.state = props.initState;
     _this.state.themesAppliedList = props.themesAppliedListInit;
-    _this.state.currentTheme = {}; // this.state.muiTheme = createMuiTheme(props.themesAppliedListInit[props.initState.themeInd]); // Not working yet
+    _this.state.currentTheme = {}; // this.state.muiTheme = createTheme(props.themesAppliedListInit[props.initState.themeInd]); // Not working yet
 
-    _this.state.muiTheme = (0, _styles.createMuiTheme)();
+    _this.state.muiTheme = (0, _styles.createTheme)();
     _this.state.isMount = false;
     _this.isChannelData = false;
     _this.UpdateList = {};
@@ -149,8 +149,8 @@ function (_React$Component) {
     value: function changeTheme(ind) {
       this.needComponentUpdate('ThemeSideBar');
       this.setState({
-        // muiTheme: createMuiTheme(this.state.themesAppliedList[ind]),
-        muiTheme: (0, _styles.createMuiTheme)(),
+        // muiTheme: createTheme(this.state.themesAppliedList[ind]),
+        muiTheme: (0, _styles.createTheme)(),
         themeInd: ind
       });
     }
@@ -201,7 +201,7 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var theme = (0, _styles.createMuiTheme)(this.state.currentTheme);
+      var theme = (0, _styles.createTheme)(this.state.currentTheme);
       return _react.default.createElement(_styles.MuiThemeProvider, {
         theme: theme
       }, _react.default.createElement("div", null, this.props.story));
diff --git a/node_modules/storybook-addon-material-ui/dist/containers/PanelContainer.js b/node_modules/storybook-addon-material-ui/dist/containers/PanelContainer.js
index 14bcd96..cc2b3c5 100644
--- a/node_modules/storybook-addon-material-ui/dist/containers/PanelContainer.js
+++ b/node_modules/storybook-addon-material-ui/dist/containers/PanelContainer.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var beauti = _interopRequireWildcard(require("js-beautify"));
 
@@ -49,7 +49,7 @@ var _global = global,
     document = _global.document,
     window = _global.window;
 var logger = console;
-var lightBaseTheme = (0, _styles.createMuiTheme)();
+var lightBaseTheme = (0, _styles.createTheme)();
 var PROGRESS_STATUS = {
   'button-clone': 'soon',
   // todo: [] button_clone
diff --git a/node_modules/storybook-addon-material-ui/dist/material-desktop/SclAvatar.js b/node_modules/storybook-addon-material-ui/dist/material-desktop/SclAvatar.js
index d7021bc..bd84e62 100644
--- a/node_modules/storybook-addon-material-ui/dist/material-desktop/SclAvatar.js
+++ b/node_modules/storybook-addon-material-ui/dist/material-desktop/SclAvatar.js
@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 
-var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
diff --git a/node_modules/storybook-addon-material-ui/dist/material-desktop/SclToggle.js b/node_modules/storybook-addon-material-ui/dist/material-desktop/SclToggle.js
index 1f20161..4606fa2 100644
--- a/node_modules/storybook-addon-material-ui/dist/material-desktop/SclToggle.js
+++ b/node_modules/storybook-addon-material-ui/dist/material-desktop/SclToggle.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
diff --git a/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgButton.js b/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgButton.js
index 29df50f..1db1f93 100644
--- a/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgButton.js
+++ b/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgButton.js
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
diff --git a/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgIcon.js b/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgIcon.js
index e62a287..eb3f21c 100644
--- a/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgIcon.js
+++ b/node_modules/storybook-addon-material-ui/dist/material-desktop/SvgIcon.js
@@ -52,7 +52,7 @@ function (_React$Component) {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(SvgIcon).call(this, props, context));
 
     require.ensure([], function (require) {
-      var Icon = require('@material-ui/core/SvgIcon');
+      var Icon = require('@mui/material/SvgIcon');
 
       _this.ActionHome = Icon.default;
     });
diff --git a/node_modules/storybook-addon-material-ui/dist/muiTheme.js b/node_modules/storybook-addon-material-ui/dist/muiTheme.js
index 8e4c718..201828e 100644
--- a/node_modules/storybook-addon-material-ui/dist/muiTheme.js
+++ b/node_modules/storybook-addon-material-ui/dist/muiTheme.js
@@ -7,7 +7,7 @@ exports.muiTheme = muiTheme;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/material/styles");
 
 var _config = require("./config");
 
@@ -17,12 +17,12 @@ var _decorator = require("./adk/decorator");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var lightBaseTheme = (0, _styles.createMuiTheme)({
+var lightBaseTheme = (0, _styles.createTheme)({
   typography: {
     useNextVariants: true
   }
 });
-var darkBaseTheme = (0, _styles.createMuiTheme)({
+var darkBaseTheme = (0, _styles.createTheme)({
   palette: {
     type: 'dark'
   },

@Brodzko
Copy link

Brodzko commented Nov 3, 2021

Seconded, is this being maintained? :)

@usulpro
Copy link
Member

usulpro commented Nov 3, 2021

Hey guys! yep I'm maintaining this one and another one with more general use case - https://github.com/react-theming/storybook-addon
which is also compatible with Matertial UI. Please use one which better suits you.
I'm currently not using MaterialUI in my projects but this addon is created by me and other people for the community and it's expected that people who use this addon could also contribute. PRs are always welcome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@markitecht @d0whc3r @urban-intersol @usulpro @aleccaputo @Brodzko @go-to-the-future