Storybook Addon Material UI

Overview:

The Codacy Badgenpm versionLive demoStorybook Addon Material-UI is a development environment that helps in creating Material-UI components. It is an addon for React Storybook that wraps components into MuiThemeProvider, accelerating and simplifying the development process for Material-UI based applications. The project also provides a demo page where users can discover Material-UI Theme Settings for any component and create custom themes online. Running the project locally in the work environment allows users to take full advantage of its features.

Features:

• Wrapped in the theme provider: The development environment is wrapped in the MuiThemeProvider, allowing developers to start developing with the base light theme.
• Injected TapEvent Plugin: The project has the TapEvent Plugin injected, making it easy to test on mobile devices.
• Switching themes: Users can easily switch between different themes to see how it looks with their components.
• Creating custom themes: Users can create custom themes either by code or using the visual editor.
• Dynamic visual themes editing: The project allows for dynamic editing of themes, providing users with all available theme properties.
• Google material color palette picker: Users can pick colors from the Google material color palette.
• Save made changes and download in JSON file: The project allows users to save the changes they made to themes and download them in a JSON file.
• Part of React Theming: The project is part of React Theming and enables the creation of themable React Components.
• Works with Storybook 3.0: The project is compatible with Storybook 3.0, enabling the use of its features.

Installation:

To quick start with the latest storybook-addon-material-ui, you can check out create-material-ui-app which contains the working setup with create-react-app, Storybook, Material-UI, and storybook-addon-material-ui.

For Storybook 6.1, add storybook-addon-material-ui to the storybook addons:

npm install storybook-addon-material-ui --save-dev

Add the decorator to storybook preview:

import {muiTheme} from 'storybook-addon-material-ui'

 ...

addDecorator(muiTheme())

For Storybook 5 (and older versions), write your stories with Material-UI Addon:

import {muiTheme} from 'storybook-addon-material-ui'

 ...

storiesOf('Button', module)
.addDecorator(muiTheme())
.add('with text', () => (
<Button>Hello Button</Button>
))

Summary:

The Codacy Badgenpm versionLive demoStorybook Addon Material-UI is a valuable development environment for creating Material-UI components. It simplifies the process by wrapping components in MuiThemeProvider and offers features like switching themes, creating custom themes, dynamic theme editing, and integration with Storybook. The project is easy to install and compatible with different versions of Storybook. Overall, it provides a convenient and efficient way to develop Material-UI based applications.