hakumi_components 0.1.18.pre → 0.1.19.pre

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

@@ -1,26 +1,37 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Breadcrumb
     class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
       renders_many :items, ->(title: nil, href: nil, target: nil, **options, &block) do
-        HakumiComponents::Breadcrumb::Item::Component.new(title: title, href: href, target: target, **options, &block)
+        HakumiComponents::Breadcrumb::Item::Component.new(title: title, href: href, target: target, **options)
       end
 
+      sig do
+        params(
+          separator: String,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
       def initialize(separator: "/", **html_options)
-        @separator = separator
-        @html_options = html_options
+        @separator = T.let(separator, String)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
       end
 
+      sig { returns(String) }
       attr_reader :separator
 
+      sig { returns(String) }
       def breadcrumb_classes
         "hakumi-breadcrumb"
       end
 
+      sig { returns(Types::HtmlAttributes) }
       def wrapper_attributes
-        base_attrs = { class: breadcrumb_classes }
-        merge_attributes(base_attrs, @html_options)
+        merge_attributes({ class: breadcrumb_classes }, @html_options)
       end
     end
   end

data/app/components/hakumi_components/breadcrumb/item/component.html.erb

@@ -1,17 +1,17 @@
 <% if menu? %>
   <%= render HakumiComponents::Dropdown::Component.new do |dropdown| %>
     <% dropdown.with_trigger do %>
-      <span class="hakumi-breadcrumb-link hakumi-breadcrumb-link-dropdown">
+      <%= tag.span(**item_attributes(extra_classes: ["hakumi-breadcrumb-link-dropdown"])) do %>
         <%= display_title %>
         <%= render HakumiComponents::Icon::Component.new(name: :down, size: 10) %>
-      </span>
+      <% end %>
     <% end %>
     <% menu.each do |item| %>
-      <% dropdown.with_item(key: item[:key] || item[:title], label: item[:title], href: item[:href], target: item[:target]) %>
+      <% dropdown.with_item(key: item.key, label: item.title, href: item.href, target: item.target) %>
     <% end %>
   <% end %>
 <% elsif link? %>
-  <a class="<%= item_classes %>" href="<%= href %>"<% if target.present? %> target="<%= target %>"<% end %>><%= display_title %></a>
+  <%= tag.a(display_title, **link_attributes) %>
 <% else %>
-  <span class="<%= item_classes %>"><%= display_title %></span>
+  <%= tag.span(display_title, **item_attributes) %>
 <% end %>

data/app/components/hakumi_components/breadcrumb/item/component.rb

@@ -1,33 +1,81 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Breadcrumb
     module Item
       class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        sig do
+          params(
+            title: T.nilable(String),
+            href: T.nilable(String),
+            target: T.nilable(String),
+            menu: T.nilable(T::Array[T.any(HakumiComponents::Breadcrumb::Item::MenuEntry, Types::HtmlAttributes)]),
+            html_options: Types::HtmlAttributeValue
+          ).void
+        end
         def initialize(title: nil, href: nil, target: nil, menu: nil, **html_options)
-          @title = title
-          @href = href
-          @target = target
-          @menu = menu
-          @html_options = html_options
+          @title = T.let(title, T.nilable(String))
+          @href = T.let(href, T.nilable(String))
+          @target = T.let(target, T.nilable(String))
+          @menu = T.let(
+            HakumiComponents::Breadcrumb::Item::MenuEntry.coerce_all(menu),
+            T.nilable(T::Array[HakumiComponents::Breadcrumb::Item::MenuEntry])
+          )
+          @html_options = T.let(html_options, Types::HtmlAttributes)
         end
 
-        attr_reader :title, :href, :target, :menu
+        sig { returns(T.nilable(String)) }
+        attr_reader :title
+
+        sig { returns(T.nilable(String)) }
+        attr_reader :href
+
+        sig { returns(T.nilable(String)) }
+        attr_reader :target
+
+        sig { returns(T.nilable(T::Array[HakumiComponents::Breadcrumb::Item::MenuEntry])) }
+        attr_reader :menu
 
+        sig { returns(String) }
         def item_classes
           "hakumi-breadcrumb-link"
         end
 
+        sig { params(extra_classes: T::Array[String]).returns(Types::HtmlAttributes) }
+        def item_attributes(extra_classes: [])
+          merge_attributes(
+            { class: ([ item_classes ] + extra_classes).join(" ") },
+            @html_options
+          )
+        end
+
+        sig { returns(Types::HtmlAttributes) }
+        def link_attributes
+          attrs = item_attributes
+          attrs[:href] = href
+          attrs[:target] = target if target.present?
+          attrs
+        end
+
+        sig { returns(T::Boolean) }
         def link?
           href.present?
         end
 
+        sig { returns(T::Boolean) }
         def menu?
-          menu.present? && menu.is_a?(Array) && menu.any?
+          m = @menu
+          return false if m.nil?
+
+          m.any?
         end
 
+        sig { returns(Types::RenderedContent) }
         def display_title
-          content.presence || title
+          content.presence || @title
         end
       end
     end

data/app/components/hakumi_components/breadcrumb/item/menu_entry.rb

@@ -0,0 +1,71 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Breadcrumb
+    module Item
+      class MenuEntry
+        extend T::Sig
+
+        sig do
+          params(
+            title: String,
+            href: T.nilable(String),
+            target: T.nilable(String),
+            key: T.nilable(String)
+          ).void
+        end
+        def initialize(title:, href: nil, target: nil, key: nil)
+          @title = T.let(title, String)
+          @href = T.let(href, T.nilable(String))
+          @target = T.let(target, T.nilable(String))
+          @key = T.let(key || title, String)
+        end
+
+        sig { returns(String) }
+        attr_reader :title, :key
+
+        sig { returns(T.nilable(String)) }
+        attr_reader :href, :target
+
+        sig do
+          params(
+            entries: T.nilable(T::Array[T.any(HakumiComponents::Breadcrumb::Item::MenuEntry, Types::HtmlAttributes)])
+          ).returns(T.nilable(T::Array[HakumiComponents::Breadcrumb::Item::MenuEntry]))
+        end
+        def self.coerce_all(entries)
+          return nil if entries.nil?
+
+          coerced = T.let([], T::Array[HakumiComponents::Breadcrumb::Item::MenuEntry])
+          entries.each do |entry|
+            coerced << coerce(entry)
+          end
+          coerced
+        end
+
+        sig do
+          params(
+            entry: T.any(HakumiComponents::Breadcrumb::Item::MenuEntry, Types::HtmlAttributes)
+          ).returns(HakumiComponents::Breadcrumb::Item::MenuEntry)
+        end
+        def self.coerce(entry)
+          return entry if entry.is_a?(HakumiComponents::Breadcrumb::Item::MenuEntry)
+
+          title = entry[:title]
+          href = entry[:href]
+          target = entry[:target]
+          key = entry[:key]
+
+          raise ArgumentError, "menu entry title is required" unless title.is_a?(String) && title.present?
+
+          new(
+            title: title,
+            href: href.is_a?(String) ? href : nil,
+            target: target.is_a?(String) ? target : nil,
+            key: key.is_a?(String) ? key : nil
+          )
+        end
+      end
+    end
+  end
+end

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

@@ -1,16 +1,35 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Button
     class Component < HakumiComponents::BaseComponent
-      TYPES = [ :primary, :default, :dashed, :text, :link ].freeze
-      SIZES = [ :small, :middle, :large ].freeze
-      SHAPES = [ :default, :circle, :round ].freeze
-      HTML_TYPES = [ :button, :submit, :reset ].freeze
-
+      extend T::Sig
+
+      IconValue = T.type_alias { T.nilable(T.any(String, Symbol, ActiveSupport::SafeBuffer, ViewComponent::Base)) }
+
+      TYPES = T.let([ :primary, :default, :dashed, :text, :link ].freeze, T::Array[Symbol])
+      SHAPES = T.let([ :default, :circle, :round ].freeze, T::Array[Symbol])
+      HTML_TYPES = T.let([ :button, :submit, :reset ].freeze, T::Array[Symbol])
+
+      sig do
+        params(
+          type: Symbol,
+          size: Symbol,
+          html_type: Symbol,
+          href: T.nilable(String),
+          disabled: T::Boolean,
+          loading: T::Boolean,
+          danger: T::Boolean,
+          block: T::Boolean,
+          icon: IconValue,
+          shape: Symbol,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
       def initialize(
         type: :default,
-        size: :middle,
+        size: :default,
         html_type: :button,
         href: nil,
         disabled: false,
@@ -25,23 +44,25 @@ module HakumiComponents
         @size = size
         @html_type = html_type
         @href = href
-        @disabled = disabled
-        @loading = loading
-        @danger = danger
-        @block = block
-        @icon = icon
+        @disabled = T.let(disabled, T::Boolean)
+        @loading = T.let(loading, T::Boolean)
+        @danger = T.let(danger, T::Boolean)
+        @block = T.let(block, T::Boolean)
+        @icon = T.let(icon, IconValue)
         @shape = shape
-        @html_options = html_options
+        @html_options = T.let(html_options, Types::HtmlAttributes)
 
         validate_props!
       end
 
+      sig { returns(ActiveSupport::SafeBuffer) }
       def call
         content_tag(tag_name, content_wrapper, wrapper_attributes)
       end
 
       private
 
+      sig { void }
       def validate_props!
         validate_inclusion!(:type, TYPES)
         validate_inclusion!(:size, SIZES)
@@ -49,14 +70,17 @@ module HakumiComponents
         validate_inclusion!(:html_type, HTML_TYPES)
       end
 
+      sig { returns(Symbol) }
       def tag_name
         @href ? :a : :button
       end
 
+      sig { returns(String) }
       def wrapper_classes
         modifiers = {
           @type => true,
-          @size => (@size != :middle),
+          small: @size == :small,
+          large: @size == :large,
           loading: @loading,
           danger: @danger,
           block: @block,
@@ -65,30 +89,39 @@ module HakumiComponents
 
         modifiers[@shape] = true if @shape != :default
 
-        class_names("button", modifiers, [ @html_options[:class] ])
+        class_names("button", modifiers, [ html_class_name ])
       end
 
+      sig { returns(Types::HtmlAttributes) }
       def wrapper_attributes
+        disabled = interaction_disabled?
         attrs = {
           class: wrapper_classes,
           data: {
             controller: "hakumi--button",
-            action: "click->hakumi--button#handleClick"
+            hakumi__button_loading_value: @loading
           }
         }
+        attrs[:"aria-busy"] = "true" if @loading
 
         if @href
-          attrs[:href] = @disabled ? nil : @href
-          attrs[:role] = "button" if @disabled
-          attrs[:"aria-disabled"] = "true" if @disabled
+          attrs[:href] = disabled ? nil : @href
+          attrs[:role] = "button" if disabled
+          attrs[:"aria-disabled"] = "true" if disabled
         else
           attrs[:type] = @html_type
-          attrs[:disabled] = true if @disabled
+          attrs[:disabled] = true if disabled
         end
 
         merge_attributes(attrs, @html_options.except(:class))
       end
 
+      sig { returns(T::Boolean) }
+      def interaction_disabled?
+        @disabled || @loading
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
       def content_wrapper
         safe_join([
           icon_element,
@@ -96,6 +129,7 @@ module HakumiComponents
         ].compact)
       end
 
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
       def icon_element
         return loading_icon if @loading
         return nil unless @icon
@@ -103,19 +137,27 @@ module HakumiComponents
         if @icon.is_a?(String) || @icon.is_a?(Symbol)
           render HakumiComponents::Icon::Component.new(name: @icon)
         else
-          @icon
+          render(@icon)
         end
       end
 
+      sig { returns(ActiveSupport::SafeBuffer) }
       def loading_icon
         render HakumiComponents::Icon::Component.new(name: :loading, spin: true)
       end
 
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
       def text_element
         return nil if content.blank?
 
         tag.span(content)
       end
+
+      sig { returns(T.nilable(String)) }
+      def html_class_name
+        css_class = @html_options[:class]
+        css_class.is_a?(String) ? css_class : nil
+      end
     end
   end
 end

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

@@ -10,8 +10,8 @@
           <% if show_year_select? %>
             <%= render HakumiComponents::Select::Component.new(
               value: current_year,
-              options: years_range.map { |y| [y.to_s, y] },
-              size: fullscreen? ? :middle : :small,
+              options: years_range.map { |year| [year.to_s, year] },
+              size: fullscreen? ? :default : :small,
               standalone: true,
               style: "width: 100px;",
               data: { "hakumi--calendar-target": "yearSelect", action: "hakumi--select:change->hakumi--calendar#changeYear" }
@@ -21,8 +21,8 @@
           <% if show_month_select? %>
             <%= render HakumiComponents::Select::Component.new(
               value: current_month,
-              options: month_names.each_with_index.map { |name, i| [name, i + 1] },
-              size: fullscreen? ? :middle : :small,
+              options: month_names.each_with_index.map { |name, index| [name, index + 1] },
+              size: fullscreen? ? :default : :small,
               standalone: true,
               style: "width: 120px;",
               data: { "hakumi--calendar-target": "monthSelect", action: "hakumi--select:change->hakumi--calendar#changeMonth" }
@@ -56,7 +56,7 @@
                 { label: "Year", value: "year" }
               ],
               value: @mode.to_s,
-              size: fullscreen? ? :middle : :small,
+              size: fullscreen? ? :default : :small,
               data: { "hakumi--calendar-target": "modeSegmented", action: "hakumi--segmented:change->hakumi--calendar#changeMode" }
             ) %>
           </div>
@@ -82,20 +82,20 @@
         </thead>
         <tbody class="hakumi-calendar-tbody">
           <% weeks_in_month.each do |week| %>
-            <tr class="hakumi-calendar-row <%= 'hakumi-calendar-row-selected' if week[:week_selected] %>">
+            <tr class="hakumi-calendar-row <%= 'hakumi-calendar-row-selected' if week.week_selected? %>">
               <% if show_week? %>
                 <td class="hakumi-calendar-cell hakumi-calendar-cell-week"
                     data-action="click->hakumi--calendar#selectWeek">
-                  <div class="hakumi-calendar-week-number"><%= week[:week_number] %></div>
+                  <div class="hakumi-calendar-week-number"><%= week.week_number %></div>
                 </td>
               <% end %>
-              <% week[:days].each do |day_info| %>
-                <td class="<%= cell_classes(day_info[:date]) %>"
-                    data-date="<%= day_info[:date].iso8601 %>"
+              <% week.days.each do |day_info| %>
+                <td class="<%= cell_classes(day_info) %>"
+                    data-date="<%= day_info.date.iso8601 %>"
                     data-action="click->hakumi--calendar#selectDate">
                   <div class="hakumi-calendar-date">
-                    <div class="hakumi-calendar-date-value"><%= day_info[:day] %></div>
-                    <% custom_content = render_date_cell(day_info[:date]) %>
+                    <div class="hakumi-calendar-date-value"><%= day_info.day %></div>
+                    <% custom_content = render_date_cell(day_info.date) %>
                     <% if custom_content %>
                       <div class="hakumi-calendar-date-content"><%= custom_content %></div>
                     <% end %>
@@ -112,11 +112,11 @@
           <div class="hakumi-calendar-month-panel-row">
             <% row.each do |month_info| %>
               <div class="<%= month_cell_classes(month_info) %>"
-                   data-month="<%= month_info[:month] %>"
+                   data-month="<%= month_info.value %>"
                    data-action="click->hakumi--calendar#selectMonth">
                 <div class="hakumi-calendar-month-cell-inner">
-                  <div class="hakumi-calendar-month-value"><%= month_info[:short_name] %></div>
-                  <% custom_content = render_month_cell(month_info[:month]) %>
+                  <div class="hakumi-calendar-month-value"><%= month_info.label %></div>
+                  <% custom_content = render_month_cell(month_info.value) %>
                   <% if custom_content %>
                     <div class="hakumi-calendar-month-content"><%= custom_content %></div>
                   <% end %>
@@ -132,10 +132,10 @@
           <div class="hakumi-calendar-quarter-panel-row">
             <% row.each do |quarter_info| %>
               <div class="<%= quarter_cell_classes(quarter_info) %>"
-                   data-quarter="<%= quarter_info[:quarter] %>"
+                   data-quarter="<%= quarter_info.value %>"
                    data-action="click->hakumi--calendar#selectQuarter">
                 <div class="hakumi-calendar-quarter-cell-inner">
-                  <div class="hakumi-calendar-quarter-value"><%= quarter_info[:label] %></div>
+                  <div class="hakumi-calendar-quarter-value"><%= quarter_info.label %></div>
                 </div>
               </div>
             <% end %>
@@ -148,10 +148,10 @@
           <div class="hakumi-calendar-year-panel-row">
             <% row.each do |year_info| %>
               <div class="<%= year_cell_classes(year_info) %>"
-                   data-year="<%= year_info[:year] %>"
+                   data-year="<%= year_info.value %>"
                    data-action="click->hakumi--calendar#selectYear">
                 <div class="hakumi-calendar-year-cell-inner">
-                  <div class="hakumi-calendar-year-value"><%= year_info[:year] %></div>
+                  <div class="hakumi-calendar-year-value"><%= year_info.label %></div>
                 </div>
               </div>
             <% end %>