hakumi_components 0.1.3.pre

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

@@ -0,0 +1,339 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module QrCode
+    class Component < Hakumi::BaseComponent
+      TYPES = [ :canvas, :svg ].freeze
+      STATUSES = [ :active, :expired, :loading, :scanned ].freeze
+      ERROR_LEVELS = [ :L, :M, :Q, :H ].freeze
+
+      def self.extract_controller_locals(params)
+        {
+          value: params[:value],
+          size: parse_number(params[:size]),
+          type: params[:type]&.to_sym,
+          color: params[:color],
+          bg_color: params[:bg_color],
+          icon: params[:icon],
+          icon_size: parse_number(params[:icon_size]),
+          status: params[:status]&.to_sym,
+          status_render: params[:status_render],
+          bordered: params.key?(:bordered) ? ActiveModel::Type::Boolean.new.cast(params[:bordered]) : nil,
+          error_level: parse_error_level(params[:error_level]),
+          download_name: params[:download_name],
+          aria_label: params[:aria_label]
+        }
+      end
+
+      def self.parse_number(value)
+        return nil if value.nil?
+        return value if value.is_a?(Numeric)
+        raw = value.to_s.strip
+        return nil if raw.empty?
+
+        number = raw.to_f
+        number == number.to_i ? number.to_i : number
+      end
+
+      def self.parse_error_level(value)
+        return nil if value.nil?
+
+        value.to_s.strip.presence&.upcase&.to_sym
+      end
+
+      def initialize(
+        value:,
+        size: 160,
+        type: :canvas,
+        color: nil,
+        bg_color: nil,
+        icon: nil,
+        icon_size: 40,
+        status: :active,
+        status_render: nil,
+        bordered: true,
+        error_level: :M,
+        download_name: nil,
+        aria_label: nil,
+        **html_options
+      )
+        @value = value
+        @size = self.class.parse_number(size) || 160
+        @type = normalize_symbol(type) || :canvas
+        @color = normalize_string(color)
+        @bg_color = normalize_string(bg_color)
+        @icon_input = icon
+        @icon_size = self.class.parse_number(icon_size) || 40
+        resolve_icon!
+        @status = normalize_symbol(status) || :active
+        @status_render = status_render
+        @bordered = bordered.nil? ? true : ActiveModel::Type::Boolean.new.cast(bordered)
+        @error_level = normalize_error_level(error_level) || :M
+        @download_name = normalize_string(download_name)
+        @aria_label = normalize_string(aria_label)
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def wrapper_attributes
+        merge_attributes(
+          {
+            class: wrapper_classes,
+            style: wrapper_styles,
+            role: "img",
+            "aria-label": @aria_label || "QR Code",
+            "aria-busy": loading? ? "true" : "false",
+            data: data_attributes
+          },
+          @html_options
+        )
+      end
+
+      def renderer_attributes
+        {
+          class: "hakumi-qr-code-inner",
+          data: { "hakumi--qr-code-target": "renderer" }
+        }
+      end
+
+      def icon?
+        icon_component? || icon_image?
+      end
+
+      def icon_markup
+        if icon_image?
+          tag.img(**icon_image_attributes)
+        elsif icon_component?
+          render(@icon_component)
+        end
+      end
+
+      def icon_image_attributes
+        {
+          src: @icon_url,
+          alt: "",
+          class: "hakumi-qr-code-icon-image",
+          "aria-hidden": true,
+          role: "presentation"
+        }
+      end
+
+      def status_overlay?
+        @status != :active
+      end
+
+      def status_overlay_markup
+        return nil unless status_overlay?
+
+        custom = custom_status_overlay
+        return custom if custom
+
+        default_status_overlay
+      end
+
+      def status_text
+        case @status
+        when :expired
+          "Expired"
+        when :loading
+          "Loading"
+        when :scanned
+          "Scanned"
+        else
+          "Active"
+        end
+      end
+
+      def status_description
+        case @status
+        when :expired
+          "Please refresh to continue"
+        when :scanned
+          "You can now continue"
+        else
+          nil
+        end
+      end
+
+      private
+
+      def validate_props!
+        validate_required!(:value)
+        validate_inclusion!(:type, TYPES)
+        validate_inclusion!(:status, STATUSES)
+        validate_inclusion!(:error_level, ERROR_LEVELS)
+
+        if @size.nil? || @size.to_f <= 0
+          raise ArgumentError, "size must be a positive number"
+        end
+
+        if icon? && (@icon_size.nil? || @icon_size.to_f <= 0)
+          raise ArgumentError, "icon_size must be a positive number"
+        end
+      end
+
+      def wrapper_classes
+        modifiers = {
+          @type => true,
+          "status-#{@status}" => true,
+          bordered: @bordered,
+          "with-icon" => icon?,
+          "custom-status" => custom_status_render?
+        }
+
+        class_names("qr-code", modifiers, [ @html_options[:class] ])
+      end
+
+      def wrapper_styles
+        styles = {
+          "--hakumi-qr-code-size" => size_css_value,
+          "--hakumi-qr-code-icon-size" => icon_css_value,
+          "--hakumi-qr-code-color" => @color,
+          "--hakumi-qr-code-bg-color" => @bg_color
+        }
+
+        styles.compact.map { |key, value| "#{key}: #{value}" }.join("; ")
+      end
+
+      def size_css_value
+        return nil unless @size
+
+        value = @size.to_f
+        value = value.to_i if value == value.to_i
+        "#{value}px"
+      end
+
+      def icon_css_value
+        return nil unless icon?
+
+        value = @icon_size.to_f
+        value = value.to_i if value == value.to_i
+        "#{value}px"
+      end
+
+      def resolve_icon!
+        @icon_component = nil
+        @icon_url = nil
+
+        if @icon_input.respond_to?(:render_in)
+          @icon_component = @icon_input
+          return
+        end
+
+        if @icon_input.is_a?(String)
+          trimmed = @icon_input.strip
+          if trimmed.downcase.start_with?("http://", "https://", "data:")
+            @icon_url = trimmed
+            return
+          end
+        end
+
+        icon_name = extract_icon_name(@icon_input)
+        return unless icon_name
+
+        @icon_component = Hakumi::Icon::Component.new(name: icon_name, size: icon_component_size)
+      end
+
+      def icon_component?
+        @icon_component.present?
+      end
+
+      def icon_image?
+        @icon_url.present?
+      end
+
+      def data_attributes
+        data = {
+          controller: "hakumi--qr-code",
+          "hakumi--qr-code-value-value": @value,
+          "hakumi--qr-code-size-value": @size,
+          "hakumi--qr-code-type-value": @type,
+          "hakumi--qr-code-color-value": @color,
+          "hakumi--qr-code-bg-color-value": @bg_color,
+          "hakumi--qr-code-error-level-value": @error_level,
+          "hakumi--qr-code-status-value": @status
+        }
+
+        data["hakumi--qr-code-download-name-value"] = @download_name if @download_name.present?
+        data
+      end
+
+      def loading?
+        @status == :loading
+      end
+
+      def custom_status_render?
+        @status_render.present?
+      end
+
+      def custom_status_overlay
+        return unless custom_status_render?
+
+        if @status_render.respond_to?(:call)
+          return view_context.capture { @status_render.call(@status) }
+        end
+
+        return render(@status_render) if @status_render.respond_to?(:render_in)
+
+        @status_render
+      end
+
+      def default_status_overlay
+        content = []
+        if loading?
+          content << render(Hakumi::Spin::Component.new(size: :small))
+        end
+
+        content << tag.span(status_text, class: "hakumi-qr-code-status-text")
+        if status_description.present?
+          content << tag.span(status_description, class: "hakumi-qr-code-status-description")
+        end
+
+        tag.div(class: "hakumi-qr-code-status-content") do
+          safe_join(content)
+        end
+      end
+
+      def normalize_symbol(value)
+        return nil if value.nil?
+
+        raw = value.is_a?(String) ? value.dup : value.to_s.dup
+        raw.strip!
+        return nil if raw.empty?
+
+        raw.to_sym
+      end
+
+      def normalize_error_level(value)
+        symbol = normalize_symbol(value)
+        symbol&.to_s&.upcase&.to_sym
+      end
+
+      def normalize_string(value)
+        return nil if value.nil?
+
+        raw = value.to_s.strip
+        raw.empty? ? nil : raw
+      end
+
+      def extract_icon_name(value)
+        case value
+        when Symbol
+          value
+        when String
+          trimmed = value.strip
+          return nil if trimmed.empty?
+          trimmed.to_sym
+        else
+          nil
+        end
+      end
+
+      def icon_component_size
+        size = (@icon_size.to_f * 0.65).round
+        size.positive? ? size : 24
+      end
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+<% radio_control = capture do %>
+  <label class="<%= wrapper_classes %>" data-controller="<%= data_controllers %>" data-hakumi--radio-checked-value="<%= @checked %>" data-hakumi--radio-variant-value="default">
+    <span class="<%= radio_classes %>" data-hakumi--radio-target="radio">
+      <%= radio_button_tag(
+            @name,
+            @value,
+            @checked,
+            id: input_id,
+            disabled: @disabled,
+            autofocus: @auto_focus,
+            required: @required,
+            class: "hakumi-radio-input",
+            "aria-invalid": has_error? ? "true" : nil,
+            "aria-describedby": describedby_ids,
+            data: (@html_options[:data] || {}).merge({
+              hakumi__radio_target: "input",
+              action: "change->hakumi--radio#toggle"
+            }),
+            **@html_options.except(:class, :data, :style, :id)
+          ) %>
+      <span class="hakumi-radio-inner"></span>
+    </span>
+    <% if label_text.present? %>
+      <span class="hakumi-radio-label"><%= label_text %></span>
+    <% end %>
+  </label>
+<% end %>
+
+<% if standalone? %>
+  <%= radio_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">
+        <%= radio_control %>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Radio
+    class Component < Hakumi::BaseComponent
+      include Hakumi::Concerns::FormField
+
+      SIZES = [ :small, :middle, :large ].freeze
+
+      def initialize(
+        name:,
+        value: nil,
+        text: nil,
+        label: nil,
+        caption: nil,
+        checked: false,
+        disabled: false,
+        size: :middle,
+        id: nil,
+        auto_focus: false,
+        required: false,
+        standalone: true,
+        errors: [],
+        **html_options
+      )
+        @name = name
+        @value = value
+        @text = text
+        @label = label
+        @caption = caption
+        @checked = checked
+        @disabled = disabled
+        @size = size
+        @id = id || generate_id("radio")
+        @auto_focus = auto_focus
+        @required = required
+        @standalone = standalone
+        @errors = Array(errors)
+        @html_options = html_options
+        @html_options[:id] ||= @id
+
+        validate_props!
+      end
+
+      def wrapper_classes
+        modifiers = {
+          checked: @checked,
+          disabled: @disabled
+        }
+        modifiers[@size] = true if @size != :middle
+
+        class_names("radio-wrapper", modifiers)
+      end
+
+      def radio_classes
+        modifiers = {
+          checked: @checked,
+          disabled: @disabled
+        }
+        modifiers[@size] = true if @size != :middle
+
+        class_names("radio", modifiers)
+      end
+
+      def data_controllers
+        "hakumi--radio"
+      end
+
+      def label_text
+        @text || content
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+      end
+    end
+  end
+end

data/app/components/hakumi/radio/group/component.html.erb

@@ -0,0 +1,49 @@
+<% radio_group = capture do %>
+  <%= tag.div(**wrapper_attributes) do %>
+    <% normalized_options.each_with_index do |option, index| %>
+      <% if button_group? %>
+        <label class="<%= button_wrapper_classes(option) %>" data-controller="hakumi--radio" data-hakumi--radio-checked-value="<%= option_checked?(option[:value]) %>" data-hakumi--radio-variant-value="button">
+          <%= radio_button_tag(
+                @name,
+                option[:value],
+                option_checked?(option[:value]),
+                id: option_id(index),
+                class: "hakumi-radio-button-input",
+                disabled: option_disabled?(option),
+                data: {
+                  hakumi__radio_target: "input",
+                  action: "change->hakumi--radio#toggle"
+                }
+              ) %>
+          <span class="hakumi-radio-button-label"><%= option[:label] %></span>
+        </label>
+      <% else %>
+        <%= render Hakumi::Radio::Component.new(
+              name: @name,
+              value: option[:value],
+              checked: option_checked?(option[:value]),
+              disabled: option_disabled?(option),
+              size: @size,
+              text: option[:label]
+            ) %>
+      <% end %>
+    <% end %>
+    <%= content %>
+  <% end %>
+<% end %>
+
+<% if standalone? %>
+  <%= radio_group %>
+<% else %>
+  <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
+    <%= render_label(field_id: option_id(0)) %>
+
+    <div class="hakumi-form-item-control">
+      <div class="hakumi-form-item-control-input">
+        <%= radio_group %>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>

data/app/components/hakumi/radio/group/component.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Radio
+    module Group
+      class Component < Hakumi::BaseComponent
+        include Hakumi::Concerns::FormField
+
+        SIZES = [ :small, :middle, :large ].freeze
+        VARIANTS = [ :default, :button, :solid ].freeze
+        DIRECTIONS = [ :horizontal, :vertical ].freeze
+
+        def initialize(
+          name: nil,
+          value: nil,
+          options: [],
+          label: nil,
+          caption: nil,
+          variant: :default,
+          direction: :horizontal,
+          size: :middle,
+          disabled: false,
+          standalone: true,
+          required: false,
+          errors: [],
+          **html_options
+        )
+          @name = name || generate_id("radio_group")
+          @value = value
+          @options = normalize_options(options)
+          @label = label
+          @caption = caption
+          @variant = variant.to_sym
+          @direction = direction.to_sym
+          @size = size
+          @disabled = disabled
+          @standalone = standalone
+          @required = required
+          @errors = Array(errors)
+          @html_options = html_options
+
+          validate_props!
+        end
+
+        def wrapper_attributes
+          attrs = {
+            class: wrapper_classes,
+            role: "radiogroup",
+            "aria-orientation": (@direction == :vertical ? "vertical" : nil)
+          }.compact
+
+          merge_attributes(attrs, @html_options)
+        end
+
+        def normalized_options
+          @options
+        end
+
+        def option_checked?(option_value)
+          return false if @value.nil?
+
+          @value.to_s == option_value.to_s
+        end
+
+        def option_disabled?(option)
+          @disabled || option[:disabled]
+        end
+
+        def button_wrapper_classes(option)
+          modifiers = {
+            checked: option_checked?(option[:value]),
+            disabled: option_disabled?(option)
+          }
+          modifiers[@size] = true if @size != :middle
+
+          class_names("radio-button-wrapper", modifiers)
+        end
+
+        def option_id(index)
+          "#{@name}_#{index}"
+        end
+
+        def button_group?
+          @variant == :button || @variant == :solid
+        end
+
+        private
+
+        def wrapper_classes
+          modifiers = {
+            button: button_group?,
+            vertical: @direction == :vertical,
+            disabled: @disabled
+          }
+          modifiers[@size] = true if @size != :middle
+          modifiers[:solid] = true if @variant == :solid
+          modifiers[:outline] = true if @variant == :button
+
+          class_names("radio-group", modifiers)
+        end
+
+        def normalize_options(options)
+          Array(options).map do |option|
+            if option.is_a?(Hash)
+              option = option.deep_symbolize_keys if option.respond_to?(:deep_symbolize_keys)
+              label_value = option[:label]
+              value_value = option[:value] || label_value
+
+              raise ArgumentError, "Option must have :label key" if label_value.nil?
+
+              {
+                label: label_value,
+                value: value_value,
+                disabled: !!option[:disabled]
+              }
+            elsif option.is_a?(String)
+              { label: option, value: option, disabled: false }
+            else
+              raise ArgumentError, "Option must be a Hash with :label and :value, or a String. Got: #{option.class}"
+            end
+          end
+        end
+
+        def validate_props!
+          validate_inclusion!(:size, SIZES)
+          validate_inclusion!(:variant, VARIANTS)
+          validate_inclusion!(:direction, DIRECTIONS)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,48 @@
+<% rate_control = capture do %>
+  <div <%= tag.attributes(rate_wrapper_attributes) %>>
+    <%= tag.input(**input_attributes) %>
+
+    <div class="hakumi-rate-stars">
+      <% @count.times do |index| %>
+        <% state = star_state(index) %>
+        <% tooltip_text = tooltip_for(index) %>
+        <% star_element = tag.span(
+              class: star_classes(state),
+              data: {
+                hakumi__rate_target: "star",
+                index: index + 1,
+                action: "mousemove->hakumi--rate#onHover mouseleave->hakumi--rate#onLeave click->hakumi--rate#onClick"
+              }
+            ) do %>
+          <span class="hakumi-rate-star-first"><%= character_content %></span>
+          <span class="hakumi-rate-star-second"><%= character_content %></span>
+        <% end %>
+        <% if tooltip_text.present? %>
+          <%= render Hakumi::Tooltip::Component.new(title: tooltip_text) do %>
+            <%= star_element %>
+          <% end %>
+        <% else %>
+          <%= star_element %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<% if @standalone %>
+  <%= rate_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">
+        <div class="hakumi-form-item-control-input-content">
+          <%= rate_control %>
+        </div>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>