From 8c63273e8caffbfd2bb76589fa8274e0dfde41f7 Mon Sep 17 00:00:00 2001 From: Geoff Tidey Date: Thu, 30 Jul 2020 10:27:57 +0100 Subject: [PATCH 1/2] =?UTF-8?q?Stops=20komponent=20components=20from=20bei?= =?UTF-8?q?ng=20listed=20in=20the=20style=20guide=20sidebar=20-=20Create?= =?UTF-8?q?=20komponent=20fixture=20components=20for=20path=20tests=20-=20?= =?UTF-8?q?Add=20filter=20to=20remove=20anything=20path=20that=20starts=20?= =?UTF-8?q?with=20=E2=80=98komponent/=20from=20=20Komponent::Component.all?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 ++-- .../container/_komponent_container.html.erb | 3 ++ .../container/komponent_container.css | 17 ++++++++ .../container/komponent_container.js | 1 + .../komponent_container_component.rb | 5 +++ .../footer/_komponent_footer.html.erb | 3 ++ .../komponent/footer/komponent_footer.css | 27 ++++++++++++ .../komponent/footer/komponent_footer.js | 1 + .../footer/komponent_footer_component.rb | 5 +++ .../header/_komponent_header.html.erb | 3 ++ .../komponent/header/komponent_header.css | 15 +++++++ .../komponent/header/komponent_header.js | 1 + .../header/komponent_header_component.rb | 5 +++ .../frontend/components/komponent/index.js | 5 +++ .../sidebar/_komponent_sidebar.html.erb | 10 +++++ .../komponent/sidebar/komponent_sidebar.css | 43 +++++++++++++++++++ .../komponent/sidebar/komponent_sidebar.js | 1 + .../sidebar/komponent_sidebar_component.rb | 5 +++ lib/komponent/component.rb | 2 + 19 files changed, 156 insertions(+), 4 deletions(-) create mode 100644 fixtures/my_app/frontend/components/komponent/container/_komponent_container.html.erb create mode 100644 fixtures/my_app/frontend/components/komponent/container/komponent_container.css create mode 100644 fixtures/my_app/frontend/components/komponent/container/komponent_container.js create mode 100644 fixtures/my_app/frontend/components/komponent/container/komponent_container_component.rb create mode 100644 fixtures/my_app/frontend/components/komponent/footer/_komponent_footer.html.erb create mode 100644 fixtures/my_app/frontend/components/komponent/footer/komponent_footer.css create mode 100644 fixtures/my_app/frontend/components/komponent/footer/komponent_footer.js create mode 100644 fixtures/my_app/frontend/components/komponent/footer/komponent_footer_component.rb create mode 100644 fixtures/my_app/frontend/components/komponent/header/_komponent_header.html.erb create mode 100644 fixtures/my_app/frontend/components/komponent/header/komponent_header.css create mode 100644 fixtures/my_app/frontend/components/komponent/header/komponent_header.js create mode 100644 fixtures/my_app/frontend/components/komponent/header/komponent_header_component.rb create mode 100644 fixtures/my_app/frontend/components/komponent/index.js create mode 100644 fixtures/my_app/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb create mode 100644 fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.css create mode 100644 fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.js create mode 100644 fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar_component.rb diff --git a/README.md b/README.md index bb1b078..40e8468 100644 --- a/README.md +++ b/README.md @@ -182,7 +182,7 @@ Each component comes with a Ruby `module`. You can use it to set properties: module ButtonComponent extend ComponentHelper - + property :href, required: true property :text, default: 'My button' end @@ -204,7 +204,7 @@ If your partial becomes too complex and you want to extract logic from it, you m module ButtonComponent extend ComponentHelper - + property :href, required: true property :text, default: 'My button' @@ -461,9 +461,9 @@ resolved_paths: ## Running tests -Run all Cucumber features and unit tests with `bundle exec appraisal rake test` +Install all the gems `bundle exec appraisal install` -Run the full test matrix with `bundle exec appraisal rake test` +then run the full test matrix with `bundle exec appraisal rake test` ## Contributing diff --git a/fixtures/my_app/frontend/components/komponent/container/_komponent_container.html.erb b/fixtures/my_app/frontend/components/komponent/container/_komponent_container.html.erb new file mode 100644 index 0000000..31dc85d --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/container/_komponent_container.html.erb @@ -0,0 +1,3 @@ +
+ <%= yield %> +
diff --git a/fixtures/my_app/frontend/components/komponent/container/komponent_container.css b/fixtures/my_app/frontend/components/komponent/container/komponent_container.css new file mode 100644 index 0000000..a41d825 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/container/komponent_container.css @@ -0,0 +1,17 @@ +/* stylelint-disable value-list-comma-newline-after */ + +.komponent-container { + font-size: 16px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + margin: 40px 60px 0 300px; + + .komponent-code { + background-color: #333; + color: #fff; + margin: 10px 0; + padding: 10px; + } +} + +/* stylelint-enable */ diff --git a/fixtures/my_app/frontend/components/komponent/container/komponent_container.js b/fixtures/my_app/frontend/components/komponent/container/komponent_container.js new file mode 100644 index 0000000..70b1a82 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/container/komponent_container.js @@ -0,0 +1 @@ +import "./komponent_container.css"; diff --git a/fixtures/my_app/frontend/components/komponent/container/komponent_container_component.rb b/fixtures/my_app/frontend/components/komponent/container/komponent_container_component.rb new file mode 100644 index 0000000..3a2362d --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/container/komponent_container_component.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +module KomponentContainerComponent + extend ComponentHelper +end diff --git a/fixtures/my_app/frontend/components/komponent/footer/_komponent_footer.html.erb b/fixtures/my_app/frontend/components/komponent/footer/_komponent_footer.html.erb new file mode 100644 index 0000000..c3a1fae --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/footer/_komponent_footer.html.erb @@ -0,0 +1,3 @@ +
+ Built with <%= link_to "Komponent", "http://komponent.io", target: "_blank" %> +
diff --git a/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.css b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.css new file mode 100644 index 0000000..95a03e4 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.css @@ -0,0 +1,27 @@ +/* stylelint-disable value-list-comma-newline-after */ + +.komponent-footer { + 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; + + &, + a { + color: #999; + } + + a { + text-decoration: none; + + &:hover, + &:focus { + color: #0038ea; + } + } +} + +/* stylelint-enable */ diff --git a/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.js b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.js new file mode 100644 index 0000000..c1d61e6 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer.js @@ -0,0 +1 @@ +import "./komponent_footer.css"; diff --git a/fixtures/my_app/frontend/components/komponent/footer/komponent_footer_component.rb b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer_component.rb new file mode 100644 index 0000000..9f64ef8 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/footer/komponent_footer_component.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +module KomponentFooterComponent + extend ComponentHelper +end diff --git a/fixtures/my_app/frontend/components/komponent/header/_komponent_header.html.erb b/fixtures/my_app/frontend/components/komponent/header/_komponent_header.html.erb new file mode 100644 index 0000000..e4feb12 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/header/_komponent_header.html.erb @@ -0,0 +1,3 @@ +
+ +
diff --git a/fixtures/my_app/frontend/components/komponent/header/komponent_header.css b/fixtures/my_app/frontend/components/komponent/header/komponent_header.css new file mode 100644 index 0000000..ac9f194 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/header/komponent_header.css @@ -0,0 +1,15 @@ +/* stylelint-disable value-list-comma-newline-after */ + +.komponent-header { + align-items: center; + background-color: #0038ea; + color: white; + display: flex; + 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/fixtures/my_app/frontend/components/komponent/header/komponent_header.js b/fixtures/my_app/frontend/components/komponent/header/komponent_header.js new file mode 100644 index 0000000..b013393 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/header/komponent_header.js @@ -0,0 +1 @@ +import "./komponent_header.css"; diff --git a/fixtures/my_app/frontend/components/komponent/header/komponent_header_component.rb b/fixtures/my_app/frontend/components/komponent/header/komponent_header_component.rb new file mode 100644 index 0000000..7d3d6b6 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/header/komponent_header_component.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +module KomponentHeaderComponent + extend ComponentHelper +end diff --git a/fixtures/my_app/frontend/components/komponent/index.js b/fixtures/my_app/frontend/components/komponent/index.js new file mode 100644 index 0000000..25e71e2 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/index.js @@ -0,0 +1,5 @@ +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/fixtures/my_app/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb b/fixtures/my_app/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb new file mode 100644 index 0000000..195ade3 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/sidebar/_komponent_sidebar.html.erb @@ -0,0 +1,10 @@ +
+
Components
+ +
diff --git a/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.css b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.css new file mode 100644 index 0000000..3ac9e59 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.css @@ -0,0 +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; + overflow: auto; + padding: 20px; + position: absolute; + top: 60px; + width: 240px; + + &-title { + color: #0038ea; + font-size: 14px; + font-weight: bold; + 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 0 30px; + padding: 0; + } + + &-item { + margin: 0 0 5px; + } + + a { + color: #333; + text-decoration: none; + } +} + +/* stylelint-enable */ diff --git a/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.js b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.js new file mode 100644 index 0000000..2b3af41 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar.js @@ -0,0 +1 @@ +import "./komponent_sidebar.css"; diff --git a/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar_component.rb b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar_component.rb new file mode 100644 index 0000000..3395063 --- /dev/null +++ b/fixtures/my_app/frontend/components/komponent/sidebar/komponent_sidebar_component.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +module KomponentSidebarComponent + extend ComponentHelper +end diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb index b6cb274..f2ff26a 100644 --- a/lib/komponent/component.rb +++ b/lib/komponent/component.rb @@ -13,6 +13,8 @@ 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 if component_path.starts_with?('komponent/') + next unless File.exist?(components_root.join(component_path) .join("#{component_path.underscore.gsub('/', '_')}_component.rb")) From a70bf6653c68e7778b11f1a8c7c9bb690b351af9 Mon Sep 17 00:00:00 2001 From: Geoff Tidey Date: Thu, 30 Jul 2020 11:00:03 +0100 Subject: [PATCH 2/2] reduce Cognitive Complexity shown by code climate https://codeclimate.com/github/komposable/komponent/pull/167 --- lib/komponent/component.rb | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/lib/komponent/component.rb b/lib/komponent/component.rb index f2ff26a..c9bfe74 100644 --- a/lib/komponent/component.rb +++ b/lib/komponent/component.rb @@ -13,10 +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 if component_path.starts_with?('komponent/') - - next unless File.exist?(components_root.join(component_path) - .join("#{component_path.underscore.gsub('/', '_')}_component.rb")) + next unless list_this_component_path?(component_path) components[component_path] = Component.new(component_path) end @@ -34,6 +31,15 @@ def find(id) def components_root @components_root ||= Rails.application.config.komponent.root.join('components') end + + private + + def list_this_component_path?(component_path) + return false if component_path.starts_with?('komponent/') + + File.exist?(components_root.join(component_path) + .join("#{component_path.underscore.gsub('/', '_')}_component.rb")) + end end attr_reader :id