disco_app 0.10.5

data/app/assets/javascripts/disco_app/components/ui-kit/forms/ui-form__element.es6.jsx

@@ -0,0 +1,17 @@
+const UIFormElement = ({ helpText, children }) => {
+
+  const className = classNames({
+    'ui-form__element': true,
+    'ui-form__section--help-text': helpText
+  });
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
+
+UIFormElement.propTypes = {
+  children: React.PropTypes.node
+};

data/app/assets/javascripts/disco_app/components/ui-kit/forms/ui-form__group.es6.jsx

@@ -0,0 +1,11 @@
+const UIFormGroup = ({ children }) => {
+  return (
+    <div className="ui-form__group">
+      {children}
+    </div>
+  );
+};
+
+UIFormGroup.propTypes = {
+  children: React.PropTypes.node
+};

data/app/assets/javascripts/disco_app/components/ui-kit/forms/ui-form__section.es6.jsx

@@ -0,0 +1,11 @@
+const UIFormSection = ({ children }) => {
+  return (
+    <div className="ui-form__section">
+      {children}
+    </div>
+  );
+};
+
+UIFormSection.propTypes = {
+  children: React.PropTypes.node
+};

data/app/assets/javascripts/disco_app/components/ui-kit/icons/icon-chevron.es6.jsx

@@ -0,0 +1,33 @@
+const IconChevron = ({ size, direction, disabled }) => {
+
+  const iconClasses = classNames({
+    "next-icon": true,
+    "next-icon--blue": disabled === false,
+    "next-icon--sky-darker": disabled,
+    "next-icon--rotate-180": direction === 'previous',
+    ['next-icon--' + size]: true
+  });
+
+  return (
+    <svg
+      aria-labelledby="next-chevron"
+      role="img"
+      className={iconClasses}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 28 28">
+
+      <path d="M7,3.8l10.5,10.5L7,24.7l2.7,2.7L23,14.3L9.7,1C9.7,1,7,3.8,7,3.8z" />
+    </svg>
+  );
+};
+
+IconChevron.propTypes = {
+  direction: React.PropTypes.oneOf(['next', 'previous']).isRequired,
+  disabled: React.PropTypes.bool,
+  size: React.PropTypes.number
+};
+
+IconChevron.defaultProps = {
+  disabled: false,
+  size: 10
+};

data/app/assets/javascripts/disco_app/components/ui-kit/icons/next-icon.es6.jsx

@@ -0,0 +1,18 @@
+const NextIcon = ({ size, name }) => {
+
+  const className = classNames({
+    "next-icon": true,
+    ['next-icon--size-' + size]: true
+  });
+
+  return (
+    <svg className={className}>
+      <use xlinkHref={'#' + name} />
+    </svg>
+  );
+};
+
+NextIcon.propTypes = {
+  size: React.PropTypes.number,
+  name: React.PropTypes.string
+};

data/app/assets/javascripts/disco_app/components/ui-kit/input_select.es6.jsx

@@ -0,0 +1,21 @@
+const InputSelectOld = ({ label, name, options, value, onChange }) => {
+
+  const id = name;
+
+  const optionElements = options.map((option) => {
+    return <option key={option.value} value={option.value}>{option.label}</option>;
+  });
+
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+
+  return(
+    <div className="next-input-wrapper next-input-wrapper--halved">
+      <select id={id} name={name} value={value} onChange={handleChange}>
+        {optionElements}
+      </select>
+    </div>
+  )
+
+};

data/app/assets/javascripts/disco_app/components/ui-kit/tables/table.es6.jsx

@@ -0,0 +1,22 @@
+const Table = ({ children, scrollable, sticky }) => {
+
+  const className = classNames({
+    'table-wrapper': true,
+    'table-wrapper--scrollable': scrollable,
+    'table-wrapper--sticky': sticky
+  });
+
+  return (
+    <div className={className}>
+      <table className="expanded">
+        {children}
+      </table>
+    </div>
+  );
+};
+
+Card.PropTypes = {
+  children: React.PropTypes.node.isRequired,
+  scrollable: React.PropTypes.bool,
+  sticky: React.PropTypes.bool
+};

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-annotated-section.es6.jsx

@@ -0,0 +1,29 @@
+const UIAnnotatedSection = ({ title, description, children }) => {
+
+  return (
+    <section className="ui-annotated-section">
+
+      <div className="ui-annotated-section__annotation">
+        <div className="ui-annotated-section__title">
+          <h2 className="next-heading next-heading--no-margin">{title}</h2>
+        </div>
+
+        <div className="ui-annotated-section__description">
+          {typeof description == 'string' ? <p>{description}</p> : description}
+        </div>
+      </div>
+
+      <div className="ui-annotated-section__content">
+        {children}
+      </div>
+
+    </section>
+  );
+
+};
+
+UIAnnotatedSection.propTypes = {
+  title: React.PropTypes.string.isRequired,
+  description: React.PropTypes.node,
+  children: React.PropTypes.node
+};

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-empty-state.es6.jsx

@@ -0,0 +1,35 @@
+const UIEmptyState = ({ title, subtitle, image, href, label }) => {
+
+  let imageSubsection = null;
+  if(image) {
+    imageSubsection = (
+      <div className="ui-empty-state__subsection">
+        <div className="ui-empty-state__items">
+          <div className="ui-empty-state__item">
+            <div className="ui-empty-state__subitems">
+              <div className="ui-empty-state__subitem">
+                <img src={image} alt={title} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return(
+    <div className="ui-empty-state">
+      <div className="ui-empty-state__section">
+        <div className="ui-empty-state__subsection">
+          <h1 className="ui-empty-state__title">{title}</h1>
+          <h2 className="ui-empty-state__subtitle">{subtitle}</h2>
+        </div>
+        {imageSubsection}
+        <div className="ui-empty-state__subsection">
+          <a className="btn btn-large btn-primary" href={href}>{label}</a>
+        </div>
+      </div>
+    </div>
+  )
+
+};

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-footer-help.es6.jsx

@@ -0,0 +1,13 @@
+const UIFooterHelp = ({ __html }) => {
+
+  return(
+    <div className="ui-footer-help">
+      <div className="ui-footer-help__content">
+        <div>
+          <p dangerouslySetInnerHTML={{__html: __html}} />
+        </div>
+      </div>
+    </div>
+  )
+
+};

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-layout-item.es6.jsx

@@ -0,0 +1,11 @@
+const UILayoutItem = ({ children }) => {
+  return (
+    <div className="ui-layout__item">
+      {children}
+    </div>
+  );
+};
+
+UILayoutItem.propTypes = {
+  children: React.PropTypes.node
+};

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-layout-section.es6.jsx

@@ -0,0 +1,19 @@
+const UILayoutSection = ({ children, secondary }) => {
+
+  const className = classNames({
+    'ui-layout__section': true,
+    'ui-layout__section--primary': !secondary,
+    'ui-layout__section--secondary': secondary
+  });
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
+
+UILayoutSection.propTypes = {
+  children: React.PropTypes.node,
+  secondary: React.PropTypes.bool
+};

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-layout-sections.es6.jsx

@@ -0,0 +1,11 @@
+const UILayoutSections = ({ children }) => {
+  return (
+    <div className="ui-layout__sections">
+      {children}
+    </div>
+  );
+};
+
+UILayoutSections.propTypes = {
+  children: React.PropTypes.node
+};

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-layout.es6.jsx

@@ -0,0 +1,11 @@
+const UILayout = ({ children }) => {
+  return (
+    <div className="ui-layout">
+      {children}
+    </div>
+  );
+};
+
+UILayout.propTypes = {
+  children: React.PropTypes.node
+};

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-page-actions.es6.jsx

@@ -0,0 +1,13 @@
+const UIPageActions = ({ primary, secondary }) => {
+  return (
+    <div className="ui-page-actions">
+      <UIPageActionsButtons primary={false} buttons={secondary} />
+      <UIPageActionsButtons primary={true} buttons={primary} />
+    </div>
+  );
+};
+
+UIPageActions.propTypes = {
+  primary: React.PropTypes.array.isRequired,
+  secondary: React.PropTypes.array.isRequired
+};

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-page-actions__buttons.es6.jsx

@@ -0,0 +1,27 @@
+const UIPageActionsButtons = ({ primary, buttons }) => {
+
+  const className = classNames({
+    'ui-page-actions__primary': primary,
+    'ui-page-actions__secondary': !primary
+  });
+
+  const buttonGroupClassName = classNames({
+    'button-group': true,
+    'button-group--right-aligned': primary
+  });
+
+  return (
+    <div className={className}>
+      <div className={buttonGroupClassName}>
+        {buttons.map((button, index) => {
+          return React.cloneElement(button, { key: index});
+        })}
+      </div>
+    </div>
+  );
+};
+
+UIPageActionsButtons.propTypes = {
+  primary: React.PropTypes.bool.isRequired,
+  buttons: React.PropTypes.array.isRequired
+};

data/app/assets/javascripts/disco_app/components.js

@@ -0,0 +1,2 @@
+//= require classnames
+//= require_tree ./components

data/app/assets/javascripts/disco_app/disco_app.js

@@ -0,0 +1,9 @@
+/**
+ * disco_app/disco_app.js
+ * Base Javascript for Disco applications.
+ * Assumes that jQuery will be loaded in the parent application.js.
+ */
+//= require react
+//= require react_ujs
+//= require disco_app/shopify-turbolinks
+//= require ./ui-kit

data/app/assets/javascripts/disco_app/frame.js

@@ -0,0 +1,152 @@
+/**
+ * frame.js
+ *
+ * The FrameApp object is a lightweight Javascript object intended to mock the `postMessage` endpoint for Embedded Apps
+ * in the Shopify Admin panel. Eventually, we hope to mock all of the functionality provided by the Shopify Embedded App
+ * SDK.
+ */
+(function() {
+
+    window.FrameApp = (function() {
+
+        FrameApp.name = 'Shopify Dev Frame';
+
+        function FrameApp() {}
+
+
+        /* Initialisation, configuration and helpers.
+        ================================================== */
+
+        /**
+         * Initialise the FrameApp - load configuration, set up event handlers.
+         *
+         * @param config
+         * @returns {*}
+         */
+        FrameApp.init = function(config) {
+            var _this = this;
+            if (config == null) {
+                config = {};
+            }
+            this.loadConfig(config);
+
+            // Use addEventListener if available, otherwise fall back to attachEvent.
+            if (window.addEventListener) {
+                this.iframe.addEventListener("load", FrameApp.__iframeLoadCallback, false);
+                return window.addEventListener("message", FrameApp.__addEventMessageCallback, false);
+            }
+
+            this.iframe.attachEvent("load", FrameApp.__iframeLoadCallback);
+            return window.attachEvent("onMessage", FrameApp.__addEventMessageCallback);
+        };
+
+        /**
+         * Load configuration for the FrameApp. Set defaults if not provided.
+         * @param config
+         */
+        FrameApp.loadConfig = function(config) {
+            this.shopOrigin = config.shopOrigin;
+            this.debug = !!config.debug;
+            this.iframe = config.iframe;
+            if (!this.iframe) {
+                this.log("FrameApp error: no <iframe> specified.");
+            }
+            FrameApp.log('FrameApp configuration loaded.');
+        };
+
+        /**
+         * Log a message to the console, if the app was configured in debug mode.
+         *
+         * @param message
+         * @param force
+         * @returns {*}
+         */
+        FrameApp.log = function(message, force) {
+            if ((typeof console !== "undefined" && console !== null ? console.log : void 0) && (this.debug || force)) {
+                return console.log(message);
+            }
+        };
+
+
+        /* Message sending and event handling.
+        ================================================== */
+
+        FrameApp.__messageHandlers = {};
+
+        /**
+         * Post a message to the <iframe>.
+         *
+         * @param message
+         * @param data
+         * @returns {*}
+         */
+        FrameApp.postMessage = function(message, data) {
+            var json;
+            json = JSON.stringify({
+                message: message,
+                data: data
+            });
+            FrameApp.log("FrameApp client sent " + json + " to ShopifyApp.");
+            return this.iframe.contentWindow.postMessage(json, '*');
+        };
+
+        /**
+         * Add a handler for a received message.
+         *
+         * @param message
+         * @param fn
+         * @returns {Number|*}
+         * @private
+         */
+        FrameApp.__addMessageHandler = function(message, fn) {
+            if (typeof message === "function") {
+                fn = message;
+                message = void 0;
+            }
+            if (!FrameApp.__messageHandlers[message]) {
+                FrameApp.__messageHandlers[message] = [];
+            }
+            return FrameApp.__messageHandlers[message].push(fn);
+        };
+
+        /**
+         * Callback triggered when a postMessage message is received.
+         *
+         * @param e
+         * @returns {*}
+         * @private
+         */
+        FrameApp.__addEventMessageCallback = function(e) {
+            var handler, handlers, message, submitForm, _i, _len;
+            FrameApp.log("FrameApp client received " + e.data + " from " + e.origin);
+            message = JSON.parse(e.data);
+            handlers = [];
+            if (FrameApp.__messageHandlers[message.message]) {
+                handlers = handlers.concat(FrameApp.__messageHandlers[message.message]);
+            }
+            if (FrameApp.__messageHandlers[void 0]) {
+                handlers = handlers.concat(FrameApp.__messageHandlers[void 0]);
+            }
+            for (_i = 0, _len = handlers.length; _i < _len; _i++) {
+                handler = handlers[_i];
+                handler(message.message, message.data);
+            }
+        };
+
+        /**
+         * Callback triggered when our iFrame is loaded.
+         *
+         * @param e
+         * @private
+         */
+        FrameApp.__iframeLoadCallback = function(e) {
+            FrameApp.postMessage('Shopify.API.initialize', {
+                'hi': 'there!'
+            });
+        };
+
+        return FrameApp;
+
+    }).call(this);
+
+}).call(this);

data/app/assets/javascripts/disco_app/shopify-turbolinks.js

@@ -0,0 +1,7 @@
+/**
+ * disco_app/shopify-turbolinks.js
+ * Some tweaks to help Turbolinks play nicely with the Embedded App SDK.
+ */
+jQuery(document).on('page:load', function(e) {
+  ShopifyApp.pushState(window.location.pathname);
+});

data/app/assets/javascripts/disco_app/ui-kit.js

@@ -0,0 +1 @@
+(function(){var t,e,n,s,a,i=function(t,e){return function(){return t.apply(e,arguments)}};t={STYLIZED:"next-input--stylized",SELECT_WRAPPER:"next-select__wrapper",TEXTAREA:"next-textarea",INPUT:"next-input",SELECT:"next-select",LABEL:"next-label"},n={LABEL:{FOCUSED:t.LABEL+"--is-focused"},INPUT:{FOCUSED:t.INPUT+"--is-focused"}},e=[t.INPUT,t.TEXTAREA,t.SELECT],s=function(){function s(){this.handleFocusChange=i(this.handleFocusChange,this),document.addEventListener("focus",this.handleFocusChange,!0),document.addEventListener("blur",this.handleFocusChange,!0)}return s.prototype.handleFocusChange=function(t){var s,a,i,o,r,c,l,u,d;for(u=t.target,a=0,o=e.length;o>a;a++)l=e[a],d=u.classList.contains(l);return d?(c=this.findLabelAndParent(u),i=c[0],r=c[1],s="focus"===t.type,i.classList.toggle(n.LABEL.FOCUSED,s),r.classList.toggle(n.INPUT.FOCUSED,s)):void 0},s.prototype.findLabelAndParent=function(e){var n,s;return n=document.querySelectorAll("label[for='"+e.getAttribute("id")+"']")[0],s=this._findParentNodeByClass(t.SELECT_WRAPPER,e),s||(s=this._findParentNodeByClass(t.STYLIZED,e)),[n,s]},s.prototype._findParentNodeByClass=function(t,e){var n;for(n=e.parentNode;!n.classList.contains(t);)n=n.parentNode;return n.classList.contains(t)?n:void 0},s}(),a=new s}).call(this),function(){}.call(this);

data/app/assets/stylesheets/disco_app/admin/_header.scss

@@ -0,0 +1,75 @@
+//
+// header.scss
+// Styles for admin header.
+// --------------------------------------------------
+
+.header-row {
+  display: block;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  z-index: 198;
+  left: 240px;
+  right: 0;
+  height: 56px;
+  max-width: 100vw;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.07);
+  background: #ffffff;
+}
+
+.header {
+  position: relative;
+  height: 56px;
+  padding: 0 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.header__main {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.42857rem;
+  line-height: 1.71429rem;
+  font-weight: 400;
+  z-index: 2;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 0%;
+  -ms-flex: 1 0 0%;
+  flex: 1 0 0%;
+  -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 10px 0;
+  text-align: left;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.breadcrumb {
+  color: #798c9c;
+}
+
+.breadcrumb a, .breadcrumb a:hover {
+  color: #798c9c;
+}

data/app/assets/stylesheets/disco_app/admin/_layout.scss

@@ -0,0 +1,32 @@
+//
+// layout.scss
+// Styles for admin layout.
+// --------------------------------------------------
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: #ebeef0;
+}
+
+#wrapper {
+  min-height: 100%;
+  background: #ebeef0;
+}
+
+#content {
+  padding: 56px 0 0 240px;
+  width: 100%;
+  box-sizing: border-box;
+  outline: 0;
+  display: block;
+  max-width: 3000px;
+  margin: 0 auto;
+  position: relative;
+  -webkit-transition: -webkit-transform 200ms ease;
+  transition: -webkit-transform 200ms ease;
+  transition: transform 200ms ease;
+  transition: transform 200ms ease, -webkit-transform 200ms ease;
+}