fox_tail 0.1.0

data/app/components/fox_tail/button_base_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+class FoxTail::ButtonBaseComponent < FoxTail::ClickableComponent
+  include FoxTail::Concerns::Formable
+
+  has_option :variant, default: :solid
+  has_option :size, default: :base
+  has_option :color, default: :default
+  has_option :pill, default: false, type: :boolean
+  has_option :formmethod, as: :form_method
+  has_option :value
+
+  def before_render
+    super
+
+    if value.is_a?(Symbol) && object_name? && method_name?
+      html_attributes[:name] = field_name value
+      html_attributes[:id] = field_id value
+    end
+
+    html_attributes[:value] = value if value?
+
+    if form_method? && !/post|get/i.match?(form_method) && !html_attributes.key?(:name) && !html_attributes.key?(:value)
+      html_attributes[:formmethod] = :post
+      html_attributes[:name] = "_method"
+      html_attributes[:value] = form_method
+    end
+  end
+
+  protected
+
+  def retrieve_content
+    content? ? content : i18n_content
+  end
+
+  # Taken from action_view/helpers/form_helper.rb
+  #   and modified for the component
+  def i18n_content
+    return nil unless object_name? && html_attributes[:type]&.to_sym == :submit
+
+    object = convert_to_model self.object
+    key    = object ? (object.persisted? ? :update : :create) : :submit
+
+    model = if object.respond_to?(:model_name)
+              object.model_name.human
+            else
+              object_name.to_s.humanize
+            end
+
+    defaults = []
+    defaults << if object.respond_to?(:model_name) && object_name.to_s == model.downcase
+                  :"helpers.submit.#{object.model_name.i18n_key}.#{key}"
+                else
+                  :"helpers.submit.#{object_name}.#{key}"
+                end
+
+    defaults << :"helpers.submit.#{key}"
+    defaults << "#{key.to_s.humanize} #{model}"
+    I18n.t defaults.shift, model: model, default: defaults
+  end
+end

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

@@ -0,0 +1,108 @@
+root:
+  base: >-
+    text-center font-medium rounded-lg 
+    focus:ring-4 focus:outline-none
+  pill?: rounded-full
+  size:
+    xs: px-3 py-2 text-xs
+    sm: px-3 py-2 text-sm
+    base: px-5 py-2.5 text-sm
+    lg: px-5 py-3 text-base
+    xl: px-6 py-3.5 text-base
+  variant:
+    solid:
+      color:
+        neutral: >-
+          text-gray-900 bg-white dark:bg-gray-800 dark:text-gray-400 
+          border border-gray-200 dark:border-gray-600 
+          hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700
+          focus:ring-gray-200 dark:focus:ring-gray-700
+        dark: >-
+          text-white bg-gray-800 dark:bg-gray-800
+          hover:bg-gray-900 dark:hover:bg-gray-700
+          focus:ring-gray-300 dark:focus:ring-gray-700
+        light: >-
+          text-gray-900 bg-white dark:text-white dark:bg-gray-800  
+          border border-gray-300 dark:border-gray-600 
+          hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:border-gray-600
+          focus:ring-gray-200 dark:focus:ring-gray-700
+        blue: &default >-
+          text-white bg-blue-700 dark:bg-blue-600
+          hover:bg-blue-800 dark:hover:bg-blue-700
+          focus:ring-blue-300 dark:focus:ring-blue-800
+        red: &red >-
+          text-white bg-red-700 dark:bg-red-600
+          hover:bg-red-800 dark:hover:bg-red-700
+          focus:ring-red-300 dark:focus:ring-red-800
+        green: &green >-
+          text-white bg-green-700 dark:bg-green-600
+          hover:bg-green-800 dark:hover:bg-green-700
+          focus:ring-green-300 dark:focus:ring-green-800
+        yellow: &yellow text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900
+        indigo: >-
+          text-white bg-indigo-700 dark:bg-indigo-600
+          hover:bg-indigo-800 dark:hover:bg-indigo-700
+          focus:ring-indigo-300 dark:focus:ring-indigo-800
+        purple: >-
+          text-white bg-purple-700 dark:bg-purple-600
+          hover:bg-purple-800 dark:hover:bg-purple-700
+          focus:ring-purple-300 dark:focus:ring-purple-800
+        pink: >-
+          text-white bg-pink-700 dark:bg-pink-600
+          hover:bg-pink-800 dark:hover:bg-pink-700
+          focus:ring-pink-300 dark:focus:ring-pink-800
+        info: *default
+        success: *green
+        warning: *yellow
+        error: *red
+        default: *default
+    outline:
+      base: border
+      color:
+        neutral: >-
+          text-gray-900 border-gray-300 dark:text-gray-400 dark:border-gray-600
+          hover:text-gray-900 hover:bg-gray-300 dark:hover:text-white dark:hover:bg-gray-600
+          focus:ring-gray-300 dark:focus:ring-gray-800
+        dark: >-
+          text-gray-900 border-gray-800 dark:text-gray-700 dark:border-gray-700
+          hover:text-white hover:bg-gray-900 dark:hover:text-gray-900 dark:hover:bg-gray-700
+          focus:ring-gray-800 dark:focus:ring-gray-800
+        light: >-
+          text-gray-400 border-gray-200 dark:text-white dark:border-gray-200
+          hover:text-gray-400 hover:bg-gray-200 dark:hover:text-gray-900 dark:hover:bg-white
+          focus:ring-gray-200 dark:focus:ring-gray-200
+        blue: &default >-
+          text-blue-700 border-blue-700 dark:text-blue-500 dark:border-blue-500
+          hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-500 
+          focus:ring-blue-300 dark:focus:ring-blue-800
+        red: &red >-
+          text-red-700 border-red-700 dark:text-red-500 dark:border-red-500
+          hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-500 
+          focus:ring-red-300 dark:focus:ring-red-800
+        green: &green >-
+          text-green-700 border-green-700 dark:text-green-500 dark:border-green-500
+          hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-500 
+          focus:ring-green-300 dark:focus:ring-green-800
+        yellow: &yellow >-
+          text-yellow-700 border-yellow-700 dark:text-yellow-500 dark:border-yellow-500
+          hover:text-white hover:bg-yellow-800 dark:hover:text-white dark:hover:bg-yellow-500 
+          focus:ring-yellow-300 dark:focus:ring-yellow-800
+        indigo: >-
+          text-indigo-700 border-indigo-700 dark:text-indigo-500 dark:border-indigo-500
+          hover:text-white hover:bg-indigo-800 dark:hover:text-white dark:hover:bg-indigo-500 
+          focus:ring-indigo-300 dark:focus:ring-indigo-800
+        purple: >-
+          text-purple-700 border-purple-700 dark:text-purple-500 dark:border-purple-500
+          hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500 
+          focus:ring-purple-300 dark:focus:ring-purple-800
+        pink: >-
+          text-pink-700 border-pink-700 dark:text-pink-500 dark:border-pink-500
+          hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-500 
+          focus:ring-pink-300 dark:focus:ring-pink-800
+        info: *default
+        success: *green
+        warning: *yellow
+        error: *red
+        default: *default
+root/disabled:
+  base: pointer-events-none cursor-not-allowed opacity-50

data/app/components/fox_tail/button_component.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+class FoxTail::ButtonComponent < FoxTail::ButtonBaseComponent
+  renders_one :loading_icon, lambda { |options = {}|
+    options[:class] = loader_classes options[:class]
+    options[stimulus_controller.target_key(raw: true)] = "loading" if controlled?
+    FoxTail::SpinnerComponent.new options
+  }
+
+  renders_one :loading_label
+
+  renders_one :left_visual, types: {
+    icon: {
+      as: :left_icon,
+      renders: lambda { |icon, options = {}| icon_component :left, icon, options }
+    },
+    svg: {
+      as: :left_svg,
+      renders: lambda { |path, options = {}| svg_component :left, path, options }
+    },
+    image: {
+      as: :left_image,
+      renders: lambda { |path, options = {}| image_component :left, path, options }
+    }
+  }
+
+  renders_one :right_visual, types: {
+    icon: {
+      as: :right_icon,
+      renders: lambda { |icon, options = {}| icon_component :right, icon, options }
+    },
+    svg: {
+      as: :right_svg,
+      renders: lambda { |path, options = {}| svg_component :right, path, options }
+    },
+    image: {
+      as: :right_image,
+      renders: lambda { |path, options = {}| image_component :right, path, options }
+    }
+  }
+
+  def loadable?
+    loading? || super
+  end
+
+  def visuals?
+    loadable? || left_visual? || right_visual?
+  end
+
+  def before_render
+    super
+
+    with_loading_icon if !loading_icon? && loadable?
+  end
+
+  def call
+    super do
+      concat loading_icon if loading_icon?
+      concat left_visual if left_visual?
+
+      if loadable? && loading_label?
+        if controlled?
+          concat(
+            content_tag(
+              :span,
+              loading_label,
+              class: !loading? && theme.classname("hidden"),
+              data: { stimulus_controller.target_key => "loading" }
+            )
+          )
+          concat(
+            content_tag(
+              :span,
+              content,
+              class: loading? && theme.classname("hidden"),
+              data: { stimulus_controller.target_key => "active" }
+            )
+          )
+        else
+          concat loading_label
+        end
+      else
+        concat retrieve_content
+      end
+
+      concat right_visual if right_visual?
+    end
+  end
+
+  protected
+
+  def root_classes
+    super { loading? && theme.apply("root/disabled", self) }
+  end
+
+  def loader_classes(additional_classes = nil)
+    classnames theme.apply(:visual, self, { position: :left, loader: true }),
+               controlled? && !loading? && theme.classname("hidden"),
+               additional_classes
+  end
+
+  def visual_classes(side, addition_classes = nil)
+    classnames theme.apply(:visual, self, { position: side }), addition_classes
+  end
+
+  private
+
+  def icon_component(side, icon, options)
+    options[:variant] ||= :mini
+    options[:"aria-hidden"] = true
+    options[:class] = visual_classes side, options[:class]
+    options[stimulus_controller.target_key(raw: true)] = "active" if controlled?
+    FoxTail::IconBaseComponent.new icon, options
+  end
+
+  def svg_component(side, path, options)
+    options[:"aria-hidden"] = true
+    options[:class] = visual_classes side, options[:class]
+    options[stimulus_controller.target_key(raw: true)] = "active" if controlled?
+    FoxTail::InlineSvgComponent.new path, options
+  end
+
+  def image_component(side, path, options)
+    options[:aria] ||= {}
+    options[:aria][:hidden] = true
+    options[:class] = visual_classes side, options[:class]
+    options[:data] ||= {}
+    options[:data][stimulus_controller.target_key] = "active" if controlled?
+
+    image_tag path, options
+  end
+end

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

@@ -0,0 +1,11 @@
+root:
+  visuals?: group inline-flex items-center justify-center gap-2
+hidden: "hidden"
+visual:
+  loader: text-gray-400 dark:text-gray-500 fill-white
+  size:
+    xs: h-3 w-3
+    sm: h-3.5 w-3.5
+    base: h-3.5 w-3.5
+    lg: h-4 w-4
+    xl: h-4 w-4

data/app/components/fox_tail/button_group_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+class FoxTail::ButtonGroupComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+
+  renders_many :buttons, types: {
+    button: {
+      as: :button,
+      renders: lambda { |method_or_options = {}, options = {}|
+        if method_or_options.is_a? Hash
+          options = method_or_options
+        else
+          options[:method_name] = method_or_options
+        end
+
+        FoxTail::ButtonComponent.new button_component_options(options)
+      }
+    },
+    icon_button: {
+      as: :icon_button,
+      renders: lambda { |icon_or_method, *args|
+        options = args.extract_options!
+        icon = icon_or_method
+
+        unless args.empty?
+          icon = args.first
+          options[:method_name] = icon_or_method
+        end
+
+        FoxTail::IconButtonComponent.new icon, button_component_options(options)
+      }
+    }
+  }
+
+  has_option :size, default: :base
+  has_option :pill, default: false, type: :boolean
+
+  def render?
+    buttons?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      buttons.each { |btn| concat btn }
+    end
+  end
+
+  private
+
+  def button_component_options(options)
+    options = objectify_component_options options
+    options[:class] = classnames theme.apply(:button, self), options[:class]
+    options
+  end
+
+  def objectify_component_options(options)
+    options.merge self.options.except(:class, :method_name, :value_array)
+  end
+end

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

@@ -0,0 +1,7 @@
+root:
+  base: inline-flex
+button:
+  base: >-
+    [&:not(:first-child)]:rounded-l-none 
+    [&:not(:first-child)]:border-l-0
+    [&:not(:last-child)]:rounded-r-none 

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

@@ -0,0 +1,55 @@
+<%= content_tag :div, html_attributes do %>
+  <%= content_tag :div, class: theme.apply("slide/container", self) do %>
+    <% slides.each do |s| %>
+      <%= s %>
+    <% end %>
+  <% end %>
+  <% if show_indicators? %>
+    <%= content_tag :div, class: theme.apply("indicator/container", self) do %>
+      <% slides.each_with_index do |_, i| %>
+        <%= content_tag :button,
+                        nil,
+                        type: :button,
+                        class: theme.apply(:indicator, self),
+                        aria: {
+                          label: I18n.t(:slide_label, scope: "helpers.carousel", default: "Slide #{i + 1}", slide: i)
+                        },
+                        data: {
+                          stimulus_controller.target_key => :indicator,
+                          stimulus_controller.action_param_key(:slide) => i,
+                          action: stimulus_controller.action("goTo")
+                        } if use_stimulus?
+        %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if show_controls? %>
+    <%= content_tag :button,
+                    class: classnames(theme.apply(:control, self), theme.apply("control/previous", self)),
+                    type: :button,
+                    data: { action: use_stimulus? && stimulus_controller.action("previous")  } do %>
+      <%= content_tag :span, class: theme.apply("control/inner_container", self) do %>
+        <%= render FoxTail::IconBaseComponent.new('chevron-left',
+                                                  class: theme.apply("control/visual", self),
+                                                  "aria-hidden": true) %>
+        <%= content_tag :span, class: theme.classname("accessibility.sr_only") do %>
+          <%= I18n.t(:previous, scope: "helpers.carousel", default: "Previous") %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= content_tag :button,
+                    class: classnames(theme.apply(:control, self), theme.apply("control/next", self)),
+                    type: :button,
+                    data: { action: use_stimulus? && stimulus_controller.action("next")  } do %>
+      <%= content_tag :span, class: theme.apply("control/inner_container", self) do %>
+        <%= render FoxTail::IconBaseComponent.new('chevron-right',
+                                                  class: theme.apply("control/visual", self),
+                                                  "aria-hidden": true) %>
+        <%= content_tag :span, class: theme.classname("accessibility.sr_only") do %>
+          <%= I18n.t(:next, scope: "helpers.carousel", default: "Next") %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= content %>
+<% end %>

data/app/components/fox_tail/carousel_component.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+class FoxTail::CarouselComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  renders_many :slides, lambda { |options = {}, &block|
+    options[:class] = classnames theme.apply(:slide, self),
+                                 hidden_slide_classes,
+                                 options[:class]
+
+    if use_stimulus?
+      options[:data] ||= {}
+      options[:data][stimulus_controller.target_key] = :slide
+    end
+
+    content_tag :div, options do
+      capture(&block)
+    end
+  }
+
+  has_option :indicators, as: :show_indicators, default: true
+  has_option :controls, as: :show_controls, default: true
+  has_option :interval
+  has_option :position
+
+  def render?
+    slides?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def stimulus_controller_options
+    {
+      position: position,
+      interval: interval,
+      previous_slide_classes: previous_slide_classes,
+      current_slide_classes: current_slide_classes,
+      next_slide_classes: next_slide_classes,
+      hidden_slide_classes: hidden_slide_classes,
+      active_indicator_classes: active_indicator_classes,
+      inactive_indicator_classes: inactive_indicator_classes
+    }
+  end
+
+  private
+
+  def previous_slide_classes
+    theme.apply "slide/previous", self
+  end
+
+  def current_slide_classes
+    theme.apply "slide/current", self
+  end
+
+  def next_slide_classes
+    theme.apply "slide/next", self
+  end
+
+  def hidden_slide_classes
+    theme.apply "slide/hidden", self
+  end
+
+  def active_indicator_classes
+    theme.apply "indicator/active", self
+  end
+
+  def inactive_indicator_classes
+    theme.apply "indicator/inactive", self
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super(options)
+      attributes[:data][value_key(:position)] = options[:position]
+      attributes[:data][value_key(:interval)] = options[:interval]
+      attributes[:data][classes_key(:previous_slide)] = options[:previous_slide_classes]
+      attributes[:data][classes_key(:current_slide)] = options[:current_slide_classes]
+      attributes[:data][classes_key(:next_slide)] = options[:next_slide_classes]
+      attributes[:data][classes_key(:hidden_slide)] = options[:hidden_slide_classes]
+      attributes[:data][classes_key(:active_indicator)] = options[:active_indicator_classes]
+      attributes[:data][classes_key(:inactive_indicator)] = options[:inactive_indicator_classes]
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+root:
+  base: relative w-full
+slide/container:
+  base: relative h-56 overflow-hidden rounded-lg md:h-96
+slide:
+  base: duration-700 ease-in-out absolute inset-0 transition-transform transform
+slide/previous:
+  base: -translate-x-full z-10
+slide/current:
+  base: translate-x-0 z-20
+slide/next:
+  base: translate-x-full z-10
+slide/hidden:
+  base: hidden
+indicator:
+  base: w-3 h-3 rounded-full
+indicator/active:
+  base: bg-white dark:bg-gray-800 border-gray-500 dark:border-gray-400
+indicator/inactive:
+  base: bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800
+indicator/container:
+  base: absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2
+control:
+  base: absolute z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none
+control/previous:
+  base: top-0 left-0
+control/next:
+  base: top-0 right-0
+control/inner_container:
+  base: >-
+    inline-flex items-center justify-center 
+    w-10 h-10 rounded-full 
+    bg-white/30 dark:bg-gray-800/30
+    group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 
+    group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none
+control/visual:
+  base: w-4 h-4 text-white dark:text-gray-800