disco_app 0.8.9 → 0.9.0

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/button.es6.jsx

@@ -0,0 +1,13 @@
+const Button = ({ children, disabled, onClick }) => {
+
+  const className = classNames({
+    'btn': true
+  });
+
+  return(
+    <button type="button" disabled={disabled} className={className} onClick={onClick}>
+      {children}
+    </button>
+  )
+
+};

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 }) => {
+
+  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(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} />
+      <span className="next-radio--styled" />
+    </div>
+  )
+
+};

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

@@ -0,0 +1,39 @@
+const InputSelect = ({ id, label, labelHidden, name, options, value, onChange }) => {
+
+  const optionElements = options.map((option) => {
+    return <option key={option.value} value={option.value}>{option.label}</option>;
+  });
+
+  const labelClassName = classNames({
+    'next-label': true,
+    'helper--visually-hidden': labelHidden
+  });
+
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+
+  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} onChange={handleChange}>
+          {optionElements}
+        </select>
+        <NextIcon name="next-chevron-down" size={12} />
+      </div>
+    </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,59 @@
+class InputText extends BaseInput {
+
+  render() {
+    const { errors, name, value, defaultValue, disabled, helpMessage, label, labelHidden, onChange, 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(e.target.value);
+    };
+
+    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}
+          placeholder={placeholder}
+          type="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/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/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">
+          <p>{description}</p>
+        </div>
+      </div>
+
+      <div className="ui-annotated-section__content">
+        {children}
+      </div>
+
+    </section>
+  );
+
+};
+
+UIAnnotatedSection.propTypes = {
+  title: React.PropTypes.string.isRequired,
+  description: React.PropTypes.string,
+  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 ui-empty-state__items--odd-queries ui-empty-state__items--quantity-queries">
+          <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="next-heading next-heading--xl">{title}</h1>
+          <h2 className="next-heading next-heading--subdued">{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-page-actions.es6.jsx

@@ -0,0 +1,39 @@
+const UIPageActions = ({ label, disabled, secondaryHref, secondaryLabel }) => {
+
+  const buttonClassName = classNames({
+    'btn': true,
+    'btn-primary': !disabled,
+    'disabled': disabled
+  });
+
+  let secondaryElement = null;
+  if(secondaryHref) {
+    secondaryElement = (
+      <div className="ui-page-actions__secondary">
+        <div className="button-group">
+          <a className="btn" href={secondaryHref}>{secondaryLabel}</a>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="ui-page-actions">
+      {secondaryElement}
+      <div className="ui-page-actions__primary">
+        <div className="button-group button-group--right-aligned">
+          <button name="button" type="submit" className={buttonClassName} disabled={disabled}>
+            {label}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+UIPageActions.propTypes = {
+  label: React.PropTypes.string.isRequired,
+  disabled: React.PropTypes.bool,
+  secondaryHref: React.PropTypes.string,
+  secondaryLabel: React.PropTypes.string
+};

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

@@ -1,5 +1,2 @@
-/**
- * disco_app/components.js
- * React components common to Disco applications.
- */
+//= require classnames
 //= require_tree ./components

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

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

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,66 @@
+//
+// header.scss
+// Styles for admin header.
+// --------------------------------------------------
+
+.header-row {
+  display: block;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  z-index: 198;
+  left: 230px;
+  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 {
+  -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;
+  font-size: 24px;
+  text-align: left;
+  margin: 0;
+  padding: 10px 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 300;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.breadcrumb {
+  color: #798c9c;
+}
+
+.breadcrumb a, .breadcrumb a:hover {
+  color: #798c9c;
+}

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

@@ -0,0 +1,40 @@
+//
+// layout.scss
+// Styles for admin layout.
+// --------------------------------------------------
+
+body {
+  line-height: 18px;
+  font-size: 13px;
+  color: #31373d;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  text-rendering: optimizeLegibility;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: #ebeef0;
+}
+
+#wrapper {
+  min-height: 100%;
+  background: #ebeef0;
+}
+
+#content {
+  padding: 56px 0 0 230px;
+  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;
+}