disco_app 0.11.0

data/app/assets/javascripts/disco_app/components/custom/shop_row.js.jsx

@@ -0,0 +1,43 @@
+var ShopRow = (props) => {
+
+    var shop = props.shop,
+        editShopUrl = props.editShopUrl.replace(':id', shop.id),
+        domainName = shop.attributes['domain'],
+        countryName = shop.attributes['country-name'],
+        currency = shop.attributes['currency'],
+        planName = shop.attributes['plan-display-name'],
+        editSubscriptionUrl = props.editSubscriptionUrl
+          .replace(':shop_id', shop.id)
+          .replace(':id', shop.attributes['current-subscription-id']),
+        subscriptionPlan = shop.attributes['current-subscription-display-plan'],
+        subscriptionAmount = shop.attributes['current-subscription-display-amount'],
+        subscriptionSource = shop.attributes['current-subscription-source'],
+        installedDuration = shop.attributes['installed-duration'];
+
+    var subscriptionContent = null;
+    if(shop.attributes['current-subscription-id']) {
+      subscriptionContent = <a href={editSubscriptionUrl}>{subscriptionPlan} ({subscriptionAmount})</a>;
+    } else {
+      subscriptionContent = <span>{subscriptionPlan} ({subscriptionAmount})</span>;
+    }
+
+    var planCodeContent = null;
+    if(shop.attributes['current-subscription-display-plan-code']) {
+      planCodeContent = <span><br />{shop.attributes['current-subscription-display-plan-code']}</span>;
+    }
+
+    return (
+        <tr>
+            <td>
+              <a href={editShopUrl}>{domainName}</a><br />
+              <a href={'mailto:' + shop.attributes.email}>{shop.attributes.email}</a>
+            </td>
+            <td>{shop.attributes.status}</td>
+            <td>{countryName}</td>
+            <td>{planName}</td>
+            <td>{subscriptionContent}{planCodeContent}</td>
+            <td>{subscriptionSource}</td>
+            <td>{installedDuration}</td>
+        </tr>
+    )
+};

data/app/assets/javascripts/disco_app/components/custom/shopify_admin_link.js.jsx

@@ -0,0 +1,29 @@
+/**
+ * ShopifyAdminLink
+ *
+ * Renders a link pointing to an object (such as an order or customer) inside
+ * the given shop's Shopify admin. This helper makes it easy to  create links
+ * to objects within the admin that support both right-clicking and opening in
+ * a new tab as well as capturing a left click and redirecting to the relevant
+ * object using `ShopifyApp.redirect()`.
+ *
+ * This component is the React equivalent to the link_to_shopify_admin helper
+ * found in app/helpers/disco_app/application_helper.rb.
+ */
+var ShopifyAdminLink = React.createClass({
+
+    handleClick: function(e) {
+        e.preventDefault();
+        ShopifyApp.redirect(this.props.href);
+    },
+
+    render: function() {
+        var href = ShopifyApp.shopOrigin + '/admin' + this.props.href;
+        return (
+            <a className={this.props.className} href={href} onClick={this.handleClick}>
+                {this.props.label}
+            </a>
+        )
+    }
+
+});

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

@@ -0,0 +1,72 @@
+/**
+ * Base class for form components that provides helper methods
+ * for rendering errors associated with the form
+ **/
+class BaseForm extends React.Component {
+
+  /**
+   * check if the field parameter has errors associated.
+   * if no parameters are given, it checks if there's at least an error at all
+   **/
+  hasErrors(field) {
+    if ((arguments.length === 0 && this.errorKeys().length > 0) ||
+        (this.props.errors && this.props.errors.errors.indexOf(field) > -1)) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * returns a list of fields that contain errors
+   **/
+  errorKeys() {
+    return this.props.errors.errors;
+  }
+
+  /**
+   * returns the type of resource associate with this error
+   **/
+  errorType() {
+    return this.props.errors.type;
+  }
+
+  /**
+   * returns the error messages
+   **/
+  errorMessages() {
+    return this.props.errors.messages;
+  }
+
+  /**
+   * renders basic form errors
+   **/
+  renderErrors() {
+    if (!this.hasErrors()) {
+      return null;
+    }
+
+    var title = "There " + (this.errorMessages().length == 1 ? "is" : "are") + " " + this.errorMessages().length + " error" + (this.errorMessages().length > 1 ? "s" : "") + " for this " + this.errorType() + ":";
+    var errorMessages = this.errorMessages().map(function(message) {
+      return <li>{message}</li>;
+    });
+
+    return (
+      <div className="ui-banner ui-banner--status-error ui-banner--default-vertical-spacing ui-banner--default-horizontal-spacing">
+        <div className="ui-banner__ribbon">
+          <svg className="next-icon next-icon--24" viewBox="0 0 24 24">
+            <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 4c1.4 0 2.7.4 3.9 1L12 8.8 8.8 12 5 15.9c-.6-1.1-1-2.5-1-3.9 0-4.4 3.6-8 8-8zm0 16c-1.4 0-2.7-.4-3.9-1l3.9-3.9 3.2-3.2L19 8.1c.6 1.1 1 2.5 1 3.9 0 4.4-3.6 8-8 8z"></path>
+          </svg>
+        </div>
+        <div className="ui-banner__content">
+          <h2 className="ui-banner__title">
+            {title}
+          </h2>
+          <ul>
+            {errorMessages}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Base class providing helper method for deciding if an input contains errors.
+ * Expects subclasses to have `name` and `errors`  props.
+ **/
+class BaseInput extends React.Component {
+
+  /**
+   * Checks if the component has associated errors or not
+   **/
+  hasError() {
+    if (!(this.props && this.props.name)) {
+      return false;
+    }
+    var fieldName = this.props.name.substring(this.props.name.lastIndexOf("[") + 1, this.props.name.lastIndexOf("]")); 
+    return (fieldName &&
+            this.props.errors && 
+            this.props.errors.errors &&
+            this.props.errors.errors.indexOf(fieldName) > -1);
+  }
+}

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

@@ -0,0 +1,30 @@
+const InputCheckbox = ({ label, name, value, checked, inline, isLast, onChange, disabled = false }) => {
+
+  const id = `${name}[${value}]`;
+
+  const wrapperClassName = classNames({
+    'next-input-wrapper': true,
+    'inline': inline,
+    'sr': !isLast
+  });
+
+  const labelClassName = classNames({
+    'next-label': true,
+    'next-label--switch': true,
+    'inline': inline,
+    'fw-normal': inline
+  });
+
+  const handleChange = (e) => {
+    onChange && onChange(e.target.value);
+  };
+
+  return(
+    <div className={wrapperClassName}>
+      <label htmlFor={id} className={labelClassName}>{label}</label>
+      <input id={id} className="next-checkbox" type="checkbox" value={value} name={name} checked={checked} onChange={handleChange} disabled={disabled} />
+      <span className="next-checkbox--styled" />
+    </div>
+  )
+
+};

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

@@ -0,0 +1,30 @@
+const InputRadio = ({ label, name, value, checked, inline, isLast, onChange, disabled = false }) => {
+
+  const id = `${name}[${value}]`;
+
+  const wrapperClassName = classNames({
+    'next-input-wrapper': true,
+    'inline': inline,
+    'sr': !isLast
+  });
+
+  const labelClassName = classNames({
+    'next-label': true,
+    'next-label--switch': true,
+    'inline': inline,
+    'fw-normal': inline
+  });
+
+  const handleChange = (e) => {
+    onChange && onChange(e.target.value);
+  };
+
+  return(
+    <div className={wrapperClassName}>
+      <label htmlFor={id} className={labelClassName}>{label}</label>
+      <input id={id} className="next-radio" type="radio" value={value} name={name} checked={checked} onChange={handleChange} disabled={disabled} />
+      <span className="next-radio--styled" />
+    </div>
+  )
+
+};

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

@@ -0,0 +1,45 @@
+const InputSelect = ({ id, label, labelHidden, name, options, value, defaultValue, helpMessage, onChange }) => {
+
+  const optionElements = options.map((option) => {
+    return <option key={option.value} value={option.value} disabled={option.disabled}>{option.label}</option>;
+  });
+
+  const labelClassName = classNames({
+    'next-label': true,
+    'helper--visually-hidden': labelHidden
+  });
+
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+
+  let helpElement = null;
+  if(helpMessage) {
+    helpElement = <p className="next-input__help-text">{helpMessage}</p>;
+  }
+
+  return(
+    <div className="next-input-wrapper">
+      <label className={labelClassName} htmlFor={id}>{label}</label>
+      <div className="next-select__wrapper next-input--has-content">
+        <select className="next-select rule-field" id={id} name={name} value={value} defaultValue={defaultValue} onChange={handleChange}>
+          {optionElements}
+        </select>
+        <NextIcon name="next-chevron-down" size={12} />
+      </div>
+      {helpElement}
+    </div>
+  )
+
+};
+
+InputSelect.propTypes = {
+  label: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string,
+  options: React.PropTypes.arrayOf(
+    React.PropTypes.shape({
+      label: React.PropTypes.string.isRequired,
+      value: React.PropTypes.string.isRequired
+    })
+  ).isRequired
+};

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

@@ -0,0 +1,69 @@
+class InputText extends BaseInput {
+
+  render() {
+    const { errors, inputType, name, value, defaultValue, disabled, helpMessage, label, labelHidden, onChange, onKeyDown, onKeyUp, placeholder } = this.props;
+
+    const wrapperClassName = classNames({
+      'next-input-wrapper': true,
+      'next-input-wrapper--is-error': this.hasError() 
+    });
+
+    const labelClassName = classNames({
+      'next-label': true,
+      'helper--visually-hidden': labelHidden
+    });
+
+    const handleChange = (e) => {
+      onChange && onChange(e.target.value);
+    };
+
+    const handleKeyDown = (e) => {
+      onKeyDown && onKeyDown(e);
+    };
+
+    const handleKeyUp = (e) => {
+      onKeyUp && onKeyUp(e);
+    };
+
+    let helpElement = null;
+    if(helpMessage) {
+      helpElement = <p className="next-input__help-text">{helpMessage}</p>;
+    }
+
+    return (
+      <div className={wrapperClassName}>
+        <label className={labelClassName} htmlFor={name}>{label}</label>
+        <input
+          id={name}
+          className="next-input"
+          disabled={disabled}
+          value={value}
+          defaultValue={defaultValue}
+          name={name}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          placeholder={placeholder}
+          type={inputType || 'text'}
+        />
+        {helpElement}
+      </div>
+    );
+  }
+}
+
+InputText.propTypes = {
+  errors: React.PropTypes.object,
+  label: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string,
+  onChange: React.PropTypes.func,
+  placeholder: React.PropTypes.string,
+  helpMessage: React.PropTypes.string,
+  error: React.PropTypes.bool,
+  disabled: React.PropTypes.bool
+};
+
+InputText.defaultProps = {
+  errors: {},
+  disabled: false
+};

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

@@ -0,0 +1,48 @@
+class InputTextArea extends BaseInput {
+
+  render() {
+    const { errors, defaultValue, label, name, onChange, placeholder, helpMessage } = this.props;
+
+    const wrapperClassName = classNames({
+      'next-input-wrapper': true,
+      'next-input-wrapper--is-error': this.hasError() 
+    });
+
+    const handleChange = (e) => {
+      onChange(e.target.value);
+    };
+
+    let helpElement = null;
+    if(helpMessage) {
+      helpElement = <p className="next-input__help-text">{helpMessage}</p>;
+    }
+
+    return (
+      <div className={wrapperClassName}>
+        <label className="next-label" htmlFor={name}>{label}</label>
+        <textarea
+          className="next-textarea"
+          defaultValue={defaultValue}
+          name={name}
+          onChange={handleChange}
+          placeholder={placeholder}
+        />
+        {helpElement}
+      </div>
+    );
+  }
+};
+
+InputTextArea.propTypes = {
+  errors: React.PropTypes.object,
+  defaultValue: React.PropTypes.string,
+  label: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string.isRequired,
+  onChange: React.PropTypes.func.isRequired,
+  placeholder: React.PropTypes.string,
+  helpMessage: React.PropTypes.string
+};
+
+InputTextArea.defaultProps = {
+  errors: {},
+};

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

@@ -0,0 +1,7 @@
+class InputTime extends InputText {
+
+  render() {
+    return <InputText inputType="time" {...this.props} />
+  }
+
+}

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,27 @@
+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>
+  );
+};
+
+Table.PropTypes = {
+  children: React.PropTypes.node.isRequired,
+  scrollable: React.PropTypes.bool,
+  sticky: React.PropTypes.bool
+};
+
+Table.defaultProps = {
+  scrollable: false,
+  sticky: false
+};

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

@@ -0,0 +1,3 @@
+//= require classnames
+//= require_tree ./components
+//= 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