All Projects → react-theming → Storybook Addon

react-theming / Storybook Addon

Licence: mit
Develop themable components with Emotion/Styled Components/Material-UI with help of Storybook & React Theming

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Storybook Addon

create-material-ui-app
create-react-app + storybook + storybook-addon-material-ui
Stars: ✭ 55 (-54.92%)
Mutual labels:  addon, material-ui, storybook, theming
React Next Boilerplate
🚀 A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: ✭ 129 (+5.74%)
Mutual labels:  boilerplate, styled-components, emotion
Arc
React starter kit based on Atomic Design
Stars: ✭ 2,780 (+2178.69%)
Mutual labels:  boilerplate, styled-components, storybook
Storybook Addon Styled Component Theme
storybook addon
Stars: ✭ 168 (+37.7%)
Mutual labels:  addon, styled-components, storybook
Storybook Addon Material Ui
Addon for storybook wich wrap material-ui components into MuiThemeProvider. 📃 This helps and simplifies development of material-ui based components.
Stars: ✭ 513 (+320.49%)
Mutual labels:  addon, material-ui, storybook
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+5740.98%)
Mutual labels:  theming, styled-components, emotion
Meteor Apollo Starter Kit
Meteor, Apollo, React, PWA, Styled-Components boilerplate
Stars: ✭ 91 (-25.41%)
Mutual labels:  boilerplate, styled-components, storybook
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: ✭ 52 (-57.38%)
Mutual labels:  styled-components, emotion, theming
storybook-styled-components
No description or website provided.
Stars: ✭ 76 (-37.7%)
Mutual labels:  styled-components, addon, storybook
React Cdk
under development - React Component Development Kit with Storybook
Stars: ✭ 583 (+377.87%)
Mutual labels:  boilerplate, developer-tools, storybook
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-4.1%)
Mutual labels:  boilerplate, material-ui, styled-components
Gp Vue Boilerplate
Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with vuejs.
Stars: ✭ 71 (-41.8%)
Mutual labels:  boilerplate, storybook
Horror
😱 React HTML elements with CSS-in-JS
Stars: ✭ 78 (-36.07%)
Mutual labels:  styled-components, emotion
React Starter
🚀 A minimal react boilerplate featuring easy-peasy state management and styled-components
Stars: ✭ 79 (-35.25%)
Mutual labels:  boilerplate, styled-components
Theme Builder
The theming system helps you in building a theme of your choice and apply it to test live. Why wait? Just give it a try.
Stars: ✭ 82 (-32.79%)
Mutual labels:  theming, styled-components
Artemis Dev Tool
An Apollo GraphQL Query Schema Testing Tool
Stars: ✭ 66 (-45.9%)
Mutual labels:  developer-tools, material-ui
Create Mui Theme
online tool for creating material-ui themes
Stars: ✭ 80 (-34.43%)
Mutual labels:  material-ui, theming
React95
A React components library with Win95 UI
Stars: ✭ 1,779 (+1358.2%)
Mutual labels:  styled-components, storybook
Gatsby Starter Procyon
An opinionated Gatsby starter designed for trash-eating pandas.
Stars: ✭ 88 (-27.87%)
Mutual labels:  boilerplate, material-ui
Koa React Notes Web
🤓 A simple SPA built using Koa (2.5.1) as the backend and React (16.4.1) as the frontend. Features MySQL integration, user authentication, CRUD note actions, and more.
Stars: ✭ 61 (-50%)
Mutual labels:  boilerplate, styled-components

npm version Storybook

Storybook Addon @ React Theming

Storybook addon for Styled Components, Emotion, Material-UI and any other theming solution. Allows to develop themed components in isolation.

npm i --save-dev @react-theming/storybook-addon

Demo

example

Features 💫

  • Universal - can be used with any styling library
  • Switching between themes from addon panel.
  • Change a color and see how it affects to your components
  • Easily copy-paste paths of nesting theme props into your code
  • Auto changes background
  • Supports dark Storybook theme

Usage

specify addon in .storybook/main.js

// .storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: ['@react-theming/storybook-addon'],
};

or in .storybook/addons.js for older versions of Storybook

import '@react-theming/storybook-addon/register';

Then you'll need to add a decorator with a ThemeProvider of your library. This project is not related to any particular styling solutions, instead, you can use any of theme providers you're using in your project.

import ThemeProvider from 'library-of-your-choice';
import { withThemes } from '@react-theming/storybook-addon';
import { theme } from '../src/theme';

// create decorator
const themingDecorator = withThemes(ThemeProvider, [theme]);

ThemeProvider should accept a theme via theme props. This is usually the case for the most common styling libraries like Styled Components, Emotion, Material-UI.

In case of non standard ThemeProvider you can pass providerFn function in options:

const providerFn = ({ theme, children }) => {
  return <ThemeProvider theme={muTheme}>{children}</ThemeProvider>;
};

const themingDecorator = withThemes(null, [theme], { providerFn });

You can auto switch background for dark themes by passing onThemeSwitch function:

export const onThemeSwitch = context => {
  const { theme } = context;
  const background = theme.name === 'Dark theme' ? '#2c2f33' : 'white';
  const parameters = {
    backgrounds: {
      default: background,
    },
  };
  return {
    parameters,
  };
};

const themingDecorator = withThemes(null, [theme], { onThemeSwitch });

Below the use cases for most popular styling libraries:

Using with Emotion

// .storybook/preview.js

import { ThemeProvider } from 'emotion-theming';
import { addDecorator } from '@storybook/react';
import { withThemes } from '@react-theming/storybook-addon';

import { theme } from '../src/theme';

// pass ThemeProvider and array of your themes to decorator
addDecorator(withThemes(ThemeProvider, [theme]));

Using with Styled Components

// .storybook/preview.js

import { ThemeProvider } from 'styled-components';
import { addDecorator } from '@storybook/react';
import { withThemes } from '@react-theming/storybook-addon';

import { theme } from '../src/theme';

// pass ThemeProvider and array of your themes to decorator
addDecorator(withThemes(ThemeProvider, [theme]));

Using with Material-UI

// theme.js
import { red } from '@material-ui/core/colors';

// A custom theme for this app
const theme = {
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
};

export default theme;
// .storybook/preview.js

import { ThemeProvider } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core/styles';
import { addDecorator } from '@storybook/react';
import { withThemes } from '@react-theming/storybook-addon';

import theme from '../src/theme';

const providerFn = ({ theme, children }) => {
  const muTheme = createMuiTheme(theme);
  return <ThemeProvider theme={muTheme}>{children}</ThemeProvider>;
};

// pass ThemeProvider and array of your themes to decorator
addDecorator(withThemes(null, [theme], { providerFn }));
// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import App from './App';
import theme from './theme';

ReactDOM.render(
  <ThemeProvider theme={createMuiTheme(theme)}>
    <App />
  </ThemeProvider>,
  document.querySelector('#root'),
);

There is an example app with CRA, Material-UI and Storybook Addon Demo Source

Credits

Created with ❤︎ to React and Storybook by Oleg Proskurin [React Theming]
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].