Merge 883c023 into 565c568

komposable · Jun 9, 2018 · 7eb9d74 · 7eb9d74
2 parents 565c568 + 883c023
commit 7eb9d74
Show file tree

Hide file tree

Showing 36 changed files with 371 additions and 3 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,14 @@
+; top-most EditorConfig file
+root = true
+
+; Unix-style newlines
+[*]
+end_of_line = LF
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Upcoming release
 
+**Enhancements:**
+
+- Implement a styleguide view
+- New generator: `rails g komponent:examples` to generate
+  an example file for each existing component
+
 ## v2.1.0 (2018-05-31)
 
 **Enhancements:**

diff --git a/README.md b/README.md
@@ -313,6 +313,25 @@ I18n.available_locales = [:en, :fr]
 > If you have the `rails-i18n` gem in your `Gemfile`, you should whitelist locales to prevent creating a lot of
 > locale files when you generate a new component.
 
+### Styleguide
+
+Update your routes to mount the Komponent engine.
+
+```ruby
+# config/routes.rb
+Rails.application.routes.draw do
+  mount Komponent::Engine => "/" if Rails.env.development?
+
+  # ...
+end
+```
+
+Then you need to update the `_example.html.slim` file you have inside your components. This file is used to render the examples.
+
+Finally just visit to `http://localhost:3000/styleguide`.
+
+If you have existing components, you can generate all their example files at once with `rails g komponent:examples`
+
 ### Configuration
 
 #### Change default root path

diff --git a/app/controllers/komponent/styleguide_controller.rb b/app/controllers/komponent/styleguide_controller.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require "komponent/component"
+
+module Komponent
+  class StyleguideController < ::ApplicationController
+    layout 'komponent'
+    rescue_from ActionView::MissingTemplate, with: :missing_template
+
+    def index; end
+
+    def show
+      @component = Komponent::Component.find(params[:id])
+    end
+
+    private
+
+    def missing_template
+      render "komponent/styleguide/missing_template"
+    end
+  end
+end
diff --git a/app/views/komponent/styleguide/index.html.erb b/app/views/komponent/styleguide/index.html.erb
@@ -0,0 +1,15 @@
+<div class="header">
+  <h1>Styleguide</h1>
+</div>
+
+<% if komponent_components.any? %>
+  <div class="description">
+    Select one of the components from the side to view its examples and documentation.
+  </div>
+<% else %>
+  <div class="hint">
+    <h2><span>Hint:</span>You haven't created any components yet</h2>
+    <p>You can generate your first component by running:</p>
+    <pre>rails generate component component-name</pre>
+  </div>
+<% end %>
diff --git a/app/views/komponent/styleguide/missing_template.html.erb b/app/views/komponent/styleguide/missing_template.html.erb
@@ -0,0 +1,3 @@
+<h1>Example missing</h1>
+
+<p>Please create <code><%= @component.path %>/_example.html.<%= Rails.application.config.app_generators.rails[:template_engine] || :erb %></code> file.</p>
diff --git a/app/views/komponent/styleguide/show.html.erb b/app/views/komponent/styleguide/show.html.erb
@@ -0,0 +1 @@
+<%= render partial: @component.example_view %>
diff --git a/app/views/layouts/komponent.html.erb b/app/views/layouts/komponent.html.erb
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Styleguide</title>
+  <%= javascript_pack_tag "komponent" %>
+  <%= stylesheet_pack_tag "komponent", media: "all" %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+  <%=c 'komponent/header' %>
+  <%=c 'komponent/sidebar' %>
+  <%=c 'komponent/container' do %>
+    <%= yield %>
+  <% end %>
+  <%=c 'komponent/footer' %>
+</body>
+</html>
diff --git a/config/routes.rb b/config/routes.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+Komponent::Engine.routes.draw do
+  resources :styleguide, only: %i[index show] #, path: Komponent.configuration.styleguide_path
+end
diff --git a/features/component_generator.feature b/features/component_generator.feature
@@ -11,6 +11,7 @@ Feature: Component generator
       | awesome_button/awesome_button.css           |
       | awesome_button/awesome_button.js            |
       | awesome_button/awesome_button_component.rb  |
+      | awesome_button/_example.html.erb            |
     And the file named "index.js" should contain:
     """
     import "components/awesome_button/awesome_button";
@@ -30,6 +31,7 @@ Feature: Component generator
       | admin/sub_admin/awesome_button/admin_sub_admin_awesome_button.css          |
       | admin/sub_admin/awesome_button/admin_sub_admin_awesome_button.js           |
       | admin/sub_admin/awesome_button/admin_sub_admin_awesome_button_component.rb |
+      | admin/sub_admin/awesome_button/_example.html.erb                           |
     And the file named "index.js" should contain:
     """
     import "components/admin";
@@ -84,6 +86,7 @@ Feature: Component generator
     When I run `rails generate component AwesomeButton`
     And I cd to "frontend/components/awesome_button"
     Then a file named "_awesome_button.html.erb" should exist
+    And a file named "_example.html.erb" should exist
 
   Scenario: Generate component with custom template engine defined to `haml`
     Given a file named "config/initializers/custom_configuration.rb" with:
@@ -93,6 +96,7 @@ Feature: Component generator
     When I run `rails generate component AwesomeButton`
     And I cd to "frontend/components/awesome_button"
     Then a file named "_awesome_button.html.haml" should exist
+    And a file named "_example.html.haml" should exist
 
   Scenario: Generate component with custom template engine defined to `slim`
     Given a file named "config/initializers/custom_configuration.rb" with:
@@ -102,6 +106,7 @@ Feature: Component generator
     When I run `rails generate component AwesomeButton`
     And I cd to "frontend/components/awesome_button"
     Then a file named "_awesome_button.html.slim" should exist
+    And a file named "_example.html.slim" should exist
 
   Scenario: Generate component with custom stylesheet engine defined to `scss`
     Given a file named "config/initializers/custom_configuration.rb" with:

diff --git a/frontend/components/komponent/container/_komponent_container.html.erb b/frontend/components/komponent/container/_komponent_container.html.erb
@@ -0,0 +1,3 @@
+<div class="komponent-container">
+  <%= yield %>
+</div>
diff --git a/frontend/components/komponent/container/komponent_container.css b/frontend/components/komponent/container/komponent_container.css
@@ -0,0 +1,4 @@
+.komponent-container {
+  margin-left: 24rem;
+  margin-top: 4rem;
+}
diff --git a/frontend/components/komponent/container/komponent_container.js b/frontend/components/komponent/container/komponent_container.js
@@ -0,0 +1 @@
+import "./komponent_container.css";
diff --git a/frontend/components/komponent/container/komponent_container_component.rb b/frontend/components/komponent/container/komponent_container_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentContainerComponent
+  extend ComponentHelper
+end
diff --git a/frontend/components/komponent/footer/_komponent_footer.html.erb b/frontend/components/komponent/footer/_komponent_footer.html.erb
@@ -0,0 +1,3 @@
+<div class="komponent-footer">
+  Built with <%= link_to "Komponent", "http://komponent.io", target: "_blank" %>
+</div>
diff --git a/frontend/components/komponent/footer/komponent_footer.css b/frontend/components/komponent/footer/komponent_footer.css
@@ -0,0 +1,21 @@
+.komponent-footer {
+  font-size: 1.4rem;
+  position: absolute;
+  bottom: 4rem;
+  right: 4rem;
+  text-align: center;
+
+  &,
+  a {
+    color: #999;
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: #0038ea;
+    }
+  }
+}
diff --git a/frontend/components/komponent/footer/komponent_footer.js b/frontend/components/komponent/footer/komponent_footer.js
@@ -0,0 +1 @@
+import "./komponent_footer.css";
diff --git a/frontend/components/komponent/footer/komponent_footer_component.rb b/frontend/components/komponent/footer/komponent_footer_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentFooterComponent
+  extend ComponentHelper
+end
diff --git a/frontend/components/komponent/header/_komponent_header.html.erb b/frontend/components/komponent/header/_komponent_header.html.erb
@@ -0,0 +1,3 @@
+<div class="komponent-header">
+  <div class="logo">Styleguide</div>
+</div>
diff --git a/frontend/components/komponent/header/komponent_header.css b/frontend/components/komponent/header/komponent_header.css
@@ -0,0 +1,9 @@
+.komponent-header {
+  align-items: center;
+  background-color: #0038ea;
+  color: white;
+  display: flex;
+  font-size: 1.8rem;
+  height: 8rem;
+  padding: 2rem;
+}
diff --git a/frontend/components/komponent/header/komponent_header.js b/frontend/components/komponent/header/komponent_header.js
@@ -0,0 +1 @@
+import "./komponent_header.css";
diff --git a/frontend/components/komponent/header/komponent_header_component.rb b/frontend/components/komponent/header/komponent_header_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentHeaderComponent
+  extend ComponentHelper
+end
diff --git a/frontend/components/komponent/index.js b/frontend/components/komponent/index.js
@@ -0,0 +1,4 @@
+import "components/komponent/container/komponent_container";
+import "components/komponent/footer/komponent_footer";
+import "components/komponent/header/komponent_header";
+import "components/komponent/sidebar/komponent_sidebar";
diff --git a/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb b/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb
@@ -0,0 +1,10 @@
+<div class="komponent-sidebar">
+  <div class="komponent-sidebar-title">Components</div>
+  <ul class="komponent-sidebar-items">
+    <%- komponent_components.each do |_k, component| %>
+      <li class="komponent-sidebar-item">
+        <%= link_to_unless_current component.title, styleguide_path(id: component.id) %>
+      </li>
+    <% end %>
+  </ul>
+</div>
diff --git a/frontend/components/komponent/sidebar/komponent_sidebar.css b/frontend/components/komponent/sidebar/komponent_sidebar.css
@@ -0,0 +1,35 @@
+.komponent-sidebar {
+  background-color: #dbe1f3;
+  bottom: 0;
+  left: 0;
+  padding: 4rem 2rem;
+  position: absolute;
+  top: 8rem;
+  width: 20rem;
+
+  &-title {
+    color: #0038ea;
+    font-size: 1.4rem;
+    font-weight: bold;
+    letter-spacing: 0.2rem;
+    margin: 0 0 2rem;
+    text-transform: uppercase;
+  }
+
+  &-items {
+    line-height: 1.25;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &-item + &-item {
+    margin-top: 0.5rem;
+  }
+
+  a {
+    color: #333;
+    display: block;
+    text-decoration: none;
+  }
+}
diff --git a/frontend/components/komponent/sidebar/komponent_sidebar.js b/frontend/components/komponent/sidebar/komponent_sidebar.js
@@ -0,0 +1 @@
+import "./komponent_sidebar.css";
diff --git a/frontend/components/komponent/sidebar/komponent_sidebar_component.rb b/frontend/components/komponent/sidebar/komponent_sidebar_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentSidebarComponent
+  extend ComponentHelper
+end
diff --git a/lib/generators/component/component_generator.rb b/lib/generators/component/component_generator.rb
@@ -34,6 +34,10 @@ def create_locale_files
     end
   end
 
+  def create_example_view_file
+    template "example.html.#{template_engine}.erb", component_path + "_example.html.#{template_engine}"
+  end
+
   def import_to_packs
     root_path = default_path
     base_path = root_path + "components"

diff --git a/lib/generators/component/templates/example.html.erb.erb b/lib/generators/component/templates/example.html.erb.erb
@@ -0,0 +1,3 @@
+<h1><%= component_name %></h1>
+
+<%%= component "<%= component_name %>" %>
diff --git a/lib/generators/component/templates/example.html.haml.erb b/lib/generators/component/templates/example.html.haml.erb
@@ -0,0 +1,3 @@
+%h1 <%= component_name %>
+
+= component "<%= component_name %>"
diff --git a/lib/generators/component/templates/example.html.slim.erb b/lib/generators/component/templates/example.html.slim.erb
@@ -0,0 +1,3 @@
+h1 <%= component_name %>
+
+= component "<%= component_name %>"
diff --git a/lib/generators/komponent/examples_generator.rb b/lib/generators/komponent/examples_generator.rb
@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+require 'komponent/component'
+
+module Komponent
+  module Generators
+    class ExamplesGenerator < Rails::Generators::Base
+      source_root File.expand_path('../../component/templates', __FILE__)
+
+      def create_example_files
+        Komponent::Component.all.each do |name, component|
+          @name = name
+          create_example_view_file
+        end
+      end
+
+      protected
+
+      # TODO: refactoring
+      # all methods below come from ComponentGenerator
+      def split_name
+        @name.split(/[:,::,\/]/).reject(&:blank?).map(&:underscore)
+      end
+
+      def component_path
+        path_parts = [default_path, "components", *split_name]
+
+        Pathname.new(path_parts.join("/"))
+      end
+
+      def component_name
+        split_name.last.underscore
+      end
+
+      def rails_configuration
+        Rails.application.config
+      end
+
+      def app_generators
+        rails_configuration.app_generators
+      end
+
+      def template_engine
+        app_generators.rails[:template_engine] || :erb
+      end
+
+      def default_path
+        rails_configuration.komponent.root
+      end
+
+      private
+
+      def create_example_view_file
+        template "example.html.#{template_engine}.erb", component_path + "_example.html.#{template_engine}"
+      end
+    end
+  end
+end
diff --git a/lib/komponent.rb b/lib/komponent.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-require "komponent/version"
+require 'komponent/version'
 
 module Komponent
-  require 'komponent/railtie' if defined?(Rails)
+  require 'komponent/engine' if defined?(Rails)
 end