hakumi_components 0.1.17.pre → 0.1.19.pre

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

@@ -0,0 +1,175 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Image
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      SizeInput = T.type_alias { BaseComponent::DimensionInput }
+
+      sig do
+        params(
+          src: String,
+          alt: T.nilable(String),
+          width: SizeInput,
+          height: SizeInput,
+          fallback: T.nilable(String),
+          placeholder: T::Boolean,
+          preview: T::Boolean,
+          preview_src: T.nilable(String),
+          mask_closable: T::Boolean,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        src:,
+        alt: nil,
+        width: nil,
+        height: nil,
+        fallback: nil,
+        placeholder: false,
+        preview: true,
+        preview_src: nil,
+        mask_closable: false,
+        **html_options
+      )
+        @src = T.let(src, String)
+        @alt = T.let(alt, T.nilable(String))
+        @width = T.let(width, SizeInput)
+        @height = T.let(height, SizeInput)
+        @fallback = T.let(fallback, T.nilable(String))
+        @placeholder = T.let(placeholder, T::Boolean)
+        @preview = T.let(preview, T::Boolean)
+        @preview_src = T.let(preview_src, T.nilable(String))
+        @mask_closable = T.let(mask_closable, T::Boolean)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+      end
+
+      sig { returns(String) }
+      attr_reader :src
+
+      sig { returns(T.nilable(String)) }
+      attr_reader :alt, :fallback, :preview_src
+
+      sig { returns(T::Boolean) }
+      def preview_enabled?
+        @preview
+      end
+
+      sig { returns(String) }
+      def preview_image_src
+        @preview_src || @src
+      end
+
+      sig { returns(T::Boolean) }
+      def placeholder?
+        @placeholder
+      end
+
+      private
+
+      sig { returns(String) }
+      def wrapper_classes
+        component_classes("image", { placeholder: placeholder? }, @html_options)
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        attrs = T.let({ class: wrapper_classes, data: data_attributes }, Types::HtmlAttributes)
+        attrs[:style] = size_style if @width || @height
+        merge_attributes(attrs, @html_options.except(:class))
+      end
+
+      sig { returns(Types::DataAttributes) }
+      def data_attributes
+        data = T.let({
+          controller: "hakumi--image",
+          hakumi__image_src_value: @src,
+          hakumi__image_preview_src_value: preview_image_src,
+          hakumi__image_alt_value: @alt || "",
+          hakumi__image_fallback_value: @fallback || "",
+          hakumi__image_mask_closable_value: @mask_closable
+        }, Types::DataAttributes)
+
+        extra = @html_options[:data]
+        if extra.is_a?(Hash)
+          extra.each { |k, v| data[k] = v }
+        end
+
+        data
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def img_attributes
+        action_str = "error->hakumi--image#handleError load->hakumi--image#handleLoad"
+        action_str += " click->hakumi--image#openPreview" if preview_enabled?
+
+        attrs = T.let({
+          src: @src,
+          alt: @alt,
+          class: "hakumi-image-img",
+          data: {
+            hakumi__image_target: "img",
+            action: action_str
+          }
+        }, Types::HtmlAttributes)
+
+        attrs[:width] = @width if @width
+        attrs[:height] = @height if @height
+
+        attrs
+      end
+
+      sig { returns(String) }
+      def size_style
+        styles = T.let([], T::Array[String])
+        w = @width
+        h = @height
+        styles << "width: #{normalize_size(w)}" if w
+        styles << "height: #{normalize_size(h)}" if h
+        styles.join("; ")
+      end
+
+      sig { params(size: SizeInput).returns(String) }
+      def normalize_size(size)
+        size.is_a?(Numeric) ? "#{size}px" : size.to_s
+      end
+
+      sig { returns(String) }
+      def preview_text
+        t_default(:preview, default: "Preview")
+      end
+
+      sig { returns(String) }
+      def flip_vertical_title
+        t_default(:flip_vertical, default: "Flip Vertical")
+      end
+
+      sig { returns(String) }
+      def flip_horizontal_title
+        t_default(:flip_horizontal, default: "Flip Horizontal")
+      end
+
+      sig { returns(String) }
+      def rotate_left_title
+        t_default(:rotate_left, default: "Rotate Left")
+      end
+
+      sig { returns(String) }
+      def rotate_right_title
+        t_default(:rotate_right, default: "Rotate Right")
+      end
+
+      sig { returns(String) }
+      def zoom_out_title
+        t_default(:zoom_out, default: "Zoom Out")
+      end
+
+      sig { returns(String) }
+      def zoom_in_title
+        t_default(:zoom_in, default: "Zoom In")
+      end
+    end
+  end
+end

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

@@ -3,7 +3,7 @@
     <% images.each_with_index do |image, index| %>
       <div class="hakumi-image-preview-group-item" 
            data-index="<%= index %>" 
-           data-action="click->hakumi--image-preview-group#openPreview">
+           data-action="click->hakumi--image#openPreview">
         <%= image %>
       </div>
     <% end %>
@@ -21,19 +21,19 @@
         </div>
         <button class="hakumi-image-preview-close">
           <span class="hakumi-icon">
-            <%= render Hakumi::Icon::Component.new(name: 'close', theme: :outlined) %>
+            <%= render HakumiComponents::Icon::Component.new(name: 'close', theme: :outlined) %>
           </span>
         </button>
         
         <div class="hakumi-image-preview-nav-wrapper" style="display: none;">
           <button class="hakumi-image-preview-switch hakumi-image-preview-switch-left">
             <span class="hakumi-icon">
-              <%= render Hakumi::Icon::Component.new(name: 'left', theme: :outlined) %>
+              <%= render HakumiComponents::Icon::Component.new(name: 'left', theme: :outlined) %>
             </span>
           </button>
           <button class="hakumi-image-preview-switch hakumi-image-preview-switch-right">
             <span class="hakumi-icon">
-              <%= render Hakumi::Icon::Component.new(name: 'right', theme: :outlined) %>
+              <%= render HakumiComponents::Icon::Component.new(name: 'right', theme: :outlined) %>
             </span>
           </button>
           <div class="hakumi-image-preview-counter">
@@ -46,34 +46,34 @@
         <div class="hakumi-image-preview-operations">
           <button class="hakumi-image-preview-operations-operation" title="Flip Vertical">
             <span class="hakumi-icon" style="transform: rotate(90deg)">
-              <%= render Hakumi::Icon::Component.new(name: 'swap', theme: :outlined) %>
+              <%= render HakumiComponents::Icon::Component.new(name: 'swap', theme: :outlined) %>
             </span>
           </button>
           <button class="hakumi-image-preview-operations-operation" title="Flip Horizontal">
             <span class="hakumi-icon">
-              <%= render Hakumi::Icon::Component.new(name: 'swap', theme: :outlined) %>
+              <%= render HakumiComponents::Icon::Component.new(name: 'swap', theme: :outlined) %>
             </span>
           </button>
           <span class="hakumi-image-preview-operations-divider"></span>
           <button class="hakumi-image-preview-operations-operation" title="Rotate Left">
             <span class="hakumi-icon">
-              <%= render Hakumi::Icon::Component.new(name: 'rotate-left', theme: :outlined) %>
+              <%= render HakumiComponents::Icon::Component.new(name: 'rotate-left', theme: :outlined) %>
             </span>
           </button>
           <button class="hakumi-image-preview-operations-operation" title="Rotate Right">
             <span class="hakumi-icon">
-              <%= render Hakumi::Icon::Component.new(name: 'rotate-right', theme: :outlined) %>
+              <%= render HakumiComponents::Icon::Component.new(name: 'rotate-right', theme: :outlined) %>
             </span>
           </button>
           <span class="hakumi-image-preview-operations-divider"></span>
           <button class="hakumi-image-preview-operations-operation" title="Zoom Out">
             <span class="hakumi-icon">
-              <%= render Hakumi::Icon::Component.new(name: 'zoom-out', theme: :outlined) %>
+              <%= render HakumiComponents::Icon::Component.new(name: 'zoom-out', theme: :outlined) %>
             </span>
           </button>
           <button class="hakumi-image-preview-operations-operation" title="Zoom In">
              <span class="hakumi-icon">
-              <%= render Hakumi::Icon::Component.new(name: 'zoom-in', theme: :outlined) %>
+              <%= render HakumiComponents::Icon::Component.new(name: 'zoom-in', theme: :outlined) %>
             </span>
           </button>
         </div>

data/app/components/hakumi_components/image/preview_group/component.rb

@@ -0,0 +1,75 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Image
+    module PreviewGroup
+      class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        renders_many :images, ->(**kwargs) { HakumiComponents::Image::Component.new(**kwargs, preview: false) }
+
+        sig do
+          params(
+            items: T.nilable(T::Array[T.any(String, Types::HtmlAttributes, HakumiComponents::Image::PreviewGroup::Item)]),
+            preview: T::Boolean,
+            html_options: Types::HtmlAttributeValue
+          ).void
+        end
+        def initialize(items: nil, preview: true, **html_options)
+          @items = T.let(HakumiComponents::Image::PreviewGroup::Item.coerce_all(items), T::Array[HakumiComponents::Image::PreviewGroup::Item])
+          @preview = T.let(preview, T::Boolean)
+          @html_options = T.let(html_options, Types::HtmlAttributes)
+        end
+
+        sig { returns(T::Array[HakumiComponents::Image::PreviewGroup::Item]) }
+        attr_reader :items
+
+        sig { returns(T::Boolean) }
+        def preview_enabled?
+          @preview
+        end
+
+        sig { returns(T::Array[HakumiComponents::Image::PreviewGroup::Item]) }
+        def preview_items
+          return @items if @items.any?
+
+          images.filter_map { |image| preview_item_from_slot(image) }
+        end
+
+        private
+
+        sig { returns(String) }
+        def wrapper_classes
+          class_names("image-preview-group", {}, html_classes(@html_options))
+        end
+
+        sig { returns(Types::HtmlAttributes) }
+        def wrapper_attributes
+          attrs = T.let({ class: wrapper_classes, data: data_attributes }, Types::HtmlAttributes)
+          merge_attributes(attrs, @html_options.except(:class))
+        end
+
+        sig { returns(Types::DataAttributes) }
+        def data_attributes
+          return T.let({}, Types::DataAttributes) unless preview_enabled?
+
+          data = stimulus_attrs("hakumi--image", { items: preview_items.map(&:to_payload) })
+          extra = data_attributes_from(@html_options[:data])
+          return data if extra.empty?
+
+          data.merge(extra)
+        end
+
+        sig { params(image: T.any(HakumiComponents::Image::Component, ViewComponent::Slot)).returns(T.nilable(HakumiComponents::Image::PreviewGroup::Item)) }
+        def preview_item_from_slot(image)
+          raw_src = image.public_send(:preview_src) || image.public_send(:src)
+          return nil unless raw_src.is_a?(String) && raw_src.present?
+
+          raw_alt = image.public_send(:alt)
+          HakumiComponents::Image::PreviewGroup::Item.new(src: raw_src, alt: raw_alt.is_a?(String) ? raw_alt : nil)
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi_components/image/preview_group/item.rb

@@ -0,0 +1,48 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Image
+    module PreviewGroup
+      class Item
+        extend T::Sig
+
+        sig { params(src: String, alt: T.nilable(String)).void }
+        def initialize(src:, alt: nil)
+          @src = T.let(src, String)
+          @alt = T.let(alt, T.nilable(String))
+        end
+
+        sig { returns(String) }
+        attr_reader :src
+
+        sig { returns(T.nilable(String)) }
+        attr_reader :alt
+
+        sig { returns(T::Hash[Symbol, T.nilable(String)]) }
+        def to_payload
+          { src: @src, alt: @alt }
+        end
+
+        sig { params(items: T.nilable(T::Array[T.any(String, Types::HtmlAttributes, HakumiComponents::Image::PreviewGroup::Item)])).returns(T::Array[HakumiComponents::Image::PreviewGroup::Item]) }
+        def self.coerce_all(items)
+          return [] if items.nil?
+
+          items.map { |item| coerce(item) }
+        end
+
+        sig { params(item: T.any(String, Types::HtmlAttributes, HakumiComponents::Image::PreviewGroup::Item)).returns(HakumiComponents::Image::PreviewGroup::Item) }
+        def self.coerce(item)
+          return item if item.is_a?(HakumiComponents::Image::PreviewGroup::Item)
+          return new(src: item) if item.is_a?(String)
+
+          src = item[:src]
+          alt = item[:alt]
+          raise ArgumentError, "preview group item src is required" unless src.is_a?(String) && src.present?
+
+          new(src: src, alt: alt.is_a?(String) ? alt : nil)
+        end
+      end
+    end
+  end
+end

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

@@ -10,7 +10,7 @@
   <% end %>
 <% end %>
 
-<% if @standalone %>
+<% if standalone? %>
   <%= input_control %>
 <% else %>
   <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>

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

@@ -0,0 +1,261 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Input
+      class Component < HakumiComponents::BaseComponent
+        extend T::Sig
+
+        include HakumiComponents::Concerns::InputControl
+
+        InputType = T.type_alias { Types::HtmlKey }
+        IconName = T.type_alias { BaseComponent::SymbolInput }
+        AffixContent = T.type_alias { Types::RenderedContent }
+
+      sig do
+        params(
+          name: Types::FormFieldName,
+          label: T.nilable(String),
+          caption: T.nilable(String),
+          value: Types::FormFieldValue,
+          placeholder: T.nilable(String),
+          type: InputType,
+          size: Symbol,
+          disabled: T::Boolean,
+          readonly: T::Boolean,
+          required: T::Boolean,
+          prefix: Types::Renderable,
+          suffix: Types::Renderable,
+          prefix_icon: IconName,
+          suffix_icon: IconName,
+          allow_clear: T::Boolean,
+          maxlength: T.nilable(Integer),
+          standalone: T::Boolean,
+          rules: T.nilable(T::Array[Types::ValidationRule]),
+          errors: Types::FormFieldErrors,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        name:,
+        label: nil,
+        caption: nil,
+        value: nil,
+        placeholder: nil,
+        type: :text,
+        size: :default,
+        disabled: false,
+        readonly: false,
+        required: false,
+        prefix: nil,
+        suffix: nil,
+        prefix_icon: nil,
+        suffix_icon: nil,
+        allow_clear: false,
+        maxlength: nil,
+        standalone: true,
+        rules: nil,
+        errors: [],
+        **html_options
+      )
+        @name = T.let(name, Types::FormFieldName)
+        @label = label
+        @caption = caption
+        @value = value
+        @placeholder = placeholder
+        @type = T.let(type, InputType)
+        @size = size
+        @disabled = disabled
+        @readonly = readonly
+        @required = required
+        @prefix = prefix
+        @suffix = suffix
+        @prefix_icon = prefix_icon
+        @suffix_icon = suffix_icon
+        @allow_clear = allow_clear
+        @maxlength = maxlength
+        @standalone = standalone
+        @rules = T.let(rules, T.nilable(T::Array[Types::ValidationRule]))
+        @errors = T.let(errors, Types::FormFieldErrors)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+        initialize_input_control_contract!(
+          name: @name,
+          label: @label,
+          caption: @caption,
+          value: @value,
+          placeholder: @placeholder,
+          size: @size,
+          disabled: @disabled,
+          readonly: @readonly,
+          errors: @errors,
+          standalone: @standalone,
+          required: @required,
+          html_options: @html_options,
+          rules: @rules
+        )
+        validate_props!
+      end
+
+      private
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+      end
+
+      sig { returns(T::Boolean) }
+      def has_affix?
+        value_present?(@prefix) || value_present?(@suffix) || !@prefix_icon.nil? || !@suffix_icon.nil? || @allow_clear
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        class_names(
+          "input-affix-wrapper",
+          {
+            input_control_size => input_control_size != :default,
+            disabled: input_control_disabled
+          },
+          [ wrapper_class_name ]
+        )
+      end
+
+      sig { returns(String) }
+      def input_classes
+        class_names(
+          "input",
+          {
+            input_control_size => input_control_size != :default
+          },
+          [ html_class_name ]
+        )
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def input_attributes
+        attrs = T.let({
+          type: @type,
+          name: form_field_name,
+          id: input_id,
+          value: input_control_value,
+          placeholder: input_control_placeholder,
+          maxlength: @maxlength,
+          class: has_affix? ? nil : input_classes,
+          disabled: input_control_disabled ? true : nil,
+          readonly: input_control_readonly ? true : nil,
+          "aria-invalid": error? ? "true" : nil,
+          "aria-describedby": describedby_ids,
+          data: merged_input_data_attributes
+        }.compact, Types::HtmlAttributes)
+
+        attrs
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        {
+          class: wrapper_classes,
+          data: {
+            controller: "hakumi--input",
+            hakumi__input_has_clear_value: @allow_clear
+          }
+        }
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def prefix_element
+        prefix_content = if @prefix_icon
+          render(HakumiComponents::Icon::Component.new(name: @prefix_icon)).to_s
+        else
+          rendered_prefix = render_affix_content(@prefix)
+          return nil if rendered_prefix.nil?
+
+          rendered_prefix
+        end
+
+        content_tag(:span, class: "hakumi-input-prefix") do
+          prefix_content
+        end
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def suffix_element
+        suffix_content = suffix_content()
+        return nil if suffix_content.nil? && !@allow_clear
+
+        content_tag(:span, class: "hakumi-input-suffix") do
+          safe_join([ suffix_content, clear_button ].compact)
+        end
+      end
+
+      sig { returns(AffixContent) }
+      def suffix_content
+        return nil unless value_present?(@suffix) || @suffix_icon
+
+        if @suffix_icon
+          render(HakumiComponents::Icon::Component.new(name: @suffix_icon)).to_s
+        else
+          render_affix_content(@suffix)
+        end
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def clear_button
+        return nil unless @allow_clear
+
+        content_tag(
+          :span,
+          class: "hakumi-input-clear-icon hakumi-input-clear-icon-hidden",
+          role: "button",
+          tabindex: "-1",
+          data: { action: "click->hakumi--input#clear" }
+        ) do
+          render HakumiComponents::Icon::Component.new(name: :close_circle, theme: :filled)
+        end
+      end
+
+      sig { returns(Types::DataAttributes) }
+      def merged_input_data_attributes
+        {
+          action: "input->hakumi--input#handleInput"
+        }.merge(coerce_data_attributes(form_field_html_options[:data]))
+      end
+
+      sig { params(raw_data: Types::HtmlAttributeValue).returns(Types::DataAttributes) }
+      def coerce_data_attributes(raw_data)
+        data_attributes = T.let({}, Types::DataAttributes)
+        return data_attributes unless raw_data.is_a?(Hash)
+
+        raw_data.each do |key, value|
+          next unless key.is_a?(String) || key.is_a?(Symbol)
+          next unless value.nil? || value.is_a?(String) || value.is_a?(Symbol) || value.is_a?(TrueClass) || value.is_a?(FalseClass) || value.is_a?(Numeric)
+
+          data_attributes[key] = value
+        end
+
+        data_attributes
+      end
+
+      sig { params(value: Types::Renderable).returns(AffixContent) }
+      def render_affix_content(value)
+        return nil unless value_present?(value)
+        return value if value.is_a?(ActiveSupport::SafeBuffer) || value.is_a?(String)
+        return render(value).to_s if value.is_a?(ViewComponent::Base)
+
+        nil
+      end
+
+      sig { returns(T.nilable(String)) }
+      def html_class_name
+        css_class = form_field_html_options[:class]
+        css_class.is_a?(String) ? css_class : nil
+      end
+
+      sig { returns(T.nilable(String)) }
+      def wrapper_class_name
+        wrapper_class = form_field_html_options[:wrapper_class]
+        wrapper_class.is_a?(String) ? wrapper_class : nil
+      end
+      end
+  end
+end