hakumi_components 0.1.18.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

@@ -1,52 +1,123 @@
+# 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 = component.to_sym
-      @params = 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: @params[:id].presence || "hakumi-#{@component}-#{SecureRandom.hex(4)}"
+        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)
 
-      component_class.extract_controller_locals(@params)
+      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
-      case @component
-      when :modal then HakumiComponents::Modal::Component
-      when :confirm then HakumiComponents::Modal::Confirm::Component
-      when :alert then HakumiComponents::Alert::Component
-      when :drawer then HakumiComponents::Drawer::Component
-      when :message then HakumiComponents::Message::Component
-      when :notification then HakumiComponents::Notification::Component
-      when :popover then HakumiComponents::Popover::Component
-      when :progress then HakumiComponents::Progress::Component
-      when :result then HakumiComponents::Result::Component
-      when :skeleton then HakumiComponents::Skeleton::Component
-      when :spin then HakumiComponents::Spin::Component
-      when :qr_code then HakumiComponents::QrCode::Component
-      when :affix then HakumiComponents::Affix::Component
-      when :segmented then HakumiComponents::Segmented::Component
-      when :statistic then HakumiComponents::Statistic::Component
-      when :tag then HakumiComponents::Tag::Component
-      when :timeline then HakumiComponents::Timeline::Component
-      when :tree then HakumiComponents::Tree::Component
-      else nil
+      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

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

@@ -1,94 +1,111 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Icon
-    # Loads Ant Design icons from lib/hakumi_components/app/assets/icons
     class Loader
-      ICONS_BASE_PATH = if defined?(HakumiComponents::Engine)
-        HakumiComponents::Engine.root.join("app", "assets", "icons")
-      else
-        Rails.root.join("app", "assets", "icons")
+      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
 
-      class << self
-        def 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?
 
-        def load(name, theme = :outlined)
-          cache_key = "#{name}_#{theme}"
-          return cache[cache_key] if cache.key?(cache_key)
+        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
+        svg = read_icon_file(name, theme)
+        cache[cache_key] = svg
+        svg
+      end
 
-        def exists?(name, theme = :outlined)
-          !load(name, theme).nil?
-        end
+      sig { params(name: T.nilable(Types::StringOrSymbol), theme: Symbol).returns(T::Boolean) }
+      def self.exists?(name, theme = :outlined)
+        !load(name, theme).nil?
+      end
 
-        def list_icons(theme = :outlined)
-          theme_dir = theme_directory(theme)
-          return [] unless theme_dir.exist?
+      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")).map do |path|
-            File.basename(path, ".svg").gsub("-", "_")
-          end.sort
-        end
+        Dir.glob(theme_dir.join("*.svg").to_s).map do |path|
+          File.basename(path, ".svg").gsub("-", "_")
+        end.sort
+      end
 
-        def clear_cache!
-          @cache = {}
-        end
+      sig { void }
+      def self.clear_cache!
+        @@cache = {}
+      end
 
-        private
+      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?
 
-        def 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
 
-          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
 
-        def icon_filepath(name, theme)
-          theme_dir = theme_directory(theme)
-          filename = kebabize(name.to_s)
-          theme_dir.join("#{filename}.svg")
+      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
 
-        def 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
+        ICONS_BASE_PATH.join(theme_str)
+      end
 
-        def enhance_svg(svg_content)
-          svg = svg_content.dup
+      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.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
+        svg
+      end
 
-        def kebabize(str)
-          str.gsub(/::/, "/")
-             .gsub(/([A-Z]+)([A-Z][a-z])/, '\1-\2')
-             .gsub(/([a-z\d])([A-Z])/, '\1-\2')
-             .tr("_", "-")
-             .downcase
-        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

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

@@ -1,42 +1,50 @@
+# typed: strict
 # frozen_string_literal: true
 
 module HakumiComponents
   module Illustrations
-    # Loads SVG illustrations stored under lib/hakumi_components/app/assets/illustrations
     class Loader
-      ILLUSTRATIONS_PATH = if defined?(HakumiComponents::Engine)
-        HakumiComponents::Engine.root.join("app", "assets", "illustrations")
-      else
-        Rails.root.join("lib", "hakumi_components", "app", "assets", "illustrations")
-      end
+      extend T::Sig
 
-      class << self
-        def load(name)
-          filename = "#{name}.svg"
-          cache[filename] ||= read_svg(filename)
-        end
+      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
+      )
 
-        def clear_cache!
-          @cache = {}
-        end
+      sig { params(name: String).returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def self.load(name)
+        filename = "#{name}.svg"
+        cache[filename] ||= read_svg(filename)
+      end
 
-        private
+      sig { void }
+      def self.clear_cache!
+        @@cache = {}
+      end
 
-        def cache
-          @cache ||= {}
-        end
+      sig { returns(Cache) }
+      def self.cache
+        @@cache
+      end
 
-        def read_svg(filename)
-          path = ILLUSTRATIONS_PATH.join(filename)
-          return nil unless path.exist?
+      sig { params(filename: String).returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def self.read_svg(filename)
+        path = ILLUSTRATIONS_PATH.join(filename)
+        return nil unless path.exist?
 
-          svg = File.read(path)
-          svg.respond_to?(:html_safe) ? svg.html_safe : svg
-        rescue => e
-          ::Rails.logger.error("Error loading illustration #{filename}: #{e.message}")
-          nil
-        end
+        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

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

@@ -1 +1,4 @@
-<%= render HakumiComponents::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/_drawer.html.erb

@@ -1,6 +1,6 @@
 <%= 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/_statistic.html.erb

@@ -1,13 +1,13 @@
 <%= render HakumiComponents::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
+  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]
 ) %>