fox_tail 0.1.0 → 0.2.0

data/app/components/fox_tail/accordion/item_component.rb

@@ -1,13 +1,14 @@
 # frozen_string_literal: true
 
 class FoxTail::Accordion::ItemComponent < FoxTail::BaseComponent
-  attr_reader :id, :title
+  include FoxTail::Concerns::Identifiable
+
+  attr_reader :title
 
   renders_one :icon, types: {
     icon: {
       renders: lambda { |icon, options = {}|
         options[:class] = classnames theme.classname("icon.base"), options[:class]
-        options[:variant] ||= :mini
         FoxTail::IconBaseComponent.new icon, options
       },
       as: :icon
@@ -28,7 +29,6 @@ class FoxTail::Accordion::ItemComponent < FoxTail::BaseComponent
     }
   }
 
-
   renders_one :arrow, types: {
     icon: {
       renders: lambda { |options = {}|
@@ -61,9 +61,16 @@ class FoxTail::Accordion::ItemComponent < FoxTail::BaseComponent
   has_option :open, default: false, type: :boolean
   has_option :header_tag, default: :h2
 
-  def initialize(id, title, html_attributes = {})
-    @id = id
-    @title = title
+  def initialize(id_or_title, title_or_attributes = {}, html_attributes = {})
+    if title_or_attributes.is_a? Hash
+      html_attributes = title_or_attributes
+      title_or_attributes = id_or_title
+    else
+      __id_argument_deprecated_warning
+      html_attributes[:id] = id_or_title
+    end
+
+    @title = title_or_attributes
     super(html_attributes)
   end
 
@@ -78,6 +85,7 @@ class FoxTail::Accordion::ItemComponent < FoxTail::BaseComponent
   def before_render
     super
 
+    generate_unique_id
     html_attributes[:class] = classnames theme.apply(:root, self), html_class
   end
 
@@ -100,7 +108,12 @@ class FoxTail::Accordion::ItemComponent < FoxTail::BaseComponent
 
   def render_header
     content_tag header_tag, id: id do
-      render(FoxTail::CollapsibleTriggerComponent.new(trigger_id, "##{body_id}", open: open?, class: header_classes)) do |trigger|
+      render(FoxTail::CollapsibleTriggerComponent.new(
+        "##{body_id}",
+        id: trigger_id,
+        open: open?,
+        class: header_classes
+      )) do |trigger|
         content_tag :button, trigger.html_attributes do
           concat icon if icon?
           concat content_tag(:span, title)
@@ -112,12 +125,12 @@ class FoxTail::Accordion::ItemComponent < FoxTail::BaseComponent
 
   def render_body
     render(FoxTail::CollapsibleComponent.new(
-      body_id,
+      id: body_id,
       open: open?,
-      data: { FoxTail::AccordionComponent.stimulus_controller.target_key => :collapsible },
-      aria: { labelledby: id }
+      data: {FoxTail::AccordionComponent.stimulus_controller.target_key => :collapsible},
+      aria: {labelledby: id}
     )) do
       content_tag :div, content, class: body_classes
     end
   end
-end
+end

data/app/components/fox_tail/accordion_component.rb

@@ -2,20 +2,34 @@
 
 class FoxTail::AccordionComponent < FoxTail::BaseComponent
   include FoxTail::Concerns::HasStimulusController
+  include FoxTail::Concerns::Identifiable
 
-  attr_reader :id
+  renders_many :items, lambda { |id_or_title, title_or_options = {}, options = {}|
+    if title_or_options.is_a? Hash
+      options = title_or_options
+      title_or_options = id_or_title
+    else
+      options[:id] = id_or_title
+      __id_argument_deprecated_warning slot: :item
+    end
 
-  renders_many :items, lambda { |id, title, options = {}|
     options[:flush] = flush?
     options[:theme] = theme.theme :item
-    FoxTail::Accordion::ItemComponent.new id, title, options
+    options[:id] ||= "#{id}_item_#{SecureRandom.base58(6)}"
+    FoxTail::Accordion::ItemComponent.new title_or_options, options
   }
 
   has_option :always_open, default: false, type: :boolean
   has_option :flush, default: false, type: :boolean
 
-  def initialize(id, html_attributes = {})
-    @id = id
+  def initialize(id_or_attributes = {}, html_attributes = {})
+    if id_or_attributes.is_a? Hash
+      html_attributes = id_or_attributes
+    else
+      __id_argument_deprecated_warning
+      html_attributes[:id] = id_or_attributes
+    end
+
     super(html_attributes)
   end
 
@@ -26,7 +40,7 @@ class FoxTail::AccordionComponent < FoxTail::BaseComponent
   def before_render
     super
 
-    html_attributes[:id] = id
+    generate_unique_id
     html_attributes[:class] = classnames theme.apply(:root, self), html_class
   end
 
@@ -37,12 +51,12 @@ class FoxTail::AccordionComponent < FoxTail::BaseComponent
   end
 
   def stimulus_controller_options
-    { always_open: always_open }
+    {always_open: always_open}
   end
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:always_open)] = options[:always_open]
       attributes
     end

data/app/components/fox_tail/alert_component.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag :div, html_attributes.merge(id: id, class: root_classes, role: :alert) do %>
+<%= content_tag :div, html_attributes do %>
   <%= content_tag :div, class: theme.classname("wrapper.base") do %>
     <% if icon? %>
       <%= icon %>

data/app/components/fox_tail/alert_component.rb

@@ -1,20 +1,23 @@
 # frozen_string_literal: true
 
 class FoxTail::AlertComponent < FoxTail::DismissibleComponent
-  SEVERITY_ICONS = { success: "check-circle", warning: "exclamation-triangle", error: "exclamation-circle" }.freeze
+  SEVERITY_ICONS = {success: "check-circle", warning: "exclamation-triangle", danger: "exclamation-circle"}.freeze
   DEFAULT_SEVERITY_ICON = "information-circle"
 
-  attr_reader :id
+  renders_one :header, lambda { |text_or_options = {}, options = {}, &block|
+    if block
+      options = text_or_options
+      text_or_options = nil
+    end
 
-  renders_one :header, lambda { |options = {}, &block|
+    text_or_options ||= capture(&block)
     options[:class] = classnames theme.apply(:header, self), options[:class]
-    content_tag(:h3, options, &block)
+    content_tag :h3, text_or_options, options
   }
 
   renders_one :icon, lambda { |options = {}|
     name = options.delete(:icon) || severity_icon_name
     options[:class] = classnames theme.apply(:icon, self), options[:class]
-    options[:variant] ||= :mini
     FoxTail::IconBaseComponent.new name, options
   }
 
@@ -24,6 +27,7 @@ class FoxTail::AlertComponent < FoxTail::DismissibleComponent
     icon_options[:class] = theme.apply "dismiss.icon", self
     dismiss_actions! options
     options[:class] = classnames theme.apply("dismiss.button", self), options[:class]
+    options[:type] = :button
 
     content_tag :button, options do
       concat render(FoxTail::IconBaseComponent.new(icon_options[:icon], icon_options.except(:icon)))
@@ -76,6 +80,15 @@ class FoxTail::AlertComponent < FoxTail::DismissibleComponent
     super && dismissible?
   end
 
+  def before_render
+    super
+
+    with_dismiss_icon unless !dismissible? || dismiss_icon
+
+    html_attributes[:class] = root_classes
+    html_attributes[:role] = :alert
+  end
+
   private
 
   def root_classes
@@ -91,6 +104,6 @@ class FoxTail::AlertComponent < FoxTail::DismissibleComponent
 
     attributes[:data] ||= {}
     attributes[:data][:action] = stimulus_merger.merge_actions attributes[:data][:action],
-                                                               stimulus_controller.action("dismiss")
+      stimulus_controller.action("dismiss")
   end
 end

data/app/components/fox_tail/alert_component.theme.yml

@@ -3,17 +3,17 @@ root:
   rounded: rounded-lg
   severity:
     info:
-      base: text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400
-      border?: border-blue-300 dark:border-blue-800
-    error:
-      base: text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400
-      border?: border-red-300 dark:border-red-800
+      base: text-info-800 bg-info-50 dark:bg-gray-800 dark:text-info-400
+      border?: border-info-300 dark:border-info-800
+    danger:
+      base: text-danger-800 bg-danger-50 dark:bg-gray-800 dark:text-danger-400
+      border?: border-danger-300 dark:border-danger-800
     success:
-      base: text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400
-      border?: border-green-300 dark:border-green-800
+      base: text-success-800 bg-success-50 dark:bg-gray-800 dark:text-success-400
+      border?: border-success-300 dark:border-success-800
     warning:
-      base: text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400
-      border?: border-yellow-300 dark:border-yellow-800
+      base: text-warning-800 bg-warning-50 dark:bg-gray-800 dark:text-warning-400
+      border?: border-warning-300 dark:border-warning-800
     neutral:
       base: text-gray-800 bg-gray-50 dark:bg-gray-800 dark:text-gray-300
       border?: border-gray-300 dark:border-gray-600
@@ -33,21 +33,21 @@ dismiss:
     base: ml-auto -mr-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8
     severity:
       info: >-
-        bg-blue-50 text-blue-500 dark:bg-gray-800 dark:text-blue-400 
-        hover:bg-blue-200 dark:hover:bg-gray-700
-        focus:ring-blue-400
-      error: >-
-        bg-red-50 text-red-500 dark:bg-gray-800 dark:text-red-400 
-        hover:bg-red-200 dark:hover:bg-gray-700
-        focus:ring-red-400
+        bg-info-50 text-info-500 dark:bg-gray-800 dark:text-info-400 
+        hover:bg-info-200 dark:hover:bg-gray-700
+        focus:ring-info-400
+      danger: >-
+        bg-danger-50 text-danger-500 dark:bg-gray-800 dark:text-danger-400 
+        hover:bg-danger-200 dark:hover:bg-gray-700
+        focus:ring-danger-400
       success: >-
-        bg-green-50 text-green-500 dark:bg-gray-800 dark:text-green-400 
-        hover:bg-green-200 dark:hover:bg-gray-700
-        focus:ring-green-400
+        bg-success-50 text-success-500 dark:bg-gray-800 dark:text-success-400 
+        hover:bg-success-200 dark:hover:bg-gray-700
+        focus:ring-success-400
       warning: >-
-        bg-yellow-50 text-yellow-500 dark:bg-gray-800 dark:text-yellow-400 
-        hover:bg-yellow-200 dark:hover:bg-gray-700
-        focus:ring-yellow-400
+        bg-warning-50 text-warning-500 dark:bg-gray-800 dark:text-warning-400 
+        hover:bg-warning-200 dark:hover:bg-gray-700
+        focus:ring-warning-400
       neutral: >-
         text-gray-500 dark:bg-gray-800 dark:text-gray-300
         hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-white

data/app/components/fox_tail/autocomplete_component.en.yml

@@ -0,0 +1,2 @@
+en:
+  error_message_html: <strong>Unknown Error!</strong> Unable to load results.

data/app/components/fox_tail/autocomplete_component.rb

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+class FoxTail::AutocompleteComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+  include FoxTail::Concerns::Placeholderable
+  include FoxTail::Concerns::HasStimulusController
+
+  renders_one :hidden_input, lambda { |attributes = {}|
+    add_default_name_and_id attributes: attributes
+    attributes[:value] = value
+    attributes[:type] = :hidden
+    attributes[:name] = name
+
+    if use_stimulus?
+      attributes[:data] ||= {}
+      attributes[:data][stimulus_controller.target_key] = :value
+    end
+
+    tag.input(attributes)
+  }
+
+  renders_one :input, lambda { |options = {}, &block|
+    options = objectify_options options
+    options.merge! fox_tail_input_options
+    options[:class] = classnames theme.apply(:input, self), options[:class], html_class
+    options[:autocomplete] ||= "off"
+    options[:spellcheck] = false unless options.key?(:spellcheck)
+    options[:id] = input_id
+    options[:name] = "#{name}_text" if name?
+    options[:value] = text
+    options[:type] = :search
+    options[:placeholder] = retrieve_placeholder if placeholder?
+
+    if use_stimulus?
+      options[:data] ||= {}
+      options[:data][stimulus_controller.target_key] = :input
+    end
+
+    FoxTail::DropdownTriggerComponent.new nil do |trigger|
+      component = FoxTail::InputComponent.new stimulus_merger.merge_attributes(trigger.html_attributes, options)
+
+      if use_stimulus?
+        component.with_right_spinner :class => theme.apply(:loader, self),
+          stimulus_controller.target_key(raw: true) => :loader
+      end
+
+      render component, &block
+    end
+  }
+
+  renders_one :dropdown, lambda { |options = {}|
+    options[:class] = classnames theme.apply(:dropdown, self), options[:class]
+    options[:trigger_id] = input_id
+    options[:offset] ||= 0
+    options[:disable_click_outside] = true
+
+    if use_stimulus?
+      options[:data] ||= {}
+      options[:data][stimulus_controller.target_key] = :dropdown
+    end
+
+    FoxTail::DropdownComponent.new options
+  }
+
+  has_option :name
+  has_option :id, as: :input_id
+  has_option :param, default: :q
+  has_option :value
+  has_option :text
+  has_option :error_message
+
+  include_options_from FoxTail::InputComponent
+
+  def initialize(url, html_attributes = {})
+    super(html_attributes)
+
+    @url = url
+  end
+
+  def value
+    options.key?(:value) ? options[:value].presence : value_from_object
+  end
+
+  def text
+    options.key?(:text) ? options[:text].presence : value
+  end
+
+  def input_id
+    options[:input_id] ||=
+      "#{self.class.name.underscore.gsub("_component", "").gsub("/", "_")}_#{SecureRandom.base58(6)}"
+  end
+
+  def before_render
+    super
+
+    with_input unless input?
+    with_hidden_input unless hidden_input?
+    with_dropdown unless dropdown?
+
+    html_attributes[:class] = theme.apply(:root, self)
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      concat hidden_input
+      concat input
+      concat dropdown
+    end
+  end
+
+  def stimulus_controller_options
+    {
+      url: @url,
+      param: param
+    }
+  end
+
+  def render_search_results(options = {}, &block)
+    raise ArgumentError, "block not given" unless block
+
+    render FoxTail::DropdownComponent.new(options).with_menu, &block
+  end
+
+  def render_search_results_in(view_context, options = {}, &block)
+    set_original_view_context view_context
+    render_search_results options, &block
+  end
+
+  class << self
+    def append_option_action(value, text = nil, attributes = {})
+      actions = stimulus_merger.merge_actions attributes.dig(:data, :action), stimulus_controller.action(:select)
+      attributes[:data] ||= {}
+      attributes[:data][:action] = actions
+      attributes[:data][stimulus_controller.action_param_key(:value)] = value
+      attributes[:data][stimulus_controller.action_param_key(:text)] = text
+      attributes
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super
+      attributes[:data][value_key(:url)] = options[:url]
+      attributes[:data][value_key(:param)] = options[:param]
+      attributes
+    end
+  end
+end

data/app/components/fox_tail/autocomplete_component.theme.yml

@@ -0,0 +1,4 @@
+loader:
+  base: hidden
+dropdown:
+  base: border border-gray-300 dark:border-gray-600

data/app/components/fox_tail/autocomplete_controller.ts

@@ -0,0 +1,184 @@
+import { ActionEvent, Controller } from '@hotwired/stimulus';
+
+import DropdownController from './dropdown_controller';
+
+import debounce from '../../../src/utilities/debounce';
+import useEventListeners from '../../../src/mixins/use_event_listeners';
+import { safeCallMethod } from '../../../src/utilities/reflection';
+
+export default class extends Controller {
+    static targets = ['input', 'value', 'loader', 'dropdown'];
+    static values = {
+        url: String,
+        param: { type: String, default: 'q' },
+        length: { type: Number, default: 1 },
+        delay: { type: Number, default: 320 },
+    };
+
+    declare readonly urlValue: string;
+    declare readonly paramValue: string;
+    declare readonly lengthValue: number;
+    declare readonly delayValue: number;
+
+    declare readonly inputTarget: HTMLInputElement;
+    declare readonly valueTarget: HTMLInputElement;
+    declare readonly dropdownTarget: HTMLElement;
+    declare readonly loaderTarget: HTMLElement;
+    declare readonly hasLoaderTarget: boolean;
+
+    private abortController: AbortController;
+    private dropdown: DropdownController;
+    private currentText: string;
+
+    get dropdownOutlet(): DropdownController {
+        if (!this.dropdown) {
+            this.dropdown =
+                this.application.getControllerForElementAndIdentifier(
+                    this.dropdownTarget,
+                    'fox-tail--dropdown',
+                ) as DropdownController;
+        }
+
+        return this.dropdown;
+    }
+
+    connect() {
+        this.currentText = this.inputTarget.value;
+
+        useEventListeners(
+            this,
+            this.inputTarget,
+            'input',
+            debounce(this.search.bind(this), this.delayValue),
+            { attached: true, passive: true },
+        );
+
+        useEventListeners(
+            this,
+            this.inputTarget,
+            'search',
+            this.clear.bind(this),
+            { attached: true, passive: true },
+        );
+
+        useEventListeners(
+            this,
+            this.inputTarget,
+            'blur',
+            debounce(this.handleBlur.bind(this), 150),
+            { attached: true, passive: true },
+        );
+
+        useEventListeners(
+            this,
+            this.inputTarget,
+            'keydown',
+            this.handleKeyDown.bind(this),
+            { attached: true, passive: true },
+        );
+
+        this.handleResize();
+    }
+
+    search() {
+        this.abortSearch();
+
+        if (this.inputTarget.value.length < this.lengthValue) {
+            this.dropdownOutlet.hide();
+            return;
+        }
+
+        this.abortController = new AbortController();
+        this.showLoader();
+
+        const url = new URL(this.urlValue, window.location.href);
+        const params = new URLSearchParams(url.search);
+
+        params.set(this.paramValue, this.inputTarget.value);
+        url.search = params.toString();
+
+        fetch(url)
+            .then((response) => response.text())
+            .then((body) => {
+                this.dropdownTarget.innerHTML = body;
+                this.dropdownOutlet.show();
+            })
+            .catch((error) => {
+                this.dropdownOutlet.hide();
+                this.application.logDebugActivity(
+                    'fox-tail--autocomplete',
+                    'search-error',
+                    { error },
+                );
+            })
+            .finally(() => this.hideLoader());
+    }
+
+    abortSearch() {
+        if (this.abortController) {
+            this.abortController.abort('cancelled');
+            this.abortController = null;
+        }
+    }
+
+    select(event: ActionEvent) {
+        const { value, text } = event.params || {};
+
+        this.application.logDebugActivity('fox-tail--autocomplete', 'select', {
+            value,
+            text,
+        });
+
+        this.valueTarget.value = value;
+        this.inputTarget.value = text || value;
+        this.currentText = this.inputTarget.value;
+        this.dropdownOutlet.hide();
+    }
+
+    clear() {
+        this.inputTarget.value = '';
+        this.valueTarget.value = '';
+        this.currentText = '';
+        this.inputTarget.blur();
+    }
+
+    protected showLoader() {
+        this.hasLoaderTarget && this.loaderTarget.classList.remove('hidden');
+    }
+
+    protected hideLoader() {
+        this.hasLoaderTarget && this.loaderTarget.classList.add('hidden');
+    }
+
+    protected handleResize() {
+        this.dropdownTarget.style.width = `${
+            this.inputTarget.getBoundingClientRect().width
+        }px`;
+    }
+
+    protected handleBlur() {
+        this.dropdownOutlet.hide();
+        this.inputTarget.value = this.currentText;
+    }
+
+    protected handleKeyDown(event: KeyboardEvent) {
+        safeCallMethod(this, `on${event.key}KeyDown`, event);
+    }
+
+    protected onEnterKeyDown() {
+        this.abortSearch();
+
+        if (this.inputTarget.value.trim() == '') {
+            this.clear();
+        }
+
+        this.handleBlur();
+        this.inputTarget.blur();
+    }
+
+    protected onEscapeKeyDown() {
+        this.abortSearch();
+        this.handleBlur();
+        this.inputTarget.blur();
+    }
+}

data/app/components/fox_tail/avatar_component.rb

@@ -12,14 +12,15 @@ class FoxTail::AvatarComponent < FoxTail::BaseComponent
   has_option :text
   has_option :size, default: :base
   has_option :rounded, type: :boolean, default: false
+  has_option :border, default: false
 
-  has_option :border, default: false do |value|
-    if value.is_a?(TrueClass)
+  def border
+    if options[:border].is_a?(TrueClass)
       :default
-    elsif !value
+    elsif !options[:border]
       :none
     else
-      value.to_sym
+      options[:border].to_sym
     end
   end
 
@@ -64,10 +65,10 @@ class FoxTail::AvatarComponent < FoxTail::BaseComponent
     icon_classes = theme.apply :icon, self
     label = html_attributes[:alt]
     icon_name, icon_variant = if icon.is_a? Hash
-                                [icon[:name], icon[:variant]]
-                              else
-                                [icon, :solid]
-                              end
+      [icon[:name], icon[:variant]]
+    else
+      [icon, :solid]
+    end
 
     content_tag :div, html_attributes.except(:alt).merge(class: root_classes) do
       concat render(FoxTail::IconBaseComponent.new(icon_name, variant: icon_variant, class: icon_classes))

data/app/components/fox_tail/avatar_component.theme.yml

@@ -15,18 +15,12 @@ root:
     neutral: &default ring-gray-300 dark:ring-gray-500
     dark: ring-gray-800 dark:ring-gray-800
     light: ring-gray-100 dark:ring-gray-700
-    red: &red ring-red-300 dark:ring-red-500
-    blue: &blue ring-blue-300 dark:ring-blue-500
-    green: &green ring-green-300 dark:ring-green-500
-    yellow: &yellow ring-yellow-300 dark:ring-yellow-500
-    indigo: ring-indigo-300 dark:ring-indigo-500
-    purple: ring-purple-300 dark:ring-purple-500
-    pink: ring-pink-300 dark:ring-pink-500
+    primary: ring-primary-300 dark:ring-primary-500
+    info: ring-info-300 dark:ring-info-500
+    success: ring-success-300 dark:ring-success-500
+    warning: ring-warning-300 dark:ring-warning-500
+    danger: ring-danger-300 dark:ring-danger-500
     default: *default
-    info: *blue
-    success: *green
-    warning: *yellow
-    error: *red
 dot:
   base: absolute border-2 border-white dark:border-gray-800 transform z-[1]
   position: