disco_app 0.11.0

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
+};