katalyst-navigation 1.0.0

data/app/models/katalyst/navigation/menu.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    # A menu is a list of items (links, buttons, etc) with order and depth creating a tree structure.
+    # Items should be copy-on-write, as menus store their structure as copy-on-write versions using item ids.
+    class Menu < ApplicationRecord
+      include GarbageCollection
+
+      before_destroy :unset_versions
+
+      belongs_to :draft_version,
+                 autosave:   true,
+                 class_name: "Katalyst::Navigation::Menu::Version",
+                 inverse_of: :parent,
+                 optional:   true
+      belongs_to :published_version,
+                 class_name: "Katalyst::Navigation::Menu::Version",
+                 inverse_of: :parent,
+                 optional:   true
+
+      has_many :versions,
+               class_name:  "Katalyst::Navigation::Menu::Version",
+               dependent:   :delete_all,
+               foreign_key: :parent_id,
+               inverse_of:  :parent,
+               validate:    true do
+        def active
+          menu = proxy_association.owner
+          where(id: [menu.published_version_id, menu.draft_version_id].uniq.compact)
+        end
+
+        def inactive
+          menu = proxy_association.owner
+          where.not(id: [menu.published_version_id, menu.draft_version_id].uniq.compact)
+        end
+      end
+
+      has_many :items,
+               autosave:   true,
+               class_name: "Katalyst::Navigation::Item",
+               dependent:  :delete_all,
+               inverse_of: :menu,
+               validate:   true
+
+      validates :title, :slug, presence: true
+      validates :slug, uniqueness: true
+
+      # A menu is in draft mode if it has an unpublished draft or it has no published version.
+      # @return the current state of the menu, either `published` or `draft`
+      def state
+        if published_version_id && published_version_id == draft_version_id
+          :published
+        else
+          :draft
+        end
+      end
+
+      # Promotes the draft version to become the published version
+      def publish!
+        update!(published_version: draft_version)
+        self
+      end
+
+      # Reverts the draft version to the current published version
+      def revert!
+        update!(draft_version: published_version)
+        self
+      end
+
+      # Updates the current draft version with new structure. Attributes should be structural information about the
+      # items, e.g. `{index => {id:, depth:}` or `[{id:, depth:}]`.
+      #
+      # This method conforms to the behaviour of `accepts_nested_attributes_for` so that it can be used with rails form
+      # helpers.
+      def items_attributes=(attributes)
+        next_version.nodes = attributes
+      end
+
+      delegate :nodes, :items, :tree, to: :published_version, prefix: :published, allow_nil: true
+      delegate :nodes, :items, :tree, to: :draft_version, prefix: :draft, allow_nil: true
+
+      private
+
+      def unset_versions
+        update(draft_version: nil, published_version: nil)
+      end
+
+      # Returns an unsaved copy of draft version for accumulating changes.
+      def next_version
+        if draft_version.nil?
+          build_draft_version
+        elsif draft_version.persisted?
+          self.draft_version = draft_version.dup
+        else
+          draft_version
+        end
+      end
+
+      class Version < ApplicationRecord
+        include HasTree
+
+        belongs_to :parent, class_name: "Katalyst::Navigation::Menu", inverse_of: :versions
+
+        attribute :nodes, Types::NodesType.new, default: -> { [] }
+
+        def items
+          # support building menus in memory
+          # requires that items are added in order and index and depth are set
+          return parent.items unless parent.persisted?
+
+          items = parent.items.where(id: nodes.map(&:id)).index_by(&:id)
+          nodes.map do |node|
+            item       = items[node.id]
+            item.index = node.index
+            item.depth = node.depth
+            item
+          end
+        end
+      end
+    end
+  end
+end

data/app/models/katalyst/navigation/node.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    # Data class for representing menu structure.
+    class Node
+      include ActiveModel::Model
+      include ActiveModel::Attributes
+
+      attribute :id, :integer
+      attribute :index, :integer
+      attribute :depth, :integer, default: 0
+
+      attr_accessor :item
+
+      def as_json
+        attributes.slice("id", "depth").as_json
+      end
+    end
+  end
+end

data/app/models/katalyst/navigation/types/nodes_type.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    module Types
+      # Data serialization/deserialization for Katalyst::Navigation::Menu::Version structural data
+      class NodesType < ActiveRecord::Type::Json
+        def serialize(value)
+          super(value.as_json)
+        end
+
+        def deserialize(value)
+          case value
+          when nil
+            nil
+          when String
+            deserialize(super)
+          when Hash
+            deserialize_params(value)
+          when Array
+            deserialize_array(value)
+          end
+        end
+
+        private
+
+        # Deserialize a params-style array, e.g. "0" => { ... }
+        def deserialize_params(value)
+          value.map do |index, attributes|
+            Node.new(index: index, **attributes)
+          end.select(&:id).sort_by(&:index)
+        end
+
+        def deserialize_array(value)
+          value.map.with_index do |attributes, index|
+            Node.new(index: index, **attributes)
+          end.select(&:id).sort_by(&:index)
+        end
+      end
+    end
+  end
+end

data/app/views/katalyst/navigation/items/_button.html.erb

@@ -0,0 +1,28 @@
+<%= form_with model: item, scope: :item, url: path do |form| %>
+  <%= form.hidden_field :type %>
+
+  <div class="input">
+    <%= form.label :title %>
+    <%= form.text_field :title %>
+  </div>
+
+  <div class="input">
+    <%= form.label :url %>
+    <%= form.text_field :url %>
+  </div>
+
+  <div class="input">
+    <%= form.label :http_method %>
+    <%= form.select :http_method, Katalyst::Navigation::Button::HTTP_METHODS %>
+  </div>
+
+  <div class="input">
+    <%= form.check_box :visible %>
+    <%= form.label :visible %>
+  </div>
+
+  <div class="button-row">
+    <%= form.submit "Done" %>
+    <%= link_to "Discard", menu_path(item.menu), class: "button--text" %>
+  </div>
+<% end %>

data/app/views/katalyst/navigation/items/_link.html.erb

@@ -0,0 +1,21 @@
+<%= form_with model: item, scope: :item, url: path do |form| %>
+  <%= form.hidden_field :type %>
+
+  <div class="field">
+    <%= form.label :title %>
+    <%= form.text_field :title %>
+  </div>
+
+  <div class="field">
+    <%= form.label :url %>
+    <%= form.text_field :url %>
+  </div>
+
+  <div class="field">
+    <%= form.label :visible %>
+    <%= form.check_box :visible %>
+  </div>
+
+  <%= form.submit "Done" %>
+  <%= link_to "Discard", item.menu %>
+<% end %>

data/app/views/katalyst/navigation/items/edit.html.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag "navigation--editor--item-frame" do %>
+  <h3 class="heading-three">Edit <%= item.model_name.human.downcase %></h3>
+  <%= render item.model_name.param_key, item: item, path: menu_item_path(item.menu, item) %>
+<% end %>

data/app/views/katalyst/navigation/items/new.html.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag "navigation--editor--item-frame" do %>
+  <h3 class="heading-three">New <%= item.model_name.human.downcase %></h3>
+  <%= render item.model_name.param_key, item: item, path: menu_items_path(item.menu) %>
+<% end %>

data/app/views/katalyst/navigation/items/update.turbo_stream.erb

@@ -0,0 +1,7 @@
+<%= turbo_stream.replace "navigation--editor--item-frame" do %>
+  <%= render "katalyst/navigation/menus/new_items", menu: item.menu %>
+<% end %>
+
+<%= turbo_stream.replace dom_id(previous) do %>
+  <%= render "katalyst/navigation/menus/item", item: item %>
+<% end %>

data/app/views/katalyst/navigation/menus/_item.html.erb

@@ -0,0 +1,15 @@
+<%= navigation_editor_item item: item do |builder| %>
+  <div class="tree" data-invisible="<%= !item.visible? %>">
+    <%= builder.accordion_actions %>
+
+    <span role="img" value="<%= item.url.present? ? "link" : "title" %>" title="Hidden"></span>
+    <h4 class="title" title="<%= item.title %>"><%= item.title %></h4>
+    <span role="img" value="invisible" title="Hidden"></span>
+  </div>
+
+  <div class="url">
+    <%= link_to item.url || "", item.url || "" %>
+  </div>
+
+  <%= builder.item_actions %>
+<% end %>

data/app/views/katalyst/navigation/menus/_list_item.html.erb

@@ -0,0 +1,14 @@
+<li draggable="true"
+    data-navigation-item
+    data-navigation-item-id="<%= item.id %>"
+    data-navigation-index="<%= item.index %>"
+    data-navigation-depth="<%= item.depth %>"
+    data-deny-de-nest
+    data-deny-nest
+    data-deny-collapse
+    data-deny-expand
+    data-deny-remove
+    data-deny-drag
+    data-deny-edit>
+  <%= yield %>
+</li>

data/app/views/katalyst/navigation/menus/_new_item.html.erb

@@ -0,0 +1,3 @@
+<%= navigation_editor_new_item item: item, data: { item_type: item.model_name.param_key } do %>
+  <%= item.model_name.human %>
+<% end %>

data/app/views/katalyst/navigation/menus/_new_items.html.erb

@@ -0,0 +1,5 @@
+<%= turbo_frame_tag "navigation--editor--item-frame" do %>
+  <div class="navigation--editor--new-items" role="listbox">
+    <%= render partial: "katalyst/navigation/menus/new_item", collection: navigation_editor_new_items(menu), as: :item %>
+  </div>
+<% end %>

data/app/views/katalyst/navigation/menus/edit.html.erb

@@ -0,0 +1,15 @@
+<% content_for :title, "Edit navigation" %>
+
+<%= form_with model: menu do |form| %>
+  <div class="field">
+    <%= form.label :title %>
+    <%= form.text_field :title %>
+  </div>
+
+  <div class="field">
+    <%= form.label :slug %>
+    <%= form.text_field :slug %>
+  </div>
+
+  <%= form.submit :save %>
+<% end %>

data/app/views/katalyst/navigation/menus/index.html.erb

@@ -0,0 +1,17 @@
+<% content_for :title, "Navigations" %>
+
+<nav class="index-table-actions">
+  <div class="item-actions">
+    <%= link_to "Add", [:new, :menu], class: "button button--primary" %>
+  </div>
+</nav>
+
+<%= table_with collection: menus, sort: sort, class: "index-table" do |row, menu| %>
+  <%= row.cell :title do |cell| %>
+    <%= link_to cell.value, menu %>
+  <% end %>
+  <%= row.cell :slug %>
+  <%= row.cell :actions do |cell| %>
+    <%= button_to "Delete", menu, method: :delete, class: "button button--text" %>
+  <% end %>
+<% end %>

data/app/views/katalyst/navigation/menus/new.html.erb

@@ -0,0 +1,15 @@
+<% content_for :title, "New navigation" %>
+
+<%= form_with model: menu do |form| %>
+  <div class="field">
+    <%= form.label :title %>
+    <%= form.text_field :title %>
+  </div>
+
+  <div class="field">
+    <%= form.label :slug %>
+    <%= form.text_field :slug %>
+  </div>
+
+  <%= form.submit %>
+<% end %>

data/app/views/katalyst/navigation/menus/show.html.erb

@@ -0,0 +1,15 @@
+<% content_for :title, menu.title %>
+
+<%= navigation_editor_status_bar menu: menu %>
+
+<%= navigation_editor_menu menu: menu do |form| %>
+  <div role="rowheader">
+    <h4>Title</h4>
+    <h4>Url</h4>
+    <h4>Actions</h4>
+  </div>
+
+  <%= navigation_editor_list menu: menu %>
+<% end %>
+
+<%= render "katalyst/navigation/menus/new_items", menu: menu %>

data/config/importmap.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+pin_all_from Katalyst::Navigation::Engine.root.join("app/assets/javascripts"),
+             # preload in tests so that we don't start clicking before controllers load
+             preload: Rails.env.test?

data/config/locales/en.yml

@@ -0,0 +1,12 @@
+en:
+  views:
+    katalyst:
+      navigation:
+        editor:
+          draft_html: Draft
+          dirty_html: Unsaved changes
+          discard: Discard
+          publish: Publish
+          published_html: Published <i>(last updated %{last_update})</i>
+          revert: Revert
+          save: Save

data/config/routes.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+Katalyst::Navigation::Engine.routes.draw do
+  resources :menus do
+    resources :items, only: %i[new create edit update]
+  end
+
+  root to: redirect("menus")
+end

data/db/migrate/20220826034057_create_katalyst_navigation_menus.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class CreateKatalystNavigationMenus < ActiveRecord::Migration[7.0]
+  def change
+    create_table :katalyst_navigation_menus do |t|
+      t.string :title
+      t.string :slug, index: true
+
+      t.references :published_version
+      t.references :draft_version
+
+      t.timestamps
+    end
+
+    create_table :katalyst_navigation_menu_versions do |t|
+      t.references :parent, foreign_key: { to_table: :katalyst_navigation_menus }, null: false
+      t.json :nodes
+
+      t.timestamps
+    end
+
+    add_foreign_key :katalyst_navigation_menus, :katalyst_navigation_menu_versions, column: :published_version_id
+    add_foreign_key :katalyst_navigation_menus, :katalyst_navigation_menu_versions, column: :draft_version_id
+  end
+end

data/db/migrate/20220826034507_create_katalyst_navigation_items.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class CreateKatalystNavigationItems < ActiveRecord::Migration[7.0]
+  def change
+    create_table :katalyst_navigation_items do |t|
+      t.belongs_to :menu, foreign_key: { to_table: :katalyst_navigation_menus }, null: false
+
+      t.string :type
+      t.string :title
+      t.string :url
+      t.string :http_method
+      t.boolean :visible, default: true
+
+      t.timestamps
+    end
+  end
+end

data/lib/katalyst/navigation/engine.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require "rails"
+
+module Katalyst
+  module Navigation
+    class Engine < ::Rails::Engine
+      isolate_namespace Katalyst::Navigation
+
+      initializer "katalyst-navigation.asset" do
+        config.after_initialize do |app|
+          if app.config.respond_to?(:assets)
+            app.config.assets.precompile += %w(katalyst-navigation.js)
+          end
+        end
+      end
+
+      initializer "katalyst-navigation.importmap", before: "importmap" do |app|
+        if app.config.respond_to?(:importmap)
+          app.config.importmap.paths << root.join("config/importmap.rb")
+          app.config.importmap.cache_sweepers << root.join("app/assets/javascripts")
+        end
+      end
+
+      initializer "katalyst-navigation.factories", after: "factory_bot.set_factory_paths" do
+        FactoryBot.definition_file_paths << Engine.root.join("spec/factories") if defined?(FactoryBot)
+      end
+
+      config.generators do |g|
+        g.test_framework :rspec
+        g.fixture_replacement :factory_bot
+        g.factory_bot dir: "spec/factories"
+      end
+    end
+  end
+end

data/lib/katalyst/navigation/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    VERSION = "1.0.0"
+  end
+end

data/lib/katalyst/navigation.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "katalyst/navigation/engine"
+require "katalyst/navigation/version"
+
+module Katalyst
+  module Navigation # :nodoc:
+  end
+end

data/lib/tasks/yarn.rake

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+namespace :yarn do
+  desc "Install npm packages with yarn"
+  task install: :environment do
+    sh "yarn install"
+  end
+
+  desc "Lint JS/SCSS files using yarn (prettier)"
+  task lint: :install do
+    sh "yarn lint"
+  end
+
+  desc "Autoformat JS/SCSS files using yarn (prettier)"
+  task format: :install do
+    sh "yarn format"
+  end
+end

data/spec/factories/katalyst/navigation/items.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+FactoryBot.define do
+  factory :katalyst_navigation_link, aliases: [:navigation_link], class: "Katalyst::Navigation::Link" do
+    title { Faker::Beer.hop }
+    url { Faker::Internet.unique.url }
+  end
+
+  factory :katalyst_navigation_button, aliases: [:navigation_button], class: "Katalyst::Navigation::Button" do
+    title { Faker::Beer.hop }
+    url { Faker::Internet.unique.url }
+    http_method { Katalyst::Navigation::Button::HTTP_METHODS.keys.sample }
+  end
+end

data/spec/factories/katalyst/navigation/menus.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+FactoryBot.define do
+  factory :katalyst_navigation_menu, aliases: [:navigation_menu], class: "Katalyst::Navigation::Menu" do
+    title { Faker::Beer.unique.name }
+    slug { title.parameterize }
+
+    after(:build) do |menu, _context|
+      menu.items.each { |item| item.menu = menu }
+    end
+
+    after(:create) do |menu, _context|
+      menu.items_attributes = menu.items.map.with_index { |item, index| { id: item.id, index: index, depth: 0 } }
+      menu.publish!
+    end
+  end
+end

metadata

@@ -0,0 +1,109 @@
+--- !ruby/object:Gem::Specification
+name: katalyst-navigation
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Katalyst Interactive
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2022-09-05 00:00:00.000000000 Z
+dependencies: []
+description:
+email:
+- developers@katalyst.com.au
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- app/assets/config/katalyst-navigation.js
+- app/assets/javascripts/controllers/navigation/editor/item_controller.js
+- app/assets/javascripts/controllers/navigation/editor/list_controller.js
+- app/assets/javascripts/controllers/navigation/editor/menu_controller.js
+- app/assets/javascripts/controllers/navigation/editor/new_item_controller.js
+- app/assets/javascripts/controllers/navigation/editor/status_bar_controller.js
+- app/assets/javascripts/utils/navigation/editor/item.js
+- app/assets/javascripts/utils/navigation/editor/menu.js
+- app/assets/javascripts/utils/navigation/editor/rules-engine.js
+- app/assets/stylesheets/katalyst/navigation/editor/_icon.scss
+- app/assets/stylesheets/katalyst/navigation/editor/_index.scss
+- app/assets/stylesheets/katalyst/navigation/editor/_item-actions.scss
+- app/assets/stylesheets/katalyst/navigation/editor/_item-rules.scss
+- app/assets/stylesheets/katalyst/navigation/editor/_new-items.scss
+- app/assets/stylesheets/katalyst/navigation/editor/_status-bar.scss
+- app/controllers/katalyst/navigation/base_controller.rb
+- app/controllers/katalyst/navigation/items_controller.rb
+- app/controllers/katalyst/navigation/menus_controller.rb
+- app/helpers/katalyst/navigation/editor/base.rb
+- app/helpers/katalyst/navigation/editor/item.rb
+- app/helpers/katalyst/navigation/editor/list.rb
+- app/helpers/katalyst/navigation/editor/menu.rb
+- app/helpers/katalyst/navigation/editor/new_item.rb
+- app/helpers/katalyst/navigation/editor/status_bar.rb
+- app/helpers/katalyst/navigation/editor_helper.rb
+- app/helpers/katalyst/navigation/frontend/builder.rb
+- app/helpers/katalyst/navigation/frontend_helper.rb
+- app/models/concerns/katalyst/navigation/garbage_collection.rb
+- app/models/concerns/katalyst/navigation/has_tree.rb
+- app/models/katalyst/navigation/button.rb
+- app/models/katalyst/navigation/item.rb
+- app/models/katalyst/navigation/link.rb
+- app/models/katalyst/navigation/menu.rb
+- app/models/katalyst/navigation/node.rb
+- app/models/katalyst/navigation/types/nodes_type.rb
+- app/views/katalyst/navigation/items/_button.html.erb
+- app/views/katalyst/navigation/items/_link.html.erb
+- app/views/katalyst/navigation/items/edit.html.erb
+- app/views/katalyst/navigation/items/new.html.erb
+- app/views/katalyst/navigation/items/update.turbo_stream.erb
+- app/views/katalyst/navigation/menus/_item.html.erb
+- app/views/katalyst/navigation/menus/_list_item.html.erb
+- app/views/katalyst/navigation/menus/_new_item.html.erb
+- app/views/katalyst/navigation/menus/_new_items.html.erb
+- app/views/katalyst/navigation/menus/edit.html.erb
+- app/views/katalyst/navigation/menus/index.html.erb
+- app/views/katalyst/navigation/menus/new.html.erb
+- app/views/katalyst/navigation/menus/show.html.erb
+- config/importmap.rb
+- config/locales/en.yml
+- config/routes.rb
+- db/migrate/20220826034057_create_katalyst_navigation_menus.rb
+- db/migrate/20220826034507_create_katalyst_navigation_items.rb
+- lib/katalyst/navigation.rb
+- lib/katalyst/navigation/engine.rb
+- lib/katalyst/navigation/version.rb
+- lib/tasks/yarn.rake
+- spec/factories/katalyst/navigation/items.rb
+- spec/factories/katalyst/navigation/menus.rb
+homepage: https://github.com/katalyst/navigation
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/katalyst/navigation
+  source_code_uri: https://github.com/katalyst/navigation
+  changelog_uri: https://github.com/katalyst/navigation/blob/main/CHANGELOG.md
+  rubygems_mfa_required: 'true'
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.7.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.3.7
+signing_key:
+specification_version: 4
+summary: Navigation generator and editor
+test_files: []