react-themable-hoc/dist/stories/Props.story.js

React higher-order-components that allow for css-in-js-style themes.

(function (global, factory) {
    if (typeof define === "function" && define.amd) {
        define(['module', 'react-themable-hoc-aphrodite-interface', 'react', './components', '../ThemeManager', '@storybook/react', '../themed', './themes', '@storybook/addon-info'], factory);
    } else if (typeof exports !== "undefined") {
        factory(module, require('react-themable-hoc-aphrodite-interface'), require('react'), require('./components'), require('../ThemeManager'), require('@storybook/react'), require('../themed'), require('./themes'), require('@storybook/addon-info'));
    } else {
        var mod = {
            exports: {}
        };
        factory(mod, global.reactThemableHocAphroditeInterface, global.react, global.components, global.ThemeManager, global.react, global.themed, global.themes, global.addonInfo);
        global.PropsStory = mod.exports;
    }
})(this, function (module, _reactThemableHocAphroditeInterface, _react, _components, _ThemeManager, _react3, _themed, _themes, _addonInfo) {
    'use strict';

    var _reactThemableHocAphroditeInterface2 = _interopRequireDefault(_reactThemableHocAphroditeInterface);

    var _react2 = _interopRequireDefault(_react);

    var _ThemeManager2 = _interopRequireDefault(_ThemeManager);

    var _themed2 = _interopRequireDefault(_themed);

    var _themes2 = _interopRequireDefault(_themes);

    function _interopRequireDefault(obj) {
        return obj && obj.__esModule ? obj : {
            default: obj
        };
    }

    function setup() {
        // Setup the ThemeManager with Aprodite
        var aphroditeInterface = new _reactThemableHocAphroditeInterface2.default();
        _ThemeManager2.default.setStyleInterface(aphroditeInterface);

        // Add our themes
        Object.keys(_themes2.default).forEach(function (themeName) {
            _ThemeManager2.default.addTheme(themeName, _themes2.default[themeName]);
        });
    }

    (0, _react3.storiesOf)('ThemableHOC', module).addDecorator(function (story) {
        return _react2.default.createElement(
            _components.ThemeSwitcher,
            { setup: setup },
            story()
        );
    }).add('Style based on props', (0, _addonInfo.withInfo)('\n            `react-themable-hoc` allows you to create stylesheets based on the props passed to your component.\n        ')(function () {
        return _react2.default.createElement(_components.StyledWithProps, { color: 'red' });
    }));
});