fox_tail 0.1.0

data/app/components/fox_tail/modal_component.rb

@@ -0,0 +1,131 @@
+# frozen_string_literal: true
+
+class FoxTail::ModalComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  renders_one :trigger, lambda { |options = {}|
+    FoxTail::ModalTriggerComponent.new options.delete(:id), "##{tag_id}", options
+  }
+
+  has_option :placement, default: :center
+  has_option :backdrop, type: :boolean, default: true
+  has_option :static, type: :boolean, default: false
+  has_option :size, default: :base
+  has_option :closeable, type: :boolean, default: true
+  has_option :open, type: :boolean, default: false
+
+  def tag_id
+    html_attributes[:id] ||= :"modal_#{SecureRandom.hex(4)}"
+  end
+
+  def close_action(event: :click)
+    stimulus_controller.action :hide, event: event
+  end
+
+  def merge_close_action(attributes, event: :click)
+    return attributes unless use_stimulus?
+
+    attributes[:data] ||= {}
+    attributes[:data][:action] = stimulus_merger.merge_actions attributes[:data][:action], close_action(event: event)
+    attributes
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = root_classes
+    html_attributes[:tabindex] = -1
+    html_attributes[:aria] ||= {}
+    html_attributes[:aria][:hidden] = true
+  end
+
+  def call
+    capture do
+      concat trigger if trigger?
+      concat render_modal
+    end
+  end
+
+  def stimulus_controller_options
+    {
+      static: static?,
+      closeable: closeable?,
+      open: open?,
+      visible_classes: visible_classes,
+      hidden_classes: hidden_classes
+    }
+  end
+
+  def close_icon_button_component(icon_or_options = {}, options = {})
+    if icon_or_options.is_a? Hash
+      options = icon_or_options
+      icon_or_options = "x-mark"
+    end
+
+    options = merge_close_action options
+    options[:variant] = :modal
+    options[:color] = :modal
+    options[:size] = :modal
+    options[:theme] = theme.theme :close_icon_button
+
+    component = FoxTail::IconButtonComponent.new options
+    component.with_icon icon_or_options if icon_or_options.present?
+    component
+  end
+
+  def close_button_component(options = {})
+    options = merge_close_action options
+    FoxTail::ButtonComponent.new options
+  end
+
+  protected
+
+  def root_classes
+    classnames theme.apply(:root, self), hidden_classes, html_class
+  end
+
+  def visible_classes
+    theme.apply "root/visible", self
+  end
+
+  def hidden_classes
+    theme.apply "root/hidden", self
+  end
+
+  private
+
+  def content_attributes
+    attributes = { class: theme.apply(:content, self) }
+    attributes[:data] = { stimulus_controller.target_key => :content } if use_stimulus?
+    attributes
+  end
+
+  def render_backdrop
+    content_tag :div, nil, class: theme.apply(:backdrop, self)
+  end
+
+  def render_modal
+    content_tag :div, html_attributes do
+      concat render_backdrop if backdrop?
+      concat content_tag(:div, content, content_attributes)
+    end
+  end
+
+  class << self
+    def stimulus_controller_name
+      :modal
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super options
+      attributes[:data][value_key(:static)] = options[:static]
+      attributes[:data][value_key(:closeable)] = options[:closeable]
+      attributes[:data][value_key(:open)] = options[:open]
+      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/modal_component.theme.yml

@@ -0,0 +1,43 @@
+root:
+  base: >-
+    fixed top-0 left-0 right-0 md:inset-0 z-[1300]
+    w-full h-full max-h-full p-4
+    overflow-x-hidden overflow-y-auto
+    justify-center items-center
+  backdrop?:
+    false: pointer-events-none
+  placement:
+    top_left: justify-start items-start
+    top_center: justify-center items-start
+    top_right: justify-end items-start
+    center_left: justify-start items-center
+    center: justify-center items-center
+    center_right: justify-end items-center
+    bottom_left: justify-start items-end
+    bottom_center: justify-center items-end
+    bottom_right: justify-end items-end
+root/hidden:
+  base: hidden
+root/visible:
+  base: flex
+backdrop:
+  base: absolute inset-0 z-[-1] bg-gray-900 bg-opacity-50 dark:bg-opacity-80
+content:
+  base: relative w-full max-h-full
+  backdrop?:
+    false: pointer-events-auto
+  size:
+    sm: max-w-md
+    base: max-w-lg
+    lg: max-w-4xl
+    xl: max-w-7xl
+close_icon_button:
+  root:
+    base: >-
+      w-8 h-8 rounded-lg
+      inline-flex justify-center items-center
+      text-sm text-gray-400 hover:text-gray-900 dark:hover:text-white
+      bg-transparent hover:bg-gray-200 dark:hover:bg-gray-600
+  visual:
+    base: w-3 h-3
+

data/app/components/fox_tail/modal_controller.ts

@@ -0,0 +1,192 @@
+import { Controller } from '@hotwired/stimulus';
+
+import usePreventBodyScroll from '../../../src/mixins/use_prevent_body_scroll';
+import useKeyboardListener from '../../../src/mixins/use_keyboard_listener';
+import useClickOutside from '../../../src/mixins/use_click_outside';
+import Stack from '../../../src/utilities/stack';
+
+const modals = new Stack<ModalController>();
+
+export default class ModalController extends Controller {
+    static classes = ['visible', 'hidden', 'body'];
+    static targets = ['content'];
+
+    static values = {
+        static: {
+            type: Boolean,
+            default: false,
+        },
+        closeable: {
+            type: Boolean,
+            default: true,
+        },
+        bodyScrolling: {
+            type: Boolean,
+            default: false,
+        },
+        open: {
+            type: Boolean,
+            default: false,
+        },
+    };
+
+    declare readonly staticValue: boolean;
+    declare readonly closeableValue: boolean;
+    declare readonly bodyScrolling: boolean;
+    declare readonly openValue: boolean;
+    declare readonly zIndexValue: number;
+    declare readonly visibleClasses: string[];
+    declare readonly hiddenClasses: string[];
+    declare readonly bodyClasses: string[];
+    declare readonly hasContentTarget: boolean;
+    declare readonly contentTarget: HTMLElement;
+
+    declare readonly backdropElement: HTMLElement | undefined;
+
+    private _open = false;
+    private _visible = false;
+    private _attachKeyboard = () => {};
+    private _detachKeyboard = () => {};
+    private _attachClickOutside = () => {};
+    private _detachClickOutside = () => {};
+    private _enableBodyScrolling = () => {};
+    private _disableBodyScrolling = () => {};
+
+    get isOpen(): boolean {
+        return this._open;
+    }
+
+    get isVisible(): boolean {
+        return this._visible;
+    }
+
+    get isActive(): boolean {
+        return modals.peak() === this;
+    }
+
+    connect() {
+        super.connect();
+
+        if (!this.bodyScrolling) {
+            [this._disableBodyScrolling, this._enableBodyScrolling] =
+                usePreventBodyScroll(this, {
+                    classes: this.bodyClasses,
+                });
+        }
+
+        if (this.closeableValue) {
+            [this._attachKeyboard, this._detachKeyboard] = useKeyboardListener(
+                this,
+                { element: document.body },
+            );
+
+            if (!this.staticValue) {
+                [this._attachClickOutside, this._detachClickOutside] =
+                    useClickOutside(this, {
+                        element: this.hasContentTarget
+                            ? this.contentTarget
+                            : this.element.children[0],
+                    });
+            }
+        }
+
+        if (this.openValue) {
+            this.show();
+        }
+    }
+
+    disconnect() {
+        super.disconnect();
+        modals.remove(this);
+    }
+
+    toggle(): void {
+        if (this._visible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    show(): void {
+        if (this._open || this.onShow()) {
+            return;
+        }
+
+        this._open = true;
+        modals.forEach((modal: ModalController) => modal.moveToBackground());
+        modals.push(this);
+        this.moveToForeground();
+        this.onShown();
+    }
+
+    hide(): void {
+        if (!this._open || this.onHide()) {
+            return;
+        }
+
+        this._open = false;
+        modals.remove(this);
+        this.moveToBackground();
+        modals.peak()?.moveToForeground();
+        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');
+    }
+
+    protected onKeyboardEvent(event: KeyboardEvent): void {
+        if (this.isActive && event.key === 'Escape') {
+            this.hide();
+        }
+    }
+
+    protected onClickOutside(): void {
+        this.isActive && this.hide();
+    }
+
+    private moveToForeground(): void {
+        if (this._visible) {
+            return;
+        }
+
+        this._visible = true;
+        this.element.classList.add(...this.visibleClasses);
+        this.element.classList.remove(...this.hiddenClasses);
+        this.element.setAttribute('aria-modal', 'true');
+        this.element.setAttribute('role', 'dialog');
+        this.element.removeAttribute('aria-hidden');
+        this._disableBodyScrolling();
+        this._attachKeyboard();
+        this._attachClickOutside();
+    }
+
+    private moveToBackground(): void {
+        if (!this._visible) {
+            return;
+        }
+
+        this._visible = false;
+        this.element.classList.add(...this.hiddenClasses);
+        this.element.classList.remove(...this.visibleClasses);
+        this.element.removeAttribute('aria-modal');
+        this.element.removeAttribute('role');
+        this.element.setAttribute('aria-hidden', 'true');
+        this._enableBodyScrolling();
+        this._detachKeyboard();
+        this._detachClickOutside();
+    }
+}

data/app/components/fox_tail/modal_trigger_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class FoxTail::ModalTriggerComponent < FoxTail::TriggerBaseComponent
+  class StimulusController < FoxTail::StimulusController
+    def modal_identifier
+      FoxTail::ModalComponent.stimulus_controller_identifier
+    end
+
+    def attributes(options = {})
+      attributes = super options
+      attributes[:data][outlet_key(self.modal_identifier)] = options[:selector]
+      attributes[:data][:action] = action options.fetch(:action, :show), event: options.fetch(:trigger_type, :click)
+      attributes
+    end
+  end
+end

data/app/components/fox_tail/modal_trigger_controller.ts

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+import ModalController from './modal_controller';
+
+export default class extends Controller {
+    static outlets = ['fox-tail--modal'];
+
+    declare readonly foxTailModalOutlet: ModalController;
+
+    show(): void {
+        this.foxTailModalOutlet.show();
+    }
+
+    hide(): void {
+        this.foxTailModalOutlet.hide();
+    }
+
+    toggle(): void {
+        this.foxTailModalOutlet.toggle();
+    }
+}

data/app/components/fox_tail/pagination/action_component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class FoxTail::Pagination::ActionComponent < FoxTail::ClickableComponent
+  renders_one :visual, types: {
+    icon: {
+      as: :icon,
+      renders: lambda { |icon, options = {}|
+        options[:class] = classnames theme.apply(:visual, self), options[:class]
+        FoxTail::IconBaseComponent.new icon, options
+      }
+    },
+    svg: {
+      as: :svg,
+      renders: lambda { |path, options = {}|
+        options[:class] = classnames theme.apply(:visual, self), options[:class]
+        FoxTail::InlineSvgComponent.new path, options
+      }
+    },
+    image: {
+      as: :image,
+      renders: lambda { |source, options = {}|
+        options[:class] = classnames theme.apply(:visual, self), options[:class]
+        image_tag source, options
+      }
+    },
+  }
+
+  has_option :action
+  has_option :size
+  has_option :show_label, type: :boolean, default: true
+
+  def left?
+    %i[first previous].include? action
+  end
+
+  def right?
+    !left?
+  end
+
+  def call
+    super do
+      concat visual if visual? && left?
+      concat content_tag(:span, content || i18n_content, class: theme.apply(:label, self))
+      concat visual if visual? && right?
+    end
+  end
+
+  private
+
+  def i18n_content
+    I18n.t action, scope: "helpers.pagination", default: action.to_s.humanize
+  end
+end

data/app/components/fox_tail/pagination/page_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class FoxTail::Pagination::PageComponent < FoxTail::ClickableComponent
+  has_option :current_page, type: :boolean, default: false
+end

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

@@ -0,0 +1,21 @@
+<%= content_tag :nav, html_attributes do %>
+  <%= first_button if first_button %>
+  <%= previous_button %>
+  <% if left_page_gap? %>
+    <%= content_tag :span, class: theme.apply(:ellipse, self) do %>
+      <%= render FoxTail::IconBaseComponent.new("ellipsis-horizontal", class: theme.apply("ellipse/icon", self)) %>
+    <% end %>
+  <% end %>
+  <% display_range.each do |page| %>
+    <%= render FoxTail::Pagination::PageComponent.new url: page_url(page), current_page: page == current_page, theme: theme.theme(:page) do %>
+      <%= page %>
+    <% end %>
+  <% end %>
+  <% if right_page_gap? %>
+    <%= content_tag :span, class: theme.apply(:ellipse, self) do %>
+      <%= render FoxTail::IconBaseComponent.new("ellipsis-horizontal", class: theme.apply("ellipse/icon", self)) %>
+    <% end %>
+  <% end %>
+  <%= next_button %>
+  <%= last_button if last_button? %>
+<% end %>

data/app/components/fox_tail/pagination_component.rb

@@ -0,0 +1,131 @@
+# frozen_string_literal: true
+
+class FoxTail::PaginationComponent < FoxTail::BaseComponent
+  attr_reader :url, :current_page, :total_pages
+
+  renders_one :first_button, lambda { |options = {}|
+    options[:action] = :first
+    options[:size] = size
+    options[:disabled] = first_page?
+    options[:theme] = theme.theme :action
+    options[:url] = page_url first_page
+    FoxTail::Pagination::ActionComponent.new options
+  }
+
+  renders_one :previous_button, lambda { |options = {}|
+    options[:action] = :previous
+    options[:size] = size
+    options[:disabled] = !previous_page?
+    options[:theme] = theme.theme :action
+    options[:url] = page_url previous_page
+    FoxTail::Pagination::ActionComponent.new options
+  }
+
+  renders_one :next_button, lambda { |options = {}|
+    options[:action] = :next
+    options[:size] = size
+    options[:disabled] = !next_page?
+    options[:theme] = theme.theme :action
+    options[:url] = page_url next_page
+    FoxTail::Pagination::ActionComponent.new options
+  }
+
+  renders_one :last_button, lambda { |options = {}|
+    options[:action] = :last
+    options[:size] = size
+    options[:disabled] = last_page?
+    options[:theme] = theme.theme :action
+    options[:url] = page_url last_page
+    FoxTail::Pagination::ActionComponent.new options
+  }
+
+  has_option :first_page, default: 1
+  has_option :page_key, default: :page
+  has_option :url
+  has_option :size, default: :base
+  has_option :padding, default: 3
+  has_option :variant, default: :text
+
+  def initialize(current_page, total_pages, html_attributes = {})
+    super(html_attributes)
+    @current_page = current_page
+    @total_pages = total_pages
+  end
+
+  def url
+    return options[:url] if options.key? :url
+
+    request.original_fullpath
+  end
+
+  def out_of_range?
+    current_page >= first_page && current_page <= last_page
+  end
+
+  def first_page?
+    current_page == first_page
+  end
+
+  def last_page
+    total_pages - 1 + first_page
+  end
+
+  def last_page?
+    current_page == last_page
+  end
+
+  def previous_page?
+    current_page - 1 >= first_page
+  end
+
+  def previous_page
+    current_page - 1 if previous_page?
+  end
+
+  def next_page?
+    current_page + 1 <= last_page
+  end
+
+  def next_page
+    current_page + 1 if next_page?
+  end
+
+  def display_range
+    right_padding = current_page - [first_page, current_page - padding].max
+    left_padding = [current_page + padding, last_page].min - current_page
+
+    start_page = if right_padding <= left_padding
+                   current_page - right_padding
+                 else
+                   [current_page - (right_padding + (padding - left_padding)), 1].max
+                 end
+
+    end_page = [last_page, start_page + (padding * 2)].min
+
+    (start_page..end_page)
+  end
+
+  def left_page_gap?
+    display_range.min > first_page
+  end
+
+  def right_page_gap?
+    display_range.max != last_page
+  end
+
+  def page_url(page)
+    uri = URI(url)
+    query = ActiveSupport::HashWithIndifferentAccess.new Rack::Utils.parse_nested_query(uri.query)
+    query[page_key] = page
+    uri.query = Rack::Utils.build_nested_query query
+    uri.to_s
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    with_previous_button unless previous_button?
+    with_next_button unless next_button?
+  end
+end

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

@@ -0,0 +1,40 @@
+root:
+  base: inline-flex -space-x-px
+  size:
+    sm: text-sm h-8
+    base: text-base h-10
+item_base: &item_base >-
+  flex items-center justify-center gap-2
+  leading-tight border border-gray-300 dark:border-gray-700
+  first:rounded-l-lg last:rounded-r-lg
+action:
+  root:
+    base: !concat [*item_base, " px-3 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800"]
+  root/active:
+    base: hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white
+  root/disabled:
+    base: bg-gray-100 dark:bg-gray-900 text-gray-300 dark:text-gray-600
+  label:
+    show_label?:
+      false: sr-only
+  visual:
+    base:
+    size:
+      sm: w-3 h-3
+      base: w-4 h-4
+page:
+  root:
+    base: !concat [*item_base, " px-4"]
+    current_page?:
+      false: text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800
+      true: text-blue-600 dark:text-white bg-blue-50 dark:bg-gray-700
+  root/active:
+    current_page?:
+      true: hover:text-blue-700 hover:bg-blue-100
+      false: hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white
+ellipse:
+  base: !concat [*item_base, " px-3 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800"]
+ellipse/icon:
+  size:
+    sm: w-3 h-3
+    base: w-4 h-5