fox_tail 0.1.0

data/app/components/fox_tail/dropdown_component.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+class FoxTail::DropdownComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  attr_reader :id
+
+  renders_one :trigger, lambda { |options = {}, &block|
+    options[:trigger_type] = trigger_type
+    options[:delay] = delay
+    FoxTail::DropdownTriggerComponent.new trigger_id, "##{id}", options, &block
+  }
+
+  renders_one :header, lambda { |options = {}, &block|
+    attributes = options.merge class: classnames(theme.apply(:header, self), options[:class])
+    content_tag :div, attributes, &block
+  }
+
+  renders_many :menus, lambda { |options = {}|
+    options[:theme] = theme.theme :menu
+    FoxTail::Dropdown::MenuComponent.new options
+  }
+
+  has_option :divider, default: true, type: :boolean
+  has_option :placement, default: "bottom"
+  has_option :offset, default: 10
+  has_option :shift
+  has_option :ignore_click_outside
+  has_option :trigger_id
+  has_option :trigger_type, default: :click
+  has_option :delay, default: 300
+
+  def initialize(id, html_attributes = {})
+    super(html_attributes)
+    @id = id
+  end
+
+  def trigger_id
+    options[:trigger_id] ||= :"#{id}_trigger"
+  end
+
+  def before_render
+    super
+
+    html_attributes[:id] = id
+    html_attributes[:class] = classnames theme.apply(:root, self),
+                                         theme.apply("root/hidden", self),
+                                         html_class
+  end
+
+  def call
+    capture do
+      concat trigger if trigger?
+      concat render_dropdown
+    end
+  end
+
+  def stimulus_controller_options
+    {
+      trigger_id: trigger_id,
+      placement: placement,
+      offset: offset,
+      shift: shift,
+      ignore_click_outside: ignore_click_outside,
+      hidden_classes: theme.apply("root/hidden", self),
+      visible_classes: theme.apply("root/visible", self),
+      trigger_type: trigger_type,
+      delay: delay
+    }
+  end
+
+  protected
+
+  def render_dropdown
+    content_tag :div, html_attributes do
+      concat header if header?
+      menus.each { |menu| concat menu } if menus?
+      concat content if content?
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    TRIGGER_TYPES = {
+      hover: {
+        hoverShow: :mouseenter,
+        hoverHide: :mouseleave
+      }
+    }.freeze
+
+    def trigger_identifier
+      FoxTail::DropdownTriggerComponent.stimulus_controller_identifier
+    end
+
+    def attributes(options = {})
+      trigger_type = options[:trigger_type]&.to_sym
+      attributes = super options
+      attributes[:data][value_key(:placement)] = options[:placement]
+      attributes[:data][value_key(:offset)] = options[:offset]
+      attributes[:data][value_key(:shift)] = options[:shift]
+      attributes[:data][value_key(:ignore_click_outside)] = options[:ignore_click_outside]
+      attributes[:data][outlet_key(trigger_identifier)] = "##{options[:trigger_id]}"
+      attributes[:data][classes_key(:hidden)] = options[:hidden_classes]
+      attributes[:data][classes_key(:visible)] = options[:visible_classes]
+      attributes[:data][:action] = build_actions TRIGGER_TYPES[trigger_type]
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+root:
+  base: >-
+    absolute z-10 rounded-lg shadow w-48 
+    bg-white dark:bg-gray-700 
+    focus:outline-none 
+    transition-opacity duration-300 ease-in-out
+  divider?: divide-y divide-gray-100 dark:divide-gray-600
+root/hidden:
+  base: invisible opacity-0
+root/visible:
+  base: visible opacity-100
+header:
+  base: px-4 py-3 text-sm text-gray-900 dark:text-white
+menu:
+  root:
+    base: py-2 text-sm text-gray-700 dark:text-gray-200
+  item:
+    root:
+      base: flex items-center justify-start w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600
+      visuals?: flex items-center gap-2
+      color:
+        neutral: &default text-gray-700 dark:text-gray-200 dark:hover:text-white
+        dark: text-gray-800 dark:text-gray-700
+        light: text-gray-300 dark:text-gray-500
+        blue: text-blue-600 dark:text-blue-500
+        red: text-red-600 dark:text-red-500
+        green: text-green-600 dark:text-green-500
+        yellow: text-yellow-600 dark:text-yellow-500
+        indigo: text-indigo-600 dark:text-indigo-500
+        purple: text-purple-600 dark:text-purple-500
+        pink: text-pink-600 dark:text-pink-500
+        info: text-blue-800 dark:text-blue-700
+        error: text-red-800 dark:text-red-700
+        warning: text-yellow-800 dark:text-yellow-700
+        success: text-green-800 dark:text-green-700
+        default: *default
+    root/disabled:
+      base: opacity-50
+    visual:
+      base: w-2.5 h-2.5
+      side:
+        end: ml-auto

data/app/components/fox_tail/dropdown_controller.ts

@@ -0,0 +1,177 @@
+import { Controller } from '@hotwired/stimulus';
+import { flip, Placement, shift, offset } from '@floating-ui/dom';
+
+import useFloatingUI from '../../../src/mixins/use_floating_ui';
+import useClickOutside from '../../../src/mixins/use_click_outside';
+
+export default class extends Controller {
+    static outlets = ['fox-tail--dropdown-trigger'];
+    static classes = ['visible', 'hidden'];
+
+    static values = {
+        reference: String,
+        placement: {
+            type: String,
+            default: 'bottom',
+        },
+        shift: {
+            type: Number,
+            default: 0,
+        },
+        offset: {
+            type: Number,
+            default: 10,
+        },
+        ignoreClickOutside: String,
+        delay: {
+            type: Number,
+            default: 300,
+        },
+    };
+
+    declare readonly foxTailDropdownTriggerOutletElement: Element;
+    declare readonly placementValue: string;
+    declare readonly shiftValue: number;
+    declare readonly offsetValue: number;
+    declare readonly hasIgnoreClickOutside: boolean;
+    declare readonly ignoreClickOutsideValue: string;
+    declare readonly delayValue: number;
+    declare readonly visibleClasses: string[];
+    declare readonly hiddenClasses: string[];
+
+    private _isVisible: boolean = false;
+    private attachFloating: () => void = () => {};
+    private detachFloating: () => void = () => {};
+    private observeClickOutside: () => void = () => {};
+    private unobserveClickOutside: () => void = () => {};
+
+    get isVisible(): boolean {
+        return this._isVisible;
+    }
+
+    connect() {
+        super.connect();
+
+        [this.attachFloating, this.detachFloating] = useFloatingUI(this, {
+            referenceElement: this.foxTailDropdownTriggerOutletElement,
+            strategy: 'absolute',
+            placement: this.placementValue as Placement,
+            middleware: [
+                offset({
+                    mainAxis: this.offsetValue,
+                    crossAxis: this.shiftValue,
+                }),
+                flip(),
+                shift(),
+            ],
+        });
+
+        [this.observeClickOutside, this.unobserveClickOutside] =
+            useClickOutside(this);
+    }
+
+    show(): void {
+        this.showDropdown() && this.observeClickOutside();
+    }
+
+    hide(): void {
+        this.hideDropdown() && this.unobserveClickOutside();
+    }
+
+    toggle(): void {
+        if (this._isVisible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    hoverShow(): void {
+        this.showDropdown();
+    }
+
+    hoverHide(): void {
+        setTimeout(() => {
+            if (!this.foxTailDropdownTriggerOutletElement.matches(':hover')) {
+                this.hideDropdown();
+            }
+        }, this.delayValue);
+    }
+
+    protected onClickOutside({ target }: Event): void {
+        const outsideTrigger =
+            !this.foxTailDropdownTriggerOutletElement.contains(
+                target as Node,
+            ) && this.foxTailDropdownTriggerOutletElement != target;
+        const isIgnored = this.isIgnoredClickOutside(target);
+
+        this.application.logDebugActivity(this.identifier, 'onClickOutside', {
+            outsideTrigger,
+            isIgnored,
+        });
+        !isIgnored && outsideTrigger && this.hide();
+    }
+
+    protected isIgnoredClickOutside(target: EventTarget | null): boolean {
+        if (this.hasIgnoreClickOutside) {
+            const elements = document.querySelectorAll(
+                this.ignoreClickOutsideValue,
+            );
+
+            for (let i = 0; i < elements.length; i++) {
+                if (elements[i].contains(target as Element)) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    protected onShow(): boolean {
+        return this.dispatch('show', { cancelable: true }).defaultPrevented;
+    }
+
+    protected onShown(): void {
+        this.dispatch('shown');
+    }
+
+    protected onHide(): boolean {
+        return this.dispatch('hide', { cancelable: true }).defaultPrevented;
+    }
+
+    protected onHidden(): void {
+        this.dispatch('hidden');
+    }
+
+    private showDropdown(): boolean {
+        if (this._isVisible || this.onShow()) {
+            return false;
+        }
+
+        this.attachFloating();
+        this.element.classList.remove(...this.hiddenClasses);
+        this.element.classList.add(...this.visibleClasses);
+        this.element.removeAttribute('aria-hidden');
+        this._isVisible = true;
+        this.onShown();
+
+        return true;
+    }
+
+    private hideDropdown(): boolean {
+        if (!this._isVisible || this.onHide()) {
+            return false;
+        }
+
+        this.unobserveClickOutside();
+        this.detachFloating();
+        this.element.classList.remove(...this.visibleClasses);
+        this.element.classList.add(...this.hiddenClasses);
+        this.element.setAttribute('aria-hidden', 'true');
+        this._isVisible = false;
+        this.onHidden();
+
+        return true;
+    }
+}

data/app/components/fox_tail/dropdown_trigger_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+class FoxTail::DropdownTriggerComponent < FoxTail::TriggerBaseComponent
+  has_option :delay, default: 300
+  has_option :open, default: false, type: :boolean
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self),
+                                         theme.apply("root/#{open? ? :open : :close}", self),
+                                         html_class
+  end
+
+  def stimulus_controller_options
+    super.merge delay: delay,
+                open_classes: theme.apply("root/open", self),
+                closed_classes: theme.apply("root/closed", self)
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    TRIGGER_TYPES = {
+      hover: {
+        show: :click,
+        hoverShow: :mouseenter,
+        hoverHide: :mouseleave
+      },
+      click: {
+        toggle: :click
+      }
+    }.freeze
+
+    def dropdown_identifier
+      FoxTail::DropdownComponent.stimulus_controller_identifier
+    end
+
+    def attributes(options = {})
+      trigger_type = options[:trigger_type]&.to_sym
+      attributes = super options
+      attributes[:data][value_key(:delay)] = options[:delay]
+      attributes[:data][outlet_key(dropdown_identifier)] = options[:selector]
+      attributes[:data][classes_key(:open)] = options[:open_classes]
+      attributes[:data][classes_key(:closed)] = options[:closed_classes]
+      attributes[:data][:action] = build_actions(TRIGGER_TYPES[trigger_type])
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+root:
+  base: group
+root/open:
+  base: open

data/app/components/fox_tail/dropdown_trigger_controller.ts

@@ -0,0 +1,91 @@
+import { Controller } from '@hotwired/stimulus';
+import DropdownController from './dropdown_controller';
+import useForwardedEventListener from '../../../src/mixins/use_forwarded_event_listener';
+
+export default class extends Controller {
+    static classes = ['open', 'closed'];
+    static outlets = ['fox-tail--dropdown'];
+
+    static values = {
+        delay: {
+            type: Number,
+            default: 300,
+        },
+    };
+
+    declare readonly delayValue: number;
+    declare readonly openClasses: string[];
+    declare readonly closedClasses: string[];
+    declare readonly foxTailDropdownOutlet: DropdownController;
+    declare readonly foxTailDropdownOutletElement: Element;
+
+    declare _unsubscribeListener: (() => void) | null;
+
+    foxTailDropdownOutletConnected(
+        _outlet: DropdownController,
+        element: Element,
+    ): void {
+        const [observe, unobserve] = useForwardedEventListener(
+            this,
+            ['show', 'shown', 'hide', 'hidden'],
+            element,
+            this.element,
+            { capture: true, eventPrefix: 'fox-tail--dropdown' },
+        );
+
+        this._unsubscribeListener = unobserve;
+        observe();
+
+        this.updateAttributes();
+    }
+
+    show(): void {
+        this.foxTailDropdownOutlet.show();
+    }
+
+    hoverShow(): void {
+        setTimeout(
+            () => this.foxTailDropdownOutlet.hoverShow(),
+            this.delayValue,
+        );
+    }
+
+    hide(): void {
+        this.foxTailDropdownOutlet.hide();
+    }
+
+    hoverHide(): void {
+        setTimeout(() => {
+            if (!this.foxTailDropdownOutletElement.matches(':hover')) {
+                this.foxTailDropdownOutlet.hoverHide();
+            }
+        }, this.delayValue);
+    }
+
+    toggle(): void {
+        this.foxTailDropdownOutlet.toggle();
+    }
+
+    toggleWithDelay(): void {
+        setTimeout(() => this.toggle(), this.delayValue);
+    }
+
+    onForwardEvent(): void {
+        this.updateAttributes();
+    }
+
+    private updateAttributes(): void {
+        this.element.setAttribute(
+            'aria-expanded',
+            this.foxTailDropdownOutlet.isVisible.toString(),
+        );
+
+        if (this.foxTailDropdownOutlet.isVisible) {
+            this.element.classList.remove(...this.closedClasses);
+            this.element.classList.add(...this.openClasses);
+        } else {
+            this.element.classList.remove(...this.openClasses);
+            this.element.classList.add(...this.closedClasses);
+        }
+    }
+}

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

@@ -0,0 +1,8 @@
+<%= content_tag :label, class: classnames(theme.apply(:outer_container, self), html_class) do %>
+  <%= content_tag :div, class: theme.apply(:inner_container, self) do %>
+    <%= icon %>
+    <%= title %>
+    <%= helper_text if helper_text? %>
+  <% end %>
+  <%= tag :input, html_attributes %>
+<% end %>

data/app/components/fox_tail/dropzone_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+class FoxTail::DropzoneComponent < FoxTail::BaseComponent
+  DEFAULT_ICON = "cloud-arrow-up"
+
+  renders_one :icon, lambda { |icon, attributes = {}|
+    attributes[:class] = classnames theme.apply(:icon, self), attributes[:class]
+    FoxTail::IconBaseComponent.new icon, attributes
+  }
+
+  renders_one :title, lambda { |text_or_attributes, attributes = {}, &block|
+    attributes[:class] = classnames theme.apply(:title, self), attributes[:class]
+
+    if block
+      attributes = text_or_attributes
+      text_or_attributes = capture &block
+    end
+
+    content_tag :p, text_or_attributes, attributes
+  }
+
+  renders_one :helper_text, lambda { |text, attributes = {}|
+    attributes[:class] = classnames theme.apply(:helper_text, self), attributes[:class]
+    content_tag :p, text, attributes
+  }
+
+  def before_render
+    super
+
+    with_icon DEFAULT_ICON, variant: :outline unless icon?
+    with_title I18n.t("components.fox_tail.dropzone.title_html").html_safe unless title?
+    html_attributes[:type] = :file
+    html_attributes[:class] = theme.apply(:root, self)
+  end
+
+  private
+
+  def outer_container_attributes
+    { class: classnames(theme.apply(:outer_container, self), html_class) }
+  end
+
+  def inner_container_attributes
+    { class: theme.apply(:inner_container, self) }
+  end
+end

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

@@ -0,0 +1,17 @@
+root:
+  base: hidden
+outer_container:
+  base: >-
+    flex flex-col items-center justify-center 
+    w-full h-64 cursor-pointer
+    border-2 border-gray-300 border-dashed rounded-lg dark:border-gray-600 dark:hover:border-gray-500
+    bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 
+inner_container:
+  base: flex flex-col items-center justify-center pt-5 pb-6
+icon:
+  base: w-8 h-8 mb-4 text-gray-500 dark:text-gray-400
+title:
+  base: text-sm text-gray-500 dark:text-gray-400
+helper_text:
+  base: text-xs text-gray-500 dark:text-gray-400 mt-2
+

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

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+class FoxTail::FAB::ItemComponent < FoxTail::IconButtonComponent
+  DEFAULT_OPTIONS = { color: :light, variant: :solid }.freeze
+
+  has_option :placement, default: :top
+  has_option :label_placement, default: :left
+  has_option :label_style, default: :tooltip
+
+  def initialize(icon_or_attributes = {}, html_attributes = {})
+    if icon_or_attributes.is_a? Hash
+      icon_or_attributes.reverse_merge! DEFAULT_OPTIONS
+    else
+      html_attributes.reverse_merge! DEFAULT_OPTIONS
+    end
+
+    super icon_or_attributes, html_attributes
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+
+    if label_style == :tooltip && self.class.use_stimulus?
+      trigger_component = FoxTail::TooltipTriggerComponent.new tag_id, "##{tooltip_id}", trigger_type: :hover
+      options = trigger_component.stimulus_controller_options
+      attributes = FoxTail::TooltipTriggerComponent.stimulus_controller.attributes options
+      stimulus_merger.merge_attributes! html_attributes, attributes
+    end
+  end
+
+  def tag_id
+    html_attributes[:id] ||= :"fab_item_#{SecureRandom.hex(4)}"
+  end
+
+  def tooltip_id
+    :"tooltip_#{tag_id}"
+  end
+
+  def size
+    :fab
+  end
+
+  alias_method :render_button, :call
+  private :render_button
+
+  def call
+    capture do
+      concat render_button
+      concat render_tooltip if label_style == :tooltip
+    end
+  end
+
+  private
+
+  def render_tooltip
+    render FoxTail::TooltipComponent.new(tooltip_id, placement: label_placement, trigger_id: tag_id).with_content(content)
+  end
+end