disco_app 0.12.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: cff3f8aab2482607eafbbf0bec88e11dca418c4af76d9a4a74b6fba9d1d08f9d
+  data.tar.gz: 2ea82e6129fd1c1fa0f87c604cdbd3b0c781098c4fdc3e7c16ba238e87eae6f9
+SHA512:
+  metadata.gz: 3f33ce9c3604c826e8b2a35db6d414c98ad1b6c40bb231716e81a9a52f873666147c2b6bd8630e43c676866413da4c95a3ace3f493c8363d71a7b858ea34b439
+  data.tar.gz: d19ae72a0539f46e34091befa91775c388200c50cf09a10df6e5d8460ccaf6bd89620b6e101fc2070a29c58a8e9ebba4a0817aaff2878c78c8dfc6e8392f3d22

data/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'DiscoApp'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/components/disco_app/buttons/model-destroy-button.es6.jsx

@@ -0,0 +1,31 @@
+const ModelDestroyButton = ({ label, modelName, modelUrl, modelsUrl }) => {
+
+  const openModal = () => {
+    ShopifyApp.Modal.confirm({
+      title: 'Delete ' + modelName + '?',
+      message: 'Are you sure you want to delete this ' + modelName + '?',
+      okButton: 'Delete ' + modelName,
+      cancelButton: 'Cancel',
+      style: 'danger'
+    }, handleModalResult);
+  };
+
+  const handleModalResult = (result) => {
+    if(result) {
+      $.ajax({
+        url: modelUrl,
+        method: 'DELETE',
+        contentType: 'application/json',
+        dataType: 'json',
+        success: function() {
+          window.location.href = modelsUrl;
+        }
+      });
+    }
+  };
+
+  return (
+    <Button destroy={true} onClick={openModal}>{label}</Button>
+  );
+
+};

data/app/assets/components/disco_app/forms/model-form.es6.jsx

@@ -0,0 +1,64 @@
+class ModelForm extends BaseForm {
+
+  render() {
+    const { modelTitle, modelName, modelUrl, modelsUrl, children, authenticityToken } = this.props;
+    const errors = this.renderErrors();
+
+    return(
+      <form action={modelUrl ? modelUrl : modelsUrl} acceptCharset="UTF-8" method="POST" data-shopify-app-submit="ea.save">
+        <input type="hidden" name="utf8" value="✓"/>
+        <input type="hidden" name="_method" value={modelUrl ? 'patch' : 'post'} />
+        <input type="hidden" name="authenticity_token" value={authenticityToken}/>
+
+        {(() => {
+          if (!errors) return false;
+          return (
+            {errors}
+          );
+        })()}
+
+        {children}
+
+        <ModelFormEmbeddedAppBar modelTitle={modelTitle} modelsUrl={modelsUrl} />
+        <ModelFormPageActions modelName={modelName} modelUrl={modelUrl} modelsUrl={modelsUrl} />
+      </form>
+    )
+  }
+}
+
+const ModelFormEmbeddedAppBar = ({ modelTitle, modelsUrl }) => {
+  const buttons = {
+    primary: {
+      label: "Save",
+      message: "ea.save"
+    },
+    secondary: [{
+      label: "Cancel",
+      href: modelsUrl
+    }]
+  };
+
+  return (
+    <EmbeddedAppBar title={modelTitle} buttons={buttons} />
+  );
+};
+
+const ModelFormPageActions = ({ modelName, modelUrl, modelsUrl }) => {
+  const primary = [
+    <a href={modelsUrl} className="btn">Cancel</a>,
+    <Button type="submit" primary={true}>{'Save' + (modelUrl ? '' : ' ' + modelName)}</Button>
+  ];
+
+  const secondary = modelUrl ? [
+    <ModelDestroyButton
+      label={'Delete ' + modelName}
+      modelName={modelName}
+      modelUrl={modelUrl}
+      modelsUrl={modelsUrl}
+    />
+  ] : [];
+
+  return (
+    <UIPageActions primary={primary} secondary={secondary} />
+  );
+};

data/app/assets/components/embedded_app/bar.es6.jsx

@@ -0,0 +1,31 @@
+class EmbeddedAppBar extends React.Component {
+
+  componentDidMount() {
+    const { title, icon, buttons, breadcrumb } = this.props;
+    ShopifyApp.Bar.initialize({
+      title: title || DiscoApp.INITIAL_TITLE,
+      icon: icon || DiscoApp.INITIAL_ICON,
+      buttons: buttons,
+      breadcrumb: breadcrumb
+    });
+  }
+
+  render() {
+    return null;
+  }
+
+}
+
+EmbeddedAppBar.propTypes = {
+  title: React.PropTypes.string,
+  icon: React.PropTypes.string,
+  buttons: React.PropTypes.object,
+  breadcrumbs: React.PropTypes.object
+};
+
+EmbeddedAppBar.defaultProps = {
+  title: undefined,
+  icon: undefined,
+  buttons: {},
+  breadcrumbs: undefined
+};

data/app/assets/components/shopify/buttons/_buttons.scss

@@ -0,0 +1,546 @@
+.btn {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.14286rem;
+  line-height: 1.71429rem;
+  font-weight: 400;
+  text-transform: initial;
+  letter-spacing: initial;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.14286rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  padding: 9px 15px;
+  margin: 0;
+  border-radius: 3px;
+  height: auto;
+  white-space: nowrap;
+  text-transform: none;
+  font-family: inherit;
+  font-weight: normal;
+  position: relative;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.btn-default, .btn {
+  background-color: #ffffff;
+  color: #0078bd;
+  border: 1px solid #d3dbe2;
+}
+
+.btn-default:hover, .btn:hover, .btn-default:focus, .btn:focus, .btn-default.focus, .focus.btn, .btn-default:active, .btn:active, .btn-default.active, .active.btn {
+  border: 1px solid #d3dbe2;
+  background-color: #f5f6f7;
+  color: #0078bd;
+  text-decoration: none;
+}
+
+.btn-default:active, .btn:active, .btn-default.active, .active.btn, .btn-default.rte-command-active, .rte-command-active.btn {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) inset;
+  background: #f5f6f7;
+}
+
+.btn-primary {
+  background-color: #0078bd;
+  color: #ffffff;
+  border: 1px solid #0078bd;
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active {
+  border: 1px solid #0069a6;
+  background-color: #0069a6;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn-primary:active, .btn-primary.active, .btn-primary.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #0069a6;
+}
+
+.btn-destroy {
+  background-color: #ffffff;
+  color: #0078bd;
+  border: 1px solid #d3dbe2;
+}
+
+.btn-destroy:hover, .btn-destroy:focus, .btn-destroy.focus, .btn-destroy:active, .btn-destroy.active {
+  border: 1px solid #d3dbe2;
+  background-color: #ff5d5d;
+  color: #0078bd;
+  text-decoration: none;
+}
+
+.btn-destroy:active, .btn-destroy.active, .btn-destroy.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #ff5d5d;
+}
+
+.btn-destroy-no-hover {
+  background-color: #ff5d5d;
+  color: #ffffff;
+  border: 1px solid #ff5d5d;
+}
+
+.btn-destroy-no-hover:hover, .btn-destroy-no-hover:focus, .btn-destroy-no-hover.focus, .btn-destroy-no-hover:active, .btn-destroy-no-hover.active {
+  border: 1px solid #d83e3e;
+  background-color: #d83e3e;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn-destroy-no-hover:active, .btn-destroy-no-hover.active, .btn-destroy-no-hover.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #d83e3e;
+}
+
+.btn-disabled {
+  background-color: #fafbfc;
+  color: #c3cfd8;
+  border: 1px solid #d3dbe2;
+}
+
+.btn-disabled:hover, .btn-disabled:focus, .btn-disabled.focus, .btn-disabled:active, .btn-disabled.active {
+  border: 1px solid #d3dbe2;
+  background-color: #fafbfc;
+  color: #c3cfd8;
+  text-decoration: none;
+}
+
+.btn-disabled:active, .btn-disabled.active, .btn-disabled.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) inset;
+  background: #fafbfc;
+}
+
+.btn-purchase {
+  background-color: #96bf48;
+  color: #ffffff;
+  border: 1px solid #96bf48;
+}
+
+.btn-purchase:hover, .btn-purchase:focus, .btn-purchase.focus, .btn-purchase:active, .btn-purchase.active {
+  border: 1px solid #7ba232;
+  background-color: #7ba232;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn-purchase:active, .btn-purchase.active, .btn-purchase.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #7ba232;
+}
+
+.btn--facebook {
+  background-color: #3b5998;
+  color: #ffffff;
+  border: 1px solid #3b5998;
+}
+
+.btn--facebook:hover, .btn--facebook:focus, .btn--facebook.focus, .btn--facebook:active, .btn--facebook.active {
+  border: 1px solid #344e86;
+  background-color: #344e86;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn--facebook:active, .btn--facebook.active, .btn--facebook.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #344e86;
+}
+
+.btn--twitter {
+  background-color: #55acee;
+  color: #ffffff;
+  border: 1px solid #55acee;
+}
+
+.btn--twitter:hover, .btn--twitter:focus, .btn--twitter.focus, .btn--twitter:active, .btn--twitter.active {
+  border: 1px solid #3ea1ec;
+  background-color: #3ea1ec;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.btn--twitter:active, .btn--twitter.active, .btn--twitter.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: #3ea1ec;
+}
+
+.btn-warning {
+  background-color: transparent;
+  color: #6f4f0c;
+  border: 1px solid #6f4f0c;
+}
+
+.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active {
+  border: 1px solid #6f4f0c;
+  background-color: rgba(111, 79, 12, 0.1);
+  color: #6f4f0c;
+  text-decoration: none;
+}
+
+.btn-warning:active, .btn-warning.active, .btn-warning.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: rgba(111, 79, 12, 0.1);
+}
+
+.btn--outline {
+  background-color: transparent;
+  color: #31373d;
+  border: 1px solid #31373d;
+}
+
+.btn--outline:hover, .btn--outline:focus, .btn--outline.focus, .btn--outline:active, .btn--outline.active {
+  border: 1px solid #31373d;
+  background-color: rgba(49, 55, 61, 0.1);
+  color: #31373d;
+  text-decoration: none;
+}
+
+.btn--outline:active, .btn--outline.active, .btn--outline.rte-command-active {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
+  background: rgba(49, 55, 61, 0.1);
+}
+
+.btn.has-loading::before {
+  background-position: 50% 50% !important;
+  background-repeat: no-repeat !important;
+  content: "";
+  display: none;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.btn:not(.btn-disabled).is-loading, .btn:not(.btn-disabled).is-loading:hover {
+  border: 1px solid #d3dbe2;
+  cursor: default;
+  color: transparent;
+  text-shadow: none;
+}
+
+.btn:not(.btn-disabled).is-loading::before, .btn:not(.btn-disabled).is-loading:hover::before {
+  display: block;
+}
+
+.btn:disabled {
+  cursor: default;
+}
+
+.btn::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.btn .next-icon {
+  margin-top: -13px;
+  margin-bottom: -13px;
+}
+
+.btn .ico {
+  vertical-align: middle;
+  margin-top: -17px;
+  margin-bottom: -13px;
+}
+
+.btn.attached-to-right {
+  border-radius: 0 3px 3px 0;
+  position: relative;
+  left: -2px;
+}
+
+.btn-large {
+  font-size: 16px;
+  padding: 13px 30px;
+  margin: 15px 0;
+}
+
+.btn-slim {
+  padding: 6.5px 10px;
+}
+
+.btn-extra-slim {
+  font-size: 11px;
+  padding: 3.5px 6px;
+}
+
+.btn.btn--full-width {
+  width: 100%;
+  line-height: 1.3;
+  white-space: normal;
+  padding: 13px 15px;
+}
+
+.btn-destroy:hover, .btn-destroy:focus, .btn-destroy:active {
+  border: 1px solid #ff5d5d;
+  color: #ffffff;
+}
+
+.btn-disabled.btn-disabled,
+input[type="submit"].btn-disabled,
+.btn.disabled {
+  cursor: default;
+  box-shadow: none;
+  background: #fafbfc;
+  color: #c3cfd8;
+  border: 1px solid #d3dbe2;
+}
+
+.btn-disabled.btn-disabled.btn--outline,
+input[type="submit"].btn-disabled.btn--outline,
+.btn.disabled.btn--outline {
+  background: transparent;
+  color: #95a7b7;
+  border-color: #95a7b7;
+}
+
+.btn-more::before {
+  content: "•••";
+  text-indent: 0;
+  display: block;
+  font-size: 13px;
+}
+
+.btn-skip {
+  z-index: 226;
+  border-radius: 0;
+  left: 0;
+  min-width: 240px;
+  padding: 20px 0 !important;
+  text-align: center;
+  top: 0;
+}
+
+.btn--icon {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+
+.btn--icon.btn-large {
+  padding-left: 13px;
+  padding-right: 13px;
+}
+
+.btn--icon.btn-slim {
+  padding-left: 7px;
+  padding-right: 7px;
+}
+
+.btn--icon--tiny {
+  padding: 1px;
+}
+
+.btn--plain,
+.btn--link {
+  background-color: transparent !important;
+  border: none;
+  cursor: pointer;
+  color: #0078bd;
+  text-decoration: none;
+  vertical-align: initial;
+}
+
+.btn--plain:hover, .btn--plain:focus, .btn--plain:active,
+.btn--link:hover,
+.btn--link:focus,
+.btn--link:active {
+  background: transparent;
+  box-shadow: none;
+  border: none;
+}
+
+.btn--plain:hover,
+.btn--link:hover {
+  color: #0069a6;
+  text-decoration: underline;
+}
+
+.btn--link {
+  height: auto;
+  padding: 0;
+  line-height: 18px;
+  white-space: normal;
+  text-align: left;
+}
+
+.btn--plain--flush-right {
+  margin-right: -15px;
+}
+
+.btn--link.btn-disabled,
+.btn--plain.btn-disabled {
+  border: none;
+  color: #c3cfd8;
+}
+
+.btn--link.btn-disabled:hover, .btn--link.btn-disabled:active, .btn--link.btn-disabled:focus,
+.btn--plain.btn-disabled:hover,
+.btn--plain.btn-disabled:active,
+.btn--plain.btn-disabled:focus {
+  text-decoration: none;
+}
+
+.segmented {
+  padding: 0;
+  line-height: 22px;
+  font-size: 0;
+  margin: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.segmented > li {
+  position: relative;
+}
+
+.segmented > li .btn {
+  display: inline-block;
+  position: static;
+  border-radius: 0px 0px 0px 0px;
+  border-left-width: 0 !important;
+}
+
+.segmented > li .btn.btn-primary {
+  border: 1px solid #0078bd;
+  border-right-color: #3e89b5;
+}
+
+.segmented > li {
+  list-style-type: none;
+  display: inline-block;
+  margin: 0;
+}
+
+.segmented > li:first-child .btn, .segmented > li.first-child .btn {
+  border-radius: 3px 0px 0px 3px;
+  border-left-width: 1px !important;
+}
+
+.segmented > li:last-child .btn {
+  border-radius: 0px 3px 3px 0px;
+}
+
+.segmented > li:last-child .btn.btn-primary {
+  border-right-color: #0078bd;
+}
+
+.segmented > li.middle-child > .btn {
+  border-radius: 0px;
+}
+
+.segmented > li:only-child > .btn, .segmented > li.only-child > .btn {
+  border-radius: 3px 3px 3px 3px;
+  border-left-width: 1px !important;
+}
+
+.segmented .btn.active {
+  color: #c3cfd8;
+}
+
+.segmented .btn.active.btn-primary {
+  color: #ffffff;
+}
+
+.segmented .btn.active:hover {
+  cursor: default;
+}
+
+.buttons {
+  text-align: right;
+  padding: 10px;
+  background: #fafbfc;
+  border-top: 1px solid #d3dbe2;
+  border-bottom: 1px solid #d3dbe2;
+}
+
+.buttons.slim {
+  padding: 5px 10px;
+}
+
+.buttons.slim .btn {
+  padding: 6px 10px;
+}
+
+.buttons.plain {
+  background: none;
+  padding: 13px 0;
+  border-bottom: none;
+  border-top: 1px solid #d3dbe2;
+}
+
+.buttons.connected {
+  background: #fafbfc;
+  border: 1px solid #d3dbe2;
+  border-top: none;
+}
+
+.buttons .text-action {
+  line-height: 32px;
+}
+
+.button-group {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -10px;
+  margin-top: -10px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.button-group .btn {
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+.button-group .button-group {
+  margin-right: 0;
+}
+
+.button-group--right-aligned {
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.btn-separate {
+  margin-left: 5px;
+}
+
+.btn-separate-left {
+  margin-right: 5px;
+}
+
+.btn-separate-top {
+  margin-top: 10px;
+}
+
+.btn--plain, .btn--link {
+  font-size: 14px;
+  background-color: transparent !important;
+  border: none;
+  cursor: pointer;
+  color: #0078bd;
+  text-decoration: none;
+  vertical-align: initial;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}