maglevcms 2.0.0 → 3.0.0.beta1

data/app/components/maglev/uikit/form/image_field_controller.js

@@ -0,0 +1,74 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = [
+    'hiddenIdInput', 
+    'hiddenUrlInput', 
+    'hiddenFilenameInput',
+    'hiddenWidthInput', 
+    'hiddenHeightInput', 
+    'hiddenByteSizeInput',
+    'hiddenAltTextInput',
+    'image'
+  ]
+  static values = {
+    searchPath: String,
+    spreadFields: Boolean
+  }
+
+  focus() {
+    this.openPicker()
+  }
+
+  openPicker() {
+    const frame = document.querySelector('turbo-frame[id="modal"]')
+    frame.src = this.searchPathValue
+  }
+
+  onImageSelected(event) {
+    const { image } = event.detail
+
+    for (const [key, target] of Object.entries(this.hiddenInputMaps())) {
+      target.value = image[key]
+    }      
+    
+    this.imageTarget.classList.remove('hidden')
+    this.imageTarget.src = image.url
+    this.element.classList.remove('none')
+
+    this.dispatch('change', { detail: { value: image }})
+  }
+
+  onChangeAltText(event) {
+    const value = { alt_text: event.target.value }
+    for (const [key, target] of Object.entries(this.hiddenInputMaps())) {
+      value[key] = target.value
+    }  
+    this.dispatch('change', { detail: { value }})
+  }
+
+  clear() {
+    Object.values(this.hiddenInputMaps()).forEach(target => target.value = '')
+
+    if (this.hasHiddenAltTextInputTarget) {
+      this.hiddenAltTextInputTarget.value = ''
+    }
+
+    this.element.classList.add('none')
+    const value = this.spreadFieldsValue ? {} : null
+    this.dispatch('change', { detail: { value }})
+  }
+
+  hiddenInputMaps() {
+    if (!this.spreadFieldsValue) return { url: this.hiddenUrlInputTarget }
+
+    return {
+      id: this.hiddenIdInputTarget, 
+      url: this.hiddenUrlInputTarget, 
+      filename: this.hiddenFilenameInputTarget,
+      width: this.hiddenWidthInputTarget, 
+      height: this.hiddenHeightInputTarget,
+      byte_size: this.hiddenByteSizeInputTarget
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      module Link
+        class BaseComponent < Maglev::Uikit::BaseComponent
+          attr_reader :input_name, :link, :path
+
+          def initialize(input_name:, link:, path:)
+            @input_name = input_name
+            @link = link
+            @path = path
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/link/email_link_component.html.erb

@@ -0,0 +1,16 @@
+<%= tag.div(class: 'relative', data: { uikit_form_link_target: 'inputItem' }) do %>
+  <%= link_to path,
+    class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
+    data: { turbo_frame: 'modal' } do %>
+    <%= render Maglev::Uikit::IconComponent.new(name: "mail") %>
+    <span class="ml-3 shrink"><%= link[:email] %></span>
+  <% end %>
+
+  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+    <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
+  </div>
+
+  <%= hidden_field_tag "#{input_name}[email]", link[:email] %>
+  <%= hidden_field_tag "#{input_name}[href]", link[:href] %>
+  <%= hidden_field_tag "#{input_name}[link_type]", link[:link_type] %>
+<% end %>

data/app/components/maglev/uikit/form/link/email_link_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      module Link
+        class EmailLinkComponent < Maglev::Uikit::Form::Link::BaseComponent
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/link/page_link_component.html.erb

@@ -0,0 +1,17 @@
+<%= tag.div(class: 'relative', data: { uikit_form_link_target: 'inputItem' }) do %>
+  <%= link_to path,
+    class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
+    data: { turbo_frame: 'modal' } do %>
+    <%= render Maglev::Uikit::IconComponent.new(name: "file") %>
+    <span class="ml-3 shrink"><%= link[:link_label] %></span>
+  <% end %>
+
+  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+    <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
+  </div>
+
+  <%= hidden_field_tag "#{input_name}[link_type]", link[:link_type] %>
+  <%= hidden_field_tag "#{input_name}[link_id]", link[:link_id] %>
+  <%= hidden_field_tag "#{input_name}[link_label]", link[:link_label] %>
+  <%= hidden_field_tag "#{input_name}[section_id]", link[:section_id] %>
+<% end %>

data/app/components/maglev/uikit/form/link/page_link_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      module Link
+        class PageLinkComponent < Maglev::Uikit::Form::Link::BaseComponent
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/link/static_page_link_component.html.erb

@@ -0,0 +1,16 @@
+<%= tag.div(class: 'relative', data: { uikit_form_link_target: 'inputItem' }) do %>
+  <%= link_to path,
+    class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
+    data: { turbo_frame: 'modal' } do %>
+    <%= render Maglev::Uikit::IconComponent.new(name: "file") %>
+    <span class="ml-3 shrink"><%= link[:link_label] %></span>
+  <% end %>
+
+  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+    <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
+  </div>
+
+  <%= hidden_field_tag "#{input_name}[link_type]", link[:link_type] %>
+  <%= hidden_field_tag "#{input_name}[link_id]", link[:link_id] %>
+  <%= hidden_field_tag "#{input_name}[link_label]", link[:link_label] %>
+<% end %>

data/app/components/maglev/uikit/form/link/static_page_link_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      module Link
+        class StaticPageLinkComponent < Maglev::Uikit::Form::Link::BaseComponent
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/link/url_link_component.html.erb

@@ -0,0 +1,16 @@
+<%= tag.div(class: 'relative', data: { uikit_form_link_target: 'inputItem' }) do %>
+  <%= link_to path,
+    class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
+    data: { turbo_frame: 'modal' } do %>
+    <%= render Maglev::Uikit::IconComponent.new(name: "external_link") %>
+    <span class="ml-3 shrink"><%= link[:href] %></span>
+  <% end %>
+
+  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+    <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
+  </div>
+  
+  <%= hidden_field_tag "#{input_name}[href]", link[:href] %>
+  <%= hidden_field_tag "#{input_name}[link_type]", link[:link_type] %>
+  <%= hidden_field_tag "#{input_name}[open_new_window]", link[:open_new_window] %>
+<% end %>

data/app/components/maglev/uikit/form/link/url_link_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      module Link
+        class UrlLinkComponent < Maglev::Uikit::BaseComponent
+          attr_reader :input_name, :link, :path
+
+          def initialize(input_name:, link:, path:)
+            @input_name = input_name
+            @link = link
+            @path = path
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,55 @@
+<%= tag.div( 
+  class: class_names('space-y-1 flex flex-col group/link', 'is-present' => value?),
+  data: { 
+    controller: 'uikit-form-link', 
+    uikit_form_link_name_value: name, 
+    uikit_form_link_path_value: path, 
+    uikit_form_link_options_value: options.to_json,
+    action: %(
+      dispatcher:link-selected-#{dom_id}@window->uikit-form-link#onLinkSelected
+    )
+  }) do 
+%>
+  <%= hidden_field_tag "#{name}[link_type]", '' %>
+
+  <label for="<%= dom_id %>" class="block font-semibold text-gray-800 flex items-center gap-2">
+    <span><%= label %></span>
+    <% if error %>
+      <span class="text-red-700 bg-red-100 text-xs py-1 px-3 rounded"><%= error %></span>
+    <% end %>
+  </label>
+
+  <div class="space-y-2 mt-2">
+    <% if with_text? %>
+      <div class="space-y-1 flex flex-col">
+        <%= tag.input(
+          name: link_text[:name],
+          value: link_text[:value],
+          type: 'text',
+          placeholder: link_text[:placeholder],
+          autocomplete: 'off',
+          class: 'block py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50 placeholder-gray-500',
+          data: { 
+            action: 'input->uikit-form-link#textChange', 
+            uikit_form_link_target: 'textInput' 
+          }
+        ) %>
+      </div>
+    <% end %>
+    
+    <%= helpers.turbo_frame_tag turbo_frame_id do %>
+      <%= render link_type_component if value? %>
+    <% end %>
+
+    <%= link_to placeholder,
+      path,
+      class: class_names(
+        'flex items-center h-10 px-3 rounded bg-gray-100 text-gray-500 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
+        'group-[.is-present]/link:hidden'
+      ),
+      data: {
+        turbo_frame: 'modal',
+        uikit_form_link_target: 'emptyItem'
+      } %>
+  </div>
+<% end %>

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

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      class LinkComponent < Maglev::Uikit::BaseComponent
+        attr_reader :name, :path, :options
+
+        # Value: { link_type:, link_id:, href:, text: }
+        def initialize(name:, path:, options: {})
+          @name = name
+          @options = options
+          @path = path.gsub(':id', dom_id)
+        end
+
+        def dom_id
+          name.to_s.parameterize.underscore
+        end
+
+        def turbo_frame_id
+          "#{dom_id}-frame"
+        end
+
+        def value
+          (options[:value] || {}).with_indifferent_access
+        end
+
+        def label
+          options[:label]
+        end
+
+        def value?
+          value&.compact_blank.present?
+        end
+
+        def placeholder
+          options[:placeholder].presence || t('maglev.uikit.form.link.placeholder')
+        end
+
+        def error
+          options[:error]
+        end
+
+        def with_text?
+          !!options[:with_text]
+        end
+
+        def link_text
+          {
+            name: "#{name}[text]",
+            value: value[:text],
+            placeholder: t('maglev.uikit.form.link.text_placeholder')
+          }.merge(options[:link_text] || {})
+        end
+
+        def link_type_component
+          self.class.link_type_component(input_name: name, value: value, path: path)
+        end
+
+        def self.link_type_component(input_name:, value:, path:)
+          # Default to url if the link type is not found (shouldn't happen)
+          klass = link_type_klasses_map.fetch(value[:link_type].to_sym, 'url')
+
+          return unless klass
+
+          klass.new(input_name: input_name, link: value, path: path)
+        end
+
+        def self.link_type_klasses_map
+          {
+            email: Maglev::Uikit::Form::Link::EmailLinkComponent,
+            url: Maglev::Uikit::Form::Link::UrlLinkComponent,
+            page: Maglev::Uikit::Form::Link::PageLinkComponent,
+            static_page: Maglev::Uikit::Form::Link::StaticPageLinkComponent
+          }
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/link_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['inputItem', 'emptyItem', 'textInput']
+  static values = {
+    path: String
+  }
+
+  clear() {
+    this.element.classList.remove('is-present')
+    this.inputItemTarget.remove()
+    this.dispatch('change', { detail: { value: {} } })
+  }
+
+  textChange(event) {
+    this.dispatch('change', { detail: { value: { text: event.target.value } } })
+  }
+
+  onLinkSelected(event) {
+    this.element.classList.add('is-present')
+    this.dispatch('change', { detail: { value: event.detail } })
+  }
+
+  openModal() {
+    const frame = document.querySelector('turbo-frame[id="modal"]')
+    frame.src = this.pathValue
+  }
+
+  focus() {
+    if (this.hasTextInputTarget) {
+      this.textInputTarget.focus()
+    } else {
+      this.openModal()
+    }
+  }
+}

data/app/components/maglev/uikit/form/richtext/block_button_component.html.erb

@@ -0,0 +1,38 @@
+<%= render Maglev::Uikit::DropdownComponent.new(placement: 'right') do |dropdown| %>
+  <% dropdown.with_trigger do %>
+    <%= tag.button(
+      class: 'cursor-pointer rounded-sm px-2 py-2 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-editor-primary/50 focus:ring-inset focus:ring bg-gray-100',
+      type: 'button', 
+      data: { 
+        'uikit-dropdown-target': 'button',
+        'uikit-form-richtext-target': 'blockButton',
+        action: 'click->uikit-dropdown#toggle'
+      }
+      ) do %>
+      <% choices.each_with_index do |choice, index| %>
+        <%= tag.div(
+          class: class_names('hidden': index != 0), 
+          data: { block_button_name: choice[:name] } 
+        ) do %>
+          <%= render Maglev::Uikit::IconComponent.new(name: choice[:icon]) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+          
+  <div class="flex flex-row space-x-2 py-1 px-1">
+    <% choices.each do |choice| %>
+      <%= tag.button(
+        class: 'hover:bg-gray-100 px-2 py-1 cursor-pointer rounded-sm',
+        data: { 
+          action: %(
+            click->uikit-form-richtext#toggle#{choice[:name].camelize}
+            click->uikit-dropdown#hide
+          )
+        }
+      ) do %>
+        <%= render Maglev::Uikit::IconComponent.new(name: choice[:icon]) %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/maglev/uikit/form/richtext/block_button_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      module Richtext
+        class BlockButtonComponent < ViewComponent::Base
+          def choices
+            [
+              { name: 'paragraph', icon: 'text_paragraph' },
+              { name: 'heading_2', icon: 'text_heading_2' },
+              { name: 'heading_3', icon: 'text_heading_3' },
+              { name: 'heading_4', icon: 'text_heading_4' },
+              { name: 'blockquote', icon: 'text_quote' },
+              { name: 'code_block', icon: 'text_code' }
+            ]
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/richtext/button_component.html.erb

@@ -0,0 +1,16 @@
+<%= tag.button(
+  class: class_names(
+    'cursor-pointer px-2 py-2 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-editor-primary/50 focus:ring-inset focus:ring bg-gray-100',
+    'first:rounded-l-sm',
+    'last:rounded-r-sm',
+    '[&.active]:bg-gray-600 [&.active]:hover:bg-gray-600 [&.active]:text-white'
+  ),
+  type: 'button', 
+  data: { 
+    name: name,
+    action: "click->uikit-form-richtext##{action_name}",
+    'uikit-form-richtext-target': "button"
+  }
+  ) do %>
+  <%= render Maglev::Uikit::IconComponent.new(name: icon) %>
+<% end %>

data/app/components/maglev/uikit/form/richtext/button_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      module Richtext
+        class ButtonComponent < ViewComponent::Base
+          attr_reader :name, :action_name, :icon
+
+          def initialize(name:, icon:, action_name: nil)
+            @name = name
+            @action_name = action_name.presence || "toggle#{name.camelize}"
+            @icon = icon
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/richtext/button_group_component.html.erb

@@ -0,0 +1,7 @@
+<div class="flex">
+  <% buttons.each do |button| %>
+    <%= button %>    
+  <% end %>
+
+  <%= content %>
+</div>

data/app/components/maglev/uikit/form/richtext/button_group_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      module Richtext
+        class ButtonGroupComponent < ViewComponent::Base
+          renders_many :buttons, 'Maglev::Uikit::Form::Richtext::ButtonComponent'
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/richtext/toolbar_component.html.erb

@@ -0,0 +1,23 @@
+<div class="flex sticky top-0 z-10 pb-2 bg-white space-x-1 overflow-x-auto">  
+  <%= render Maglev::Uikit::Form::Richtext::ButtonGroupComponent.new do |button_group| %>
+    <%= render Maglev::Uikit::Form::Richtext::BlockButtonComponent.new %>
+  <% end unless line_break? %>
+  
+  <%= render Maglev::Uikit::Form::Richtext::ButtonGroupComponent.new do |button_group| %>
+    <% button_group.with_button(name: 'bold', icon: 'text_bold') %>
+    <% button_group.with_button(name: 'italic', icon: 'text_italic') %>
+    <% button_group.with_button(name: 'underline', icon: 'text_underline') %>
+    <% button_group.with_button(name: 'strikethrough', icon: 'text_strikethrough') %>
+    <% button_group.with_button(name: 'superscript', icon: 'text_superscript') %>
+  <% end %>
+
+  <%= render Maglev::Uikit::Form::Richtext::ButtonGroupComponent.new do |button_group| %>
+    <% button_group.with_button(name: 'link', icon: 'text_link', action_name: 'openLinkModal') %>
+    <% button_group.with_button(name: 'unlink', icon: 'text_unlink', action_name: 'unsetLink') %>
+  <% end %>
+
+  <%= render Maglev::Uikit::Form::Richtext::ButtonGroupComponent.new do |button_group| %>
+    <% button_group.with_button(name: 'unordered_list', icon: 'text_unorderd_list') %>
+    <% button_group.with_button(name: 'ordered_list', icon: 'text_ordered_list') %>
+  <% end unless line_break? %>
+</div>

data/app/components/maglev/uikit/form/richtext/toolbar_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      module Richtext
+        class ToolbarComponent < ViewComponent::Base
+          def initialize(line_break: false)
+            @line_break = line_break
+          end
+
+          def line_break?
+            @line_break
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/richtext_component.html.erb

@@ -0,0 +1,28 @@
+<%= tag.div(
+  class: 'space-y-1 flex flex-col group/richtext',
+  style: "--number-of-rows: #{number_of_rows};",
+  data: {
+    controller: 'uikit-form-richtext',
+    turbo_temporary: true,
+    uikit_form_richtext_input_name_value: dom_id,
+    uikit_form_richtext_content_value: value,
+    uikit_form_richtext_line_break_value: line_break?,    
+    uikit_form_richtext_edit_link_path_value: edit_link_path,
+    action: build_data_action("dispatcher:link-selected-#{dom_id}@window->uikit-form-richtext#setLink")
+  }) do %>
+
+  <label for="<%= dom_id %>" class="block font-semibold text-gray-800 flex items-center gap-2">
+    <span><%= label %></span>
+    <% if error %>
+      <span class="text-red-700 bg-red-100 text-xs py-1 px-3 rounded"><%= error %></span>
+    <% end %>
+  </label>
+
+  <%= hidden_field_tag name, value, data: { uikit_form_richtext_target: 'hiddenInput' } %>
+
+  <div class="relative flex flex-col">
+    <%= render Maglev::Uikit::Form::Richtext::ToolbarComponent.new(line_break: line_break?) %>
+
+    <div data-uikit-form-richtext-target="editor"></div>
+  </div>
+<% end %>

data/app/components/maglev/uikit/form/richtext_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      class RichtextComponent < ViewComponent::Base
+        attr_reader :label, :name, :options, :html_options
+
+        def initialize(label:, name:, options: {}, html_options: {})
+          @label = label
+          @name = name
+          @options = options
+          @html_options = html_options || {}
+        end
+
+        def dom_id
+          name.to_s.parameterize.underscore
+        end
+
+        def value
+          options[:value]
+        end
+
+        def number_of_rows
+          options[:rows] || 4
+        end
+
+        def line_break?
+          options[:line_break] || false
+        end
+
+        def edit_link_path
+          options[:edit_link_path]
+        end
+
+        def placeholder
+          options[:placeholder]
+        end
+
+        def label_name
+          options[:label_name]
+        end
+
+        def error
+          options[:error]
+        end
+
+        def build_data_action(actions)
+          [html_options.dig(:data, :action), actions].compact.join(' ')
+        end
+      end
+    end
+  end
+end