hakumi_components 0.1.3.pre

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

@@ -0,0 +1,261 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module TreeSelect
+    class Component < Hakumi::BaseComponent
+      include Hakumi::Concerns::FormField
+
+      SIZES = [ :small, :middle, :large ].freeze
+      VARIANTS = [ :default, :borderless ].freeze
+      STATUSES = [ nil, :error, :warning ].freeze
+
+      def initialize(
+        name: nil,
+        options: [],
+        value: nil,
+        placeholder: "Select",
+        multiple: false,
+        tree_checkable: false,
+        show_search: false,
+        tree_default_expand_all: false,
+        tree_selectable_leaf_only: false,
+        disabled: false,
+        allow_clear: false,
+        size: :middle,
+        variant: :default,
+        status: nil,
+        max_count: nil,
+        prefix: nil,
+        prefix_icon: nil,
+        label: nil,
+        caption: nil,
+        errors: [],
+        standalone: true,
+        required: false,
+        **html_options
+      )
+        @name = name || generate_id("tree_select")
+        @options = options
+        @value = value
+        @placeholder = placeholder
+        @multiple = multiple
+        @tree_checkable = tree_checkable
+        @show_search = show_search
+        @tree_default_expand_all = tree_default_expand_all
+        @tree_selectable_leaf_only = tree_selectable_leaf_only
+        @disabled = disabled
+        @allow_clear = allow_clear
+        @size = size
+        @variant = variant
+        @status = status
+        @max_count = max_count
+        @prefix = prefix
+        @prefix_icon = prefix_icon
+        @label = label
+        @caption = caption
+        @errors = Array(errors)
+        @standalone = standalone
+        @required = required
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      attr_reader :prefix, :prefix_icon
+
+      def wrapper_attributes
+        data_attrs = {
+          controller: "hakumi--tree-select",
+          hakumi__tree_select_allow_clear_value: @allow_clear,
+          hakumi__tree_select_disabled_value: @disabled,
+          hakumi__tree_select_multiple_value: @multiple,
+          hakumi__tree_select_tree_checkable_value: @tree_checkable
+        }
+
+        data_attrs[:hakumi__tree_select_max_count_value] = @max_count if @max_count
+
+        base_attrs = {
+          class: wrapper_classes,
+          data: data_attrs
+        }
+
+        merge_attributes(base_attrs, @html_options.except(:class))
+      end
+
+      def has_prefix?
+        @prefix.present? || @prefix_icon.present?
+      end
+
+      def empty_options?
+        @options.nil? || @options.empty?
+      end
+
+      def borderless?
+        @variant == :borderless
+      end
+
+      def effective_status
+        return :error if has_error?
+        @status
+      end
+
+      def tree_component_options
+        options = {
+          nodes: normalized_options,
+          checkable: @tree_checkable,
+          selectable: !@tree_checkable,
+          multiple: @multiple,
+          searchable: @show_search,
+          disabled: @disabled,
+          default_expand_keys: default_expand_keys,
+          data: {
+            hakumi__tree_select_target: "tree",
+            action: "hakumi--tree:select->hakumi--tree-select#onTreeSelect hakumi--tree:check->hakumi--tree-select#onTreeCheck"
+          }
+        }
+
+        if multi_value?
+          options[:default_checked_keys] = selected_keys if @tree_checkable
+          options[:default_selected_keys] = selected_keys unless @tree_checkable
+        else
+          options[:default_selected_keys] = selected_keys
+        end
+
+        options
+      end
+
+      def input_value
+        if multi_value?
+          selected_keys.to_json
+        else
+          selected_keys.first
+        end
+      end
+
+      def display_label
+        labels = selected_labels
+        return nil if labels.empty?
+
+        labels.join(", ")
+      end
+
+      def has_value?
+        selected_keys.any?
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:variant, VARIANTS)
+        validate_inclusion!(:status, STATUSES)
+      end
+
+      def wrapper_classes
+        class_names(
+          "tree-select",
+          {
+            lg: @size == :large,
+            sm: @size == :small,
+            borderless: borderless?,
+            disabled: @disabled,
+            "allow-clear": @allow_clear,
+            multiple: @multiple,
+            checkable: @tree_checkable,
+            "has-value": has_value?,
+            "status-error": effective_status == :error,
+            "status-warning": effective_status == :warning
+          },
+          [ @html_options[:class] ]
+        ).split.uniq.join(" ")
+      end
+
+      def normalized_options
+        @normalized_options ||= normalize_options(@options)
+      end
+
+      def normalize_options(options, parent_key: nil)
+        Array(options).map.with_index do |option, index|
+          if option.is_a?(Hash)
+            key = option[:key] || option["key"] || option[:value] || option["value"] || "#{parent_key || 'node'}-#{index}"
+            title = option[:title] || option["title"] || option[:label] || option["label"] || key
+            children = option[:children] || option["children"] || []
+            has_children = children.any?
+
+            # Determine selectability
+            explicit_selectable = option.key?(:selectable) ? option[:selectable] : option.fetch("selectable", nil)
+            selectable = if explicit_selectable.nil?
+              # Apply leaf_only logic if no explicit selectable set
+              @tree_selectable_leaf_only ? !has_children : true
+            else
+              explicit_selectable
+            end
+
+            {
+              key: key.to_s,
+              title: title,
+              children: normalize_options(children, parent_key: key),
+              disabled: option[:disabled] || option["disabled"],
+              selectable: selectable,
+              checkable: option.key?(:checkable) ? option[:checkable] : option.fetch("checkable", true),
+              disable_checkbox: option[:disable_checkbox] || option["disable_checkbox"],
+              icon: option[:icon] || option["icon"],
+              switcher_icon: option[:switcher_icon] || option["switcher_icon"],
+              async: option[:async] || option["async"],
+              loading: option[:loading] || option["loading"]
+            }.compact
+          else
+            {
+              key: option.to_s,
+              title: option,
+              children: []
+            }
+          end
+        end
+      end
+
+      def selected_keys
+        keys = if multi_value?
+          Array(@value)
+        else
+          @value.present? ? [ @value ] : []
+        end
+
+        keys.map(&:to_s)
+      end
+
+      def multi_value?
+        @multiple || @tree_checkable
+      end
+
+      def selected_labels
+        return [] if selected_keys.empty?
+
+        label_map = build_label_map(normalized_options)
+        selected_keys.map { |key| label_map[key] || key }
+      end
+
+      def build_label_map(options, map = {})
+        Array(options).each do |node|
+          map[node[:key].to_s] = node[:title]
+          build_label_map(node[:children], map) if node[:children].present?
+        end
+        map
+      end
+
+      def default_expand_keys
+        return [] unless @tree_default_expand_all
+
+        collect_keys(normalized_options)
+      end
+
+      def collect_keys(options, keys = [])
+        Array(options).each do |node|
+          keys << node[:key].to_s
+          collect_keys(node[:children], keys) if node[:children].present?
+        end
+        keys
+      end
+    end
+  end
+end

data/app/components/hakumi/typography/base_component.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Typography
+    class BaseComponent < Hakumi::BaseComponent
+      TYPES = [ :secondary, :success, :warning, :danger ].freeze
+
+      def initialize(
+        type: nil,
+        disabled: false,
+        mark: false,
+        code: false,
+        keyboard: false,
+        underline: false,
+        delete: false,
+        strong: false,
+        italic: false,
+        copyable: false,
+        copied_text: "Copied!",
+        copy_error_text: "Copy failed",
+        **html_options
+      )
+        @type = type
+        @disabled = disabled
+        @mark = mark
+        @code = code
+        @keyboard = keyboard
+        @underline = underline
+        @delete = delete
+        @strong = strong
+        @italic = italic
+        @copyable = copyable
+        @copied_text = copied_text
+        @copy_error_text = copy_error_text
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def call
+        content_tag(tag_name, content_wrapper, wrapper_attributes)
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:type, TYPES)
+      end
+
+      def tag_name
+        :span
+      end
+
+      def wrapper_classes
+        modifiers = {}
+        modifiers[@type] = true if @type
+        modifiers[:disabled] = true if @disabled
+
+        class_names(
+          "typography",
+          modifiers,
+          [ @html_options[:class] ]
+        )
+      end
+
+      def wrapper_attributes
+        attrs = {
+          class: wrapper_classes
+        }
+
+        if @copyable
+          attrs[:data] = {
+            controller: "hakumi--typography",
+            action: "click->hakumi--typography#copy",
+            "hakumi--typography-copied-text-value": @copied_text,
+            "hakumi--typography-error-text-value": @copy_error_text
+          }
+        end
+
+        merge_attributes(attrs, @html_options.except(:class))
+      end
+
+      def content_wrapper
+        text = content
+
+        # Apply wrappers in order
+        text = tag.strong(text) if @strong
+        text = tag.u(text) if @underline
+        text = tag.del(text) if @delete
+        text = tag.code(text) if @code
+        text = tag.mark(text) if @mark
+        text = tag.kbd(text) if @keyboard
+        text = tag.i(text) if @italic
+
+        if @copyable
+          safe_join([ text, copy_icon ])
+        else
+          text
+        end
+      end
+
+      def copy_icon
+        tag.span(class: "hakumi-typography-copy", role: "button", "aria-label": "Copy") do
+          render Hakumi::Icon::Component.new(name: :copy)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Typography
+    module Link
+      class Component < BaseComponent
+        def initialize(href:, target: nil, rel: nil, **html_options)
+          @href = href
+          @target = target
+          @rel = rel
+          super(**html_options)
+        end
+
+        private
+
+        def tag_name
+          :a
+        end
+
+        def wrapper_classes
+          super + " hakumi-typography-link"
+        end
+
+        def wrapper_attributes
+          attrs = super
+          attrs[:href] = @href
+          attrs[:target] = @target if @target
+          attrs[:rel] = @rel if @rel
+          attrs
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi/typography/paragraph/component.rb

@@ -0,0 +1,13 @@
+module Hakumi
+  module Typography
+    module Paragraph
+      class Component < BaseComponent
+        private
+
+        def tag_name
+          :div
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi/typography/text/component.rb

@@ -0,0 +1,8 @@
+module Hakumi
+  module Typography
+    module Text
+      class Component < BaseComponent
+      end
+    end
+  end
+end

data/app/components/hakumi/typography/title/component.rb

@@ -0,0 +1,29 @@
+module Hakumi
+  module Typography
+    module Title
+      class Component < BaseComponent
+        LEVELS = [ 1, 2, 3, 4, 5 ].freeze
+
+        def initialize(level: 1, **html_options)
+          @level = level
+          super(**html_options)
+        end
+
+        private
+
+        def validate_props!
+          super
+          validate_inclusion!(:level, LEVELS)
+        end
+
+        def tag_name
+          "h#{@level}"
+        end
+
+        def wrapper_classes
+          super + " hakumi-typography-h#{@level}"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,117 @@
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <input <%= tag.attributes(input_attributes) %>>
+
+  <% if list_type_avatar? %>
+    <div class="hakumi-upload-avatar-wrapper" data-hakumi--upload-target="avatarWrapper" data-action="click->hakumi--upload#triggerInput">
+      <%= render Hakumi::Avatar::Component.new(
+        icon: @avatar_icon,
+        size: @avatar_size,
+        shape: @avatar_shape,
+        data: { hakumi__upload_target: "avatar" }
+      ) %>
+      <div class="hakumi-upload-avatar-overlay <%= avatar_overlay_class %>">
+        <%= render Hakumi::Icon::Component.new(name: :camera, size: 20) %>
+        <span>Upload</span>
+      </div>
+    </div>
+  <% elsif @drag %>
+    <div class="hakumi-upload-dragger"
+         data-hakumi--upload-target="dropzone"
+         data-action="click->hakumi--upload#triggerInput dragover->hakumi--upload#dragOver dragleave->hakumi--upload#dragLeave drop->hakumi--upload#drop">
+      <div class="hakumi-upload-dragger-content">
+        <div class="hakumi-upload-dragger-icon">
+          <%= render Hakumi::Icon::Component.new(name: :upload) %>
+        </div>
+        <div class="hakumi-upload-dragger-title">Click or drag file to this area to upload</div>
+        <div class="hakumi-upload-dragger-hint">Support for a single or bulk upload.</div>
+      </div>
+
+      <div class="hakumi-upload-dragger-action">
+        <%= render Hakumi::Button::Component.new(
+          type: :primary,
+          disabled: @disabled,
+          data: { action: "click->hakumi--upload#triggerInput:stop" }
+        ) do %>
+          <%= action_label %>
+        <% end %>
+      </div>
+    </div>
+  <% elsif !inline_trigger? %>
+    <div class="hakumi-upload-select">
+      <%= render Hakumi::Button::Component.new(
+        type: :primary,
+        disabled: @disabled,
+        data: { action: "click->hakumi--upload#triggerInput" }
+      ) do %>
+        <%= action_label %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% if @show_upload_list %>
+    <ul class="<%= upload_list_classes %>" data-hakumi--upload-target="list">
+      <% normalized_file_list.each do |file| %>
+        <li class="<%= file_item_classes(file) %>" data-uid="<%= file[:uid] %>">
+          <div class="hakumi-upload-list-item-info">
+            <% if list_type_picture? && file[:url].present? %>
+              <span class="hakumi-upload-list-item-thumbnail">
+                <img src="<%= file[:url] %>" alt="<%= file[:name] %>">
+              </span>
+            <% end %>
+            <span class="hakumi-upload-list-item-name"><%= file[:name] %></span>
+            <% if @list_type == :picture_card %>
+              <%# Actions inside info for picture_card (absolute positioning overlay) %>
+              <div class="hakumi-upload-list-item-actions">
+                <% if file[:url].present? && file[:status] == "done" %>
+                  <button type="button"
+                          class="hakumi-upload-list-item-action hakumi-upload-list-item-view"
+                          data-action="click->hakumi--upload#previewFromEvent"
+                          data-uid="<%= file[:uid] %>">
+                    <%= render Hakumi::Icon::Component.new(name: :eye) %>
+                  </button>
+                <% end %>
+                <button type="button"
+                        class="hakumi-upload-list-item-action hakumi-upload-list-item-remove"
+                        data-action="click->hakumi--upload#removeFromEvent"
+                        data-uid="<%= file[:uid] %>">
+                  <%= render Hakumi::Icon::Component.new(name: :delete) %>
+                </button>
+              </div>
+            <% end %>
+          </div>
+
+          <% unless @list_type == :picture_card %>
+            <%# Actions outside info for text/picture list types %>
+            <div class="hakumi-upload-list-item-actions">
+              <% if list_type_picture? && file[:url].present? %>
+                <button type="button"
+                        class="hakumi-upload-list-item-action hakumi-upload-list-item-view"
+                        data-action="click->hakumi--upload#previewFromEvent"
+                        data-uid="<%= file[:uid] %>">
+                  <%= render Hakumi::Icon::Component.new(name: :eye) %>
+                </button>
+              <% end %>
+              <button type="button"
+                      class="hakumi-upload-list-item-action hakumi-upload-list-item-remove"
+                      data-action="click->hakumi--upload#removeFromEvent"
+                      data-uid="<%= file[:uid] %>">
+                <%= render Hakumi::Icon::Component.new(name: :delete) %>
+              </button>
+            </div>
+          <% end %>
+
+          <div class="hakumi-upload-list-item-progress" style="<%= progress_style(file) %>">
+            <div class="hakumi-upload-list-item-progress-bar"></div>
+          </div>
+        </li>
+      <% end %>
+
+      <% if inline_trigger? %>
+        <li class="hakumi-upload-list-item-trigger" data-hakumi--upload-target="inlineTrigger" data-action="click->hakumi--upload#triggerInput">
+          <%= render Hakumi::Icon::Component.new(name: :plus, size: 24) %>
+          <span>Upload</span>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+</div>