Git Product home page Git Product logo

leewarnock / storybook-addon-material-ui Goto Github PK

View Code? Open in Web Editor NEW

This project forked from react-theming/storybook-addon-material-ui

0.0 2.0 0.0 4.43 MB

:page_with_curl: Addon for storybook wich wrap material-ui components into MuiThemeProvider. This helps and simplifies development of material-ui based components.

Home Page: https://github.com/sm-react/storybook-addon-material-ui

JavaScript 98.71% Batchfile 1.03% Shell 0.26%

storybook-addon-material-ui's Introduction

GitHub version npm version

Storybook-Addon-Material-UI

https://github.com/sm-react/storybook-addon-material-ui

๐ŸŽƒ Check out our Halloween Surprise

Visual theme editor

You can use this project as online theme editor to create new Material-UI themes

Addon for storybook wich wrap material-ui components into MuiThemeProvider. This helps and simplifies development of material-ui based components.

screen1

Features

  • 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

Demo

Explore this live demo project:

Live demo

Example project

You can start with an example project:

git clone -b example_project --single-branch https://github.com/sm-react/storybook-addon-material-ui.git
cd storybook-addon-material-ui\
npm i
npm start

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';

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 '@kadira/storybook';
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 '@kadira/storybook';

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 />
        ));

Usage

Select MATERIAL-UI panel. You can select the theme you need to see and you will have all theme settings in the right sidebar. You can edit it manually or via picker tool (click the icon to the right of the input) screen3

By default you see only assigned fields of selected theme. You can switch to Full settings and all available settings will appear. As you override one of them it will appear in Theme setting. screen6

See details in sreenshorts

After you have made changes in the theme, you can save it and download as *.JSON file.

You can continue to work with this file:

import greyTheme from './greyTheme.json';
addDecorator(greyTheme);

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 welcom 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

smARTLight

@UsulPro @UsulPro @sm-react

storybook-addon-material-ui's People

Contributors

aashnisshah avatar helltux avatar jhedlund79 avatar leewarnock avatar luckey007 avatar m-m-0-0 avatar maryna-yanul avatar minibhati93 avatar radhikadua123 avatar usulpro avatar xrahul avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.