fox_tail 0.1.0

data/app/components/fox_tail/dismissible_controller.ts

@@ -0,0 +1,96 @@
+import { Controller } from '@hotwired/stimulus';
+import parseDuration from 'parse-duration';
+
+import { addClasses } from '../../../src/utilities/tailwind';
+
+export default class extends Controller {
+    static classes = ['dismissing', 'dismissed'];
+
+    static values = {
+        remove: {
+            type: Boolean,
+            default: false,
+        },
+        autoClose: {
+            type: Boolean,
+            default: false,
+        },
+        delay: {
+            type: Number,
+            default: 3000,
+        },
+    };
+
+    declare readonly removeValue: boolean;
+    declare readonly autoCloseValue: boolean;
+    declare readonly delayValue: number;
+    declare readonly dismissingClasses: string[];
+    declare readonly dismissedClasses: string[];
+
+    private _dismissed: boolean = false;
+    private _autoCloseTimer: number | null = null;
+
+    connect() {
+        super.connect();
+
+        if (this.autoCloseValue) {
+            this.setTimer();
+        }
+    }
+
+    disconnect() {
+        super.disconnect();
+        this.clearTimer();
+    }
+
+    dismiss(): void {
+        if (this._dismissed || this.onDismissing()) {
+            return;
+        }
+
+        this._dismissed = true;
+        this.clearTimer();
+        addClasses(this.element, ...this.dismissingClasses);
+
+        const duration = this.calculateDuration();
+
+        setTimeout(() => {
+            addClasses(this.element, ...this.dismissedClasses);
+            this.onDismissed();
+
+            if (this.removeValue) {
+                this.element.remove();
+            }
+        }, duration);
+    }
+
+    protected onDismissing(): boolean {
+        return this.dispatch('dismissing', { cancelable: true })
+            .defaultPrevented;
+    }
+
+    protected onDismissed(): void {
+        this.dispatch('dismissed');
+    }
+
+    private calculateDuration(): number {
+        return parseDuration(
+            getComputedStyle(this.element)
+                .transitionDuration.split(',')[0]
+                .trim(),
+        ) as number;
+    }
+
+    private setTimer(): void {
+        this._autoCloseTimer = setTimeout(
+            this.dismiss.bind(this),
+            this.delayValue,
+        );
+    }
+
+    private clearTimer(): void {
+        if (this._autoCloseTimer) {
+            clearTimeout(this._autoCloseTimer);
+        }
+    }
+}

data/app/components/fox_tail/dismissible_trigger_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class FoxTail::DismissibleTriggerComponent < FoxTail::TriggerBaseComponent
+  def trigger_type
+    options[:trigger_type] ||= :click
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super options
+      attributes[:data][outlet_key(:dismissible)] = options[:selector]
+      attributes[:data][:action] = action(:dismiss) if options[:trigger_type] == :click
+      attributes
+    end
+  end
+end

data/app/components/fox_tail/dismissible_trigger_controller.ts

@@ -0,0 +1,13 @@
+import { Controller } from '@hotwired/stimulus';
+
+import DismissibleController from './dismissible_controller';
+
+export default class extends Controller {
+    static outlets = ['fox-tail--dismissible'];
+
+    declare readonly foxTailDismissibleOutlets: DismissibleController[];
+
+    dismiss(): void {
+        this.foxTailDismissibleOutlets.forEach((outlet) => outlet.dismiss());
+    }
+}

data/app/components/fox_tail/dot_indicator_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class FoxTail::DotIndicatorComponent < FoxTail::BaseComponent
+  has_option :color, default: :default
+  has_option :animated, default: false, type: :boolean
+  has_option :size, default: :base
+
+  def call
+    animated? ? render_animated_dot : render_dot
+  end
+
+  private
+
+  def render_dot
+    classes = classnames theme.apply(:root, self), theme.apply(:dot, self), html_class
+    content_tag :span, nil, html_attributes.merge(class: classes)
+  end
+
+  def render_animated_dot
+    container_classes = classnames theme.apply(:root, self),
+                                   theme.apply(:container, self),
+                                   html_class
+
+    dot_classes = classnames theme.apply(:root, self), theme.apply(:dot, self)
+    animated_classes = classnames dot_classes, theme.apply("dot/animation", self)
+
+    content_tag :span, html_attributes.merge(class: container_classes) do
+      concat content_tag(:span, nil, class: animated_classes)
+      concat content_tag(:span, nil, class: dot_classes)
+    end
+  end
+end

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

@@ -0,0 +1,31 @@
+root:
+  base: inline-block rounded-full
+  size:
+    xs: w-1.5 h-1.5
+    sm: w-2.5 h-2.5
+    base: w-3.5 h-3.5
+    lg: w-5 h-5
+    xl: w-6 h-6
+dot:
+  animated?: w-full h-full
+  color:
+    neutral: &default bg-gray-400
+    dark: bg-gray-700
+    light: bg-gray-200
+    red: bg-red-400
+    blue: bg-blue-400
+    green: bg-green-400
+    yellow: bg-yellow-400
+    indigo: bg-indigo-400
+    purple: bg-purple-400
+    pink: bg-pink-400
+    info: bg-blue-700
+    success: bg-green-700
+    error: bg-red-700
+    warning: bg-yellow-700
+    default: *default
+dot/animation:
+  base: absolute animate-ping opacity-75 w-full h-full
+container:
+  base: relative flex
+

data/app/components/fox_tail/drawer_component.rb

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+class FoxTail::DrawerComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  renders_one :close_button, types: {
+    icon: {
+      as: :close_icon,
+      renders: lambda { |icon_or_options = {}, options = {}, icon_options = {}|
+        if icon_or_options.is_a? Hash
+          icon_options = options
+          options = icon_or_options
+          icon_or_options = "x-mark"
+        end
+
+        options[:class] = classnames theme.apply("close/button", self), options[:class]
+        options[:data] ||= {}
+        icon_options[:class] = classnames theme.apply("close/icon", self), icon_options[:class]
+
+        if use_stimulus?
+          options[:data][:action] = stimulus_merger.merge_actions options[:data][:action],
+                                                                  stimulus_controller.action(:hide)
+        end
+
+        content_tag :button, options do
+          concat render(FoxTail::IconBaseComponent.new(icon_or_options, icon_options))
+          concat content_tag(:span, I18n.t("fox_tail.close"), class: theme.classname("accessibility.sr_only"))
+        end
+      }
+    }
+  }
+
+  renders_one :notch, lambda { |options = {}|
+    options[:class] = classnames theme.apply(:notch, self), options[:class]
+    content_tag :span, nil, options
+  }
+
+  has_option :placement, default: :left
+  has_option :body_scrolling, type: :boolean, default: false
+  has_option :backdrop, type: :boolean, default: true
+  has_option :swipeable_edge, default: false
+  has_option :open, type: :boolean, default: false
+  has_option :border, type: :boolean, default: false
+  has_option :rounded, type: :boolean, default: false
+  has_option :tag_name, default: :div
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self),
+                                         open? ? visible_classes : hidden_classes,
+                                         html_class
+
+    html_attributes[:tab_index] ||= -1
+    html_attributes[:aria] ||= {}
+    html_attributes[:aria][:hidden] = open?
+  end
+
+  def call
+    content_tag tag_name, html_attributes do
+      concat close_button if close_button?
+      concat notch if notch?
+      concat content
+    end
+  end
+
+  def stimulus_controller_options
+    {
+      backdrop: backdrop?,
+      body_scrolling: body_scrolling?,
+      open: open?,
+      visible_classes: visible_classes,
+      hidden_classes: hidden_classes,
+      backdrop_classes: backdrop_classes,
+      body_classes: body_classes
+    }
+  end
+
+  private
+
+  def visible_classes
+    theme.apply "root/visible", self
+  end
+
+  def hidden_classes
+    classnames theme.apply("root/hidden", self), swipeable_edge_classes
+  end
+
+  def swipeable_edge_classes
+    return unless swipeable_edge?
+    return swipeable_edge if swipeable_edge.is_a? String
+
+    theme.apply :swipeable_edge, self
+  end
+
+  def backdrop_classes
+    theme.apply :backdrop, self
+  end
+
+  def body_classes
+    theme.apply :body, self
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super options
+      attributes[:data][value_key(:backdrop)] = options[:backdrop]
+      attributes[:data][value_key(:body_scrolling)] = options[:body_scrolling]
+      attributes[:data][value_key(:open)] = options[:open]
+      attributes[:data][classes_key(:visible)] = options[:visible_classes]
+      attributes[:data][classes_key(:hidden)] = options[:hidden_classes]
+      attributes[:data][classes_key(:backdrop)] = options[:backdrop_classes]
+      attributes[:data][classes_key(:body)] = options[:body_classes]
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,62 @@
+root:
+  base: >-
+    fixed z-40 p-4 w-80
+    text-gray-500 dark:text-gray-400
+    bg-white dark:bg-gray-800
+    transition-transform
+  placement:
+    top: top-0 left-0 right-0 w-full
+    bottom: bottom-0 left-0 right-0 w-full
+    left: left-0 top-0 h-screen overflow-y-auto
+    right: right-0 top-0 h-screen overflow-y-auto
+  border?:
+    true:
+      base: border-gray-200 dark:border-gray-700
+      placement:
+        top: border-b
+        bottom: border-t
+        left: border-r
+        right: border-l
+  rounded?:
+    true:
+      placement:
+        top: rounded-b-lg
+        bottom: rounded-t-lg
+        left: rounded-r-lg
+        right: rounded-l-lg
+root/visible:
+  base: transform-none
+root/hidden:
+  base:
+  placement:
+    top: -translate-y-full
+    bottom: translate-y-full
+    left: -translate-x-full
+    right: translate-x-full
+backdrop:
+  base:
+body:
+  base:
+close/button:
+  base: >-
+    absolute top-2.5 right-2.5 w-8 h-8
+    inline-flex items-center justify-center
+    text-sm text-gray-400 
+    rounded-lg bg-transparent
+    hover:text-gray-900 dark:hover:text-white
+    hover:bg-gray-200 dark:hover:bg-gray-600
+close/icon:
+  base: w-6 h-6
+swipeable_edge:
+  placement:
+    top: top-[60px]
+    bottom: bottom-[60px]
+    left: left-[60px]
+    right: right-[60px]
+notch:
+  base: absolute rounded-lg bg-gray-300 dark:bg-gray-600
+  placement:
+    top: w-8 h-1 -translate-x-1/2 bottom-3 left-1/2
+    bottom: w-8 h-1 -translate-x-1/2 top-3 left-1/2
+    left: w-1 h-8 -translate-y-1/2 top-1/2 right-3
+    right: w-1 h-8 -translate-y-1/2 top-1/2 left-3

data/app/components/fox_tail/drawer_controller.ts

@@ -0,0 +1,129 @@
+import { Controller } from '@hotwired/stimulus';
+
+import useBackdrop from '../../../src/mixins/use_backdrop';
+import usePreventBodyScroll from '../../../src/mixins/use_prevent_body_scroll';
+import useKeyboardListener from '../../../src/mixins/use_keyboard_listener';
+
+export default class extends Controller {
+    static classes = ['visible', 'hidden', 'backdrop', 'body'];
+
+    static values = {
+        backdrop: {
+            type: Boolean,
+            default: true,
+        },
+        bodyScrolling: {
+            type: Boolean,
+            default: true,
+        },
+        open: {
+            type: Boolean,
+            default: false,
+        },
+    };
+
+    declare readonly backdropValue: boolean;
+    declare readonly bodyScrollingValue: boolean;
+    declare readonly openValue: boolean;
+    declare readonly visibleClasses: string[];
+    declare readonly hiddenClasses: string[];
+    declare readonly backdropClasses: string[];
+    declare readonly bodyClasses: string[];
+
+    private _visible = false;
+    private _showBackdrop = () => {};
+    private _hideBackdrop = () => {};
+    private _disableBodyScrolling = () => {};
+    private _enableBodyScrolling = () => {};
+
+    get isVisible(): boolean {
+        return this._visible;
+    }
+
+    connect() {
+        super.connect();
+
+        if (this.backdropValue) {
+            [this._showBackdrop, this._hideBackdrop] = useBackdrop(this, {
+                classes: this.backdropClasses,
+            });
+        }
+
+        if (this.bodyScrollingValue) {
+            [this._disableBodyScrolling, this._enableBodyScrolling] =
+                usePreventBodyScroll(this, { classes: this.bodyClasses });
+        }
+
+        useKeyboardListener(this)[0]();
+
+        if (this.openValue) {
+            this.show();
+        }
+    }
+
+    toggle() {
+        if (this._visible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    show() {
+        if (this._visible || this.onShow()) {
+            return;
+        }
+
+        this.element.classList.remove(...this.hiddenClasses);
+        this.element.classList.add(...this.visibleClasses);
+        this.element.setAttribute('aria-modal', 'true');
+        this.element.setAttribute('role', 'dialog');
+        this.element.removeAttribute('aria-hidden');
+        this._disableBodyScrolling();
+        this._showBackdrop();
+        this._visible = true;
+        this.onShown();
+    }
+
+    hide() {
+        if (!this._visible || this.onHide()) {
+            return;
+        }
+
+        this.element.classList.remove(...this.visibleClasses);
+        this.element.classList.add(...this.hiddenClasses);
+        this.element.setAttribute('aria-hidden', 'true');
+        this.element.removeAttribute('aria-model');
+        this.element.removeAttribute('role');
+        this._enableBodyScrolling();
+        this._hideBackdrop();
+        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');
+    }
+
+    protected onBackdropClicked() {
+        this.hide();
+    }
+
+    protected onKeyboardEvent(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            this.hide();
+        }
+    }
+}

data/app/components/fox_tail/drawer_trigger_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class FoxTail::DrawerTriggerComponent < FoxTail::TriggerBaseComponent
+  has_option :open, default: false, type: :boolean
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self),
+                                         theme.apply("root/#{open? ? :open : :close}", self),
+                                         html_class
+  end
+
+  def stimulus_controller_options
+    super.merge open_classes: theme.apply("root/open", self),
+                closed_classes: theme.apply("root/closed", self)
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def drawer_identifier
+      FoxTail::DrawerComponent.stimulus_controller_identifier
+    end
+
+    def attributes(options = {})
+      attributes = super options
+      attributes[:data][outlet_key(drawer_identifier)] = options[:selector]
+      attributes[:data][classes_key(:open)] = options[:open_classes]
+      attributes[:data][classes_key(:closed)] = options[:closed_classes]
+      attributes[:data][:action] = action options.fetch(:action, :toggle), event: options.fetch(:trigger_type, :click)
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+root:
+  base: group
+root/open:
+  base: open

data/app/components/fox_tail/drawer_trigger_controller.ts

@@ -0,0 +1,56 @@
+import { Controller } from '@hotwired/stimulus';
+
+import DrawerController from './drawer_controller';
+import useForwardedEventListener from '../../../src/mixins/use_forwarded_event_listener';
+
+export default class extends Controller {
+    static classes = ['open', 'closed'];
+    static outlets = ['fox-tail--drawer'];
+
+    declare readonly openClasses: string[];
+    declare readonly closedClasses: string[];
+    declare readonly foxTailDrawerOutlet: DrawerController;
+
+    foxTailDrawerOutletConnected(
+        outlet: DrawerController,
+        element: HTMLElement,
+    ): void {
+        const [observe] = useForwardedEventListener(
+            this,
+            ['show', 'shown', 'hide', 'hidden'],
+            element,
+            this.element,
+            { capture: true, eventPrefix: 'fox-tail--drawer' },
+        );
+
+        observe();
+
+        this.updateAttributes();
+    }
+
+    show(): void {
+        this.foxTailDrawerOutlet.show();
+    }
+
+    hide(): void {
+        this.foxTailDrawerOutlet.hide();
+    }
+
+    toggle(): void {
+        this.foxTailDrawerOutlet.toggle();
+    }
+
+    protected onForwardEvent(): void {
+        this.updateAttributes();
+    }
+
+    private updateAttributes(): void {
+        if (this.foxTailDrawerOutlet.isVisible) {
+            this.element.classList.remove(...this.closedClasses);
+            this.element.classList.add(...this.openClasses);
+        } else {
+            this.element.classList.remove(...this.openClasses);
+            this.element.classList.add(...this.closedClasses);
+        }
+    }
+}

data/app/components/fox_tail/dropdown/menu_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class FoxTail::Dropdown::MenuComponent < FoxTail::BaseComponent
+  renders_many :items, lambda { |options = {}|
+    options[:theme] = theme.theme :item
+    FoxTail::Dropdown::MenuItemComponent.new options
+  }
+
+  def render?
+    items?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :ul, html_attributes do
+      items.each { |item| concat content_tag(:li, item) }
+    end
+  end
+end

data/app/components/fox_tail/dropdown/menu_item_component.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+class FoxTail::Dropdown::MenuItemComponent < FoxTail::ClickableComponent
+  renders_one :left_visual, types: {
+    icon: {
+      renders: lambda { |icon, options = {}| render_icon icon, options, :start },
+      as: :left_icon
+    },
+    svg: {
+      renders: lambda { |path, options = {}| render_svg path, options, :start },
+      as: :left_svg
+    },
+    image: {
+      renders: lambda { |url, attributes = {}| render_image url, attributes, :start },
+      as: :left_image
+    }
+  }
+
+  renders_one :right_visual, types: {
+    icon: {
+      renders: lambda { |icon, options = {}| render_icon icon, options, :end },
+      as: :right_icon
+    },
+    svg: {
+      renders: lambda { |path, options = {}| render_svg path, options, :end },
+      as: :right_svg
+    },
+    image: {
+      renders: lambda { |url, attributes = {}| render_image url, attributes, :end },
+      as: :right_image
+    }
+  }
+
+  has_option :color, default: :default
+
+  def visuals?
+    left_visual? || right_visual?
+  end
+
+  def call
+    super do
+      concat left_visual if left_visual?
+      concat content
+      concat right_visual if right_visual?
+    end
+  end
+
+  private
+
+  def render_icon(icon, options, side)
+    options[:variant] ||= :mini
+    options[:"aria-hidden"] = true
+    options[:class] = classnames theme.apply(:visual, self, side: side), options[:class]
+    FoxTail::IconBaseComponent.new icon, options
+  end
+
+  def render_svg(path, options, side)
+    options[:"aria-hidden"] = true
+    options[:class] = classnames theme.apply(:visual, self, side: side), options[:class]
+    FoxTail::InlineSvgComponent.new path, options
+  end
+
+  def render_image(uri, options, side)
+    options[:"aria-hidden"] = true
+    options[:class] = classnames theme.apply(:visual, self, side: side), options[:class]
+    image_tag uri, options
+  end
+end