hakumi_components 0.1.17.pre → 0.1.19.pre

data/app/components/{hakumi → hakumi_components}/admin_panel/component.html.erb

@@ -5,8 +5,8 @@
       <p class="hakumi-admin-panel__subtitle">Real-time inventory</p>
     </div>
     <div class="hakumi-admin-panel__controls">
-      <%= render(Hakumi::Button::Component.new(type: :text, icon: :reload, shape: :circle, data: { action: "click->hakumi--admin-panel#refresh:stop" })) { "Refresh" } %>
-      <%= render(Hakumi::Button::Component.new(type: :text, icon: :close, shape: :circle, data: { action: "click->hakumi--admin-panel#close:stop" })) %>
+      <%= render(HakumiComponents::Button::Component.new(type: :text, icon: :reload, shape: :circle, data: { action: "click->hakumi--admin-panel#refresh:stop" })) { "Refresh" } %>
+      <%= render(HakumiComponents::Button::Component.new(type: :text, icon: :close, shape: :circle, data: { action: "click->hakumi--admin-panel#close:stop" })) %>
     </div>
   </div>
 

data/app/components/hakumi_components/admin_panel/component.rb

@@ -0,0 +1,50 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module AdminPanel
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      sig do
+        params(params: T.any(ActionController::Parameters, Types::HtmlAttributes)).returns(T::Hash[Symbol, T.any(String, T::Boolean)])
+      end
+      def self.extract_controller_locals(params)
+        {
+          title: string_html_param(html_param(params, :title)) || "Admin Panel",
+          enabled: boolean_html_param(html_param(params, :enabled)) != false
+        }.compact
+      end
+
+      sig { params(title: String, enabled: T::Boolean, html_options: Types::HtmlAttributeValue).void }
+      def initialize(title: "Admin Panel", enabled: true, **html_options)
+        @title = T.let(title, String)
+        @enabled = T.let(enabled, T::Boolean)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+      end
+
+      sig { returns(T::Boolean) }
+      def render?
+        @enabled
+      end
+
+      private
+
+      sig { returns(String) }
+      attr_reader :title
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        attrs = T.let({
+          class: component_classes("admin-panel", {}, @html_options),
+          data: {
+            controller: "hakumi--admin-panel",
+            "turbo-permanent": true
+          }
+        }, Types::HtmlAttributes)
+
+        merge_attributes(attrs, @html_options.except(:class))
+      end
+    end
+  end
+end

data/app/components/hakumi_components/affix/component.rb

@@ -0,0 +1,112 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Affix
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      sig do
+        params(params: T.any(ActionController::Parameters, Types::HtmlAttributes))
+          .returns(Types::HtmlAttributes)
+      end
+      def self.extract_controller_locals(params)
+        {
+          body: string_html_param(html_param(params, :body)),
+          offset_top: float_html_param(html_param(params, :offset_top)),
+          offset_bottom: float_html_param(html_param(params, :offset_bottom)),
+          target_selector: string_html_param(html_param(params, :target_selector)),
+          z_index: integer_html_param(html_param(params, :z_index)),
+          on_change: string_html_param(html_param(params, :on_change))
+        }.compact
+      end
+
+      sig do
+        params(
+          body: T.nilable(String),
+          offset_top: T.nilable(T.any(Numeric, String)),
+          offset_bottom: T.nilable(T.any(Numeric, String)),
+          target_selector: T.nilable(String),
+          z_index: T.nilable(Integer),
+          on_change: T.nilable(String),
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        body: nil,
+        offset_top: nil,
+        offset_bottom: nil,
+        target_selector: nil,
+        z_index: nil,
+        on_change: nil,
+        **html_options
+      )
+        @body = T.let(body, T.nilable(String))
+        @offset_top = T.let(normalize_offset(offset_top), T.nilable(Float))
+        @offset_bottom = T.let(normalize_offset(offset_bottom), T.nilable(Float))
+        @target_selector = T.let(target_selector, T.nilable(String))
+        @z_index = T.let(z_index, T.nilable(Integer))
+        @on_change = T.let(on_change, T.nilable(String))
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+
+        normalize_offsets!
+        validate_props!
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def root_attributes
+        merge_attributes({ class: class_names("affix"), data: data_attributes }, @html_options)
+      end
+
+      sig { returns(T.nilable(Types::Renderable)) }
+      def content_value
+        content.presence || @body
+      end
+
+      private
+
+      sig { returns(Types::DataAttributes) }
+      def data_attributes
+        data = T.let({ controller: "hakumi--affix" }, Types::DataAttributes)
+        data[:"hakumi--affix-offset-top-value"] = @offset_top unless @offset_top.nil?
+        data[:"hakumi--affix-offset-bottom-value"] = @offset_bottom unless @offset_bottom.nil?
+        data[:"hakumi--affix-target-selector-value"] = @target_selector if @target_selector.present?
+        data[:"hakumi--affix-z-index-value"] = @z_index unless @z_index.nil?
+
+        if @on_change.present?
+          existing_action = T.let(nil, T.nilable(String))
+          data[:action] = append_action(existing_action, "hakumi--affix:change->#{@on_change}")
+        end
+
+        data
+      end
+
+      sig { void }
+      def normalize_offsets!
+        @offset_top = 0.0 if @offset_top.nil? && @offset_bottom.nil?
+      end
+
+      sig { params(value: T.nilable(T.any(Numeric, String))).returns(T.nilable(Float)) }
+      def normalize_offset(value)
+        return nil if value.nil?
+        return value.to_f if value.is_a?(Numeric)
+
+        self.class.float_html_param(value)
+      end
+
+      sig { void }
+      def validate_props!
+        return if @offset_top.nil? || @offset_bottom.nil?
+
+        raise ArgumentError, "offset_top and offset_bottom cannot be used together"
+      end
+
+      sig { params(existing: T.nilable(String), action: String).returns(String) }
+      def append_action(existing, action)
+        return action if existing.blank?
+
+        [ existing, action ].join(" ")
+      end
+    end
+  end
+end

data/app/components/{hakumi → hakumi_components}/alert/component.html.erb

@@ -13,8 +13,8 @@
     <% if message_content.present? %>
       <div class="hakumi-alert-message" data-hakumi--alert-target="message"><%= message_content %></div>
     <% end %>
-    <% if description? %>
-      <div class="hakumi-alert-description" data-hakumi--alert-target="description"><%= description %></div>
+    <% if description_content.present? %>
+      <div class="hakumi-alert-description" data-hakumi--alert-target="description"><%= description_content %></div>
     <% end %>
   </div>
 
@@ -27,7 +27,7 @@
       <% if close_icon? %>
         <%= close_icon %>
       <% else %>
-        <%= render Hakumi::Icon::Component.new(name: :close) %>
+        <%= render HakumiComponents::Icon::Component.new(name: :close) %>
       <% end %>
     </button>
   <% end %>

data/app/components/hakumi_components/alert/component.rb

@@ -0,0 +1,134 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Alert
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      Type = T.type_alias { T.any(Symbol, String) }
+      TYPES = T.let([ :success, :info, :warning, :error ].freeze, T::Array[Symbol])
+
+      renders_one :icon
+      renders_one :message
+      renders_one :description
+      renders_one :action
+      renders_one :close_icon
+
+      sig do
+        params(
+          params: T.any(ActionController::Parameters, HakumiComponents::Types::HtmlAttributes)
+        ).returns(HakumiComponents::Types::HtmlAttributes)
+      end
+      def self.extract_controller_locals(params)
+        {
+          type: symbol_html_param(html_param(params, :type)),
+          show_icon: boolean_html_param(html_param(params, :show_icon)),
+          closable: boolean_html_param(html_param(params, :closable)),
+          banner: boolean_html_param(html_param(params, :banner)),
+          message_text: string_html_param(html_param(params, :message)),
+          description_text: string_html_param(html_param(params, :description))
+        }.compact
+      end
+
+      sig do
+        params(
+          type: T.nilable(Type),
+          show_icon: T.nilable(T::Boolean),
+          closable: T::Boolean,
+          banner: T::Boolean,
+          message_text: T.nilable(String),
+          description_text: T.nilable(String),
+          html_options: HakumiComponents::Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        type: nil,
+        show_icon: nil,
+        closable: false,
+        banner: false,
+        message_text: nil,
+        description_text: nil,
+        **html_options
+      )
+        @type = T.let((type || :info).to_sym, Symbol)
+        @show_icon = T.let(show_icon.nil? ? banner : show_icon, T::Boolean)
+        @closable = T.let(closable, T::Boolean)
+        @banner = T.let(banner, T::Boolean)
+        @message_text = T.let(message_text, T.nilable(String))
+        @description_text = T.let(description_text, T.nilable(String))
+        @html_options = T.let(html_options, HakumiComponents::Types::HtmlAttributes)
+
+        validate_props!
+      end
+
+      private
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:type, TYPES)
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        modifiers = {
+          @type => true,
+          "with-description": description? || @description_text.present?,
+          "with-icon": show_icon?,
+          "no-icon": !show_icon?,
+          closable: @closable,
+          banner: @banner
+        }
+        component_classes("alert", modifiers, @html_options)
+      end
+
+      sig { returns(HakumiComponents::Types::HtmlAttributes) }
+      def wrapper_attributes
+        data_attrs = { controller: "hakumi--alert" }
+
+        merge_attributes(
+          { class: wrapper_classes, data: data_attrs },
+          @html_options
+        )
+      end
+
+      sig { returns(HakumiComponents::Types::Renderable) }
+      def message_content
+        return render_value(message) if message?
+        return render_value(content) if content.present?
+
+        render_value(@message_text)
+      end
+
+      sig { returns(HakumiComponents::Types::Renderable) }
+      def description_content
+        return render_value(description) if description?
+
+        render_value(@description_text)
+      end
+
+      sig { returns(T::Boolean) }
+      def show_icon?
+        @show_icon
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def default_icon_element
+        return nil unless show_icon?
+
+        icon_name = default_icon_name
+        render HakumiComponents::Icon::Component.new(name: icon_name)
+      end
+
+      sig { returns(Symbol) }
+      def default_icon_name
+        case @type
+        when :success then :check_circle
+        when :warning then :exclamation_circle
+        when :error then :close_circle
+        else :info_circle
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi_components/anchor/component.rb

@@ -0,0 +1,88 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Anchor
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      DIRECTIONS = T.let(%i[vertical horizontal].freeze, T::Array[Symbol])
+
+      renders_many :links, HakumiComponents::Anchor::Link::Component
+
+      sig do
+        params(
+          affix: T::Boolean,
+          bounds: Numeric,
+          offset_top: Numeric,
+          target_offset: T.nilable(Numeric),
+          direction: Symbol,
+          replace: T::Boolean,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        affix: true,
+        bounds: 5,
+        offset_top: 0,
+        target_offset: nil,
+        direction: :vertical,
+        replace: false,
+        **html_options
+      )
+        @affix = T.let(affix, T::Boolean)
+        @bounds = T.let(bounds, Numeric)
+        @offset_top = T.let(offset_top, Numeric)
+        @target_offset = T.let(target_offset, T.nilable(Numeric))
+        @direction = T.let(direction, Symbol)
+        @replace = T.let(replace, T::Boolean)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+
+        validate_props!
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        class_names("anchor-wrapper", { fixed: @affix, horizontal: horizontal? })
+      end
+
+      sig { returns(String) }
+      def anchor_classes
+        class_names("anchor", { fixed: @affix })
+      end
+
+      sig { returns(String) }
+      def stimulus_controller
+        "hakumi--anchor"
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        values = T.let({
+          offset_top: @offset_top,
+          target_offset: @target_offset || @offset_top,
+          bounds: @bounds,
+          replace: @replace,
+          direction: @direction.to_s
+        }, Types::StimulusValues)
+
+        merge_attributes(
+          { class: wrapper_classes, data: stimulus_attrs(stimulus_controller, values) },
+          @html_options
+        )
+      end
+
+      sig { returns(T::Boolean) }
+      def horizontal?
+        @direction == :horizontal
+      end
+
+      private
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:direction, DIRECTIONS)
+      end
+    end
+  end
+end

data/app/components/{hakumi → hakumi_components}/anchor/link/component.html.erb

@@ -4,7 +4,7 @@
     href="<%= href %>"
     title="<%= title %>"
     <% if target.present? %> target="<%= target %>"<% end %>><%= title %></a>
-  <% if has_children? %>
+  <% if children? %>
     <% links.each do |child_link| %>
       <%= child_link %>
     <% end %>

data/app/components/hakumi_components/anchor/link/component.rb

@@ -0,0 +1,53 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Anchor
+    module Link
+      class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        renders_many :links, HakumiComponents::Anchor::Link::Component
+
+        sig do
+          params(
+            href: String,
+            title: String,
+            target: T.nilable(String),
+            html_options: Types::HtmlAttributeValue
+          ).void
+        end
+        def initialize(href:, title:, target: nil, **html_options)
+          @href = T.let(href, String)
+          @title = T.let(title, String)
+          @target = T.let(target, T.nilable(String))
+          @html_options = T.let(html_options, Types::HtmlAttributes)
+        end
+
+        sig { returns(String) }
+        attr_reader :href
+
+        sig { returns(String) }
+        attr_reader :title
+
+        sig { returns(T.nilable(String)) }
+        attr_reader :target
+
+        sig { returns(String) }
+        def link_classes
+          "hakumi-anchor-link"
+        end
+
+        sig { returns(String) }
+        def title_classes
+          "hakumi-anchor-link-title"
+        end
+
+        sig { returns(T::Boolean) }
+        def children?
+          links.any?
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi_components/autocomplete/component.html.erb

@@ -0,0 +1,94 @@
+<% autocomplete_control = capture do %>
+  <div <%= tag.attributes(wrapper_attributes).to_s.html_safe %>>
+    <div class="hakumi-auto-complete-input-wrapper">
+      <% if custom_input_renderer? %>
+        <%= input_renderer.call(input_attributes) %>
+      <% else %>
+        <input <%= tag.attributes(input_attributes).to_s.html_safe %>>
+      <% end %>
+
+      <% if allow_clear? %>
+        <button
+          type="button"
+          class="hakumi-auto-complete-clear-icon"
+          aria-label="Clear"
+          data-hakumi--autocomplete-target="clear"
+          data-action="click->hakumi--autocomplete#clear">
+          <%= render HakumiComponents::Icon::Component.new(name: clear_icon, theme: :filled, fallback_to_outlined: true) %>
+        </button>
+      <% end %>
+    </div>
+
+    <template data-hakumi--autocomplete-target="optionTemplate">
+      <div
+        class="hakumi-auto-complete-item"
+        role="option"
+        data-hakumi--autocomplete-target="option"
+        data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
+        <span class="hakumi-auto-complete-item-label"></span>
+      </div>
+    </template>
+
+    <div
+      id="<%= dropdown_id %>"
+      class="hakumi-auto-complete-dropdown hakumi-auto-complete-dropdown-hidden"
+      role="listbox"
+      data-hakumi--autocomplete-target="dropdown">
+      <% if normalized_items.any? %>
+        <% normalized_items.each do |item| %>
+          <% if item.group? %>
+            <div class="hakumi-auto-complete-group">
+              <div class="hakumi-auto-complete-group-label"><%= item.label %></div>
+              <% item.options.each do |option| %>
+                <div
+                  class="hakumi-auto-complete-item"
+                  role="option"
+                  data-value="<%= option.value %>"
+                  data-label="<%= option.label %>"
+                  data-hakumi--autocomplete-target="option"
+                  data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
+                  <span class="hakumi-auto-complete-item-label"><%= option.label %></span>
+                </div>
+              <% end %>
+            </div>
+          <% elsif item.option? %>
+            <div
+              class="hakumi-auto-complete-item"
+              role="option"
+              data-value="<%= item.value %>"
+              data-label="<%= item.label %>"
+              data-hakumi--autocomplete-target="option"
+              data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
+              <span class="hakumi-auto-complete-item-label"><%= item.label %></span>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <div
+        class="hakumi-auto-complete-empty"
+        data-hakumi--autocomplete-target="empty"
+        style="display: <%= normalized_items.any? ? 'none' : 'block' %>;">
+        <%= not_found_content %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<% if standalone? %>
+  <%= autocomplete_control %>
+<% else %>
+  <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
+    <%= render_label(field_id: input_id) %>
+
+    <div class="hakumi-form-item-control">
+      <div class="hakumi-form-item-control-input">
+        <div class="hakumi-form-item-control-input-content">
+          <%= autocomplete_control %>
+        </div>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>