react-themable-hoc/dist/stories/JSSInterface.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', './components', 'react-themable-hoc-jss-interface', 'react', '../ThemeManager', 'jss', 'jss-preset-default', '@storybook/react', '../themed', './themes', '@storybook/addon-info', './style.css'], factory);
    } else if (typeof exports !== "undefined") {
        factory(module, require('./components'), require('react-themable-hoc-jss-interface'), require('react'), require('../ThemeManager'), require('jss'), require('jss-preset-default'), require('@storybook/react'), require('../themed'), require('./themes'), require('@storybook/addon-info'), require('./style.css'));
    } else {
        var mod = {
            exports: {}
        };
        factory(mod, global.components, global.reactThemableHocJssInterface, global.react, global.ThemeManager, global.jss, global.jssPresetDefault, global.react, global.themed, global.themes, global.addonInfo, global.style);
        global.JSSInterfaceStory = mod.exports;
    }
})(this, function (module, _components, _reactThemableHocJssInterface, _react, _ThemeManager, _jss, _jssPresetDefault, _react3, _themed, _themes, _addonInfo) {
    'use strict';

    var _reactThemableHocJssInterface2 = _interopRequireDefault(_reactThemableHocJssInterface);

    var _react2 = _interopRequireDefault(_react);

    var _ThemeManager2 = _interopRequireDefault(_ThemeManager);

    var _jss2 = _interopRequireDefault(_jss);

    var _jssPresetDefault2 = _interopRequireDefault(_jssPresetDefault);

    var _themed2 = _interopRequireDefault(_themed);

    var _themes2 = _interopRequireDefault(_themes);

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

    _jss2.default.setup((0, _jssPresetDefault2.default)());

    function setup() {
        // Setup the ThemeManager with JSS
        var jssInterface = new _reactThemableHocJssInterface2.default();
        _ThemeManager2.default.setStyleInterface(jssInterface);

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

    //////////
    // Normally the HOC with the styles will be in the same file as the component,
    // but we've moved it out so we can reuse the same components with multiple
    // css-in-js interfaces for the stories
    //////////

    var ThemedInnerComponent = (0, _themed2.default)(function (_ref) {
        var background = _ref.background,
            color = _ref.color,
            fontSize = _ref.fontSize,
            unit = _ref.unit;
        return {
            wrapper: {
                'background-color': background
            },
            content: {
                color: color,
                'font-size': '' + fontSize + unit
            }
        };
    })(_components.InnerComponent);

    var ThemedOuterComponent = (0, _themed2.default)(function (_ref2) {
        var background = _ref2.background,
            color = _ref2.color;
        return {
            wrapper: {
                height: '100%',
                overflow: 'hidden',
                'text-align': 'center',
                'background-color': background
            },
            header: {
                color: color
            }
        };
    })(_components.OuterComponent);

    (0, _react3.storiesOf)('ThemableHOC', module)
    // Toggles themes by pressesing 't'
    .addDecorator(function (story) {
        return _react2.default.createElement(
            _components.ThemeSwitcher,
            { setup: setup },
            story()
        );
    }).add('JSSInterface', (0, _addonInfo.withInfo)('\n            Use [jss](https://github.com/cssinjs/jss) with [react-themable-hoc](https://github.com/jtberglund/react-themable-hoc).\n\n            View the [README](https://github.com/jtberglund/react-themable-hoc-jss-interface#react-themable-hoc-jss-interface) for more info.\n\n            ## Usage\n            ```js\n                const jssInterface = new JSSInterface();\n                ThemeManager.setStyleInterface(jssInterface);\n            ```\n        ')(function () {
        return _react2.default.createElement(
            ThemedOuterComponent,
            { interfaceType: 'JSSInterface' },
            _react2.default.createElement(ThemedInnerComponent, null)
        );
    }));
});