react-themable-hoc/dist/stories/AphroditeInterface.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-aphrodite-interface', 'react', '../ThemeManager', 'aphrodite', '@storybook/react', '../themed', './themes', '@storybook/addon-info', './style.css'], factory);
    } else if (typeof exports !== "undefined") {
        factory(module, require('./components'), require('react-themable-hoc-aphrodite-interface'), require('react'), require('../ThemeManager'), require('aphrodite'), require('@storybook/react'), require('../themed'), require('./themes'), require('@storybook/addon-info'), require('./style.css'));
    } else {
        var mod = {
            exports: {}
        };
        factory(mod, global.components, global.reactThemableHocAphroditeInterface, global.react, global.ThemeManager, global.aphrodite, global.react, global.themed, global.themes, global.addonInfo, global.style);
        global.AphroditeInterfaceStory = mod.exports;
    }
})(this, function (module, _components, _reactThemableHocAphroditeInterface, _react, _ThemeManager, _aphrodite, _react3, _themed, _themes, _addonInfo) {
    'use strict';

    var _reactThemableHocAphroditeInterface2 = _interopRequireDefault(_reactThemableHocAphroditeInterface);

    var _react2 = _interopRequireDefault(_react);

    var _ThemeManager2 = _interopRequireDefault(_ThemeManager);

    var _aphrodite2 = _interopRequireDefault(_aphrodite);

    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(_aphrodite2.default);
        _ThemeManager2.default.setStyleInterface(aphroditeInterface);

        // 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: {
                backgroundColor: background
            },
            content: {
                color: color,
                fontSize: '' + fontSize + unit
            }
        };
    })(_components.InnerComponent);

    var ThemedOuterComponent = (0, _themed2.default)(function (_ref2) {
        var background = _ref2.background,
            color = _ref2.color;
        return {
            wrapper: {
                height: '100%',
                overflow: 'hidden',
                textAlign: 'center',
                backgroundColor: 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('AphroditeInterface', (0, _addonInfo.withInfo)('\n            Use [Aphrodite](https://github.com/Khan/aphrodite) with [react-themable-hoc](https://github.com/jtberglund/react-themable-hoc).\n\n            View the [README](https://github.com/jtberglund/react-themable-hoc-aphrodite-interface#react-themable-hoc-jss-interface) for more info.\n\n            ## Usage\n            ```js\n                const aphroditeInterface = new AphroditeInterface();\n                ThemeManager.setStyleInterface(aphroditeInterface);\n            ```\n        ')(function () {
        return _react2.default.createElement(
            ThemedOuterComponent,
            { interfaceType: 'AphroditeInterface' },
            _react2.default.createElement(ThemedInnerComponent, null)
        );
    }));
});