hakumi_components 0.1.17.pre → 0.1.19.pre

data/app/form_builders/hakumi_components/form_builder.rb

@@ -0,0 +1,403 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    extend T::Sig
+
+    sig do
+      params(
+        object_name: T.nilable(Types::StringOrSymbol),
+        object: T.nilable(ActiveModel::Model),
+        template: ActionView::Helpers::RenderingHelper,
+        options: Contracts::BuilderInitOptions
+      ).void
+    end
+    def initialize(object_name, object, template, options)
+      @object_name = T.let(object_name&.to_s, T.nilable(String))
+      @object = T.let(object, T.nilable(ActiveModel::Model))
+      @template = T.let(template, ActionView::Helpers::RenderingHelper)
+      @model_binding = T.let(nil, T.nilable(HakumiComponents::FormBuilder::ModelBinding))
+      super
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def text_field(method, **options)
+      render_simple_field(HakumiComponents::Input::Component, method, options)
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def password_field(method, **options)
+      render_simple_field(HakumiComponents::Input::Password::Component, method, options)
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def text_area(method, **options)
+      render_simple_field(HakumiComponents::Input::TextArea::Component, method, options)
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def number_field(method, **options)
+      render_simple_field(HakumiComponents::InputNumber::Component, method, options)
+    end
+
+    sig do
+      params(
+        method: Symbol,
+        choices: T.nilable(T::Array[HakumiComponents::SelectionControl::Coercion::FlatOptionInput]),
+        options: Contracts::OptionValue
+      ).returns(ActiveSupport::SafeBuffer)
+    end
+    def select(method, choices = nil, **options)
+      render_collection_field(
+        HakumiComponents::Select::Component,
+        method,
+        :options,
+        HakumiComponents::SelectionControl::Coercion.options(ensure_flat_selection_array(choices)),
+        options
+      )
+    end
+
+    sig do
+      params(
+        method: Symbol,
+        choices: T.nilable(T::Array[HakumiComponents::SelectionControl::TreeNode]),
+        options: Contracts::OptionValue
+      ).returns(ActiveSupport::SafeBuffer)
+    end
+    def tree_select(method, choices = nil, **options)
+      render_collection_field(
+        HakumiComponents::TreeSelect::Component,
+        method,
+        :options,
+        choices || [],
+        options
+      )
+    end
+
+    sig do
+      params(
+        method: Symbol,
+        tag_value: HakumiComponents::Types::FormFieldValue,
+        options: Contracts::OptionValue
+      ).returns(ActiveSupport::SafeBuffer)
+    end
+    def radio_button(method, tag_value, **options)
+      enhance_options_with_introspection!(method, options)
+
+      id_suffix = options[:id] ? nil : tag_value.to_s
+      config = field_configuration(method, options, id_suffix: id_suffix)
+
+      option_id = options.delete(:id)
+      config[:id] = option_id if option_id.is_a?(String) || option_id.is_a?(Symbol)
+
+      checked = config[:value].to_s == tag_value.to_s
+      config[:value] = tag_value
+      config[:checked] = checked
+
+      render_form_field(
+        HakumiComponents::Radio::Component,
+        method,
+        options,
+        config
+      )
+    end
+
+    sig do
+      params(
+        method: Symbol,
+        collection: T::Array[T.any(Struct, ActiveModel::Model)],
+        value_method: Symbol,
+        text_method: Symbol,
+        options: Contracts::OptionValue
+      ).returns(ActiveSupport::SafeBuffer)
+    end
+    def collection_radio_buttons(method, collection, value_method, text_method, **options)
+      enhance_options_with_introspection!(method, options)
+
+      radio_options = collection.map do |item|
+        HakumiComponents::Radio::Group::Option.new(
+          label: item.send(text_method),
+          value: item.send(value_method)
+        )
+      end
+
+      render_form_field(
+        HakumiComponents::Radio::Group::Component,
+        method,
+        options.merge(options: radio_options)
+      )
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def check_box(method, **options)
+      render_checked_field(HakumiComponents::Switch::Component, method, options)
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def rate_field(method, **options)
+      render_simple_field(HakumiComponents::Rate::Component, method, options)
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def slider_field(method, **options)
+      enhance_options_with_introspection!(method, options)
+
+      config = field_configuration(method, options)
+
+      render_form_field(
+        HakumiComponents::Slider::Component,
+        method,
+        options,
+        config
+      )
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def date_picker(method, **options)
+      render_simple_field(HakumiComponents::DatePicker::Component, method, options)
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def mentions_field(method, **options)
+      render_collection_field(
+        HakumiComponents::Mentions::Component,
+        method,
+        :options,
+        HakumiComponents::Mentions::Coercion.options(ensure_mentions_array(options.delete(:options))),
+        options
+      )
+    end
+
+    sig do
+      params(
+        method: Symbol,
+        choices: T.nilable(T::Array[HakumiComponents::SelectionControl::Coercion::EntryInput]),
+        options: Contracts::OptionValue
+      ).returns(ActiveSupport::SafeBuffer)
+    end
+    def autocomplete_field(method, choices = nil, **options)
+      render_collection_field(
+        HakumiComponents::Autocomplete::Component,
+        method,
+        :options,
+        HakumiComponents::SelectionControl::Coercion.entries(ensure_selection_entry_array(choices)),
+        options
+      )
+    end
+
+    sig do
+      params(
+        method: Symbol,
+        choices: T.nilable(T::Array[HakumiComponents::SelectionControl::TreeNode]),
+        options: Contracts::OptionValue
+      ).returns(ActiveSupport::SafeBuffer)
+    end
+    def cascader_field(method, choices = nil, **options)
+      render_collection_field(
+        HakumiComponents::Cascader::Component,
+        method,
+        :options,
+        choices || [],
+        options
+      )
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def checkbox_field(method, **options)
+      render_checked_field(HakumiComponents::Checkbox::Component, method, options)
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def color_picker_field(method, **options)
+      render_simple_field(HakumiComponents::ColorPicker::Component, method, options)
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def time_picker_field(method, **options)
+      render_simple_field(HakumiComponents::TimePicker::Component, method, options)
+    end
+
+    sig { params(method: Symbol, data_source: T.nilable(T::Array[HakumiComponents::Transfer::Coercion::ItemInput]), options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def transfer_field(method, data_source = nil, **options)
+      disabled = options[:disabled] == true
+      render_collection_field(
+        HakumiComponents::Transfer::Component,
+        method,
+        :data_source,
+        HakumiComponents::Transfer::Coercion.items(Array(data_source), disabled: disabled),
+        options
+      )
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def upload_field(method, **options)
+      enhance_options_with_introspection!(method, options)
+
+      raise ArgumentError, "action parameter is required for upload_field" unless options[:action]
+
+      render_form_field(HakumiComponents::Upload::Component, method, options)
+    end
+
+    sig { params(value: T.nilable(String), options: Contracts::OptionValue).returns(ActiveSupport::SafeBuffer) }
+    def submit(value = nil, **options)
+      value ||= submit_default_value
+
+      button_type = options.delete(:type) || :primary
+      button_size = options.delete(:size) || :default
+      block = options.delete(:block) || false
+      loading = options.delete(:loading) || false
+      danger = options.delete(:danger) || false
+
+      @template.render(HakumiComponents::Button::Component.new(
+        type: button_type,
+        size: button_size,
+        html_type: :submit,
+        block: block,
+        loading: loading,
+        danger: danger,
+        **options
+      )) { value }
+    end
+
+    private
+
+    sig { params(component_class: T.class_of(ViewComponent::Base), method: Symbol, options: Contracts::OptionsHash).returns(ActiveSupport::SafeBuffer) }
+    def render_simple_field(component_class, method, options)
+      enhance_options_with_introspection!(method, options)
+      render_form_field(component_class, method, options)
+    end
+
+    sig do
+      params(
+        component_class: T.class_of(ViewComponent::Base),
+        method: Symbol,
+        collection_key: Symbol,
+        collection: T.nilable(Contracts::MixedCollection),
+        options: Contracts::OptionsHash
+      ).returns(ActiveSupport::SafeBuffer)
+    end
+    def render_collection_field(component_class, method, collection_key, collection, options)
+      enhance_options_with_introspection!(method, options)
+      options[collection_key] = collection || []
+      render_form_field(component_class, method, options)
+    end
+
+    sig { params(component_class: T.class_of(ViewComponent::Base), method: Symbol, options: Contracts::OptionsHash).returns(ActiveSupport::SafeBuffer) }
+    def render_checked_field(component_class, method, options)
+      enhance_options_with_introspection!(method, options)
+      checked = !!model_binding.value_for(method)
+      render_form_field(component_class, method, options, { checked: checked })
+    end
+
+    sig do
+      params(
+        value: T.nilable(T::Array[HakumiComponents::SelectionControl::Coercion::FlatOptionInput])
+      ).returns(T::Array[HakumiComponents::SelectionControl::Coercion::FlatOptionInput])
+    end
+    def ensure_flat_selection_array(value)
+      value || []
+    end
+
+    sig do
+      params(
+        value: T.nilable(T::Array[HakumiComponents::SelectionControl::Coercion::EntryInput])
+      ).returns(T::Array[HakumiComponents::SelectionControl::Coercion::EntryInput])
+    end
+    def ensure_selection_entry_array(value)
+      value || []
+    end
+
+    sig { params(value: T.nilable(Contracts::OptionValue)).returns(T::Array[HakumiComponents::Mentions::Coercion::OptionInput]) }
+    def ensure_mentions_array(value)
+      return [] if value.nil?
+      return value.filter_map { |item| mentions_option_input(item) } if value.is_a?(Array)
+
+      single_value = mentions_option_input(value)
+      single_value.nil? ? [] : [ single_value ]
+    end
+
+    sig { params(value: Contracts::OptionValue).returns(T.nilable(HakumiComponents::Mentions::Coercion::OptionInput)) }
+    def mentions_option_input(value)
+      case value
+      when HakumiComponents::Mentions::Option, String, Symbol, Numeric
+        value
+      when Hash
+        mention_hash = T.let({}, T::Hash[T.any(Symbol, String), T.nilable(T.any(String, Symbol, Numeric))])
+        value.each do |key, item|
+          return nil unless item.nil? || item.is_a?(String) || item.is_a?(Symbol) || item.is_a?(Numeric)
+
+          mention_hash[key] = item
+        end
+        mention_hash
+      when Array
+        mention_array = T.let([], T::Array[T.nilable(T.any(String, Symbol, Numeric))])
+        value.each do |item|
+          return nil unless item.nil? || item.is_a?(String) || item.is_a?(Symbol) || item.is_a?(Numeric)
+
+          mention_array << item
+        end
+        mention_array
+      else
+        nil
+      end
+    end
+
+    sig do
+      params(
+        method: Symbol,
+        options: Contracts::OptionsHash,
+        id_suffix: T.nilable(String)
+      ).returns(HakumiComponents::Types::FormFieldConfig)
+    end
+    def field_configuration(method, options, id_suffix: nil)
+      explicit_value = normalize_form_field_value(options.delete(:value))
+      model_binding.build_field_context(method: method, explicit_value: explicit_value, id_suffix: id_suffix).to_options
+    end
+
+    sig { params(method: Symbol, options: Contracts::OptionsHash).returns(Contracts::OptionsHash) }
+    def enhance_options_with_introspection!(method, options)
+      enhanced = model_binding.enhance_options(method: method, options: options)
+      options.replace(enhanced)
+    end
+
+    sig do
+      params(
+        component_class: T.class_of(ViewComponent::Base),
+        method: Symbol,
+        options: Contracts::OptionsHash,
+        config_overrides: Contracts::OptionsHash
+      ).returns(ActiveSupport::SafeBuffer)
+    end
+    def render_form_field(component_class, method, options, config_overrides = {})
+      config = field_configuration(method, options)
+      config.merge!(config_overrides)
+
+      component_options = config.merge(options).merge(standalone: false)
+
+      @template.render(component_class.new(**component_options))
+    end
+
+    sig { params(value: T.nilable(Contracts::OptionValue)).returns(HakumiComponents::Types::FormFieldValue) }
+    def normalize_form_field_value(value)
+      case value
+      when nil, String, Symbol, TrueClass, FalseClass, Numeric, Date, Time, DateTime, ActiveSupport::TimeWithZone, ActiveSupport::SafeBuffer
+        value
+      when Array
+        value.filter_map do |item|
+          case item
+          when nil, String, Symbol, TrueClass, FalseClass, Numeric, Date, Time, DateTime, ActiveSupport::TimeWithZone, ActiveSupport::SafeBuffer
+            item
+          end
+        end
+      else
+        nil
+      end
+    end
+
+    sig { returns(HakumiComponents::FormBuilder::ModelBinding) }
+    def model_binding
+      @model_binding ||= HakumiComponents::FormBuilder::ModelBinding.new(object_name: @object_name, object: @object)
+    end
+  end
+end

data/app/helpers/hakumi_components/form_helper.rb

@@ -0,0 +1,43 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module FormHelper
+    extend T::Sig
+    include ActionView::Helpers::FormHelper
+
+    FormWithOptionValue = T.type_alias do
+      T.nilable(T.any(
+        String,
+        Symbol,
+        T::Boolean,
+        Numeric,
+        Proc,
+        ActiveModel::Model,
+        T.class_of(ActionView::Helpers::FormBuilder),
+        ActionView::Helpers::FormBuilder,
+        T::Hash[Symbol, HakumiComponents::Types::HtmlAttributeValue]
+      ))
+    end
+
+    sig do
+      params(
+        options: FormWithOptionValue,
+        block: T.proc.params(f: ActionView::Helpers::FormBuilder).returns(T.any(String, ActiveSupport::SafeBuffer))
+      ).returns(ActiveSupport::SafeBuffer)
+    end
+    def hakumi_form_with(**options, &block)
+      options[:builder] ||= HakumiComponents::FormBuilder
+
+      layout = options.delete(:layout)
+      if layout
+        raw_html_options = options[:html]
+        html_options = raw_html_options.is_a?(Hash) ? raw_html_options.dup : {}
+        html_options[:class] = class_names(html_options[:class].to_s, "hakumi-form", "hakumi-form-#{layout}")
+        options[:html] = html_options
+      end
+
+      form_with(**options, &block)
+    end
+  end
+end

data/app/javascript/hakumi_components/controllers/hakumi/admin_panel_controller.js

@@ -13,13 +13,6 @@ const STORAGE_KEY = "hakumi:admin-panel"
 export default class extends RegistryController {
   static targets = ["body", "empty", "summary", "search", "typeFilter", "stateFilter"]
 
-  static mount() {
-    Persistence.bootstrap(STORAGE_KEY, ({state}) => {
-      if(!state.visible) return
-      window.HakumiComponents.renderComponent("admin_panel")
-    })
-  }
-
   setup() {
     Persistence.save(STORAGE_KEY, { version: 1, state: { visible: true } })
     this.refresh()
@@ -66,6 +59,11 @@ export default class extends RegistryController {
     this.applyFilters()
   }
 
+  toggle(event) {
+    if (event) event.preventDefault()
+    this.element.classList.toggle("hakumi-admin-panel-collapsed")
+  }
+
   close(event) {
     if (event) event.preventDefault()
     Persistence.save(STORAGE_KEY, { version: 1, state: { visible: false } })

data/app/javascript/hakumi_components/controllers/hakumi/back_top_controller.js

@@ -51,7 +51,7 @@ export default class extends RegistryController {
     const scrollTop = this.getScrollTop()
     const isVisible = scrollTop >= this.visibilityHeightValue
     this._isVisible = isVisible
-    this.element.classList.toggle("is-visible", isVisible)
+    this.element.classList.toggle("hakumi-float-button-back-top-visible", isVisible)
   }
 
   attachScrollListener() {

data/app/javascript/hakumi_components/controllers/hakumi/button_controller.js

@@ -6,15 +6,21 @@ export default class extends RegistryController {
   }
 
   setup() {
+    this.originalHref = this.element.getAttribute("href")
+    this.initiallyDisabled = this.element.hasAttribute("disabled")
+    this.initialAriaDisabled = this.element.getAttribute("aria-disabled")
     this.boundRipple = this.createRipple.bind(this)
-    this.element.addEventListener('click', this.boundRipple)
+    this.element.addEventListener("click", this.boundRipple)
+    this.applyLoadingState()
   }
 
   teardown() {
-    this.element.removeEventListener('click', this.boundRipple)
+    this.element.removeEventListener("click", this.boundRipple)
   }
 
   createRipple(event) {
+    if (this.interactionDisabled()) return
+
     const button = event.currentTarget
     const circle = document.createElement("span")
     const diameter = Math.max(button.clientWidth, button.clientHeight)
@@ -43,6 +49,7 @@ export default class extends RegistryController {
     const api = {
       setLoading: (loading) => {
         this.loadingValue = Boolean(loading)
+        this.applyLoadingState()
       },
       isLoading: () => this.loadingValue,
       ripple: (event) => this.createRipple(event)
@@ -55,4 +62,103 @@ export default class extends RegistryController {
       api
     }
   }
+
+  loadingValueChanged() {
+    this.applyLoadingState()
+  }
+
+  applyLoadingState() {
+    if (!this.element) return
+
+    this.originalHref ??= this.element.getAttribute("href")
+    this.initiallyDisabled ??= this.element.hasAttribute("disabled")
+    this.initialAriaDisabled ??= this.element.getAttribute("aria-disabled")
+
+    const loading = this.loadingValue
+    this.element.classList.toggle("hakumi-button-loading", loading)
+    this.element.setAttribute("aria-busy", String(loading))
+
+    if (this.element.tagName === "BUTTON") {
+      this.element.disabled = this.initiallyDisabled || loading
+    } else if (this.element.tagName === "A") {
+      this.applyAnchorLoadingState(loading)
+    }
+
+    this.syncLoadingIcon(loading)
+  }
+
+  applyAnchorLoadingState(loading) {
+    if (loading) {
+      if (this.element.hasAttribute("href")) {
+        this.originalHref = this.element.getAttribute("href")
+      }
+      this.element.removeAttribute("href")
+      this.element.setAttribute("role", "button")
+      this.element.setAttribute("aria-disabled", "true")
+      return
+    }
+
+    if (this.originalHref && !this.initialAriaDisabled) {
+      this.element.setAttribute("href", this.originalHref)
+    }
+
+    if (this.initialAriaDisabled) {
+      this.element.setAttribute("aria-disabled", this.initialAriaDisabled)
+      this.element.setAttribute("role", "button")
+    } else {
+      this.element.removeAttribute("aria-disabled")
+      this.element.removeAttribute("role")
+    }
+  }
+
+  syncLoadingIcon(loading) {
+    if (loading) {
+      this.hideOriginalIcons()
+      if (!this.loadingIconElement()) {
+        this.element.prepend(this.buildLoadingIcon())
+      }
+    } else {
+      this.loadingIconElement()?.remove()
+      this.restoreOriginalIcons()
+    }
+  }
+
+  loadingIconElement() {
+    return this.element.querySelector(".hakumi-button-loading-icon")
+  }
+
+  buildLoadingIcon() {
+    const span = document.createElement("span")
+    span.className = "hakumi-icon hakumi-icon-spin hakumi-button-loading-icon"
+    span.setAttribute("aria-hidden", "true")
+    span.style.color = "currentColor"
+    span.innerHTML = `
+      <svg viewBox="0 0 1024 1024" focusable="false" width="1em" height="1em" fill="currentColor">
+        <path d="M512 64a448 448 0 1 0 448 448h-80a368 368 0 1 1-368-368V64z"></path>
+      </svg>
+    `
+    return span
+  }
+
+  hideOriginalIcons() {
+    Array.from(this.element.children).forEach((child) => {
+      if (!child.classList.contains("hakumi-icon") || child.classList.contains("hakumi-button-loading-icon")) return
+
+      child.dataset.hakumiButtonHiddenIcon = "true"
+      child.hidden = true
+    })
+  }
+
+  restoreOriginalIcons() {
+    Array.from(this.element.children).forEach((child) => {
+      if (child.dataset.hakumiButtonHiddenIcon !== "true") return
+
+      child.hidden = false
+      delete child.dataset.hakumiButtonHiddenIcon
+    })
+  }
+
+  interactionDisabled() {
+    return this.loadingValue || this.element.disabled || this.element.getAttribute("aria-disabled") === "true"
+  }
 }