fox_tail 0.1.0

data/app/components/fox_tail/input_component.rb

@@ -0,0 +1,114 @@
+# frozen_string_literal: true
+
+class FoxTail::InputComponent < FoxTail::InputBaseComponent
+  has_option :in, as: :range
+  has_option :within, as: :within_range
+
+  renders_one :left_visual, types: {
+    icon: {
+      as: :left_icon,
+      renders: lambda { |icon, attributes = {}| render_icon :left, icon, attributes }
+    },
+    svg: {
+      as: :left_svg,
+      renders: lambda { |icon, attributes = {}| render_svg :left, icon, attributes }
+    },
+    image: {
+      as: :left_image,
+      renders: lambda { |icon, attributes = {}| render_image :left, icon, attributes }
+    }
+  }
+
+  renders_one :right_visual, types: {
+    icon: {
+      as: :right_icon,
+      renders: lambda { |icon, attributes = {}| render_icon :right, icon, attributes }
+    },
+    svg: {
+      as: :right_svg,
+      renders: lambda { |icon, attributes = {}| render_svg :right, icon, attributes }
+    },
+    image: {
+      as: :right_image,
+      renders: lambda { |icon, attributes = {}| render_image :right, icon, attributes }
+    }
+  }
+
+  def visual?
+    left_visual? || right_visual?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:type] ||= :text
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    html_attributes[:value] ||= value_before_type_cast
+
+    if html_attributes[:type] == :number
+      format_range!
+    elsif html_attributes[:type] == :submit
+      format_submit!
+    end
+  end
+
+  def call
+    if visual?
+      content_tag :div, class: theme.apply(:container, self) do
+        concat render_visual :left, left_visual if left_visual?
+        concat input_content
+        concat render_visual :right, right_visual if right_visual?
+      end
+    else
+      input_content
+    end
+  end
+
+  private
+
+  def format_range!
+    range = self.range || within_range
+    html_attributes.update("min" => range.min, "max" => range.max) if range
+  end
+
+  def format_submit!
+    html_attributes[:data] ||= {}
+
+    if html_attributes["data-disable-with"] == false || html_attributes[:data][:disabled_with] == false
+      html_attributes[:data].delete :disabled_with
+    elsif ActionView::Base.automatically_disable_submit_tag
+      disabled_with = html_attributes["data-disabled-with"]
+      disabled_with ||= html_attributes[:data][:disabled_with]
+      disabled_with ||= html_attributes[:value].to_s.clone
+      html_attributes[:data][:disabled_with] = disabled_with
+    end
+  end
+
+  def input_content
+    tag :input, sanitized_html_attributes
+  end
+
+  def visual_classes(position, classes)
+    classnames theme.apply(:visual, self, { position: position }), classes
+  end
+
+  def render_icon(position, icon, attributes)
+    attributes[:class] = visual_classes position, attributes[:class]
+    attributes[:variant] ||= :mini
+    FoxTail::IconBaseComponent.new icon, attributes
+  end
+
+  def render_svg(position, path, attributes)
+    attributes[:class] = visual_classes position, attributes[:class]
+    FoxTail::InlineSvgComponent.new path, attributes
+  end
+
+  def render_image(position, path, attributes)
+    attributes[:class] = visual_classes position, attributes[:class]
+    image_tag path, attributes
+  end
+
+  def render_visual(position, visual)
+    content_tag :div, visual, class: theme.apply(:"visual/container", self, { position: position })
+  end
+end

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

@@ -0,0 +1,39 @@
+root:
+  left_visual?:
+    true:
+      size:
+        sm: pl-9
+        base: pl-10
+        lg: pl-11
+  right_visual?:
+    true:
+      size:
+        sm:
+        base: pr-10
+        lg:
+container:
+  base: relative w-full
+visual/container:
+  base: absolute inset-y-0 flex items-center pointer-events-none
+  position:
+    left:
+      base: left-0
+      size:
+        sm: pl-3
+        base: pl-3.5
+        lg: pl-4
+    right:
+      base: right-0
+      size:
+        sm: pr-3
+        base: pr-3.5
+        lg: pr-4
+visual:
+  base: text-gray-500 dark:text-gray-400
+  size:
+    sm: w-4 h-4
+    base: w-4 h-4
+    lg: w-5 h-5
+  state:
+    valid: text-green-900 dark:text-green-500
+    invalid: text-red-900 dark:text-red-500

data/app/components/fox_tail/input_error_list_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+class FoxTail::InputErrorListComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+
+  has_option :aliases
+
+  renders_many :messages, lambda { |text_or_attributes = {}, attributes = {}, &block|
+    if block
+      attributes = text_or_attributes
+      text_or_attributes = capture(self, &block)
+    end
+
+    attributes[:class] = classnames theme.apply(:message, self), attributes[:class]
+    content_tag :li, text_or_attributes, attributes
+  }
+
+  def render?
+    messages? || error_messages.present?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    error_messages.each { |msg| with_message msg } unless messages?
+  end
+
+  def call
+    content_tag :ul, html_attributes do
+      messages.each { |msg| concat msg }
+    end
+  end
+
+  private
+
+  def error_messages
+    @error_messages ||= object? && method_name? ? retrieve_errors : []
+  end
+
+  def retrieve_errors
+    object = convert_to_model self.object
+    attributes = (Array(method_name) + Array(aliases)).compact_blank.uniq
+    messages = attributes.each_with_object([]) do |attr, results|
+      results.concat object.errors[attr] if object.errors[attr].present?
+    end
+
+    messages.uniq
+  end
+end

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

@@ -0,0 +1,2 @@
+root:
+  base: list-none font-medium text-sm text-red-900 dark:text-red-500

data/app/components/fox_tail/input_group_component.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+class FoxTail::InputGroupComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+
+  has_option :size, default: :base
+
+  renders_many :items, types: {
+    input: {
+      as: :input,
+      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::InputComponent.new objectify_options(options)
+      }
+    },
+    select: {
+      as: :select,
+      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::SelectComponent.new objectify_options(options) }
+    },
+    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 objectify_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, objectify_options(options)
+      }
+    },
+    text: {
+      as: :text,
+      renders: lambda { |text, options = {}|
+        addon_component options do
+          content_tag :span, text, class: theme.apply("addon/text", self)
+        end
+      }
+    },
+    icon: {
+      as: :icon,
+      renders: lambda { |icon, options = {}|
+        options[:class] = classnames theme.apply("addon/visual", self),
+                                     theme.apply("addon/icon", self),
+                                     options[:class]
+
+        addon_component { render FoxTail::IconBaseComponent.new icon, options }
+      }
+    },
+    svg: {
+      as: :svg,
+      renders: lambda { |path, options = {}|
+        options[:class] = classnames theme.apply("addon/visual", self),
+                                     theme.apply("addon/svg", self),
+                                     options[:class]
+
+        addon_component { render FoxTail::InlineSvgComponent.new(path, options) }
+      }
+    },
+    image: {
+      as: :image,
+      renders: lambda { |path, options = {}|
+        image_options = options.extract! :fill
+        options[:class] = classnames classnames theme.apply("addon/visual", self),
+                                                theme.apply("addon/image", self, image_options),
+                                                options[:class]
+
+        addon_component(image_options) { image_tag path, options }
+      }
+    },
+    wrapped: {
+      as: :item,
+      renders: lambda { |&block| FoxTail::WrapperComponent.new(&block) }
+    }
+  }
+
+  def render?
+    items?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      items.each_with_index { |item, index| concat render_item(item, index) }
+      concat content
+    end
+  end
+
+  private
+
+  def objectify_options(options)
+    options.merge self.options.except(:class, :method_name, :value_array)
+  end
+
+  def item_position(index)
+    if index.zero?
+      :start
+    elsif index == items.length - 1
+      :end
+    else
+      :middle
+    end
+  end
+
+  def addon_component(options = {}, &block)
+    FoxTail::WrapperComponent.new class: theme.apply(:addon, self, { fill: options[:fill] }) do |wrapper|
+      content_tag :div, wrapper.options do
+        capture wrapper, &block
+      end
+    end
+  end
+
+  def render_item(item, index)
+    item.with_html_class theme.apply(:item, self, { position: item_position(index) })
+    item
+  end
+end

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

@@ -0,0 +1,28 @@
+root:
+  base: flex flex-row
+item:
+  position:
+    start: border-r-0 rounded-r-none
+    middle: border-r-0 rounded-r-none rounded-l-none
+    end: rounded-l-none
+addon:
+  base: >-
+    inline-flex items-center px-3 
+    text-sm text-gray-900 dark:text-gray-400
+    bg-gray-200 dark:bg-gray-600
+    border border-gray-300 rounded-md dark:border-gray-600
+  fill: p-0 aspect-square overflow-hidden
+addon/visual:
+  size:
+    sm: h-3.5 w-3.5
+    base: h-4 w-4
+    lg: h-5 w-5
+addon/image:
+  base: rounded
+  fill:
+    true:
+      base: rounded-none object-cover h-full
+      size:
+        sm: w-8
+        base: w-10
+        lg: w-14

data/app/components/fox_tail/label_component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class FoxTail::LabelComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+
+  has_option :state
+  has_option :required, type: :boolean, default: false
+  has_option :value
+
+  def before_render
+    super
+
+    update_state_from_object!
+    html_attributes[:for] ||= tag_id_for_value value
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :label, retrieve_content, html_attributes
+  end
+
+  private
+
+  def retrieve_content
+    return content if content?
+    return unless object_name? && method_name?
+
+    label_translator.translate || default_label
+  end
+
+  def default_label
+    object = convert_to_model self.object
+    return object.class.human_attribute_name(method_name) if object.class.respond_to?(:human_attribute_name)
+
+    method_name&.humanize
+  end
+
+  def label_translator(value: self.value, default: "")
+    translator value: value, default: default, scope: "helpers.label"
+  end
+
+  def update_state_from_object!
+    return unless object? && !options.key(:state)
+
+    options[:state] = if object_errors?
+                        :invalid
+                      elsif html_attributes[:value].present?
+                        :valid
+                      else
+                        :none
+                      end
+  end
+end

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

@@ -0,0 +1,10 @@
+root:
+  base: block text-sm font-medium text-gray-900 dark:text-white
+  required?: >-
+    relative
+    before:absolute before:top-0 before:left-0 before:-translate-x-full
+    before:content-["*"] before:pr-0.5
+    before:text-blue-700 dark:before:text-blue-500
+  state:
+    invalid: text-red-700 dark:text-red-500
+    valid: text-green-700 dark:text-green-500

data/app/components/fox_tail/link_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class FoxTail::LinkComponent < FoxTail::ClickableComponent
+  has_option :color, default: :default
+
+  def initialize(url, html_attributes = {})
+    super(html_attributes)
+    @url = url
+  end
+end

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

@@ -0,0 +1,21 @@
+root:
+  color:
+    neutral: text-gray-600 dark:text-gray-500
+    dark: text-gray-800 dark:text-gray-700
+    light: text-gray-300 dark:text-gray-500
+    blue: &default text-blue-600 dark:text-blue-500
+    red: text-red-600 dark:text-red-500
+    green: text-green-600 dark:text-green-500
+    yellow: text-yellow-600 dark:text-yellow-500
+    indigo: text-indigo-600 dark:text-indigo-500
+    purple: text-purple-600 dark:text-purple-500
+    pink: text-pink-600 dark:text-pink-500
+    info: text-blue-800 dark:text-blue-700
+    error: text-red-800 dark:text-red-700
+    warning: text-yellow-800 dark:text-yellow-700
+    success: text-green-800 dark:text-green-700
+    default: *default
+root/active:
+  base: hover:underline
+root/disabled:
+  base: opacity-50 cursor-not-allowed

data/app/components/fox_tail/list_group/item_component.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+class FoxTail::ListGroup::ItemComponent < FoxTail::ClickableComponent
+  renders_one :visual, types: {
+    icon: {
+      as: :icon,
+      renders: lambda { |icon, options = {}|
+        options[:class] = classnames theme.apply(:visual, self), options[:class]
+        FoxTail::IconBaseComponent.new icon, options
+      }
+    },
+    svg: {
+      as: :svg,
+      renders: lambda { |path, options = {}|
+        options[:class] = classnames theme.apply(:visual, self), options[:class]
+        FoxTail::InlineSvgComponent.new path, options
+      }
+    },
+    image: {
+      as: :image,
+      renders: lambda { |source, options = {}|
+        options[:class] = classnames theme.apply(:visual, self), options[:class]
+        image_tag source, options
+      }
+    }
+  }
+
+  renders_one :badge, lambda { |options = {}|
+    options.reverse_merge! pill: true
+    options[:class] = classnames theme.apply(:badge, self), options[:class]
+    FoxTail::BadgeComponent.new options
+  }
+
+  has_option :static, type: :boolean, default: false
+  has_option :flush, type: :boolean, default: false
+  has_option :selected, type: :boolean, default: false
+
+  def root_tag_name
+    static? ? :div : super
+  end
+
+  def hoverable?
+    !static?
+  end
+
+  def render?
+    content?
+  end
+
+  def before_render
+    super
+
+    if selected?
+      html_attributes[:aria] ||= {}
+      html_attributes[:aria][:current] = true
+    end
+  end
+
+  def call
+    super do
+      concat visual if visual?
+      concat content
+      concat badge if badge?
+    end
+  end
+end

data/app/components/fox_tail/list_group_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class FoxTail::ListGroupComponent < FoxTail::BaseComponent
+  renders_many :items, lambda { |options = {}|
+    options[:flush] = flush?
+    options[:theme] = theme.theme :item
+    FoxTail::ListGroup::ItemComponent.new options
+  }
+
+  has_option :flush, type: :boolean, default: false
+
+  def render?
+    items?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      items.each { |item| concat item }
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+root:
+  base: >-
+    text-sm font-medium text-gray-900 
+    bg-white dark:bg-gray-700 dark:text-white
+    divide-y divide-gray-200 dark:divide-gray-600
+  flush?:
+    false: border rounded-lg border-gray-200 dark:border-gray-600
+item:
+  root:
+    base: w-full px-4 py-2 flex items-center gap-1.5
+    flush?:
+      false: first:rounded-t-lg last:rounded-b-lg
+  root/disabled:
+    base: cursor-not-allowed bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-400
+  root/active:
+    base:
+    selected?:
+      true: text-white bg-blue-700 dark:bg-gray-800 focus:outline-none
+      false:
+        hoverable?: >-
+          cursor-pointer
+          hover:text-blue-700 dark:hover:text-white
+          hover:bg-gray-100 dark:hover:bg-gray-600
+          focus:outline-none focus:ring-2 focus:ring-blue-700 dark:focus:ring-gray-500
+          focus:text-blue-700 dark:focus:text-white
+  visual:
+    base: w-3 h-3
+  badge:
+    base: ml-auto