maglevcms 2.0.0 → 3.0.0.beta1

data/app/components/maglev/editor/settings/image/image_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Image
+        class ImageComponent < Maglev::Editor::Settings::BaseComponent
+          def after_initialize
+            @value = value&.with_indifferent_access
+          end
+
+          def alt_text_input_name
+            "#{input_name}[alt_text]"
+          end
+
+          def search_path
+            fetch_path(:assets_path, { source: input_source })
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/link/link_component.html.erb

@@ -0,0 +1,22 @@
+<%= tag.div(
+  data: {
+    controller: "editor-setting",
+    editor_setting_setting_id_value: definition.id,
+    editor_setting_setting_type_value: definition.type,
+    editor_setting_core_controller_name_value: 'uikit-form-link',
+    action: %(
+      uikit-form-link:change->editor-setting#change
+      hashchange@window->editor-setting#focus
+    )
+  }
+) do %>
+  <%= render Maglev::Uikit::Form::LinkComponent.new(
+    name: input_name,
+    path: edit_link_path,
+    options: {
+      label: label,
+      value: value,
+      with_text: definition.options[:with_text]
+    }
+  ) %>
+<% end %>

data/app/components/maglev/editor/settings/link/link_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Link
+        class LinkComponent < Maglev::Editor::Settings::BaseComponent
+          def edit_link_path
+            fetch_path(:edit_link_path, { value: value, input_name: input_name })
+          end
+
+          def after_initialize
+            @value = value&.with_indifferent_access
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/select/select_component.html.erb

@@ -0,0 +1,20 @@
+<%= tag.div(
+  data: {
+    controller: "editor-setting",
+    'editor-setting-setting-id-value': definition.id,
+    'editor-setting-setting-type-value': definition.type,
+    action: %(
+      uikit-form-select:change->editor-setting#change
+    )
+  }
+) do %>
+  <%= render Maglev::Uikit::Form::SelectComponent.new(
+    label: label,
+    name: input_name,
+    choices: choices,
+    options: {
+      value: value,
+      include_blank: true,
+    }
+  ) %>
+<% end %>

data/app/components/maglev/editor/settings/select/select_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Select
+        class SelectComponent < Maglev::Editor::Settings::BaseComponent
+          def choices
+            (definition.options[:select_options] || []).map do |option|
+              option_label, option_value = extra_option_label_and_value(option)
+
+              [translate_choice(option_value, default: option_label), option_value]
+            end
+          end
+
+          def extra_option_label_and_value(option)
+            option.is_a?(Hash) ? option.values_at(:label, :value) : [option, option]
+          end
+
+          def translate_choice(choice, default: nil)
+            ::I18n.t("#{i18n_scope}.settings.#{definition.id}_options.#{choice}", default: default)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/text/richtext_component.html.erb

@@ -0,0 +1,22 @@
+<%= tag.div(
+  data: {
+    controller: 'editor-setting',
+    'editor-setting-setting-id-value': definition.id,
+    'editor-setting-setting-type-value': definition.type,
+    'editor-setting-core-controller-name-value': 'uikit-form-richtext',
+    action: %(
+      hashchange@window->editor-setting#focus
+      uikit-form-richtext:change->editor-setting#change
+    )
+  }
+) do %>
+  <%= render Maglev::Uikit::Form::RichtextComponent.new(
+    label: label,
+    name: input_name,
+    options: {
+      value: value,
+      line_break: definition.options[:line_break],
+      edit_link_path: fetch_path(:edit_link_path)
+    }
+  ) %>
+<% end %>

data/app/components/maglev/editor/settings/text/richtext_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Text
+        class RichtextComponent < Maglev::Editor::Settings::BaseComponent
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/text/text_component.html.erb

@@ -0,0 +1,18 @@
+<%= tag.div(
+  data: {
+    controller: "editor-setting",
+    editor_setting_setting_id_value: definition.id,
+    editor_setting_setting_type_value: definition.type,
+    editor_setting_core_controller_name_value: "uikit-form-text-field",
+    action: %(
+      uikit-form-text-field:change->editor-setting#change
+      hashchange@window->editor-setting#focus
+    )
+  }
+) do %>
+  <%= render Maglev::Uikit::Form::TextFieldComponent.new(
+    label: label,
+    name: input_name,
+    options: { value: value },   
+  ) %>
+<% end %>

data/app/components/maglev/editor/settings/text/text_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Text
+        class TextComponent < Maglev::Editor::Settings::BaseComponent
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/text/textarea_component.html.erb

@@ -0,0 +1,21 @@
+<%= tag.div(
+  data: {
+    controller: "editor-setting",
+    editor_setting_setting_id_value: definition.id,
+    editor_setting_setting_type_value: definition.type,
+    editor_setting_core_controller_name_value: "uikit-form-text-field",
+    action: %(
+      uikit-form-text-field:change->editor-setting#change
+      hashchange@window->editor-setting#focus
+    )
+  }
+) do %>
+  <%= render Maglev::Uikit::Form::TextareaComponent.new(
+    label: label,
+    name: input_name,
+    options: {
+      value: value,
+      rows: definition.options[:nb_rows],
+    }
+  ) %>
+<% end %>

data/app/components/maglev/editor/settings/text/textarea_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Text
+        class TextareaComponent < Maglev::Editor::Settings::BaseComponent
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings_group_component.html.erb

@@ -0,0 +1,5 @@
+<div class="grid grid-cols-1 gap-4">
+  <% definitions.each do |definition| %>
+    <%= render setting_instance_for(definition) %>      
+  <% end %>
+</div>

data/app/components/maglev/editor/settings_group_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    class SettingsGroupComponent < ViewComponent::Base
+      attr_reader :values, :definitions, :paths, :scope
+
+      def initialize(values:, definitions:, scope:, paths: {})
+        @values = values
+        @definitions = definitions
+        @paths = paths
+        @scope = scope
+      end
+
+      def setting_instance_for(definition)
+        component_klass = Maglev::Editor::SettingRegistry.instance.fetch(definition)
+        component_klass.new(
+          definition: definition,
+          value: value_of(definition.id),
+          paths: paths,
+          scope: scope
+        )
+      end
+
+      def value_of(definition_id)
+        values.find { |value| value.id == definition_id }&.value
+      end
+    end
+  end
+end

data/app/components/maglev/section_component.rb

@@ -7,7 +7,8 @@ module Maglev
     extend Forwardable
     def_delegators :parent, :site, :page, :config
 
-    attr_reader :parent, :id, :type, :settings, :attributes, :definition, :templates_root_path, :rendering_mode
+    attr_reader :parent, :id, :type, :settings, :attributes, :definition, :templates_root_path,
+                :rendering_mode
 
     # rubocop:disable Lint/MissingSuper
     def initialize(parent:, attributes:, definition:, templates_root_path:, rendering_mode:)
@@ -26,17 +27,19 @@ module Maglev
     # rubocop:enable Lint/MissingSuper
 
     def dom_id
-      "section-#{id}"
+      @dom_id ||= "section-#{id}"
+    end
+
+    def lock_version
+      @lock_version ||= attributes[:lock_version] || '0'
     end
 
-    # rubocop:disable Rails/OutputSafety
     def dom_data
-      "data-maglev-section-id=\"#{id}\" data-maglev-section-type=\"#{type}\"".html_safe
+      view_context.tag.attributes(data: tag_data)
     end
-    # rubocop:enable Rails/OutputSafety
 
     def tag_data
-      { maglev_section_id: id, maglev_section_type: type }
+      { maglev_section_id: id, maglev_section_type: type, maglev_section_lock_version: lock_version }
     end
 
     def blocks
@@ -76,7 +79,7 @@ module Maglev
 
     def build_blocks(blocks)
       (blocks || []).map do |block_attributes|
-        block_definition = definition.blocks.find { |settings| settings.type == block_attributes[:type] }
+        block_definition = definition.blocks.find(block_attributes[:type])
         next unless block_definition
 
         block = build_block(block_definition, block_attributes)

data/app/components/maglev/uikit/app_layout/layout_component.html.erb

@@ -0,0 +1,15 @@
+<div class="h-full font-nunito overflow-hidden">  
+  <header class="flex h-16 border-b border-gray-200">
+    <%= topbar %>
+  </header>
+
+  <div class="flex h-[calc(100vh-4rem)]">
+    <%= sidebar %>
+        
+    <div class="bg-gray-100 w-full h-full">
+      <%= content %>
+    </div>
+  </div>
+</div>
+
+

data/app/components/maglev/uikit/app_layout/layout_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module AppLayout
+      class LayoutComponent < ViewComponent::Base
+        renders_one :topbar, -> { Maglev::Uikit::AppLayout::TopbarComponent.new(page: page, root_path: root_path) }
+        renders_one :sidebar, -> { Maglev::Uikit::AppLayout::SidebarComponent.new }
+
+        attr_reader :page, :root_path
+
+        def initialize(page:, root_path:)
+          @page = page
+          @root_path = root_path
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/app_layout/sidebar/link_component.html.erb

@@ -0,0 +1,5 @@
+<li>
+  <%= link_to path, class: link_classes(active: active?), data: data do %>
+    <%= render Maglev::Uikit::IconComponent.new(name: icon, size: icon_size) %>
+  <% end %>
+</li>

data/app/components/maglev/uikit/app_layout/sidebar/link_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module AppLayout
+      module Sidebar
+        class LinkComponent < Maglev::Uikit::BaseComponent
+          attr_reader :path, :icon, :icon_size, :active, :data
+
+          def initialize(path:, icon:, active: false, options: {})
+            @path = path
+            @active = active
+            @icon = icon
+            @icon_size = options[:icon_size] || '1.5rem'
+            @position = options[:position] || :top
+            @data = options[:data]
+          end
+
+          def active?
+            @active
+          end
+
+          def top?
+            @position == :top
+          end
+
+          def link_classes(...)
+            class_variants(
+              base: 'flex justify-center py-5 -ml-4 -mr-4 hover:bg-gray-100 transition-colors duration-200',
+              variants: {
+                active: 'bg-gray-100',
+                '!active': 'bg-white'
+              }
+            ).render(...)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/app_layout/sidebar_component.html.erb

@@ -0,0 +1,19 @@
+<aside 
+  id="app-layout-sidebar"
+  class="w-16 flex-shrink-0 flex content-center h-full border-r border-gray-200 relative z-20 bg-white"
+>
+  <nav class="w-16 flex flex-col justify-between">
+    <ol class="divide-y divide-gray-300 px-4">
+      <% links.each do |link| %>
+        <%= link if link.top? %>
+      <% end %>      
+    </ol>
+
+    <ol class="divide-y divide-gray-300 px-4">
+      <li></li>
+      <% links.each do |link| %>
+        <%= link unless link.top? %>
+      <% end %>      
+    </ol>
+  </nav>
+</aside>

data/app/components/maglev/uikit/app_layout/sidebar_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module AppLayout
+      class SidebarComponent < ViewComponent::Base
+        renders_many :links, 'Maglev::Uikit::AppLayout::Sidebar::LinkComponent'
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/app_layout/topbar/logo_component.html.erb

@@ -0,0 +1,3 @@
+<%= link_to root_path, class: "w-16 h-full flex justify-center items-center border-r border-gray-200 shrink-0" do %>
+  <%= image_tag logo_url, class: "w-2/4", id: 'editor-logo-image', data: { turbo_permanent: true } %>
+<% end %>

data/app/components/maglev/uikit/app_layout/topbar/logo_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module AppLayout
+      module Topbar
+        class LogoComponent < ViewComponent::Base
+          attr_reader :root_path, :logo_url
+
+          def initialize(root_path:, logo_url:)
+            @root_path = root_path
+            @logo_url = logo_url
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/app_layout/topbar/page_info_component.html.erb

@@ -0,0 +1,26 @@
+<% if content.present? %>
+  <%= content %>
+<% else %>
+  <div class="flex flex-row items-center h-full w-full px-4 overflow-hidden">
+    <div class="flex flex-col leading-none overflow-hidden">
+      <div class="flex items-center">
+        <%= render Maglev::Uikit::IconComponent.new(name: icon_name, size: '1.1rem', class_names: 'shrink-0 text-gray-900') %>
+        <div class="text-base font-semibold truncate ml-1 mr-3">
+          <%= page.title.presence || page.default_title %>
+        </div>
+
+        <%= render(Maglev::Uikit::PageActionsDropdownComponent.new(
+          paths: paths, 
+          live_url: live_page_url, 
+          without_actions: [:delete], icon_direction: :horizontal)) 
+        %>
+      </div>
+
+      <div class="text-xs text-gray-500 flex items-center space-x-1">
+        <p class="truncate text-gray-700">
+          <span class="text-gray-900 font-semibold">/</span><%= page_path %>
+        </p>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/maglev/uikit/app_layout/topbar/page_info_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module AppLayout
+      module Topbar
+        class PageInfoComponent < ViewComponent::Base
+          attr_reader :page, :paths, :live_page_url, :prefix_page_path
+
+          def initialize(page:, paths:, live_page_url:, prefix_page_path:)
+            @page = page
+            @paths = paths
+            @live_page_url = live_page_url
+            @prefix_page_path = prefix_page_path
+          end
+
+          def icon_name
+            page.index? ? 'home' : 'file'
+          end
+
+          def page_path
+            "#{prefix_page_path}#{page.path.presence || page.default_path}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/app_layout/topbar_component.html.erb

@@ -0,0 +1,15 @@
+<%= logo %>
+
+<div class="grid grid-cols-5 h-full w-full">
+  <div class="col-span-3 lg:col-span-2 flex justify-start items-center">
+    <%= page_info %>
+  </div>
+
+  <div class="col-span-1 hidden lg:flex justify-center" data-turbo-permanent id="device-toggler">
+    <%= render Maglev::Uikit::DeviceTogglerComponent.new %>
+  </div>
+
+  <div class="col-span-2 flex justify-end h-full">
+    <%= actions %>
+  </div>
+</div>

data/app/components/maglev/uikit/app_layout/topbar_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module AppLayout
+      class TopbarComponent < ViewComponent::Base
+        renders_one :logo, 'Maglev::Uikit::AppLayout::Topbar::LogoComponent'
+        # -> { Maglev::Uikit::AppLayout::Topbar::LogoComponent.new(root_path: root_path, logo_url: logo_url) }
+        renders_one :page_info
+        renders_one :actions
+
+        attr_reader :page, :root_path
+
+        def initialize(page:, root_path:)
+          @page = page
+          @root_path = root_path
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/badge_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class BadgeComponent < Maglev::Uikit::BaseComponent
+      erb_template <<~ERB
+        <span class="<%= badge_classes(color: color) %>" data-controller="disappearance" data-disappearance-after-value="<%= disappear_after %>">#{'      '}
+          <% if icon_name.present? %>
+            <%= render Maglev::Uikit::IconComponent.new(name: icon_name, size: '0.85rem', class_names: 'shrink-0') %>
+          <% end %>
+          <span class="truncate">
+            <%= content %>#{'      '}
+          </span>
+        </span>
+      ERB
+
+      attr_reader :color, :icon_name, :disappear_after, :class_names
+
+      def initialize(color:, icon_name: nil, disappear_after: nil, class_names: nil)
+        @color = color
+        @icon_name = icon_name
+        @disappear_after = disappear_after.to_f
+        @class_names = class_names
+      end
+
+      def badge_classes(**args)
+        class_variants(
+          base: 'inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium gap-1',
+          variants: {
+            color: {
+              green: 'bg-green-100 text-green-700',
+              red: 'bg-red-100 text-red-700',
+              gray: 'bg-gray-100 text-gray-700'
+            }
+          }
+        ).render(**args, class: class_names)
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/base_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require 'class_variants'
+
+module Maglev
+  module Uikit
+    class BaseComponent < ViewComponent::Base
+      include ClassVariants::ActionView::Helpers
+
+      def button_class_names(...)
+        helpers.maglev_button_classes(...)
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/breadcrumbs/breadcrumbs_component.html.erb

@@ -0,0 +1,10 @@
+<nav class="flex justify-between">
+  <ol class="inline-flex items-center space-x-0.5 text-xs text-gray-500">
+    <% breadcrumbs.each_with_index do |breadcrumb, index| %>
+      <%= breadcrumb %>
+      <% if index < breadcrumbs.size - 1 %>
+        <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1rem', class_names: 'text-gray-400') %>
+      <% end %>
+    <% end %>
+  </ol>
+</nav>

data/app/components/maglev/uikit/breadcrumbs/breadcrumbs_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Breadcrumbs
+      class BreadcrumbsComponent < Maglev::Uikit::BaseComponent
+        renders_many :breadcrumbs, 'Maglev::Uikit::Breadcrumbs::LinkComponent'
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/breadcrumbs/link_component.html.erb

@@ -0,0 +1,12 @@
+<li class="flex items-center h-full">
+  <% if url? %>
+    <%= link_to url, class: 'inline-flex items-center text-xs space-x-1.5 rounded-sm hover:text-gray-900', data: { turbo_frame: '_top' } do %>
+      <% if icon? %>
+        <%= render Maglev::Uikit::IconComponent.new(name: icon, size: '0.85rem') %>
+      <% end %>
+      <span><%= label %></span>
+    <% end %>
+  <% else %>
+    <span class="inline-flex items-center text-xs space-x-1.5 rounded-sm"><%= label %></span>
+  <% end %>
+</li>  

data/app/components/maglev/uikit/breadcrumbs/link_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Breadcrumbs
+      class LinkComponent < Maglev::Uikit::BaseComponent
+        attr_reader :label, :url, :icon
+
+        def initialize(label:, url: nil, icon: nil)
+          @label = label
+          @icon = icon
+          @url = url
+        end
+
+        def url?
+          url.present?
+        end
+
+        def icon?
+          icon.present?
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/collapsible/collapsible_component.html.erb

@@ -0,0 +1,5 @@
+<div data-controller="uikit-collapsible">
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+</div>