Merge f89dd9b into 7a23a76

komposable · Aug 21, 2018 · 425cf86 · 425cf86
2 parents 7a23a76 + f89dd9b
commit 425cf86
Show file tree

Hide file tree

Showing 44 changed files with 568 additions and 49 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/.rubocop.yml b/.rubocop.yml
@@ -54,9 +54,6 @@ Naming/PredicateName:
 Naming/VariableName:
   Enabled: true
 
-Lint/DeprecatedClassMethods:
-  Enabled: true
-
 Layout/AlignParameters:
   Enabled: true
 
@@ -117,3 +114,6 @@ Layout/SpaceInsideParens:
 
 Layout/TrailingWhitespace:
   Enabled: true
+
+Lint/DeprecatedClassMethods:
+  Enabled: true
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## Upcoming release
 
+**Enhancements:**
+- Implement a styleguide view
+- New generator: `rails g komponent:examples` to generate
+  an example file for each existing component
+
 **Breaking changes:**
 - Dropped support for Rails 4.2
 

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,20 @@
+# frozen_string_literal: true
+
+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', status: :not_found
+    end
+  end
+end
diff --git a/app/views/komponent/styleguide/index.html.erb b/app/views/komponent/styleguide/index.html.erb
@@ -0,0 +1,9 @@
+<h1>Styleguide</h1>
+
+<% if komponent_components.any? %>
+  <p>Select one of the components from the side to view its examples and documentation.</p>
+<% else %>
+  <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>
+<% 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";
@@ -116,6 +118,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:
@@ -125,6 +128,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:
@@ -134,6 +138,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/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>
+
+<%%= cdoc "<%= 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 %>
+
+= cdoc "<%= 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 %>
+
+= cdoc "<%= component_name %>"
diff --git a/lib/generators/komponent/examples_generator.rb b/lib/generators/komponent/examples_generator.rb
@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require 'komponent/component'
+require File.expand_path('../utils', __FILE__)
+
+module Komponent
+  module Generators
+    class ExamplesGenerator < Rails::Generators::Base
+      include Utils
+
+      source_root File.expand_path('../../component/templates', __FILE__)
+
+      def create_example_files
+        Komponent::Component.all.each do |name, component|
+          create_example_view_file(name)
+        end
+      end
+
+      protected
+
+      def split_name(name)
+        name.split(/[:,::,\/]/).reject(&:blank?).map(&:underscore)
+      end
+
+      def component_path(component_name)
+        path_parts = [default_path, 'components', *split_name(component_name)]
+
+        Pathname.new(path_parts.join('/'))
+      end
+
+      private
+
+      def create_example_view_file(component_name)
+        @component_name = split_name(component_name).last.underscore
+
+        template "example.html.#{template_engine}.erb", component_path(component_name) + "_example.html.#{template_engine}"
+      end
+    end
+  end
+end
diff --git a/lib/generators/komponent/install_generator.rb b/lib/generators/komponent/install_generator.rb
@@ -1,8 +1,11 @@
 # frozen_string_literal: true
+require File.expand_path('../utils', __FILE__)
 
 module Komponent
   module Generators
     class InstallGenerator < Rails::Generators::Base
+      include Utils
+
       class_option :stimulus, type: :boolean, default: false
 
       def check_webpacker_dependency
@@ -80,14 +83,6 @@ def application_pack_path
         komponent_root_directory.join("packs", "application.js")
       end
 
-      def komponent_root_directory
-        default_path
-      end
-
-      def components_directory
-        Rails.root.join(komponent_root_directory, "components")
-      end
-
       def webpacker_configuration_file
         Rails.root.join("config", "webpacker.yml")
       end
@@ -96,10 +91,6 @@ def webpacker_default_structure
         Rails.root.join("app", "javascript")
       end
 
-      def komponent_already_installed?
-        File.directory?(relative_path_from_rails)
-      end
-
       def dependencies_not_met_error_message
         "Seems you don't have webpacker installed in your project. Please install webpacker, and follow instructions at https://github.com/rails/webpacker"
       end
@@ -108,31 +99,6 @@ def stimulus?
         return options[:stimulus] if options[:stimulus]
         komponent_configuration[:stimulus]
       end
-
-      def default_path
-        rails_configuration.komponent.root
-      end
-
-      def relative_path_from_rails
-        default_path.relative_path_from(Rails.root)
-      end
-
-      private
-
-      def komponent_configuration
-        {
-          stimulus: nil,
-          locale: nil,
-        }.merge(app_generators.komponent)
-      end
-
-      def rails_configuration
-        Rails.application.config
-      end
-
-      def app_generators
-        rails_configuration.app_generators
-      end
     end
   end
 end
diff --git a/lib/generators/komponent/styleguide_generator.rb b/lib/generators/komponent/styleguide_generator.rb
@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require File.expand_path('../utils', __FILE__)
+
+module Komponent
+  module Generators
+    class StyleguideGenerator < Rails::Generators::Base
+      include Utils
+
+      source_root File.expand_path('../templates/styleguide', __FILE__)
+
+      def check_komponent_dependency
+        unless komponent_already_installed?
+          raise Thor::Error, dependencies_not_met_error_message
+        end
+      end
+
+      def copy_styleguide_components
+        directory 'components', components_directory.join('komponent')
+      end
+
+      def create_komponent_pack
+        template 'packs/komponent.js', komponent_pack_path
+      end
+
+      def append_to_application_routes
+        route 'mount Komponent::Engine => \'/\' if Rails.env.development?'
+      end
+
+      protected
+
+      def komponent_pack_path
+        komponent_root_directory.join('packs', 'komponent.js')
+      end
+
+      def dependencies_not_met_error_message
+        'Seems you don\'t have komponent installed in your project. Please install komponent, and follow instructions at https://github.com/komposable/komponent'
+      end
+    end
+  end
+end
diff --git a/...erators/komponent/templates/styleguide/components/container/_komponent_container.html.erb b/...erators/komponent/templates/styleguide/components/container/_komponent_container.html.erb
@@ -0,0 +1,3 @@
+<div class="komponent-container">
+  <%= yield %>
+</div>
diff --git a/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css b/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css
@@ -0,0 +1,17 @@
+/* stylelint-disable value-list-comma-newline-after */
+
+.komponent-container {
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  margin: 40px 60px 0 300px;
+
+  .komponent-code {
+    background-color: #333;
+    color: #fff;
+    margin: 10px 0;
+    padding: 10px;
+  }
+}
+
+/* stylelint-enable */
diff --git a/lib/generators/komponent/templates/styleguide/components/container/komponent_container.js b/lib/generators/komponent/templates/styleguide/components/container/komponent_container.js
@@ -0,0 +1 @@
+import "./komponent_container.css";
diff --git a/...tors/komponent/templates/styleguide/components/container/komponent_container_component.rb b/...tors/komponent/templates/styleguide/components/container/komponent_container_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KomponentContainerComponent
+  extend ComponentHelper
+end
diff --git a/lib/generators/komponent/templates/styleguide/components/footer/_komponent_footer.html.erb b/lib/generators/komponent/templates/styleguide/components/footer/_komponent_footer.html.erb
@@ -0,0 +1,3 @@
+<div class="komponent-footer">
+  Built with <%= link_to "Komponent", "http://komponent.io", target: "_blank" %>
+</div>