fix: updated widgets to be built lib

scripts/deploy-widgets.sh

@@ -1,4 +1,11 @@
 #!/bin/sh
+
+# build project with babel
 cd $TRAVIS_BUILD_DIR/widgets
 yarn install
-yarn deploy-docs
+yarn build
+
+# pubish to npm
+npm install -g npm-cli-login
+npm-cli-login
+npm publish lib

server/src/example/example.handler.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import boom from 'boom';
+import { SimpleEmail } from '../templates';
+
+/* eslint-disable import/prefer-default-export */
+export const makeHandleSimpleEmail = emailInterface => async (request, reply) => {
+    const { firstName, lastName, email } = request.payload;
+    const { renderTemplate, sendEmail } = emailInterface;
+    const component = (
+        <SimpleEmail
+            firstName={firstName}
+            lastName={lastName}
+        />
+    );
+
+    try {
+        const html = renderTemplate(component);
+        const emailInfo = {
+            to: email,
+            subject: 'Hey I\'m a demo',
+            html
+        };
+
+        await sendEmail(emailInfo);
+        return reply({ success: true });
+    } catch (err) {
+        request.log('error', { err, msg: 'unable to send simple email' });
+        return reply(boom.badImplementation());
+    }
+};

server/src/example/example.routes.js

@@ -1,14 +1,14 @@
-import boom from 'boom';
 import joi from 'joi';
+import { makeHandleSimpleEmail } from '.';
 import { format } from '../utility';
 
-const createExampleRoutes = () => {
-    const notImplemented = (request, reply) => reply(boom.notImplemented());
+const createExampleRoutes = (emailInterface) => {
+    const handleSimpleEmail = makeHandleSimpleEmail(emailInterface);
 
     const sendSimpleEmail = {
         method: 'POST',
         path: '/example/simple',
-        handler: notImplemented,
+        handler: handleSimpleEmail,
         config: {
             tags: ['api', 'Example Email'],
             description: 'Sends a simple html email',

server/src/example/index.js

@@ -1,3 +1,4 @@
 import createExampleRoutes from './example.routes';
 
+export { makeHandleSimpleEmail } from './example.handler';
 export default createExampleRoutes;

widgets/.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "env",
+        "stage-2",
+        "react"
+    ]
+}

widgets/lib/index.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _widgets = require('./widgets');
+
+Object.defineProperty(exports, 'Button', {
+    enumerable: true,
+    get: function get() {
+        return _widgets.Button;
+    }
+});
+Object.defineProperty(exports, 'FieldValue', {
+    enumerable: true,
+    get: function get() {
+        return _widgets.FieldValue;
+    }
+});
+Object.defineProperty(exports, 'Footer', {
+    enumerable: true,
+    get: function get() {
+        return _widgets.Footer;
+    }
+});
+Object.defineProperty(exports, 'Header', {
+    enumerable: true,
+    get: function get() {
+        return _widgets.Header;
+    }
+});
+Object.defineProperty(exports, 'PreHeader', {
+    enumerable: true,
+    get: function get() {
+        return _widgets.PreHeader;
+    }
+});
+
+var _utility = require('./utility');
+
+Object.defineProperty(exports, 'renderMJML', {
+    enumerable: true,
+    get: function get() {
+        return _utility.renderMJML;
+    }
+});

widgets/lib/utility/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _renderMjml = require('./render-mjml');
+
+Object.defineProperty(exports, 'renderMJML', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_renderMjml).default;
+  }
+});
+
+var _styles = require('./styles');
+
+Object.defineProperty(exports, 'styles', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_styles).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

widgets/lib/utility/render-mjml.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.renderComponent = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _server = require('react-dom/server');
+
+var _mjml = require('mjml');
+
+var _widgets = require('../widgets');
+
+var _ = require('.');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var renderComponent = exports.renderComponent = function renderComponent(component, theme) {
+    if (!theme.colors && !theme.colors.primary) {
+        throw new Error('invalid structure of theme, theme requires colors and colors.primary');
+    }
+
+    var children = _react2.default.createElement(
+        _widgets.Theme,
+        { styles: theme },
+        component
+    );
+
+    return {
+        __html: (0, _mjml.mjml2html)('\n            <mjml>\n                <mj-head>\n                 <mj-style>\n                     .display-none {\n                         display: none !important;\n                     }\n                 </mj-style>\n                 <mj-attributes>\n                   <mj-all font-family="Helvetica, Arial, sans-serif" />\n                 </mj-attributes>\n               </mj-head>\n                <mj-body>\n                    <mj-container>\n                        ' + (0, _server.renderToStaticMarkup)(children) + '\n                    </mj-container>\n                </mj-body>\n            </mjml>\n        ').html
+    };
+};
+
+// mjml requires that we set the inner html dangerously
+// this should be fine so long as you're not doing
+// anything strange with creating these templates, just be aware.
+
+/* eslint-disable react/no-danger */
+var renderMJML = function renderMJML(component) {
+    var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _.styles;
+    return _react2.default.createElement('div', { dangerouslySetInnerHTML: renderComponent(component, theme) });
+};
+
+exports.default = renderMJML;

widgets/lib/utility/styles.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+// colors from flatuicolors
+var styles = {
+    colors: {
+        primary: '#9b59b6',
+        secondary: '#95a5a6',
+        danger: '#f64747',
+        success: '#2ecc71',
+        warning: '#e67e22'
+    }
+};
+
+exports.default = styles;

widgets/lib/widgets/button/button.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _utility = require('../../utility');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Button = function Button(_ref) {
+    var children = _ref.children,
+        url = _ref.url,
+        buttonType = _ref.buttonType,
+        squared = _ref.squared;
+    var colors = undefined.context.styles.colors;
+
+    var buttonProps = {
+        'background-color': colors[buttonType],
+        color: '#FFFFFF',
+        'border-radius': squared ? '0' : '25',
+        'font-size': '18',
+        'font-weight': 'bold',
+        'text-transform': 'uppercase',
+        'inner-padding': '15 30',
+        href: url,
+        rel: 'noreferrer'
+    };
+
+    return _react2.default.createElement(
+        'mj-button',
+        buttonProps,
+        children
+    );
+};
+
+Button.propTypes = {
+    children: _propTypes2.default.node.isRequired,
+    url: _propTypes2.default.string.isRequired,
+    buttonType: _propTypes2.default.oneOf(Object.keys(_utility.styles.colors)),
+    squared: _propTypes2.default.bool
+};
+
+Button.defaultProps = {
+    buttonType: 'primary',
+    squared: false
+};
+
+Button.contextTypes = {
+    styles: _propTypes2.default.shape({
+        colors: _propTypes2.default.object
+    }).isRequired
+};
+
+exports.default = Button;

widgets/lib/widgets/button/button.stories.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _react3 = require('@storybook/react');
+
+var _addonKnobs = require('@storybook/addon-knobs');
+
+var _utility = require('../../utility');
+
+var _button = require('./button');
+
+var _button2 = _interopRequireDefault(_button);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-enable import/no-extraneous-dependencies */
+
+/* eslint-disable import/no-extraneous-dependencies */
+var buttonTypes = ['primary', 'secondary', 'danger', 'success', 'warning'];
+
+(0, _react3.storiesOf)('Widget/Button', module).addDecorator(_addonKnobs.withKnobs).add('with text', function () {
+    var component = _react2.default.createElement(
+        _button2.default,
+        {
+            url: '',
+            buttonType: (0, _addonKnobs.select)('Button Type', buttonTypes, 'primary'),
+            squared: (0, _addonKnobs.boolean)('Squared', false)
+        },
+        (0, _addonKnobs.text)('Button Text', 'Click Me!')
+    );
+    return (0, _utility.renderMJML)(component);
+});

widgets/lib/widgets/button/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _button = require('./button');
+
+var _button2 = _interopRequireDefault(_button);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _button2.default;