fox_tail 0.1.0

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

@@ -0,0 +1,30 @@
+root:
+  base:
+item:
+  root:
+    base: group/accordion-item dark:bg-gray-900 text-gray-500 dark:text-gray-400
+  body:
+    base: border-gray-200 dark:border-gray-700 border-b
+    flush?:
+      true: py-5
+      false: p-5 border-x group-[:last-child]/accordion-item:rounded-b-xl
+  header:
+    base: >-
+      flex items-center w-full 
+      font-medium border-gray-200 dark:border-gray-700
+      text-gray-500 dark:text-gray-400 
+      [&.collapsed]:border-b
+      [&:not(.collapsed)]:text-gray-900 [&:not(.collapsed)]:dark:text-white
+      group-[:first-child]/accordion-item:rounded-t-xl
+      group-[:not(:first-child)]/accordion-item:border-t-0
+    flush?:
+      true: py-5 border-b
+      false: >- 
+        p-5 [&:not(.collapsed)]:bg-gray-100 dark:[&:not(.collapsed)]:bg-gray-800 border
+        group-[:last-child]/accordion-item:[&.collapsed]:rounded-b-xl
+  icon:
+    base: w-5 h-5 mr-2 shrink-0
+  arrow:
+    base: w-4 h-4 ml-auto shrink-0
+    rotate: group-[.collapsed]:rotate-180
+

data/app/components/fox_tail/accordion_controller.ts

@@ -0,0 +1,92 @@
+import { Controller } from '@hotwired/stimulus';
+
+import CollapsibleController from './collapsible_controller';
+
+export default class extends Controller {
+    static targets = ['collapsible'];
+
+    static values = {
+        alwaysOpen: {
+            type: Boolean,
+            default: false,
+        },
+    };
+
+    declare readonly alwaysOpenValue: boolean;
+
+    private _collapsibleItems: Map<Element, CollapsibleController | null> =
+        new Map();
+
+    initialize() {
+        super.initialize();
+
+        this.handleShow = this.handleShow.bind(this);
+    }
+
+    collapsibleTargetConnected(element: Element): void {
+        this._collapsibleItems.set(element, null);
+        element.addEventListener(
+            'fox-tail--collapsible:show',
+            this.handleShow,
+            true,
+        );
+    }
+
+    collapsibleTargetDisconnected(element: Element): void {
+        this._collapsibleItems.delete(element);
+        element.removeEventListener(
+            'fox-tail--collapsible:show',
+            this.handleShow,
+            true,
+        );
+    }
+
+    showAll(event?: Event): void {
+        this.getCollapsibleControllers().forEach((collapsible) => {
+            if (event && event.target == collapsible.element) {
+                return;
+            }
+
+            collapsible.show();
+        });
+    }
+
+    hideAll(event?: Event): void {
+        this.getCollapsibleControllers().forEach((collapsible) => {
+            if (event && event.target == collapsible.element) {
+                return;
+            }
+
+            collapsible.hide();
+        });
+    }
+
+    private getCollapsibleControllers(): CollapsibleController[] {
+        const controllers: CollapsibleController[] = [];
+
+        this._collapsibleItems.forEach((controller, element) => {
+            if (!controller) {
+                controller =
+                    this.application.getControllerForElementAndIdentifier(
+                        element,
+                        'fox-tail--collapsible',
+                    ) as CollapsibleController;
+                controller && this._collapsibleItems.set(element, controller);
+            }
+
+            if (controller) {
+                controllers.push(controller);
+            } else {
+                throw new Error(
+                    `Missing collapsible controller for "collapsible" target for host controller "${this.identifier}".`,
+                );
+            }
+        });
+
+        return controllers;
+    }
+
+    private handleShow(event: Event): void {
+        !this.alwaysOpenValue && this.hideAll(event);
+    }
+}

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

@@ -0,0 +1,22 @@
+<%= content_tag :div, html_attributes.merge(id: id, class: root_classes, role: :alert) do %>
+  <%= content_tag :div, class: theme.classname("wrapper.base") do %>
+    <% if icon? %>
+      <%= icon %>
+      <%= content_tag :div,
+                      t(severity, scope: "fox_tail.alert.severity", default: severity.to_s.humanize),
+                      class: theme.classname("accessibility.sr_only") %>
+    <% end %>
+    <%= header? ? header : content_tag(:div, content) %>
+    <%= dismiss_icon if dismiss_icon? %>
+  <% end %>
+  <% if header? && content? %>
+    <%= content_tag :div, content, class: theme.classname("content.base") %>
+  <% end %>
+  <% if buttons? %>
+    <%= content_tag :div, class: theme.classname("buttons.container") do %>
+      <% buttons.each do |btn| %>
+        <%= btn %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/fox_tail/alert_component.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+class FoxTail::AlertComponent < FoxTail::DismissibleComponent
+  SEVERITY_ICONS = { success: "check-circle", warning: "exclamation-triangle", error: "exclamation-circle" }.freeze
+  DEFAULT_SEVERITY_ICON = "information-circle"
+
+  attr_reader :id
+
+  renders_one :header, lambda { |options = {}, &block|
+    options[:class] = classnames theme.apply(:header, self), options[:class]
+    content_tag(:h3, options, &block)
+  }
+
+  renders_one :icon, lambda { |options = {}|
+    name = options.delete(:icon) || severity_icon_name
+    options[:class] = classnames theme.apply(:icon, self), options[:class]
+    options[:variant] ||= :mini
+    FoxTail::IconBaseComponent.new name, options
+  }
+
+  renders_one :dismiss_icon, lambda { |options = {}, &block|
+    content = block ? capture(&block) : I18n.t("components.fox_tail.close")
+    icon_options = options.slice(:icon, :variant).reverse_merge(icon: "x-mark", variant: :solid)
+    icon_options[:class] = theme.apply "dismiss.icon", self
+    dismiss_actions! options
+    options[:class] = classnames theme.apply("dismiss.button", self), options[:class]
+
+    content_tag :button, options do
+      concat render(FoxTail::IconBaseComponent.new(icon_options[:icon], icon_options.except(:icon)))
+      concat content_tag(:div, content, class: theme.classname("accessibility.sr_only"))
+    end
+  }
+
+  renders_many :buttons, types: {
+    button: {
+      renders: lambda { |options = {}|
+        options[:variant] ||= :solid
+        options[:color] ||= severity
+        options[:size] ||= :xs
+        FoxTail::ButtonComponent.new options
+      },
+      as: :button
+    },
+    dismiss: {
+      renders: lambda { |options = {}|
+        options[:variant] ||= :outline
+        options[:color] ||= severity
+        options[:size] ||= :xs
+        dismiss_actions! options
+        FoxTail::ButtonComponent.new options
+      },
+      as: :dismiss_button
+    }
+  }
+
+  has_option :severity, default: :info
+  has_option :rounded, default: true, type: :boolean
+  has_option :border, default: :none
+  has_option :dismissible, default: true, type: :boolean
+
+  def border?
+    border != :none
+  end
+
+  def border
+    if options[:border].is_a?(TrueClass)
+      :basic
+    elsif !options[:border]
+      :none
+    else
+      (options[:border] || :none).to_sym
+    end
+  end
+
+  def use_stimulus?
+    super && dismissible?
+  end
+
+  private
+
+  def root_classes
+    classnames theme.apply(:root, self), html_class
+  end
+
+  def severity_icon_name
+    SEVERITY_ICONS.fetch severity.to_sym, DEFAULT_SEVERITY_ICON
+  end
+
+  def dismiss_actions!(attributes)
+    return unless use_stimulus?
+
+    attributes[:data] ||= {}
+    attributes[:data][:action] = stimulus_merger.merge_actions attributes[:data][:action],
+                                                               stimulus_controller.action("dismiss")
+  end
+end

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

@@ -0,0 +1,58 @@
+root:
+  base: p-4 text-sm
+  rounded: rounded-lg
+  severity:
+    info:
+      base: text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400
+      border?: border-blue-300 dark:border-blue-800
+    error:
+      base: text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400
+      border?: border-red-300 dark:border-red-800
+    success:
+      base: text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400
+      border?: border-green-300 dark:border-green-800
+    warning:
+      base: text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400
+      border?: border-yellow-300 dark:border-yellow-800
+    neutral:
+      base: text-gray-800 bg-gray-50 dark:bg-gray-800 dark:text-gray-300
+      border?: border-gray-300 dark:border-gray-600
+  border:
+    basic: border
+    accent: border-t-4
+wrapper:
+  base: flex flex-row gap-3 items-center
+content:
+  base: text-sm mt-2
+header:
+  base: text-lg font-medium
+icon:
+  base: flex-shrink-0 inline w-5 h-5
+dismiss:
+  button:
+    base: ml-auto -mr-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8
+    severity:
+      info: >-
+        bg-blue-50 text-blue-500 dark:bg-gray-800 dark:text-blue-400 
+        hover:bg-blue-200 dark:hover:bg-gray-700
+        focus:ring-blue-400
+      error: >-
+        bg-red-50 text-red-500 dark:bg-gray-800 dark:text-red-400 
+        hover:bg-red-200 dark:hover:bg-gray-700
+        focus:ring-red-400
+      success: >-
+        bg-green-50 text-green-500 dark:bg-gray-800 dark:text-green-400 
+        hover:bg-green-200 dark:hover:bg-gray-700
+        focus:ring-green-400
+      warning: >-
+        bg-yellow-50 text-yellow-500 dark:bg-gray-800 dark:text-yellow-400 
+        hover:bg-yellow-200 dark:hover:bg-gray-700
+        focus:ring-yellow-400
+      neutral: >-
+        text-gray-500 dark:bg-gray-800 dark:text-gray-300
+        hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-white
+        focus:ring-gray-400
+  icon:
+    base: w-3 h-3
+buttons:
+  container: flex flex-row gap-2 mt-4

data/app/components/fox_tail/avatar_component.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+class FoxTail::AvatarComponent < FoxTail::BaseComponent
+  renders_one :dot, lambda { |options = {}|
+    dot_options = options.extract!(:position).reverse_merge(position: :top_right)
+    options[:class] = classnames theme.apply(:dot, dot_options), options[:class]
+    FoxTail::DotIndicatorComponent.new(**options)
+  }
+
+  has_option :src
+  has_option :icon
+  has_option :text
+  has_option :size, default: :base
+  has_option :rounded, type: :boolean, default: false
+
+  has_option :border, default: false do |value|
+    if value.is_a?(TrueClass)
+      :default
+    elsif !value
+      :none
+    else
+      value.to_sym
+    end
+  end
+
+  def border?
+    border != :none
+  end
+
+  def call
+    if dot?
+      content_tag :div, class: theme.apply("dot/container", self) do
+        concat dot
+        concat render_visual
+      end
+    else
+      render_visual
+    end
+  end
+
+  private
+
+  def root_classes
+    classnames theme.apply(:root, self), html_class
+  end
+
+  def render_visual
+    if src?
+      render_image
+    elsif icon?
+      render_icon
+    elsif text?
+      render_text
+    else
+      render_blank
+    end
+  end
+
+  def render_image
+    image_tag src, html_attributes.merge(class: root_classes)
+  end
+
+  def render_icon
+    icon_classes = theme.apply :icon, self
+    label = html_attributes[:alt]
+    icon_name, icon_variant = if icon.is_a? Hash
+                                [icon[:name], icon[:variant]]
+                              else
+                                [icon, :solid]
+                              end
+
+    content_tag :div, html_attributes.except(:alt).merge(class: root_classes) do
+      concat render(FoxTail::IconBaseComponent.new(icon_name, variant: icon_variant, class: icon_classes))
+      concat content_tag(:span, label, class: label_classes) if label.present?
+    end
+  end
+
+  def render_text
+    label = html_attributes[:alt]
+    text_classes = theme.apply :text, self
+
+    content_tag :div, html_attributes.except(:alt).merge(class: root_classes) do
+      concat content_tag(:span, text, class: text_classes)
+      concat content_tag(:span, label, class: label_classes) if label.present?
+    end
+  end
+
+  def render_blank
+    label = html_attributes[:alt]
+
+    content_tag :div, html_attributes.except(:alt).merge(class: root_classes) do
+      content_tag(:span, label, class: label_classes) if label.present?
+    end
+  end
+end

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

@@ -0,0 +1,62 @@
+root:
+  base: inline-block rounded
+  rounded: rounded-full
+  size:
+    xs: w-6 h-6
+    sm: w-8 h-8
+    base: w-10 h-10
+    lg: w-20 h-20
+    xl: w-36 h-36
+  src?:
+    false: bg-gray-100 dark:bg-gray-600 relative overflow-hidden
+  text?: flex items-center justify-center
+  border?: ring-2
+  border:
+    neutral: &default ring-gray-300 dark:ring-gray-500
+    dark: ring-gray-800 dark:ring-gray-800
+    light: ring-gray-100 dark:ring-gray-700
+    red: &red ring-red-300 dark:ring-red-500
+    blue: &blue ring-blue-300 dark:ring-blue-500
+    green: &green ring-green-300 dark:ring-green-500
+    yellow: &yellow ring-yellow-300 dark:ring-yellow-500
+    indigo: ring-indigo-300 dark:ring-indigo-500
+    purple: ring-purple-300 dark:ring-purple-500
+    pink: ring-pink-300 dark:ring-pink-500
+    default: *default
+    info: *blue
+    success: *green
+    warning: *yellow
+    error: *red
+dot:
+  base: absolute border-2 border-white dark:border-gray-800 transform z-[1]
+  position:
+    top_left: top-0 left-0 -translate-y-1/2 -translate-x-1/2
+    top_center: top-0 left-1/2 -translate-y-1/2 -translate-x-1/2
+    top_right: &default top-0 right-0 -translate-y-1/2 translate-x-1/2
+    center_left: top-1/2 left-0 -translate-y-1/2 -translate-x-1/2
+    center: top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2
+    center_right: top-1/2 right-0 -translate-y-1/2 translate-x-1/2
+    bottom_left: bottom-0 left-0 translate-y-1/2 -translate-x-1/2
+    bottom_center: bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2
+    bottom_right: bottom-0 right-0 translate-y-1/2 translate-x-1/2
+    default: *default
+dot/container:
+  base: relative inline-block
+label:
+  base: sr-only
+icon:
+  base: absolute text-gray-400
+  size:
+    xs: w-8 h-8 -left-1
+    sm: w-10 h-10 -left-1
+    base: w-12 h-12 -left-1
+    lg: w-24 h-24 -left-2
+    xl: w-44 h-44 -left-4
+text:
+  base: font-medium text-gray-600 dark:text-gray-300
+  size:
+    xs: text-xs
+    sm: text-sm
+    base: text-base
+    lg: text-4xl
+    xl: text-7xl

data/app/components/fox_tail/avatar_stack_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+class FoxTail::AvatarStackComponent < FoxTail::BaseComponent
+  renders_many :avatars, lambda { |options = {}|
+    options[:size] = size
+    options[:rounded] = rounded
+    options[:border] = true unless options.key? :border
+    options[:class] = classnames theme.apply(:content, self),
+                                 theme.apply(:avatar, self),
+                                 options[:class]
+
+    FoxTail::AvatarComponent.new options
+  }
+
+  renders_one :counter, lambda { |text, options = {}|
+    options.extract! :src, :icon
+    url = options.delete :url
+    options[:text] = text
+    options[:size] = size
+    options[:rounded] = rounded
+    options[:border] = true unless options.key? :border
+    options[:class] = classnames theme.apply(:content, self),
+                                 theme.apply(:counter, self),
+                                 options[:class]
+
+    if url.present?
+      link_to url, class: theme.apply("counter/link", self) do
+        render FoxTail::AvatarComponent.new(options)
+      end
+    else
+      FoxTail::AvatarComponent.new options
+    end
+  }
+
+  has_option :size, default: :base
+  has_option :rounded, default: true, type: :boolean
+
+  def render?
+    avatars? || counter?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      avatars.each { |avatar| concat avatar }
+      concat counter if counter?
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+root:
+  base: inline-flex mb-5
+  size:
+    xs: -space-x-2
+    sm: -space-x-3
+    base: -space-x-4
+    lg: -space-x-8
+    xl: -space-x-16
+content:
+  base: p-0 z-0

data/app/components/fox_tail/badge_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class FoxTail::BadgeComponent < FoxTail::BaseComponent
+  renders_one :icon, lambda { |icon, options = {}|
+    options[:variant] ||= :mini
+    options[:"aria-hidden"] = true
+    options[:class] = icon_classes options[:class]
+    FoxTail::IconBaseComponent.new icon, options
+  }
+
+  has_option :url
+  has_option :size, default: :base
+  has_option :color, default: :default
+  has_option :pill, default: false, type: :boolean
+  has_option :icon_only, default: false, type: :boolean
+  has_option :border, default: false, type: :boolean
+
+  def call
+    content_tag (url? ? :a : :span), html_attributes.merge(href: url, class: root_classes) do
+      concat icon if icon?
+      concat content_tag(:span, content, class: content_classes) if content?
+    end
+  end
+
+  private
+
+  def root_classes
+    classnames theme.apply(:root, self), html_class
+  end
+
+  def content_classes
+    classnames icon_only? && theme.classname("content.hidden")
+  end
+
+  def icon_classes(classes)
+    classnames theme.classname("icon.base"),
+               theme.classname(["icon", "size", size]),
+               classes
+  end
+end

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

@@ -0,0 +1,66 @@
+root:
+  base: font-medium h-fit rounded
+  icon_only?:
+    false: inline-flex items-center gap-1
+    true:
+      base: rounded-full inline-flex items-center justify-center
+      size:
+        base: w-6 h-6 p-0.5
+        sm: w-7 h-7 p-1
+  size:
+    base: text-xs px-2.5 py-0.5
+    sm: text-sm px-3 py-1
+  pill?: rounded-full
+  border?: border
+  color:
+    neutral: &default
+      base: bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300
+      border?: bg-gray-50 text-gray-500 border-gray-500 dark:bg-gray-400 dark:text-gray-600 dark:border-gray-600
+      url?: hover:bg-gray-200 dark:hover:bg-gray-600
+    dark:
+      base: bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200
+      border?: bg-gray-100 text-gray-800 border-gray-800 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-400
+      url?: hover:bg-gray-500 dark:hover:bg-gray-700
+    light:
+      base: bg-gray-100 text-gray-600 dark:bg-gray-300 dark:text-gray-600
+      border?: bg-gray-50 text-gray-300 border-gray-300 dark:bg-gray-500 dark:text-gray-700 dark:border-gray-700
+      url?: hover:bg-gray-300 dark:hover:bg-gray-500
+    red: &red
+      base: bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-800
+      border?: bg-red-100 text-red-800 border-red-800 dark:bg-gray-700 dark:text-red-400 dark:border-red-400
+      url?: hover:bg-red-200 dark:hover:bg-red-300
+    blue: &blue
+      base: bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800
+      border?: bg-blue-100 text-blue-800 border-blue-800 dark:bg-gray-700 dark:text-blue-400 dark:border-blue-400
+      url?: hover:bg-blue-200 dark:hover:bg-blue-300
+    yellow: &yellow
+      base: bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-800
+      border?: bg-yellow-100 text-yellow-800 border-yellow-800 dark:bg-gray-700 dark:text-yellow-400 dark:border-yellow-400
+      url?: hover:bg-yellow-200 dark:hover:bg-yellow-300
+    green: &green
+      base: bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-800
+      border?: bg-green-100 text-green-800 border-green-800 dark:bg-gray-700 dark:text-green-400 dark:border-green-400
+      url?: hover:bg-green-200 dark:hover:bg-green-300
+    indigo:
+      base: bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-800
+      border?: bg-indigo-100 text-indigo-800 border-indigo-800 dark:bg-gray-700 dark:text-indigo-400 dark:border-indigo-400
+      url?: hover:bg-indigo-200 dark:hover:bg-indigo-300
+    purple:
+      base: bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-800
+      border?: bg-indigo-100 text-purple-800 border-purple-800 dark:bg-gray-700 dark:text-purple-400 dark:border-purple-400
+      url?: hover:bg-purple-200 dark:hover:bg-purple-300
+    pink:
+      base: bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-800
+      border?: bg-pink-100 text-pink-800 border-pink-800 dark:bg-gray-700 dark:text-pink-400 dark:border-pink-400
+      url?: hover:bg-pink-200 dark:hover:bg-pink-300
+    info: *blue
+    success: *green
+    warning: *yellow
+    error: *red
+    default: *default
+icon:
+  size:
+    base: w-3.5 h-3.5
+    sm: w-4 h-4
+content:
+  hidden: sr-only

data/app/components/fox_tail/base_component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+class FoxTail::BaseComponent < FoxTail::Base
+  include FoxTail::Concerns::HasTheme
+  include FoxTail::Concerns::HasOptions
+
+  attr_reader :html_attributes
+
+  has_option :class, as: :html_class
+
+  delegate :classname_merger, :use_stimulus?, :stimulus_merger, to: :class
+
+  def initialize(html_attributes = {})
+    super
+
+    html_attributes = ActiveSupport::HashWithIndifferentAccess.new html_attributes
+    theme = html_attributes.delete :theme
+    self.theme.merge! theme if theme.present?
+    extract_options! html_attributes
+    @html_attributes = html_attributes
+  end
+
+  def with_html_attributes(attributes = {})
+    @html_attributes.merge! attributes if attributes.present?
+    self
+  end
+
+  def with_html_class(classes)
+    options[:class] = classnames html_class, classes
+    self
+  end
+
+  protected
+
+  def classnames(*classnames)
+    classname_merger.merge(*classnames)
+  end
+
+  def sanitized_html_attributes
+    sanitize_attributes html_attributes
+  end
+
+  def sanitize_attributes(attributes)
+    (attributes || {}).reject { |_, v| v.nil? }
+  end
+
+  class << self
+    def classname_merger
+      FoxTail::Base.fox_tail_config.classname_merger
+    end
+
+    def use_stimulus?
+      !!FoxTail::Base.fox_tail_config.use_stimulus
+    end
+
+    def stimulus_merger
+      FoxTail::Base.fox_tail_config.stimulus_merger
+    end
+  end
+end

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

@@ -0,0 +1,2 @@
+accessibility:
+  sr_only: sr-only