fox_tail 0.1.0

data/app/components/fox_tail/popover_component.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+class FoxTail::PopoverComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  attr_reader :id
+
+  renders_one :header, lambda { |text_or_attributes = {}, attributes = {}, &block|
+    attributes = text_or_attributes if block
+    attributes[:class] = classnames theme.classname("header.base"), attributes[:class]
+    content_tag :h3, attributes, &block
+  }
+
+  renders_one :trigger, lambda { |attributes = {}|
+    attributes[:trigger_type] = trigger_type
+    attributes[:delay] = delay
+    FoxTail::PopoverTriggerComponent.new trigger_id, "##{id}", attributes
+  }
+
+  has_option :variant, default: :default
+  has_option :placement, default: :top
+  has_option :arrow, default: true, type: :boolean
+  has_option :offset, default: 8
+  has_option :shift
+  has_option :inline, default: false, type: :boolean
+  has_option :delay, default: 300
+  has_option :trigger_id
+  has_option :trigger_type, default: :hover
+
+  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[:role] ||= :tooltip
+    html_attributes[:class] = classnames theme.apply(:root, self), theme.apply("root/hidden", self), html_class
+    stimulus_controller.merge! html_attributes, stimulus_controller_options if use_stimulus?
+  end
+
+  def call
+    capture do
+      concat trigger if trigger?
+      concat render_popover
+    end
+  end
+
+  def stimulus_controller_options
+    {
+      trigger_id: trigger_id,
+      placement: placement,
+      offset: offset,
+      shift: shift,
+      inline: inline?,
+      delay: delay,
+      trigger_type: trigger_type,
+      visible_classes: theme.apply("root/visible", self),
+      hidden_classes: theme.apply("root/hidden", self)
+    }
+  end
+
+  private
+
+  def render_popover
+    content_tag :div, html_attributes do
+      concat header if header?
+      concat content_tag(:div, content, class: theme.apply(:content, self))
+      concat render_arrow if arrow?
+    end
+  end
+
+  def render_arrow
+    content_tag :div, nil, class: theme.apply(:arrow, self)
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    TRIGGER_TYPES = {
+      hover: {
+        hoverShow: :mouseenter,
+        hoverHide: :mouseleave
+      }
+    }.freeze
+
+    def trigger_identifier
+      FoxTail::PopoverTriggerComponent.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(:inline)] = options[:inline]
+      attributes[:data][value_key(:delay)] = options[:delay]
+      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/popover_component.theme.yml

@@ -0,0 +1,37 @@
+root:
+  base: >-
+    absolute z-10 inline-block w-64 shadow-sm
+    text-sm text-gray-500 dark:text-gray-400 
+    bg-white dark:bg-gray-800  
+    transition-opacity duration-300
+    border border-gray-200 dark:border-gray-600 rounded-lg
+  arrow?: group
+root/visible:
+  base: visible opacity-100
+root/hidden:
+  base: invisible opacity-0
+header:
+  base: >- 
+    px-3 py-2
+    font-semibold text-gray-900 dark:text-white
+    bg-gray-100 dark:bg-gray-700
+    border-b border-gray-200 rounded-t-lg dark:border-gray-600
+content:
+  base: p-3
+arrow:
+  base: >-
+    absolute w-[8px] h-[8px] rotate-45 
+    bg-white dark:bg-gray-800
+    border-gray-200 dark:border-gray-600
+    group-floating-y:left-1/2 group-floating-x:top-1/2
+    group-floating-bottom:top-0 group-floating-bottom:-translate-x-1/2 group-floating-bottom:-translate-y-1/2
+    group-floating-top:bottom-0 group-floating-top:-translate-x-1/2 group-floating-top:translate-y-1/2
+    group-floating-right:left-0 group-floating-right:-translate-x-1/2 group-floating-right:-translate-y-1/2
+    group-floating-left:right-0 group-floating-left:translate-x-1/2 group-floating-left:-translate-y-1/2
+    group-floating-top:border-b group-floating-top:border-r
+    group-floating-right:border-b group-floating-right:border-l
+    group-floating-bottom:border-t group-floating-bottom:border-l
+    group-floating-left:border-t group-floating-left:border-r
+  header?: >-
+    group-floating-bottom:bg-gray-100 group-floating-bottom:dark:bg-gray-700
+

data/app/components/fox_tail/popover_controller.ts

@@ -0,0 +1,183 @@
+import { Controller } from '@hotwired/stimulus';
+import {
+    flip,
+    Placement,
+    shift,
+    offset,
+    Middleware,
+    inline,
+} from '@floating-ui/dom';
+
+import useFloatingUI from '../../../src/mixins/use_floating_ui';
+import useClickOutside from '../../../src/mixins/use_click_outside';
+import useKeyboardListener from '../../../src/mixins/use_keyboard_listener';
+
+export default class extends Controller {
+    static classes = ['visible', 'hidden'];
+    static outlets = ['fox-tail--popover-trigger'];
+
+    static values = {
+        placement: {
+            type: String,
+            default: 'top',
+        },
+        offset: {
+            type: Number,
+            default: 10,
+        },
+        shift: {
+            type: Number,
+            default: 0,
+        },
+        inline: {
+            type: Boolean,
+            default: false,
+        },
+        delay: {
+            type: Number,
+            default: 300,
+        },
+    };
+
+    declare readonly foxTailPopoverTriggerOutletElement: Element;
+    declare readonly placementValue: string;
+    declare readonly offsetValue: number;
+    declare readonly shiftValue: number;
+    declare readonly inlineValue: boolean;
+    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 = () => {};
+    private observeKeyboard: () => void = () => {};
+    private unobserveKeyboard: () => void = () => {};
+
+    connect() {
+        super.connect();
+
+        const middleware: Middleware[] = [
+            offset({
+                mainAxis: this.offsetValue,
+                crossAxis: this.shiftValue,
+            }),
+            flip(),
+            shift(),
+        ];
+
+        this.inlineValue && middleware.unshift(inline());
+
+        [this.attachFloating, this.detachFloating] = useFloatingUI(this, {
+            referenceElement: this.foxTailPopoverTriggerOutletElement,
+            strategy: 'absolute',
+            placement: this.placementValue as Placement,
+            middleware,
+        });
+
+        [this.observeClickOutside, this.unobserveClickOutside] =
+            useClickOutside(this);
+
+        [this.observeKeyboard, this.unobserveKeyboard] = useKeyboardListener(
+            this,
+            {
+                element: document.body,
+                eventName: 'keydown',
+                key: 'Escape',
+            },
+        );
+    }
+
+    show(): void {
+        if (this.showPopover()) {
+            this.observeClickOutside();
+            this.observeKeyboard();
+        }
+    }
+
+    hide(): void {
+        if (this.hidePopover()) {
+            this.unobserveClickOutside();
+            this.unobserveKeyboard();
+        }
+    }
+
+    toggle(): void {
+        if (this._isVisible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    hoverShow(): void {
+        this.showPopover();
+    }
+
+    hoverHide(): void {
+        setTimeout(() => {
+            if (!this.foxTailPopoverTriggerOutletElement.matches(':hover')) {
+                this.hidePopover();
+            }
+        }, this.delayValue);
+    }
+
+    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 showPopover(): 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 hidePopover(): boolean {
+        if (!this._isVisible || this.onHide()) {
+            return false;
+        }
+
+        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;
+    }
+
+    protected onClickOutside({ target }: Event): void {
+        const outsideTrigger =
+            !this.foxTailPopoverTriggerOutletElement.contains(target as Node) &&
+            this.foxTailPopoverTriggerOutletElement != target;
+
+        this.application.logDebugActivity(this.identifier, 'onClickOutside', {
+            outsideTrigger: outsideTrigger,
+        });
+        outsideTrigger && this.hide();
+    }
+}

data/app/components/fox_tail/popover_trigger_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class FoxTail::PopoverTriggerComponent < FoxTail::TriggerBaseComponent
+  has_option :delay, default: 300
+
+  def initialize(id, selector, html_attributes = {})
+    super
+    with_trigger_type :hover unless trigger_type?
+  end
+
+
+  def stimulus_controller_options
+    super.merge delay: delay
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    TRIGGER_TYPES = {
+      hover: {
+        hoverShow: %i[mouseenter focus],
+        hoverHide: %i[mouseleave blur]
+      },
+      click: {
+        toggle: :click,
+        hide: %i[focusout blur]
+      }
+    }.freeze
+
+    def popover_identifier
+      FoxTail::PopoverComponent.stimulus_controller_identifier
+    end
+
+    def attributes(options = nil)
+      trigger_type = options[:trigger_type]&.to_sym
+      attributes = super options
+      attributes[:data][value_key(:delay)] = options[:delay]
+      attributes[:data][outlet_key(popover_identifier)] = options[:selector]
+      attributes[:data][:action] = build_actions TRIGGER_TYPES[trigger_type]
+      attributes
+    end
+  end
+end

data/app/components/fox_tail/popover_trigger_controller.ts

@@ -0,0 +1,50 @@
+import { Controller } from '@hotwired/stimulus';
+
+import PopoverController from './popover_controller';
+
+export default class extends Controller {
+    static outlets = ['fox-tail--popover'];
+
+    static values = {
+        delay: {
+            type: Number,
+            default: 300,
+        },
+    };
+
+    declare readonly delayValue: number;
+
+    declare readonly foxTailPopoverOutlet: PopoverController;
+    declare readonly foxTailPopoverOutletElement: HTMLElement;
+
+    show(): void {
+        this.foxTailPopoverOutlet.show();
+    }
+
+    hoverShow(): void {
+        setTimeout(
+            () => this.foxTailPopoverOutlet.hoverShow(),
+            this.delayValue,
+        );
+    }
+
+    hide(): void {
+        this.foxTailPopoverOutlet.hide();
+    }
+
+    hoverHide(): void {
+        setTimeout(() => {
+            if (!this.foxTailPopoverOutletElement.matches(':hover')) {
+                this.foxTailPopoverOutlet.hoverHide();
+            }
+        }, this.delayValue);
+    }
+
+    toggle(): void {
+        this.foxTailPopoverOutlet.toggle();
+    }
+
+    toggleWithDelay(): void {
+        setTimeout(() => this.toggle(), this.delayValue);
+    }
+}

data/app/components/fox_tail/progress_bar_component.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+class FoxTail::ProgressBarComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  attr_reader :value
+
+  has_option :size, default: :base
+  has_option :color, default: :default
+  has_option :show_label, type: :boolean, default: false
+  has_option :controlled, type: :boolean, default: false
+
+  def initialize(value, html_attributes = {})
+    super(html_attributes)
+    @value = value
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    html_attributes[:aria] ||= {}
+    html_attributes[:aria][:valuenow] = value
+    html_attributes[:aria][:valuemin] = 0
+    html_attributes[:aria][:valuemax] = 100
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      content_tag :div, label, bar_attributes
+    end
+  end
+
+  def use_stimulus?
+    controlled? && super
+  end
+
+  def stimulus_controller_options
+    { value: value, update_label: show_label? && !content? }
+  end
+
+  private
+
+  def label
+    return unless show_label?
+    return content if content?
+
+    "#{value.round}%"
+  end
+
+  def bar_attributes
+    attributes = { class: theme.apply(:bar, self), style: "width: #{value}%" }
+    return attributes unless use_stimulus?
+
+    attributes[:data] = {}
+    attributes[:data][stimulus_controller.target_key] = :bar
+    attributes
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super
+      attributes[:data][value_key(:progress)] = options[:value]
+      attributes[:data][value_key(:update_label)] = options[:update_label]
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+root:
+  base: relative w-full rounded-full bg-gray-200 dark:bg-gray-700
+  size:
+    xs: h-1
+    sm: h-1.5
+    base: h-2.5
+    lg: h-4
+    xl: h-6
+bar:
+  base: >-
+    absolute left-0 top-0 bottom-0 rounded-full 
+    text-xs text-white font-medium leading-none p-0.5 
+    flex items-center justify-center
+    transition transition-[width] ease-linear
+  color:
+    dark: bg-gray-600 dark:bg-gray-300
+    blue: &blue bg-blue-600 dark:bg-blue-500
+    red: bg-red-600 dark:bg-red-500
+    green: bg-green-600 dark:bg-green-500
+    yellow: bg-yellow-600 dark:bg-yellow-500
+    indigo: bg-indigo-600 dark:bg-indigo-500
+    purple: bg-purple-600 dark:bg-purple-500
+    pink: bg-pink-600 dark:bg-pink-500
+    default: *blue

data/app/components/fox_tail/progress_bar_controller.ts

@@ -0,0 +1,43 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['bar'];
+
+    static values = {
+        progress: {
+            type: Number,
+            default: 0,
+        },
+        updateLabel: {
+            type: Boolean,
+            default: true,
+        },
+    };
+
+    declare progressValue: number;
+    declare readonly updateLabelValue: boolean;
+    declare readonly barTarget: HTMLElement;
+
+    connect() {
+        super.connect();
+    }
+
+    progressValueChanged() {
+        this.updateAriaAttributes();
+        this.updateBar();
+    }
+
+    private updateAriaAttributes() {
+        this.element.setAttribute(
+            'aria-valuenow',
+            this.progressValue.toFixed(),
+        );
+    }
+
+    private updateBar() {
+        this.barTarget.style.width = `${this.progressValue}%`;
+        if (this.updateLabelValue) {
+            this.barTarget.textContent = `${this.progressValue.toFixed()}%`;
+        }
+    }
+}

data/app/components/fox_tail/radio_button_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class FoxTail::RadioButtonComponent < FoxTail::BaseComponent
+  has_option :color, default: :default
+  has_option :size, default: :base
+
+  def before_render
+    super
+
+    html_attributes[:type] = :radio
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    tag :input, html_attributes
+  end
+end

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

@@ -0,0 +1,17 @@
+root:
+  base: >-
+    bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600
+    focus:ring-2 dark:ring-offset-gray-800
+  color:
+    blue: &default text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600
+    red: text-red-600 focus:ring-red-500 dark:focus:ring-red-600
+    green: text-green-600 focus:ring-green-500 dark:focus:ring-green-600
+    yellow: text-yellow-600 focus:ring-yellow-500 dark:focus:ring-yellow-600
+    indigo: text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600
+    purple: text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600
+    pink: text-pink-600 focus:ring-pink-500 dark:focus:ring-pink-600
+    default: *default
+  size:
+    sm: w-3 h-3
+    base: w-4 h-4
+    lg: w-6 h-6

data/app/components/fox_tail/range_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class FoxTail::RangeComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+
+  has_option :disabled, type: :boolean, default: false
+  has_option :size, default: :base
+  has_option :in, as: :range
+  has_option :within, as: :within_range
+
+  def before_render
+    super
+
+    add_default_name_and_id
+    html_attributes[:type] = :range
+    html_attributes[:value] ||= value_before_type_cast
+    html_attributes[:disabled] = disabled?
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+
+    range = self.range || within_range
+    html_attributes.update("min" => range.min, "max" => range.max) if range
+  end
+
+  def call
+    tag :input, html_attributes
+  end
+end

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

@@ -0,0 +1,5 @@
+root:
+  base: w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700
+  size:
+    sm: h-1 range-sm
+    lg: h-3 range-lg

data/app/components/fox_tail/select/option_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class FoxTail::Select::OptionComponent < FoxTail::BaseComponent
+  attr_reader :value
+
+  has_option :selected, type: :boolean, default: false
+
+  def initialize(value, html_attributes = {})
+    @value = value
+    super(html_attributes)
+  end
+
+  def before_render
+    super
+
+    html_attributes[:value] = value
+    html_attributes[:selected] = :selected if selected?
+  end
+
+  def call
+    content_tag :option, content? ? content : value.to_s.humanize, html_attributes
+  end
+end

data/app/components/fox_tail/select/option_group_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class FoxTail::Select::OptionGroupComponent < FoxTail::BaseComponent
+  attr_reader :label
+
+  renders_many :group_options, lambda { |value, options = {}|
+    options[:selected] = Array(selected_value).include?(value) unless options.key? :selected
+    FoxTail::Select::OptionComponent.new value, options
+  }
+
+  has_option :selected_value
+
+  def initialize(label, html_attributes = {})
+    @label = label
+    super(html_attributes)
+  end
+
+  def before_render
+    super
+
+    html_attributes[:label] = label
+  end
+
+  def call
+    content_tag :optgroup, html_attributes do
+      group_options.each { |group_option| concat group_option }
+    end
+  end
+end