hakumi_components 0.1.17.pre → 0.1.19.pre

data/app/components/hakumi_components/button/component.rb

@@ -0,0 +1,163 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Button
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      IconValue = T.type_alias { T.nilable(T.any(String, Symbol, ActiveSupport::SafeBuffer, ViewComponent::Base)) }
+
+      TYPES = T.let([ :primary, :default, :dashed, :text, :link ].freeze, T::Array[Symbol])
+      SHAPES = T.let([ :default, :circle, :round ].freeze, T::Array[Symbol])
+      HTML_TYPES = T.let([ :button, :submit, :reset ].freeze, T::Array[Symbol])
+
+      sig do
+        params(
+          type: Symbol,
+          size: Symbol,
+          html_type: Symbol,
+          href: T.nilable(String),
+          disabled: T::Boolean,
+          loading: T::Boolean,
+          danger: T::Boolean,
+          block: T::Boolean,
+          icon: IconValue,
+          shape: Symbol,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        type: :default,
+        size: :default,
+        html_type: :button,
+        href: nil,
+        disabled: false,
+        loading: false,
+        danger: false,
+        block: false,
+        icon: nil,
+        shape: :default,
+        **html_options
+      )
+        @type = type
+        @size = size
+        @html_type = html_type
+        @href = href
+        @disabled = T.let(disabled, T::Boolean)
+        @loading = T.let(loading, T::Boolean)
+        @danger = T.let(danger, T::Boolean)
+        @block = T.let(block, T::Boolean)
+        @icon = T.let(icon, IconValue)
+        @shape = shape
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+
+        validate_props!
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
+      def call
+        content_tag(tag_name, content_wrapper, wrapper_attributes)
+      end
+
+      private
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:type, TYPES)
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:shape, SHAPES)
+        validate_inclusion!(:html_type, HTML_TYPES)
+      end
+
+      sig { returns(Symbol) }
+      def tag_name
+        @href ? :a : :button
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        modifiers = {
+          @type => true,
+          small: @size == :small,
+          large: @size == :large,
+          loading: @loading,
+          danger: @danger,
+          block: @block,
+          "icon-only": content.blank? && @icon.present?
+        }
+
+        modifiers[@shape] = true if @shape != :default
+
+        class_names("button", modifiers, [ html_class_name ])
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        disabled = interaction_disabled?
+        attrs = {
+          class: wrapper_classes,
+          data: {
+            controller: "hakumi--button",
+            hakumi__button_loading_value: @loading
+          }
+        }
+        attrs[:"aria-busy"] = "true" if @loading
+
+        if @href
+          attrs[:href] = disabled ? nil : @href
+          attrs[:role] = "button" if disabled
+          attrs[:"aria-disabled"] = "true" if disabled
+        else
+          attrs[:type] = @html_type
+          attrs[:disabled] = true if disabled
+        end
+
+        merge_attributes(attrs, @html_options.except(:class))
+      end
+
+      sig { returns(T::Boolean) }
+      def interaction_disabled?
+        @disabled || @loading
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
+      def content_wrapper
+        safe_join([
+          icon_element,
+          text_element
+        ].compact)
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def icon_element
+        return loading_icon if @loading
+        return nil unless @icon
+
+        if @icon.is_a?(String) || @icon.is_a?(Symbol)
+          render HakumiComponents::Icon::Component.new(name: @icon)
+        else
+          render(@icon)
+        end
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
+      def loading_icon
+        render HakumiComponents::Icon::Component.new(name: :loading, spin: true)
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def text_element
+        return nil if content.blank?
+
+        tag.span(content)
+      end
+
+      sig { returns(T.nilable(String)) }
+      def html_class_name
+        css_class = @html_options[:class]
+        css_class.is_a?(String) ? css_class : nil
+      end
+    end
+  end
+end

data/app/components/{hakumi → hakumi_components}/calendar/component.html.erb

@@ -8,10 +8,10 @@
       <% else %>
         <div class="hakumi-calendar-header-left">
           <% if show_year_select? %>
-            <%= render Hakumi::Select::Component.new(
+            <%= render HakumiComponents::Select::Component.new(
               value: current_year,
-              options: years_range.map { |y| [y.to_s, y] },
-              size: fullscreen? ? :middle : :small,
+              options: years_range.map { |year| [year.to_s, year] },
+              size: fullscreen? ? :default : :small,
               standalone: true,
               style: "width: 100px;",
               data: { "hakumi--calendar-target": "yearSelect", action: "hakumi--select:change->hakumi--calendar#changeYear" }
@@ -19,10 +19,10 @@
           <% end %>
 
           <% if show_month_select? %>
-            <%= render Hakumi::Select::Component.new(
+            <%= render HakumiComponents::Select::Component.new(
               value: current_month,
-              options: month_names.each_with_index.map { |name, i| [name, i + 1] },
-              size: fullscreen? ? :middle : :small,
+              options: month_names.each_with_index.map { |name, index| [name, index + 1] },
+              size: fullscreen? ? :default : :small,
               standalone: true,
               style: "width: 120px;",
               data: { "hakumi--calendar-target": "monthSelect", action: "hakumi--select:change->hakumi--calendar#changeMonth" }
@@ -31,14 +31,14 @@
 
           <% if decade_mode? %>
             <div style="display: flex; align-items: center; gap: 8px;">
-              <%= render Hakumi::Button::Component.new(
+              <%= render HakumiComponents::Button::Component.new(
                 icon: :left,
                 type: :text,
                 size: :small,
                 data: { action: "click->hakumi--calendar#prevDecade" }
               ) %>
               <span style="font-weight: 500; color: var(--color-text); min-width: 100px; text-align: center;"><%= decade_range_label %></span>
-              <%= render Hakumi::Button::Component.new(
+              <%= render HakumiComponents::Button::Component.new(
                 icon: :right,
                 type: :text,
                 size: :small,
@@ -50,13 +50,13 @@
 
         <% if show_mode_switch? %>
           <div class="hakumi-calendar-header-right">
-            <%= render Hakumi::Segmented::Component.new(
+            <%= render HakumiComponents::Segmented::Component.new(
               options: [
                 { label: "Month", value: "month" },
                 { label: "Year", value: "year" }
               ],
               value: @mode.to_s,
-              size: fullscreen? ? :middle : :small,
+              size: fullscreen? ? :default : :small,
               data: { "hakumi--calendar-target": "modeSegmented", action: "hakumi--segmented:change->hakumi--calendar#changeMode" }
             ) %>
           </div>
@@ -82,20 +82,20 @@
         </thead>
         <tbody class="hakumi-calendar-tbody">
           <% weeks_in_month.each do |week| %>
-            <tr class="hakumi-calendar-row <%= 'hakumi-calendar-row-selected' if week[:week_selected] %>">
+            <tr class="hakumi-calendar-row <%= 'hakumi-calendar-row-selected' if week.week_selected? %>">
               <% if show_week? %>
                 <td class="hakumi-calendar-cell hakumi-calendar-cell-week"
                     data-action="click->hakumi--calendar#selectWeek">
-                  <div class="hakumi-calendar-week-number"><%= week[:week_number] %></div>
+                  <div class="hakumi-calendar-week-number"><%= week.week_number %></div>
                 </td>
               <% end %>
-              <% week[:days].each do |day_info| %>
-                <td class="<%= cell_classes(day_info[:date]) %>"
-                    data-date="<%= day_info[:date].iso8601 %>"
+              <% week.days.each do |day_info| %>
+                <td class="<%= cell_classes(day_info) %>"
+                    data-date="<%= day_info.date.iso8601 %>"
                     data-action="click->hakumi--calendar#selectDate">
                   <div class="hakumi-calendar-date">
-                    <div class="hakumi-calendar-date-value"><%= day_info[:day] %></div>
-                    <% custom_content = render_date_cell(day_info[:date]) %>
+                    <div class="hakumi-calendar-date-value"><%= day_info.day %></div>
+                    <% custom_content = render_date_cell(day_info.date) %>
                     <% if custom_content %>
                       <div class="hakumi-calendar-date-content"><%= custom_content %></div>
                     <% end %>
@@ -112,11 +112,11 @@
           <div class="hakumi-calendar-month-panel-row">
             <% row.each do |month_info| %>
               <div class="<%= month_cell_classes(month_info) %>"
-                   data-month="<%= month_info[:month] %>"
+                   data-month="<%= month_info.value %>"
                    data-action="click->hakumi--calendar#selectMonth">
                 <div class="hakumi-calendar-month-cell-inner">
-                  <div class="hakumi-calendar-month-value"><%= month_info[:short_name] %></div>
-                  <% custom_content = render_month_cell(month_info[:month]) %>
+                  <div class="hakumi-calendar-month-value"><%= month_info.label %></div>
+                  <% custom_content = render_month_cell(month_info.value) %>
                   <% if custom_content %>
                     <div class="hakumi-calendar-month-content"><%= custom_content %></div>
                   <% end %>
@@ -132,10 +132,10 @@
           <div class="hakumi-calendar-quarter-panel-row">
             <% row.each do |quarter_info| %>
               <div class="<%= quarter_cell_classes(quarter_info) %>"
-                   data-quarter="<%= quarter_info[:quarter] %>"
+                   data-quarter="<%= quarter_info.value %>"
                    data-action="click->hakumi--calendar#selectQuarter">
                 <div class="hakumi-calendar-quarter-cell-inner">
-                  <div class="hakumi-calendar-quarter-value"><%= quarter_info[:label] %></div>
+                  <div class="hakumi-calendar-quarter-value"><%= quarter_info.label %></div>
                 </div>
               </div>
             <% end %>
@@ -148,10 +148,10 @@
           <div class="hakumi-calendar-year-panel-row">
             <% row.each do |year_info| %>
               <div class="<%= year_cell_classes(year_info) %>"
-                   data-year="<%= year_info[:year] %>"
+                   data-year="<%= year_info.value %>"
                    data-action="click->hakumi--calendar#selectYear">
                 <div class="hakumi-calendar-year-cell-inner">
-                  <div class="hakumi-calendar-year-value"><%= year_info[:year] %></div>
+                  <div class="hakumi-calendar-year-value"><%= year_info.label %></div>
                 </div>
               </div>
             <% end %>