Refactor: Use view components

.gitignore

@@ -15,6 +15,7 @@
 .rspec_status
 
 # yarn
+app/assets/builds/
 node_modules/
 yarn-debug.log*
 yarn-error.log*

.rubocop.yml

@@ -5,6 +5,7 @@ require:
 
 # https://raw.githubusercontent.com/thoughtbot/guides/master/style/ruby/.rubocop.yml
 AllCops:
+  TargetRubyVersion: 3.2
   Exclude:
     - bin/*
     - config/**/*

Gemfile

@@ -6,20 +6,20 @@ gemspec
 
 gem "dartsass-rails"
 gem "importmap-rails"
-gem "katalyst-tables"
+gem "propshaft"
 gem "rails"
 gem "rake"
-gem "rubocop-katalyst", require: false
-gem "sprockets-rails"
 gem "sqlite3"
 gem "stimulus-rails"
 gem "turbo-rails"
 
 group :development, :test do
+  gem "erb_lint", require: false
   gem "factory_bot_rails"
   gem "puma"
   gem "rspec-rails"
   gem "rubocop"
+  gem "rubocop-katalyst", require: false
   gem "rubocop-rails"
   gem "rubocop-rake"
   gem "rubocop-rspec"

Gemfile.lock

@@ -1,7 +1,11 @@
 PATH
   remote: .
   specs:
-    katalyst-navigation (1.4.1)
+    katalyst-navigation (1.5.0.beta.1)
+      katalyst-html-attributes
+      katalyst-kpop
+      katalyst-tables
+      view_component
 
 GEM
   remote: https://rubygems.org/
@@ -84,6 +88,13 @@ GEM
       public_suffix (>= 2.0.2, < 6.0)
     ast (2.4.2)
     base64 (0.2.0)
+    better_html (2.0.2)
+      actionview (>= 6.0)
+      activesupport (>= 6.0)
+      ast (~> 2.0)
+      erubi (~> 1.4)
+      parser (>= 2.4)
+      smart_properties
     bigdecimal (3.1.4)
     builder (3.2.4)
     capybara (3.39.2)
@@ -108,6 +119,13 @@ GEM
     diff-lcs (1.5.0)
     drb (2.2.0)
       ruby2_keywords
+    erb_lint (0.5.0)
+      activesupport
+      better_html (>= 2.0.1)
+      parser (>= 2.7.1.4)
+      rainbow
+      rubocop
+      smart_properties
     erubi (1.12.0)
     factory_bot (6.4.2)
       activesupport (>= 5.0.0)
@@ -142,6 +160,10 @@ GEM
     katalyst-html-attributes (1.0.0)
       activesupport
       html-attributes-utils
+    katalyst-kpop (3.0.1)
+      katalyst-html-attributes
+      turbo-rails
+      view_component
     katalyst-tables (2.2.12)
       katalyst-html-attributes
       view_component
@@ -182,6 +204,11 @@ GEM
     parser (3.2.2.4)
       ast (~> 2.4.1)
       racc
+    propshaft (0.8.0)
+      actionpack (>= 7.0.0)
+      activesupport (>= 7.0.0)
+      rack
+      railties (>= 7.0.0)
     psych (5.1.1.1)
       stringio
     public_suffix (5.0.4)
@@ -302,13 +329,7 @@ GEM
       google-protobuf (~> 3.23)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sprockets (4.2.1)
-      concurrent-ruby (~> 1.0)
-      rack (>= 2.2.4, < 4)
-    sprockets-rails (3.4.2)
-      actionpack (>= 5.2)
-      activesupport (>= 5.2)
-      sprockets (>= 3.0.0)
+    smart_properties (1.17.0)
     sqlite3 (1.6.9)
       mini_portile2 (~> 2.8.0)
     sqlite3 (1.6.9-arm64-darwin)
@@ -347,11 +368,12 @@ DEPENDENCIES
   capybara
   cuprite
   dartsass-rails
+  erb_lint
   factory_bot_rails
   faker
   importmap-rails
   katalyst-navigation!
-  katalyst-tables
+  propshaft
   puma
   rails
   rails-controller-testing
@@ -363,7 +385,6 @@ DEPENDENCIES
   rubocop-rake
   rubocop-rspec
   shoulda-matchers
-  sprockets-rails
   sqlite3
   stimulus-rails
   turbo-rails

README.md

@@ -4,17 +4,41 @@ Generates and edits navigation menus.
 
 ## Installation
 
-Install the gem and add to the application's Gemfile by executing:
+Install the gem as usual
 
-    $ bundle add katalyst-navigation
+```ruby
+gem "katalyst-navigation"
+```
 
-If bundler is not being used to manage dependencies, install the gem by executing:
+Mount the engine in your `routes.rb` file:
 
-    $ gem install katalyst-navigation
+```ruby
+mount Katalyst::Navigation::Engine, at: "navigation"
+```
+
+Add the Gem's migrations to your application:
+
+```ruby
+rake katalyst_navigation:install:migrations
+```
+
+Add the Gem's javascript and CSS to your build pipeline. This assumes that
+you're using `rails-dartsass` and `importmaps` to manage your assets.
+
+```javascript
+// app/javascript/controllers/application.js
+import { application } from "controllers/application";
+import navigation from "@katalyst/navigation";
+application.load(navigation);
+```
+
+```sass
+@use "katalyst/navigation";
+```
 
 ## Usage
 
-This gem is still experimental and is not yet ready for public consumption. See dummy app for example usage.
+See the dummy app for examples.
 
 ## Contributing
 

Rakefile

@@ -3,24 +3,34 @@
 require "bundler/setup"
 require "bundler/gem_tasks"
 require "rspec/core/rake_task"
-require "rubocop/rake_task"
 
 APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
 
 load "rails/tasks/engine.rake"
 load "rails/tasks/statistics.rake"
 
 # prepend test:prepare to run generators, and db:prepare to run migrations
-RSpec::Core::RakeTask.new(spec: %w[app:test:prepare app:db:prepare])
+RSpec::Core::RakeTask.new(spec: %w[app:spec:prepare])
 
-RuboCop::RakeTask.new
+require "rubocop/katalyst/rake_task"
+RuboCop::Katalyst::RakeTask.new
 
-desc "Run all linters"
-task lint: %w[rubocop app:yarn:lint]
+require "rubocop/katalyst/erb_lint_task"
+RuboCop::Katalyst::ErbLintTask.new
 
-desc "Run all auto-formatters"
-task format: %w[rubocop:autocorrect app:yarn:format]
+require "rubocop/katalyst/prettier_task"
+RuboCop::Katalyst::PrettierTask.new
 
-task default: %i[lint spec] do
+namespace :yarn do
+  desc "Compile javascript"
+  task build: :environment do
+    sh "yarn build"
+  end
+end
+
+desc "Compile assets"
+task build: ["yarn:build", "app:dartsass:build"]
+
+task default: %i[lint build spec] do
   puts "🎉 build complete! 🎉"
 end

app/assets/config/katalyst-navigation.js

@@ -1 +1 @@
-//= link_tree ../javascripts
+//= link_tree ../builds

app/components/katalyst/navigation/editor/base_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    module Editor
+      class BaseComponent < ViewComponent::Base
+        include Katalyst::HtmlAttributes
+
+        MENU_CONTROLLER       = "navigation--editor--menu"
+        LIST_CONTROLLER       = "navigation--editor--list"
+        ITEM_CONTROLLER       = "navigation--editor--item"
+        STATUS_BAR_CONTROLLER = "navigation--editor--status-bar"
+        NEW_ITEM_CONTROLLER   = "navigation--editor--new-item"
+
+        attr_accessor :menu, :item
+
+        delegate :config, to: ::Katalyst::Navigation
+
+        def initialize(menu:, item: nil, **)
+          super(**)
+
+          @menu = menu
+          @item = item
+        end
+
+        def call; end
+
+        def menu_form_id
+          dom_id(menu, :items)
+        end
+
+        private
+
+        def attributes_scope
+          "menu[items_attributes][]"
+        end
+
+        def inspect
+          if item.present?
+            "<#{self.class.name} menu: #{menu.inspect}, item: #{item.inspect}>"
+          else
+            "<#{self.class.name} menu: #{menu.inspect}>"
+          end
+        end
+      end
+    end
+  end
+end

app/components/katalyst/navigation/editor/errors_component.html.erb

@@ -0,0 +1,12 @@
+<turbo-frame id="<%= dom_id(menu, :errors) %>">
+  <% if menu.errors.any? %>
+    <%= tag.div(class: "navigation-errors", **html_attributes) do %>
+      <h2>Errors in navigation</h2>
+      <ul class="errors">
+        <% menu.errors.each do |error| %>
+          <li class="error"><%= error.message %></li>
+        <% end %>
+      </ul>
+    <% end %>
+  <% end %>
+</turbo-frame>

app/components/katalyst/navigation/editor/errors_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    module Editor
+      class ErrorsComponent < BaseComponent
+        include Katalyst::Tables::TurboReplaceable
+
+        def id
+          dom_id(menu, :errors)
+        end
+      end
+    end
+  end
+end

app/components/katalyst/navigation/editor/item_component.html.erb

@@ -0,0 +1,27 @@
+<%= tag.div(**html_attributes) do %>
+  <div class="tree" data-invisible="<%= !item.visible? %>">
+    <div role="toolbar" data-tree-accordion-controls>
+      <span role="button" value="collapse" data-action="click-><%= MENU_CONTROLLER %>#collapse" title="Collapse tree"></span>
+      <span role="button" value="expand" data-action="click-><%= MENU_CONTROLLER %>#expand" title="Expand tree"></span>
+    </div>
+
+    <span role="img" value="<%= item.model_name.param_key %>" title="Type"></span>
+    <h4 class="heading" title="<%= item.title %>"><%= item.title %></h4>
+    <span role="img" value="invisible" title="Hidden"></span>
+  </div>
+
+  <div class="url">
+    <%= link_to item.url || "", item.url || "", data: { turbo: false } %>
+  </div>
+
+  <div role="toolbar" data-tree-controls>
+    <span role="button" value="de-nest" data-action="click-><%= MENU_CONTROLLER %>#deNest" title="Outdent"></span>
+    <span role="button" value="nest" data-action="click-><%= MENU_CONTROLLER %>#nest" title="Indent"></span>
+    <%= kpop_link_to("", edit_item_link, role: "button", title: "Edit", value: "edit") %>
+    <span role="button" value="remove" data-action="click-><%= MENU_CONTROLLER %>#remove" title="Remove"></span>
+  </div>
+
+  <input autocomplete="off" type="hidden" name="<%= attributes_scope %>[id]" value="<%= item.id %>">
+  <input autocomplete="off" type="hidden" name="<%= attributes_scope %>[depth]" value="<%= item.depth %>">
+  <input autocomplete="off" type="hidden" name="<%= attributes_scope %>[index]" value="<%= item.index %>">
+<% end %>

app/components/katalyst/navigation/editor/item_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    module Editor
+      class ItemComponent < BaseComponent
+        include KpopHelper
+
+        def edit_item_link
+          if item.persisted?
+            helpers.katalyst_navigation.edit_menu_item_path(menu, item)
+          else
+            helpers.katalyst_navigation.new_menu_item_path(item.menu, type: item.type)
+          end
+        end
+
+        private
+
+        def default_html_attributes
+          {
+            id:   dom_id(item),
+            data: {
+              controller: ITEM_CONTROLLER,
+            },
+          }
+        end
+      end
+    end
+  end
+end