disco_app 0.12.0

data/app/assets/components/shopify/ui-layout/_ui-layout.scss

@@ -0,0 +1,157 @@
+.ui-page-actions {
+  @include flexbox();
+  margin: 0 auto;
+  max-width: 1036px;
+  padding: 20px 0;
+  border-top: 1px solid #d3dbe2;
+}
+
+.ui-page-actions__primary {
+  @include flex(1 1 auto);
+  padding-right: 20px;
+}
+
+.ui-page-actions__secondary {
+  @include flex(1 1 auto);
+  padding: 0 20px;
+}
+
+.ui-footer-help {
+  margin: 1.71429rem 0;
+  text-align: center;
+  width: 100%;
+}
+
+.ui-footer-help__content {
+  color: rgba(0,0,0,0.56);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: left;
+  margin: 0 auto;
+  padding: 1.14286rem;
+  border: 1px solid #d3dbe2;
+  border-radius: 3px;
+}
+
+.ui-empty-state {
+  text-align: center;
+
+  .next-heading {
+    font-weight: 300;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.ui-empty-state__title {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.92857rem;
+  line-height: 2.57143rem;
+  font-weight: 400;
+  margin: 0 0 20px;
+
+  @media (min-width: 640px) {
+    font-size: 2.35714rem;
+    line-height: 3.14286rem;
+  }
+}
+
+.ui-empty-state__subtitle {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.14286rem;
+  line-height: 1.71429rem;
+  font-weight: 400;
+  color: rgba(0,0,0,0.56);
+  margin: 0 0 20px;
+
+  @media (min-width: 640px) {
+    font-size: 1.42857rem;
+    line-height: 2rem;
+  }
+}
+
+.ui-empty-state__section {
+  padding: 60px 0;
+}
+
+.ui-empty-state__subsection {
+  @include flexbox();
+  @include flex-direction(column);
+  @include align-items(center);
+
+  max-width: 1000px;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 0 30px;
+
+  & > *+* {
+    margin-bottom: 20px;
+  }
+}
+
+.ui-empty-state__items {
+  @include flexbox();
+  @include flex-wrap(wrap);
+  @include justify-content(center);
+
+  margin-top: -30px;
+  margin-left: -30px;
+  max-width: calc(100% + 30px);
+  width: calc(100% + 30px);
+}
+
+.ui-empty-state__item {
+  @include flex(1 1 263.33333px);
+  margin-top: 30px;
+  margin-left: 30px;
+
+  &:only-of-type {
+    @include flex(0 1 454px);
+  }
+}
+
+.ui-empty-state__subitems {
+  @include flexbox();
+  @include flex-wrap(wrap);
+
+  margin-top: -20px;
+  margin-left: -20px;
+  max-width: calc(100% + 20px);
+  width: calc(100% + 20px);
+}
+
+.ui-empty-state__subitem {
+  margin-top: 20px;
+  margin-left: 20px;
+  position: relative;
+
+  &:first-child {
+    @include flex(1 1 150px);
+    height: 90px;
+    min-width: 0;
+  }
+
+  &:last-child {
+    @include flex(1 1 60%);
+  }
+
+
+  img {
+    margin: 0 auto;
+    max-height: 100%;
+    position: absolute;
+    bottom: 0;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    left: 50%;
+  }
+}
+

data/app/assets/components/shopify/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/components/shopify/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/components/shopify/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/components/shopify/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/components/shopify/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/components/shopify/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/components/shopify/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/components/shopify/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/components/shopify/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/components/shopify/ui-stack/_ui-stack.scss

@@ -0,0 +1,39 @@
+.ui-stack {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: -1.42857rem;
+  margin-top: -1.42857rem;
+
+  > * {
+    margin-left: 1.42857rem;
+    margin-top: 1.42857rem;
+    -webkit-flex: 0 1 auto;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+  }
+}
+
+.ui-stack--wrap {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.ui-stack--alignment-center {
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  -ms-grid-row-align: center;
+  align-items: center;
+}
+
+.ui-stack-item {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.ui-stack-item--fill {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}

data/app/assets/components/shopify/ui-stack/ui-stack-item.es6.jsx

@@ -0,0 +1,21 @@
+const UIStackItem = ({ children, fill }) => {
+  const className = classNames({
+    'ui-stack-item': true,
+    'ui-stack-item--fill': fill
+  });
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
+
+UIStackItem.propTypes = {
+  children: React.PropTypes.node,
+  fill: React.PropTypes.bool
+};
+
+UIStackItem.defaultProps = {
+  fill: false
+};

data/app/assets/components/shopify/ui-stack/ui-stack.es6.jsx

@@ -0,0 +1,24 @@
+const UIStack = ({ children, wrap, center }) => {
+  const className = classNames({
+    'ui-stack': true,
+    'ui-stack--wrap': wrap,
+    'ui-stack--alignment-center': center
+  });
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+};
+
+UIStack.propTypes = {
+  children: React.PropTypes.node,
+  wrap: React.PropTypes.bool,
+  center: React.PropTypes.bool
+};
+
+UIStack.defaultProps = {
+  wrap: true,
+  center: true
+};

data/app/assets/images/disco_app/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>.st0{fill:#231F20;} .st1{fill:#FBAF41;} .st2{fill:#8676D5;} .st3{fill:#9CCC6B;} .st4{fill:#FBCC6B;} .st5{fill:#9CCCD5;} .st6{fill:#FFFFFF;}</style><path id="XMLID_7_" class="st0" d="M12 24l-5.2-3-5.2-3V6l5.2-3L12 0l5.2 3 5.2 3v12l-5.2 3-5.2 3z"/><path id="XMLID_6_" class="st1" d="M2.9 6.8v10.4h18.2z"/><path id="XMLID_5_" class="st2" d="M2.9 17.2h18.2V6.8z"/><path id="XMLID_4_" class="st3" d="M21.1 17.2L12 1.5 2.9 17.2z"/><path id="XMLID_3_" class="st4" d="M7.5 9.4l-4.6 7.8h18.2z"/><path id="XMLID_2_" class="st5" d="M2.9 17.2h18.2l-4.6-7.8z"/><path id="XMLID_1_" class="st6" d="M12 12l-9.1 5.2 9.1 5.3 9.1-5.3z"/></svg>

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

@@ -0,0 +1,61 @@
+var FilterableShopList = React.createClass({
+
+    getDefaultProps: function() {
+        return {
+            filterTabs: [
+                { label: 'All Shops', filter: {} },
+                { label: 'Installed', filter: { 'filter[status]': 'installed' } },
+                { label: 'Uninstalled', filter: { 'filter[status]': 'uninstalled' } }
+            ],
+            availableFilters: {
+                'filter[status]': {
+                    getLabel: function(value) {
+                        return 'Status is ' + value;
+                    }
+                }
+            }
+        }
+    },
+
+    getInitialState: function() {
+        return {
+            filter: {}
+        };
+    },
+
+    onFilterReplace: function(filter) {
+        this.setState({
+            filter: filter
+        });
+    },
+
+    onFilterSet: function(name, value) {
+        this.onFiltersSet([{
+            name: name,
+            value: value
+        }]);
+    },
+
+    onFiltersSet: function(filters) {
+        var nextFilter = $.extend({}, this.state.filter);
+        filters.forEach(function(filter) {
+            if(!filter.value) {
+                delete nextFilter[filter.name];
+            } else {
+                nextFilter[filter.name] = filter.value;
+            }
+        });
+        this.onFilterReplace(nextFilter);
+    },
+
+    render: function() {
+        return (
+            <div className="next-card">
+              <ShopFilterTabs filterTabs={this.props.filterTabs} filter={this.state.filter} onFilterReplace={this.onFilterReplace} />
+              <ShopFilterQuery filter={this.state.filter} onFilterSet={this.onFilterSet} />
+              <ShopList shopsUrl={this.props.shopsUrl} editShopUrl={this.props.editShopUrl} editSubscriptionUrl={this.props.editSubscriptionUrl} filter={this.state.filter} />
+            </div>
+        );
+    }
+
+});

data/app/assets/javascripts/disco_app/components/custom/inline-radio-options.es6.jsx

@@ -0,0 +1,59 @@
+class InlineRadioOptions extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value
+    }
+  }
+
+  onChange(value) {
+    this.setState({
+      value: value
+    })
+  }
+
+  render() {
+    const { name, label, options } = this.props;
+
+    const optionElements = options.map((option, optionIndex) => {
+      return (
+        <InputRadio
+          key={option.value}
+          name={name}
+          value={option.value}
+          label={option.label}
+          inline={true}
+          isLast={optionIndex === (options.length - 1)}
+          checked={option.value === this.state.value}
+          onChange={this.onChange.bind(this)}
+        />
+      );
+    });
+
+    return (
+      <CardSection wrappable={true}>
+        <div className="wrappable__item wrappable__item--no-flex">
+          <span>{label}</span>
+        </div>
+        <div className="wrappable__item">
+          {optionElements}
+        </div>
+      </CardSection>
+    );
+  }
+
+}
+
+InlineRadioOptions.propTypes = {
+  name: React.PropTypes.string,
+  options: React.PropTypes.arrayOf(
+    React.PropTypes.shape({
+      label: React.PropTypes.string.isRequired,
+      value: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.bool
+      ]).isRequired
+    })
+  ).isRequired
+};