hakumi_components 0.1.3.pre

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

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Image
+    class Component < Hakumi::BaseComponent
+      def initialize(
+        src:,
+        alt: nil,
+        width: nil,
+        height: nil,
+        fallback: nil,
+        placeholder: false,
+        preview: true,
+        preview_src: nil,
+        mask_closable: false,
+        **html_options
+      )
+        @src = src
+        @alt = alt
+        @width = width
+        @height = height
+        @fallback = fallback
+        @placeholder = placeholder
+        @preview = preview
+        @preview_src = preview_src
+        @mask_closable = mask_closable
+        @html_options = html_options
+        super()
+      end
+
+      attr_reader :src, :alt, :fallback, :preview_src
+
+      def preview_enabled?
+        @preview != false
+      end
+
+      def preview_image_src
+        @preview_src || @src
+      end
+
+      def placeholder?
+        @placeholder == true
+      end
+
+      private
+
+      def wrapper_classes
+        class_names(
+          "image",
+          {
+            placeholder: placeholder?
+          },
+          [ @html_options[:class] ]
+        )
+      end
+
+      def wrapper_attributes
+        attrs = {
+          class: wrapper_classes,
+          data: data_attributes
+        }
+
+        attrs[:style] = size_style if @width || @height
+
+        merge_attributes(attrs, @html_options.except(:class))
+      end
+
+      def data_attributes
+        {
+          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
+        }.merge(@html_options[:data] || {})
+      end
+
+      def img_attributes
+        attrs = {
+          src: @src,
+          alt: @alt,
+          class: "hakumi-image-img",
+          data: {
+            hakumi__image_target: "img",
+            action: "error->hakumi--image#handleError load->hakumi--image#handleLoad"
+          }
+        }
+
+        if preview_enabled?
+          attrs[:data][:action] += " click->hakumi--image#openPreview"
+        end
+
+        attrs[:width] = @width if @width
+        attrs[:height] = @height if @height
+
+        attrs
+      end
+
+      def size_style
+        styles = []
+        styles << "width: #{normalize_size(@width)}" if @width
+        styles << "height: #{normalize_size(@height)}" if @height
+        styles.join("; ")
+      end
+
+      def normalize_size(size)
+        size.is_a?(Integer) ? "#{size}px" : size
+      end
+    end
+  end
+end

data/app/components/hakumi/image/preview_group/component.html.erb

@@ -0,0 +1,83 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <% if images.any? %>
+    <% 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">
+        <%= image %>
+      </div>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+  <%= tag.template data: { hakumi__image_preview_group_target: "previewTemplate" } do %>
+    <div class="hakumi-image-preview-root">
+      <div class="hakumi-image-preview-mask"></div>
+      <div class="hakumi-image-preview-wrap" tabindex="-1">
+        <div class="hakumi-image-preview-body">
+          <div class="hakumi-image-preview-img-wrapper">
+            <img class="hakumi-image-preview-img" src="" alt="" />
+          </div>
+        </div>
+        <button class="hakumi-image-preview-close">
+          <span class="hakumi-icon">
+            <%= render Hakumi::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) %>
+            </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) %>
+            </span>
+          </button>
+          <div class="hakumi-image-preview-counter">
+            <span class="hakumi-image-preview-counter-current">0</span>
+            <span class="hakumi-image-preview-counter-separator"> / </span>
+            <span class="hakumi-image-preview-counter-total">0</span>
+          </div>
+        </div>
+
+        <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) %>
+            </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) %>
+            </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) %>
+            </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) %>
+            </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) %>
+            </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) %>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Image
+    module PreviewGroup
+      class Component < Hakumi::BaseComponent
+        renders_many :images, ->(**kwargs) { Hakumi::Image::Component.new(**kwargs, preview: false) }
+
+        def initialize(
+          items: nil,
+          preview: true,
+          **html_options
+        )
+          @items = items
+          @preview = preview
+          @html_options = html_options
+          super()
+        end
+
+        attr_reader :items
+
+        def preview_enabled?
+          @preview != false
+        end
+
+        # Collect image sources from items or rendered images
+        def preview_items
+          if @items.present?
+            @items.map { |item| item.is_a?(Hash) ? item : { src: item } }
+          else
+            images.map do |image|
+              {
+                src: image.preview_src || image.src,
+                alt: image.alt
+              }
+            end
+          end
+        end
+
+        private
+
+        def wrapper_classes
+          class_names(
+            "image-preview-group",
+            {},
+            [ @html_options[:class] ]
+          )
+        end
+
+        def wrapper_attributes
+          attrs = {
+            class: wrapper_classes,
+            data: data_attributes
+          }
+
+          merge_attributes(attrs, @html_options.except(:class))
+        end
+
+        def data_attributes
+          return {} unless preview_enabled?
+
+          {
+            controller: "hakumi--image",
+            hakumi__image_items_value: preview_items.to_json
+          }.merge(@html_options[:data] || {})
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi/input/component.html.erb

@@ -0,0 +1,27 @@
+<% input_control = capture do %>
+  <% if has_affix? %>
+    <%= content_tag(:span, wrapper_attributes) do %>
+      <%= prefix_element %>
+      <%= tag.input(**input_attributes.merge(class: input_classes)) %>
+      <%= suffix_element %>
+    <% end %>
+  <% else %>
+    <%= tag.input(**input_attributes) %>
+  <% end %>
+<% end %>
+
+<% if @standalone %>
+  <%= input_control %>
+<% else %>
+  <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
+    <%= render_label(field_id: input_id) %>
+
+    <div class="hakumi-form-item-control">
+      <div class="hakumi-form-item-control-input">
+        <%= input_control %>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,187 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Input
+    # Hakumi Input component
+    # A basic widget for getting user input, supporting text, number, email, etc.
+    #
+    # @example Basic usage
+    #   <%= render Hakumi::Input::Component.new(name: "email", placeholder: "Enter email") %>
+    #
+    # @example With label and caption
+    #   <%= render Hakumi::Input::Component.new(
+    #     name: "username",
+    #     label: "Username",
+    #     caption: "Choose a unique username",
+    #     required: true
+    #   ) %>
+    #
+    # @example With prefix and suffix
+    #   <%= render Hakumi::Input::Component.new(
+    #     name: "amount",
+    #     prefix: "dollar",
+    #     suffix: "USD",
+    #     placeholder: "0.00"
+    #   ) %>
+    class Component < Hakumi::BaseComponent
+      include Hakumi::Concerns::FormField
+
+      SIZES = [ :small, :middle, :large ].freeze
+
+      def initialize(
+        name:,
+        label: nil,
+        caption: nil,
+        value: nil,
+        placeholder: nil,
+        type: :text,
+        size: :middle,
+        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 = name
+        @label = label
+        @caption = caption
+        @value = value
+        @placeholder = placeholder
+        @type = type
+        @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 = rules
+        @errors = Array(errors)
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+      end
+
+      def has_affix?
+        @prefix.present? || @suffix.present? || @prefix_icon.present? || @suffix_icon.present? || @allow_clear
+      end
+
+      def wrapper_classes
+        class_names(
+          "input-affix-wrapper",
+          {
+            @size => (@size != :middle),
+            "disabled": @disabled
+          },
+          [ @html_options[:wrapper_class] ]
+        )
+      end
+
+      def input_classes
+        class_names(
+          "input",
+          {
+            @size => (@size != :middle)
+          },
+          [ @html_options[:class] ]
+        )
+      end
+
+      def input_attributes
+        attrs = {
+          type: @type,
+          name: @name,
+          id: input_id,
+          value: @value,
+          placeholder: @placeholder,
+          class: has_affix? ? nil : input_classes,
+          disabled: @disabled ? true : nil,
+          readonly: @readonly ? true : nil,
+          required: @required ? true : nil,
+          maxlength: @maxlength,
+          "aria-invalid": has_error? ? "true" : nil,
+          "aria-describedby": describedby_ids,
+          data: { action: "input->hakumi--input#handleInput" }
+        }.compact
+
+        # Merge data attributes
+        if @html_options[:data]
+          attrs[:data] = attrs[:data].merge(@html_options[:data])
+        end
+
+        attrs
+      end
+
+      def wrapper_attributes
+        {
+          class: wrapper_classes,
+          data: {
+            controller: "hakumi--input",
+            hakumi__input_has_clear_value: @allow_clear ? "true" : "false"
+          }
+        }
+      end
+
+      def prefix_element
+        return nil unless @prefix || @prefix_icon
+
+        content_tag(:span, class: "hakumi-input-prefix") do
+          if @prefix_icon
+            render Hakumi::Icon::Component.new(name: @prefix_icon)
+          elsif @prefix
+            @prefix
+          end
+        end
+      end
+
+      def suffix_element
+        return nil unless @suffix || @suffix_icon || @allow_clear
+
+        content_tag(:span, class: "hakumi-input-suffix") do
+          safe_join([ suffix_content, clear_button ].compact)
+        end
+      end
+
+      def suffix_content
+        return nil unless @suffix || @suffix_icon
+
+        if @suffix_icon
+          render Hakumi::Icon::Component.new(name: @suffix_icon)
+        elsif @suffix
+          @suffix
+        end
+      end
+
+      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 Hakumi::Icon::Component.new(name: :close_circle, theme: :filled)
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi/input/password/component.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Input
+    module Password
+      # Hakumi Password Input component
+      # A password input with visibility toggle functionality
+      #
+      # @example Basic usage
+      #   <%= render Hakumi::Input::Password::Component.new(
+      #     name: "password",
+      #     label: "Password",
+      #     placeholder: "Enter password"
+      #   ) %>
+      #
+      # @example With size and validation
+      #   <%= render Hakumi::Input::Password::Component.new(
+      #     name: "password",
+      #     label: "Password",
+      #     size: :large,
+      #     required: true,
+      #     errors: ["Password is too short"]
+      #   ) %>
+      class Component < Hakumi::Input::Component
+        def initialize(**options)
+          # Force type to password
+          options[:type] = :password
+
+          # Password fields always have a suffix (visibility toggle)
+          # Store the user's suffix separately if provided
+          @user_suffix = options.delete(:suffix)
+
+          super(**options)
+        end
+
+        private
+
+        def wrapper_attributes
+          base_attrs = super
+
+          # Merge password-specific data attributes
+          base_attrs[:data] ||= {}
+          base_attrs[:data][:controller] = [ base_attrs[:data][:controller], "hakumi--input-password" ].compact.join(" ")
+          base_attrs[:data][:hakumi__input_password_visible_value] = "false"
+
+          base_attrs
+        end
+
+        def suffix_element
+          content_tag(:span, class: "hakumi-input-suffix") do
+            safe_join([
+              user_suffix_content,
+              visibility_toggle_button
+            ].compact)
+          end
+        end
+
+        def has_affix?
+          true # Password always has affix (visibility toggle)
+        end
+
+        def user_suffix_content
+          return nil unless @user_suffix
+
+          @user_suffix
+        end
+
+        def visibility_toggle_button
+          content_tag(:span,
+            class: "hakumi-input-password-icon",
+            role: "button",
+            tabindex: "-1",
+            data: {
+              action: "click->hakumi--input-password#toggle",
+              hakumi__input_password_target: "toggleButton"
+            }
+          ) do
+            render Hakumi::Icon::Component.new(
+              name: :eye_invisible,
+              data: { hakumi__input_password_target: "icon" }
+            )
+          end
+        end
+
+        def input_attributes
+          attrs = super
+          # Add target for Stimulus controller
+          attrs[:data] ||= {}
+          attrs[:data][:hakumi__input_password_target] = "input"
+          attrs
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi/input/text_area/component.html.erb

@@ -0,0 +1,21 @@
+<% textarea_control = capture do %>
+  <span <%= tag.attributes(wrapper_attributes).to_s.html_safe %>>
+    <%= content_tag(:textarea, @value, **textarea_attributes) %>
+  </span>
+<% end %>
+
+<% if @standalone %>
+  <%= textarea_control %>
+<% else %>
+  <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
+    <%= render_label(field_id: input_id) %>
+
+    <div class="hakumi-form-item-control">
+      <div class="hakumi-form-item-control-input">
+        <%= textarea_control %>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>