hakumi_components 0.1.18.pre → 0.1.19.pre

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

@@ -1,17 +1,34 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module FloatButton
     class Component < HakumiComponents::BaseComponent
-      TYPES = [ :default, :primary ].freeze
-      SHAPES = [ :circle, :square ].freeze
-      PLACEMENTS = {
-        bottom_right: { bottom: 24, right: 24 },
-        bottom_left: { bottom: 24, left: 24 },
-        top_right: { top: 24, right: 24 },
-        top_left: { top: 24, left: 24 }
-      }.freeze
-
+      extend T::Sig
+
+      IconValue = T.type_alias { T.nilable(T.any(String, Symbol, ViewComponent::Base, ViewComponent::Slot, ActiveSupport::SafeBuffer)) }
+      BadgeCount = T.type_alias { T.nilable(T.any(Integer, Float, String)) }
+      TYPES = T.let([ :default, :primary ].freeze, T::Array[Symbol])
+      SHAPES = T.let([ :circle, :square ].freeze, T::Array[Symbol])
+
+      sig do
+        params(
+          icon: IconValue,
+          description: T.nilable(String),
+          tooltip: T.nilable(String),
+          href: T.nilable(String),
+          target: T.nilable(String),
+          shape: Symbol,
+          type: Symbol,
+          danger: T::Boolean,
+          badge: T.nilable(Types::HtmlAttributes),
+          floating: T::Boolean,
+          placement: Symbol,
+          offset: T.nilable(HakumiComponents::FloatButton::PositionConfig::OffsetMap),
+          button_options: Types::HtmlAttributes,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
       def initialize(
         icon: :plus,
         description: nil,
@@ -28,38 +45,38 @@ module HakumiComponents
         button_options: {},
         **html_options
       )
-        @icon = icon
-        @description = description
-        @tooltip = tooltip
-        @href = href
-        @target = target
-        @shape = shape
-        @type = type
-        @danger = danger
-        @badge = badge
-        @floating = floating
-        @placement = placement
-        @offset = offset
-        @button_options = button_options
-        @html_options = html_options
+        @icon = T.let(icon, IconValue)
+        @description = T.let(description, T.nilable(String))
+        @tooltip = T.let(tooltip, T.nilable(String))
+        @href = T.let(href, T.nilable(String))
+        @target = T.let(target, T.nilable(String))
+        @shape = T.let(shape, Symbol)
+        @type = T.let(type, Symbol)
+        @danger = T.let(danger, T::Boolean)
+        @badge = T.let(badge, T.nilable(Types::HtmlAttributes))
+        @position = T.let(HakumiComponents::FloatButton::PositionConfig.new(floating: floating, placement: placement, offset: offset), HakumiComponents::FloatButton::PositionConfig)
+        @button_options = T.let(button_options, Types::HtmlAttributes)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
 
         validate_props!
       end
 
+      sig { returns(Types::RenderedContent) }
       def call
         wrap_with_badge(float_button_markup)
       end
 
       private
 
+      sig { void }
       def validate_props!
         validate_inclusion!(:shape, SHAPES)
         validate_inclusion!(:type, TYPES)
-        validate_inclusion!(:placement, PLACEMENTS.keys)
         validate_description_support!
       end
 
-      def float_button_markup(floating: @floating)
+      sig { params(floating: T::Boolean).returns(ActiveSupport::SafeBuffer) }
+      def float_button_markup(floating: @position.floating)
         body_tag = interactive_tag
 
         content_tag(:div, root_attributes(floating)) do
@@ -77,30 +94,30 @@ module HakumiComponents
         end
       end
 
+      sig { returns(Symbol) }
       def interactive_tag
         @href.present? ? :a : :button
       end
 
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
       def icon_element
-        return nil unless @icon
-
-        icon_markup = if @icon.is_a?(String) || @icon.is_a?(Symbol)
-          render HakumiComponents::Icon::Component.new(name: @icon)
-        else
-          @icon
-        end
+        icon_markup = resolved_icon_markup
+        return nil if icon_markup.nil?
 
-        content_tag(:span, icon_markup, class: "hakumi-float-button-icon")
+        content_tag(:span, class: "hakumi-float-button-icon") { icon_markup }
       end
 
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
       def description_element
         return nil if @description.blank?
 
         tag.span(@description, class: "hakumi-float-button-description")
       end
 
+      sig { params(floating: T::Boolean).returns(Types::HtmlAttributes) }
       def root_attributes(floating)
-        base_attrs = {
+        position_style = floating ? @position.style : nil
+        base_attrs = T.let({
           class: class_names(
             "float-button",
             {
@@ -109,24 +126,25 @@ module HakumiComponents
               primary: (@type == :primary),
               danger: @danger,
               static: !floating,
-              "with-description": @description.present?
+              'with-description': @description.present?
             }
           ),
-          style: floating ? floating_style : nil
-        }
+          style: position_style
+        }, Types::HtmlAttributes)
 
         custom_style = @html_options[:style]
         merged = merge_attributes(base_attrs, @html_options.except(:style))
-        merged[:style] = merge_styles(base_attrs[:style], custom_style)
+        merged[:style] = merge_styles(position_style, custom_style)
         merged
       end
 
+      sig { params(tag_name: Symbol).returns(Types::HtmlAttributes) }
       def body_attributes(tag_name)
-        attrs = {
+        attrs = T.let({
           class: "hakumi-float-button-button",
-          "aria-label": @tooltip || @description,
+          'aria-label': @tooltip || @description,
           title: @tooltip
-        }
+        }, Types::HtmlAttributes)
 
         if tag_name == :button
           attrs[:type] = "button"
@@ -143,34 +161,12 @@ module HakumiComponents
         merged
       end
 
-      def floating_style
-        return nil unless @floating
-
-        resolved = resolved_offset
-        styles = [ "position: fixed", "z-index: 1000" ]
-        resolved.each do |key, value|
-          styles << "#{key}: #{dimension(value)}"
-        end
-
-        styles.join("; ")
-      end
-
-      def resolved_offset
-        placement_offset = PLACEMENTS[@placement] || PLACEMENTS[:bottom_right]
-        custom_offset = @offset || {}
-        placement_offset.merge(custom_offset).compact
-      end
-
-      def dimension(value)
-        return value if value.is_a?(String)
-
-        "#{value}px"
-      end
-
+      sig { returns(Types::RenderedContent) }
       def slot_content
         content if content?
       end
 
+      sig { void }
       def validate_description_support!
         return if @description.blank?
         return if @shape == :square
@@ -178,25 +174,115 @@ module HakumiComponents
         raise ArgumentError, "description is only supported when shape is :square"
       end
 
+      sig { params(markup: Types::RenderedContent).returns(Types::RenderedContent) }
       def wrap_with_badge(markup)
-        return markup unless @badge.present?
-
-        badge_options = @badge.is_a?(Hash) ? @badge.deep_dup : {}
+        return markup if @badge.nil? || @badge.empty?
 
-        if @floating
-          badge_options[:style] = merge_styles(badge_options[:style], floating_style)
+        if @position.floating
           button_markup = float_button_markup(floating: false)
-          render(HakumiComponents::Badge::Component.new(**badge_options)) { button_markup }
+          render(badge_component(style: merge_styles(badge_html_style, @position.style))) { button_markup }
         else
-          render(HakumiComponents::Badge::Component.new(**badge_options)) { markup }
+          render(badge_component(style: badge_html_style)) { markup }
         end
       end
 
+      sig { params(styles: T.nilable(Types::HtmlAttributeValue)).returns(T.nilable(String)) }
       def merge_styles(*styles)
-        styles.compact!
-        return nil if styles.empty?
+        entries = styles.compact.map(&:to_s)
+        return nil if entries.empty?
+
+        entries.join("; ")
+      end
+
+      sig { returns(T.nilable(Types::RenderedContent)) }
+      def resolved_icon_markup
+        return nil if @icon.nil?
+        return render HakumiComponents::Icon::Component.new(name: @icon) if @icon.is_a?(String) || @icon.is_a?(Symbol)
+
+        render_value(@icon)
+      end
+
+      sig { params(style: T.nilable(String)).returns(HakumiComponents::Badge::Component) }
+      def badge_component(style:)
+        HakumiComponents::Badge::Component.new(
+          count: badge_count,
+          dot: badge_dot?,
+          overflow_count: badge_overflow_count,
+          status: badge_status,
+          text: badge_text,
+          color: badge_color,
+          show_zero: badge_show_zero?,
+          icon: badge_icon,
+          **badge_html_options(style)
+        )
+      end
+
+      sig { returns(BadgeCount) }
+      def badge_count
+        value = @badge&.fetch(:count, nil)
+        return value if value.is_a?(Integer) || value.is_a?(Float) || value.is_a?(String)
+
+        nil
+      end
+
+      sig { returns(T::Boolean) }
+      def badge_dot?
+        self.class.boolean_html_param(@badge&.fetch(:dot, nil)) == true
+      end
+
+      sig { returns(Integer) }
+      def badge_overflow_count
+        self.class.integer_html_param(@badge&.fetch(:overflow_count, nil)) || 99
+      end
+
+      sig { returns(HakumiComponents::Badge::Component::Status) }
+      def badge_status
+        value = @badge&.fetch(:status, nil)
+        return value if value.is_a?(String) || value.is_a?(Symbol)
+
+        nil
+      end
+
+      sig { returns(T.nilable(String)) }
+      def badge_text
+        self.class.string_html_param(@badge&.fetch(:text, nil))
+      end
+
+      sig { returns(T.nilable(String)) }
+      def badge_color
+        self.class.string_html_param(@badge&.fetch(:color, nil))
+      end
+
+      sig { returns(T::Boolean) }
+      def badge_show_zero?
+        self.class.boolean_html_param(@badge&.fetch(:show_zero, nil)) == true
+      end
+
+      sig { returns(HakumiComponents::Badge::Component::IconName) }
+      def badge_icon
+        value = @badge&.fetch(:icon, nil)
+        return value if value.is_a?(String) || value.is_a?(Symbol)
+
+        nil
+      end
+
+      sig { returns(T.nilable(String)) }
+      def badge_html_style
+        @badge.nil? ? nil : html_style(@badge)
+      end
 
-        styles.join("; ")
+      sig { params(style: T.nilable(String)).returns(Types::HtmlAttributes) }
+      def badge_html_options(style)
+        return {} if @badge.nil?
+
+        options = T.let({}, Types::HtmlAttributes)
+        extra_classes = html_classes(@badge)
+        options[:class] = extra_classes unless extra_classes.nil?
+        options[:style] = style unless style.nil?
+        data = data_attributes_from(@badge[:data])
+        options[:data] = data unless data.empty?
+        options[:id] = @badge[:id] if @badge[:id].is_a?(String)
+        options
       end
     end
   end

data/app/components/hakumi_components/float_button/group/component.rb

@@ -1,15 +1,35 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module FloatButton
     module Group
       class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
         SHAPES = HakumiComponents::FloatButton::Component::SHAPES
         TYPES = HakumiComponents::FloatButton::Component::TYPES
-        TRIGGERS = [ :click, :hover ].freeze
-        EXPAND_DIRECTIONS = [ :top, :right, :bottom, :left ].freeze
-        PLACEMENTS = HakumiComponents::FloatButton::Component::PLACEMENTS
-
+        TRIGGERS = T.let([ :click, :hover ].freeze, T::Array[Symbol])
+        EXPAND_DIRECTIONS = T.let([ :top, :right, :bottom, :left ].freeze, T::Array[Symbol])
+
+        sig do
+          params(
+            icon: HakumiComponents::FloatButton::Component::IconValue,
+            tooltip: T.nilable(String),
+            shape: Symbol,
+            type: Symbol,
+            trigger: Symbol,
+            open: T.nilable(T::Boolean),
+            default_open: T::Boolean,
+            expand_direction: Symbol,
+            items: T::Array[T.any(HakumiComponents::FloatButton::ItemSpec::InputAttributes, HakumiComponents::FloatButton::ItemSpec)],
+            floating: T::Boolean,
+            placement: Symbol,
+            offset: T.nilable(HakumiComponents::FloatButton::PositionConfig::OffsetMap),
+            button_options: Types::HtmlAttributes,
+            html_options: Types::HtmlAttributeValue
+          ).void
+        end
         def initialize(
           icon: :plus,
           tooltip: nil,
@@ -26,24 +46,23 @@ module HakumiComponents
           button_options: {},
           **html_options
         )
-          @icon = icon
-          @tooltip = tooltip
-          @shape = shape
-          @type = type
-          @trigger = trigger
-          @open = open
-          @default_open = default_open
-          @expand_direction = expand_direction
-          @items = items
-          @floating = floating
-          @placement = placement
-          @offset = offset
-          @button_options = button_options
-          @html_options = html_options
+          @icon = T.let(icon, HakumiComponents::FloatButton::Component::IconValue)
+          @tooltip = T.let(tooltip, T.nilable(String))
+          @shape = T.let(shape, Symbol)
+          @type = T.let(type, Symbol)
+          @trigger = T.let(trigger, Symbol)
+          @open = T.let(open, T.nilable(T::Boolean))
+          @default_open = T.let(default_open, T::Boolean)
+          @expand_direction = T.let(expand_direction, Symbol)
+          @items = T.let(HakumiComponents::FloatButton::ItemSpec.coerce_all(items), T::Array[HakumiComponents::FloatButton::ItemSpec])
+          @position = T.let(HakumiComponents::FloatButton::PositionConfig.new(floating: floating, placement: placement, offset: offset), HakumiComponents::FloatButton::PositionConfig)
+          @button_options = T.let(button_options, Types::HtmlAttributes)
+          @html_options = T.let(html_options, Types::HtmlAttributes)
 
           validate_props!
         end
 
+        sig { returns(Types::RenderedContent) }
         def call
           content_tag(:div, root_attributes) do
             safe_join([
@@ -55,47 +74,46 @@ module HakumiComponents
 
         private
 
+        sig { void }
         def validate_props!
           validate_inclusion!(:shape, SHAPES)
           validate_inclusion!(:type, TYPES)
           validate_inclusion!(:trigger, TRIGGERS)
           validate_inclusion!(:expand_direction, EXPAND_DIRECTIONS)
-          validate_inclusion!(:placement, PLACEMENTS.keys)
         end
 
+        sig { returns(Types::HtmlAttributes) }
         def root_attributes
-          base_attrs = {
+          base_data = T.let({}, Types::DataAttributes)
+          apply_controller_data!(base_data) if use_controller?
+
+          base_attrs = T.let({
             class: class_names(
               "float-button-group",
               {
                 open: open_for_click?,
-                "trigger-hover": (@trigger == :hover),
+                'trigger-hover': (@trigger == :hover),
                 "expand-#{@expand_direction}": true,
-                static: !@floating
+                static: !@position.floating
               }
             ),
-            style: floating_style
-          }
+            style: @position.style,
+            data: base_data
+          }, Types::HtmlAttributes)
 
-          merged = merge_attributes(base_attrs, @html_options.except(:data))
-          merged[:data] = base_attrs_data.merge(@html_options[:data] || {})
-          apply_controller_data!(merged[:data]) if use_controller?
-          merged
-        end
-
-        def base_attrs_data
-          {
-            trigger: @trigger,
-            "expand-direction": @expand_direction
-          }
+          merge_attributes(base_attrs, @html_options)
         end
 
+        sig { params(data: Types::DataAttributes).void }
         def apply_controller_data!(data)
-          data[:controller] = append_controller(data[:controller], "hakumi--float-button-group")
-          data["hakumi--float-button-group-default-open-value"] = @default_open
-          data["hakumi--float-button-group-trigger-value"] = @trigger
+          controller_data = stimulus_attrs("hakumi--float-button-group", {
+            default_open: @default_open,
+            trigger: @trigger
+          })
+          controller_data.each { |key, value| data[key] = value }
         end
 
+        sig { returns(Types::RenderedContent) }
         def trigger_button
           render HakumiComponents::FloatButton::Component.new(
             icon: @icon,
@@ -109,118 +127,87 @@ module HakumiComponents
           )
         end
 
+        sig { returns(Types::HtmlAttributes) }
         def trigger_button_options
           options = @button_options.deep_dup
           return options unless attach_click_action?
 
-          data = options[:data] || {}
-          data[:action] = append_action(data[:action], "click->hakumi--float-button-group#toggle")
+          data = data_attributes_from(options[:data])
+          data[:action] = append_data_token(data[:action], "click->hakumi--float-button-group#toggle")
           options[:data] = data
           options
         end
 
+        sig { returns(ActiveSupport::SafeBuffer) }
         def actions_wrapper
-          content_tag(:div, actions_attributes) do
-            actions_content
-          end
+          content_tag(:div, actions_content, actions_attributes)
         end
 
+        sig { returns(Types::HtmlAttributes) }
         def actions_attributes
-          attrs = {
+          attrs = T.let({
             class: class_names(
               "float-button-group-actions",
               {
                 open: open_for_click?,
-                "has-content": content?,
+                'has-content': content?,
                 "expand-#{@expand_direction}": true
               }
             )
-          }
-
-          attrs[:data] = {
-            "hakumi--float-button-group-target": "actions"
-          } if use_controller?
+          }, Types::HtmlAttributes)
 
+          attrs[:data] = { 'hakumi--float-button-group-target': "actions" } if use_controller?
           attrs
         end
 
+        sig { returns(Types::RenderedContent) }
         def actions_content
           return content if content?
 
           safe_join(@items.map { |item| render_item(item) })
         end
 
+        sig { params(item: HakumiComponents::FloatButton::ItemSpec).returns(Types::RenderedContent) }
         def render_item(item)
-          item_options = item.deep_symbolize_keys
-          item_html_options = item_options.delete(:html_options) { {} }
-
-          component_options = {
+          render HakumiComponents::FloatButton::Component.new(
+            icon: item.icon,
+            description: item.description,
+            tooltip: item.tooltip,
+            href: item.href,
+            target: item.target,
             shape: @shape,
-            type: item_options[:type] || @type,
+            type: item.type,
+            danger: item.danger,
             floating: false,
-            placement: :bottom_right
-          }.merge(item_options)
-
-          merged_html_options = { class: "hakumi-float-button-group-item" }.merge(item_html_options)
-
-          render HakumiComponents::FloatButton::Component.new(**component_options, **merged_html_options)
-        end
-
-        def floating_style
-          return nil unless @floating
-
-          resolved = resolved_offset
-          styles = [ "position: fixed", "z-index: 1000" ]
-          resolved.each do |key, value|
-            styles << "#{key}: #{dimension(value)}"
-          end
-
-          styles.join("; ")
-        end
-
-        def resolved_offset
-          placement_offset = PLACEMENTS[@placement] || PLACEMENTS[:bottom_right]
-          custom_offset = @offset || {}
-          placement_offset.merge(custom_offset).compact
-        end
-
-        def dimension(value)
-          return value if value.is_a?(String)
-
-          "#{value}px"
+            placement: :bottom_right,
+            **{ class: "hakumi-float-button-group-item" }.merge(item.html_options)
+          )
         end
 
+        sig { returns(T::Boolean) }
         def open_state?
-          controlled? ? !!@open : @default_open
+          controlled? ? @open == true : @default_open
         end
 
+        sig { returns(T::Boolean) }
         def controlled?
           !@open.nil?
         end
 
+        sig { returns(T::Boolean) }
         def use_controller?
           (@trigger == :click && !controlled?) || (@trigger == :hover)
         end
 
+        sig { returns(T::Boolean) }
         def attach_click_action?
           @trigger == :click && !controlled?
         end
 
+        sig { returns(T::Boolean) }
         def open_for_click?
           @trigger == :click && open_state?
         end
-
-        def append_controller(existing, name)
-          return name unless existing.present?
-
-          [ existing, name ].join(" ")
-        end
-
-        def append_action(existing, action)
-          return action unless existing.present?
-
-          [ existing, action ].join(" ")
-        end
       end
     end
   end