disco_app 0.6.2 → 0.6.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f6bcc38c1a00ea30bb3a0fe0a319b7fbedb26c3e022247a8e2cd5bac114459a4
-  data.tar.gz: f5b6885baebbeea7b2d5173803822a175bad1be09b2e65db1d8e0376e1fbf306
+  metadata.gz: ed90cb5423a1bc8af9fee9c49539fb826270afa2cf76f0865f936c9c95cc15e3
+  data.tar.gz: d976b5cf1f1237b2c4d4020107ae0c7ee715b797666ba8af0c4346b4135370ca
 SHA512:
-  metadata.gz: d9bb6a2e5e899768eb3954830140a73adf764275eb9e8f7e1635b6a32e7596b1bfbe0f77591c62e7845f2f640904651d81fe5f6606a358ecfe64ee55149c47dd
-  data.tar.gz: ae895af6f73f42668c2d6b9b2458a81481194becd38d4f9c44e30560a7905d7e8e3d12fff6a5806e18beb3b4082e020a28c95361f356c0ab7df6e54487da0b82
+  metadata.gz: 27abe4c9313cc7576ede08b42b5207312a627bc70c189b6adeca4aba4565289e6877a3fa6a8b4e3f45551d3818fbb4e3c3dcf8de837852483d977f47b0ed297c
+  data.tar.gz: '059fb5c0f3dde3dcb64607695c60c1c80ea08e357cf446460f5b0c716128f740fd86570226083b1f8259343f2d710126befa76c480e048db9f4517cbabf8df93'

data/app/assets/javascripts/disco_app/components/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 = '/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.js

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

data/app/assets/stylesheets/disco_app/bootstrap/_custom.scss

@@ -16,7 +16,7 @@
 @import "bootstrap/type";
 //@import "bootstrap/code";
 @import "bootstrap/grid";
-@import "bootstrap/tables";
+//@import "bootstrap/tables";
 @import "bootstrap/forms";
 @import "bootstrap/buttons";
 

data/app/assets/stylesheets/disco_app/disco/_grid.scss

@@ -0,0 +1,46 @@
+//
+// Replicate the styles for Shopify Admin grid.
+// --------------------------------------------------
+
+.next-grid {
+  display: flex;
+  width: calc(100% - 20px);
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding-top: 10px;
+
+  &:last-of-type {
+    padding-bottom: 10px;
+  }
+}
+
+.next-grid--no-padding {
+  width: 100%;
+
+  &:first-of-type, &:last-of-type {
+    padding: 0;
+  }
+
+  > .next-grid__cell {
+    padding: 0;
+  }
+}
+
+.next-grid--center-aligned, .next-grid--center-both {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.next-grid__cell {
+  @include flex(1, 1, 0%);
+  padding: 10px;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.next-grid__cell--no-flex {
+  @include flex(0 0 auto);
+}

data/app/assets/stylesheets/disco_app/disco/_tables.scss

@@ -0,0 +1,51 @@
+//
+// Replicate the styles for Shopify Admin tables.
+// --------------------------------------------------
+
+table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  &.expanded td {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+th {
+  font-weight: 400;
+  text-align: left;
+  color: #31373d;
+  padding: 8px 10px;
+  border-bottom: 1px solid #ebeef0;
+
+  &.right-aligned {
+    text-align: right;
+  }
+
+  &.is-sortable {
+    cursor: pointer;
+
+    &:hover {
+      background: #eff9fd;
+      color: #479ccf;
+    }
+  }
+}
+
+td {
+  border-bottom: 1px solid #ebeef0;
+  padding: 6px 10px;
+  background: transparent;
+}
+
+tr:last-child > td {
+  border-bottom: none;
+}
+
+.table-hover {
+  tr:hover td {
+    background: #eff9fd;
+  }
+}

data/app/assets/stylesheets/disco_app/disco/_tabs.scss

@@ -43,6 +43,14 @@
   align-items: center;
   justify-content: center;
 
+  &:focus,
+  &:hover {
+    outline: none;
+    background-color: #fafbfc;
+    color: #479ccf;
+    text-decoration: none;
+  }
+
   &.next-tab--is-active {
     background-color: #ffffff;
     color: #31373d;

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

@@ -6,9 +6,11 @@
 @import 'bootstrap/variables';
 @import 'bootstrap/custom';
 @import 'disco/mixins/flexbox';
+@import 'disco/grid';
 @import 'disco/type';
 @import 'disco/sections';
 @import 'disco/cards';
 @import 'disco/buttons';
 @import 'disco/forms';
+@import 'disco/tables';
 @import 'disco/tabs';

data/app/helpers/disco_app/application_helper.rb

@@ -1,5 +1,10 @@
 module DiscoApp::ApplicationHelper
 
+  # Generates 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()`.
   def link_to_shopify_admin(shop, name, admin_path, options = {})
     options[:onclick] = "ShopifyApp.redirect('#{admin_path}'); return false;"
     options[:'data-no-turbolink'] = true

data/lib/disco_app/version.rb

@@ -1,3 +1,3 @@
 module DiscoApp
-  VERSION = "0.6.2"
+  VERSION = "0.6.3"
 end

data/lib/generators/disco_app/mailify/mailify_generator.rb

@@ -4,7 +4,6 @@ module DiscoApp
 
       source_root File.expand_path('../templates', __FILE__)
 
-      # Install the react-rails gem and run its setup.
       def install_gem
         # Add premailer gem to Gemfile.
         gem 'premailer-rails', '~> 1.8.2'

data/lib/generators/disco_app/reactify/reactify_generator.rb

@@ -7,7 +7,7 @@ module DiscoApp
       # Install the react-rails gem and run its setup.
       def install_gem
         # Add gem to Gemfile
-        gem 'react-rails', '~> 1.1.0'
+        gem 'react-rails', '~> 1.4.0'
 
         # Install gem.
         Bundler.with_clean_env do
@@ -26,6 +26,20 @@ module DiscoApp
         application "# Use production variant of React in production.", env: :production
       end
 
+      # Include the DiscoApp component library in the application.js manifest.
+      def add_to_manifest
+        inject_into_file manifest, "//= require disco_app/components\n", { before: "//= require components\n" }
+      end
+
+      private
+
+        # This method of finding the application.js manifest taken from the
+        # install generator in react-rails.
+        # See https://github.com/reactjs/react-rails/blob/3f0af13fa755d6e95969c17728d0354c234f3a37/lib/generators/react/install_generator.rb#L53-L55
+        def manifest
+          Pathname.new(destination_root).join('app/assets/javascripts', 'application.js')
+        end
+
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: disco_app
 version: !ruby/object:Gem::Version
-  version: 0.6.2
+  version: 0.6.3
 platform: ruby
 authors:
 - Gavin Ballard
@@ -243,6 +243,8 @@ extra_rdoc_files: []
 files:
 - Rakefile
 - app/assets/images/disco_app/icon.svg
+- app/assets/javascripts/disco_app/components.js
+- app/assets/javascripts/disco_app/components/shopify_admin_link.js.jsx
 - app/assets/javascripts/disco_app/disco_app.js
 - app/assets/javascripts/disco_app/frame.js
 - app/assets/javascripts/disco_app/shopify-turbolinks.js
@@ -251,7 +253,9 @@ files:
 - app/assets/stylesheets/disco_app/disco/_buttons.scss
 - app/assets/stylesheets/disco_app/disco/_cards.scss
 - app/assets/stylesheets/disco_app/disco/_forms.scss
+- app/assets/stylesheets/disco_app/disco/_grid.scss
 - app/assets/stylesheets/disco_app/disco/_sections.scss
+- app/assets/stylesheets/disco_app/disco/_tables.scss
 - app/assets/stylesheets/disco_app/disco/_tabs.scss
 - app/assets/stylesheets/disco_app/disco/_type.scss
 - app/assets/stylesheets/disco_app/disco/mixins/_flexbox.scss