Merge pull request #11873 from dacook/viewcomponent-sidecar

ViewComponent sidecar

app/components/vertical_ellipsis_menu/component.html.haml

@@ -1,4 +1,4 @@
-.vertical-ellipsis-menu{ "data-controller": "vertical-ellipsis-menu" }
-  %i.fa.fa-ellipsis-v{ "data-action": "click->vertical-ellipsis-menu#toggle" }
-  .vertical-ellipsis-menu-content{ "data-vertical-ellipsis-menu-target": "content" }
+.vertical-ellipsis-menu{ "data-controller": "vertical-ellipsis-menu--component" }
+  %i.fa.fa-ellipsis-v{ "data-action": "click->vertical-ellipsis-menu--component#toggle" }
+  .vertical-ellipsis-menu-content{ "data-vertical-ellipsis-menu--component-target": "content" }
     = content

app/components/vertical_ellipsis_menu/component.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module VerticalEllipsisMenu
+  class Component < ViewComponent::Base
+  end
+end

app/components/vertical_ellipsis_menu_component.rb

@@ -1,4 +0,0 @@
-# frozen_string_literal: true
-
-class VerticalEllipsisMenuComponent < ViewComponent::Base
-end

app/views/admin/products_v3/_table.html.haml

@@ -67,7 +67,7 @@
             %td.align-left
               .content= product.inherits_properties ? 'YES' : 'NO' #TODO: consider using https://github.com/RST-J/human_attribute_values, else use I18n.t (also below)
             %td.align-right
-              = render(VerticalEllipsisMenuComponent.new) do
+              = render(VerticalEllipsisMenu::Component.new) do
                 = link_to t('admin.products_page.actions.edit'), edit_admin_product_path(product)
                 = link_to t('admin.products_page.actions.clone'), clone_admin_product_path(product)
 
@@ -97,5 +97,5 @@
                 %td.align-left
                   -# empty
                 %td.align-right
-                  = render(VerticalEllipsisMenuComponent.new) do
+                  = render(VerticalEllipsisMenu::Component.new) do
                     = link_to t('admin.products_page.actions.edit'), edit_admin_product_variant_path(product, variant)

app/webpacker/controllers/index.js

@@ -9,7 +9,9 @@ import CableReady from "cable_ready";
 
 const application = Application.start();
 const context = require.context("controllers", true, /_controller\.js$/);
-application.load(definitionsFromContext(context));
+const contextComponents = require.context("../../components", true, /_controller\.js$/);
+
+application.load(definitionsFromContext(context).concat(definitionsFromContext(contextComponents)));
 application.consumer = consumer;
 StimulusReflex.initialize(application, { controller, isolate: true });
 StimulusReflex.debug = process.env.RAILS_ENV === "development";

app/webpacker/css/admin_v3/all.scss

@@ -129,5 +129,5 @@
 
 @import "app/components/help_modal_component/help_modal_component";
 @import "app/components/confirm_modal_component/confirm_modal_component";
-@import "app/components/vertical_ellipsis_menu_component/vertical_ellipsis_menu_component"; // admin_v3 and only V3
+@import "app/components/vertical_ellipsis_menu/component"; // admin_v3 and only V3
 @import "app/webpacker/css/admin/trix.scss";

spec/components/vertical_ellipsis_menu_component_spec.rb

@@ -2,10 +2,10 @@
 
 require "spec_helper"
 
-describe VerticalEllipsisMenuComponent, type: :component do
+describe VerticalEllipsisMenu::Component, type: :component do
   it "displays the included links" do
     content = "<a href>Edit</a>"
-    render_inline(VerticalEllipsisMenuComponent.new.with_content(content.html_safe))
+    render_inline(described_class.new.with_content(content.html_safe))
 
     expect(page).to have_selector "a", text: "Edit"
   end

spec/javascripts/stimulus/vertical_ellipsis_menu_controller_test.js

@@ -3,7 +3,7 @@
  */
 
 import { Application } from "stimulus";
-import vertical_ellipsis_menu_controller from "../../../app/webpacker/controllers/vertical_ellipsis_menu_controller";
+import vertical_ellipsis_menu_controller from "../../../app/components/vertical_ellipsis_menu/component_controller";
 
 describe("VerticalEllipsisMenuController test", () => {
   beforeAll(() => {