mountain_view 0.13.0 → 0.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 55b6e597fb1b7fd3358e9a8b958e9512611209fa
-  data.tar.gz: f861adf78badf1bb7d551838d95d6df1d59b41e3
+SHA256:
+  metadata.gz: eb536f64e62bb86266813a605c993539b180c588c20ff8fe6bfa2fa0c8fd17ad
+  data.tar.gz: 2ed24b72bea5282bd15a1bc71133a1324db520f1014da689a747f948577cc8cb
 SHA512:
-  metadata.gz: 0c4b421cb8214663e41fa70fdea474b1bc7c0c6cc61166a77a042dec930084d0e3856dde4a684fb21a5c721d4c5839453bbe030ac7b845acc334880de3b9ae66
-  data.tar.gz: c51ac8f31f4712e896606a0b0c4469abe981a79bdf811eeecd631b953a096fc5cf8f991fae5cfdd8e38d6452cdb65720f5d2a9c8d5d051243f623ecdaad3708a
+  metadata.gz: 3b78f8febf8e8a276a24497963a8196b55b13be7360ee820229e4d0b7e1df7c8c143c1fb85f452e9b88c64bbda4a1fe60767e8bea5f1197d19cc5859ac7a8fdc
+  data.tar.gz: 3406e1c7c5409f284d6ece57369cc0e71342bc334063438614305e8e4690b4d05cab2695effc57257ad1ba1a706e9c5af837fe78e077b1528f306977c6b5fee2

data/README.md

@@ -3,6 +3,7 @@
 
 [![Build Status](https://travis-ci.org/devnacho/mountain_view.svg?branch=master)](https://travis-ci.org/devnacho/mountain_view)
 [![Code Climate](https://codeclimate.com/github/jgnatch/mountain_view/badges/gpa.svg)](https://codeclimate.com/github/jgnatch/mountain_view)
+[![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)
 
 
 With Mountain View you create reusable components for your Rails frontend, while generating a living style guide.
@@ -234,6 +235,69 @@ MountainView.configure do |config|
 end
 ```
 
+## Customizing Look and Feel
+
+### Customizing the style guide
+
+To customize the styleguide, override the style guide layout by adding `mountain_view.html.erb` (or mountain_view.html.haml if using haml) to your application layouts folder in views. 
+
+### Custom meta data for stub examples
+
+You can customize the title, description for each example in the stub, as well as the classes that surround the stub example.  In order to override the default title, add a `title` key to the `mv_stub_meta` hash.  Additional special keys include `description` which will add a description under the title for a given example and `classes` which will add classes for a specific example. 
+
+E.g: `app/components/card/card.yml`
+```yml
+    -
+      :mv_stub_meta:
+        :title: "Specific Example"
+        :description: "Instructions for use case or other UX considerations"
+        :classes: "black-background"
+      :title: "Aspen Snowmass"
+      :description: "Aspen Snowmass is a winter resort complex located in Pitkin County in western Colorado in the United States. Owned and operated by the Aspen Skiing Company it comprises four skiing/snowboarding areas on four adjacent mountains in the vicinity of the towns of Aspen and Snowmass Village."
+      :link: "http://google.com"
+      :image_url: "http://i.imgur.com/QzuIJTo.jpg"
+      :data:
+      -
+        :title: "Elevation"
+        :number: '7879ft'
+      -
+        :title: "Depth"
+        :number: '71"'
+```
+
+
+## Improving performance
+Rendering a large amount of partials in a request can lead to a performance bottleneck, usually this is caused by the parsing and rendering of template code such as ERB or HAML.
+
+Via a Mountain View component you can render your HTML without touching a template parsing engine, which is super performant! To do this, you'll need to override `render(context, &block)` method, which is inherited from `MountainView::Presenter` class.
+
+For example, if you had a component called `blank_state` with the Erb of: 
+
+```html
+<!-- app/components/blank_state/_blank_state.html.erb -->
+<div class="blank-state <%= properties[:class] %>"></div>
+```
+
+You'd override the `render` method in `blank_state_component.rb` like so: 
+
+```ruby
+# app/components/blank_state/blank_state_component.rb
+class BlankStateComponent < MountainView::Presenter
+  properties :class
+
+  # Override the inherited render method to not read partials from the file system.
+  def render(context, &block)
+    # context is the view we've being rendered from, so it has all Rails helpers
+    context.content_tag(:div, '', class: [
+      'blank-state',
+      properties[:class]
+    ].compact.join(' '))
+  end
+end
+```
+
+Anecdotally, a request which had to render 50 partials and took a whopping 2000ms was reduced to 200ms using this technique.
+
 ## Contributing
 
 See the [contributing guide](./CONTRIBUTING.md).

data/Rakefile

@@ -1,33 +1,29 @@
 begin
-  require 'bundler/setup'
+  require "bundler/setup"
 rescue LoadError
-  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
 end
 
-require 'rdoc/task'
+require "rdoc/task"
 
 RDoc::Task.new(:rdoc) do |rdoc|
-  rdoc.rdoc_dir = 'rdoc'
-  rdoc.title    = 'MountainView'
-  rdoc.options << '--line-numbers'
-  rdoc.rdoc_files.include('README.rdoc')
-  rdoc.rdoc_files.include('lib/**/*.rb')
+  rdoc.rdoc_dir = "rdoc"
+  rdoc.title    = "MountainView"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.rdoc")
+  rdoc.rdoc_files.include("lib/**/*.rb")
 end
 
-
-
-
 Bundler::GemHelper.install_tasks
 
-require 'rake/testtask'
+require "rake/testtask"
 
 Rake::TestTask.new(:test) do |t|
-  t.libs << 'lib'
-  t.libs << 'test'
-  t.pattern = 'test/**/*_test.rb'
+  t.libs << "lib"
+  t.libs << "test"
+  t.pattern = "test/**/*_test.rb"
   t.verbose = false
   t.warning = false
 end
 
-
 task default: :test

data/app/assets/stylesheets/mountain_view/styleguide.css

@@ -18,6 +18,7 @@ body{
   background: #777;
   padding: 20px;
 }
+
 .mv-header__logo{
   font-weight: bold;
   color: white;

data/app/helpers/mountain_view/styleguide_helper.rb

@@ -1,7 +1,7 @@
 module MountainView
   module StyleguideHelper
     def method_missing(method, *args, &block)
-      if method.to_s.end_with?("_path") || method.to_s.end_with?("_url")
+      if method.to_s.end_with?("_path", "_url")
         if main_app.respond_to?(method)
           main_app.send(method, *args)
         else
@@ -13,7 +13,7 @@ module MountainView
     end
 
     def respond_to?(method, include_all = false)
-      if method.to_s.end_with?("_path") || method.to_s.end_with?("_url")
+      if method.to_s.end_with?("_path", "_url")
         if main_app.respond_to?(method, include_all)
           true
         else
@@ -24,6 +24,10 @@ module MountainView
       end
     end
 
+    def respond_to_missing?(method, include_all = false)
+      respond_to?(method, include_all)
+    end
+
     def prettify_word(word)
       word.to_s.split("_").map(&:capitalize).join(" ")
     end

data/app/views/layouts/mountain_view.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Styleguide</title>
+  <title><%= t('mountain_view.layout.styleguide_title') %></title>
   <%= stylesheet_link_tag 'mountain_view/styleguide', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'mountain_view/styleguide', 'data-turbolinks-track' => true %>
 
@@ -9,12 +9,12 @@
 </head>
 <body>
   <div class="mv-header">
-    <div class="mv-header__logo">STYLEGUIDE</div>
+    <div class="mv-header__logo"><%= t('mountain_view.layout.styleguide_title') %></div>
   </div>
   <div class="mv-flex-wrapper">
     <div class="mv-sidebar">
       <% if extra_pages.any? %>
-        <h3>EXTRA PAGES</h3>
+        <h3><%= t('mountain_view.layout.extra_pages') %></h3>
         <ul>
           <%- extra_pages.each do |extra_page| %>
             <li>
@@ -23,7 +23,7 @@
           <% end %>
         </ul>
       <% end %>
-      <h3>COMPONENTS</h3>
+      <h3><%= t('mountain_view.layout.components') %></h3>
       <ul>
         <%- mv_components.each do |component| %>
           <li>

data/app/views/mountain_view/styleguide/_example.html.erb

@@ -1,11 +1,15 @@
 <pre>
-:meta: 'information about the component <%= component_name %>' # Optional
-:stubs: # As many as you need
+:meta: '<%= t('mountain_view.example.sample_meta', component_name: component_name) %>'
+:stubs: <%= t('mountain_view.example.stubs_note') %>
   -
+    :mv_stub_meta:
+      :title: <%= t('mountain_view.example.meta_title') %>
+      :description: <%= t('mountain_view.example.meta_description') %>
+      :classes: <%= t('mountain_view.example.meta_classes') %>
     :id: 1
-    :title: "Some title"
-    :subtitle: "Some subtitle"
+    :title: <%= t('mountain_view.example.title_1') %>
+    :subtitle: <%= t('mountain_view.example.subtitle_1') %>
   -
     :id: 2
-    :title: "Another subtitle"
+    :title: <%= t('mountain_view.example.title_2') %>
 </pre>

data/app/views/mountain_view/styleguide/index.html.erb

@@ -1,22 +1,22 @@
 <div class="mv-main__header">
-  <h1>Styleguide</h1>
+  <h1><%= t('.mountain_view.layout.styleguide_title') %></h1>
 </div>
 
 <% if mv_components.any? %>
   <div class="mv-main__description">
-    Select one of the components from the side to view its examples and documentation.
+    <%= t('mountain_view.index.description') %>
   </div>
 <% else %>
   <div class="mv-hint">
-    <h2><span>Hint:</span>You haven't created any components yet</h2>
+    <h2><%= t('mountain_view.index.hint_component_html') %></h2>
     <ul>
       <li>
-        You can generate your first component by running:
+        <%= t('mountain_view.index.tip_first_component_html') %>
         <br>
         <pre>rails generate mountain_view:component component-name</pre>
       </li>
       <li>
-        Or manually create the following files:
+        <%= t('mountain_view.index.tip_second_component_html') %>
         <br>
         <pre>
 app/

data/app/views/mountain_view/styleguide/show.html.erb

@@ -10,17 +10,21 @@
       </div>
     <% end %>
     <% if @component.component_stubs? %>
-      <% @component.component_stubs.each_with_index do |component_properties, index| %>
+      <% @component.component_stubs.each_with_index do |component_stub, index| %>
           <div class="mv-component">
-            <div class="mv-component__item">
-              <%= render_component @component.name, component_properties.clone %>
+            <div class="mv-component__item <%= component_stub.meta_classes %>">
+              <%= render_component @component.name, component_stub.properties.clone %>
             </div>
             <div class="mv-component__description">
-              <h2><%= @component.title %> <%= index + 1 %></h2>
+              <h2><%= component_stub.meta_title(@component.title, index) %></h2>
+              <% unless component_stub.meta_description.blank? %>
+                <p><%= component_stub.meta_description %></p>
+                <br />
+              <% end %>
               <div class="mv-component__description__definition">
                 <code class="language-ruby">&lt;%= render_component("<%= @component.name %>", {properties as below}) %&gt;</code>
               </div>
-              <%- formatted = JSON.pretty_generate component_properties %>
+              <%- formatted = JSON.pretty_generate component_stub.properties %>
               <div class="mv-component__description__properties">
                 <code class="language-ruby"><%= formatted.gsub(/\"(\S+)?\":/, '\1:') %></code>
               </div>
@@ -30,10 +34,10 @@
     <% end %>
   <% else %>
     <div class="mv-hint">
-      <h2><span>Hint:</span>You have Stubs but they don't follow the correct format</h2>
+      <h2><%= t('mountain_view.show.hint_stub_format_html') %></h2>
       <ul>
         <li>
-          You should write stub examples like this:
+          <%= t('mountain_view.show.tip_stub_format_html') %>
           <br>
           <div class="mv-component__description__properties">
             <code class="language-yaml"><%= render 'example', component_name: @component.name %></code>
@@ -44,10 +48,10 @@
   <% end %>
 <% else %>
   <div class="mv-hint">
-    <h2><span>Hint:</span>To see your component make sure you've created stubs:</h2>
+    <h2><%= t('mountain_view.show.hint_stub_creation_html') %></h2>
     <ul>
       <li>
-        You should write stub examples here:
+        <%= t('mountain_view.show.tip_stub_creation_html') %>
         <br>
         <strong><%= @component.stubs_file %></strong>
         <div class="mv-component__description__properties">

data/config/locales/en.yml

@@ -0,0 +1,25 @@
+en:
+  mountain_view:
+    layout:
+      styleguide_title: Style Guide
+      extra_pages: Extra Pages
+      components: Components
+    show:
+      hint_stub_format_html: <span>Hint:</span>You have Stubs but they don't follow the correct format.
+      tip_stub_format_html: 'You should write stub examples like this:'
+      hint_stub_creation_html: <span>Hint:</span>To see your component make sure you've created stubs
+      tip_stub_creation_html: 'You should write stub examples here:'
+    index:
+      description: Select one of the components from the side to view its examples and documentation.
+      hint_component_html: <span>Hint:</span>You haven't created any components yet
+      tip_first_component_html: 'You can generate your first component by running:'
+      tip_second_component_html: 'Or manually create the following files:'
+    example:
+      sample_meta: "information about the component %{component_name} # Optional"
+      stubs_note: "# As many as you need"
+      meta_title: '"Example Title"'
+      meta_description: '"Example description that gives details on each component use case, or specific UX guidance."'
+      meta_classes: '"Classes that affect the container surrounding the component in the style guide."'
+      title_1: '"Some title"'
+      subtitle_1: '"Some subtitle"'
+      title_2: '"Another title"'

data/config/routes.rb

@@ -7,6 +7,7 @@ MountainView::Engine.routes.draw do
         as: "extra_pages"
   end
 
-  resources :styleguide, only: [:index, :show], path: MountainView.configuration.styleguide_path
+  resources :styleguide, only: [:index, :show],
+                         path: MountainView.configuration.styleguide_path
   extra_routes if MountainView.configuration.extra_pages.any?
 end

data/lib/generators/mountain_view/extra_pages_generator.rb

@@ -12,6 +12,7 @@ module MountainView
         extra_pages.each do |page|
           file_name = "#{views_folder}/#{page}.html.#{template_engine}"
           next if File.exist?(file_name)
+
           create_file file_name
         end
       end

data/lib/mountain_view.rb

@@ -1,7 +1,10 @@
+# frozen_string_literal: true
+
 require "mountain_view/version"
 require "mountain_view/configuration"
 require "mountain_view/presenter"
 require "mountain_view/component"
+require "mountain_view/stub"
 
 module MountainView
   def self.configuration

data/lib/mountain_view/component.rb

@@ -16,10 +16,12 @@ module MountainView
       {}
     end
 
-    def component_stubs
+    def raw_stubs
       if styleguide_stubs.is_a?(Hash)
+        # Stub is coming from Style Guide example file
         styleguide_stubs[:stubs] || {}
       elsif styleguide_stubs.is_a?(Array)
+        # Stub is coming from use of component
         styleguide_stubs
       end
     end
@@ -28,6 +30,12 @@ module MountainView
       component_stubs.any?
     end
 
+    def component_stubs
+      @component_stubs ||= raw_stubs.map do |component_properties|
+        MountainView::Stub.new(component_properties)
+      end
+    end
+
     def stubs_file
       MountainView.configuration.components_path.join(name, "#{name}.yml")
     end

data/lib/mountain_view/engine.rb

@@ -1,6 +1,7 @@
 require "rails"
 
 module MountainView
+  # :nodoc:
   class Engine < ::Rails::Engine
     isolate_namespace MountainView
 
@@ -16,14 +17,14 @@ module MountainView
       app.config.autoload_paths += Dir[component_paths]
     end
 
-    initializer "mountain_view.assets" do |app|
+    initializer "mountain_view.assets" do |_app|
       Rails.application.config.assets.paths <<
         MountainView.configuration.components_path
-      Rails.application.config.assets.precompile += %w( mountain_view/styleguide.css
-                                                        mountain_view/styleguide.js )
+      Rails.application.config.assets.precompile +=
+        %w[mountain_view/styleguide.css mountain_view/styleguide.js]
     end
 
-    initializer "mountain_view.append_view_paths" do |app|
+    initializer "mountain_view.append_view_paths" do |_app|
       ActiveSupport.on_load :action_controller do
         append_view_path MountainView.configuration.components_path
       end

data/lib/mountain_view/presenter.rb

@@ -10,10 +10,10 @@ module MountainView
       @properties = default_properties.deep_merge(properties)
     end
 
-    def render(context, &block)
+    def render(context)
       context.extend ViewContext
       context.inject_component_context self
-      properties[:yield] ||= yield
+      properties[:yield] ||= yield if block_given?
       context.render partial, partial: partial
     end
 
@@ -53,6 +53,7 @@ module MountainView
       def define_property_methods(names = [])
         names.each do |name|
           next if method_defined?(name)
+
           define_method name do
             properties[name.to_sym]
           end
@@ -60,6 +61,7 @@ module MountainView
       end
     end
 
+    # :nodoc:
     module ViewContext
       attr_reader :_component
       delegate :properties, to: :_component
@@ -70,6 +72,7 @@ module MountainView
         methods = component.public_methods(false) - protected_methods
         methods.each do |meth|
           next if self.class.method_defined?(meth)
+
           self.class.delegate meth, to: :_component
         end
       end