From 9c577a40d6568c86746942643451fe06b44261f3 Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Thu, 31 May 2018 00:04:26 +0200 Subject: [PATCH 01/13] 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 469f2aea50d95d9aa2f3bdeb73be64d8407d3f31 Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Sun, 3 Jun 2018 15:55:50 +0200 Subject: [PATCH 02/13] 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 89a9e56..cebd21c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## Upcoming release +**Enhancements:** + +- Implement a styleguide view + ## v2.1.0 (2018-05-31) **Enhancements:** 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 e419cf1..add4aa7 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 5f3532e1577f71c1dca79355d697b8577c3cd338 Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Sun, 3 Jun 2018 19:11:43 +0200 Subject: [PATCH 03/13] 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 d3aa1791ea22e3596a67215262e9ed327c5afeab Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Sun, 3 Jun 2018 19:15:13 +0200 Subject: [PATCH 04/13] wip: update readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 377f6c1..989ab30 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 ffec7a0c57cd1f5c1629b84bb6de305eda7082ee Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Fri, 8 Jun 2018 11:57:50 +0200 Subject: [PATCH 05/13] 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 409bfa5878433c36b4b3a9b6241a68f1645779e4 Mon Sep 17 00:00:00 2001 From: Nicolas Brousse Date: Fri, 8 Jun 2018 11:58:26 +0200 Subject: [PATCH 06/13] 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 989ab30..29cc8c4 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 5b0367a57ad3b77e1eaecd92e5b43643c789b088 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 16:00:19 +0200 Subject: [PATCH 08/13] 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 29cc8c4..092daac 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 22548ed88c6f56a4fadcaae58b0673d68fe795fc Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 16:21:10 +0200 Subject: [PATCH 09/13] 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 e101de0ad214dadb184a58fa9caaff2a347dfc5f Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 18:42:12 +0200 Subject: [PATCH 10/13] 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 aadaf52b247fedb59b31b5e1c4ef5241708e0464 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 18:53:11 +0200 Subject: [PATCH 11/13] 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 e32f4bf2fe9ca0ec8f6c18c858ad3af842190d74 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 18:53:33 +0200 Subject: [PATCH 12/13] 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 e9541bf..113a3ae 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"; @@ -84,6 +86,7 @@ Feature: Component generator When I run `rails generate component AwesomeButton` And I cd to "frontend/components/awesome_button" Then a file named "_awesome_button.html.erb" should exist + And a file named "_example.html.erb" should exist Scenario: Generate component with custom template engine defined to `haml` Given a file named "config/initializers/custom_configuration.rb" with: @@ -93,6 +96,7 @@ Feature: Component generator When I run `rails generate component AwesomeButton` And I cd to "frontend/components/awesome_button" Then a file named "_awesome_button.html.haml" should exist + And a file named "_example.html.haml" should exist Scenario: Generate component with custom template engine defined to `slim` Given a file named "config/initializers/custom_configuration.rb" with: @@ -102,6 +106,7 @@ Feature: Component generator When I run `rails generate component AwesomeButton` And I cd to "frontend/components/awesome_button" Then a file named "_awesome_button.html.slim" should exist + And a file named "_example.html.slim" should exist Scenario: Generate component with custom stylesheet engine defined to `scss` Given a file named "config/initializers/custom_configuration.rb" with: From c4f9e2115f400ffec77493d1812fd497a5597901 Mon Sep 17 00:00:00 2001 From: Hans Lemuet Date: Sat, 9 Jun 2018 19:05:25 +0200 Subject: [PATCH 13/13] 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 %>"