hakumi_components 0.1.17.pre → 0.1.19.pre

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

@@ -0,0 +1,228 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Autocomplete
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      include HakumiComponents::Concerns::SelectionControl
+
+      InputRenderer = T.type_alias do
+        T.proc.params(attrs: Types::HtmlAttributes).returns(T.any(String, ActiveSupport::SafeBuffer))
+      end
+
+      VARIANTS = T.let(%i[outlined filled borderless underlined].freeze, T::Array[Symbol])
+      STATUSES = T.let(%i[error warning].freeze, T::Array[Symbol])
+      FILTER_MODES = T.let(%i[contains starts_with].freeze, T::Array[Symbol])
+
+      sig do
+        params(
+          name: Types::FormFieldName,
+          options: T.nilable(T::Array[HakumiComponents::SelectionControl::Coercion::EntryInput]),
+          label: T.nilable(String),
+          caption: T.nilable(String),
+          value: Types::FormFieldValue,
+          placeholder: T.nilable(String),
+          size: Symbol,
+          variant: Symbol,
+          status: T.nilable(Symbol),
+          disabled: T::Boolean,
+          required: T::Boolean,
+          allow_clear: T::Boolean,
+          clear_icon: Types::StringOrSymbol,
+          input_renderer: T.nilable(InputRenderer),
+          case_sensitive: T::Boolean,
+          filter_mode: Symbol,
+          not_found_content: T.nilable(String),
+          standalone: T::Boolean,
+          rules: T.nilable(T::Array[Types::ValidationRule]),
+          errors: Types::FormFieldErrors,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        name:,
+        options: [],
+        label: nil,
+        caption: nil,
+        value: nil,
+        placeholder: nil,
+        size: :default,
+        variant: :outlined,
+        status: nil,
+        disabled: false,
+        required: false,
+        allow_clear: false,
+        clear_icon: :close_circle,
+        input_renderer: nil,
+        case_sensitive: false,
+        filter_mode: :contains,
+        not_found_content: nil,
+        standalone: true,
+        rules: nil,
+        errors: [],
+        **html_options
+      )
+        @name = T.let(name, Types::FormFieldName)
+        @options = T.let(HakumiComponents::SelectionControl::Coercion.entries(Array(options)), T::Array[HakumiComponents::SelectionControl::Entry])
+        @label = label
+        @caption = caption
+        @value = T.let(value, Types::FormFieldValue)
+        @placeholder = placeholder
+        @size = size
+        @variant = variant
+        @status = status
+        @disabled = disabled
+        @required = required
+        @allow_clear = allow_clear
+        @clear_icon = clear_icon
+        @input_renderer = T.let(input_renderer, T.nilable(InputRenderer))
+        @case_sensitive = case_sensitive
+        @filter_mode = filter_mode
+        @not_found_content = not_found_content
+        @standalone = standalone
+        @rules = T.let(rules, T.nilable(T::Array[Types::ValidationRule]))
+        @errors = T.let(errors, Types::FormFieldErrors)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+        initialize_selection_control_contract!(
+          name: @name,
+          label: @label,
+          caption: @caption,
+          value: @value,
+          placeholder: @placeholder,
+          size: @size,
+          disabled: @disabled,
+          allow_clear: @allow_clear,
+          required: @required,
+          standalone: @standalone,
+          errors: @errors,
+          html_options: @html_options,
+          rules: @rules
+        )
+
+        validate_props!
+      end
+
+      private
+
+      sig { returns(T::Array[HakumiComponents::SelectionControl::Entry]) }
+      attr_reader :options
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:variant, VARIANTS)
+        validate_inclusion!(:filter_mode, FILTER_MODES)
+        validate_inclusion!(:status, STATUSES) if @status
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        class_names(
+          "auto-complete",
+          {
+            selection_control_size => selection_control_size != :default,
+            "status-error": @status == :error,
+            "status-warning": @status == :warning,
+            "varihakumi-outlined": @variant == :outlined,
+            "varihakumi-filled": @variant == :filled,
+            "varihakumi-borderless": @variant == :borderless,
+            "varihakumi-underlined": @variant == :underlined,
+            disabled: selection_control_disabled
+          },
+          [ selection_control_html_class_name ]
+        )
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        base_attrs = {
+          class: wrapper_classes,
+          data: {
+            controller: "hakumi--autocomplete",
+            "hakumi--autocomplete-case-sensitive-value": @case_sensitive,
+            "hakumi--autocomplete-filter-mode-value": @filter_mode.to_s,
+            "hakumi--autocomplete-disabled-value": selection_control_disabled
+          }
+        }
+
+        merge_attributes(base_attrs, selection_control_html_options_without_class)
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def input_attributes
+        attrs = {
+          type: "text",
+          name: form_field_name,
+          id: input_id,
+          value: selection_control_value,
+          placeholder: selection_control_placeholder,
+          disabled: selection_control_disabled ? true : nil,
+          autocomplete: "off",
+          spellcheck: "false",
+          "aria-autocomplete": "list",
+          "aria-controls": dropdown_id,
+          "aria-expanded": "false",
+          "aria-haspopup": "listbox",
+          "aria-invalid": error? ? "true" : nil,
+          "aria-describedby": describedby_ids,
+          data: {
+            action: "input->hakumi--autocomplete#onInput keydown->hakumi--autocomplete#onKeydown focus->hakumi--autocomplete#open blur->hakumi--autocomplete#onBlur",
+            "hakumi--autocomplete-target": "input"
+          }
+        }.compact
+
+        attrs[:class] = input_classes unless custom_input_renderer?
+        attrs
+      end
+
+      sig { returns(String) }
+      def input_classes
+        classes = T.let([ "hakumi-input" ], T::Array[String])
+        classes << "hakumi-input-#{selection_control_size}" if selection_control_size != :default
+        classes.join(" ")
+      end
+
+      sig { returns(String) }
+      def dropdown_id
+        "#{input_id}_autocomplete_dropdown"
+      end
+
+      sig { returns(T::Boolean) }
+      def allow_clear?
+        selection_control_allow_clear
+      end
+
+      sig { returns(T::Boolean) }
+      def custom_input_renderer?
+        !@input_renderer.nil?
+      end
+
+      sig { returns(T.nilable(InputRenderer)) }
+      def input_renderer
+        @input_renderer
+      end
+
+      sig { returns(T::Boolean) }
+      def disabled?
+        selection_control_disabled
+      end
+
+      sig { returns(Types::StringOrSymbol) }
+      def clear_icon
+        @clear_icon
+      end
+
+      sig { returns(String) }
+      def not_found_content
+        @not_found_content || t_default(:not_found, default: "No options")
+      end
+
+      sig { returns(T::Array[HakumiComponents::SelectionControl::Entry]) }
+      def normalized_items
+        options
+      end
+    end
+  end
+end

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

@@ -0,0 +1,124 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Avatar
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      SHAPES = T.let([ :circle, :square ].freeze, T::Array[Symbol])
+
+      sig do
+        params(
+          shape: Symbol,
+          size: T.any(Symbol, Integer),
+          src: T.nilable(String),
+          icon: T.nilable(Types::StringOrSymbol),
+          alt: T.nilable(String),
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(
+        shape: :circle,
+        size: :default,
+        src: nil,
+        icon: nil,
+        alt: nil,
+        **html_options
+      )
+        @shape = shape
+        @size = size
+        @src = src
+        @icon = T.let(icon, T.nilable(Types::StringOrSymbol))
+        @alt = alt
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+
+        validate_props!
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
+      def call
+        content_tag(:span, content_wrapper, wrapper_attributes)
+      end
+
+      private
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:shape, SHAPES)
+        validate_inclusion!(:size, SIZES) unless @size.is_a?(Integer)
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        class_names(
+          "avatar",
+          {
+            @shape => true,
+            lg: @size == :large,
+            sm: @size == :small,
+            icon: @icon.present? && @src.blank?,
+            image: @src.present?
+          },
+          [ html_class_name ]
+        )
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
+      def content_wrapper
+        if @src
+          image_tag(@src, alt: @alt, width: avatar_size, height: avatar_size)
+        elsif @icon
+          render HakumiComponents::Icon::Component.new(name: @icon, size: nil)
+        else
+          tag.span(content, data: { hakumi__avatar_text_target: "text" })
+        end
+      end
+
+      sig { returns(Integer) }
+      def avatar_size
+        case @size
+        when :large then 40
+        when :small then 24
+        when Integer then @size
+        else 32
+        end
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        attrs = {
+          class: wrapper_classes
+        }
+
+        if @size.is_a?(Integer)
+          attrs[:style] = "width: #{@size}px; height: #{@size}px; font-size: #{@size / 2}px;"
+        end
+
+        if text_avatar?
+          attrs[:data] = text_avatar_data
+        end
+
+        merge_attributes(attrs, @html_options.except(:class, :data))
+      end
+
+      sig { returns(T::Boolean) }
+      def text_avatar?
+        @src.blank? && @icon.blank?
+      end
+
+      sig { returns(Types::DataAttributes) }
+      def text_avatar_data
+        data = data_attributes_from(@html_options[:data])
+        data[:controller] = append_data_token(data[:controller], "hakumi--avatar-text")
+        data
+      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_components/badge/component.rb

@@ -0,0 +1,139 @@
+# typed: strict
+# frozen_string_literal: true
+
+module HakumiComponents
+  module Badge
+    class Component < HakumiComponents::BaseComponent
+      extend T::Sig
+
+      Status = T.type_alias { T.nilable(T.any(Symbol, String)) }
+      Count = T.type_alias { T.nilable(T.any(Integer, Float, String)) }
+      IconName = T.type_alias { T.nilable(T.any(Symbol, String)) }
+
+      STATUSES = T.let(%i[success processing default error warning].freeze, T::Array[Symbol])
+
+      sig do
+        params(
+          count: Count,
+          dot: T::Boolean,
+          overflow_count: Integer,
+          status: Status,
+          text: T.nilable(String),
+          color: T.nilable(String),
+          show_zero: T::Boolean,
+          icon: IconName,
+          html_options: Types::HtmlAttributeValue
+        ).void
+      end
+      def initialize(count: nil, dot: false, overflow_count: 99, status: nil, text: nil, color: nil, show_zero: false, icon: nil, **html_options)
+        @count = T.let(count, Count)
+        @dot = T.let(cast_boolean(dot) ? true : false, T::Boolean)
+        @overflow_count = T.let(overflow_count, Integer)
+        @status = T.let(status&.to_sym, T.nilable(Symbol))
+        @text = T.let(text, T.nilable(String))
+        @color = T.let(color, T.nilable(String))
+        @show_zero = T.let(cast_boolean(show_zero) ? true : false, T::Boolean)
+        @icon = T.let(icon, IconName)
+        @html_options = T.let(html_options, Types::HtmlAttributes)
+
+        validate_props!
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
+      def call
+        content_tag(:span, wrapper_attributes) do
+          safe_join([
+            content,
+            badge_element,
+            status_text_element
+          ].compact)
+        end
+      end
+
+      sig { returns(Types::HtmlAttributes) }
+      def wrapper_attributes
+        merge_attributes({ class: wrapper_classes }, @html_options.except(:class))
+      end
+
+      private
+
+      sig { void }
+      def validate_props!
+        validate_inclusion!(:status, STATUSES)
+      end
+
+      sig { returns(String) }
+      def wrapper_classes
+        modifiers = {
+          status: (@status || @text).present?,
+          "not-a-wrapper": content.blank? && !(@status || @text)
+        }
+        component_classes("badge", modifiers, @html_options)
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def badge_element
+        if @status || @text
+          status_dot_element
+        elsif @dot
+          dot_element
+        elsif @count || @icon || @show_zero
+          count_element
+        end
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
+      def status_dot_element
+        styles = T.let([], T::Array[String])
+        styles << "background: #{@color}" if @color
+
+        extras = @status ? [ "hakumi-badge-status-#{@status}" ] : []
+        dot_classes = class_names("badge-status-dot", {}, extras)
+
+        tag.span(class: dot_classes, style: (styles.join(";") if styles.any?))
+      end
+
+      sig { returns(ActiveSupport::SafeBuffer) }
+      def dot_element
+        tag.sup(class: "hakumi-badge-dot", style: ("background: #{@color}" if @color))
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def count_element
+        # Show if count is present (and valid) OR icon is present OR show_zero is true
+        should_show = @icon.present? || @show_zero || (@count && (@count.is_a?(String) || @count > 0))
+
+        return unless should_show
+
+        extras = @icon ? [ "hakumi-badge-custom-component" ] : []
+        count_classes = class_names("badge-count", {}, extras)
+
+        styles = T.let([], T::Array[String])
+        styles << "background: #{@color}" if @color && !@icon
+        styles << "color: #{@color}" if @color && @icon
+
+        tag.sup(class: count_classes, title: @count, style: (styles.join("; ") if styles.any?)) do
+          if @icon
+            render HakumiComponents::Icon::Component.new(name: @icon)
+          else
+            display_count.to_s
+          end
+        end
+      end
+
+      sig { returns(T.nilable(ActiveSupport::SafeBuffer)) }
+      def status_text_element
+        return unless @text
+        tag.span(@text, class: "hakumi-badge-status-text")
+      end
+
+      sig { returns(T.any(Integer, Float, String)) }
+      def display_count
+        return @count if @count.is_a?(String)
+        return 0 if @count.nil?
+        return "#{@overflow_count}+" if @count > @overflow_count
+        @count
+      end
+    end
+  end
+end