fox_tail 0.1.0

data/app/components/fox_tail/carousel_controller.ts

@@ -0,0 +1,204 @@
+import { ActionEvent, Controller } from '@hotwired/stimulus';
+
+interface GoToActionEvent extends ActionEvent {
+    params: {
+        slide: number;
+    };
+}
+
+export default class extends Controller {
+    static classes = [
+        'previousSlide',
+        'currentSlide',
+        'nextSlide',
+        'hiddenSlide',
+        'activeIndicator',
+        'inactiveIndicator',
+    ];
+
+    static targets = ['slide', 'indicator'];
+
+    static values = {
+        position: {
+            type: Number,
+            default: 0,
+        },
+        interval: {
+            type: Number,
+            default: 3000,
+        },
+    };
+
+    declare readonly positionValue: number;
+    declare readonly intervalValue: number;
+
+    declare readonly slideTargets: HTMLElement[];
+    declare readonly indicatorTargets: HTMLElement[];
+
+    declare readonly previousSlideClasses: string[];
+    declare readonly currentSlideClasses: string[];
+    declare readonly nextSlideClasses: string[];
+    declare readonly hiddenSlideClasses: string[];
+    declare readonly activeIndicatorClasses: string[];
+    declare readonly inactiveIndicatorClasses: string[];
+
+    private _position: number = -1;
+    private _timer: NodeJS.Timeout | undefined;
+    private _sliding: boolean = false;
+
+    slideTargetConnected(element: HTMLElement): void {
+        element.classList.add(...this.hiddenSlideClasses);
+    }
+
+    intervalValueChanged(): void {
+        this.stopTimer();
+        this.startTimer();
+    }
+
+    connect() {
+        super.connect();
+        this.goTo(this.positionValue);
+    }
+
+    disconnect() {
+        super.disconnect();
+        this.stopTimer();
+    }
+
+    goTo(arg: number | GoToActionEvent | undefined): void {
+        let slide: number | undefined = undefined;
+
+        if (arg instanceof Event) {
+            slide = (arg as GoToActionEvent).params.slide;
+        } else if (!isNaN(Number(arg.toString()))) {
+            slide = arg as number;
+        }
+
+        if (typeof slide === 'undefined') {
+            return;
+        }
+
+        this.setActiveSlide(slide);
+    }
+
+    next(): void {
+        this.setActiveSlide(this.getNextPosition());
+    }
+
+    previous(): void {
+        this.setActiveSlide(this.getPreviousPosition());
+    }
+
+    protected onChange(nextPosition: number, currentPosition: number): boolean {
+        return this.dispatch('change', {
+            cancelable: true,
+            detail: { position: currentPosition, nextPosition: nextPosition },
+        }).defaultPrevented;
+    }
+
+    protected onChanged(
+        currentPosition: number,
+        previousPosition: number,
+    ): void {
+        this.dispatch('changed', {
+            detail: { position: currentPosition, previousPosition },
+        });
+    }
+
+    private startTimer(): void {
+        if (this.intervalValue > 0 && !this._timer) {
+            this._timer = setInterval(() => this.next(), this.intervalValue);
+        }
+    }
+
+    private stopTimer(): void {
+        if (!this._timer) {
+            return;
+        }
+
+        clearInterval(this._timer);
+        this._timer = undefined;
+    }
+
+    private getNextPosition(position: number = this._position): number {
+        return (position + 1) % this.slideTargets.length;
+    }
+
+    private getPreviousPosition(position: number = this._position): number {
+        return (position === 0 ? this.slideTargets.length : position) - 1;
+    }
+
+    private setActiveSlide(position: number): void {
+        if (
+            position === this._position ||
+            this._sliding ||
+            this.onChange(position, this._position)
+        ) {
+            return;
+        }
+
+        this._sliding = true;
+        this.stopTimer();
+        this.rotateSlides(position);
+        this.setActiveIndicator(position);
+        const previousPosition = this._position;
+        this._position = position;
+        this.startTimer();
+        this._sliding = false;
+        this.onChanged(this._position, previousPosition);
+    }
+
+    private rotateSlides(position: number): void {
+        const previousPosition = this.getPreviousPosition(position);
+        const nextPosition = this.getNextPosition(position);
+
+        this.slideTargets.forEach((element) => {
+            element.classList.remove(
+                ...this.nextSlideClasses,
+                ...this.currentSlideClasses,
+                ...this.previousSlideClasses,
+            );
+
+            element.classList.add(...this.hiddenSlideClasses);
+        });
+
+        if (previousPosition != nextPosition) {
+            this.slideTargets[previousPosition].classList.remove(
+                ...this.hiddenSlideClasses,
+            );
+            this.slideTargets[previousPosition].classList.add(
+                ...this.previousSlideClasses,
+            );
+        }
+
+        this.slideTargets[position].classList.remove(
+            ...this.hiddenSlideClasses,
+        );
+
+        this.slideTargets[position].classList.add(...this.currentSlideClasses);
+
+        if (nextPosition != position) {
+            this.slideTargets[nextPosition].classList.remove(
+                ...this.hiddenSlideClasses,
+            );
+
+            this.slideTargets[nextPosition].classList.add(
+                ...this.nextSlideClasses,
+            );
+        }
+    }
+
+    private setActiveIndicator(position: number): void {
+        this.indicatorTargets.forEach((element, index) => {
+            if (index === position) {
+                element.classList.remove(...this.inactiveIndicatorClasses);
+                element.classList.add(...this.activeIndicatorClasses);
+                element.setAttribute('aria-current', 'true');
+            } else {
+                element.classList.remove(...this.activeIndicatorClasses);
+                element.classList.add(...this.inactiveIndicatorClasses);
+                element.setAttribute('aria-current', 'true');
+            }
+        });
+    }
+}

data/app/components/fox_tail/checkbox_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class FoxTail::CheckboxComponent < FoxTail::BaseComponent
+  has_option :color, default: :default
+  has_option :size, default: :base
+  has_option :unchecked_value, default: "0"
+  has_option :checked_value, default: "1"
+  has_option :include_hidden, type: :boolean, default: true
+
+  def before_render
+    super
+
+    html_attributes[:type] = :checkbox
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    html_attributes[:value] = checked_value
+  end
+
+  def call
+    capture do
+      concat tag(:input, hidden_attributes) if include_hidden?
+      concat tag(:input, html_attributes)
+    end
+  end
+
+  private
+
+  def hidden_attributes
+    html_attributes.slice(:name, :disabled, :form)
+                   .merge!(type: :hidden, value: unchecked_value, autocomplete: "off")
+  end
+end

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

@@ -0,0 +1,18 @@
+root:
+  base: >-
+    bg-gray-100 dark:bg-gray-700
+    rounded border-gray-300 dark:border-gray-600
+    focus:ring-2 dark:ring-offset-gray-800
+  size:
+    sm: w-3 h-3
+    base: w-4 h-4
+    lg: w-6 h-6
+  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

data/app/components/fox_tail/clickable_component.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+class FoxTail::ClickableComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  has_option :url
+  has_option :disabled, default: false, type: :boolean
+  has_option :loading, default: false, type: :boolean
+  has_option :loadable, default: false, type: :boolean
+  has_option :controlled, default: false, type: :boolean
+
+  def use_stimulus?
+    controlled? && self.class.use_stimulus?
+  end
+
+  def link?
+    url? && ((!disabled? && !loading?) || controlled?)
+  end
+
+  def root_tag_name
+    link? ? :a : :button
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = root_classes
+
+    if root_tag_name == :a
+      html_attributes[:href] = url
+      html_attributes["aria-disabled"] = true if disabled?
+    elsif root_tag_name == :button
+      html_attributes[:role] ||= :button
+      html_attributes[:type] ||= :button
+      html_attributes[:disabled] = true if disabled?
+    end
+  end
+
+  def call(&block)
+    captured_content = block ? capture(&block) : content
+    content_tag root_tag_name, captured_content, html_attributes
+  end
+
+  def stimulus_controller_options
+    { state: stimulus_state, active_classes: active_classes, disabled_classes: disabled_classes }
+  end
+
+  protected
+
+  def root_classes
+    classnames theme.apply(:root, self),
+               theme.apply("root/#{disabled? ? :disabled : :active}", self),
+               block_given? && yield,
+               html_class
+  end
+
+  def active_classes
+    classnames theme.apply(:root, self),
+               theme.apply("root/active", self),
+               block_given? && yield,
+               html_class
+  end
+
+  def disabled_classes
+    classnames theme.apply("root/disabled", self), block_given? && yield
+  end
+
+  private
+
+  def stimulus_state
+    if loading?
+      :loading
+    elsif disabled?
+      :disabled
+    else
+      :active
+    end
+  end
+
+  class << self
+    def stimulus_controller_name
+      :clickable
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      {
+        data: {
+          controller: identifier,
+          value_key(:state) => options[:state] || :active,
+          classes_key(:active) => options[:active_classes],
+          classes_key(:disabled) => options[:disabled_classes]
+        }
+      }
+    end
+  end
+end

data/app/components/fox_tail/clickable_controller.ts

@@ -0,0 +1,91 @@
+import { Controller } from '@hotwired/stimulus';
+import { twMerge } from 'tailwind-merge';
+
+export default class extends Controller {
+    static classes = ['active', 'disabled'];
+    static targets = ['active', 'loading'];
+
+    static values = {
+        state: {
+            type: String,
+            default: 'active',
+        },
+    };
+
+    declare stateValue: string;
+    declare readonly activeClasses: string[];
+    declare readonly disabledClasses: string[];
+    declare readonly activeTargets: HTMLElement[];
+    declare readonly loadingTargets: HTMLElement[];
+
+    get isLink(): boolean {
+        return this.element.tagName.toLowerCase() === 'a';
+    }
+
+    get isButton(): boolean {
+        return !this.isLink;
+    }
+
+    connect() {
+        super.connect();
+        this.element.addEventListener('click', this.handleClick.bind(this));
+    }
+
+    activeTargetConnected(element: HTMLElement): void {
+        this.toggleActiveTargetVisibility(element);
+    }
+
+    loadingTargetConnected(element: HTMLElement): void {
+        this.toggleLoadingTargetVisibility(element);
+    }
+
+    stateValueChanged(): void {
+        this.toggleClass();
+        this.toggleAriaDisabled();
+        this.toggleVisibility();
+    }
+
+    private handleClick(event: Event): void {
+        if (this.stateValue !== 'active') {
+            event.preventDefault();
+        }
+    }
+
+    private toggleAriaDisabled(): void {
+        if (this.isLink) {
+            this.element.setAttribute(
+                'aria-disabled',
+                this.stateValue !== 'active' ? 'true' : 'false',
+            );
+        } else if (this.stateValue === 'active') {
+            this.element.removeAttribute('disabled');
+        } else {
+            this.element.setAttribute('disabled', 'disabled');
+        }
+    }
+
+    private toggleClass(): void {
+        let classes = this.activeClasses;
+
+        if (this.stateValue !== 'active') {
+            classes = [...classes, ...this.disabledClasses];
+        }
+
+        this.element.className = twMerge(classes.join(' '));
+    }
+
+    private toggleVisibility(): void {
+        this.activeTargets.forEach((e) => this.toggleActiveTargetVisibility(e));
+        this.loadingTargets.forEach((e) =>
+            this.toggleLoadingTargetVisibility(e),
+        );
+    }
+
+    private toggleActiveTargetVisibility(element: HTMLElement) {
+        element.classList.toggle('hidden', this.stateValue === 'loading');
+    }
+
+    private toggleLoadingTargetVisibility(element: HTMLElement) {
+        element.classList.toggle('hidden', this.stateValue !== 'loading');
+    }
+}

data/app/components/fox_tail/collapsible_component.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+class FoxTail::CollapsibleComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  attr_reader :id
+
+  renders_one :trigger, lambda { |attributes = {}|
+    FoxTail::CollapsibleTriggerComponent.new trigger_id, "##{id}", attributes.merge(open: open?)
+  }
+
+  has_option :open, 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[:class] = classnames theme.apply(:root, self),
+                                         !open? && theme.apply("root/collapsed", self),
+                                         html_class
+  end
+
+  def call
+    capture do
+      concat trigger if trigger?
+      concat content_tag(:div, content, html_attributes)
+    end
+  end
+
+  def stimulus_controller_options
+    {
+      open: open?,
+      hidden_classes: theme.apply("root/collapsed", self)
+    }
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super options
+      attributes[:data][value_key(:collapsed)] = !options[:open]
+      attributes[:data][classes_key(:hidden)] = options[:hidden_classes]
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,2 @@
+root/collapsed:
+  base: hidden

data/app/components/fox_tail/collapsible_controller.ts

@@ -0,0 +1,76 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static classes = ['hidden'];
+
+    static values = {
+        collapsed: {
+            type: Boolean,
+            default: false,
+        },
+    };
+
+    declare readonly collapsedValue: boolean;
+    declare readonly hiddenClasses: string[];
+
+    private _isVisible: boolean = false;
+
+    get isVisible(): boolean {
+        return this._isVisible;
+    }
+
+    connect() {
+        super.connect();
+        this._isVisible = !this.collapsedValue;
+
+        if (this._isVisible) {
+            this.element.classList.remove(...this.hiddenClasses);
+        } else {
+            this.element.classList.add(...this.hiddenClasses);
+        }
+    }
+
+    show(): void {
+        if (this._isVisible || this.onShow()) {
+            return;
+        }
+
+        this.element.classList.remove(...this.hiddenClasses);
+        this._isVisible = true;
+        this.onShown();
+    }
+
+    hide(): void {
+        if (!this._isVisible || this.onHide()) {
+            return;
+        }
+
+        this.element.classList.add(...this.hiddenClasses);
+        this._isVisible = false;
+        this.onHidden();
+    }
+
+    toggle(): void {
+        if (this._isVisible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    protected onHide(): boolean {
+        return this.dispatch('hide', { cancelable: true }).defaultPrevented;
+    }
+
+    protected onHidden(): void {
+        this.dispatch('hidden');
+    }
+
+    protected onShow(): boolean {
+        return this.dispatch('show', { cancelable: true }).defaultPrevented;
+    }
+
+    protected onShown(): void {
+        this.dispatch('shown');
+    }
+}

data/app/components/fox_tail/collapsible_trigger_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+class FoxTail::CollapsibleTriggerComponent < FoxTail::TriggerBaseComponent
+  has_option :open, default: false, type: :boolean
+
+  def trigger_type
+    options[:trigger_type] ||= :click
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.classname("root.base"),
+                                         open? && theme.classname("root.expanded"),
+                                         !open? && theme.classname("root.collapsed"),
+                                         html_class
+  end
+
+  def stimulus_controller_options
+    super.merge open: open?,
+                collapsed_classes: theme.classname("root.collapsed"),
+                expanded_classes: theme.classname("root.expanded")
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    TRIGGER_TYPES = {
+      click: {
+        toggle: :click
+      }
+    }.freeze
+
+    def collapsible_identifier
+      FoxTail::CollapsibleComponent.stimulus_controller_identifier
+    end
+
+    def attributes(options = {})
+      trigger_type = TRIGGER_TYPES[options[:trigger_type]&.to_sym]
+      attributes = super options
+      attributes[:data][classes_key(:collapsed)] = options[:collapsed_classes]
+      attributes[:data][classes_key(:expanded)] = options[:expanded_classes]
+      attributes[:data][outlet_key(collapsible_identifier)] = options[:selector]
+      attributes[:data][:action] = build_actions(trigger_type)
+      attributes[:aria] = { expanded: options[:opened], controls: extract_controls(options[:collapsible_selector]) }
+      attributes
+    end
+
+    private
+
+    def extract_controls(selector)
+      selector = selector&.to_s
+      selector[1..] if selector.present? && selector.start_with?("#") && !selector.match?(/\s/)
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+root:
+  base: group
+  collapsed: collapsed
+root/collapsed:
+  base: collapsed