fox_tail 0.1.0

data/app/components/fox_tail/f_a_b_component.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+class FoxTail::FABComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  renders_many :items, lambda { |icon_or_options = {}, options = {}|
+    if icon_or_options.is_a?(Hash)
+      FoxTail::FAB::ItemComponent.new merge_item_options(icon_or_options)
+    else
+      FoxTail::FAB::ItemComponent.new icon_or_options, merge_item_options(options)
+    end
+  }
+
+  renders_one :icon, lambda { |icon_or_options = {}, options = {}|
+    if icon_or_options.is_a? Hash
+      FoxTail::IconButtonComponent.new merge_fab_options(icon_or_options)
+    else
+      FoxTail::IconButtonComponent.new icon_or_options, merge_fab_options(options)
+    end
+  }
+
+  has_option :placement, default: :bottom_right
+  has_option :item_placement, default: :auto
+  has_option :label_placement, default: :auto
+  has_option :label_style, default: :tooltip
+  has_option :rounded, type: :boolean, default: true
+  has_option :trigger_type, default: :hover
+
+  def initialize(html_attributes = {})
+    super(html_attributes)
+
+    html_attributes[:id] ||= :"fab_#{SecureRandom.hex(4)}"
+    options[:item_placement] = calculate_item_placement if item_placement == :auto
+    options[:label_placement] = calculate_label_placement if label_placement == :auto
+  end
+
+  def horizontal?
+    !vertical?
+  end
+
+  def vertical?
+    %i[top bottom].include? item_placement
+  end
+
+  def before_render
+    super
+
+    with_icon "plus" unless icon?
+
+    html_attributes[:class] = classnames theme.apply(:root, self),
+                                         placement.is_a?(String) && placement,
+                                         theme.apply("root/hidden", self),
+                                         html_class
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      concat render_items if items? && render_items_first?
+      concat icon
+      concat render_items if items? && !render_items_first?
+    end
+  end
+
+  def stimulus_controller_options
+    {
+      trigger_type: trigger_type,
+      visible_classes: theme.apply("root/visible", self),
+      hidden_classes: theme.apply("root/hidden", self),
+    }
+  end
+
+  private
+
+  def merge_fab_options(options)
+    options = options.merge variant: :solid, size: :fab, pill: rounded?
+    options[:class] = classnames theme.apply(:visual, self), options[:class]
+    options[:data] ||= {}
+    options[:data][stimulus_controller.target_key] = :button
+    options
+  end
+
+  def merge_item_options(options)
+    options.merge label_style: label_style,
+                  pill: rounded?,
+                  placement: placement,
+                  label_placement: label_placement,
+                  theme: theme.theme(:item)
+  end
+
+  def calculate_item_placement
+    placement.to_s.start_with?("top") ? :bottom : :top
+  end
+
+  def calculate_label_placement
+    if vertical?
+      placement.to_s.ends_with?("left") ? :right : :left
+    else
+      placement.to_s.start_with?("top") ? :bottom : :top
+    end
+  end
+
+  def render_items_first?
+    %i[top left].include? item_placement
+  end
+
+  def render_items
+    attributes = { }
+    attributes[:class] = classnames theme.apply(:menu, self)
+    attributes[:data] = {}
+    attributes[:data][stimulus_controller.target_key] = :menu if use_stimulus?
+
+    content_tag :div, attributes do
+      items.each { |item| concat item }
+    end
+  end
+
+  class << self
+    def stimulus_controller_name
+      :fab
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super options
+      attributes[:data][value_key(:trigger_type)] = options[:trigger_type]
+      attributes[:data][classes_key(:visible)] = options[:visible_classes]
+      attributes[:data][classes_key(:hidden)] = options[:hidden_classes]
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+root:
+  base: fixed group/fab
+  placement:
+    top_right: top-6 right-6
+    top_left: top-6 left-6
+    bottom_right: bottom-6 right-6
+    bottom_left: bottom-6 left-6
+  horizontal?: flex
+root/visible:
+  base: show
+menu:
+  base: relative hidden items-center gap-2 group-[.show]/fab:flex
+  horizontal?: mx-4
+  vertical?: flex-col my-4
+visual:
+  base:
+item:
+  root:
+    size:
+      fab:
+        base: w-[52px] h-[52px] flex items-center justify-center
+        label_style:
+          inside: flex-col gap-1
+          outside: relative
+  icon:
+    size:
+      fab:
+        base: w-7 h-7
+        label_style:
+          inside: w-5 h-5
+  content:
+    label_style:
+      inside: not-sr-only block mb-px text-xs font-extralight
+      outside: not-sr-only absolute block mb-px text-sm font-medium -translate-y-1/2 right-16 top-1/2

data/app/components/fox_tail/fab_controller.ts

@@ -0,0 +1,116 @@
+import { Controller } from '@hotwired/stimulus';
+
+import { safeCallMethod } from '../../../src/utilities/reflection';
+
+const TRIGGER_TYPES: { [key: string]: { [key: string]: string[] } } = {
+    hover: {
+        show: ['mouseenter', 'focus'],
+        hide: ['mouseleave', 'blur'],
+    },
+    click: {
+        show: ['click', 'focus'],
+        hide: ['focusout', 'blur'],
+    },
+};
+
+export default class extends Controller {
+    static targets = ['menu', 'button'];
+    static classes = ['visible', 'hidden'];
+
+    static values = {
+        triggerType: {
+            type: String,
+            default: 'hover',
+        },
+    };
+
+    declare readonly triggerTypeValue: string;
+    declare readonly menuTarget: HTMLElement;
+    declare readonly buttonTarget: HTMLElement;
+    declare readonly visibleClasses: string[];
+    declare readonly hiddenClasses: string[];
+
+    private _visible = false;
+
+    buttonTargetConnected(element: HTMLElement): void {
+        if (this.triggerTypeValue == 'hover') {
+            return;
+        }
+
+        for (const [method, events] of Object.entries(
+            TRIGGER_TYPES[this.triggerTypeValue] || {},
+        )) {
+            events.forEach((event) => {
+                element.addEventListener(event, () =>
+                    safeCallMethod(this, method),
+                );
+            });
+        }
+    }
+
+    connect() {
+        super.connect();
+
+        if (this.triggerTypeValue == 'hover') {
+            for (const [method, events] of Object.entries(
+                TRIGGER_TYPES.hover,
+            )) {
+                events.forEach((event) => {
+                    this.element.addEventListener(event, () =>
+                        safeCallMethod(this, method),
+                    );
+                });
+            }
+        }
+    }
+
+    toggle(): void {
+        if (this._visible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    show(): void {
+        if (this._visible || this.onShow()) {
+            return;
+        }
+
+        this.element.classList.remove(...this.hiddenClasses);
+        this.element.classList.add(...this.visibleClasses);
+        this.buttonTarget.setAttribute('aria-expanded', 'true');
+
+        this._visible = true;
+        this.onShown();
+    }
+
+    hide(): void {
+        if (!this._visible || this.onHide()) {
+            return;
+        }
+
+        this.element.classList.remove(...this.visibleClasses);
+        this.element.classList.add(...this.hiddenClasses);
+        this.buttonTarget.setAttribute('aria-expanded', 'false');
+
+        this._visible = false;
+        this.onHidden();
+    }
+
+    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/file_input_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class FoxTail::FileInputComponent < FoxTail::InputBaseComponent
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    html_attributes[:type] = :file
+  end
+
+  def call
+    tag :input, html_attributes
+  end
+
+  protected
+
+  def can_read_only?
+    false
+  end
+end

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

@@ -0,0 +1,12 @@
+root:
+  base: >-
+    block w-full cursor-pointer
+    text-gray-900 dark:text-white
+    placeholder-gray-600 dark:placeholder-gray-400
+    bg-gray-50 dark:bg-gray-700
+    rounded-lg border border-gray-300 dark:border-gray-600
+    focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500
+  size:
+    sm: text-xs
+    base: text-sm
+    lg: text-lg

data/app/components/fox_tail/helper_text_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class FoxTail::HelperTextComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+
+  has_option :state
+
+  def render?
+    content.present? || content_translator.translate.present?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :p, retrieve_content, html_attributes
+  end
+
+  private
+
+  def retrieve_content
+    return content if content?
+    return nil unless object_name? && method_name?
+
+    content_translator.translate
+  end
+
+  def content_translator
+    translator scope: "helpers.help_text"
+  end
+end

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

@@ -0,0 +1,5 @@
+root:
+  base: text-sm text-gray-500 dark:text-gray-400
+  state:
+    valid: text-green-600 dark:text-green-500
+    invalid: text-red-600 dark:text-red-500

data/app/components/fox_tail/hr_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class FoxTail::HrComponent < FoxTail::BaseComponent
+
+  has_option :size, default: :base
+  has_option :shape, default: :none
+  has_option :trimmed, default: false, type: :boolean
+
+  def shape?
+    shape != :none
+  end
+
+  def call
+    content_tag :div, class: wrapper_classes do
+      if content? && shape == :none
+        concat tag(:hr, class: hr_classes)
+        concat content_tag(:div, content, class: content_classes)
+        concat tag(:hr, class: hr_classes)
+      else
+        tag :hr, class: hr_classes
+      end
+    end
+  end
+
+  private
+
+  def wrapper_classes
+    classnames theme.apply(:wrapper, self), html_class
+  end
+
+  def hr_classes
+    theme.apply :root, self
+  end
+
+  def content_classes
+    theme.apply :content, self
+  end
+end

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

@@ -0,0 +1,23 @@
+root:
+  base: h-px bg-gray-300 border-0 dark:bg-gray-700 w-full
+  shape:
+    base: mx-auto
+    square: rounded
+    circle: rounded-full
+  shape?:
+    false:
+      size:
+        base: h-px
+        sm: h-1
+    true:
+      size:
+        xs: w-2 h-2
+        sm: w-4 h-4
+        base: w-8 h-8
+        lg: w-10 h-10
+        xl: w-12 h-12
+wrapper:
+  base: flex items-center justify-center w-full my-4
+  trimmed?: w-64 mx-auto
+content:
+  base: absolute px-4 -translate-x-1/2 bg-white left-1/2 dark:bg-gray-900 text-gray-900 dark:text-white

data/app/components/fox_tail/icon_base_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class FoxTail::IconBaseComponent < FoxTail::InlineSvgComponent
+  attr_reader :name
+
+  has_option :variant, default: :solid
+
+  def initialize(name, html_attributes = {})
+    @name = name.to_s.gsub("_", "-")
+    super nil, html_attributes
+  end
+
+  def path
+    icon_fullpath
+  end
+
+  private
+
+  def icon_fullpath
+    filename = "#{name.to_s.gsub("_", "-")}.svg"
+    size = variant.to_sym == :mini ? "20" : "24"
+    style = variant.to_sym == :mini ? "solid" : variant.to_s
+    FoxTail.root.join("app/assets/vendor/heroicons", size, style, filename).to_s
+  end
+end

data/app/components/fox_tail/icon_button_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class FoxTail::IconButtonComponent < FoxTail::ButtonBaseComponent
+  renders_many :icons, lambda { |icon, options = {}|
+    options[:class] = classnames theme.apply(:icon, self), options[:class]
+    FoxTail::IconBaseComponent.new icon, options
+  }
+
+  def initialize(icon_or_attributes = {}, html_attributes = {})
+    if icon_or_attributes.is_a? Hash
+      html_attributes = icon_or_attributes
+      icon_or_attributes = nil
+    end
+
+    super(html_attributes)
+
+    with_icon icon_or_attributes if icon_or_attributes.present?
+  end
+
+  def call
+    super do
+      icons.each { |icon| concat icon }
+
+      if content? || i18n_content.present?
+        concat content_tag(:span, retrieve_content, class: theme.apply(:content, self))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+root:
+  size:
+    xs: p-2 text-xs
+    sm: p-2 text-sm
+    base: p-2.5 text-sm
+    lg: p-3 text-base
+    xl: p-3.5 text-base
+    fab: w-14 h-14 inline-flex items-center justify-center
+icon:
+  size:
+    xs: h-3 w-3
+    sm: h-3.5 w-3.5
+    base: h-3.5 w-3.5
+    lg: h-4 w-4
+    xl: h-5 w-5
+    fab: h-7 w-7
+content:
+  base: sr-only

data/app/components/fox_tail/icon_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+##
+# Displays an icon inline
+class FoxTail::IconComponent < FoxTail::IconBaseComponent
+  attr_reader :color, :size
+
+  has_option :color, default: :default
+  has_option :size, default: :base
+
+  protected
+
+  def html_class
+    classnames theme.apply(:root, self), super
+  end
+end

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

@@ -0,0 +1,23 @@
+root:
+  size:
+    xs: w-4 h-4
+    sm: w-6 h-6
+    base: w-8 h-8
+    lg: w-10 h-10
+    xl: w-20 h-20
+  color:
+    neutral: &default text-gray-500 dark:text-gray-400
+    dark: text-gray-800 dark:text-gray-900
+    light: text-gray-300 dark:text-gray-500
+    info: text-blue-800 dark:text-blue-200
+    success: text-green-800 dark:text-green-200
+    warning: text-yellow-800 dark:text-yellow-200
+    error: text-red-800 dark:text-red-200
+    blue: text-blue-500 dark:text-blue-700
+    red: text-red-500 dark:text-red-700
+    yellow: text-yellow-500 dark:text-yellow-700
+    green: text-green-500 dark:text-green-700
+    indigo: text-indigo-500 dark:text-indigo-700
+    purple: text-purple-500 dark:text-purple-700
+    pink: text-pink-500 dark:text-pink-700
+    default: *default

data/app/components/fox_tail/index.ts

@@ -0,0 +1,21 @@
+export { default as AccordionController } from './accordion_controller';
+export { default as CarouselController } from './carousel_controller';
+export { default as ClickableController } from './clickable_controller';
+export { default as CollapsibleController } from './collapsible_controller';
+export { default as CollapsibleTriggerController } from './collapsible_trigger_controller';
+export { default as ColorThemeController } from './color_theme_controller';
+export { default as DismissibleController } from './dismissible_controller';
+export { default as DrawerController } from './drawer_controller';
+export { default as DrawerTriggerController } from './drawer_trigger_controller';
+export { default as DropdownController } from './dropdown_controller';
+export { default as DropdownTriggerController } from './dropdown_trigger_controller';
+export { default as FABController } from './fab_controller';
+export { default as ModalController } from './modal_controller';
+export { default as ModalTriggerController } from './modal_trigger_controller';
+export { default as PopoverController } from './popover_controller';
+export { default as PopoverTriggerController } from './popover_trigger_controller';
+export { default as ProgressBarController } from './progress_bar_controller';
+export { default as TabController } from './tab_controller';
+export { default as TextareaAutoResizeController } from './textarea_auto_resize_controller';
+export { default as TooltipController } from './tooltip_controller';
+export { default as TooltipTriggerController } from './tooltip_trigger_controller';

data/app/components/fox_tail/inline_svg_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+##
+# Displays an SVG file inline
+class FoxTail::InlineSvgComponent < FoxTail::BaseComponent
+  attr_reader :path
+
+  has_option :raise, as: :raise_error, type: :boolean
+
+  def initialize(path, html_attributes = {})
+    unless html_attributes.key? :raise
+      html_attributes[:raise] = FoxTail::Base.fox_tail_config.raise_on_asset_not_found
+    end
+
+    super(html_attributes)
+
+    @path = path.to_s
+  end
+
+  def call
+    doc = Nokogiri::XML.parse asset_contents
+    sanitized_html_attributes.each { |k, v| doc.child[k.to_s] = v }
+    doc.child[:class] = html_class
+    yield doc if block_given?
+    doc.child.to_s.html_safe
+  rescue FoxTail::AssetNotFound => e
+    raise e if raise_error?
+
+    Rails.logger.warn "[FoxTail::InlineSvgComponent] #{e.message}"
+    content_tag :svg, nil, class: "hidden asset-not-found"
+  end
+
+  private
+
+  def find_asset_path
+    if (manifest_file = Rails.application.assets_manifest.assets[path])
+      File.join(Rails.application.assets_manifest.directory, manifest_file)
+    else
+      Rails.application.assets.find_asset(path)&.filename
+    end
+  end
+
+  def asset_contents
+    asset_path = File.exist?(path) ? path : find_asset_path
+    raise FoxTail::AssetNotFound.new(path) unless asset_path
+
+    File.read(asset_path).force_encoding("UTF-8")
+  end
+end

data/app/components/fox_tail/input_base_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class FoxTail::InputBaseComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+  include FoxTail::Concerns::Placeholderable
+
+  has_option :size, default: :base
+  has_option :state
+
+  def initialize(*)
+    super
+
+    update_state_from_object!
+  end
+
+  def before_render
+    super
+
+    add_default_name_and_id
+  end
+
+  protected
+
+  def can_read_only?
+    true
+  end
+
+  def can_disable?
+    true
+  end
+
+  def update_state_from_object!
+    return unless object? && !options.key(:state)
+
+    options[:state] = if object_errors?
+                        :invalid
+                      elsif html_attributes[:value].present?
+                        :valid
+                      else
+                        :none
+                      end
+  end
+end

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

@@ -0,0 +1,32 @@
+root:
+  base: >-
+    block w-full
+    text-gray-900 dark:text-white
+    placeholder-gray-600 dark:placeholder-gray-400
+    bg-gray-50 dark:bg-gray-700
+    rounded-lg border border-gray-300 dark:border-gray-600
+    focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500
+  can_read_only?: read-only:cursor-not-allowed
+  can_disable?: >-
+    disabled:cursor-not-allowed
+    disabled:bg-neutral-100 dark:disabled:bg-neutral-700
+    disabled:text-neutral-900 dark:disabled:text-neutral-400
+    disabled:border-neutral-300 disabled:dark:border-neutral-600
+    disabled:dark:placeholder-neutral-400
+  size:
+    sm: p-2 text-sm
+    base: p-2.5 text-sm
+    lg: p-4 text-md
+  state:
+    valid: >-
+      bg-green-50 dark:bg-gray-700
+      border-green-500 dark:border-green-500
+      text-green-900 dark:text-green-400 
+      placeholder-green-700 dark:placeholder-green-600 
+      focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500
+    invalid: >-
+      bg-red-50 dark:bg-gray-700
+      border-red-500 dark:border-red-500
+      text-red-900 dark:text-red-500
+      placeholder-red-700 dark:placeholder-red-600 
+      focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500