hakumi_components 0.1.18.pre → 0.1.19.pre

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

@@ -1,10 +1,15 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Tabs
     class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      TabKey = T.type_alias { T.nilable(Types::HtmlKey) }
+      TabItem = T.type_alias { T.any(HakumiComponents::Tabs::Item::Component, ViewComponent::Slot) }
+
       TYPES = %i[line card editable_card].freeze
-      SIZES = %i[large middle small].freeze
       TAB_POSITIONS = %i[top bottom left right].freeze
       INDICATOR_ALIGNS = %i[start center end].freeze
 
@@ -16,29 +21,47 @@ module HakumiComponents
         closable: nil,
         close_icon: nil,
         force_render: false,
-        **options,
         &block
       ) do
+        T.bind(self, HakumiComponents::Tabs::Component)
         item = HakumiComponents::Tabs::Item::Component.new(
           key: key,
           label: label,
           icon: icon,
           disabled: disabled,
-          closable: closable.nil? ? (@type == :editable_card) : closable,
+          closable: closable.nil? ? (type == :editable_card) : closable,
           close_icon: close_icon,
           force_render: force_render,
-          parent: self,
-          **options
+          parent: self
         )
         item.content = capture(&block) if block
         item
       end
 
+      sig do
+        params(
+          active_key: TabKey,
+          default_active_key: TabKey,
+          type: Symbol,
+          size: Symbol,
+          tab_position: Symbol,
+          centered: T::Boolean,
+          animated: T::Boolean,
+          indicator: T.nilable(Types::HtmlAttributes),
+          tab_bar_gutter: T.nilable(Integer),
+          tab_bar_extra_content_left: T.nilable(Types::Renderable),
+          tab_bar_extra_content_right: T.nilable(Types::Renderable),
+          add_icon: T.nilable(Types::Renderable),
+          hide_add: T::Boolean,
+          destroy_inactive_tab_pane: T::Boolean,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
       def initialize(
         active_key: nil,
         default_active_key: nil,
         type: :line,
-        size: :middle,
+        size: :default,
         tab_position: :top,
         centered: false,
         animated: true,
@@ -51,145 +74,172 @@ module HakumiComponents
         destroy_inactive_tab_pane: false,
         **html_options
       )
-        @active_key = active_key
-        @default_active_key = default_active_key
-        @type = type
-        @size = size
-        @tab_position = tab_position
-        @centered = centered
-        @animated = animated
-        @indicator = indicator || {}
-        @tab_bar_gutter = tab_bar_gutter
-        @tab_bar_extra_content_left = tab_bar_extra_content_left
-        @tab_bar_extra_content_right = tab_bar_extra_content_right
-        @add_icon = add_icon
-        @hide_add = hide_add
-        @destroy_inactive_tab_pane = destroy_inactive_tab_pane
-        @html_options = html_options
+        @active_key = T.let(active_key, TabKey)
+        @default_active_key = T.let(default_active_key, TabKey)
+        @type = T.let(type, Symbol)
+        @size = T.let(size, Symbol)
+        @tab_position = T.let(tab_position, Symbol)
+        @centered = T.let(centered, T::Boolean)
+        @animated = T.let(animated, T::Boolean)
+        @indicator = T.let(HakumiComponents::Tabs::IndicatorConfig.coerce(indicator), HakumiComponents::Tabs::IndicatorConfig)
+        @tab_bar_gutter = T.let(tab_bar_gutter, T.nilable(Integer))
+        @tab_bar_extra_content_left = T.let(tab_bar_extra_content_left, T.nilable(Types::Renderable))
+        @tab_bar_extra_content_right = T.let(tab_bar_extra_content_right, T.nilable(Types::Renderable))
+        @add_icon = T.let(add_icon, T.nilable(Types::Renderable))
+        @hide_add = T.let(hide_add, T::Boolean)
+        @destroy_inactive_tab_pane = T.let(destroy_inactive_tab_pane, T::Boolean)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+        @close_button_template_html = T.let(nil, T.nilable(String))
 
         validate_props!
       end
 
-      attr_reader :type, :size, :tab_position, :centered, :animated, :indicator,
-                  :tab_bar_gutter, :tab_bar_extra_content_left,
-                  :tab_bar_extra_content_right, :add_icon, :hide_add, :destroy_inactive_tab_pane
+      sig { returns(Symbol) }
+      attr_reader :type, :size, :tab_position
+
+      sig { returns(T::Boolean) }
+      attr_reader :centered, :animated, :hide_add, :destroy_inactive_tab_pane
+
+      sig { returns(HakumiComponents::Tabs::IndicatorConfig) }
+      attr_reader :indicator
 
+      sig { returns(T.nilable(Integer)) }
+      attr_reader :tab_bar_gutter
+
+      sig { returns(T.nilable(Types::Renderable)) }
+      attr_reader :tab_bar_extra_content_left, :tab_bar_extra_content_right, :add_icon
+
+      sig { returns(TabKey) }
+      attr_reader :active_key, :default_active_key
+
+      sig { returns(String) }
       def tabs_classes
         class_names(
           "tabs",
           {
             @type => @type != :line,
-            @size => @size != :middle,
+            @size => @size != :default,
             @tab_position => @tab_position != :top,
             centered: @centered
           },
-          [ @html_options[:class] ]
+          html_classes(@html_options)
         )
       end
 
+      sig { returns(T::Boolean) }
       def vertical?
         %i[left right].include?(@tab_position)
       end
 
+      sig { returns(T::Boolean) }
       def editable?
         @type == :editable_card
       end
 
+      sig { returns(TabKey) }
       def initial_active_key
         @active_key || @default_active_key
       end
 
+      sig { returns(T.nilable(Numeric)) }
       def indicator_size
-        @indicator[:size]
+        @indicator.size
       end
 
+      sig { returns(Symbol) }
       def indicator_align
-        @indicator[:align] || :center
+        @indicator.align
       end
 
+      sig { returns(Types::HtmlAttributes) }
       def wrapper_attributes
-        base_attrs = {
-          class: tabs_classes,
-          data: stimulus_data
-        }
-        merge_attributes(base_attrs, @html_options.except(:class))
-      end
-
-      def stimulus_controller
-        "hakumi--tabs"
-      end
-
-      def stimulus_data
-        data = {
-          controller: stimulus_controller,
-          "#{stimulus_controller}-active-key-value" => initial_active_key,
-          "#{stimulus_controller}-tab-position-value" => @tab_position.to_s,
-          "#{stimulus_controller}-indicator-align-value" => indicator_align.to_s
-        }
-
-        data["#{stimulus_controller}-indicator-size-value"] = indicator_size if indicator_size
+        values = T.let({
+          active_key: initial_active_key,
+          tab_position: @tab_position.to_s,
+          indicator_align: indicator_align.to_s
+        }, Types::StimulusValues)
+        values[:indicator_size] = indicator_size if indicator_size
         if editable?
-          data["#{stimulus_controller}-tab-template-value"] = tab_template_html
-          data["#{stimulus_controller}-pane-template-value"] = pane_template_html
-          data["#{stimulus_controller}-close-button-template-value"] = close_button_template_html
+          values[:tab_template] = tab_template_html
+          values[:pane_template] = pane_template_html
+          values[:close_button_template] = close_button_template_html
         end
 
-        data
+        merge_attributes(
+          { class: tabs_classes, data: stimulus_attrs("hakumi--tabs", values) },
+          @html_options.except(:class)
+        )
       end
 
+      sig { returns(String) }
       def tab_template_html
-        # Template for dynamically added tabs - uses {{key}}, {{label}}, {{closeButton}} placeholders
         '<div class="hakumi-tabs-tab" data-key="{{key}}" data-hakumi--tabs-target="tab" data-action="click->hakumi--tabs#selectTab"><div class="hakumi-tabs-tab-btn"><span class="hakumi-tabs-tab-label">{{label}}</span></div>{{closeButton}}</div>'.dup.force_encoding("UTF-8")
       end
 
+      sig { returns(String) }
       def pane_template_html
         '<div class="hakumi-tabs-tabpane hakumi-tabs-tabpane-hidden" data-key="{{key}}" data-hakumi--tabs-target="pane" aria-hidden="true">{{content}}</div>'.dup.force_encoding("UTF-8")
       end
 
+      sig { returns(String) }
       def close_button_template_html
-        @close_button_template_html ||= ApplicationController.render(
+        @close_button_template_html ||= ::ApplicationController.render(
           HakumiComponents::Button::Component.new(
             type: :text,
             size: :small,
             icon: :close,
             class: "hakumi-tabs-tab-remove",
-            aria: { label: "Remove tab" },
+            aria: { label: remove_tab_aria_label },
             data: { action: "click->hakumi--tabs#removeTab", key: "{{key}}" }
           ),
           layout: false
         ).strip
       end
 
+      sig { returns(String) }
+      def remove_tab_aria_label
+        t_default(:remove_tab_aria_label, default: "Remove tab")
+      end
+
+      sig { returns(T.nilable(String)) }
       def nav_list_style
-        styles = []
+        styles = T.let([], T::Array[String])
         styles << "--tab-bar-gutter: #{@tab_bar_gutter}px" if @tab_bar_gutter
         styles.join("; ") if styles.any?
       end
 
-      def has_extra_content?
-        @tab_bar_extra_content_left.present? ||
-          @tab_bar_extra_content_right.present?
+      sig { returns(T::Boolean) }
+      def extra_content?
+        @tab_bar_extra_content_left.present? || @tab_bar_extra_content_right.present?
       end
 
+      sig { returns(T.nilable(Types::Renderable)) }
       def extra_content_left
         @tab_bar_extra_content_left
       end
 
+      sig { returns(T.nilable(Types::Renderable)) }
       def extra_content_right
         @tab_bar_extra_content_right
       end
 
+      sig { params(item: TabItem, index: Integer).returns(T::Boolean) }
+      def item_active?(item, index)
+        key = item.public_send(:key)
+        active = initial_active_key
+        active ? key.to_s == active.to_s : index == 0
+      end
+
       private
 
+      sig { void }
       def validate_props!
         validate_inclusion!(:type, TYPES)
         validate_inclusion!(:size, SIZES)
         validate_inclusion!(:tab_position, TAB_POSITIONS)
-        if @indicator[:align]
-          unless INDICATOR_ALIGNS.include?(@indicator[:align])
-            raise ArgumentError, "Invalid indicator align: #{@indicator[:align]}. Must be one of: #{INDICATOR_ALIGNS.join(', ')}"
-          end
-        end
+        return if INDICATOR_ALIGNS.include?(@indicator.align)
+
+        raise ArgumentError, "Invalid indicator align: #{@indicator.align}. Must be one of: #{INDICATOR_ALIGNS.join(', ')}"
       end
     end
   end

data/app/components/hakumi_components/tabs/indicator_config.rb

@@ -0,0 +1,34 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Tabs
+    class IndicatorConfig
+      extend T::Sig
+
+      sig { params(size: T.nilable(Numeric), align: Symbol).void }
+      def initialize(size: nil, align: :center)
+        @size = T.let(size, T.nilable(Numeric))
+        @align = T.let(align, Symbol)
+      end
+
+      sig { returns(T.nilable(Numeric)) }
+      attr_reader :size
+
+      sig { returns(Symbol) }
+      attr_reader :align
+
+      sig { params(value: T.nilable(Types::HtmlAttributes)).returns(HakumiComponents::Tabs::IndicatorConfig) }
+      def self.coerce(value)
+        return new if value.nil?
+
+        raw_size = value[:size]
+        raw_align = value[:align]
+        new(
+          size: raw_size.is_a?(Numeric) ? raw_size : nil,
+          align: raw_align.is_a?(Symbol) ? raw_align : raw_align.is_a?(String) ? raw_align.to_sym : :center
+        )
+      end
+    end
+  end
+end

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

@@ -1,9 +1,27 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Tabs
     module Item
       class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        IconValue = T.type_alias { T.nilable(T.any(Symbol, ViewComponent::Base)) }
+
+        sig do
+          params(
+            key: Types::StringOrSymbol,
+            label: T.nilable(Types::Renderable),
+            icon: IconValue,
+            disabled: T::Boolean,
+            closable: T::Boolean,
+            close_icon: IconValue,
+            force_render: T::Boolean,
+            parent: T.nilable(HakumiComponents::Tabs::Component),
+            html_options: Types::HtmlAttributeValue
+          ).void
+        end
         def initialize(
           key:,
           label: nil,
@@ -15,21 +33,39 @@ module HakumiComponents
           parent: nil,
           **html_options
         )
-          @key = key
-          @label = label
-          @icon = icon
-          @disabled = disabled
-          @closable = closable
-          @close_icon = close_icon
-          @force_render = force_render
-          @parent = parent
-          @html_options = html_options
-          @content = nil
+          @key = T.let(key, Types::StringOrSymbol)
+          @label = T.let(label, T.nilable(Types::Renderable))
+          @icon = T.let(icon, IconValue)
+          @disabled = T.let(disabled, T::Boolean)
+          @closable = T.let(closable, T::Boolean)
+          @close_icon = T.let(close_icon, IconValue)
+          @force_render = T.let(force_render, T::Boolean)
+          @parent = T.let(parent, T.nilable(HakumiComponents::Tabs::Component))
+          @html_options = T.let(html_options, Types::HtmlAttributes)
+          @content = T.let(nil, Types::RenderedContent)
         end
 
-        attr_reader :key, :label, :icon, :disabled, :closable, :close_icon, :force_render
-        attr_accessor :content
+        sig { returns(Types::StringOrSymbol) }
+        attr_reader :key
+
+        sig { returns(T.nilable(Types::Renderable)) }
+        attr_reader :label
+
+        sig { returns(IconValue) }
+        attr_reader :icon, :close_icon
+
+        sig { returns(T::Boolean) }
+        attr_reader :disabled, :closable, :force_render
+
+        sig { returns(Types::RenderedContent) }
+        attr_reader :content
+
+        sig { params(value: Types::RenderedContent).void }
+        def content=(value)
+          @content = value
+        end
 
+        sig { params(active: T::Boolean).returns(String) }
         def tab_classes(active)
           classes = [ "hakumi-tabs-tab" ]
           classes << "hakumi-tabs-tab-active" if active
@@ -38,6 +74,7 @@ module HakumiComponents
           classes.join(" ")
         end
 
+        sig { params(active: T::Boolean).returns(Types::HtmlAttributes) }
         def tab_attributes(active)
           base_attrs = {
             class: tab_classes(active),
@@ -58,6 +95,7 @@ module HakumiComponents
           merge_attributes(base_attrs, @html_options.except(:class))
         end
 
+        sig { params(active: T::Boolean).returns(String) }
         def pane_classes(active)
           classes = [ "hakumi-tabs-tabpane" ]
           classes << "hakumi-tabs-tabpane-active" if active
@@ -65,6 +103,7 @@ module HakumiComponents
           classes.join(" ")
         end
 
+        sig { params(active: T::Boolean).returns(Types::HtmlAttributes) }
         def pane_attributes(active)
           {
             class: pane_classes(active),
@@ -78,8 +117,29 @@ module HakumiComponents
           }
         end
 
+        sig { returns(Symbol) }
         def render_close_icon
-          @close_icon || :close
+          icon = @close_icon
+          return icon if icon.is_a?(Symbol)
+
+          :close
+        end
+
+        sig { returns(Types::RenderedContent) }
+        def display_label
+          label_value = @label
+          return @key.to_s if label_value.nil?
+          return label_value if label_value.is_a?(String) || label_value.is_a?(ActiveSupport::SafeBuffer)
+
+          render(label_value)
+        end
+
+        sig { returns(T.nilable(ViewComponent::Base)) }
+        def icon_component
+          raw_icon = @icon
+          return nil if raw_icon.nil?
+
+          raw_icon.is_a?(Symbol) ? HakumiComponents::Icon::Component.new(name: raw_icon) : raw_icon
         end
       end
     end