mountain_view 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a8bc6bdc9168d7da291d91b40e86db6b4ece631b
-  data.tar.gz: a9855a90415e16dc33bf1ae7bd4fe4a22c2b8c00
+  metadata.gz: dca4fc8566e7c7e8b7b91837b7a7d8964f06e3e4
+  data.tar.gz: 331ca8d3d5ce0eb17e749a3260d403660ff426bc
 SHA512:
-  metadata.gz: 41f056c0573eb2268292a9f345b8e0ff94fa056decfd70e1d947b6b8d921d152bb9886fd7fabaf5bd906646869f373a3ebcf8080ab128db06854384c45f7ea85
-  data.tar.gz: f83cd6723ca654f0277cf87344d47fa6bfe8e71a92ceed60eb27249e106b2e85a31514a7ff093770af6786eb1cc09b4d3e34dd385b1d1f075b9e0326a5e0db05
+  metadata.gz: 03154f5aa0096d4050a88fd912ba1f71ce4d5826ed828739104e090605bda7e1f66d1940a008719ea58ee095d4eebbd3ec56b3994ccfa8e9dd49162246c38a4f
+  data.tar.gz: b21584d536ab745a423adafafdba71be7cea7c70345725490f424d5ff128eceb84f079fd582f3eac5c3969303d8751c4d163bb4cc173d589bd938333a1010e17

data/README.md

@@ -0,0 +1,109 @@
+# Mountain View
+
+Mountain View helps you create reusable visual components on your Rails
+Application.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'mountain_view'
+
+Then execute:
+
+    $ bundle
+
+## Usage
+
+### Directory Structure
+Create components following this directory structure
+
+```
+app/
+  components/
+    header/
+      _header.html.erb
+      header.css
+      header.js
+      header.yml
+```
+
+### Component Example
+You can write your own templates on erb, haml or any other templating language.
+Same goes with stylesheets and javascripts. You can use scss, sass or
+coffee-script as long as you have these preprocessors running on your app.
+
+```erb
+<!-- app/components/header/_header.html.erb -->
+<div class="header">
+  <h1>This is a header component with the title: <%= properties[:title] %></h1>
+  <h3>And subtitle <%= properties[:subtitle] %></h3>
+</div>
+```
+
+### Using components on your views
+You can then call your components on any view by using the following
+helper:
+
+```erb
+<%= ui_component "header", title: "This is a title", subtitle: "And this is a subtitle" %>
+```
+
+### Assets
+You can require all the components CSS and JS automatically by requiring `mountain_view` in you main JS and CSS files.
+
+```
+//= require mountain_view
+```
+
+### Automatically generated Style Guide
+A style guide will be automatically generated. This styleguide never falls behind and it reflects your components in their latest version.
+
+#### Setting up the style guide
+1) Add the following line to your `routes.rb` file.
+```ruby
+mount MountainView::Engine => "/mountain_view"
+```
+2) Create stubs for your components. This stubs will be the examples in the styleguide.
+
+E.g: `/app/components/card/card.yml`
+```yml
+-
+  :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"'
+-
+  :title: "Sunset on the Mountain"
+  :description: "Three major ranges of the Alps – the Northern Calcareous Alps, Central Alps, and Southern Calcareous Alps – run west to east through Austria. The Central Alps, which consist largely of a granite base, are the largest and highest ranges in Austria."
+  :link: "http://google.com"
+
+```
+3) Vist `http://localhost:3000/mountain_view/styleguide`
+
+#### Example Style Guide
+![mountain_view](https://cloud.githubusercontent.com/assets/623766/7099771/5b06d8da-dfd4-11e4-8558-1b7f026f28ad.gif)
+
+
+## Contributing
+
+1. Fork it ([https://github.com/jgnatch/mountain_view/fork](https://github.com/jgnatch/mountain_view/fork))
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+## Team
+
+### Current Maintainers
+
+* [Esteban Pastorino](https://github.com/kitop)
+* [Ignacio Gutierrez](https://github.com/jgnatch)
+

data/app/assets/javascripts/mountain_view/styleguide.js

@@ -0,0 +1,2 @@
+//= require mountain_view
+//= require mountain_view/prism

data/app/assets/javascripts/mountain_view.js.erb

@@ -1,3 +1,4 @@
+<% depend_on Rails.root.join('app', 'components') %>
 <% Dir.glob(Rails.root.join('app', 'components', '*')) do |component_dir|
   component = File.basename component_dir
   require_asset "#{component}/#{component}"

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

@@ -0,0 +1,126 @@
+/*
+*= require mountain_view
+*= require mountain_view/prism
+*/
+
+/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
+
+body{
+  font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+  padding: 0;
+  margin: 0;
+}
+
+/* HEADER */
+.mv-header{
+  background: #777;
+  padding: 20px;
+}
+.mv-header__logo{
+  font-weight: bold;
+  color: white;
+  font-size: 20px;
+}
+
+/* FlEX WRAPPER */
+
+.mv-flex-wrapper{
+  display: flex;
+}
+
+/* SIDEBAR */
+.mv-sidebar{
+  background: #F7F7F7;
+  width: 18%;
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  padding: 30px 20px;
+  flex:1;
+  min-height: 100vh;
+}
+
+.mv-sidebar h3{
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 25px;
+  color: #444;
+}
+
+.mv-sidebar ul{
+}
+
+.mv-sidebar ul li{
+  margin-bottom: 20px;
+}
+
+.mv-sidebar ul li a{
+  color:#555;
+  font-size: 14px;
+  text-decoration: none;
+  font-weight: 300;
+}
+
+.mv-sidebar ul li a:hover{
+  color:#000;
+}
+
+/* MAIN */
+.mv-main{
+  box-sizing: border-box;
+  width: 82%;
+  float:left;
+  padding: 30px 60px;
+}
+.mv-main__header{
+  margin-bottom: 40px;
+}
+
+.mv-main__header h1{
+  font-weight: 100;
+  font-size: 55px;
+  color: #333;
+}
+
+.mv-main__description {
+}
+
+/* COMPONENT */
+.mv-component{
+  margin-bottom: 150px;
+}
+
+.mv-component__item{
+}
+
+.mv-component__description{
+  padding: 25px;
+  background: #F7F7F7;
+  border: 1px solid #E4E4E4;
+  margin-top:30px;
+}
+
+.mv-component__description h2{
+  font-weight:bold;
+  margin-bottom:20px;
+}
+
+.mv-component__description__definition{
+  margin-bottom:20px;
+}
+
+.mv-component__description__definition code{
+  background: none !important;
+  font-size:14px;
+}
+
+.mv-component__description__properties{
+  background: #fff !important;
+  border:1px solid #e4e4e4;
+  max-height:230px;
+  overflow:auto;
+  font-size: 13px;
+  padding: 30px 20px;
+}
+

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

@@ -1,4 +1,5 @@
-<% Dir.glob(Rails.root.join('app', 'components', '*')) do |component_dir|
+<% depend_on Rails.root.join('app', 'components') %>
+<% Dir.glob(Rails.root.join('app', 'components', '*')).each do |component_dir|
   component = File.basename component_dir
   require_asset "#{component}/#{component}"
 end %>

data/app/controllers/mountain_view/styleguide_controller.rb

@@ -0,0 +1,9 @@
+module MountainView
+  class StyleguideController < ::ApplicationController
+    layout "mountain_view"
+
+    def show
+      @component = params[:id]
+    end
+  end
+end

data/app/helpers/mountain_view/component_helper.rb

@@ -1,9 +1,7 @@
 module MountainView
   module ComponentHelper
-
     def ui_component(slug, properties = {})
       render "#{slug}/#{slug}", properties: properties
     end
-
   end
 end

data/app/helpers/mountain_view/styleguide_helper.rb

@@ -0,0 +1,14 @@
+module MountainView
+  module StyleguideHelper
+    def mv_components
+      Dir.glob(Rails.root.join("app", "components", "*")).map do |component_dir|
+        File.basename component_dir
+      end
+    end
+
+    def styleguide_stubs(component_name)
+      stubs_file = Rails.root.join("app/components/#{component_name}/#{component_name}.yml")
+      YAML.load_file stubs_file
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Styleguide</title>
+  <%= stylesheet_link_tag 'mountain_view/styleguide', media: 'all', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'mountain_view/styleguide', 'data-turbolinks-track' => true %>
+
+  <%= csrf_meta_tags %>
+</head>
+<body>
+  <div class="mv-header">
+    <div class="mv-header__logo">STYLEGUIDE</div>
+  </div>
+  <div class="mv-flex-wrapper">
+    <div class="mv-sidebar">
+      <h3>COMPONENTS</h3>
+      <ul>
+        <%- mv_components.each do |component| %>
+          <li>
+            <%= link_to component.capitalize, styleguide_path(id: component) %>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+    <div class="mv-main">
+      <%= yield %>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,8 @@
+<div class="mv-main__header">
+  <h1>Styleguide</h1>
+</div>
+
+<div class="mv-main__description">
+  Select one of the components from the side to view its examples and documentation.
+</div>
+

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

@@ -0,0 +1,19 @@
+<div class="mv-main__header">
+  <h1><%= @component.capitalize %></h1>
+</div>
+
+<% styleguide_stubs(@component).each_with_index do |component_properties, index| %>
+  <div class="mv-component">
+    <div class="mv-component__item">
+      <%= ui_component @component, component_properties %>
+    </div>
+    <div class="mv-component__description">
+      <h2><%= @component.capitalize %> <%= index + 1 %></h2>
+      <div class="mv-component__description__definition">
+        <code class="language-ruby">&lt;%= ui_component("<%= @component %>", {properties as below}) %&gt;</code>
+      </div>
+      <%- formatted = JSON.pretty_generate component_properties  %>
+      <pre class="mv-component__description__properties language-ruby"><code><%= formatted.gsub(/\"(\S+)?\":/, '\1:') %></code></pre>
+    </div>
+  </div>
+<% end %>

data/config/routes.rb

@@ -0,0 +1,5 @@
+MountainView::Engine.routes.draw do
+  root to: "styleguide#index"
+
+  resources :styleguide, only: [:index, :show]
+end

data/lib/mountain_view/engine.rb

@@ -3,8 +3,12 @@ require 'rails'
 
 module MountainView
   class Engine < ::Rails::Engine
+    isolate_namespace MountainView
+
     initializer "mountain_view.assets" do |app|
       Rails.application.config.assets.paths << app.root.join("app", "components")
+      Rails.application.config.assets.precompile += %w( mountain_view/styleguide.css
+                                                        mountain_view/styleguide.js )
     end
 
     initializer "mountain_view.append_view_paths" do |app|
@@ -12,5 +16,11 @@ module MountainView
         append_view_path app.root.join("app", "components")
       end
     end
+
+    initializer "mountain_view.add_helpers" do
+      ActiveSupport.on_load :action_controller do
+        helper MountainView::ComponentHelper
+      end
+    end
   end
 end

data/lib/mountain_view/version.rb

@@ -1,3 +1,3 @@
 module MountainView
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/test/dummy/app/components/card/_card.html.erb

@@ -0,0 +1,26 @@
+<div class="card <%= 'card--no-img' if properties[:image_url].nil? %>">
+  <%- if properties[:image_url] %>
+    <div class="card__image">
+      <a href="<%= properties[:link] %>"><img alt="<%= properties[:title] %>" src="<%= properties[:image_url] %>">
+      </a>
+    </div>
+  <% end %>
+  <div class="card__content">
+    <h3 class="card__content__title">
+      <a href="<%= properties[:link] %>"><%= properties[:title] %></a>
+    </h3>
+    <%- if properties[:description] %>
+      <p><%= properties[:description] %></p>
+    <%- end %>
+    <div class="card__content__data">
+      <%- if properties[:data] && properties[:data].any? %>
+        <%- properties[:data].each do |data| %>
+          <dl>
+            <dt><%= data[:number] %></dt>
+            <dd><%= data[:title] %></dd>
+          </dl>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/test/dummy/app/components/card/card.css

@@ -0,0 +1,76 @@
+.card{
+  max-width: 300px;
+  box-sizing: border-box;
+  background: #FFF;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
+  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+  -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
+}
+
+.card--no-img{
+  padding: 20px;
+}
+
+.card__image img{
+  border-radius: 4px 4px 0 0;
+  max-width: 100%;
+}
+
+.card__content{
+  padding: 16px;
+}
+
+
+.card__content__title{
+  font-size: 17px;
+  margin:0;
+  line-height: 1;
+  color:#1D7657;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.card__content__title a{
+  color:#1D7657;
+  font-size: 17px;
+  margin: 0 0 5px 0;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.card__content__title a:hover{
+  color:#0B4A34;
+}
+
+.card__content p{
+  color: #B2B2B2;
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+
+.card__content__data{
+  padding: 10px 0;
+}
+
+.card__content__data dl{
+  display: inline-block;
+  width: 32%;
+}
+
+.card__content__data dl dt{
+  font-size: 20px;
+  margin-bottom: 6px;
+  color: #bbb;
+}
+
+.card__content__data dl dd{
+  text-transform: uppercase;
+  font-size: 11px;
+  color: #888;
+  font-weight: bold;
+}

data/test/dummy/app/components/card/card.js

@@ -0,0 +1,3 @@
+if(typeof console !== "undefined") {
+  console.log("card")
+}

data/test/dummy/app/components/card/card.yml

@@ -0,0 +1,33 @@
+-
+  :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"'
+
+
+-
+  :title: "Breckenridge, Colorado"
+  :link: "http://facebook.com"
+  :image_url: "http://i.imgur.com/w7ZyWPg.jpg"
+  :data:
+  -
+    :title: "Open lifts"
+    :number: '30'
+  -
+    :title: "Base"
+    :number: '51"'
+  -
+    :title: "Top"
+    :number: '99"'
+
+-
+  :title: "Sunset on the Mountain"
+  :description: "Three major ranges of the Alps – the Northern Calcareous Alps, Central Alps, and Southern Calcareous Alps – run west to east through Austria. The Central Alps, which consist largely of a granite base, are the largest and highest ranges in Austria."
+  :link: "http://google.com"

data/test/dummy/app/components/header/_header.html.erb

@@ -1,4 +1,6 @@
 <div class="header">
-  <h1>This is a header component with the title: <%= properties[:title] %></h1>
-  <h3>And subtitle <%= properties[:subtitle]</h3>
+  <h1><%= properties[:title] %></h1>
+  <%- if properties[:subtitle] %>
+    <h3><%= properties[:subtitle] %></h3>
+  <% end %>
 </div>

data/test/dummy/app/components/header/header.css

@@ -1,11 +1,26 @@
 .header {
-  font-family: sans-serif;
-  background: #F1F2F4;
-  width: 800px;
-  padding: 10px 100px;
-  color: #257699;
-  text-align: center;
-  font-weight: lighter;
+  margin-bottom: 30px;
+  font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+  position: relative;
+}
+
+.header h1{
   font-size: 30px;
-  border: 1px solid #D0DFE5;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.header h3{
+  font-size: 20px;
+  font-family: 'Georgia';
+  color:#888;
 }
+
+.header::after{
+  content: " ";
+  width: 100px;
+  position: absolute;
+  bottom: -17px;
+  left: 0;
+  border-bottom: 5px solid #2C9140;
+}

data/test/dummy/app/components/header/header.js

@@ -1 +1,3 @@
-console && console.log('header')
+if(typeof console !== "undefined") {
+  console.log("header")
+}

data/test/dummy/app/components/header/header.yml

@@ -0,0 +1,5 @@
+-
+  :title: "20 Mountains you didn't know they even existed"
+  :subtitle: "Buzzfeed title"
+-
+  :title: "You won't believe what happened to this man at Aspen"

data/test/dummy/app/views/layouts/application.html.erb

@@ -7,6 +7,7 @@
   <%= csrf_meta_tags %>
 </head>
 <body>
+<h1>HEADER</h1>
 <%= yield %>
 
 </body>

data/test/dummy/config/application.rb

@@ -1,6 +1,9 @@
 require File.expand_path('../boot', __FILE__)
 
-require 'rails/all'
+require "active_support"
+require "action_controller"
+require "action_view"
+require "sprockets/railtie"
 
 Bundler.require(*Rails.groups)
 require "mountain_view"
@@ -18,6 +21,43 @@ module Dummy
     # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
     # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
     # config.i18n.default_locale = :de
+
+    # support newer rails without warnings
+    config.active_support.test_order = :random rescue nil
+
+    # Settings specified here will take precedence over those in config/application.rb.
+
+    # The test environment is used exclusively to run your application's
+    # test suite. You never need to work with it otherwise. Remember that
+    # your test database is "scratch space" for the test suite and is wiped
+    # and recreated between test runs. Don't rely on the data there!
+    config.cache_classes = true
+
+    # Do not eager load code on boot. This avoids loading your whole application
+    # just for the purpose of running a single test. If you are using a tool that
+    # preloads Rails for running tests, you may have to set it to true.
+    config.eager_load = false
+
+    # Configure static asset server for tests with Cache-Control for performance.
+    config.static_cache_control = 'public, max-age=3600'
+
+    config.assets.enabled = true
+
+    # Show full error reports and disable caching.
+    config.consider_all_requests_local       = true
+    config.action_controller.perform_caching = false
+
+    # Raise exceptions instead of rendering exception templates.
+    config.action_dispatch.show_exceptions = false
+
+    # Disable request forgery protection in test environment.
+    config.action_controller.allow_forgery_protection = false
+
+    # Print deprecation notices to the stderr.
+    config.active_support.deprecation = :stderr
+
+    # Raises error for missing translations
+    # config.action_view.raise_on_missing_translations = true
   end
 end
 

data/test/dummy/config/environment.rb

@@ -2,4 +2,4 @@
 require File.expand_path('../application', __FILE__)
 
 # Initialize the Rails application.
-Rails.application.initialize!
+Dummy::Application.initialize!