Skip to content
Addon for storybook wich wrap material-ui components into MuiThemeProvider. 📃 This helps and simplifies development of material-ui based components.
JavaScript HTML
Branch: version-1
Clone or download
Pull request Compare This branch is 23 commits behind react-theming:version-1.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.scripts alpha.14 Sep 11, 2018
.storybook update dependencies Oct 21, 2018
docs upd readme Dec 24, 2016
public switch to the fresh stack Sep 9, 2018
src fix Apr 8, 2019
.babelrc alpha.14 Sep 11, 2018
.eslintrc.js implement mods Sep 11, 2018
.gitignore switch to the fresh stack Sep 9, 2018
.npmignore deleted dist Oct 15, 2016
CODE_OF_CONDUCT.md Contributor Covenant Oct 10, 2016
README.md Correct addon registration syntax Apr 28, 2019
package.json alpha.18 Apr 8, 2019
register.js fix register Jun 10, 2018
yarn.lock alpha.18 Apr 8, 2019

README.md

GitHub version npm version Live demo

Storybook Addon Material-UI

The core of React Theming project

Storybook Addon Provides development environment wich helps creating Material-UI Components. This is addon for React Storybook wich wraps your components into MuiThemeProvider. This accelerates and simplifies the development process for Material-UI based applications.

You can use this project's demo page to discover Material-UI Theme Settings for any component and create your own new themes right online. But to take full advantage of this project run it locally in your work environment.

screen1

Features 💫

Live demo

  • Wrapped in the theme provider. Just start to develop with base light theme.
  • Injected TapEvent Plugin. Test on mobile devices.
  • Switching themes. See how it looks in one click.
  • Creating your custom theme. By code or in visual editor.
  • Dynamic visual themes editing. Discover the all avalibale theme properties.
  • Google material color palette picker
  • Save made changes and download in JSON file
  • Part of React Theming. Create themable React Components.
  • Works with Storybook 3.0

Quick Start

In order to quick start with the latest storybook-addon-material-ui you can check out create-material-ui-app

It contains the working setup with:

  • create-react-app
  • Storybook
  • Material-UI
  • storybook-addon-material-ui

Roadmap 🚠

We have many plans and ideas for further development. See projects about what kind of features we plan to implement in the future. We create this tool for your convenience and productivity, so we are always happy to hear your ideas and wishes.

Getting Started 📑

First, install the addon

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

Add this line to your addons.js file (create this file inside your storybook config directory if needed).

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

Now, write your stories with Material-UI Addon. By default your stories will be provided with Light Base Theme and Dark Base Theme

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';
import {muiTheme} from 'storybook-addon-material-ui';

// Import some examples from material-ui
import CardExampleControlled from '../CardExampleControlled.jsx';
import RaisedButtonExampleSimple from '../RaisedButtonExampleSimple.jsx';
import DatePickerExampleSimple from '../DatePickerExampleSimple.jsx';

storiesOf('Material-UI', module)
// Add the `muiTheme` decorator to provide material-ui support to your stories.
// If you do not specify any arguments it starts with two default themes
// You can also configure `muiTheme` as a global decorator.
    .addDecorator(muiTheme())
    .add('Card Example Controlled', () => (
            <CardExampleControlled />
        ))
    .add('Raised Button Example Simple', () => (
            <RaisedButtonExampleSimple />
        ))
    .add('Date Picker Example Simple', () => (
            <DatePickerExampleSimple />
        ));

Note : You can switch between the loaded themes. Out of the box, you have two base themes, but you can simply add your custom themes like this:

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';

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

import CardExampleControlled from '../CardExampleControlled.jsx';
import RaisedButtonExampleSimple from '../RaisedButtonExampleSimple.jsx';
import DatePickerExampleSimple from '../DatePickerExampleSimple.jsx';

// Create your own theme like this.
// Note: you can specify theme name in `themeName` field. Otherwise it will be displayed by the number.
// you can specify only required fields overriding the `Light Base Theme`
const newTheme = {
    themeName: 'Grey Theme',
    palette: {
        primary1Color: '#00bcd4',
        alternateTextColor: '#4a4a4a',
        canvasColor: '#616161',
        textColor: '#bdbdbd',
        secondaryTextColor: 'rgba(255, 255, 255, 0.54)',
        disabledColor: '#757575',
        accent1Color: '#607d8b',
    },
};



storiesOf('Material-UI', module)
    .addDecorator(muiTheme([newTheme]))
    .add('Card Example Controlled', () => (
            <CardExampleControlled />
        ))
    .add('Raised Button Example Simple', () => (
            <RaisedButtonExampleSimple />
        ))
    .add('Date Picker Example Simple', () => (
            <DatePickerExampleSimple />
        ));

Feedback

You can left your opinion about this project via anonymous survey.

Query string parameters

As you select themes and other options it stores in adress bar line. So this state is retained when you refresh the page and you can use direct links to the desired states.

http://localhost:9001/?theme-ind=0&theme-sidebar=true&theme-full=true

CONTRIBUTING 🙋

@airbnb Code Triagers Badge

🔧 Developers:

Our team welcome all contributing, testing, bug fixing. If you would like to help contribute to the project feel free to make an issue, PR or get in touch with me.

🎀 Designers:

We would really welcome the involvement of designers in this project. We are very interested in your opinion about working with this tool, the possibility of joint work of the designer and developer as well as its appearance and capabilities

Credits

@UsulPro @UsulPro @react-theming

You can’t perform that action at this time.