hakumi_components 0.1.17.pre → 0.1.19.pre

data/app/javascript/stylesheets/components/_table.scss

@@ -220,7 +220,7 @@
     align-items: center;
     justify-content: center;
 
-    &.is-expanded .hakumi-table-expand-icon {
+    &.hakumi-table-expand-button-expanded .hakumi-table-expand-icon {
       transform: rotate(45deg);
     }
   }
@@ -232,7 +232,7 @@
     border-right: 2px solid var(--table-muted-color);
     border-bottom: 2px solid var(--table-muted-color);
     transform: rotate(-45deg);
-    transition: transform 0.2s ease;
+    transition: transform $transition-duration-base ease;
   }
 
   &-expanded-row {
@@ -243,7 +243,7 @@
       vertical-align: top;
     }
 
-    &:not(.is-expanded) td {
+    &:not(.hakumi-table-row-expanded) td {
       padding: 0 !important;
     }
   }
@@ -307,7 +307,7 @@
     }
   }
 
-  &-size-middle {
+  &-size-default {
     .hakumi-table-thead th,
     .hakumi-table-tbody td,
     .hakumi-table-summary td {
@@ -346,7 +346,7 @@
     background: var(--table-row-bg);
     color: var(--table-text-color);
     font-size: inherit;
-    transition: border-color 0.2s, box-shadow 0.2s;
+    transition: border-color $transition-duration-base, box-shadow $transition-duration-base;
 
     &:focus {
       border-color: var(--color-primary, #1677ff);
@@ -373,7 +373,7 @@
   color: var(--table-muted-color);
   padding: 4px;
   border-radius: 4px;
-  transition: color 0.2s, background-color 0.2s;
+  transition: color $transition-duration-base, background-color $transition-duration-base;
 
   &:hover {
     color: var(--table-text-color);

data/app/javascript/stylesheets/components/_tag.scss

@@ -82,12 +82,12 @@
     &-checked {
       background: var(--color-primary);
       border-color: var(--color-primary);
-      color: #fff;
+      color: var(--color-text-inverse);
 
       &:hover {
         background: var(--color-primary-hover);
         border-color: var(--color-primary-hover);
-        color: #fff;
+        color: var(--color-text-inverse);
       }
     }
   }

data/app/javascript/stylesheets/components/_tooltip.scss

@@ -17,9 +17,9 @@
   max-width: 250px;
   visibility: hidden;
   opacity: 0;
-  transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
-              visibility 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),
-              transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: opacity $transition-duration-base $ease-in-out,
+              visibility $transition-duration-base $ease-in-out,
+              transform $transition-duration-base $ease-in-out;
   pointer-events: none;
 
   &-visible {
@@ -49,7 +49,7 @@
     min-width: 32px;
     min-height: 32px;
     padding: 6px 8px;
-    color: #fff;
+    color: var(--color-text-inverse);
     text-align: start;
     text-decoration: none;
     word-wrap: break-word;

data/app/javascript/stylesheets/components/_tree_select.scss

@@ -31,7 +31,7 @@
     background-color: var(--color-bg-container);
     border: 1px solid var(--color-border);
     border-radius: 6px;
-    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: all $transition-duration-base $ease-in-out;
     width: 100%;
     height: 32px;
     padding: 0 30px 0 11px;
@@ -96,7 +96,7 @@
     margin-top: -6px;
     font-size: 12px;
     pointer-events: none;
-    transition: transform 0.3s;
+    transition: transform $transition-duration-slow;
 
     .hakumi-tree-select-open & {
       transform: rotate(180deg);
@@ -121,7 +121,7 @@
     background: var(--hakumi-tree-select-clear-bg);
     cursor: pointer;
     opacity: 0;
-    transition: color 0.3s ease, opacity 0.15s ease;
+    transition: color $transition-duration-slow ease, opacity 0.15s ease;
 
     &:hover {
       color: var(--color-text-tertiary);

data/app/javascript/stylesheets/components/_typography.scss

@@ -26,7 +26,7 @@
         color: var(--color-link);
         cursor: pointer;
         text-decoration: none;
-        transition: color 0.2s;
+        transition: color $transition-duration-base;
 
         &:hover {
             color: var(--color-link-hover);
@@ -69,7 +69,7 @@
         margin-left: 4px;
         color: var(--color-link);
         cursor: pointer;
-        transition: color 0.2s;
+        transition: color $transition-duration-base;
 
         &:hover {
             color: var(--color-link-hover);
@@ -136,7 +136,7 @@ h5.hakumi-typography,
     pointer-events: none;
     z-index: 1070;
     opacity: 0;
-    transition: opacity 0.2s ease;
+    transition: opacity $transition-duration-base ease;
     box-shadow: var(--shadow-base);
 
     &.hakumi-typography-tooltip-success {

data/app/javascript/stylesheets/components/_upload.scss

@@ -308,7 +308,7 @@
           background: rgba(255, 255, 255, 0.2);
           border: none;
           border-radius: 50%;
-          color: #fff;
+          color: var(--color-text-inverse);
           cursor: pointer;
           font-size: 16px;
           transition: background-color $transition-duration-base $ease-in-out, transform $transition-duration-base $ease-in-out;
@@ -405,7 +405,7 @@
     background: rgba(255, 255, 255, 0.1);
     border: none;
     border-radius: 50%;
-    color: #fff;
+    color: var(--color-text-inverse);
     cursor: pointer;
     font-size: 18px;
     transition: background-color $transition-duration-base $ease-in-out;
@@ -431,7 +431,7 @@
     background: rgba(255, 255, 255, 0.1);
     border: none;
     border-radius: 50%;
-    color: #fff;
+    color: var(--color-text-inverse);
     cursor: pointer;
     font-size: 24px;
     transition: background-color $transition-duration-base $ease-in-out;
@@ -491,7 +491,7 @@
       background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(4px);
       -webkit-backdrop-filter: blur(4px);
-      color: #fff;
+      color: var(--color-text-inverse);
       font-size: 12px;
       font-weight: 500;
       opacity: 0;

data/app/services/hakumi_components/component_handler.rb

@@ -0,0 +1,124 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  class ComponentHandler
+    extend T::Sig
+
+    InputParams = T.type_alias { T.any(ActionController::Parameters, Types::HtmlAttributes) }
+    # T.untyped values: locals are passed as Rails view locals, which accept any object.
+    # The coerce_local_value method ensures only safe primitive values and containers pass through.
+    LocalsHash = T.type_alias { T::Hash[Symbol, T.untyped] }
+    UnsafeLocalValue = T.let(Object.new.freeze, Object)
+
+    COMPONENT_CLASSES = T.let({
+      admin_panel: HakumiComponents::AdminPanel::Component,
+      affix: HakumiComponents::Affix::Component,
+      alert: HakumiComponents::Alert::Component,
+      calendar: HakumiComponents::Calendar::Component,
+      confirm: HakumiComponents::Modal::Confirm::Component,
+      drawer: HakumiComponents::Drawer::Component,
+      message: HakumiComponents::Message::Component,
+      modal: HakumiComponents::Modal::Component,
+      notification: HakumiComponents::Notification::Component,
+      popconfirm: HakumiComponents::Popconfirm::Component,
+      popover: HakumiComponents::Popover::Component,
+      progress: HakumiComponents::Progress::Component,
+      qr_code: HakumiComponents::QrCode::Component,
+      result: HakumiComponents::Result::Component,
+      segmented: HakumiComponents::Segmented::Component,
+      skeleton: HakumiComponents::Skeleton::Component,
+      spin: HakumiComponents::Spin::Component,
+      statistic: HakumiComponents::Statistic::Component,
+      table: HakumiComponents::Table::Component,
+      tag: HakumiComponents::Tag::Component,
+      timeline: HakumiComponents::Timeline::Component,
+      transfer: HakumiComponents::Transfer::Component,
+      tree: HakumiComponents::Tree::Component
+    }.freeze, T::Hash[Symbol, T.class_of(ViewComponent::Base)])
+
+    sig { params(component: Types::StringOrSymbol, params: InputParams).void }
+    def initialize(component, params)
+      @component = T.let(component.to_sym, Symbol)
+      @params = T.let(params, InputParams)
+    end
+
+    sig { returns(LocalsHash) }
+    def locals
+      base_locals.merge(specific_locals)
+    end
+
+    private
+
+    sig { returns(LocalsHash) }
+    def base_locals
+      raw_id = HakumiComponents::BaseComponent.html_param(@params, :id)
+      id = if raw_id.is_a?(String)
+        raw_id.presence
+      elsif raw_id.is_a?(Symbol) || raw_id.is_a?(Numeric)
+        raw_id.to_s
+      end
+
+      {
+        id: id || "hakumi-#{@component}-#{SecureRandom.hex(4)}"
+      }
+    end
+
+    sig { returns(LocalsHash) }
+    def specific_locals
+      component_class = resolve_component_class
+      return {} unless component_class.respond_to?(:extract_controller_locals)
+
+      raw_locals = component_class.public_send(:extract_controller_locals, @params)
+      coerce_locals_hash(raw_locals).compact
+    end
+
+    sig { returns(T.nilable(T.class_of(ViewComponent::Base))) }
+    def resolve_component_class
+      COMPONENT_CLASSES[@component]
+    end
+
+    sig { params(raw_locals: T.untyped).returns(LocalsHash) }
+    def coerce_locals_hash(raw_locals)
+      return {} if raw_locals.nil?
+
+      raw_locals.each_with_object(T.let({}, LocalsHash)) do |(key, value), result|
+        next unless key.is_a?(Symbol)
+        coerced_value = coerce_local_value(value)
+        next if coerced_value.equal?(UnsafeLocalValue)
+
+        result[key] = coerced_value
+      end
+    end
+
+    sig { params(value: T.untyped).returns(T.untyped) }
+    def coerce_local_value(value)
+      return value if value.nil? || value.is_a?(String) || value.is_a?(Symbol) || value.is_a?(Numeric) || value.is_a?(TrueClass) || value.is_a?(FalseClass)
+      return coerce_array_value(value) if value.is_a?(Array)
+      return coerce_hash_value(value) if value.is_a?(Hash)
+
+      UnsafeLocalValue
+    end
+
+    sig { params(value: T::Array[T.untyped]).returns(T::Array[T.untyped]) }
+    def coerce_array_value(value)
+      value.each_with_object(T.let([], T::Array[T.untyped])) do |item, result|
+        coerced_item = coerce_local_value(item)
+        next if coerced_item.equal?(UnsafeLocalValue)
+
+        result << coerced_item
+      end
+    end
+
+    sig { params(value: T::Hash[T.untyped, T.untyped]).returns(T::Hash[T.untyped, T.untyped]) }
+    def coerce_hash_value(value)
+      value.each_with_object(T.let({}, T::Hash[T.untyped, T.untyped])) do |(key, item), result|
+        next unless key.is_a?(String) || key.is_a?(Symbol) || key.is_a?(Numeric)
+        coerced_item = coerce_local_value(item)
+        next if coerced_item.equal?(UnsafeLocalValue)
+
+        result[key] = coerced_item
+      end
+    end
+  end
+end

data/app/services/hakumi_components/icon/loader.rb

@@ -0,0 +1,112 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Icon
+    class Loader
+      extend T::Sig
+
+      Cache = T.type_alias { T::Hash[String, T.nilable(String)] }
+      @@cache = T.let({}, Cache)
+      ICONS_BASE_PATH = T.let(
+        if defined?(HakumiComponents::Engine)
+          HakumiComponents::Engine.root.join("app", "assets", "icons")
+        else
+          ::Rails.root.join("app", "assets", "icons")
+        end,
+        Pathname
+      )
+
+      sig { returns(Cache) }
+      def self.cache
+        @@cache
+      end
+
+      sig { params(name: T.nilable(Types::StringOrSymbol), theme: Symbol).returns(T.nilable(String)) }
+      def self.load(name, theme = :outlined)
+        return nil if name.nil?
+
+        cache_key = "#{name}_#{theme}"
+        return cache[cache_key] if cache.key?(cache_key)
+
+        svg = read_icon_file(name, theme)
+        cache[cache_key] = svg
+        svg
+      end
+
+      sig { params(name: T.nilable(Types::StringOrSymbol), theme: Symbol).returns(T::Boolean) }
+      def self.exists?(name, theme = :outlined)
+        !load(name, theme).nil?
+      end
+
+      sig { params(theme: Symbol).returns(T::Array[String]) }
+      def self.list_icons(theme = :outlined)
+        theme_dir = theme_directory(theme)
+        return [] unless theme_dir.exist?
+
+        Dir.glob(theme_dir.join("*.svg").to_s).map do |path|
+          File.basename(path, ".svg").gsub("-", "_")
+        end.sort
+      end
+
+      sig { void }
+      def self.clear_cache!
+        @@cache = {}
+      end
+
+      sig { params(name: Types::StringOrSymbol, theme: Symbol).returns(T.nilable(String)) }
+      def self.read_icon_file(name, theme)
+        filepath = icon_filepath(name, theme)
+        return nil unless filepath.exist?
+
+        svg_content = File.read(filepath)
+        enhance_svg(svg_content)
+      rescue => e
+        ::Rails.logger.error("Error loading icon #{name} (#{theme}): #{e.message}")
+        nil
+      end
+
+      sig { params(name: Types::StringOrSymbol, theme: Symbol).returns(Pathname) }
+      def self.icon_filepath(name, theme)
+        theme_dir = theme_directory(theme)
+        filename = kebabize(name.to_s)
+        theme_dir.join("#{filename}.svg")
+      end
+
+      sig { params(theme: Symbol).returns(Pathname) }
+      def self.theme_directory(theme)
+        theme_str = case theme.to_sym
+        when :outlined then "outlined"
+        when :filled then "filled"
+        when :two_tone, :twotone then "twotone"
+        else "outlined"
+        end
+
+        ICONS_BASE_PATH.join(theme_str)
+      end
+
+      sig { params(svg_content: String).returns(String) }
+      def self.enhance_svg(svg_content)
+        svg = svg_content.dup
+
+        svg.sub!("<svg", '<svg width="1em"') unless svg.include?("width=")
+        svg.sub!("<svg", '<svg height="1em"') unless svg.include?("height=")
+        svg.sub!("<svg", '<svg fill="currentColor"') unless svg.include?("fill=")
+
+        svg
+      end
+
+      sig { params(str: String).returns(String) }
+      def self.kebabize(str)
+        str.gsub(/::/, "/")
+           .gsub(/([A-Z]+)([A-Z][a-z])/, '\1-\2')
+           .gsub(/([a-z\d])([A-Z])/, '\1-\2')
+           .tr("_", "-")
+           .downcase
+      end
+
+      private_class_method :read_icon_file, :icon_filepath, :theme_directory, :enhance_svg, :kebabize
+    end
+  end
+end
+HakumiIconLoader = HakumiComponents::Icon::Loader unless defined?(HakumiIconLoader)

data/app/services/hakumi_components/illustrations/loader.rb

@@ -0,0 +1,51 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Illustrations
+    class Loader
+      extend T::Sig
+
+      Cache = T.type_alias { T::Hash[String, T.nilable(ActiveSupport::SafeBuffer)] }
+      @@cache = T.let({}, Cache)
+      ILLUSTRATIONS_PATH = T.let(
+        if defined?(HakumiComponents::Engine)
+          HakumiComponents::Engine.root.join("app", "assets", "illustrations")
+        else
+          ::Rails.root.join("lib", "hakumi_components", "app", "assets", "illustrations")
+        end,
+        Pathname
+      )
+
+      sig { params(name: String).returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def self.load(name)
+        filename = "#{name}.svg"
+        cache[filename] ||= read_svg(filename)
+      end
+
+      sig { void }
+      def self.clear_cache!
+        @@cache = {}
+      end
+
+      sig { returns(Cache) }
+      def self.cache
+        @@cache
+      end
+
+      sig { params(filename: String).returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def self.read_svg(filename)
+        path = ILLUSTRATIONS_PATH.join(filename)
+        return nil unless path.exist?
+
+        ActiveSupport::SafeBuffer.new(File.read(path))
+      rescue => e
+        ::Rails.logger.error("Error loading illustration #{filename}: #{e.message}")
+        nil
+      end
+
+      private_class_method :cache, :read_svg
+    end
+  end
+end
+HakumiIllustrationLoader = HakumiComponents::Illustrations::Loader unless defined?(HakumiIllustrationLoader)

data/app/views/hakumi/_admin_panel.html.erb

@@ -1 +1 @@
-<%= render Hakumi::AdminPanel::Component.new(**local_assigns) %>
+<%= render HakumiComponents::AdminPanel::Component.new(**local_assigns) %>

data/app/views/hakumi/_affix.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Affix::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Affix::Component.new(**local_assigns) %>

data/app/views/hakumi/_alert.html.erb

@@ -1 +1,4 @@
-<%= render Hakumi::Alert::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Alert::Component.new(**local_assigns.except(:message_text, :description_text, :title, :message, :description).merge(
+  message_text: local_assigns[:message_text] || local_assigns[:message],
+  description_text: local_assigns[:description_text] || local_assigns[:description]
+).compact) %>

data/app/views/hakumi/_confirm.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Modal::Confirm::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Modal::Confirm::Component.new(**local_assigns) %>

data/app/views/hakumi/_drawer.html.erb

@@ -1,6 +1,6 @@
-<%= render Hakumi::Drawer::Component.new(
+<%= render HakumiComponents::Drawer::Component.new(
   id: local_assigns[:id],
-  open: local_assigns[:open],
+  open: local_assigns.fetch(:open, false),
   placement: local_assigns[:placement] || :right,
   size: local_assigns[:size] || :default,
   width: local_assigns[:width],

data/app/views/hakumi/_message.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Message::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Message::Component.new(**local_assigns) %>

data/app/views/hakumi/_modal.html.erb

@@ -7,7 +7,7 @@
   component_params = local_assigns.except(:title, :message).compact
 %>
 
-<%= render(Hakumi::Modal::Component.new(**component_params)) do |modal| %>
+<%= render(HakumiComponents::Modal::Component.new(**component_params)) do |modal| %>
   <% if title.present? %>
     <% modal.with_header { title } %>
   <% end %>

data/app/views/hakumi/_notification.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Notification::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Notification::Component.new(**local_assigns) %>

data/app/views/hakumi/_popconfirm.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Popconfirm::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Popconfirm::Component.new(**local_assigns) %>

data/app/views/hakumi/_popover.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Popover::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Popover::Component.new(**local_assigns) %>

data/app/views/hakumi/_qr_code.html.erb

@@ -1 +1 @@
-<%= render Hakumi::QrCode::Component.new(**local_assigns) %>
+<%= render HakumiComponents::QrCode::Component.new(**local_assigns) %>

data/app/views/hakumi/_result.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Result::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Result::Component.new(**local_assigns) %>

data/app/views/hakumi/_segmented.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Segmented::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Segmented::Component.new(**local_assigns) %>

data/app/views/hakumi/_skeleton.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Skeleton::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Skeleton::Component.new(**local_assigns) %>

data/app/views/hakumi/_spin.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Spin::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Spin::Component.new(**local_assigns) %>

data/app/views/hakumi/_statistic.html.erb

@@ -1,13 +1,13 @@
-<%= render Hakumi::Statistic::Component.new(
-  id: id,
-  title: title,
-  value: value,
-  precision: precision,
-  prefix: prefix,
-  suffix: suffix,
-  animated: animated,
-  duration: duration,
-  countdown: countdown,
-  format: format,
-  aria_label: aria_label
+<%= render HakumiComponents::Statistic::Component.new(
+  id: local_assigns[:id],
+  title: local_assigns[:title],
+  value: local_assigns[:value],
+  precision: local_assigns[:precision],
+  prefix: local_assigns[:prefix],
+  suffix: local_assigns[:suffix],
+  animated: local_assigns.fetch(:animated, false),
+  duration: local_assigns.fetch(:duration, 800),
+  countdown: local_assigns.fetch(:countdown, false),
+  format: local_assigns[:format],
+  aria_label: local_assigns[:aria_label]
 ) %>

data/app/views/hakumi/_table.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Table::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Table::Component.new(**local_assigns) %>

data/app/views/hakumi/_tag.html.erb

@@ -1,3 +1,3 @@
-<%= render Hakumi::Tag::Component.new(**local_assigns.except(:content)) do %>
+<%= render HakumiComponents::Tag::Component.new(**local_assigns.except(:content)) do %>
   <%= local_assigns[:content] %>
 <% end %>

data/app/views/hakumi/_timeline.html.erb

@@ -1,7 +1,7 @@
 <% timeline_locals = local_assigns.except(:items) %>
 <% timeline_items = Array(local_assigns[:items]) %>
 
-<%= render Hakumi::Timeline::Component.new(**timeline_locals) do |timeline| %>
+<%= render HakumiComponents::Timeline::Component.new(**timeline_locals) do |timeline| %>
   <% timeline_items.each do |item| %>
     <% item = item.with_indifferent_access %>
     <% content = item.delete(:content) || item.delete(:body) %>

data/app/views/hakumi/_tree.html.erb

@@ -1 +1 @@
-<%= render Hakumi::Tree::Component.new(**local_assigns) %>
+<%= render HakumiComponents::Tree::Component.new(**local_assigns) %>