From cff3b28831784250ef54f6e3d8d10dea2f94705b Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Thu, 31 May 2018 00:04:26 +0200 Subject: [PATCH 01/34] wip --- .editorconfig | 14 +++++++ .../komponent/styleguide_controller.rb | 23 +++++++++++ app/helpers/komponent/styleguide_helper.rb | 7 ++++ app/views/komponent/styleguide/index.html.erb | 15 +++++++ app/views/komponent/styleguide/show.html.erb | 1 + app/views/layouts/komponent.html.erb | 28 +++++++++++++ config/routes.rb | 5 +++ lib/komponent.rb | 3 +- lib/komponent/component.rb | 39 +++++++++++++++++++ lib/komponent/engine.rb | 8 ++++ 10 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 .editorconfig create mode 100644 app/controllers/komponent/styleguide_controller.rb create mode 100644 app/helpers/komponent/styleguide_helper.rb create mode 100644 app/views/komponent/styleguide/index.html.erb create mode 100644 app/views/komponent/styleguide/show.html.erb create mode 100644 app/views/layouts/komponent.html.erb create mode 100644 config/routes.rb create mode 100644 lib/komponent/component.rb create mode 100644 lib/komponent/engine.rb diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0ad438d --- /dev/null +++ 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/app/controllers/komponent/styleguide_controller.rb b/app/controllers/komponent/styleguide_controller.rb new file mode 100644 index 0000000..bb84eaa --- /dev/null +++ b/app/controllers/komponent/styleguide_controller.rb @@ -0,0 +1,23 @@ +require "komponent/component" + +module Komponent + class StyleguideController < ::ApplicationController + layout 'komponent' + + before_action :set_components + + # helper "mountain_view/styleguide" + + def index; end + + def show + @component = Komponent::Component.find(params[:id]) + end + + private + + def set_components + @components = Komponent::Component.all + end + end +end diff --git a/app/helpers/komponent/styleguide_helper.rb b/app/helpers/komponent/styleguide_helper.rb new file mode 100644 index 0000000..89c165b --- /dev/null +++ b/app/helpers/komponent/styleguide_helper.rb @@ -0,0 +1,7 @@ +module Komponent + module StyleguideHelper + def komponent_components + Komponent::Component.all + end + end +end diff --git a/app/views/komponent/styleguide/index.html.erb b/app/views/komponent/styleguide/index.html.erb new file mode 100644 index 0000000..8d78972 --- /dev/null +++ b/app/views/komponent/styleguide/index.html.erb @@ -0,0 +1,15 @@ +
+

Styleguide

+
+ +<% if @components.any? %> +
+ Select one of the components from the side to view its examples and documentation. +
+<% else %> +
+

Hint:You haven't created any components yet

+

You can generate your first component by running:

+ 
rails generate component component-name
+
+<% end %> diff --git a/app/views/komponent/styleguide/show.html.erb b/app/views/komponent/styleguide/show.html.erb new file mode 100644 index 0000000..af5083e --- /dev/null +++ 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 new file mode 100644 index 0000000..31e3949 --- /dev/null +++ b/app/views/layouts/komponent.html.erb @@ -0,0 +1,28 @@ + + + + Styleguide + + <%= csrf_meta_tags %> + + +
+ +
+
+
+

COMPONENTS

+
    + <%- @components.each do |_k, component| %> +
  • + <%= link_to_unless_current component.title, styleguide_path(id: component.id) %> +
    • + <% end %> +
+
+
+ <%= yield %> +
+
+ + diff --git a/config/routes.rb b/config/routes.rb new file mode 100644 index 0000000..ee3974c --- /dev/null +++ b/config/routes.rb @@ -0,0 +1,5 @@ +Komponent::Engine.routes.draw do + root to: "styleguide#index" + + resources :styleguide, only: %i[index show] #, path: Komponent.configuration.styleguide_path +end diff --git a/lib/komponent.rb b/lib/komponent.rb index 3d737e6..b22a382 100644 --- a/lib/komponent.rb +++ b/lib/komponent.rb @@ -1,7 +1,8 @@ # 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 diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb new file mode 100644 index 0000000..3fa61db --- /dev/null +++ b/lib/komponent/component.rb @@ -0,0 +1,39 @@ +module Komponent + class Component + class << self + def all + component_dirs = Rails.application.config.komponent.root.join('components').join('**/') + + components = {} + + # TODO: list only components directories + Dir.glob(component_dirs).sort.map do |component_dir| + components[component_dir] = Component.new(File.basename(component_dir)) + end + + components + end + + def find(id) + components = all + + raise Exception, "Component with ID=#{id} not found" unless components.keys.include? id + components.fetch(id) + end + end + + attr_reader :id + + def initialize(id) + @id = id + end + + def title + id.titleize + end + + def example_view + "components/#{id}/example" + end + end +end diff --git a/lib/komponent/engine.rb b/lib/komponent/engine.rb new file mode 100644 index 0000000..d1cdbe3 --- /dev/null +++ b/lib/komponent/engine.rb @@ -0,0 +1,8 @@ +# frozen_string_literal: true + +module Komponent + class Engine < Rails::Engine + isolate_namespace Komponent + + end +end From 0f07e95b0a17eb05f7bd6423d7b7c96f8356206e Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Sun, 3 Jun 2018 15:55:50 +0200 Subject: [PATCH 02/34] wip --- CHANGELOG.md | 4 ++ .../komponent/styleguide_controller.rb | 10 ----- app/helpers/komponent/styleguide_helper.rb | 7 ---- .../styleguide/_show_fallback.html.erb | 1 + app/views/komponent/styleguide/index.html.erb | 2 +- app/views/komponent/styleguide/show.html.erb | 2 +- app/views/layouts/komponent.html.erb | 13 +++++-- .../component/component_generator.rb | 4 ++ .../templates/example_view.html.erb.erb | 0 .../templates/example_view.html.haml.erb | 0 .../templates/example_view.html.slim.erb | 0 lib/komponent.rb | 1 - lib/komponent/component.rb | 15 ++++++-- lib/komponent/engine.rb | 32 ++++++++++++++++ lib/komponent/komponent_helper.rb | 4 ++ lib/komponent/railtie.rb | 38 ------------------- 16 files changed, 68 insertions(+), 65 deletions(-) delete mode 100644 app/helpers/komponent/styleguide_helper.rb create mode 100644 app/views/komponent/styleguide/_show_fallback.html.erb create mode 100644 lib/generators/component/templates/example_view.html.erb.erb create mode 100644 lib/generators/component/templates/example_view.html.haml.erb create mode 100644 lib/generators/component/templates/example_view.html.slim.erb delete mode 100644 lib/komponent/railtie.rb diff --git a/CHANGELOG.md b/CHANGELOG.md index 22dba2e..003f897 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Upcoming release +**Enhancements:** + +- Implement a styleguide view + **Breaking changes:** - Dropped support for Rails 4.2 diff --git a/app/controllers/komponent/styleguide_controller.rb b/app/controllers/komponent/styleguide_controller.rb index bb84eaa..b327415 100644 --- a/app/controllers/komponent/styleguide_controller.rb +++ b/app/controllers/komponent/styleguide_controller.rb @@ -4,20 +4,10 @@ module Komponent class StyleguideController < ::ApplicationController layout 'komponent' - before_action :set_components - - # helper "mountain_view/styleguide" - def index; end def show @component = Komponent::Component.find(params[:id]) end - - private - - def set_components - @components = Komponent::Component.all - end end end diff --git a/app/helpers/komponent/styleguide_helper.rb b/app/helpers/komponent/styleguide_helper.rb deleted file mode 100644 index 89c165b..0000000 --- a/app/helpers/komponent/styleguide_helper.rb +++ /dev/null @@ -1,7 +0,0 @@ -module Komponent - module StyleguideHelper - def komponent_components - Komponent::Component.all - end - end -end diff --git a/app/views/komponent/styleguide/_show_fallback.html.erb b/app/views/komponent/styleguide/_show_fallback.html.erb new file mode 100644 index 0000000..27ea231 --- /dev/null +++ b/app/views/komponent/styleguide/_show_fallback.html.erb @@ -0,0 +1 @@ +

Example missing

diff --git a/app/views/komponent/styleguide/index.html.erb b/app/views/komponent/styleguide/index.html.erb index 8d78972..aff5aa1 100644 --- a/app/views/komponent/styleguide/index.html.erb +++ b/app/views/komponent/styleguide/index.html.erb @@ -2,7 +2,7 @@

Styleguide

-<% if @components.any? %> +<% if komponent_components.any? %>
Select one of the components from the side to view its examples and documentation.
diff --git a/app/views/komponent/styleguide/show.html.erb b/app/views/komponent/styleguide/show.html.erb index af5083e..6051be9 100644 --- a/app/views/komponent/styleguide/show.html.erb +++ b/app/views/komponent/styleguide/show.html.erb @@ -1 +1 @@ -<%= render partial: @component.example_view %> +<%= render(partial: @component.example_view) rescue render(partial: "komponent/styleguide/show_fallback") %> diff --git a/app/views/layouts/komponent.html.erb b/app/views/layouts/komponent.html.erb index 31e3949..c8585cf 100644 --- a/app/views/layouts/komponent.html.erb +++ b/app/views/layouts/komponent.html.erb @@ -3,9 +3,13 @@ Styleguide + <%#= javascript_pack_tag "komponent/styleguide" %> + <%#= stylesheet_pack_tag "komponent/styleguide", media: "all" %> + <%= csrf_meta_tags %> + <%#=c 'komponent/styleguide/header' %>
@@ -13,16 +17,17 @@

COMPONENTS

    - <%- @components.each do |_k, component| %> + <%- komponent_components.each do |_k, component| %>
  • <%= link_to_unless_current component.title, styleguide_path(id: component.id) %>
    • <% end %>
-
- <%= yield %> -
+ <%#=c 'komponent/styleguide/container' do %> + <%= yield %> + <%# end %> + <%#=c 'komponent/styleguide/footer' %> diff --git a/lib/generators/component/component_generator.rb b/lib/generators/component/component_generator.rb index b2aaaca..71c1eac 100644 --- 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 "#{template_prefix}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_view.html.erb.erb b/lib/generators/component/templates/example_view.html.erb.erb new file mode 100644 index 0000000..e69de29 diff --git a/lib/generators/component/templates/example_view.html.haml.erb b/lib/generators/component/templates/example_view.html.haml.erb new file mode 100644 index 0000000..e69de29 diff --git a/lib/generators/component/templates/example_view.html.slim.erb b/lib/generators/component/templates/example_view.html.slim.erb new file mode 100644 index 0000000..e69de29 diff --git a/lib/komponent.rb b/lib/komponent.rb index b22a382..965007c 100644 --- a/lib/komponent.rb +++ b/lib/komponent.rb @@ -3,6 +3,5 @@ require 'komponent/version' module Komponent - require 'komponent/railtie' if defined?(Rails) require 'komponent/engine' if defined?(Rails) end diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb index 3fa61db..e9e8f94 100644 --- a/lib/komponent/component.rb +++ b/lib/komponent/component.rb @@ -2,13 +2,18 @@ module Komponent class Component class << self def all - component_dirs = Rails.application.config.komponent.root.join('components').join('**/') + component_dirs = components_root.join('*/**/') components = {} # TODO: list only components directories - Dir.glob(component_dirs).sort.map do |component_dir| - components[component_dir] = Component.new(File.basename(component_dir)) + Dir.glob(component_dirs).sort.each do |component_dir| + component_path = Pathname.new(component_dir).relative_path_from(components_root).to_s + + next unless File.exists?(components_root.join(component_path) + .join("#{File.basename(component_path)}_component.rb")) + + components[component_path] = Component.new(component_path) end components @@ -20,6 +25,10 @@ def find(id) raise Exception, "Component with ID=#{id} not found" unless components.keys.include? id components.fetch(id) end + + def components_root + @components_root ||= Rails.application.config.komponent.root.join('components') + end end attr_reader :id diff --git a/lib/komponent/engine.rb b/lib/komponent/engine.rb index d1cdbe3..20a7535 100644 --- a/lib/komponent/engine.rb +++ b/lib/komponent/engine.rb @@ -1,8 +1,40 @@ # frozen_string_literal: true +require 'webpacker' +require 'komponent/component_helper' +require 'komponent/component_path_resolver' +require 'komponent/component_renderer' +require 'komponent/translation' + module Komponent class Engine < Rails::Engine isolate_namespace Komponent + config.komponent = ActiveSupport::OrderedOptions.new + config.komponent.root = nil + config.komponent.component_paths = [] + config.komponent.stylesheet_engine = :css + + config.before_configuration do |app| + app.config.komponent = config.komponent + app.config.komponent.root = app.config.root.join("frontend") + end + + config.after_initialize do |app| + app.config.komponent.component_paths.prepend( + app.config.komponent.root.join("components") + ) + + ActiveSupport.on_load :action_view do + require 'komponent/komponent_helper' + include KomponentHelper + end + + ActiveSupport.on_load :action_controller do + ActionController::Base.prepend_view_path( + app.config.komponent.root + ) + end + end end end diff --git a/lib/komponent/komponent_helper.rb b/lib/komponent/komponent_helper.rb index fb90302..a7c53a4 100644 --- a/lib/komponent/komponent_helper.rb +++ b/lib/komponent/komponent_helper.rb @@ -13,4 +13,8 @@ def component(component_name, locals = {}, options = {}, &block) ) end alias :c :component + + def komponent_components + Komponent::Component.all + end end diff --git a/lib/komponent/railtie.rb b/lib/komponent/railtie.rb deleted file mode 100644 index 283e750..0000000 --- a/lib/komponent/railtie.rb +++ /dev/null @@ -1,38 +0,0 @@ -# frozen_string_literal: true - -require 'webpacker' -require 'komponent/component_helper' -require 'komponent/component_path_resolver' -require 'komponent/component_renderer' -require 'komponent/translation' - -module Komponent - class Railtie < Rails::Railtie - config.komponent = ActiveSupport::OrderedOptions.new - config.komponent.root = nil - config.komponent.component_paths = [] - config.komponent.stylesheet_engine = :css - - config.before_configuration do |app| - app.config.komponent = config.komponent - app.config.komponent.root = app.config.root.join("frontend") - end - - config.after_initialize do |app| - app.config.komponent.component_paths.prepend( - app.config.komponent.root.join("components") - ) - - ActiveSupport.on_load :action_view do - require 'komponent/komponent_helper' - include KomponentHelper - end - - ActiveSupport.on_load :action_controller do - ActionController::Base.prepend_view_path( - app.config.komponent.root - ) - end - end - end -end From 4c6626695db6bb4a9b1ee2b5ea2e87a3026a61f1 Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Sun, 3 Jun 2018 19:11:43 +0200 Subject: [PATCH 03/34] wip: styleguide components and update styguide views --- app/views/layouts/komponent.html.erb | 60 +++++++++++++------ .../_komponent_styleguide_container.html.erb | 3 + ...omponent_styleguide_container_component.rb | 5 ++ .../_komponent_styleguide_footer.html.erb | 0 .../komponent_styleguide_footer_component.rb | 5 ++ .../_komponent_styleguide_header.html.erb | 15 +++++ .../komponent_styleguide_header_component.rb | 5 ++ lib/komponent/component.rb | 1 + lib/komponent/engine.rb | 13 ++++ 9 files changed, 88 insertions(+), 19 deletions(-) create mode 100644 frontend/components/komponent/styleguide/container/_komponent_styleguide_container.html.erb create mode 100644 frontend/components/komponent/styleguide/container/komponent_styleguide_container_component.rb create mode 100644 frontend/components/komponent/styleguide/footer/_komponent_styleguide_footer.html.erb create mode 100644 frontend/components/komponent/styleguide/footer/komponent_styleguide_footer_component.rb create mode 100644 frontend/components/komponent/styleguide/header/_komponent_styleguide_header.html.erb create mode 100644 frontend/components/komponent/styleguide/header/komponent_styleguide_header_component.rb diff --git a/app/views/layouts/komponent.html.erb b/app/views/layouts/komponent.html.erb index c8585cf..3af1d86 100644 --- a/app/views/layouts/komponent.html.erb +++ b/app/views/layouts/komponent.html.erb @@ -7,27 +7,49 @@ <%#= stylesheet_pack_tag "komponent/styleguide", media: "all" %> <%= csrf_meta_tags %> + + + - <%#=c 'komponent/styleguide/header' %> -
- -
-
-
-

COMPONENTS

-
    - <%- komponent_components.each do |_k, component| %> -
  • - <%= link_to_unless_current component.title, styleguide_path(id: component.id) %> -
    • - <% end %> -
-
-
- <%#=c 'komponent/styleguide/container' do %> + <%=c 'komponent/styleguide/header' %> + + <%=c 'komponent/styleguide/container' do %> <%= yield %> - <%# end %> - <%#=c 'komponent/styleguide/footer' %> + <% end %> + + <%=c 'komponent/styleguide/footer' %> diff --git a/frontend/components/komponent/styleguide/container/_komponent_styleguide_container.html.erb b/frontend/components/komponent/styleguide/container/_komponent_styleguide_container.html.erb new file mode 100644 index 0000000..dc4a35c --- /dev/null +++ b/frontend/components/komponent/styleguide/container/_komponent_styleguide_container.html.erb @@ -0,0 +1,3 @@ +
+ <%= yield %> +
diff --git a/frontend/components/komponent/styleguide/container/komponent_styleguide_container_component.rb b/frontend/components/komponent/styleguide/container/komponent_styleguide_container_component.rb new file mode 100644 index 0000000..ae20f1f --- /dev/null +++ b/frontend/components/komponent/styleguide/container/komponent_styleguide_container_component.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +module KomponentStyleguideContainerComponent + extend ComponentHelper +end diff --git a/frontend/components/komponent/styleguide/footer/_komponent_styleguide_footer.html.erb b/frontend/components/komponent/styleguide/footer/_komponent_styleguide_footer.html.erb new file mode 100644 index 0000000..e69de29 diff --git a/frontend/components/komponent/styleguide/footer/komponent_styleguide_footer_component.rb b/frontend/components/komponent/styleguide/footer/komponent_styleguide_footer_component.rb new file mode 100644 index 0000000..8342e69 --- /dev/null +++ b/frontend/components/komponent/styleguide/footer/komponent_styleguide_footer_component.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +module KomponentStyleguideFooterComponent + extend ComponentHelper +end diff --git a/frontend/components/komponent/styleguide/header/_komponent_styleguide_header.html.erb b/frontend/components/komponent/styleguide/header/_komponent_styleguide_header.html.erb new file mode 100644 index 0000000..b00728a --- /dev/null +++ b/frontend/components/komponent/styleguide/header/_komponent_styleguide_header.html.erb @@ -0,0 +1,15 @@ +
+ +
+
+
+

COMPONENTS

+
    + <%- komponent_components.each do |_k, component| %> +
  • + <%= link_to_unless_current component.title, styleguide_path(id: component.id) %> +
    • + <% end %> +
+
+
diff --git a/frontend/components/komponent/styleguide/header/komponent_styleguide_header_component.rb b/frontend/components/komponent/styleguide/header/komponent_styleguide_header_component.rb new file mode 100644 index 0000000..e57f017 --- /dev/null +++ b/frontend/components/komponent/styleguide/header/komponent_styleguide_header_component.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +module KomponentStyleguideHeaderComponent + extend ComponentHelper +end diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb index e9e8f94..2a3f762 100644 --- a/lib/komponent/component.rb +++ b/lib/komponent/component.rb @@ -7,6 +7,7 @@ def all components = {} # TODO: list only components directories + # use ComponentPathResolver? Dir.glob(component_dirs).sort.each do |component_dir| component_path = Pathname.new(component_dir).relative_path_from(components_root).to_s diff --git a/lib/komponent/engine.rb b/lib/komponent/engine.rb index 20a7535..f971744 100644 --- a/lib/komponent/engine.rb +++ b/lib/komponent/engine.rb @@ -24,6 +24,9 @@ class Engine < Rails::Engine app.config.komponent.component_paths.prepend( app.config.komponent.root.join("components") ) + app.config.komponent.component_paths.append( + Komponent::Engine.root.join('frontend/components') + ) ActiveSupport.on_load :action_view do require 'komponent/komponent_helper' @@ -36,5 +39,15 @@ class Engine < Rails::Engine ) end end + + initializer "my_engine.action_dispatch" do |app| + ActiveSupport.on_load :action_controller do + ActionController::Base.prepend_view_path Komponent::Engine.root.join("frontend") + end + end + + initializer 'komponent.autoload', before: :set_autoload_paths do |app| + app.config.autoload_paths << Komponent::Engine.root.join('frontend') + end end end From 6763f06cfff07db182f9afc3ecf40d2c353b76df Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Sun, 3 Jun 2018 19:15:13 +0200 Subject: [PATCH 04/34] wip: update readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index ba76a8d..a410e95 100644 --- a/README.md +++ b/README.md @@ -313,6 +313,17 @@ 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 + +```ruby +# config/routes.rb +Rails.application.routes.draw do + mount Komponent::Engine => "komponent" if Rails.env.development? + + ... +end +``` + ### Configuration #### Change default root path From 82915c8d14e77240c56f8935a5f6613e2c4ac529 Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Fri, 8 Jun 2018 11:57:50 +0200 Subject: [PATCH 05/34] wip: code cleanup --- app/controllers/komponent/styleguide_controller.rb | 2 ++ config/routes.rb | 2 ++ lib/komponent/component.rb | 4 +++- 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/app/controllers/komponent/styleguide_controller.rb b/app/controllers/komponent/styleguide_controller.rb index b327415..2cf756b 100644 --- a/app/controllers/komponent/styleguide_controller.rb +++ b/app/controllers/komponent/styleguide_controller.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + require "komponent/component" module Komponent diff --git a/config/routes.rb b/config/routes.rb index ee3974c..1140291 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + Komponent::Engine.routes.draw do root to: "styleguide#index" diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb index 2a3f762..f3bcaa7 100644 --- a/lib/komponent/component.rb +++ b/lib/komponent/component.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + module Komponent class Component class << self @@ -11,7 +13,7 @@ def all Dir.glob(component_dirs).sort.each do |component_dir| component_path = Pathname.new(component_dir).relative_path_from(components_root).to_s - next unless File.exists?(components_root.join(component_path) + next unless File.exist?(components_root.join(component_path) .join("#{File.basename(component_path)}_component.rb")) components[component_path] = Component.new(component_path) From 30f3c8c8a8c5dcf9f0d195439609987fa545f985 Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Fri, 8 Jun 2018 11:58:26 +0200 Subject: [PATCH 06/34] wip: cleanup views and readme --- README.md | 6 +++++ .../styleguide/_show_fallback.html.erb | 2 ++ app/views/layouts/komponent.html.erb | 16 +++++++------ .../_komponent_styleguide_container.html.erb | 2 +- .../_komponent_styleguide_header.html.erb | 24 +++++++++---------- lib/komponent/component.rb | 4 ++++ 6 files changed, 33 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index a410e95..3dbd481 100644 --- a/README.md +++ b/README.md @@ -315,6 +315,8 @@ I18n.available_locales = [:en, :fr] ### Styleguide +Update your routes to mount the Komponent engine. + ```ruby # config/routes.rb Rails.application.routes.draw do @@ -324,6 +326,10 @@ Rails.application.routes.draw do end ``` +Then you need to update the `_example.html.slim` file you have inside your components. This file is use to render the examples. + +Finally just visit to `http://localhost:3000/komponent/styleguide`. + ### Configuration #### Change default root path diff --git a/app/views/komponent/styleguide/_show_fallback.html.erb b/app/views/komponent/styleguide/_show_fallback.html.erb index 27ea231..5441d12 100644 --- a/app/views/komponent/styleguide/_show_fallback.html.erb +++ b/app/views/komponent/styleguide/_show_fallback.html.erb @@ -1 +1,3 @@

Example missing

+ +

Please create <%= @component.path %>/_example.html.<%= Rails.application.config.app_generators.rails[:template_engine] || :erb %> file.

diff --git a/app/views/layouts/komponent.html.erb b/app/views/layouts/komponent.html.erb index 3af1d86..7d82265 100644 --- a/app/views/layouts/komponent.html.erb +++ b/app/views/layouts/komponent.html.erb @@ -10,34 +10,36 @@ - <%=c 'komponent/styleguide/header' %> - - <%=c 'komponent/styleguide/container' do %> + <%=c 'komponent/header' %> + <%=c 'komponent/sidebar' %> + <%=c 'komponent/container' do %> <%= yield %> <% end %> - - <%=c 'komponent/styleguide/footer' %> + <%=c 'komponent/footer' %> diff --git a/frontend/components/komponent/container/_komponent_container.html.erb b/frontend/components/komponent/container/_komponent_container.html.erb new file mode 100644 index 0000000..31dc85d --- /dev/null +++ b/frontend/components/komponent/container/_komponent_container.html.erb @@ -0,0 +1,3 @@ +
+ <%= yield %> +
diff --git a/frontend/components/komponent/container/komponent_container.css b/frontend/components/komponent/container/komponent_container.css new file mode 100644 index 0000000..4fdb3fc --- /dev/null +++ b/frontend/components/komponent/container/komponent_container.css @@ -0,0 +1,5 @@ +.komponent-container { + margin-left: 160px; + padding-left: 20px; + background-color: green; +} diff --git a/frontend/components/komponent/container/komponent_container.js b/frontend/components/komponent/container/komponent_container.js new file mode 100644 index 0000000..70b1a82 --- /dev/null +++ b/frontend/components/komponent/container/komponent_container.js @@ -0,0 +1 @@ +import "./komponent_container.css"; diff --git a/frontend/components/komponent/styleguide/header/komponent_styleguide_header_component.rb b/frontend/components/komponent/container/komponent_container_component.rb similarity index 58% rename from frontend/components/komponent/styleguide/header/komponent_styleguide_header_component.rb rename to frontend/components/komponent/container/komponent_container_component.rb index e57f017..3a2362d 100644 --- a/frontend/components/komponent/styleguide/header/komponent_styleguide_header_component.rb +++ b/frontend/components/komponent/container/komponent_container_component.rb @@ -1,5 +1,5 @@ # frozen_string_literal: true -module KomponentStyleguideHeaderComponent +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 new file mode 100644 index 0000000..e51f3da --- /dev/null +++ b/frontend/components/komponent/footer/_komponent_footer.html.erb @@ -0,0 +1,3 @@ +
+ footer +
diff --git a/frontend/components/komponent/footer/komponent_footer.css b/frontend/components/komponent/footer/komponent_footer.css new file mode 100644 index 0000000..e24cdbc --- /dev/null +++ b/frontend/components/komponent/footer/komponent_footer.css @@ -0,0 +1 @@ +.komponent-footer {} diff --git a/frontend/components/komponent/footer/komponent_footer.js b/frontend/components/komponent/footer/komponent_footer.js new file mode 100644 index 0000000..c1d61e6 --- /dev/null +++ b/frontend/components/komponent/footer/komponent_footer.js @@ -0,0 +1 @@ +import "./komponent_footer.css"; diff --git a/frontend/components/komponent/styleguide/footer/komponent_styleguide_footer_component.rb b/frontend/components/komponent/footer/komponent_footer_component.rb similarity index 58% rename from frontend/components/komponent/styleguide/footer/komponent_styleguide_footer_component.rb rename to frontend/components/komponent/footer/komponent_footer_component.rb index 8342e69..9f64ef8 100644 --- a/frontend/components/komponent/styleguide/footer/komponent_styleguide_footer_component.rb +++ b/frontend/components/komponent/footer/komponent_footer_component.rb @@ -1,5 +1,5 @@ # frozen_string_literal: true -module KomponentStyleguideFooterComponent +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 new file mode 100644 index 0000000..064d7bd --- /dev/null +++ b/frontend/components/komponent/header/_komponent_header.html.erb @@ -0,0 +1,3 @@ +
+ +
diff --git a/frontend/components/komponent/header/komponent_header.css b/frontend/components/komponent/header/komponent_header.css new file mode 100644 index 0000000..7206cf5 --- /dev/null +++ b/frontend/components/komponent/header/komponent_header.css @@ -0,0 +1,6 @@ +.komponent-header { + background-color: blue; + color: white; + width: 100%; + height: 40px; +} diff --git a/frontend/components/komponent/header/komponent_header.js b/frontend/components/komponent/header/komponent_header.js new file mode 100644 index 0000000..b013393 --- /dev/null +++ b/frontend/components/komponent/header/komponent_header.js @@ -0,0 +1 @@ +import "./komponent_header.css"; diff --git a/frontend/components/komponent/styleguide/container/komponent_styleguide_container_component.rb b/frontend/components/komponent/header/komponent_header_component.rb similarity index 57% rename from frontend/components/komponent/styleguide/container/komponent_styleguide_container_component.rb rename to frontend/components/komponent/header/komponent_header_component.rb index ae20f1f..7d3d6b6 100644 --- a/frontend/components/komponent/styleguide/container/komponent_styleguide_container_component.rb +++ b/frontend/components/komponent/header/komponent_header_component.rb @@ -1,5 +1,5 @@ # frozen_string_literal: true -module KomponentStyleguideContainerComponent +module KomponentHeaderComponent extend ComponentHelper end diff --git a/frontend/components/komponent/index.js b/frontend/components/komponent/index.js new file mode 100644 index 0000000..878e312 --- /dev/null +++ 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/styleguide/header/_komponent_styleguide_header.html.erb b/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb similarity index 64% rename from frontend/components/komponent/styleguide/header/_komponent_styleguide_header.html.erb rename to frontend/components/komponent/sidebar/_komponent_sidebar.html.erb index b78be3d..6200f2a 100644 --- a/frontend/components/komponent/styleguide/header/_komponent_styleguide_header.html.erb +++ b/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb @@ -1,7 +1,4 @@ -
- -
-
+

COMPONENTS

    <%- komponent_components.each do |_k, component| %> diff --git a/frontend/components/komponent/sidebar/komponent_sidebar.css b/frontend/components/komponent/sidebar/komponent_sidebar.css new file mode 100644 index 0000000..0126b2f --- /dev/null +++ b/frontend/components/komponent/sidebar/komponent_sidebar.css @@ -0,0 +1,10 @@ +.komponent-sidebar { + float: left; + width: 160px; + background-color: black; + color: white; + + a { + color: white; + } +} diff --git a/frontend/components/komponent/sidebar/komponent_sidebar.js b/frontend/components/komponent/sidebar/komponent_sidebar.js new file mode 100644 index 0000000..2b3af41 --- /dev/null +++ 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 new file mode 100644 index 0000000..3395063 --- /dev/null +++ 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/frontend/components/komponent/styleguide/container/_komponent_styleguide_container.html.erb b/frontend/components/komponent/styleguide/container/_komponent_styleguide_container.html.erb deleted file mode 100644 index 36188ab..0000000 --- a/frontend/components/komponent/styleguide/container/_komponent_styleguide_container.html.erb +++ /dev/null @@ -1,3 +0,0 @@ -
    - <%= yield %> -
    diff --git a/frontend/components/komponent/styleguide/footer/_komponent_styleguide_footer.html.erb b/frontend/components/komponent/styleguide/footer/_komponent_styleguide_footer.html.erb deleted file mode 100644 index e69de29..0000000 From cfaee77857ba6f328bfd00b0ab14c025881135e1 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 16:00:19 +0200 Subject: [PATCH 08/34] Remove root route + update README --- README.md | 8 ++++---- config/routes.rb | 2 -- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3dbd481..03a513e 100644 --- a/README.md +++ b/README.md @@ -320,15 +320,15 @@ Update your routes to mount the Komponent engine. ```ruby # config/routes.rb Rails.application.routes.draw do - mount Komponent::Engine => "komponent" if Rails.env.development? + 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 use to render the examples. +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/komponent/styleguide`. +Finally just visit to `http://localhost:3000/styleguide`. ### Configuration diff --git a/config/routes.rb b/config/routes.rb index 1140291..e63dcaf 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,7 +1,5 @@ # frozen_string_literal: true Komponent::Engine.routes.draw do - root to: "styleguide#index" - resources :styleguide, only: %i[index show] #, path: Komponent.configuration.styleguide_path end From 383aa4c1ae8b49da12a4939c9f1fb42b6a4a05e4 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 16:21:10 +0200 Subject: [PATCH 09/34] Design for styleguide --- .../styleguide/_show_fallback.html.erb | 2 +- .../container/komponent_container.css | 5 ++- .../footer/_komponent_footer.html.erb | 2 +- .../komponent/footer/komponent_footer.css | 22 +++++++++++- .../header/_komponent_header.html.erb | 2 +- .../komponent/header/komponent_header.css | 9 +++-- .../sidebar/_komponent_sidebar.html.erb | 6 ++-- .../komponent/sidebar/komponent_sidebar.css | 35 ++++++++++++++++--- 8 files changed, 65 insertions(+), 18 deletions(-) diff --git a/app/views/komponent/styleguide/_show_fallback.html.erb b/app/views/komponent/styleguide/_show_fallback.html.erb index 5441d12..6fa0d09 100644 --- a/app/views/komponent/styleguide/_show_fallback.html.erb +++ b/app/views/komponent/styleguide/_show_fallback.html.erb @@ -1,3 +1,3 @@ -

    Example missing

    +

    Example missing

    Please create <%= @component.path %>/_example.html.<%= Rails.application.config.app_generators.rails[:template_engine] || :erb %> file.

    diff --git a/frontend/components/komponent/container/komponent_container.css b/frontend/components/komponent/container/komponent_container.css index 4fdb3fc..c020b26 100644 --- a/frontend/components/komponent/container/komponent_container.css +++ b/frontend/components/komponent/container/komponent_container.css @@ -1,5 +1,4 @@ .komponent-container { - margin-left: 160px; - padding-left: 20px; - background-color: green; + margin-left: 24rem; + margin-top: 4rem; } diff --git a/frontend/components/komponent/footer/_komponent_footer.html.erb b/frontend/components/komponent/footer/_komponent_footer.html.erb index e51f3da..c3a1fae 100644 --- a/frontend/components/komponent/footer/_komponent_footer.html.erb +++ b/frontend/components/komponent/footer/_komponent_footer.html.erb @@ -1,3 +1,3 @@
    - footer + Built with <%= link_to "Komponent", "http://komponent.io", target: "_blank" %>
    diff --git a/frontend/components/komponent/footer/komponent_footer.css b/frontend/components/komponent/footer/komponent_footer.css index e24cdbc..60555fc 100644 --- a/frontend/components/komponent/footer/komponent_footer.css +++ b/frontend/components/komponent/footer/komponent_footer.css @@ -1 +1,21 @@ -.komponent-footer {} +.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/header/_komponent_header.html.erb b/frontend/components/komponent/header/_komponent_header.html.erb index 064d7bd..e4feb12 100644 --- a/frontend/components/komponent/header/_komponent_header.html.erb +++ b/frontend/components/komponent/header/_komponent_header.html.erb @@ -1,3 +1,3 @@
    - +
    diff --git a/frontend/components/komponent/header/komponent_header.css b/frontend/components/komponent/header/komponent_header.css index 7206cf5..6d0e637 100644 --- a/frontend/components/komponent/header/komponent_header.css +++ b/frontend/components/komponent/header/komponent_header.css @@ -1,6 +1,9 @@ .komponent-header { - background-color: blue; + align-items: center; + background-color: #0038ea; color: white; - width: 100%; - height: 40px; + display: flex; + font-size: 1.8rem; + height: 8rem; + padding: 2rem; } diff --git a/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb b/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb index 6200f2a..0979f30 100644 --- a/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb +++ b/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb @@ -1,8 +1,8 @@
    -

    COMPONENTS

    -
      +
      Components
      +
        <%- komponent_components.each do |_k, component| %> -
      • +
      • <%= link_to_unless_current component.title, styleguide_path(id: component.id) %>
        • <% end %> diff --git a/frontend/components/komponent/sidebar/komponent_sidebar.css b/frontend/components/komponent/sidebar/komponent_sidebar.css index 0126b2f..c4d308a 100644 --- a/frontend/components/komponent/sidebar/komponent_sidebar.css +++ b/frontend/components/komponent/sidebar/komponent_sidebar.css @@ -1,10 +1,35 @@ .komponent-sidebar { - float: left; - width: 160px; - background-color: black; - color: white; + 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: white; + color: #333; + display: block; + text-decoration: none; } } From 3af3dd0b7d3a935b1a22b531acf7a14bf7c028ab Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 18:42:12 +0200 Subject: [PATCH 10/34] Fix rescue when missing template The previous implementation (with `render ... rescue`) prevented from debugging the example file. Whenever an exception was raised, it displayed the fallback partial. --- app/controllers/komponent/styleguide_controller.rb | 7 +++++++ .../{_show_fallback.html.erb => missing_template.html.erb} | 0 app/views/komponent/styleguide/show.html.erb | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) rename app/views/komponent/styleguide/{_show_fallback.html.erb => missing_template.html.erb} (100%) diff --git a/app/controllers/komponent/styleguide_controller.rb b/app/controllers/komponent/styleguide_controller.rb index 2cf756b..58ad027 100644 --- a/app/controllers/komponent/styleguide_controller.rb +++ b/app/controllers/komponent/styleguide_controller.rb @@ -5,11 +5,18 @@ 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/_show_fallback.html.erb b/app/views/komponent/styleguide/missing_template.html.erb similarity index 100% rename from app/views/komponent/styleguide/_show_fallback.html.erb rename to app/views/komponent/styleguide/missing_template.html.erb diff --git a/app/views/komponent/styleguide/show.html.erb b/app/views/komponent/styleguide/show.html.erb index 6051be9..af5083e 100644 --- a/app/views/komponent/styleguide/show.html.erb +++ b/app/views/komponent/styleguide/show.html.erb @@ -1 +1 @@ -<%= render(partial: @component.example_view) rescue render(partial: "komponent/styleguide/show_fallback") %> +<%= render partial: @component.example_view %> From 294c28b79ebff4ec028857c3ebd84cc8cc26ed69 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 18:53:11 +0200 Subject: [PATCH 11/34] Fix templates filenames for example --- .../templates/{example_view.html.erb.erb => example.html.erb.erb} | 0 .../{example_view.html.haml.erb => example.html.haml.erb} | 0 .../{example_view.html.slim.erb => example.html.slim.erb} | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename lib/generators/component/templates/{example_view.html.erb.erb => example.html.erb.erb} (100%) rename lib/generators/component/templates/{example_view.html.haml.erb => example.html.haml.erb} (100%) rename lib/generators/component/templates/{example_view.html.slim.erb => example.html.slim.erb} (100%) diff --git a/lib/generators/component/templates/example_view.html.erb.erb b/lib/generators/component/templates/example.html.erb.erb similarity index 100% rename from lib/generators/component/templates/example_view.html.erb.erb rename to lib/generators/component/templates/example.html.erb.erb diff --git a/lib/generators/component/templates/example_view.html.haml.erb b/lib/generators/component/templates/example.html.haml.erb similarity index 100% rename from lib/generators/component/templates/example_view.html.haml.erb rename to lib/generators/component/templates/example.html.haml.erb diff --git a/lib/generators/component/templates/example_view.html.slim.erb b/lib/generators/component/templates/example.html.slim.erb similarity index 100% rename from lib/generators/component/templates/example_view.html.slim.erb rename to lib/generators/component/templates/example.html.slim.erb From 960113523f16b122c7d6bde904cc5832aa373ab8 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 18:53:33 +0200 Subject: [PATCH 12/34] Add tests for example file generation --- features/component_generator.feature | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/features/component_generator.feature b/features/component_generator.feature index 84c220b..203095f 100644 --- 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: From d26c6261097cbf2b7aabb7d5e5a9095503fc841e Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 19:05:25 +0200 Subject: [PATCH 13/34] Add default content to the example file templates --- lib/generators/component/templates/example.html.erb.erb | 3 +++ lib/generators/component/templates/example.html.haml.erb | 3 +++ lib/generators/component/templates/example.html.slim.erb | 3 +++ 3 files changed, 9 insertions(+) diff --git a/lib/generators/component/templates/example.html.erb.erb b/lib/generators/component/templates/example.html.erb.erb index e69de29..bbedc2a 100644 --- a/lib/generators/component/templates/example.html.erb.erb +++ b/lib/generators/component/templates/example.html.erb.erb @@ -0,0 +1,3 @@ +

        <%= component_name %>

        + +<%%= component "<%= component_name %>" %> diff --git a/lib/generators/component/templates/example.html.haml.erb b/lib/generators/component/templates/example.html.haml.erb index e69de29..e3f98fa 100644 --- 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 index e69de29..ed536ad 100644 --- 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 %>" From 57636654174470131442d38e0110d917fc42e7d5 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 19:31:16 +0200 Subject: [PATCH 14/34] Remove template_prefix from create_example_view_file --- lib/generators/component/component_generator.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/generators/component/component_generator.rb b/lib/generators/component/component_generator.rb index 71c1eac..a200522 100644 --- a/lib/generators/component/component_generator.rb +++ b/lib/generators/component/component_generator.rb @@ -35,7 +35,7 @@ def create_locale_files end def create_example_view_file - template "#{template_prefix}example.html.#{template_engine}.erb", component_path + "_example.html.#{template_engine}" + template "example.html.#{template_engine}.erb", component_path + "_example.html.#{template_engine}" end def import_to_packs From 9aaefe930c6c45f66fc193c0583156b36e68325f Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 19:48:38 +0200 Subject: [PATCH 15/34] Add examples generator --- CHANGELOG.md | 2 + README.md | 2 + .../komponent/examples_generator.rb | 58 +++++++++++++++++++ 3 files changed, 62 insertions(+) create mode 100644 lib/generators/komponent/examples_generator.rb diff --git a/CHANGELOG.md b/CHANGELOG.md index 003f897..6e540a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ **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 index 03a513e..479dec9 100644 --- a/README.md +++ b/README.md @@ -330,6 +330,8 @@ Then you need to update the `_example.html.slim` file you have inside your compo 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/lib/generators/komponent/examples_generator.rb b/lib/generators/komponent/examples_generator.rb new file mode 100644 index 0000000..3e0ecbb --- /dev/null +++ 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 From 4cfda6e21836860a138389372e5f324a5af8f1e2 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 14 Jul 2018 17:56:39 +0200 Subject: [PATCH 16/34] require component module in engine instead of controller --- app/controllers/komponent/styleguide_controller.rb | 2 -- lib/komponent/engine.rb | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/app/controllers/komponent/styleguide_controller.rb b/app/controllers/komponent/styleguide_controller.rb index 58ad027..d1dba4a 100644 --- a/app/controllers/komponent/styleguide_controller.rb +++ b/app/controllers/komponent/styleguide_controller.rb @@ -1,7 +1,5 @@ # frozen_string_literal: true -require "komponent/component" - module Komponent class StyleguideController < ::ApplicationController layout 'komponent' diff --git a/lib/komponent/engine.rb b/lib/komponent/engine.rb index f971744..0ea3b01 100644 --- a/lib/komponent/engine.rb +++ b/lib/komponent/engine.rb @@ -4,6 +4,7 @@ require 'komponent/component_helper' require 'komponent/component_path_resolver' require 'komponent/component_renderer' +require 'komponent/component' require 'komponent/translation' module Komponent From ce3b0fb521300a6ee6b78006c218174f9d8c7f33 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 14 Jul 2018 18:12:44 +0200 Subject: [PATCH 17/34] Add component_with_doc (alias cdoc) helper for styleguide --- app/views/layouts/komponent.html.erb | 8 +++--- .../component/templates/example.html.erb.erb | 2 +- .../component/templates/example.html.haml.erb | 2 +- .../component/templates/example.html.slim.erb | 2 +- lib/komponent/komponent_helper.rb | 25 +++++++++++++++++++ 5 files changed, 32 insertions(+), 7 deletions(-) diff --git a/app/views/layouts/komponent.html.erb b/app/views/layouts/komponent.html.erb index 9fdaec4..12d00d7 100644 --- a/app/views/layouts/komponent.html.erb +++ b/app/views/layouts/komponent.html.erb @@ -7,11 +7,11 @@ <%= csrf_meta_tags %> - <%=c 'komponent/header' %> - <%=c 'komponent/sidebar' %> - <%=c 'komponent/container' do %> + <%= c 'komponent/header' %> + <%= c 'komponent/sidebar' %> + <%= c 'komponent/container' do %> <%= yield %> <% end %> - <%=c 'komponent/footer' %> + <%= c 'komponent/footer' %> diff --git a/lib/generators/component/templates/example.html.erb.erb b/lib/generators/component/templates/example.html.erb.erb index bbedc2a..d97c4f3 100644 --- a/lib/generators/component/templates/example.html.erb.erb +++ b/lib/generators/component/templates/example.html.erb.erb @@ -1,3 +1,3 @@

        <%= component_name %>

        -<%%= component "<%= component_name %>" %> +<%%= cdoc "<%= component_name %>" %> diff --git a/lib/generators/component/templates/example.html.haml.erb b/lib/generators/component/templates/example.html.haml.erb index e3f98fa..9894a05 100644 --- a/lib/generators/component/templates/example.html.haml.erb +++ b/lib/generators/component/templates/example.html.haml.erb @@ -1,3 +1,3 @@ %h1 <%= component_name %> -= component "<%= 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 index ed536ad..5258dbc 100644 --- a/lib/generators/component/templates/example.html.slim.erb +++ b/lib/generators/component/templates/example.html.slim.erb @@ -1,3 +1,3 @@ h1 <%= component_name %> -= component "<%= component_name %>" += cdoc "<%= component_name %>" diff --git a/lib/komponent/komponent_helper.rb b/lib/komponent/komponent_helper.rb index a7c53a4..8aa5e3b 100644 --- a/lib/komponent/komponent_helper.rb +++ b/lib/komponent/komponent_helper.rb @@ -17,4 +17,29 @@ def component(component_name, locals = {}, options = {}, &block) def komponent_components Komponent::Component.all end + + def component_with_doc(component_name, locals = {}, options = {}, &block) + captured_block = proc { |args| capture(args, &block) } if block_given? + captured_output = capture do + Komponent::ComponentRenderer.new( + controller, + ).render( + component_name, + locals, + options, + &captured_block + ) + end + + captured_doc = capture do + content_tag :pre, class: "komponent-code" do + content_tag :code do + "= component \"#{component_name}\", #{locals.to_s.gsub(/(:(\w+)\s?=>\s?)/, "\\2: ")}" + end + end + end + + captured_output + captured_doc + end + alias :cdoc :component_with_doc end From 59939c9a7d12ab188c32fa8d59d312a8a1038db7 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 14 Jul 2018 18:18:16 +0200 Subject: [PATCH 18/34] Fix rubocop config namespaces --- .rubocop.yml | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/.rubocop.yml b/.rubocop.yml index 019df56..ec2fba1 100644 --- a/.rubocop.yml +++ b/.rubocop.yml @@ -54,16 +54,9 @@ Naming/PredicateName: Naming/VariableName: Enabled: true -Lint/DeprecatedClassMethods: - Enabled: true - Layout/AlignParameters: Enabled: true -Layout/BlockAlignment: - Enabled: true - EnforcedStyleAlignWith: start_of_block - Layout/BlockEndNewline: Enabled: true @@ -73,12 +66,6 @@ Layout/CaseIndentation: Layout/ClosingParenthesisIndentation: Enabled: true -Layout/ConditionPosition: - Enabled: true - -Layout/DefEndAlignment: - Enabled: true - Layout/DotPosition: Enabled: true @@ -117,3 +104,16 @@ Layout/SpaceInsideParens: Layout/TrailingWhitespace: Enabled: true + +Lint/BlockAlignment: + Enabled: true + EnforcedStyleAlignWith: start_of_block + +Lint/ConditionPosition: + Enabled: true + +Lint/DefEndAlignment: + Enabled: true + +Lint/DeprecatedClassMethods: + Enabled: true From fefe036c65b1ca5672fc8f04e2c1491d5077d197 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 14 Jul 2018 19:24:14 +0200 Subject: [PATCH 19/34] Simplify index view, update styleguide components style --- app/views/komponent/styleguide/index.html.erb | 16 ++++------- .../container/komponent_container.css | 17 +++++++++-- .../komponent/footer/komponent_footer.css | 14 +++++++--- .../komponent/header/komponent_header.css | 12 ++++++-- .../komponent/sidebar/komponent_sidebar.css | 28 ++++++++++++------- lib/komponent/komponent_helper.rb | 16 ++++------- 6 files changed, 62 insertions(+), 41 deletions(-) diff --git a/app/views/komponent/styleguide/index.html.erb b/app/views/komponent/styleguide/index.html.erb index aff5aa1..07d1462 100644 --- a/app/views/komponent/styleguide/index.html.erb +++ b/app/views/komponent/styleguide/index.html.erb @@ -1,15 +1,9 @@ -
        -

        Styleguide

        -
        +

        Styleguide

        <% if komponent_components.any? %> -
        - Select one of the components from the side to view its examples and documentation. -
        +

        Select one of the components from the side to view its examples and documentation.

        <% else %> -
        -

        Hint:You haven't created any components yet

        -

        You can generate your first component by running:

        - 
        rails generate component component-name
        -
        +

        Hint:You haven't created any components yet

        +

        You can generate your first component by running:

        + 
        rails generate component component-name
        <% end %> diff --git a/frontend/components/komponent/container/komponent_container.css b/frontend/components/komponent/container/komponent_container.css index c020b26..a41d825 100644 --- a/frontend/components/komponent/container/komponent_container.css +++ b/frontend/components/komponent/container/komponent_container.css @@ -1,4 +1,17 @@ +/* stylelint-disable value-list-comma-newline-after */ + .komponent-container { - margin-left: 24rem; - margin-top: 4rem; + 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/frontend/components/komponent/footer/komponent_footer.css b/frontend/components/komponent/footer/komponent_footer.css index 60555fc..95a03e4 100644 --- a/frontend/components/komponent/footer/komponent_footer.css +++ b/frontend/components/komponent/footer/komponent_footer.css @@ -1,8 +1,12 @@ +/* stylelint-disable value-list-comma-newline-after */ + .komponent-footer { - font-size: 1.4rem; - position: absolute; - bottom: 4rem; - right: 4rem; + bottom: 30px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 14px; + position: fixed; + right: 30px; text-align: center; &, @@ -19,3 +23,5 @@ } } } + +/* stylelint-enable */ diff --git a/frontend/components/komponent/header/komponent_header.css b/frontend/components/komponent/header/komponent_header.css index 6d0e637..ac9f194 100644 --- a/frontend/components/komponent/header/komponent_header.css +++ b/frontend/components/komponent/header/komponent_header.css @@ -1,9 +1,15 @@ +/* stylelint-disable value-list-comma-newline-after */ + .komponent-header { align-items: center; background-color: #0038ea; color: white; display: flex; - font-size: 1.8rem; - height: 8rem; - padding: 2rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 16px; + height: 60px; + padding: 0 20px; } + +/* stylelint-enable */ diff --git a/frontend/components/komponent/sidebar/komponent_sidebar.css b/frontend/components/komponent/sidebar/komponent_sidebar.css index c4d308a..3ac9e59 100644 --- a/frontend/components/komponent/sidebar/komponent_sidebar.css +++ b/frontend/components/komponent/sidebar/komponent_sidebar.css @@ -1,35 +1,43 @@ +/* stylelint-disable value-list-comma-newline-after */ + .komponent-sidebar { background-color: #dbe1f3; bottom: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; left: 0; - padding: 4rem 2rem; + overflow: auto; + padding: 20px; position: absolute; - top: 8rem; - width: 20rem; + top: 60px; + width: 240px; &-title { color: #0038ea; - font-size: 1.4rem; + font-size: 14px; font-weight: bold; - letter-spacing: 0.2rem; - margin: 0 0 2rem; + letter-spacing: 1px; + margin: 0 0 20px; text-transform: uppercase; } &-items { + font-size: 14px; + letter-spacing: 0; line-height: 1.25; list-style: none; - margin: 0; + margin: 0 0 30px; padding: 0; } - &-item + &-item { - margin-top: 0.5rem; + &-item { + margin: 0 0 5px; } a { color: #333; - display: block; text-decoration: none; } } + +/* stylelint-enable */ diff --git a/lib/komponent/komponent_helper.rb b/lib/komponent/komponent_helper.rb index 8aa5e3b..d61b171 100644 --- a/lib/komponent/komponent_helper.rb +++ b/lib/komponent/komponent_helper.rb @@ -19,22 +19,16 @@ def komponent_components end def component_with_doc(component_name, locals = {}, options = {}, &block) - captured_block = proc { |args| capture(args, &block) } if block_given? - captured_output = capture do - Komponent::ComponentRenderer.new( - controller, - ).render( - component_name, - locals, - options, - &captured_block - ) + captured_output = component(component_name, locals, options, &block) + + if locals.present? + pretty_locals = JSON.pretty_generate(locals).gsub(/^(\s+)"(\w+)":/, "\\1\\2:") end captured_doc = capture do content_tag :pre, class: "komponent-code" do content_tag :code do - "= component \"#{component_name}\", #{locals.to_s.gsub(/(:(\w+)\s?=>\s?)/, "\\2: ")}" + "= component \"#{component_name}\"" + (pretty_locals ? ", #{pretty_locals}" : "") end end end From 449020164f73bab02f672a2221f06307d46f5579 Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Sun, 29 Jul 2018 16:19:58 +0200 Subject: [PATCH 20/34] Code cleanup --- CHANGELOG.md | 1 - app/controllers/komponent/styleguide_controller.rb | 2 +- app/views/layouts/komponent.html.erb | 4 ++-- lib/komponent/component.rb | 4 ++++ lib/komponent/component_path_resolver.rb | 12 ++++++------ lib/komponent/komponent_helper.rb | 2 ++ 6 files changed, 15 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e540a9..8e7a596 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,6 @@ ## Upcoming release **Enhancements:** - - Implement a styleguide view - New generator: `rails g komponent:examples` to generate an example file for each existing component diff --git a/app/controllers/komponent/styleguide_controller.rb b/app/controllers/komponent/styleguide_controller.rb index d1dba4a..5c8e8cd 100644 --- a/app/controllers/komponent/styleguide_controller.rb +++ b/app/controllers/komponent/styleguide_controller.rb @@ -14,7 +14,7 @@ def show private def missing_template - render "komponent/styleguide/missing_template" + render 'komponent/styleguide/missing_template', status: :not_found end end end diff --git a/app/views/layouts/komponent.html.erb b/app/views/layouts/komponent.html.erb index 12d00d7..972c1c8 100644 --- a/app/views/layouts/komponent.html.erb +++ b/app/views/layouts/komponent.html.erb @@ -2,8 +2,8 @@ Styleguide - <%= javascript_pack_tag "komponent" %> - <%= stylesheet_pack_tag "komponent", media: "all" %> + <%= javascript_pack_tag 'komponent' %> + <%= stylesheet_pack_tag 'komponent', media: 'all' %> <%= csrf_meta_tags %> diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb index 3c988fe..dbf3c6c 100644 --- a/lib/komponent/component.rb +++ b/lib/komponent/component.rb @@ -29,6 +29,10 @@ def find(id) components.fetch(id) end + def resolved_component_path(component) + Komponent::ComponentPathResolver.new.resolve(component) + end + def components_root @components_root ||= Rails.application.config.komponent.root.join('components') end diff --git a/lib/komponent/component_path_resolver.rb b/lib/komponent/component_path_resolver.rb index 2ae69d9..4a1010a 100644 --- a/lib/komponent/component_path_resolver.rb +++ b/lib/komponent/component_path_resolver.rb @@ -17,6 +17,12 @@ def resolve(component_name) root_path.join(*component_name) end + def component_paths + komponent_configuration.component_paths.map do |path| + Pathname.new(path) + end + end + protected def path_has_component?(path, component_name) @@ -27,12 +33,6 @@ def path_has_component?(path, component_name) File.exist?(file_name) end - def component_paths - komponent_configuration.component_paths.map do |path| - Pathname.new(path) - end - end - def komponent_configuration app_configuration.komponent end diff --git a/lib/komponent/komponent_helper.rb b/lib/komponent/komponent_helper.rb index d61b171..98ed98f 100644 --- a/lib/komponent/komponent_helper.rb +++ b/lib/komponent/komponent_helper.rb @@ -1,5 +1,7 @@ # frozen_string_literal: true +require 'komponent/component' + module KomponentHelper def component(component_name, locals = {}, options = {}, &block) captured_block = proc { |args| capture(args, &block) } if block_given? From a5d7615a422e2abdddaf2c2883d863729bd7e89e Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Sun, 29 Jul 2018 16:26:53 +0200 Subject: [PATCH 21/34] Move frontend components into templates --- .../components}/container/_komponent_container.html.erb | 0 .../styleguide/components}/container/komponent_container.css | 0 .../styleguide/components}/container/komponent_container.js | 0 .../components}/container/komponent_container_component.rb | 0 .../styleguide/components}/footer/_komponent_footer.html.erb | 0 .../styleguide/components}/footer/komponent_footer.css | 0 .../templates/styleguide/components}/footer/komponent_footer.js | 0 .../styleguide/components}/footer/komponent_footer_component.rb | 0 .../styleguide/components}/header/_komponent_header.html.erb | 0 .../styleguide/components}/header/komponent_header.css | 0 .../templates/styleguide/components}/header/komponent_header.js | 0 .../styleguide/components}/header/komponent_header_component.rb | 0 .../komponent/templates/styleguide/components}/index.js | 0 .../styleguide/components}/sidebar/_komponent_sidebar.html.erb | 0 .../styleguide/components}/sidebar/komponent_sidebar.css | 0 .../styleguide/components}/sidebar/komponent_sidebar.js | 0 .../components}/sidebar/komponent_sidebar_component.rb | 0 .../komponent/templates/styleguide/packs/komponent.js | 2 ++ 18 files changed, 2 insertions(+) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/container/_komponent_container.html.erb (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/container/komponent_container.css (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/container/komponent_container.js (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/container/komponent_container_component.rb (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/footer/_komponent_footer.html.erb (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/footer/komponent_footer.css (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/footer/komponent_footer.js (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/footer/komponent_footer_component.rb (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/header/_komponent_header.html.erb (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/header/komponent_header.css (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/header/komponent_header.js (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/header/komponent_header_component.rb (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/index.js (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/sidebar/_komponent_sidebar.html.erb (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/sidebar/komponent_sidebar.css (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/sidebar/komponent_sidebar.js (100%) rename {frontend/components/komponent => lib/generators/komponent/templates/styleguide/components}/sidebar/komponent_sidebar_component.rb (100%) create mode 100644 lib/generators/komponent/templates/styleguide/packs/komponent.js diff --git a/frontend/components/komponent/container/_komponent_container.html.erb b/lib/generators/komponent/templates/styleguide/components/container/_komponent_container.html.erb similarity index 100% rename from frontend/components/komponent/container/_komponent_container.html.erb rename to lib/generators/komponent/templates/styleguide/components/container/_komponent_container.html.erb diff --git a/frontend/components/komponent/container/komponent_container.css b/lib/generators/komponent/templates/styleguide/components/container/komponent_container.css similarity index 100% rename from frontend/components/komponent/container/komponent_container.css rename to lib/generators/komponent/templates/styleguide/components/container/komponent_container.css diff --git a/frontend/components/komponent/container/komponent_container.js b/lib/generators/komponent/templates/styleguide/components/container/komponent_container.js similarity index 100% rename from frontend/components/komponent/container/komponent_container.js rename to lib/generators/komponent/templates/styleguide/components/container/komponent_container.js diff --git a/frontend/components/komponent/container/komponent_container_component.rb b/lib/generators/komponent/templates/styleguide/components/container/komponent_container_component.rb similarity index 100% rename from frontend/components/komponent/container/komponent_container_component.rb rename to lib/generators/komponent/templates/styleguide/components/container/komponent_container_component.rb diff --git a/frontend/components/komponent/footer/_komponent_footer.html.erb b/lib/generators/komponent/templates/styleguide/components/footer/_komponent_footer.html.erb similarity index 100% rename from frontend/components/komponent/footer/_komponent_footer.html.erb rename to lib/generators/komponent/templates/styleguide/components/footer/_komponent_footer.html.erb diff --git a/frontend/components/komponent/footer/komponent_footer.css b/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css similarity index 100% rename from frontend/components/komponent/footer/komponent_footer.css rename to lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.css diff --git a/frontend/components/komponent/footer/komponent_footer.js b/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.js similarity index 100% rename from frontend/components/komponent/footer/komponent_footer.js rename to lib/generators/komponent/templates/styleguide/components/footer/komponent_footer.js diff --git a/frontend/components/komponent/footer/komponent_footer_component.rb b/lib/generators/komponent/templates/styleguide/components/footer/komponent_footer_component.rb similarity index 100% rename from frontend/components/komponent/footer/komponent_footer_component.rb rename to lib/generators/komponent/templates/styleguide/components/footer/komponent_footer_component.rb diff --git a/frontend/components/komponent/header/_komponent_header.html.erb b/lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb similarity index 100% rename from frontend/components/komponent/header/_komponent_header.html.erb rename to lib/generators/komponent/templates/styleguide/components/header/_komponent_header.html.erb diff --git a/frontend/components/komponent/header/komponent_header.css b/lib/generators/komponent/templates/styleguide/components/header/komponent_header.css similarity index 100% rename from frontend/components/komponent/header/komponent_header.css rename to lib/generators/komponent/templates/styleguide/components/header/komponent_header.css diff --git a/frontend/components/komponent/header/komponent_header.js b/lib/generators/komponent/templates/styleguide/components/header/komponent_header.js similarity index 100% rename from frontend/components/komponent/header/komponent_header.js rename to lib/generators/komponent/templates/styleguide/components/header/komponent_header.js diff --git a/frontend/components/komponent/header/komponent_header_component.rb b/lib/generators/komponent/templates/styleguide/components/header/komponent_header_component.rb similarity index 100% rename from frontend/components/komponent/header/komponent_header_component.rb rename to lib/generators/komponent/templates/styleguide/components/header/komponent_header_component.rb diff --git a/frontend/components/komponent/index.js b/lib/generators/komponent/templates/styleguide/components/index.js similarity index 100% rename from frontend/components/komponent/index.js rename to lib/generators/komponent/templates/styleguide/components/index.js diff --git a/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb b/lib/generators/komponent/templates/styleguide/components/sidebar/_komponent_sidebar.html.erb similarity index 100% rename from frontend/components/komponent/sidebar/_komponent_sidebar.html.erb rename to lib/generators/komponent/templates/styleguide/components/sidebar/_komponent_sidebar.html.erb diff --git a/frontend/components/komponent/sidebar/komponent_sidebar.css b/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css similarity index 100% rename from frontend/components/komponent/sidebar/komponent_sidebar.css rename to lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.css diff --git a/frontend/components/komponent/sidebar/komponent_sidebar.js b/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.js similarity index 100% rename from frontend/components/komponent/sidebar/komponent_sidebar.js rename to lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar.js diff --git a/frontend/components/komponent/sidebar/komponent_sidebar_component.rb b/lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar_component.rb similarity index 100% rename from frontend/components/komponent/sidebar/komponent_sidebar_component.rb rename to lib/generators/komponent/templates/styleguide/components/sidebar/komponent_sidebar_component.rb diff --git a/lib/generators/komponent/templates/styleguide/packs/komponent.js b/lib/generators/komponent/templates/styleguide/packs/komponent.js new file mode 100644 index 0000000..c31f602 --- /dev/null +++ b/lib/generators/komponent/templates/styleguide/packs/komponent.js @@ -0,0 +1,2 @@ +import 'components'; +import 'components/komponent'; From 8559f0e652a7196b17b65d0e3d18230f9d2c09c6 Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Sun, 29 Jul 2018 16:27:15 +0200 Subject: [PATCH 22/34] Update generators and add Styleguide generator --- .../component/templates/example.html.erb.erb | 2 +- .../component/templates/example.html.haml.erb | 2 +- .../component/templates/example.html.slim.erb | 2 +- .../komponent/examples_generator.rb | 44 +++++------------ lib/generators/komponent/install_generator.rb | 40 ++------------- .../komponent/styleguide_generator.rb | 41 ++++++++++++++++ lib/generators/komponent/utils.rb | 49 +++++++++++++++++++ 7 files changed, 109 insertions(+), 71 deletions(-) create mode 100644 lib/generators/komponent/styleguide_generator.rb create mode 100644 lib/generators/komponent/utils.rb diff --git a/lib/generators/component/templates/example.html.erb.erb b/lib/generators/component/templates/example.html.erb.erb index d97c4f3..54c8aa3 100644 --- a/lib/generators/component/templates/example.html.erb.erb +++ b/lib/generators/component/templates/example.html.erb.erb @@ -1,3 +1,3 @@ -

        <%= component_name %>

        +

        <%= @component_name %>

        <%%= cdoc "<%= component_name %>" %> diff --git a/lib/generators/component/templates/example.html.haml.erb b/lib/generators/component/templates/example.html.haml.erb index 9894a05..851eec6 100644 --- a/lib/generators/component/templates/example.html.haml.erb +++ b/lib/generators/component/templates/example.html.haml.erb @@ -1,3 +1,3 @@ -%h1 <%= component_name %> +%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 index 5258dbc..050dc7b 100644 --- a/lib/generators/component/templates/example.html.slim.erb +++ b/lib/generators/component/templates/example.html.slim.erb @@ -1,3 +1,3 @@ -h1 <%= component_name %> +h1 <%= @component_name %> = cdoc "<%= component_name %>" diff --git a/lib/generators/komponent/examples_generator.rb b/lib/generators/komponent/examples_generator.rb index 3e0ecbb..686d75a 100644 --- a/lib/generators/komponent/examples_generator.rb +++ b/lib/generators/komponent/examples_generator.rb @@ -1,57 +1,39 @@ # 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| - @name = name - create_example_view_file + create_example_view_file(name) 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 + def split_name(name) + name.split(/[:,::,\/]/).reject(&:blank?).map(&:underscore) end - def rails_configuration - Rails.application.config - end - - def app_generators - rails_configuration.app_generators - end + def component_path(component_name) + path_parts = [default_path, 'components', *split_name(component_name)] - def template_engine - app_generators.rails[:template_engine] || :erb - end - - def default_path - rails_configuration.komponent.root + Pathname.new(path_parts.join('/')) end private - def create_example_view_file - template "example.html.#{template_engine}.erb", component_path + "_example.html.#{template_engine}" + 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 diff --git a/lib/generators/komponent/install_generator.rb b/lib/generators/komponent/install_generator.rb index a71e516..345f666 100644 --- 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 new file mode 100644 index 0000000..4e050c0 --- /dev/null +++ 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/lib/generators/komponent/utils.rb b/lib/generators/komponent/utils.rb new file mode 100644 index 0000000..f212e69 --- /dev/null +++ b/lib/generators/komponent/utils.rb @@ -0,0 +1,49 @@ +# frozen_string_literal: true + +module Komponent + module Generators + module Utils + protected + + 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 + + def relative_path_from_rails + default_path.relative_path_from(Rails.root) + end + + def komponent_root_directory + default_path + end + + def komponent_configuration + { + stimulus: nil, + locale: nil, + example: nil, + }.merge(app_generators.komponent) + end + + def components_directory + Rails.root.join(komponent_root_directory, 'components') + end + + def komponent_already_installed? + File.directory?(relative_path_from_rails) + end + end + end +end From ea52cbdf25f54cd54d11d6c20dfc87f587801d86 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Mon, 13 Aug 2018 23:44:09 +0200 Subject: [PATCH 23/34] Fix rubocop config namespaces --- .rubocop.yml | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/.rubocop.yml b/.rubocop.yml index ec2fba1..a96266d 100644 --- a/.rubocop.yml +++ b/.rubocop.yml @@ -57,6 +57,10 @@ Naming/VariableName: Layout/AlignParameters: Enabled: true +Layout/BlockAlignment: + Enabled: true + EnforcedStyleAlignWith: start_of_block + Layout/BlockEndNewline: Enabled: true @@ -66,6 +70,12 @@ Layout/CaseIndentation: Layout/ClosingParenthesisIndentation: Enabled: true +Layout/ConditionPosition: + Enabled: true + +Layout/DefEndAlignment: + Enabled: true + Layout/DotPosition: Enabled: true @@ -105,15 +115,5 @@ Layout/SpaceInsideParens: Layout/TrailingWhitespace: Enabled: true -Lint/BlockAlignment: - Enabled: true - EnforcedStyleAlignWith: start_of_block - -Lint/ConditionPosition: - Enabled: true - -Lint/DefEndAlignment: - Enabled: true - Lint/DeprecatedClassMethods: Enabled: true From bd71a6d84f2a600c9ed07996000a184b132bc8e5 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Mon, 13 Aug 2018 23:39:20 +0200 Subject: [PATCH 24/34] Refactor component_with_doc, add test --- lib/komponent/komponent_helper.rb | 13 ++++++++----- test/komponent/komponent_helper_test.rb | 10 ++++++++++ 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/lib/komponent/komponent_helper.rb b/lib/komponent/komponent_helper.rb index 98ed98f..5b18e63 100644 --- a/lib/komponent/komponent_helper.rb +++ b/lib/komponent/komponent_helper.rb @@ -23,14 +23,10 @@ def komponent_components def component_with_doc(component_name, locals = {}, options = {}, &block) captured_output = component(component_name, locals, options, &block) - if locals.present? - pretty_locals = JSON.pretty_generate(locals).gsub(/^(\s+)"(\w+)":/, "\\1\\2:") - end - captured_doc = capture do content_tag :pre, class: "komponent-code" do content_tag :code do - "= component \"#{component_name}\"" + (pretty_locals ? ", #{pretty_locals}" : "") + "= component \"#{component_name}\"" + (locals.present? ? ", #{pretty_locals(locals)}" : "") end end end @@ -38,4 +34,11 @@ def component_with_doc(component_name, locals = {}, options = {}, &block) captured_output + captured_doc end alias :cdoc :component_with_doc + + private + + def pretty_locals(locals) + return nil if locals.blank? + JSON.pretty_generate(locals).gsub(/^(\s+)"(\w+)":/, "\\1\\2:") + end end diff --git a/test/komponent/komponent_helper_test.rb b/test/komponent/komponent_helper_test.rb index 7937ad9..50861ab 100644 --- a/test/komponent/komponent_helper_test.rb +++ b/test/komponent/komponent_helper_test.rb @@ -62,4 +62,14 @@ def test_helper_renders_yield_args %(
        Foo Bar
        ), component('foo_bar') { |x| x }.chomp end + + def test_helper_renders_with_doc + assert_equal \ + %(
        🌎 😎
        +
        = component "all", {
+  world: "🌎",
+  sunglasses: "😎"
+}
        ), + component_with_doc('all', world: "🌎", sunglasses: "😎").chomp + end end From 50f8daa240e33848ae41549e3d416bee6dc7a750 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Tue, 14 Aug 2018 00:07:39 +0200 Subject: [PATCH 25/34] More tests --- test/komponent/component_test.rb | 31 +++++++++++++++++++++++++ test/komponent/komponent_helper_test.rb | 15 ++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 test/komponent/component_test.rb diff --git a/test/komponent/component_test.rb b/test/komponent/component_test.rb new file mode 100644 index 0000000..c2fbb31 --- /dev/null +++ b/test/komponent/component_test.rb @@ -0,0 +1,31 @@ +# frozen_string_literal: true + +require 'test_helper' + +class ComponentTest < ActionView::TestCase + def test_find_raises_exception_when_missing + assert_raise Exception do + Komponent::Component.find("missing") + end + end + + def test_find_returns_component + assert \ + Komponent::Component.find("foo").is_a?(Komponent::Component) + assert_equal \ + "foo", + Komponent::Component.find("foo").id + end + + def test_returns_title + assert_equal \ + "Foo Bar", + Komponent::Component.new("foo_bar").title + end + + def test_returns_example_view + assert_equal \ + "components/foo/example", + Komponent::Component.new("foo").example_view + end +end diff --git a/test/komponent/komponent_helper_test.rb b/test/komponent/komponent_helper_test.rb index 50861ab..f18eeb4 100644 --- a/test/komponent/komponent_helper_test.rb +++ b/test/komponent/komponent_helper_test.rb @@ -63,6 +63,21 @@ def test_helper_renders_yield_args component('foo_bar') { |x| x }.chomp end + def test_helper_lists_components + assert_equal( + [ + 'all', + 'bar', + 'foo', + 'foo_bar', + 'hello', + 'required', + 'world', + ], + komponent_components.keys + ) + end + def test_helper_renders_with_doc assert_equal \ %(
        🌎 😎
        From c5cf8e44041ee8be1962c4f932c196d2ce4535bb Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Tue, 21 Aug 2018 22:57:53 +0200 Subject: [PATCH 26/34] Remove trailing whitespace From ad2c80b0194bfa2fa9623ddfb924b96e60ee390f Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Tue, 21 Aug 2018 23:37:33 +0200 Subject: [PATCH 27/34] Remove trailing whitespace --- test/komponent/komponent_helper_test.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/komponent/komponent_helper_test.rb b/test/komponent/komponent_helper_test.rb index a3e849f..1fd6cd3 100644 --- a/test/komponent/komponent_helper_test.rb +++ b/test/komponent/komponent_helper_test.rb @@ -62,7 +62,7 @@ def test_helper_renders_yield_args %(
        Foo Bar
        ), component('foo_bar') { |x| x }.chomp end - + def test_helper_supports_content_for_across_components component('ping', pong: 'Greetings from Ping') From f89dd9b98e66b80ae1dd87e208286fceeb03f638 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Tue, 21 Aug 2018 23:41:17 +0200 Subject: [PATCH 28/34] Fix broken test --- test/komponent/komponent_helper_test.rb | 2 ++ 1 file changed, 2 insertions(+) diff --git a/test/komponent/komponent_helper_test.rb b/test/komponent/komponent_helper_test.rb index 1fd6cd3..ac076bd 100644 --- a/test/komponent/komponent_helper_test.rb +++ b/test/komponent/komponent_helper_test.rb @@ -79,6 +79,8 @@ def test_helper_lists_components 'foo', 'foo_bar', 'hello', + 'ping', + 'pong', 'required', 'world', ], From 36a75789a1aa9dd5bbbc2efcc4dc3817ed576dc7 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 2 Feb 2019 14:57:11 +0100 Subject: [PATCH 29/34] Improve Changelog & Readme for styleguide --- CHANGELOG.md | 8 +++----- README.md | 11 +++++++---- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cc9c9a9..15d7e98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,16 +2,14 @@ ## 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 **Enhancements:** - Komponent now reports component stats when you run `bin/rails stats` +- Komponent now includes a styleguide engine that you can mount to your project + to document your components, and a new generator: `rails g komponent:examples` + to generate an example file for each existing component **Bug fixes:** - Removed redundant `class` attribute in HAML templates diff --git a/README.md b/README.md index 89626d3..09ac217 100644 --- a/README.md +++ b/README.md @@ -315,7 +315,9 @@ I18n.available_locales = [:en, :fr] ### Styleguide -Update your routes to mount the Komponent engine. +Komponent includes a basic styleguide engine that you can use in your project to document your components. + +First, mount it in your routes: ```ruby # config/routes.rb @@ -326,12 +328,13 @@ Rails.application.routes.draw do 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`. +For each component, the engine will render the `_example.html.slim` file from the component folder. +It this partial, you can describe the component and render examples for each state. If you have existing components, you can generate all their example files at once with `rails g komponent:examples` +Finally just visit to `http://localhost:3000/styleguide`. + ### Configuration #### Change default root path From 50922fbc83c92bc3935ff4c9f27ba69394dcb047 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 2 Feb 2019 15:44:02 +0100 Subject: [PATCH 30/34] More tests for Komponent::Component --- lib/komponent/component.rb | 4 ---- test/komponent/component_test.rb | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb index dbf3c6c..3c988fe 100644 --- a/lib/komponent/component.rb +++ b/lib/komponent/component.rb @@ -29,10 +29,6 @@ def find(id) components.fetch(id) end - def resolved_component_path(component) - Komponent::ComponentPathResolver.new.resolve(component) - end - def components_root @components_root ||= Rails.application.config.komponent.root.join('components') end diff --git a/test/komponent/component_test.rb b/test/komponent/component_test.rb index c2fbb31..8d4a2e1 100644 --- a/test/komponent/component_test.rb +++ b/test/komponent/component_test.rb @@ -3,6 +3,14 @@ require 'test_helper' class ComponentTest < ActionView::TestCase + def test_all_returns_components + all = Komponent::Component.all + + assert all.is_a?(Hash) + assert_equal all.count, 9 + assert all["foo"].is_a?(Komponent::Component) + end + def test_find_raises_exception_when_missing assert_raise Exception do Komponent::Component.find("missing") @@ -28,4 +36,11 @@ def test_returns_example_view "components/foo/example", Komponent::Component.new("foo").example_view end + + def test_returns_path + path = Komponent::Component.new("foo").path + + assert path.is_a?(Pathname) + assert path.to_s.include?("frontend/components/foo") + end end From 7d69fa8741b1fa110c7c9b66fea9ad587e4fcce1 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 2 Feb 2019 16:18:06 +0100 Subject: [PATCH 31/34] Improve styleguide documentation in README --- README.md | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 708daf6..e8cd1d6 100644 --- a/README.md +++ b/README.md @@ -317,23 +317,29 @@ I18n.available_locales = [:en, :fr] Komponent includes a basic styleguide engine that you can use in your project to document your components. -First, mount it in your routes: +![Komponent styleguide UI](https://user-images.githubusercontent.com/38524/41193700-45909330-6c10-11e8-87b7-59e628529200.png) -```ruby -# config/routes.rb -Rails.application.routes.draw do - mount Komponent::Engine => "/" if Rails.env.development? +To set it up, you can use the generator: - # ... -end +```sh +rails generate komponent:styleguide ``` -For each component, the engine will render the `_example.html.slim` file from the component folder. -It this partial, you can describe the component and render examples for each state. +This command will: + +* copy the styleguide components (`komponent/container`, `komponent/footer`, `komponent/header` and `komponent/sidebar`) to your components folder +* add a new `komponent.js` pack to your packs folder +* mount the engine in your routes -If you have existing components, you can generate all their example files at once with `rails g komponent:examples` +Then, for each component, you can describe it and render examples for each state in the `_example.html.slim` file from the component folder. The engine will then render it on the component page. + +If you have existing components, you can generate all their example files at once with: + +```sh +rails generate komponent:examples +``` -Finally just visit to `http://localhost:3000/styleguide`. +Finally, visit `http://localhost:3000/styleguide` to access your styleguide. ### Configuration From 9ee5424f61e49ba584c328c72ba8d80ca050a78e Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 2 Feb 2019 16:19:17 +0100 Subject: [PATCH 32/34] README fix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e8cd1d6..eca232c 100644 --- a/README.md +++ b/README.md @@ -327,7 +327,7 @@ rails generate komponent:styleguide This command will: -* copy the styleguide components (`komponent/container`, `komponent/footer`, `komponent/header` and `komponent/sidebar`) to your components folder +* copy the styleguide components (`komponent/container`, `komponent/footer`, `komponent/header` and `komponent/sidebar`) to your components folder, so you can customize them * add a new `komponent.js` pack to your packs folder * mount the engine in your routes From 669ec43fd6d446709e146c2ada1d0d90dcc59d46 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 2 Feb 2019 16:32:48 +0100 Subject: [PATCH 33/34] Rename example to examples --- CHANGELOG.md | 5 +++-- .../komponent/styleguide/missing_template.html.erb | 4 ++-- app/views/komponent/styleguide/show.html.erb | 2 +- features/component_generator.feature | 10 +++++----- lib/generators/component/component_generator.rb | 4 ++-- .../{example.html.erb.erb => examples.html.erb.erb} | 0 .../{example.html.haml.erb => examples.html.haml.erb} | 0 .../{example.html.slim.erb => examples.html.slim.erb} | 0 lib/generators/komponent/examples_generator.rb | 8 ++++---- lib/generators/komponent/utils.rb | 2 +- lib/komponent/component.rb | 4 ++-- test/komponent/component_test.rb | 6 +++--- 12 files changed, 23 insertions(+), 22 deletions(-) rename lib/generators/component/templates/{example.html.erb.erb => examples.html.erb.erb} (100%) rename lib/generators/component/templates/{example.html.haml.erb => examples.html.haml.erb} (100%) rename lib/generators/component/templates/{example.html.slim.erb => examples.html.slim.erb} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 15d7e98..103e485 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,9 @@ **Enhancements:** - Komponent now reports component stats when you run `bin/rails stats` - Komponent now includes a styleguide engine that you can mount to your project - to document your components, and a new generator: `rails g komponent:examples` - to generate an example file for each existing component + to document your components, and 2 new generators: + - `rails g komponent:styleguide` to set it up + - `rails g komponent:examples` to generate an `examples` file for each existing component **Bug fixes:** - Removed redundant `class` attribute in HAML templates diff --git a/app/views/komponent/styleguide/missing_template.html.erb b/app/views/komponent/styleguide/missing_template.html.erb index 6fa0d09..43e9315 100644 --- a/app/views/komponent/styleguide/missing_template.html.erb +++ b/app/views/komponent/styleguide/missing_template.html.erb @@ -1,3 +1,3 @@ -

        Example missing

        +

        Examples missing

        -

        Please create <%= @component.path %>/_example.html.<%= Rails.application.config.app_generators.rails[:template_engine] || :erb %> file.

        +

        Please create <%= @component.path %>/_examples.html.<%= Rails.application.config.app_generators.rails[:template_engine] || :erb %> file.

        diff --git a/app/views/komponent/styleguide/show.html.erb b/app/views/komponent/styleguide/show.html.erb index af5083e..716aad5 100644 --- a/app/views/komponent/styleguide/show.html.erb +++ b/app/views/komponent/styleguide/show.html.erb @@ -1 +1 @@ -<%= render partial: @component.example_view %> +<%= render partial: @component.examples_view %> diff --git a/features/component_generator.feature b/features/component_generator.feature index 052b5d1..47c0013 100644 --- a/features/component_generator.feature +++ b/features/component_generator.feature @@ -11,7 +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 | + | awesome_button/_examples.html.erb | And the file named "index.js" should contain: """ import "components/awesome_button/awesome_button"; @@ -31,7 +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 | + | admin/sub_admin/awesome_button/_examples.html.erb | And the file named "index.js" should contain: """ import "components/admin"; @@ -119,7 +119,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 + And a file named "_examples.html.erb" should exist Scenario: Generate component with custom template engine defined to `haml` Given a file named "config/initializers/custom_configuration.rb" with: @@ -129,7 +129,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 + And a file named "_examples.html.haml" should exist Scenario: Generate component with custom template engine defined to `slim` Given a file named "config/initializers/custom_configuration.rb" with: @@ -139,7 +139,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 + And a file named "_examples.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 index a200522..c28db85 100644 --- a/lib/generators/component/component_generator.rb +++ b/lib/generators/component/component_generator.rb @@ -34,8 +34,8 @@ def create_locale_files end end - def create_example_view_file - template "example.html.#{template_engine}.erb", component_path + "_example.html.#{template_engine}" + def create_examples_view_file + template "examples.html.#{template_engine}.erb", component_path + "_examples.html.#{template_engine}" end def import_to_packs diff --git a/lib/generators/component/templates/example.html.erb.erb b/lib/generators/component/templates/examples.html.erb.erb similarity index 100% rename from lib/generators/component/templates/example.html.erb.erb rename to lib/generators/component/templates/examples.html.erb.erb diff --git a/lib/generators/component/templates/example.html.haml.erb b/lib/generators/component/templates/examples.html.haml.erb similarity index 100% rename from lib/generators/component/templates/example.html.haml.erb rename to lib/generators/component/templates/examples.html.haml.erb diff --git a/lib/generators/component/templates/example.html.slim.erb b/lib/generators/component/templates/examples.html.slim.erb similarity index 100% rename from lib/generators/component/templates/example.html.slim.erb rename to lib/generators/component/templates/examples.html.slim.erb diff --git a/lib/generators/komponent/examples_generator.rb b/lib/generators/komponent/examples_generator.rb index 686d75a..bef5c02 100644 --- a/lib/generators/komponent/examples_generator.rb +++ b/lib/generators/komponent/examples_generator.rb @@ -10,9 +10,9 @@ class ExamplesGenerator < Rails::Generators::Base source_root File.expand_path('../../component/templates', __FILE__) - def create_example_files + def create_examples_files Komponent::Component.all.each do |name, component| - create_example_view_file(name) + create_examples_view_file(name) end end @@ -30,10 +30,10 @@ def component_path(component_name) private - def create_example_view_file(component_name) + def create_examples_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}" + template "examples.html.#{template_engine}.erb", component_path(component_name) + "_examples.html.#{template_engine}" end end end diff --git a/lib/generators/komponent/utils.rb b/lib/generators/komponent/utils.rb index f212e69..f70c267 100644 --- a/lib/generators/komponent/utils.rb +++ b/lib/generators/komponent/utils.rb @@ -33,7 +33,7 @@ def komponent_configuration { stimulus: nil, locale: nil, - example: nil, + examples: nil, }.merge(app_generators.komponent) end diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb index 3c988fe..8cd991e 100644 --- a/lib/komponent/component.rb +++ b/lib/komponent/component.rb @@ -48,8 +48,8 @@ def path Komponent::ComponentPathResolver.new.resolve(@id) end - def example_view - "components/#{id}/example" + def examples_view + "components/#{id}/examples" end end end diff --git a/test/komponent/component_test.rb b/test/komponent/component_test.rb index 8d4a2e1..93efc4a 100644 --- a/test/komponent/component_test.rb +++ b/test/komponent/component_test.rb @@ -31,10 +31,10 @@ def test_returns_title Komponent::Component.new("foo_bar").title end - def test_returns_example_view + def test_returns_examples_view assert_equal \ - "components/foo/example", - Komponent::Component.new("foo").example_view + "components/foo/examples", + Komponent::Component.new("foo").examples_view end def test_returns_path From eb0f76dda6b49e2af6f7942cfadbdccc11784110 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 2 Feb 2019 17:39:52 +0100 Subject: [PATCH 34/34] Add Styleguide to table of contents in README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index eca232c..6b4b38f 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ This gem has been inspired by our Rails development practices at [Ouvrages](http - [Stimulus integration](#stimulus-integration) - [Internationalization](#internationalization) - [Available locales configuration](#available-locales-configuration) + - [Styleguide](#styleguide) - [Configuration](#configuration) - [Change default root path](#change-default-root-path) - [Default options for the generators](#default-options-for-the-generators)