panda-cms 0.7.0

data/app/components/panda/cms/admin/heading_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class HeadingComponent < ViewComponent::Base
+        renders_many :buttons, Panda::CMS::Admin::ButtonComponent
+
+        attr_reader :text, :level, :icon, :additional_styles
+
+        def initialize(text:, level: 2, icon: "", additional_styles: "")
+          @text = text
+          @level = level
+          @icon = icon
+          @additional_styles = additional_styles
+          @additional_styles = @additional_styles.split(" ") if @additional_styles.is_a?(String)
+        end
+
+        def call
+          output = ""
+          output += content_tag(:div, @text, class: "grow")
+
+          if buttons?
+            output += content_tag(:span, class: "actions flex gap-x-2 -mt-1") do
+              safe_join(buttons, "")
+            end
+          end
+
+          output = output.html_safe
+          base_heading_styles = "flex pt-1 text-black mb-5 -mt-1"
+
+          if level == 1
+            content_tag(:h1, output, class: [base_heading_styles, "text-2xl font-medium", @additional_styles])
+          elsif level == 2
+            content_tag(:h2, output, class: [base_heading_styles, "text-xl font-medium", @additional_styles])
+          elsif level == 3
+            content_tag(:h3, output, class: [base_heading_styles, "text-xl", "font-light", @additional_styles])
+          elsif level == :panel
+            content_tag(:h3, output, class: ["text-base font-medium p-4 text-white"])
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/panel_component.html.erb

@@ -0,0 +1,7 @@
+<div class="col-span-3 mt-5 rounded-lg shadow-md bg-mid shadow-inherit/20">
+  <%= heading %>
+
+  <div class="p-4 text-black bg-white rounded-b-lg">
+    <%= content %>
+  </div>
+</div>

data/app/components/panda/cms/admin/panel_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class PanelComponent < ViewComponent::Base
+        renders_one :heading, ->(text:, icon: "", level: :panel, additional_styles: "") do
+          Panda::CMS::Admin::HeadingComponent.new(text: text, icon: icon, level: level, additional_styles: additional_styles)
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/slideover_component.html.erb

@@ -0,0 +1,9 @@
+<% content_for :sidebar do %>
+  <aside class="hidden overflow-y-auto w-96 h-full bg-white lg:block">
+    <%= content %>
+  </aside>
+<% end %>
+
+<% content_for :sidebar_title do %>
+  <%= title %>
+<% end %>

data/app/components/panda/cms/admin/slideover_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class SlideoverComponent < ViewComponent::Base
+        attr_reader :title
+
+        def initialize(title: "Settings")
+          @title = title
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/statistics_component.html.erb

@@ -0,0 +1,4 @@
+<div class="overflow-hidden p-4 bg-gradient-to-br rounded-lg border-2 from-light/20 to-light border-mid">
+  <dt class="text-base font-medium truncate text-dark"><%= metric %></dt>
+  <dd class="mt-1 text-3xl font-medium tracking-tight text-dark"><%= value %></dd>
+</div>

data/app/components/panda/cms/admin/statistics_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class StatisticsComponent < ViewComponent::Base
+        attr_reader :metric
+        attr_reader :value
+
+        def initialize(metric:, value:)
+          @metric = metric
+          @value = value
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/tab_bar_component.html.erb

@@ -0,0 +1,35 @@
+   <div class="mt-3 sm:mt-2">
+      <div class="sm:hidden">
+        <label for="tabs" class="sr-only">Select a tab</label>
+        <!-- Use an "onChange" listener to redirect the user to the selected tab URL. -->
+        <select id="tabs" name="tabs" class="block py-1.5 pr-10 pl-3 w-full text-gray-900 rounded-md border-0 ring-1 ring-inset focus:ring-2 focus:ring-inset ring-mid focus:border-panda-dark focus:ring-panda-dark">
+          <% tabs.each do |tab| %>
+            <option><%= tab %></option>
+          <% end %>
+        </select>
+      </div>
+      <div class="hidden sm:block">
+        <div class="flex items-center border-b border-gray-200">
+          <nav class="flex flex-1 -mb-px space-x-6 xl:space-x-8" aria-label="Tabs">
+            <!-- Current: "border-panda-dark text-panda-dark", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+            <a href="#" aria-current="page" class="py-4 px-1 text-sm font-medium whitespace-nowrap border-b-2 border-panda-dark text-panda-dark">Recently Viewed</a>
+            <a href="#" class="py-4 px-1 text-sm font-medium text-gray-500 whitespace-nowrap border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300">Recently Added</a>
+            <a href="#" class="py-4 px-1 text-sm font-medium text-gray-500 whitespace-nowrap border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300">Favourited</a>
+          </nav>
+          <div class="hidden items-center p-0.5 ml-6 bg-gray-100 rounded-lg sm:flex">
+            <button type="button" class="p-1.5 text-gray-400 rounded-md hover:bg-white hover:shadow-sm focus:ring-2 focus:ring-inset focus:outline-none focus:ring-panda-dark">
+              <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M2 3.75A.75.75 0 012.75 3h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.166a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Use list view</span>
+            </button>
+            <button type="button" class="p-1.5 ml-0.5 text-gray-400 bg-white rounded-md shadow-sm focus:ring-2 focus:ring-inset focus:outline-none focus:ring-panda-dark">
+              <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 002 4.25v2.5A2.25 2.25 0 004.25 9h2.5A2.25 2.25 0 009 6.75v-2.5A2.25 2.25 0 006.75 2h-2.5zm0 9A2.25 2.25 0 002 13.25v2.5A2.25 2.25 0 004.25 18h2.5A2.25 2.25 0 009 15.75v-2.5A2.25 2.25 0 006.75 11h-2.5zm9-9A2.25 2.25 0 0011 4.25v2.5A2.25 2.25 0 0013.25 9h2.5A2.25 2.25 0 0018 6.75v-2.5A2.25 2.25 0 0015.75 2h-2.5zm0 9A2.25 2.25 0 0011 13.25v2.5A2.25 2.25 0 0013.25 18h2.5A2.25 2.25 0 0018 15.75v-2.5A2.25 2.25 0 0015.75 11h-2.5z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Use grid view</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>

data/app/components/panda/cms/admin/tab_bar_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class TabBarComponent < ViewComponent::Base
+        attr_reader :tabs
+
+        def initialize(tabs: [])
+          @tabs = tabs
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/table_component.html.erb

@@ -0,0 +1,29 @@
+<div class="table overflow-x-auto mb-12 w-full rounded-lg border border-mid">
+  <div class="table-header-group">
+    <div class="table-row text-base font-medium text-white bg-mid">
+      <% columns.each_with_index do |column, i| %>
+        <div class="table-cell sticky top-0 z-10 p-4 <% if i.zero? %>rounded-tl-md<% elsif i == columns.size - 1 %>rounded-tr-md<% end %>"><%= column.label %></div>
+      <% end %>
+    </div>
+  </div>
+
+  <% if @rows.any? %>
+  <div class="table-row-group">
+    <% @rows.each do |row| %>
+      <div class="table-row relative bg-mid/5 hover:bg-mid/20">
+        <% @columns.each do |column| %>
+          <div class="table-cell py-5 px-3 h-20 text-sm align-middle whitespace-nowrap border-b border-mid/20">
+            <%= view_context.capture(row, &column.cell) %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>
+  <% else %>
+</div>
+<div class="text-center mx-12 block border border-dashed py-12 rounded-lg">
+  <h3 class="py-1 text-xl font-semibold text-gray-900">No <%= @term.pluralize %></h3>
+  <p class="py-1 text-base text-gray-500">Get started by creating a new <%= @term %>.</p>
+</div>
+<% end %>

data/app/components/panda/cms/admin/table_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class TableComponent < ViewComponent::Base
+        attr_reader :columns
+
+        def initialize(term:, rows:)
+          @term = term
+          @rows = rows
+          @columns = []
+        end
+
+        def column(label, &)
+          @columns << Column.new(label, &)
+        end
+
+        private
+
+        # Ensures @columns gets populated [https://dev.to/rolandstuder/supercharged-table-component-built-with-viewcomponent-3j6i]
+        def before_render
+          content
+        end
+      end
+
+      class Column
+        attr_reader :label, :cell
+
+        def initialize(label, &block)
+          @label = label
+          @cell = block
+        end
+      end
+
+      class TagColumn < Column
+        attr_reader :label, :cell
+
+        def initialize(label, &block)
+          @label = label
+          @cell = Panda::CMS::Admin::TagComponent.new(status: block)
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/tag_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class TagComponent < ViewComponent::Base
+        attr_accessor :status, :text
+
+        def initialize(status: :active, text: nil)
+          @status = status.to_sym
+          @text = text || status.to_s.humanize
+        end
+
+        def call
+          classes = "inline-flex items-center py-1 px-2 text-xs font-medium rounded-md ring-1 ring-inset "
+
+          classes += case @status
+          when :active
+            "text-white ring-black/30 bg-active border-0 "
+          when :draft
+            "text-black ring-black/30 bg-warning "
+          when :inactive, :hidden
+            "text-black ring-black/30 bg-black/5 bg-white "
+          else
+            "text-black bg-white "
+          end
+
+          content_tag :span, class: classes do
+            @text
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/user_activity_component.html.erb

@@ -0,0 +1,5 @@
+<% if user.is_a?(Panda::CMS::User) %>
+  <%= render Panda::CMS::Admin::UserDisplayComponent.new(user: user, metadata: "#{time_ago_in_words(time)} ago") %>
+<% elsif time %>
+  <div class="text-black/60"><%= time_ago_in_words(time) %> ago</div>
+<% end %>

data/app/components/panda/cms/admin/user_activity_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class UserActivityComponent < ViewComponent::Base
+        attr_accessor :model
+        attr_accessor :time
+        attr_accessor :user
+
+        # @param whodunnit_to [ActiveRecord::Base] Model instance to which the user activity is related
+        def initialize(whodunnit_to: nil, at: nil, user: nil)
+          if whodunnit_to
+            @model = whodunnit_to
+            whodunnit_id = @model.versions&.last&.whodunnit
+            if whodunnit_id
+              @user = User.find(whodunnit_id)
+              @time = @model.updated_at
+            end
+          elsif user.is_a?(::Panda::CMS::User) && at.is_a?(::ActiveSupport::TimeWithZone)
+            @user = user
+            @time = at
+          end
+
+          if !@time
+            @user = nil
+            @time = nil
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/admin/user_display_component.html.erb

@@ -0,0 +1,17 @@
+<div class="block flex-shrink-0 group">
+  <div class="flex items-center">
+    <% unless user.image_url.empty? %>
+    <div>
+      <img class="inline-block w-10 h-10 rounded-full" src="<%= user.image_url %>" alt="">
+    </div>
+    <% else %>
+    <div class="inline-block w-10 h-10 bg-gray-200 rounded-full">
+      <span class="text-center"><i class="text-mid/50 text-4xl fa-sharp fa-circle-user fa-fw"></i></span>
+    </div>
+    <% end %>
+    <div class="ml-3">
+      <p class="text-sm text-black"><%= user.firstname %> <%= user.lastname %></p>
+      <% if metadata %><p class="text-sm text-black/60"><%= metadata %></p><% end %>
+    </div>
+  </div>
+</div>

data/app/components/panda/cms/admin/user_display_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module Admin
+      class UserDisplayComponent < ViewComponent::Base
+        attr_accessor :user_id, :user, :metadata
+
+        def initialize(user_id: nil, user: nil, metadata: "")
+          @user = if user.nil? && user_id.present? && Panda::CMS::User.find(user_id)
+            Panda::CMS::User.find(user_id)
+          else
+            user
+          end
+
+          @metadata = metadata
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/code_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    # Text component
+    # @param key [Symbol] The key to use for the text component
+    # @param text [String] The text to display
+    # @param editable [Boolean] If the text is editable or not (defaults to true)
+    # @param options [Hash] The options to pass to the content_tag
+    class CodeComponent < ViewComponent::Base
+      KIND = "code"
+
+      def initialize(key: :text_component, text: "", editable: true, **options)
+        @key = key
+        @text = text
+        @options = options || {}
+        @options[:id] ||= "code-#{key.to_s.dasherize}"
+        @editable = editable
+
+        raise BlockError.new("Key 'code' is not allowed for CodeComponent") if key == :code
+      end
+
+      def call
+        # TODO: For the non-editable version, grab this from a cache or similar?
+        block = Panda::CMS::Block.find_by(kind: KIND, key: @key, panda_cms_template_id: Current.page.panda_cms_template_id)
+
+        if block.nil?
+          raise Panda::CMS::MissingBlockError.new("Block with key #{@key} not found for page #{Current.page.title}") unless Rails.env.production?
+          return false
+        end
+
+        block_content = block.block_contents.find_by(panda_cms_page_id: Current.page.id)
+        code_content = block_content&.content.to_s
+
+        if component_is_editable?
+          @options[:contenteditable] = "plaintext-only"
+          @options[:data] = {
+            "editable-kind": "html",
+            "editable-page-id": Current.page.id,
+            "editable-block-content-id": block_content&.id
+          }
+          @options[:class] = "block bg-yellow-50 font-mono p-2 border-2 border-yellow-700"
+          @options[:style] = "white-space: pre-wrap;"
+
+          @options[:id] = "editor-#{block_content&.id}"
+          # TODO: Switch between the HTML and the preview?
+          content_tag(:div, code_content, @options, true)
+        else
+          code_content.html_safe
+        end
+      end
+
+      def component_is_editable?
+        # TODO: Permissions
+        @editable && is_embedded? && Current.user&.admin
+      end
+
+      def is_embedded?
+        # TODO: Check security on this - embed_id should match something?
+        request.params.dig(:embed_id).present?
+      end
+    end
+  end
+end

data/app/components/panda/cms/grid_component.html.erb

@@ -0,0 +1,6 @@
+<div class="w-full grid <%= @columns %> min-h-20">
+  <% @colspans.each do |colspan| %>
+    <div class="border border-red-500 bg-red-50 <%= colspan %>" onDragOver="parent.onDragOver(event);" onDrop="parent.onDrop(event);">
+    </div>
+  <% end %>
+</div>

data/app/components/panda/cms/grid_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    class GridComponent < ViewComponent::Base
+      def initialize(columns: 1, spans: [1])
+        @columns = "grid-cols-#{columns}"
+        @colspans = []
+        spans.each do |span|
+          @colspans << "col-span-#{span}"
+        end
+      end
+    end
+  end
+end

data/app/components/panda/cms/menu_component.html.erb

@@ -0,0 +1,6 @@
+<% @menu_items.each do |menu_item| %>
+  <a href="<%= menu_item.resolved_link %>" class="<%= menu_item.css_classes %>"><%= menu_item.text %></a>
+  <% if @render_page_menu && menu_item.page %>
+    <%= render Panda::CMS::PageMenuComponent.new(page: menu_item.page, start_depth: 1, styles: @page_menu_styles, show_heading: false) %>
+  <% end %>
+<% end %>

data/app/components/panda/cms/menu_component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    class MenuComponent < ViewComponent::Base
+      #
+      # Renders the menu item and its children
+      #
+      # @param [String] name The name of the menu
+      # @param [String] current_path The current path of the request (request.path)
+      # @param [Hash] styles
+      #  The CSS classes to apply to the menu items, containing "default", "inactive" and "active" keys.
+      #  The "default" key is applied to all menu items. "inactive" and "active" are set based on the
+      #  current path.
+      # @return [void]
+      def initialize(name:, current_path: "", styles: {}, overrides: {}, render_page_menu: false, page_menu_styles: {})
+        @menu = Panda::CMS::Menu.find_by(name: name)
+        @menu_items = @menu.menu_items
+        @menu_items = @menu_items.where("depth <= ?", @menu.depth) if @menu.depth
+        @menu_items = @menu_items.order(:lft)
+        @current_path = current_path.to_s
+        @render_page_menu = render_page_menu
+
+        @menu_items = @menu_items.order(:lft).map do |menu_item|
+          if is_active?(menu_item)
+            menu_item.define_singleton_method(:css_classes) { styles[:default] + " " + styles[:active] }
+          else
+            menu_item.define_singleton_method(:css_classes) { styles[:default] + " " + styles[:inactive] }
+          end
+
+          menu_item
+        end
+
+        # TODO: Surely don't need this but Current.page isn't working in the component
+        if @render_page_menu
+          @current_page = Panda::CMS::Page.find_by(path: @current_path)
+          @page_menu_styles = page_menu_styles
+        end
+      end
+
+      def is_active?(menu_item)
+        return true if @current_path == "/" && active_link?(menu_item.page.path, match: :exact)
+        return true if menu_item.page.path != "/" && active_link?(menu_item.page.path, match: :starts_with)
+        false
+      end
+
+      def active_link?(path, match: :starts_with)
+        if match == :starts_with
+          return @current_path.starts_with?(path)
+        elsif match == :exact
+          return (@current_path == path)
+        end
+
+        false
+      end
+    end
+  end
+end

data/app/components/panda/cms/page_menu_component.html.erb

@@ -0,0 +1,21 @@
+<nav class="<%= styles[:container] %>">
+  <ul role="list" class="p-0 m-0">
+    <% if @show_heading %>
+      <li>
+        <a href="<%= menu_item.page.path %>" class="<%= menu_item.page == Panda::CMS::Current.page ? styles[:current_page_active] : styles[:current_page_inactive] %>">
+          <%= menu_item.text %>
+        </a>
+      </li>
+    <% end %>
+    <ul>
+      <% Panda::CMS::MenuItem.includes(:page).each_with_level(menu_item.descendants) do |submenu_item, level| %>
+        <% next if Panda::CMS::Current.page == menu_item.page && level > 1 # If we're on the "top" menu item, only show its direct ancestors %>
+        <% next if submenu_item.page&.path[/\:/] %>
+        <% next if submenu_item&.page.nil? || Panda::CMS::Current.page.nil? || (submenu_item.page&.depth&.to_i > Panda::CMS::Current.page&.depth&.to_i && !Panda::CMS::Current.page&.in?(submenu_item.page.ancestors)) %>
+        <li data-level="<%= level %>" data-page-id="<%= submenu_item.page.id %>" class="<%= submenu_item.page == Panda::CMS::Current.page ? @styles[:active] : @styles[:inactive] %>">
+          <a href="<%= submenu_item.page&.path %>" class="<%= helpers.menu_indent(submenu_item, indent_with: @styles[:indent_with]) %>"><%= submenu_item.page&.title %></a>
+        </li>
+      <% end %>
+    </ul>
+  </ul>
+</nav>

data/app/components/panda/cms/page_menu_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    class PageMenuComponent < ViewComponent::Base
+      attr_accessor :page
+      attr_accessor :menu_item
+      attr_accessor :styles
+
+      def initialize(page:, start_depth:, styles: {}, show_heading: true)
+        @page = page
+
+        unless @page.nil?
+          start_page = if @page.depth == start_depth
+            @page
+          else
+            @page.ancestors.find { |anc| anc.depth == start_depth }
+          end
+
+          menu = start_page&.page_menu
+          return if menu.nil?
+
+          @menu_item = menu.menu_items.order(:lft)&.first
+
+          @show_heading = show_heading
+
+          # Set some default styles for sanity
+          @styles = styles
+          @styles[:indent_with] ||= "pl-2"
+        end
+      end
+
+      def render?
+        @page&.path != "/" && @menu_item.present?
+      end
+    end
+  end
+end

data/app/components/panda/cms/rich_text_component.html.erb

@@ -0,0 +1,6 @@
+<% if @editable %>
+  <div class="panda-cms-content" data-editable-previous-data="<%= @content.to_json %>" id="editor-<%= @options[:id] %>" data-editable-kind="rich_text" data-editable-block-content-id="<%= @options[:id] %>" data-editable-page-id="<%= @options[:data][:page_id] %>" style="border: 1px dashed #ccc; outline: none; cursor: pointer; transition: background 500ms linear; background-color: inherit;">
+  </div>
+<% else %>
+  <div class="panda-cms-content"><%= @content %></div>
+<% end %>