fox_tail 0.1.0

data/app/components/fox_tail/tabs/tab_component.rb

@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+class FoxTail::Tabs::TabComponent < FoxTail::ClickableComponent
+  has_option :tabs_id
+  has_option :variant, default: :default
+  has_option :selected, type: :boolean, default: false
+  has_option :panel_id
+
+  renders_one :left_visual, types: {
+    icon: {
+      as: :left_icon,
+      renders: lambda { |icon, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, { position: :left }), options[:class]
+        FoxTail::IconBaseComponent.new icon, options
+      }
+    },
+    svg: {
+      as: :left_svg,
+      renders: lambda { |path, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, { position: :left }), options[:class]
+        FoxTail::InlineSvgComponent.new path, options
+      }
+    },
+    image: {
+      as: :left_image,
+      renders: lambda { |source, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, { position: :left }), options[:class]
+        image_tag source, options
+      }
+    }
+  }
+
+  renders_one :right_visual, types: {
+    icon: {
+      as: :right_icon,
+      renders: lambda { |icon, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, { position: :right }), options[:class]
+        FoxTail::IconBaseComponent.new icon, options
+      }
+    },
+    svg: {
+      as: :right_svg,
+      renders: lambda { |path, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, { position: :right }), options[:class]
+        FoxTail::InlineSvgComponent.new path, options
+      }
+    },
+    image: {
+      as: :right_image,
+      renders: lambda { |source, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, { position: :right }), options[:class]
+        image_tag source, options
+      }
+    }
+  }
+
+  def visuals?
+    left_visual? || right_visual?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:role] = :tab
+    html_attributes[:aria] ||= {}
+    html_attributes[:aria][:selected] = selected?
+    html_attributes[:aria][:controls] = panel_id if panel_id?
+  end
+
+  def call
+    super do
+      concat left_visual if left_visual?
+      concat content
+      concat right_visual if right_visual?
+    end
+  end
+
+  def use_stimulus?
+    !disabled? && super
+  end
+
+  def stimulus_controller_options
+    {
+      selected: selected?,
+      active_classes: active_classes,
+      selected_classes: selected_classes,
+      siblings: tabs_id? ? "##{tabs_id} [data-controller~='fox_tail--tab']" : nil,
+      panel: panel_id? ? "##{panel_id}" : nil,
+    }
+  end
+
+  protected
+
+  def root_classes
+    super do
+      selected_classes if selected?
+    end
+  end
+
+  def selected_classes
+    theme.apply("root/selected", self)
+  end
+
+  class << self
+    def stimulus_controller_name
+      :tab
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super
+      attributes[:data][value_key(:selected)] = options[:selected]
+      attributes[:data][classes_key(:active)] = options[:active_classes]
+      attributes[:data][classes_key(:selected)] = options[:selected_classes]
+      attributes[:data][outlet_key("fox_tail--tab")] = options[:siblings]
+      attributes[:data][outlet_key("fox_tail--collapsible")] = options[:panel]
+      attributes[:data][:action] = action(:select)
+      attributes
+    end
+  end
+end

data/app/components/fox_tail/tabs_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+class FoxTail::TabsComponent < FoxTail::BaseComponent
+  has_option :variant, default: :default
+  has_option :controlled, type: :boolean, default: false
+
+  renders_many :tabs, lambda { |options = {}|
+    options[:tabs_id] = tag_id
+    options[:variant] = variant
+    options[:controlled] = controlled?
+    options[:theme] = theme.theme :tab
+    FoxTail::Tabs::TabComponent.new options
+  }
+
+  renders_many :panels, lambda { |id, options = {}|
+    options[:role] = :tabpanel
+    FoxTail::Tabs::PanelComponent.new id, options
+  }
+
+  def initialize(html_attributes = {})
+    super(html_attributes)
+
+    self.html_attributes[:id] ||= "tabs-#{SecureRandom.hex(4)}" if controlled?
+  end
+
+  def tag_id
+    html_attributes[:id]
+  end
+
+  def render?
+    tabs?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:role] = :tablist
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    capture do
+      concat render_tabs
+      concat render_panels if panels?
+    end
+  end
+
+  private
+
+  def render_tabs
+    content_tag :div, html_attributes do
+      tabs.each { |tab| concat tab }
+    end
+  end
+
+  def render_panels
+    content_tag :div do
+      panels.each { |panel| concat panel }
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+root:
+  base: flex flex-wrap
+  variant:
+    default: gap-2 border-b border-gray-200 dark:border-gray-700
+    underline: -mb-px gap-2 border-b border-gray-200 dark:border-gray-700
+    pills: gap-2
+    full_width: rounded-lg shadow divide-x divide-gray-200 dark:divide-gray-700
+panel:
+  hidden: hidden
+tab:
+  root:
+    base: text-sm p-4 font-medium text-gray-500 dark:text-gray-400
+    visuals?:
+      true: inline-flex items-center justify-center gap-2
+      false: inline-block
+    variant:
+      underline: border-b-2
+      pills: px-4 py-3 rounded-lg
+      full_width: flex-1
+  root/active:
+    variant:
+      default: rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300
+      underline: hover:text-gray-600 dark:hover:text-gray-300 border-transparent hover:border-gray-300
+      pills: hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white
+      full_width: >-
+        bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-70
+        hover:text-gray-700 dark:hover:text-white
+  root/disabled:
+    base: pointer-events-none text-gray-400 dark:text-gray-500
+    variant:
+      underline: border-transparent
+      full_width: bg-white dark:bg-gray-800
+  root/selected:
+    base: pointer-events-none
+    variant:
+      default: rounded-t-lg text-blue-600 dark:text-blue-500 bg-gray-100 dark:bg-gray-800
+      underline: text-blue-600 dark:text-blue-500 border-blue-600 dark:border-blue-500
+      pills: text-white bg-blue-600 dark:text-white dark:bg-blue-600
+      full_width: text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700
+  visual:
+    base: w-4 h-4

data/app/components/fox_tail/textarea_auto_resize_controller.ts

@@ -0,0 +1,46 @@
+import { Controller } from '@hotwired/stimulus';
+
+import debounce from '../../../src/utilities/debounce';
+
+export default class extends Controller {
+    static values = {
+        delay: {
+            type: Number,
+            default: 0,
+        },
+    };
+
+    declare readonly delayValue: number;
+    private declare handleResize: () => void;
+
+    initialize() {
+        super.initialize();
+        this.handleResize = debounce(
+            this.resizeElement.bind(this),
+            this.delayValue,
+        );
+    }
+
+    connect() {
+        super.connect();
+        this.resizeElement();
+        this.element.addEventListener('scroll', this.handleResize, false);
+        this.element.addEventListener('keyup', this.handleResize, false);
+        window.addEventListener('resize', this.handleResize);
+    }
+
+    disconnect() {
+        super.disconnect();
+        window.removeEventListener('resize', this.handleResize);
+    }
+
+    private resizeElement(): void {
+        (this.element as HTMLElement).style.height = '1px';
+        this.element.scrollTop = 0;
+        (this.element as HTMLElement).style.height = `${
+            this.element.scrollHeight -
+            this.element.clientHeight +
+            this.element.getBoundingClientRect().height
+        }px`;
+    }
+}

data/app/components/fox_tail/textarea_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class FoxTail::TextareaComponent < FoxTail::InputBaseComponent
+  has_option :autoresize, type: :boolean, default: false
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    AutoResizeStimulusController.new.merge! html_attributes if use_stimulus? && autoresize?
+  end
+
+  def call
+    content_tag :textarea, content, html_attributes
+  end
+
+  class AutoResizeStimulusController < FoxTail::StimulusController
+    def initialize(config: nil)
+      super("fox_tail--textarea-auto-resize", config: config)
+    end
+  end
+end

data/app/components/fox_tail/timeline/entry_component.html.erb

@@ -0,0 +1,12 @@
+<%= content_tag :ol, html_attributes do %>
+  <% if vertical? %>
+    <%= visual %>
+    <%= content %>
+  <% else %>
+    <%= content_tag :div, class: theme.apply("container/timeline", self) do %>
+      <%= visual %>
+      <%= content_tag :div, nil, class: theme.apply(:line, self) %>
+    <% end %>
+    <%= content_tag :div, content, class: theme.apply("container/content", self) %>
+  <% end %>
+<% end %>

data/app/components/fox_tail/timeline/entry_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+class FoxTail::Timeline::EntryComponent < FoxTail::BaseComponent
+  renders_one :visual, types: {
+    dot: {
+      as: :dot_indicator,
+      renders: lambda { |options = {}|
+        options[:color] ||= :neutral
+        options[:class] = classnames theme.apply(:visual, self),
+                                     theme.apply("visual/dot", self),
+                                     options[:class]
+
+        FoxTail::DotIndicatorComponent.new options
+      }
+    },
+    icon: {
+      as: :icon,
+      renders: lambda { |icon_or_options = {}, options = {}|
+        if icon_or_options.is_a? Hash
+          options = icon_or_options
+          icon_or_options = "calendar"
+        end
+
+        render_icon(options) { |attributes| render FoxTail::IconBaseComponent.new(icon_or_options, attributes) }
+      }
+    },
+    svg: {
+      as: :svg,
+      renders: lambda { |path, options = {}|
+        render_icon(options) { |attributes| render FoxTail::InlineSvgComponent.new(path, attributes) }
+      }
+    },
+    image: {
+      as: :image,
+      renders: lambda { |source, options = {}|
+        container_classes = classnames theme.apply(:visual, self),
+                                       theme.apply("visual/container", self),
+                                       options.delete(:class)
+
+        options[:class] = theme.apply("visual/image", self)
+
+        content_tag :span, class: container_classes do
+          image_tag source, options
+        end
+      }
+    }
+  }
+
+  has_option :vertical, type: :boolean, default: true
+
+  def render?
+    content?
+  end
+
+  def before_render
+    super
+
+    with_dot_indicator unless visual?
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  private
+
+  def render_icon(options, &block)
+    display_options = options.extract! :color
+    display_options[:color] ||= :default
+
+    container_classes = classnames theme.apply(:visual, self, display_options),
+                                   theme.apply("visual/container", self, display_options),
+                                   options.delete(:class)
+
+    options[:class] = theme.apply("visual/icon", self, display_options)
+
+    content_tag :span, class: container_classes do
+      block.call options, display_options
+    end
+  end
+end

data/app/components/fox_tail/timeline_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class FoxTail::TimelineComponent < FoxTail::BaseComponent
+  renders_many :entries, lambda { |options = {}|
+    options[:vertical] = vertical?
+    options[:theme] = theme.theme :entry
+    FoxTail::Timeline::EntryComponent.new options
+  }
+
+  has_option :vertical, type: :boolean, default: true
+
+  def render?
+    entries?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :ol, html_attributes do
+      entries.each { |entry| concat entry }
+    end
+  end
+end

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

@@ -0,0 +1,36 @@
+root:
+  vertical?:
+    true: relative border-l border-gray-200 dark:border-gray-700
+    false: items-center sm:flex
+entry:
+  root:
+    vertical?:
+      true: mb-10 ml-6
+      false: relative mb-6 sm:mb-0
+  visual:
+    base: ring-8 ring-white dark:ring-gray-900
+    vertical?: absolute
+  visual/dot:
+    base: w-3 h-3
+    vertical?: mt-1.5 -left-1.5
+  visual/icon:
+    base: w-2.5 h-2.5
+    color:
+      blue: &default text-blue-800 dark:text-blue-300
+      default: *default
+  visual/image:
+    base: absolute inset-0 object-cover rounded-full
+  visual/container:
+    base: flex items-center justify-center w-6 h-6 rounded-full
+    vertical?:
+      true: -left-3
+      false: relative
+    color:
+      blue: &default bg-blue-100 dark:bg-blue-900
+      default: *default
+  container/timeline:
+    base: flex items-center
+  container/content:
+    base: mt-3 sm:pr-6
+  line:
+    base: hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700

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

@@ -0,0 +1,26 @@
+<%= content_tag :div, html_attributes do %>
+  <% if header? %>
+    <%= content_tag :div, class: theme.apply("container/header", self) do %>
+      <%= visual if visual? %>
+      <%= header %>
+      <% if action? || dismiss_icon? %>
+        <%= content_tag :div, class: theme.apply("container/actions", self) do %>
+          <%= action if action?%>
+          <%= dismiss_icon if dismiss_icon? %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= content %>
+  <% else %>
+    <%= content_tag :div, class: theme.apply("container/header", self) do %>
+      <%= visual if visual? %>
+      <%= content_tag :div, content, class: theme.apply("container/content", self) %>
+      <% if action? || dismiss_icon? %>
+        <%= content_tag :div, class: theme.apply("container/actions", self) do %>
+          <%= action if action?%>
+          <%= dismiss_icon if dismiss_icon? %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/fox_tail/toast_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+class FoxTail::ToastComponent < FoxTail::DismissibleComponent
+
+  renders_one :header, lambda { |text, options = {}|
+    options[:class] = classnames theme.apply(:header, self), options[:class]
+    content_tag :span, text, options
+  }
+
+  renders_one :visual, types: {
+    icon: {
+      as: :icon,
+      renders: lambda { |icon, options = {}, &block|
+        render_visual block ? capture(&block) : nil, options do |attributes|
+          render FoxTail::IconBaseComponent.new(icon, attributes)
+        end
+      }
+    },
+    svg: {
+      as: :svg,
+      renders: lambda { |path, options = {}, &block|
+        render_visual block ? capture(&block) : nil, options do |attributes|
+          render FoxTail::InlineSvgComponent.new(path, attributes)
+        end
+      }
+    },
+    image: {
+      as: :image,
+      renders: lambda { |source, options = {}|
+        options[:class] = classnames theme.apply("visual", self),
+                                     theme.apply("visual/image", self),
+                                     options[:class]
+
+        image_tag source, options
+      }
+    }
+  }
+
+  renders_one :action, lambda { |options = {}|
+    options[:class] = classnames theme.apply(:action, self), options[:class]
+    FoxTail::ClickableComponent.new 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
+  }
+
+  has_option :dividers, type: :boolean, default: false
+  has_option :dismissible, type: :boolean, default: true
+  has_option :long_content, type: :boolean, default: false
+
+  def before_render
+    super
+
+    with_dismiss_icon if dismissible? && !dismiss_icon
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    html_attributes[:role] = :alert
+  end
+
+  def use_stimulus?
+    super && (dismissible? || auto_close?)
+  end
+
+  private
+
+  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
+
+  def render_visual(content, options, &block)
+    visual_options = options.extract!(:fill, :color).reverse_merge(color: :default, fill: false)
+    visual_options[:fill] = !!visual_options[:fill]
+
+    container_classes = classnames theme.apply("container/visual", self, visual_options)
+
+    options[:"aria-hidden"] = true
+    options[:class] = classnames theme.apply(:visual, self, visual_options),
+                                 theme.apply("visual/icon", self, visual_options),
+                                 options[:class]
+
+    content_tag :div, class: container_classes do
+      concat block.call(options)
+      concat content_tag(:span, content, class: theme.classname("accessibility.sr_only"))
+    end
+  end
+end

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

@@ -0,0 +1,68 @@
+root:
+  base: >-
+    w-full max-w-xs
+    p-4 rounded-lg shadow
+    text-gray-500 dark:text-gray-400
+    bg-white dark:bg-gray-800
+container/header:
+  base: flex items-center gap-3
+  dividers?: divide-x divide-gray-200 dark:divide-gray-700
+  long_content?: items-start
+container/content:
+  base: text-sm font-normal
+  dividers?: pl-3
+container/actions:
+  base: flex items-center ml-auto gap-2
+container/visual:
+  base: inline-flex items-center justify-center
+  fill:
+    true:
+      base: w-8 h-8 rounded-lg
+      color:
+        blue: &default text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200
+        red: &red text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200
+        green: &green text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200
+        yellow: &yellow text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200
+        indigo: text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200
+        pink: text-pink-500 bg-pink-100 dark:bg-pink-800 dark:text-pink-200
+        purple: text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200
+        success: *green
+        error: *red
+        warning: *yellow
+        default: *default
+visual:
+  base: w-5 h-5
+  fill:
+    false:
+      color:
+        blue: &default text-blue-600 dark:text-blue-500
+        red: &red text-red-600 dark:text-red-500
+        green: &green text-green-600 dark:text-green-500
+        yellow: &yellow text-yellow-600 dark:text-yellow-500
+        indigo: text-indigo-600 dark:text-indigo-500
+        pink: text-pink-600 dark:text-pink-500
+        purple: text-purple-600 dark:text-purple-500
+        success: *green
+        error: *red
+        warning: *yellow
+        default: *default
+visual/image:
+  base: w-8 h-8 rounded-full shadow-lg
+action:
+  base: >-
+    rounded-lg p-1.5 font-medium text-sm 
+    text-blue-600 dark:text-blue-500
+    hover:bg-blue-100 dark:hover:bg-gray-700
+dismiss/button:
+  base: >-
+    -mx-1.5 -my-1.5 p-1.5 rounded-lg
+    inline-flex items-center justify-center 
+    h-8 w-8
+    bg-white dark:bg-gray-800
+    text-gray-400 dark:text-gray-500
+    hover:text-gray-900 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-gray-700
+    focus:ring-2 focus:ring-gray-300
+dismiss/icon:
+  base: w-4 h-4
+header:
+  base: mb-1 text-sm font-semibold text-gray-900 dark:text-white

data/app/components/fox_tail/toggle_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class FoxTail::ToggleComponent < FoxTail::BaseComponent
+  has_option :size, default: :base
+  has_option :color, default: :default
+
+  renders_one :label, lambda { |text| content_tag :span, text, class: theme.apply(:label, self) }
+
+  def before_render
+    super
+
+    html_attributes[:type]
+  end
+
+  def call
+    content_tag :label, container_attributes do
+      concat content_tag(:input, nil, input_attributes)
+      concat content_tag(:div, nil, toggle_attributes)
+      concat label if label?
+    end
+  end
+
+  private
+
+  def container_attributes
+    { class: classnames(theme.apply(:container, self), html_class) }
+  end
+
+  def input_attributes
+    html_attributes.merge type: :checkbox, class: theme.apply(:root, self)
+  end
+
+  def toggle_attributes
+    { class: theme.apply(:toggle, self) }
+  end
+end