fox_tail 0.1.0

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

@@ -0,0 +1,26 @@
+root:
+  base: sr-only peer
+container:
+  base: relative inline-flex items-center cursor-pointer
+toggle:
+  base: >-
+    peer-focus:outline-none peer-focus:ring-4
+    rounded-full bg-gray-200  dark:bg-gray-700
+    peer-checked:after:translate-x-full peer-checked:after:border-white 
+    after:content-[''] after:absolute after:border after:rounded-full after:transition-all
+    after:bg-white after:border-gray-300 dark:after:border-gray-600
+  color:
+    blue: &default peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600
+    red: peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600
+    green: peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600
+    yellow: peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-600
+    indigo: peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:bg-indigo-600
+    pink: peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600
+    purple: peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600
+    default: *default
+  size:
+    sm: w-9 h-5 after:h-4 after:w-4 after:top-[2px] after:left-[2px]
+    base: w-11 h-6 after:h-5 after:w-5 after:top-[2px] after:left-[2px]
+    lg: w-14 h-7 after:h-6 after:w-6 after:top-0.5 after:left-[4px]
+label:
+  base: ml-3 text-sm font-medium text-gray-900 dark:text-gray-300

data/app/components/fox_tail/tooltip_component.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+class FoxTail::TooltipComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  attr_reader :id
+
+  renders_one :trigger, lambda { |attributes = {}|
+    FoxTail::TooltipTriggerComponent.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 :trigger_id
+
+  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
+  end
+
+  def call
+    capture do
+      concat trigger if trigger?
+      concat render_tooltip
+    end
+  end
+
+  def stimulus_controller_options
+    {
+      trigger_id: trigger_id,
+      placement: placement,
+      offset: offset,
+      shift: shift,
+      inline: inline?,
+      visible_classes: theme.apply("root/visible", self),
+      hidden_classes: theme.apply("root/hidden", self)
+    }
+  end
+
+  private
+
+  def render_tooltip
+    content_tag :div, html_attributes do
+      concat content
+      concat render_arrow if arrow?
+    end
+  end
+
+  def render_arrow
+    content_tag :div, nil, class: theme.apply(:arrow, self)
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def trigger_identifier
+      FoxTail::TooltipTriggerComponent.stimulus_controller_identifier
+    end
+
+    def attributes(options = {})
+      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][outlet_key(trigger_identifier)] = "##{options[:trigger_id]}"
+      attributes[:data][classes_key(:hidden)] = options[:hidden_classes]
+      attributes[:data][classes_key(:visible)] = options[:visible_classes]
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,31 @@
+root:
+  base: >-
+    absolute z-10 inline-block px-3 py-2 text-sm font-medium
+    transition-opacity duration-300
+    rounded-lg shadow-sm
+  arrow?: group
+  variant:
+    dark: &default text-white bg-gray-900 dark:bg-gray-700
+    light: text-gray-900 bg-white border border-gray-200
+    default: *default
+root/visible:
+  base: visible opacity-100
+root/hidden:
+  base: invisible opacity-0
+arrow:
+  base: >-
+    absolute w-[8px] h-[8px] rotate-45
+    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
+  variant:
+    dark: &default bg-gray-900 dark:bg-gray-700
+    light: >-
+      bg-white border-gray-200
+      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
+    default: *default

data/app/components/fox_tail/tooltip_controller.ts

@@ -0,0 +1,119 @@
+import { Controller } from '@hotwired/stimulus';
+import {
+    flip,
+    Placement,
+    shift,
+    offset,
+    Middleware,
+    inline,
+} from '@floating-ui/dom';
+
+import useFloatingUI from '../../../src/mixins/use_floating_ui';
+
+export default class extends Controller {
+    static classes = ['visible', 'hidden'];
+    static outlets = ['fox-tail--tooltip-trigger'];
+
+    static values = {
+        placement: {
+            type: String,
+            default: 'top',
+        },
+        offset: {
+            type: Number,
+            default: 8,
+        },
+        shift: {
+            type: Number,
+            default: 0,
+        },
+        inline: {
+            type: Boolean,
+            default: false,
+        },
+    };
+
+    declare readonly foxTailTooltipTriggerOutletElement: Element;
+    declare readonly placementValue: string;
+    declare readonly offsetValue: number;
+    declare readonly shiftValue: number;
+    declare readonly inlineValue: boolean;
+    declare readonly visibleClasses: string[];
+    declare readonly hiddenClasses: string[];
+
+    private _isVisible: boolean = false;
+    private attachFloating: () => void = () => {};
+    private detachFloating: () => 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.foxTailTooltipTriggerOutletElement,
+            strategy: 'absolute',
+            placement: this.placementValue as Placement,
+            middleware,
+        });
+    }
+
+    show(): void {
+        if (this._isVisible || this.onShow()) {
+            return;
+        }
+
+        this.attachFloating();
+        this.element.classList.remove(...this.hiddenClasses);
+        this.element.classList.add(...this.visibleClasses);
+        this.element.removeAttribute('aria-hidden');
+        this._isVisible = true;
+        this.onShown();
+    }
+
+    hide(): void {
+        if (!this._isVisible || this.onHide()) {
+            return;
+        }
+
+        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();
+    }
+
+    toggle(): void {
+        if (this._isVisible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    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');
+    }
+}

data/app/components/fox_tail/tooltip_trigger_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class FoxTail::TooltipTriggerComponent < FoxTail::TriggerBaseComponent
+  def trigger_type
+    options[:trigger_type] ||= :hover
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    TRIGGER_TYPES = {
+      hover: {
+        show: %i[mouseenter focus],
+        hide: %i[mouseleave blur]
+      },
+      click: {
+        toggle: :click,
+        hide: %i[focusout blur]
+      }
+    }.freeze
+
+    def tooltip_identifier
+      FoxTail::TooltipComponent.stimulus_controller_identifier
+    end
+
+    def attributes(options = nil)
+      trigger_type = options[:trigger_type]&.to_sym
+      attributes = super options
+      attributes[:data][outlet_key(tooltip_identifier)] = options[:selector]
+      attributes[:data][:action] = build_actions TRIGGER_TYPES[trigger_type]
+      attributes
+    end
+  end
+end

data/app/components/fox_tail/tooltip_trigger_controller.ts

@@ -0,0 +1,21 @@
+import { Controller } from '@hotwired/stimulus';
+
+import TooltipController from './tooltip_controller';
+
+export default class extends Controller {
+    static outlets = ['fox-tail--tooltip'];
+
+    declare readonly foxTailTooltipOutlet: TooltipController;
+
+    show(): void {
+        this.foxTailTooltipOutlet.show();
+    }
+
+    hide(): void {
+        this.foxTailTooltipOutlet.hide();
+    }
+
+    toggle(): void {
+        this.foxTailTooltipOutlet.toggle();
+    }
+}

data/app/components/fox_tail/trigger_base_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class FoxTail::TriggerBaseComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  attr_reader :id, :selector, :block
+
+  has_option :trigger_type
+
+  def initialize(id, selector, html_attributes = {}, &block)
+    super(html_attributes)
+    @id = id
+    @selector = selector
+    @block = block
+  end
+
+  def block?
+    !!block
+  end
+
+  def before_render
+    super
+
+    html_attributes[:id] = id
+    html_attributes[:class] = html_class
+  end
+
+  def render?
+    content? || block?
+  end
+
+  def call
+    block? ? view_context.capture(self, &block) : content
+  end
+
+  def stimulus_controller_options
+    {
+      selector: selector,
+      trigger_type: trigger_type
+    }
+  end
+end

data/app/helpers/fox_tail/form_builder.rb

@@ -0,0 +1,247 @@
+# frozen_string_literal: true
+
+class FoxTail::FormBuilder < ActionView::Helpers::FormBuilder
+  def label(method, text = nil, options = {}, &block)
+    if text.is_a? Hash
+      options = text
+      text = nil
+    end
+
+    options = objectify_component_options method, options
+    component = FoxTail::LabelComponent.new options
+    component.with_content text if !block && text.present?
+    @template.render component, &block
+  end
+
+  def help_text(method, text = nil, options = {}, &block)
+    if text.is_a?(Hash)
+      options = text
+      text = nil
+    end
+
+    options = objectify_component_options method, options
+    component = FoxTail::HelperTextComponent.new options
+    component.with_content text unless text.blank?
+    @template.render component, &block
+  end
+
+  def error_list(method, options = {}, &block)
+    options = objectify_component_options method, options
+    @template.render FoxTail::InputErrorListComponent.new(options), &block
+  end
+
+  def text_field(method, options = {}, &block)
+    input_field method, options.merge(type: :text), &block
+  end
+
+  def password_field(method, options = {}, &block)
+    input_field method, options.merge(type: :password), &block
+  end
+
+  def color_field(method, options = {}, &block)
+    input_field method, options.merge(type: :color), &block
+  end
+
+  def search_field(method, options = {}, &block)
+    input_field method, options.merge(type: :search), &block
+  end
+
+  def telephone_field(method, options = {}, &block)
+    input_field method, options.merge(type: :tel), &block
+  end
+
+  alias_method :phone_field, :telephone_field
+
+  def date_field(method, options = {}, &block)
+    input_field method, options.merge(type: :date), &block
+  end
+
+  def datetime_field(method, options = {}, &block)
+    input_field method, options.merge(type: :"datetime-local"), &block
+  end
+
+  alias_method :datetime_local_field, :datetime_field
+
+  def time_field(method, options = {}, &block)
+    input_field method, options.merge(type: :time), &block
+  end
+
+  def month_field(method, options = {}, &block)
+    input_field method, options.merge(type: :month), &block
+  end
+
+  def week_field(method, options = {}, &block)
+    input_field method, options.merge(type: :week), &block
+  end
+
+  def url_field(method, options = {}, &block)
+    input_field method, options.merge(type: :url), &block
+  end
+
+  def email_field(method, options = {}, &block)
+    input_field method, options.merge(type: :email), &block
+  end
+
+  def number_field(method, options = {}, &block)
+    input_field method, options.merge(type: :number), &block
+  end
+
+  def input_field(method, options = {}, &block)
+    options = objectify_component_options method, options
+    @template.render FoxTail::InputComponent.new(options), &block
+  end
+
+  def range_field(method, options = {}, &block)
+    options = objectify_component_options method, options
+    @template.render FoxTail::RangeComponent.new(options), &block
+  end
+
+  def text_area(method, options = {}, &block)
+    options = objectify_component_options method, options
+    @template.render FoxTail::TextareaComponent.new(options), &block
+  end
+
+  def file_field(method, options = {}, &block)
+    options = objectify_component_options method, options
+    @template.render FoxTail::FileInputComponent.new(options), &block
+  end
+
+  def dropzone_field(method, options = {}, &block)
+    options = objectify_component_options method, options
+    @template.render FoxTail::DropzoneComponent.new(options), &block
+  end
+
+  def check_box(method, options = {}, checked_value = "1", unchecked_value = "0", &block)
+    options = objectify_component_options method, options
+    options[:checked_value] = checked_value
+    options[:unchecked_value] = unchecked_value
+    @template.render FoxTail::CheckboxComponent.new(options), &block
+  end
+
+  def radio_button(method, tag_value, options = {}, &block)
+    options = objectify_component_options method, options
+    options[:value] = tag_value
+    @template.render FoxTail::RadioButtonComponent.new(options), &block
+  end
+
+  def select(method, choices = nil, options = {}, html_options = {}, &block)
+    include_blank = options.delete :include_blank
+    prompt = options.delete :prompt
+    options = objectify_component_options(method, options.merge(html_options))
+    choices = choices.to_a if choices.is_a? Range
+
+    @template.render FoxTail::SelectComponent.new(options) do |select|
+      if !!prompt
+        select.with_placeholder prompt_text(prompt)
+      elsif !!include_blank
+        select.with_placeholder "", disabled: false
+      end
+
+      if choices.present?
+        choices.each do |choice|
+          choice_options = option_html_attributes choice
+          text, value = option_text_and_value choice
+          select.with_select_option(value, choice_options).with_content(text)
+        end
+      end
+
+      capture select, &block if block
+    end
+  end
+
+  def collection_select(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
+    choices = collection.map { |item| [item.send(text_method), item.send(value_method)] }
+    select method, choices, options, html_options, &block
+  end
+
+  def grouped_collection_select(method, collection, group_method, group_label_method, option_key_method, option_value_method, options = {}, html_options = {}, &block)
+    select method, nil, options, html_options do |select_component|
+      collection.each do |group|
+        select_component.with_select_group group.send(group_label_method) do |group_component|
+          group.send(group_method).each do |group_item|
+            value = group_item.send option_key_method
+            label = group_item.send option_value_method
+            group_component.with_group_option(value).with_text(label)
+          end
+        end
+      end
+
+      capture select_component, &block if block
+    end
+  end
+
+  def button(value = nil, options = {}, &block)
+    if value.is_a? Hash
+      value = nil
+      options = value
+    end
+
+    options = objectify_component_options nil, options
+    options[:value] ||= value
+    component = FoxTail::ButtonComponent.new(options)
+    component.with_content value if value.present?
+    @template.render component, &block
+  end
+
+  def button_group(options = {}, &block)
+    options = objectify_component_options nil, options
+    @template.render FoxTail::ButtonGroupComponent.new(options), &block
+  end
+
+  def input_group(options = {}, &block)
+    options = objectify_component_options nil, options
+    @template.render FoxTail::InputGroupComponent.new(options), &block
+  end
+
+  def submit(value = nil, options = {}, &block)
+    if value.is_a?(Hash)
+      options = value
+      value = nil
+    end
+
+    options[:type] = :submit
+
+    button value, options, &block
+  end
+
+  # @todo Implement other form builder methods
+  #
+  # def collection_check_boxes(method, collection, value_method, text_method, options = nil, html_options = nil, &block)
+  #   super
+  # end
+  #
+  # def collection_radio_buttons(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
+  #   super
+  # end
+  #
+  # def date_select(method, options = nil, html_options = nil)
+  #   super
+  # end
+  #
+  # def time_select(method, options = nil, html_options = nil)
+  #   super
+  # end
+  #
+  # def time_zone_select(method, priority_zones = nil, options = {}, html_options = {})
+  #   super
+  # end
+  #
+  # def datetime_select(method, options = nil, html_options = nil)
+  #   super
+  # end
+  #
+  # def weekday_select(method, options = nil, html_options = nil)
+  #   super
+  # end
+
+  protected
+
+  def objectify_component_options(method, options)
+    result = objectify_options options
+    result[:object_name] = object_name
+    result[:method_name] = method
+    result[:value_array] = self.options[:multiple] # Rename to prevent conflicts
+    result[:object_index] = self.options[:index] # Rename to prevent conflicts
+    result
+  end
+end

data/config/locales/fox_tail.en.yml

@@ -0,0 +1,12 @@
+en:
+  components:
+    fox_tail:
+      dismiss: Dismiss
+      close: Close
+      dropzone:
+        title_html: <span class="font-semibold">Click to upload</span> or drag and drop.
+      pagination:
+        first_page: First
+        previous_page: Previous
+        next_page: Next
+        last_page: Last

data/lib/fox_tail/base.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require 'view_component'
+
+module FoxTail
+  class Base < ::ViewComponent::Base
+    class << self
+      def fox_tail_config
+        Config.current
+      end
+    end
+
+    ActiveSupport.run_load_hooks :fox_tail, self
+  end
+end

data/lib/fox_tail/classname_merger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require 'tailwind_merge'
+
+module FoxTail
+  # Tailwind CSS class name merger
+  class ClassnameMerger
+    def initialize
+      @base_merger = TailwindMerge::Merger.new
+    end
+
+    # Merge Tailwind class names removing any styling conflicts
+    def merge(*classes)
+      normalized = classes.flatten.select { |c| c.present? && c.is_a?(String) }
+      return nil if normalized.empty?
+
+      @base_merger.merge normalized.join(" ")
+    end
+  end
+end

data/lib/fox_tail/config.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require 'fox_tail/classname_merger'
+require 'fox_tail/stimulus_merger'
+
+module FoxTail
+  class Config
+    class << self
+      alias_method :default, :new
+
+      def defaults
+        ActiveSupport::OrderedOptions.new.merge!({
+                                                   classname_merger: ClassnameMerger.new,
+                                                   stimulus_merger: StimulusMerger.new,
+                                                   use_stimulus: true,
+                                                   raise_on_asset_not_found: true,
+                                                   color_theme: {}
+                                                 })
+      end
+
+      def current
+        @current ||= default
+      end
+    end
+
+    delegate_missing_to :@config
+
+    def initialize
+      @config = self.class.defaults.clone
+    end
+  end
+end