hakumi_components 0.1.17.pre → 0.1.19.pre

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

@@ -0,0 +1,289 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module FloatButton
+    class Component < HakumiComponents::BaseComponent
+      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,
+        tooltip: nil,
+        href: nil,
+        target: nil,
+        shape: :circle,
+        type: :default,
+        danger: false,
+        badge: nil,
+        floating: true,
+        placement: :bottom_right,
+        offset: nil,
+        button_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_description_support!
+      end
+
+      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
+          content_tag(body_tag, body_attributes(body_tag)) do
+            content_tag(:span, class: "hakumi-float-button-body") do
+              content_tag(:span, class: "hakumi-float-button-content") do
+                safe_join([
+                  icon_element,
+                  description_element,
+                  slot_content
+                ].compact)
+              end
+            end
+          end
+        end
+      end
+
+      sig { returns(Symbol) }
+      def interactive_tag
+        @href.present? ? :a : :button
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def icon_element
+        icon_markup = resolved_icon_markup
+        return nil if icon_markup.nil?
+
+        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)
+        position_style = floating ? @position.style : nil
+        base_attrs = T.let({
+          class: class_names(
+            "float-button",
+            {
+              circle: (@shape == :circle),
+              square: (@shape == :square),
+              primary: (@type == :primary),
+              danger: @danger,
+              static: !floating,
+              'with-description': @description.present?
+            }
+          ),
+          style: position_style
+        }, Types::HtmlAttributes)
+
+        custom_style = @html_options[:style]
+        merged = merge_attributes(base_attrs, @html_options.except(: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 = T.let({
+          class: "hakumi-float-button-button",
+          'aria-label': @tooltip || @description,
+          title: @tooltip
+        }, Types::HtmlAttributes)
+
+        if tag_name == :button
+          attrs[:type] = "button"
+        else
+          attrs[:href] = @href
+          attrs[:target] = @target if @target
+          attrs[:role] = "button"
+          attrs[:rel] = "noopener noreferrer" if @target == "_blank"
+        end
+
+        custom_style = @button_options[:style]
+        merged = merge_attributes(attrs, @button_options.except(:style))
+        merged[:style] = merge_styles(nil, custom_style)
+        merged
+      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
+
+        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 if @badge.nil? || @badge.empty?
+
+        if @position.floating
+          button_markup = float_button_markup(floating: false)
+          render(badge_component(style: merge_styles(badge_html_style, @position.style))) { button_markup }
+        else
+          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)
+        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
+
+      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
+end

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

@@ -0,0 +1,214 @@
+# 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 = 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,
+          shape: :circle,
+          type: :default,
+          trigger: :click,
+          open: nil,
+          default_open: false,
+          expand_direction: :top,
+          items: [],
+          floating: true,
+          placement: :bottom_right,
+          offset: nil,
+          button_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([
+              trigger_button,
+              actions_wrapper
+            ])
+          end
+        end
+
+        private
+
+        sig { void }
+        def validate_props!
+          validate_inclusion!(:shape, SHAPES)
+          validate_inclusion!(:type, TYPES)
+          validate_inclusion!(:trigger, TRIGGERS)
+          validate_inclusion!(:expand_direction, EXPAND_DIRECTIONS)
+        end
+
+        sig { returns(Types::HtmlAttributes) }
+        def root_attributes
+          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),
+                "expand-#{@expand_direction}": true,
+                static: !@position.floating
+              }
+            ),
+            style: @position.style,
+            data: base_data
+          }, Types::HtmlAttributes)
+
+          merge_attributes(base_attrs, @html_options)
+        end
+
+        sig { params(data: Types::DataAttributes).void }
+        def apply_controller_data!(data)
+          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,
+            tooltip: @tooltip,
+            shape: @shape,
+            type: @type,
+            floating: false,
+            placement: :bottom_right,
+            button_options: trigger_button_options,
+            **{ class: "hakumi-float-button-group-trigger" }
+          )
+        end
+
+        sig { returns(Types::HtmlAttributes) }
+        def trigger_button_options
+          options = @button_options.deep_dup
+          return options unless attach_click_action?
+
+          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_content, actions_attributes)
+        end
+
+        sig { returns(Types::HtmlAttributes) }
+        def actions_attributes
+          attrs = T.let({
+            class: class_names(
+              "float-button-group-actions",
+              {
+                open: open_for_click?,
+                'has-content': content?,
+                "expand-#{@expand_direction}": true
+              }
+            )
+          }, 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)
+          render HakumiComponents::FloatButton::Component.new(
+            icon: item.icon,
+            description: item.description,
+            tooltip: item.tooltip,
+            href: item.href,
+            target: item.target,
+            shape: @shape,
+            type: item.type,
+            danger: item.danger,
+            floating: false,
+            placement: :bottom_right,
+            **{ class: "hakumi-float-button-group-item" }.merge(item.html_options)
+          )
+        end
+
+        sig { returns(T::Boolean) }
+        def open_state?
+          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
+      end
+    end
+  end
+end

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

@@ -0,0 +1,133 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module FloatButton
+    module GroupCluster
+      class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        DIRECTIONS = T.let([ :horizontal, :vertical ].freeze, T::Array[Symbol])
+        GAP_SIZES = T.let({
+          small: "8px",
+          default: "16px",
+          large: "24px"
+        }.freeze, T::Hash[Symbol, String])
+
+        PLACEMENTS = HakumiComponents::FloatButton::PositionConfig::PLACEMENTS
+
+        sig do
+          params(
+            groups: T::Array[T.any(HakumiComponents::FloatButton::GroupSpec::InputAttributes, HakumiComponents::Types::Renderable, HakumiComponents::FloatButton::GroupSpec::RenderFactory, HakumiComponents::FloatButton::GroupSpec)],
+            placement: Symbol,
+            offset: T.nilable(HakumiComponents::FloatButton::PositionConfig::OffsetMap),
+            direction: Symbol,
+            gap: T.any(Symbol, Numeric, String),
+            floating: T::Boolean,
+            html_options: Types::HtmlAttributeValue
+          ).void
+        end
+        def initialize(
+          groups:,
+          placement: :bottom_right,
+          offset: nil,
+          direction: :horizontal,
+          gap: :default,
+          floating: true,
+          **html_options
+        )
+          @groups = T.let(HakumiComponents::FloatButton::GroupSpec.coerce_all(Array(groups)), T::Array[HakumiComponents::FloatButton::GroupSpec])
+          @direction = T.let(direction, Symbol)
+          @gap = T.let(gap, T.any(Symbol, Numeric, String))
+          @position = T.let(HakumiComponents::FloatButton::PositionConfig.new(floating: floating, placement: placement, offset: offset), HakumiComponents::FloatButton::PositionConfig)
+          @html_options = T.let(html_options, Types::HtmlAttributes)
+
+          validate_inclusion!(:direction, DIRECTIONS)
+          validate_gap_symbol!
+        end
+
+        sig { returns(Types::RenderedContent) }
+        def call
+          return "" if @groups.empty?
+
+          content_tag(:div, cluster_attributes) do
+            safe_join(@groups.map { |group_spec| render_group(group_spec) })
+          end
+        end
+
+        private
+
+        sig { returns(Types::HtmlAttributes) }
+        def cluster_attributes
+          base_attrs = T.let({
+            class: class_names(
+              "float-button-group-cluster",
+              {
+                "direction-#{@direction}": true,
+                static: !@position.floating
+              }
+            )
+          }, Types::HtmlAttributes)
+
+          style_value = cluster_style
+          base_attrs[:style] = style_value if style_value.present?
+
+          merge_attributes(base_attrs, @html_options.except(:data)).tap do |attrs|
+            attrs[:data] = @html_options[:data] if @html_options[:data]
+          end
+        end
+
+        sig { returns(T.nilable(String)) }
+        def cluster_style
+          styles = [ placement_style, gap_style ].compact
+          styles.join("; ").presence
+        end
+
+        sig { returns(T.nilable(String)) }
+        def placement_style
+          @position.style
+        end
+
+        sig { returns(T.nilable(String)) }
+        def gap_style
+          value = case @gap
+          when Symbol then GAP_SIZES[@gap]
+          when Numeric then "#{@gap}px"
+          else @gap
+          end
+
+          return nil if value.blank?
+
+          "gap: #{value}"
+        end
+
+        sig { params(group_spec: HakumiComponents::FloatButton::GroupSpec).returns(ActiveSupport::SafeBuffer) }
+        def render_group(group_spec)
+          content_tag(:div, class: "hakumi-float-button-group-cluster-item") do
+            render_group_content(group_spec)
+          end
+        end
+
+        sig { params(group_spec: HakumiComponents::FloatButton::GroupSpec).returns(ActiveSupport::SafeBuffer) }
+        def render_group_content(group_spec)
+          renderable = group_spec.resolve_renderable
+          return render(renderable) if renderable
+
+          component = group_spec.build_group_component
+          content_block = group_spec.content
+          return render(component) unless content_block
+
+          render(component) { content_block.call }
+        end
+
+        sig { void }
+        def validate_gap_symbol!
+          return unless @gap.is_a?(Symbol)
+
+          valid_keys = GAP_SIZES.keys
+          raise ArgumentError, "gap must be one of #{valid_keys.inspect}, got #{@gap.inspect}" unless valid_keys.include?(@gap)
+        end
+      end
+    end
+  end
+end