Comments (6)
Brodzko
commented on June 7, 2024
10
Seconded, is this being maintained? :)
from storybook-addon-material-ui.
usulpro
commented on June 7, 2024
4
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!
from storybook-addon-material-ui.
aleccaputo
commented on June 7, 2024
Same here.
from storybook-addon-material-ui.
urbanmarcen
commented on June 7, 2024
Same here.
from storybook-addon-material-ui.
go-to-the-future
commented on June 7, 2024
Same here.
from storybook-addon-material-ui.
d0whc3r
commented on June 7, 2024
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'
},from storybook-addon-material-ui.
Related Issues (20)
- Breaks Storyshots HOT 1
- MuiThemeProvider not Working with Separate Storybook Project HOT 3
- Support for 4.x version HOT 10
- Cannot download theme HOT 2
- Is it possible to show properties other than primary, secondary and error? HOT 1
- Unable to get themes to work on story components HOT 12
- Angular Compatibility? HOT 2
- Is there support for TSX with this?
- Not passing themes to muiTheme() causes rendering errors HOT 5
- Possible to add globally to all stories?
- Support Storybook v6.1 HOT 3
- Wrong behaviour with Storybook 6.X HOT 4
- Localization HOT 3
- Material-ui V5 (next) HOT 2
- Custom themes are not displaying when switch HOT 1
- Consider making MUI peer dependency deps prominent in docs HOT 2
- Decorator Adding Extra Div HOT 2
- Addon doesn't show well HOT 15
- Plugin triggers React warnings HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook-addon-material-ui.