fox_tail 0.1.0

data/app/components/fox_tail/select_component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+class FoxTail::SelectComponent < FoxTail::InputBaseComponent
+  has_option :disabled, type: :boolean, default: false
+  has_option :value
+  has_option :include_hidden, type: :boolean, default: true
+
+  renders_one :placeholder, lambda { |text, selected: false, disabled: true|
+    FoxTail::Select::OptionComponent.new("", disabled: disabled, selected: selected).with_content(text)
+  }
+
+  renders_many :select_options, types: {
+    option: {
+      as: :select_option,
+      renders: lambda { |value, options = {}|
+        options[:selected] = Array(self.value).include?(value) unless options.key? :selected
+        FoxTail::Select::OptionComponent.new value, options
+      }
+    },
+    group: {
+      as: :select_group,
+      renders: lambda { |label, options = {}|
+        options[:selected_value] = self.value
+        FoxTail::Select::OptionGroupComponent.new label, options
+      }
+    }
+  }
+
+  def value
+    options[:value] ||= value_before_type_cast
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    html_attributes[:multiple] = :multiple if html_attributes[:multiple]
+  end
+
+  def call
+    capture do
+      concat render_hidden if html_attributes[:multiple].present? && include_hidden?
+      concat render_select
+    end
+  end
+
+  protected
+
+  def can_read_only?
+    false
+  end
+
+  def can_disable?
+    true
+  end
+
+  private
+
+  def render_hidden
+    tag :input, disabled: disabled?, name: html_attributes[:name], type: :hidden, value: "", autocomplete: :off
+  end
+
+  def render_select
+    content_tag :select, html_attributes do
+      concat placeholder if placeholder?
+      select_options.each { |select_option| concat select_option } if select_options?
+      concat content if content?
+    end
+  end
+end

data/app/components/fox_tail/spinner_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class FoxTail::SpinnerComponent < FoxTail::InlineSvgComponent
+  has_option :color, default: :default
+  has_option :size, default: :base
+
+  def initialize(html_attributes = {})
+    path = html_attributes.delete(:path) { self.class.spinner_path }
+    super path, html_attributes
+  end
+
+  def before_render
+    super
+
+    html_attributes[:"aria-hidden"] = true
+    html_attributes[:role] = :status
+  end
+
+  def html_class
+    classnames theme.apply(:root, self), super
+  end
+
+  class << self
+    def spinner_path
+      FoxTail.root.join "app/assets/vendor/spinner.svg"
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+root:
+  base: animate-spin text-gray-200 dark:text-gray-600
+  color:
+    neutral: fill-gray-600 dark:fill-gray-300
+    blue: &default fill-blue-600
+    red: fill-red-600
+    green: fill-green-500
+    yellow: fill-yellow-400
+    indigo: fill-indigo-600
+    purple: fill-purple-600
+    pink: fill-pink-600
+    default: *default
+  size:
+    xs: w-2.5 h-2.5
+    sm: w-4 h-4
+    base: w-6 h-6
+    lg: w-8 h-8
+    xl: w-10 h-10

data/app/components/fox_tail/stepper/step_component.html.erb

@@ -0,0 +1,21 @@
+<%= content_tag :li, html_attributes do %>
+  <% if %i[default progress detailed breadcrumb timeline].include? variant %>
+    <%= content_tag :span, class: theme.apply("visual/container", self) do %>
+      <% if visual? %>
+        <%= visual %>
+      <% else %>
+        <%= content_tag :span, index, class: theme.apply(:index, self) %>
+      <% end %>
+    <% end %>
+    <%= content_tag :span, content, class: theme.apply(:content, self) if content? %>
+    <% if variant == :breadcrumb %>
+      <%= render FoxTail::IconBaseComponent.new("chevron-double-right", class: theme.apply(:divider, self)) %>
+    <% end %>
+  <% elsif variant == :vertical %>
+    <span class="sr-only"><%= content %></span>
+    <%= content_tag :h3, class: theme.apply(:content, self) do %>
+      <%= index %>. <%= content %>
+    <% end %>
+    <%= visual if visual? %>
+  <% end %>
+<% end %>

data/app/components/fox_tail/stepper/step_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class FoxTail::Stepper::StepComponent < FoxTail::BaseComponent
+  DEFAULT_COMPLETED_ICON = "check"
+  DEFAULT_VERTICAL_CURRENT_ICON = "arrow-right"
+
+  renders_one :visual, types: {
+    icon: {
+      as: :icon,
+      renders: lambda { |icon, options = {}|
+        options[:class] = classnames theme.apply(:icon, self), options[:class]
+        FoxTail::IconBaseComponent.new icon, options
+      }
+    },
+    svg: {
+      as: :svg,
+      renders: lambda { |path, options = {}|
+
+      }
+    },
+    image: {
+      as: :image,
+      renders: lambda { |source, options = {}|
+
+      }
+    }
+  }
+
+  has_option :variant, default: :default
+  has_option :state, default: :pending
+  has_option :index, default: 0
+
+  def before_render
+    super
+
+    initialize_visual
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  private
+
+  def initialize_visual
+    return if visual?
+
+    if state == :completed && (content? || variant == :vertical)
+      with_icon DEFAULT_COMPLETED_ICON
+    elsif state == :current && variant == :vertical
+      with_icon DEFAULT_VERTICAL_CURRENT_ICON
+    end
+  end
+end

data/app/components/fox_tail/stepper_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class FoxTail::StepperComponent < FoxTail::BaseComponent
+  renders_many :steps, lambda { |options = {}|
+    options[:variant] = variant
+    options[:theme] = theme.theme :step
+    options[:index] ||= @index += 1
+    FoxTail::Stepper::StepComponent.new options
+  }
+
+  has_option :variant, default: :default
+
+  def initialize(html_attributes = {})
+    super(html_attributes)
+
+    @index = 0
+  end
+
+  def render?
+    steps?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :ol, html_attributes do
+      steps.each { |step| concat step }
+    end
+  end
+end

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

@@ -0,0 +1,143 @@
+root:
+  base: text-sm sm:text-base font-medium text-gray-500 dark:text-gray-400
+  variant:
+    default: w-full flex items-center
+    progress: w-full flex items-center
+    detailed: items-center w-full space-y-4 sm:flex sm:space-x-8 sm:space-y-0
+    vertical: space-y-4 w-72
+    breadcrumb: flex items-center w-full space-x-2 sm:space-x-4
+    timeline: relative border-l border-gray-200 dark:border-gray-700
+step:
+  root:
+    base:
+    variant:
+      default: >-
+        flex items-center md:[&:not(:last-child)]:w-full 
+        max-md:[&:not(:last-child)]:after:content-['/'] 
+        after:text-gray-200 dark:after:text-gray-500
+        md:after:content-[''] md:after:w-full md:after:h-1 
+        md:after:border-1 md:after:border-b md:after:border-gray-200 dark:md:after:border-gray-700 
+        md:after:inline-block 
+        after:mx-2 md:after:mx-4 xl:after:mx-6
+      progress:
+        base: >-
+          relative flex-1 flex flex-col justify-center gap-1.5 lg:gap-2
+          after:absolute after:z-[-1] after:top-5 lg:after:top-6 after:-translate-y-1/2 after:left-1/2
+          after:content-[''] after:w-full after:h-1 after:inline-block last:after:hidden
+          after:border-b after:border-4 after:border-gray-100 dark:after:border-gray-700
+        state:
+          pending:
+          completed: after:border-green-100 dark:after:border-green-800
+          current:
+      detailed:
+        base: flex items-center text-gray-500 dark:text-gray-400 space-x-2.5
+        state:
+          pending:
+          completed: text-green-600 dark:text-green-500
+          current: text-blue-600 dark:text-blue-500
+      vertical:
+        base: >-
+          w-full p-4 flex items-center justify-between
+          text-gray-900 dark:text-gray-400
+          bg-gray-100 dark:bg-gray-800
+          border border-gray-300 rounded-lg dark:border-gray-700
+        state:
+          pending:
+          completed: >-
+            text-green-700 dark:text-green-400
+            border-green-300 dark:border-green-800
+            bg-green-50 dark:bg-gray-800
+          current: >-
+            text-blue-700 dark:text-blue-400
+            bg-blue-100 dark:bg-gray-800
+            border-blue-300 dark:border-blue-800
+      breadcrumb: flex items-center group/step
+      timeline: mb-10 ml-6
+    state:
+      pending:
+      completed: text-green-600 dark:text-green-500
+      current: text-blue-600 dark:text-blue-500
+  visual/container:
+    base:
+    variant:
+      default:
+      progress:
+        base: >-
+          flex items-center justify-center shrink-0
+          w-10 h-10 lg:h-12 lg:w-12 mx-auto
+          rounded-full bg-gray-100 dark:bg-gray-700
+          text-gray-500 dark:text-gray-100
+        state:
+          pending:
+          completed: bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-300
+          current: bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300
+      detailed:
+        base: >-
+          flex items-center justify-center shrink-0
+          w-8 h-8
+          rounded-full border border-gray-500 dark:border-gray-400
+        state:
+          pending:
+          completed: border-green-600 dark:border-green-500
+          current: border-blue-600 dark:border-blue-500
+      vertical:
+      breadcrumb:
+        base: >-
+          flex items-center justify-center shrink-0
+          w-5 h-5 mr-2 text-xs
+          rounded-full border border-gray-500 dark:border-gray-400
+        state:
+          pending:
+          completed: border-green-600 dark:border-green-500
+          current: border-blue-600 dark:border-blue-500
+      timeline:
+        base: >-
+          absolute flex items-center justify-center 
+          w-8 h-8 -left-4
+          rounded-full bg-gray-100 dark:bg-gray-700
+          ring-4 ring-white dark:ring-gray-900
+        state:
+          pending:
+          completed: bg-green-200 dark:bg-green-900
+          current: bg-blue-200 dark:bg-blue-900
+    state:
+      pending:
+      completed:
+      current:
+  icon:
+    base:
+    variant:
+      default: w-3.5 h-3.5 sm:w-4 sm:h-4 mr-2
+      progress: w-4 h-4 lg:w-5 lg:h-5
+      detailed: w-3 h-3 lg:w-4 lg:h-4
+      vertical:
+      breadcrumb: w-2.5 h-2.5
+      timeline: w-3.5 h-3.5
+    state:
+      pending:
+      completed:
+      current:
+  index:
+    base:
+    variant:
+      default: mr-2
+      progress: text-base font-bold
+      detailed:
+      vertical:
+      breadcrumb:
+      timeline: text-sm font-bold
+    state:
+      pending:
+      completed:
+      current:
+  content:
+    base: empty:hidden
+    variant:
+      default: contents
+      progress: block text-center
+      detailed: block
+      vertical:
+      breadcrumb:
+      timeline:
+  divider:
+    base: w-4 h-4 ml-2 sm:ml-4 group-[:last-child]/step:hidden

data/app/components/fox_tail/surface_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class FoxTail::SurfaceComponent < FoxTail::BaseComponent
+  has_option :border, type: :boolean, default: true
+  has_option :tag_name, default: :div
+  has_option :hover, type: :boolean, default: false
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag tag_name, content, html_attributes
+  end
+end

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

@@ -0,0 +1,4 @@
+root:
+  base: bg-white rounded-lg dark:bg-gray-800
+  border?: border border-gray-200 dark:border-gray-700
+  hover?: hover:bg-gray-100 dark:hover:bg-gray-700

data/app/components/fox_tail/tab_controller.ts

@@ -0,0 +1,109 @@
+import { Controller } from '@hotwired/stimulus';
+
+import CollapsibleController from './collapsible_controller';
+import { setClasses } from '../../../src/utilities/tailwind';
+
+export default class TabController extends Controller {
+    static classes = ['active', 'selected'];
+    static outlets = ['fox-tail--tab', 'fox-tail--collapsible'];
+
+    static values = {
+        selected: {
+            type: Boolean,
+            default: false,
+        },
+        panel: String,
+    };
+
+    declare readonly selectedValue: boolean;
+    declare readonly activeClasses: string[];
+    declare readonly selectedClasses: string[];
+    declare readonly foxTailTabOutlets: TabController[];
+    declare readonly hasFoxTailCollapsibleOutlet: boolean;
+    declare readonly foxTailCollapsibleOutlet: CollapsibleController;
+
+    private _selected: boolean = false;
+
+    connect() {
+        super.connect();
+
+        this._selected = this.selectedValue;
+        this.element.setAttribute('aria-selected', this._selected.toString());
+
+        if (this._selected) {
+            setClasses(
+                this.element,
+                ...this.activeClasses,
+                ...this.selectedClasses,
+            );
+        } else {
+            setClasses(this.element, ...this.activeClasses);
+        }
+    }
+
+    foxTailCollapsibleOutletConnected(outlet: CollapsibleController): void {
+        if (this._selected) {
+            outlet.show();
+        } else {
+            outlet.hide();
+        }
+
+        if (outlet.element.id && !this.element.hasAttribute('aria-controls')) {
+            const id = outlet.element.id.replace(/^#/, '');
+            this.element.setAttribute('aria-controls', id);
+        }
+    }
+
+    select(): void {
+        if (this._selected || this.onSelect()) {
+            return;
+        }
+
+        this._selected = true;
+        this.deselectSiblings();
+        setClasses(
+            this.element,
+            ...this.activeClasses,
+            ...this.selectedClasses,
+        );
+        this.element.setAttribute('aria-selected', 'true');
+        this.hasFoxTailCollapsibleOutlet &&
+            this.foxTailCollapsibleOutlet.show();
+        this.onSelected();
+    }
+
+    deselect(): void {
+        if (!this._selected || this.onDeselect()) {
+            return;
+        }
+
+        this._selected = false;
+        setClasses(this.element, ...this.activeClasses);
+        this.element.setAttribute('aria-selected', 'false');
+        this.hasFoxTailCollapsibleOutlet &&
+            this.foxTailCollapsibleOutlet.hide();
+        this.onDeselected();
+    }
+
+    protected onSelect(): boolean {
+        return this.dispatch('select', { cancelable: true }).defaultPrevented;
+    }
+
+    protected onSelected(): void {
+        this.dispatch('selected');
+    }
+
+    protected onDeselect(): boolean {
+        return this.dispatch('deselect', { cancelable: true }).defaultPrevented;
+    }
+
+    protected onDeselected(): void {
+        this.dispatch('deselected');
+    }
+
+    private deselectSiblings(): void {
+        this.foxTailTabOutlets.forEach((tab) => {
+            tab != this && tab.deselect();
+        });
+    }
+}

data/app/components/fox_tail/table/column_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class FoxTail::Table::ColumnComponent < FoxTail::BaseComponent
+  has_option :tag, default: :td
+  has_option :highlight, default: :none
+  has_option :hover, type: :boolean, default: false
+  has_option :border, type: :boolean, default: true
+
+  def even?
+    position.is_a?(Numeric) && position.even?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag tag, content, html_attributes
+  end
+end

data/app/components/fox_tail/table/header_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class FoxTail::Table::HeaderComponent < FoxTail::BaseComponent
+  renders_many :columns, lambda { |options = {}|
+    options = options.merge self.options
+    options[:theme] = theme.theme :column
+    options[:tag] = :th
+    options[:scope] = :col
+    FoxTail::Table::ColumnComponent.new options
+  }
+
+  has_option :highlight, default: :none
+  has_option :hover, type: :boolean, default: false
+  has_option :border, type: :boolean, default: true
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def render?
+    columns?
+  end
+
+  def call
+    content_tag :tr, html_attributes do
+      columns.each { |column| concat column }
+    end
+  end
+end

data/app/components/fox_tail/table/row_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class FoxTail::Table::RowComponent < FoxTail::BaseComponent
+  renders_many :columns, lambda { |options = {}|
+    options = options.merge self.options
+    options[:theme] = theme.theme :column
+    options[:scope] ||= :row if options[:tag] == :th
+    FoxTail::Table::ColumnComponent.new options
+  }
+
+  has_option :highlight, default: :none
+  has_option :hover, type: :boolean, default: false
+  has_option :border, type: :boolean, default: true
+
+  def even?
+    position.is_a?(Numeric) && position.even?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :tr, html_attributes do
+      columns.each { |column| concat column }
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+<%= content_tag :table, html_attributes do %>
+  <%= caption if caption? %>
+  <%= content_tag :thead, header, class: theme.apply(:thead, self) if header? %>
+  <%= content_tag :tbody, class: theme.apply(:tbody, self) do %>
+    <% rows.each do |row| %>
+      <%= row %>
+    <% end %>
+  <% end %>
+  <%= content_tag :tfoot, footer, class: theme.apply(:tfoot, self) if footer? %>
+<% end %>

data/app/components/fox_tail/table_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class FoxTail::TableComponent < FoxTail::BaseComponent
+  renders_one :caption, lambda { |content_or_options = {}, options = {}, &block|
+    if content_or_options.is_a? Hash
+      options = content_or_options
+      content_or_options = nil
+    end
+
+    content_or_options = capture(self, &block) if block
+    options[:class] = classnames theme.apply(:caption, self), options[:class]
+    content_tag :caption, content_or_options, options
+  }
+
+  renders_one :header, lambda { |options = {}|
+    options = options.merge self.options
+    options[:theme] = theme.theme :header
+    FoxTail::Table::HeaderComponent.new options
+  }
+
+  renders_many :rows, lambda { |options = {}|
+    options = options.merge self.options
+    options[:theme] = theme.theme :row
+    FoxTail::Table::RowComponent.new options
+  }
+
+  renders_one :footer, lambda { |options = {}|
+    options = options.merge self.options
+    options[:theme] = theme.theme :footer
+    FoxTail::Table::RowComponent.new options
+  }
+
+  has_option :highlight, default: :none
+  has_option :hover, type: :boolean, default: false
+  has_option :border, type: :boolean, default: true
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+end

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

@@ -0,0 +1,38 @@
+root:
+  base: w-full text-sm text-left text-gray-500 dark:text-gray-400
+caption:
+  base: p-5 text-lg font-semibold text-left text-gray-900 bg-white dark:text-white dark:bg-gray-800
+thead:
+tbody:
+tfoot:
+header:
+  root:
+    base: text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400
+  column:
+    root:
+      base: px-6 py-3
+      highlight:
+        columns: even:bg-white dark:even:bg-gray-900
+row:
+  root:
+    base: bg-white dark:bg-gray-800
+    border?: border-b dark:border-gray-700 last:border-0
+    highlight:
+      rows: dark:odd:bg-gray-900 even:bg-gray-50 dark:even:bg-gray-800
+      columns: bg-gray-50
+    hover?: hover:bg-gray-200 dark:hover:bg-gray-600
+  column:
+    root:
+      base: px-6 py-4
+      tag:
+        th: font-medium text-gray-900 whitespace-nowrap dark:text-white
+      highlight:
+        columns: even:bg-white dark:even:bg-gray-900
+footer:
+  root:
+    base: font-semibold text-gray-900 dark:text-white
+  column:
+    root:
+      base: px-6 py-3
+      tag:
+        th: text-base

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

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class FoxTail::Tabs::PanelComponent < FoxTail::CollapsibleComponent
+
+  class << self
+    def stimulus_controller_name
+      :collapsible
+    end
+  end
+end