hakumi_components 0.1.3.pre

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

@@ -0,0 +1,61 @@
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <div class="hakumi-admin-panel__header" data-action="click->hakumi--admin-panel#toggle">
+    <div class="hakumi-admin-panel__title-group">
+      <h2 class="hakumi-admin-panel__title"><%= title %></h2>
+      <p class="hakumi-admin-panel__subtitle">Real-time inventory</p>
+    </div>
+    <div class="hakumi-admin-panel__controls">
+      <%= render(Hakumi::Button::Component.new(type: :text, icon: :reload, shape: :circle, data: { action: "click->hakumi--admin-panel#refresh:stop" })) { "Refresh" } %>
+      <%= render(Hakumi::Button::Component.new(type: :text, icon: :close, shape: :circle, data: { action: "click->hakumi--admin-panel#close:stop" })) %>
+    </div>
+  </div>
+
+  <div class="hakumi-admin-panel__filters">
+    <label class="hakumi-admin-panel__filter">
+      <span>Search by ID</span>
+      <input
+        type="search"
+        placeholder="hakumi-component-..."
+        data-hakumi--admin-panel-target="search"
+        data-action="input->hakumi--admin-panel#applyFilters"
+      />
+    </label>
+    <label class="hakumi-admin-panel__filter">
+      <span>Type</span>
+      <select
+        data-hakumi--admin-panel-target="typeFilter"
+        data-action="change->hakumi--admin-panel#applyFilters"
+      >
+        <option value="">All</option>
+      </select>
+    </label>
+    <label class="hakumi-admin-panel__filter">
+      <span>State</span>
+      <select
+        data-hakumi--admin-panel-target="stateFilter"
+        data-action="change->hakumi--admin-panel#applyFilters"
+      >
+        <option value="">All</option>
+      </select>
+    </label>
+  </div>
+
+  <div class="hakumi-admin-panel__summary" data-hakumi--admin-panel-target="summary"></div>
+
+  <div class="hakumi-admin-panel__table-wrapper">
+    <table class="hakumi-admin-panel__table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Type</th>
+          <th>State</th>
+          <th>Available Methods</th>
+        </tr>
+      </thead>
+      <tbody data-hakumi--admin-panel-target="body"></tbody>
+    </table>
+    <p class="hakumi-admin-panel__empty" data-hakumi--admin-panel-target="empty" hidden>
+      No components registered.
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module AdminPanel
+    class Component < Hakumi::BaseComponent
+      def self.extract_controller_locals(params)
+        {
+          title: params[:title],
+          enabled: params[:enabled] != "false"
+        }.compact
+      end
+
+      def initialize(title: "Admin Panel", enabled: true, **html_options)
+        @title = title
+        @enabled = enabled
+        @html_options = html_options
+      end
+
+      def render?
+        @enabled
+      end
+
+      private
+
+      attr_reader :title
+
+      def wrapper_attributes
+        attrs = {
+          class: class_names("admin-panel", {}, [ @html_options[:class] ]),
+          data: {
+            controller: "hakumi--admin-panel",
+            'turbo-permanent': true
+          }
+        }
+
+        merge_attributes(attrs, @html_options.except(:class))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<div <%= tag.attributes(root_attributes) %>>
+  <div class="hakumi-affix-placeholder" data-hakumi--affix-target="placeholder">
+    <div class="hakumi-affix-content" data-hakumi--affix-target="content">
+      <%= content_value %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Affix
+    class Component < Hakumi::BaseComponent
+      def self.extract_controller_locals(params)
+        {
+          body: params[:body],
+          offset_top: params[:offset_top]&.to_f,
+          offset_bottom: params[:offset_bottom]&.to_f,
+          target_selector: params[:target_selector],
+          z_index: params[:z_index]&.to_i,
+          on_change: params[:on_change]
+        }
+      end
+
+      def initialize(
+        body: nil,
+        offset_top: nil,
+        offset_bottom: nil,
+        target_selector: nil,
+        z_index: nil,
+        on_change: nil,
+        **html_options
+      )
+        @body = body
+        @offset_top = normalize_numeric(offset_top)
+        @offset_bottom = normalize_numeric(offset_bottom)
+        @target_selector = target_selector
+        @z_index = normalize_numeric(z_index)&.to_i
+        @on_change = on_change
+        @html_options = html_options
+
+        normalize_offsets!
+        validate_props!
+      end
+
+      def root_attributes
+        base_attrs = {
+          class: class_names("affix"),
+          data: data_attributes
+        }
+
+        merge_attributes(base_attrs, @html_options)
+      end
+
+      def content_value
+        content.presence || @body
+      end
+
+      private
+
+      def data_attributes
+        data = { controller: "hakumi--affix" }
+        data[:"hakumi--affix-offset-top-value"] = @offset_top unless @offset_top.nil?
+        data[:"hakumi--affix-offset-bottom-value"] = @offset_bottom unless @offset_bottom.nil?
+        data[:"hakumi--affix-target-selector-value"] = @target_selector if @target_selector.present?
+        data[:"hakumi--affix-z-index-value"] = @z_index unless @z_index.nil?
+        data[:action] = append_action(data[:action], "hakumi--affix:change->#{@on_change}") if @on_change.present?
+        data
+      end
+
+      def normalize_numeric(value)
+        return value unless value.is_a?(String)
+
+        return nil if value.strip.empty?
+
+        value.to_f
+      end
+
+      def normalize_offsets!
+        @offset_top = 0 if @offset_top.nil? && @offset_bottom.nil?
+      end
+
+      def validate_props!
+        return if @offset_top.nil? || @offset_bottom.nil?
+
+        raise ArgumentError, "offset_top and offset_bottom cannot be used together"
+      end
+
+      def append_action(existing, action)
+        return action if existing.blank?
+
+        [ existing, action ].join(" ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <% if show_icon? %>
+    <span class="hakumi-alert-icon">
+      <%= icon_element %>
+    </span>
+  <% end %>
+
+  <div class="hakumi-alert-content">
+    <% if message_content.present? %>
+      <div class="hakumi-alert-message" data-hakumi--alert-target="message"><%= message_content %></div>
+    <% end %>
+    <% if description_present? %>
+      <div class="hakumi-alert-description" data-hakumi--alert-target="description"><%= description_content %></div>
+    <% end %>
+  </div>
+
+  <% if action_present? %>
+    <div class="hakumi-alert-action"><%= action_content %></div>
+  <% end %>
+
+  <% if @closable %>
+    <button type="button" class="<%= close_button_classes %>" data-action="click->hakumi--alert#close" aria-label="Close">
+      <% if @close_text.present? %>
+        <span><%= @close_text %></span>
+      <% else %>
+        <%= render Hakumi::Icon::Component.new(name: :close) %>
+      <% end %>
+    </button>
+  <% end %>
+</div>

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

@@ -0,0 +1,128 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Alert
+    class Component < Hakumi::BaseComponent
+      TYPES = [ :success, :info, :warning, :error ].freeze
+
+      # Extracts locals from controller params for dynamic rendering
+      # @param params [ActionController::Parameters]
+      # @return [Hash] Arguments for initialize
+      def self.extract_controller_locals(params)
+        {
+          type: params[:type]&.to_sym,
+          message: params[:message].presence || "Generated Alert content",
+          description: params[:description],
+          show_icon: ActiveModel::Type::Boolean.new.cast(params[:show_icon]),
+          closable: ActiveModel::Type::Boolean.new.cast(params[:closable]),
+          banner: ActiveModel::Type::Boolean.new.cast(params[:banner])
+        }
+      end
+
+      def initialize(
+        type: nil,
+        message: nil,
+        description: nil,
+        show_icon: nil,
+        icon: nil,
+        closable: false,
+        close_text: nil,
+        banner: false,
+        action: nil,
+        **html_options
+      )
+        @type = type || :info
+        @message = message
+        @description = description
+        @show_icon = show_icon.nil? ? banner : show_icon
+        @icon = icon
+        @closable = closable || close_text.present?
+        @close_text = close_text
+        @banner = banner
+        @action = action
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:type, TYPES)
+      end
+
+      def wrapper_classes
+        classes = [ "hakumi-alert" ]
+        classes << "hakumi-alert-#{@type}" if @type
+        classes << "hakumi-alert-with-description" if description_present?
+        classes << "hakumi-alert-with-icon" if show_icon?
+        classes << "hakumi-alert-no-icon" unless show_icon?
+        classes << "hakumi-alert-closable" if @closable
+        classes << "hakumi-alert-banner" if @banner
+        classes << @html_options[:class] if @html_options[:class]
+        classes.join(" ")
+      end
+
+      def wrapper_attributes
+        data_attrs = { controller: "hakumi--alert" }
+
+        merge_attributes(
+          { class: wrapper_classes, data: data_attrs },
+          @html_options
+        )
+      end
+
+      def message_content
+        content.presence || @message
+      end
+
+      def description_present?
+        @description.present?
+      end
+
+      def description_content
+        render_value(@description)
+      end
+
+      def action_present?
+        @action.present?
+      end
+
+      def action_content
+        render_value(@action)
+      end
+
+      def show_icon?
+        @show_icon
+      end
+
+      def icon_element
+        return nil unless show_icon?
+
+        icon = @icon || default_icon
+        return icon unless icon.is_a?(String) || icon.is_a?(Symbol)
+
+        render Hakumi::Icon::Component.new(name: icon)
+      end
+
+      def default_icon
+        case @type
+        when :success
+          :check_circle
+        when :warning
+          :exclamation_circle
+        when :error
+          :close_circle
+        else
+          :info_circle
+        end
+      end
+
+      def close_button_classes
+        classes = [ "hakumi-alert-close-icon" ]
+        classes << "hakumi-alert-close-text" if @close_text.present?
+        classes.join(" ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <div class="<%= anchor_classes %>">
+    <span class="hakumi-anchor-ink" data-<%= stimulus_controller %>-target="ink"></span>
+    <% links.each do |link| %>
+      <%= link %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Anchor
+    class Component < Hakumi::BaseComponent
+      DIRECTIONS = %i[vertical horizontal].freeze
+
+      renders_many :links, ->(href:, title:, **options) do
+        Hakumi::Anchor::Link::Component.new(href: href, title: title, **options)
+      end
+
+      def initialize(
+        affix: true,
+        bounds: 5,
+        offset_top: 0,
+        target_offset: nil,
+        direction: :vertical,
+        replace: false,
+        **html_options
+      )
+        @affix = affix
+        @bounds = bounds
+        @offset_top = offset_top
+        @target_offset = target_offset
+        @direction = direction
+        @replace = replace
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def wrapper_classes
+        classes = [ "hakumi-anchor-wrapper" ]
+        classes << "hakumi-anchor-wrapper-fixed" if @affix
+        classes << "hakumi-anchor-wrapper-horizontal" if horizontal?
+        classes.join(" ")
+      end
+
+      def anchor_classes
+        classes = [ "hakumi-anchor" ]
+        classes << "hakumi-anchor-fixed" if @affix
+        classes.join(" ")
+      end
+
+      def stimulus_controller
+        "hakumi--anchor"
+      end
+
+      def stimulus_values
+        {
+          offset_top: @offset_top,
+          target_offset: @target_offset || @offset_top,
+          bounds: @bounds,
+          replace: @replace,
+          direction: @direction.to_s
+        }.compact
+      end
+
+      def wrapper_attributes
+        base_data = stimulus_values.transform_keys { |k| "#{stimulus_controller}-#{k.to_s.dasherize}-value" }
+        base_data[:controller] = stimulus_controller
+
+        merge_attributes(
+          { class: wrapper_classes, data: base_data },
+          @html_options
+        )
+      end
+
+      def horizontal?
+        @direction == :horizontal
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:direction, DIRECTIONS)
+      end
+    end
+  end
+end

data/app/components/hakumi/anchor/link/component.html.erb

@@ -0,0 +1,12 @@
+<div class="<%= link_classes %>" data-hakumi--anchor-target="link" data-href="<%= href %>">
+  <a
+    class="<%= title_classes %>"
+    href="<%= href %>"
+    title="<%= title %>"
+    <% if target.present? %> target="<%= target %>"<% end %>><%= title %></a>
+  <% if has_children? %>
+    <% links.each do |child_link| %>
+      <%= child_link %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/hakumi/anchor/link/component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Anchor
+    module Link
+      class Component < Hakumi::BaseComponent
+        renders_many :links, ->(href:, title:, **options) do
+          Hakumi::Anchor::Link::Component.new(href: href, title: title, **options)
+        end
+
+        def initialize(href:, title:, target: nil, **html_options)
+          @href = href
+          @title = title
+          @target = target
+          @html_options = html_options
+        end
+
+        attr_reader :href, :title, :target
+
+        def link_classes
+          "hakumi-anchor-link"
+        end
+
+        def title_classes
+          "hakumi-anchor-link-title"
+        end
+
+        def has_children?
+          links.any?
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,74 @@
+<div <%= tag.attributes(wrapper_attributes).to_s.html_safe %>>
+  <div class="hakumi-auto-complete-input-wrapper">
+    <% if custom_input_renderer? %>
+      <%= input_renderer.call(input_attributes) %>
+    <% else %>
+      <input <%= tag.attributes(input_attributes).to_s.html_safe %>>
+    <% end %>
+
+    <% if allow_clear? %>
+      <button
+        type="button"
+        class="hakumi-auto-complete-clear-icon"
+        aria-label="Clear"
+        data-hakumi--autocomplete-target="clear"
+        data-action="click->hakumi--autocomplete#clear">
+        <%= render Hakumi::Icon::Component.new(name: clear_icon, theme: :filled, fallback_to_outlined: true) %>
+      </button>
+    <% end %>
+  </div>
+
+  <template data-hakumi--autocomplete-target="optionTemplate">
+    <div
+      class="hakumi-auto-complete-item"
+      role="option"
+      data-hakumi--autocomplete-target="option"
+      data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
+      <span class="hakumi-auto-complete-item-label"></span>
+    </div>
+  </template>
+
+  <div
+    id="<%= dropdown_id %>"
+    class="hakumi-auto-complete-dropdown hakumi-auto-complete-dropdown-hidden"
+    role="listbox"
+    data-hakumi--autocomplete-target="dropdown">
+    <% if normalized_items.any? %>
+      <% normalized_items.each do |item| %>
+        <% if item[:type] == :group %>
+          <div class="hakumi-auto-complete-group">
+            <div class="hakumi-auto-complete-group-label"><%= item[:label] %></div>
+            <% item[:options].each do |opt| %>
+              <div
+                class="hakumi-auto-complete-item"
+                role="option"
+                data-value="<%= opt[:value] %>"
+                data-label="<%= opt[:label] %>"
+                data-hakumi--autocomplete-target="option"
+                data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
+                <span class="hakumi-auto-complete-item-label"><%= opt[:label] %></span>
+              </div>
+            <% end %>
+          </div>
+        <% elsif item && item[:type] == :option %>
+          <div
+            class="hakumi-auto-complete-item"
+            role="option"
+            data-value="<%= item[:value] %>"
+            data-label="<%= item[:label] %>"
+            data-hakumi--autocomplete-target="option"
+            data-action="mousedown->hakumi--autocomplete#select click->hakumi--autocomplete#select">
+            <span class="hakumi-auto-complete-item-label"><%= item[:label] %></span>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <div
+      class="hakumi-auto-complete-empty"
+      data-hakumi--autocomplete-target="empty"
+      style="display: <%= normalized_items.any? ? 'none' : 'block' %>;">
+      <%= not_found_content %>
+    </div>
+  </div>
+</div>