fox_tail 0.1.0 → 0.2.0

data/app/components/fox_tail/checkbox_component.rb

@@ -1,24 +1,69 @@
 # frozen_string_literal: true
 
 class FoxTail::CheckboxComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+  include FoxTail::Concerns::HasStimulusController
+
   has_option :color, default: :default
   has_option :size, default: :base
+  has_option :value
   has_option :unchecked_value, default: "0"
   has_option :checked_value, default: "1"
   has_option :include_hidden, type: :boolean, default: true
+  has_option :multiple, type: :boolean, default: false
+  has_option :checked, type: :boolean
+  has_option :controlled, type: :boolean, default: false
+
+  def value
+    options[:value] ||= value_from_object
+  end
+
+  def checked?
+    return !!options[:checked] if options.key? :checked
+
+    case value
+    when TrueClass, FalseClass
+      value == !!checked_value
+    when NilClass
+      false
+    when String
+      value == checked_value
+    else
+      if value.respond_to?(:include?)
+        value.map(&:to_s).include?(checked_value.to_s)
+      else
+        value.to_i == checked_value.to_i
+      end
+    end
+  end
+
+  def use_stimulus?
+    super && controlled?
+  end
+
+  def stimulus_controller_options
+    {}
+  end
 
   def before_render
     super
 
+    if multiple?
+      add_default_name_and_id_for_value checked_value
+    else
+      add_default_name_and_id
+    end
+
     html_attributes[:type] = :checkbox
     html_attributes[:class] = classnames theme.apply(:root, self), html_class
     html_attributes[:value] = checked_value
+    html_attributes[:checked] = checked?
   end
 
   def call
     capture do
-      concat tag(:input, hidden_attributes) if include_hidden?
-      concat tag(:input, html_attributes)
+      concat tag.input(hidden_attributes) if include_hidden?
+      concat tag.input(html_attributes)
     end
   end
 
@@ -26,6 +71,14 @@ class FoxTail::CheckboxComponent < FoxTail::BaseComponent
 
   def hidden_attributes
     html_attributes.slice(:name, :disabled, :form)
-                   .merge!(type: :hidden, value: unchecked_value, autocomplete: "off")
+      .merge!(type: :hidden, value: unchecked_value, autocomplete: "off")
   end
+
+  class << self
+    def stimulus_controller_name
+      "form-field"
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController; end
 end

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

@@ -8,11 +8,9 @@ root:
     base: w-4 h-4
     lg: w-6 h-6
   color:
-    blue: &default text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600
-    red: text-red-600 focus:ring-red-500 dark:focus:ring-red-600
-    green: text-green-600 focus:ring-green-500 dark:focus:ring-green-600
-    yellow: text-yellow-600 focus:ring-yellow-500 dark:focus:ring-yellow-600
-    indigo: text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600
-    purple: text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600
-    pink: text-pink-600 focus:ring-pink-500 dark:focus:ring-pink-600
-    default: *default
+    primary: &primary text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600
+    info: text-info-600 focus:ring-info-500 dark:focus:ring-info-600
+    success: text-success-600 focus:ring-success-500 dark:focus:ring-success-600
+    warning: text-warning-600 focus:ring-warning-500 dark:focus:ring-warning-600
+    danger: text-danger-600 focus:ring-danger-500 dark:focus:ring-danger-600
+    default: *primary

data/app/components/fox_tail/clickable_component.rb

@@ -42,23 +42,23 @@ class FoxTail::ClickableComponent < FoxTail::BaseComponent
   end
 
   def stimulus_controller_options
-    { state: stimulus_state, active_classes: active_classes, disabled_classes: disabled_classes }
+    {state: stimulus_state, active_classes: active_classes, disabled_classes: disabled_classes}
   end
 
   protected
 
   def root_classes
     classnames theme.apply(:root, self),
-               theme.apply("root/#{disabled? ? :disabled : :active}", self),
-               block_given? && yield,
-               html_class
+      theme.apply("root/#{disabled? ? :disabled : :active}", self),
+      block_given? && yield,
+      html_class
   end
 
   def active_classes
     classnames theme.apply(:root, self),
-               theme.apply("root/active", self),
-               block_given? && yield,
-               html_class
+      theme.apply("root/active", self),
+      block_given? && yield,
+      html_class
   end
 
   def disabled_classes
@@ -87,7 +87,7 @@ class FoxTail::ClickableComponent < FoxTail::BaseComponent
     def attributes(options = {})
       {
         data: {
-          controller: identifier,
+          :controller => identifier,
           value_key(:state) => options[:state] || :active,
           classes_key(:active) => options[:active_classes],
           classes_key(:disabled) => options[:disabled_classes]

data/app/components/fox_tail/clickable_controller.ts

@@ -26,6 +26,18 @@ export default class extends Controller {
         return !this.isLink;
     }
 
+    disable() {
+        this.stateValue = 'disabled';
+    }
+
+    activate() {
+        this.stateValue = 'active';
+    }
+
+    loading() {
+        this.stateValue = 'loading';
+    }
+
     connect() {
         super.connect();
         this.element.addEventListener('click', this.handleClick.bind(this));

data/app/components/fox_tail/collapsible_component.rb

@@ -1,20 +1,25 @@
 # frozen_string_literal: true
 
 class FoxTail::CollapsibleComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Identifiable
   include FoxTail::Concerns::HasStimulusController
 
-  attr_reader :id
-
   renders_one :trigger, lambda { |attributes = {}|
-    FoxTail::CollapsibleTriggerComponent.new trigger_id, "##{id}", attributes.merge(open: open?)
+    FoxTail::CollapsibleTriggerComponent.new "##{id}", attributes.merge(open: open?, id: trigger_id)
   }
 
   has_option :open, default: false, type: :boolean
   has_option :trigger_id
 
-  def initialize(id, html_attributes = {})
+  def initialize(id_or_attributes = {}, html_attributes = {})
+    if id_or_attributes.is_a? Hash
+      html_attributes = id_or_attributes
+    else
+      __id_argument_deprecated_warning
+      html_attributes[:id] = id_or_attributes
+    end
+
     super(html_attributes)
-    @id = id
   end
 
   def trigger_id
@@ -24,10 +29,10 @@ class FoxTail::CollapsibleComponent < FoxTail::BaseComponent
   def before_render
     super
 
-    html_attributes[:id] = id
+    generate_unique_id
     html_attributes[:class] = classnames theme.apply(:root, self),
-                                         !open? && theme.apply("root/collapsed", self),
-                                         html_class
+      !open? && theme.apply("root/collapsed", self),
+      html_class
   end
 
   def call
@@ -46,7 +51,7 @@ class FoxTail::CollapsibleComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:collapsed)] = !options[:open]
       attributes[:data][classes_key(:hidden)] = options[:hidden_classes]
       attributes

data/app/components/fox_tail/collapsible_trigger_component.rb

@@ -11,15 +11,15 @@ class FoxTail::CollapsibleTriggerComponent < FoxTail::TriggerBaseComponent
     super
 
     html_attributes[:class] = classnames theme.classname("root.base"),
-                                         open? && theme.classname("root.expanded"),
-                                         !open? && theme.classname("root.collapsed"),
-                                         html_class
+      open? && theme.classname("root.expanded"),
+      !open? && theme.classname("root.collapsed"),
+      html_class
   end
 
   def stimulus_controller_options
     super.merge open: open?,
-                collapsed_classes: theme.classname("root.collapsed"),
-                expanded_classes: theme.classname("root.expanded")
+      collapsed_classes: theme.classname("root.collapsed"),
+      expanded_classes: theme.classname("root.expanded")
   end
 
   class StimulusController < FoxTail::StimulusController
@@ -35,12 +35,12 @@ class FoxTail::CollapsibleTriggerComponent < FoxTail::TriggerBaseComponent
 
     def attributes(options = {})
       trigger_type = TRIGGER_TYPES[options[:trigger_type]&.to_sym]
-      attributes = super options
+      attributes = super
       attributes[:data][classes_key(:collapsed)] = options[:collapsed_classes]
       attributes[:data][classes_key(:expanded)] = options[:expanded_classes]
       attributes[:data][outlet_key(collapsible_identifier)] = options[:selector]
       attributes[:data][:action] = build_actions(trigger_type)
-      attributes[:aria] = { expanded: options[:opened], controls: extract_controls(options[:collapsible_selector]) }
+      attributes[:aria] = {expanded: options[:opened], controls: extract_controls(options[:collapsible_selector])}
       attributes
     end
 

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

@@ -1,5 +1,6 @@
 root:
   base: group
   collapsed: collapsed
+  expanded: expanded
 root/collapsed:
   base: collapsed

data/app/components/fox_tail/color_theme_trigger_component.rb

@@ -4,7 +4,7 @@ class FoxTail::ColorThemeTriggerComponent < FoxTail::TriggerBaseComponent
   has_option :action
 
   def initialize(html_attributes = {})
-    super html_attributes.delete(:id), nil, html_attributes
+    super(html_attributes.delete(:id), nil, html_attributes)
   end
 
   def stimulus_controller_options
@@ -21,7 +21,7 @@ class FoxTail::ColorThemeTriggerComponent < FoxTail::TriggerBaseComponent
     def attributes(options = {})
       controller_options = options.extract! :key, :storage, :default_theme, :domain
       controller_options.reverse_merge! FoxTail::Base.fox_tail_config.color_theme
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:key)] = controller_options[:key]
       attributes[:data][value_key(:storage)] = controller_options[:storage]
       attributes[:data][value_key(:default_theme)] = controller_options[:default_theme]

data/app/components/fox_tail/concerns/choosable.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module FoxTail::Concerns::Choosable
+  extend ActiveSupport::Concern
+
+  included do
+    has_option :choices
+  end
+
+  protected
+
+  def add_choices
+    return unless choices?
+
+    choices.each do |choice|
+      text, value, options = extract_choice_values choice
+
+      if value.is_a? Array
+        add_choice_group text, value
+      else
+        add_choice value, text, options
+      end
+    end
+  end
+
+  def add_choice(value, label, options = {})
+    raise NotImplementedError
+  end
+
+  def add_choice_group(label, choices)
+    raise NotImplementedError
+  end
+
+  def extract_choice_values(choice)
+    if choice.is_a? Array
+      choice[1] ||= choice[0]
+      choice[2] ||= {}
+      choice
+    else
+      [choice, choice, {}]
+    end
+  end
+end

data/app/components/fox_tail/concerns/formable.rb

@@ -4,6 +4,12 @@ module FoxTail::Concerns::Formable
   include ActionView::ModelNaming
   extend ActiveSupport::Concern
 
+  FORM_OPTIONS = %i[
+    object_name method_name namespace object
+    skip_default_ids allow_method_names_outside_object
+    value_array object_index
+  ].freeze
+
   included do
     has_option :object_name
     has_option :method_name
@@ -13,6 +19,7 @@ module FoxTail::Concerns::Formable
     has_option :allow_method_names_outside_object, type: :boolean, default: false
     has_option :value_array, type: :boolean, default: false
     has_option :object_index
+    has_option :errors_for
   end
 
   def initialize(*)
@@ -35,7 +42,7 @@ module FoxTail::Concerns::Formable
   end
 
   def name_and_id_index
-    if self.options.key? :object_index
+    if options.key? :object_index
       object_index.presence || ""
     elsif @generate_indexed_names
       @auto_index || ""
@@ -79,7 +86,7 @@ module FoxTail::Concerns::Formable
 
   def add_default_name_and_id_for_value(value, attributes: html_attributes)
     add_default_name attributes: attributes
-    attributes[:id] = tag_id_for_value value, attributes: attributes
+    attributes[:id] = tag_id_for_value value, attributes: attributes unless attributes.key? :id
   end
 
   def tag_id_for_value(value, attributes = html_attributes)
@@ -116,11 +123,11 @@ module FoxTail::Concerns::Formable
     end
   end
 
-  def field_id(method, *suffixes, namespace: self.namespace, index: self.object_index)
+  def field_id(method, *suffixes, namespace: self.namespace, index: object_index)
     view_context.field_id(object_name, method, *suffixes, namespace: namespace.presence, index: index.presence).presence
   end
 
-  def field_name(method, *methods, multiple: false, index: self.object_index)
+  def field_name(method, *methods, multiple: false, index: object_index)
     view_context.field_name(object_name, method, *methods, index: index.presence, multiple: !!multiple).presence
   end
 
@@ -141,16 +148,23 @@ module FoxTail::Concerns::Formable
   end
 
   def translator(value: nil, scope: nil, default: "")
-    FoxTail::Translator.new object,
-                                             object_name,
-                                             method_name,
-                                             value: value,
-                                             scope: scope,
-                                             default: default
+    FoxTail::Translator.new object, object_name, method_name, value: value, scope: scope, default: default
+  end
+
+  def object_errors_for
+    (Array(method_name) + Array(options[:errors_for])).compact_blank.uniq
   end
 
-  def object_errors?(method = method_name)
+  def object_errors?(methods = object_errors_for)
+    return false if methods.blank?
+
     object = convert_to_model self.object
-    object.present? && method.present? && object.errors[method.to_sym].present?
+    return false if object.blank?
+
+    methods.any? { |m| object.errors[m].present? }
+  end
+
+  def objectify_options(options)
+    options.merge self.options.slice(*FORM_OPTIONS)
   end
 end

data/app/components/fox_tail/concerns/has_options.rb

@@ -22,29 +22,52 @@ module FoxTail::Concerns::HasOptions
 
   class_methods do
     def default_options
-      registered_options.reject { |_,v| v[:default].blank? }.transform_values { |v| v[:default] }
+      registered_options.reject { |_, v| v[:default].nil? }.transform_values { |v| v[:default] }
     end
 
     def has_option(name, as: name, default: nil, type: nil)
       raise FoxTail::ReservedOption.new(self, as) if RESERVED_OPTIONS.include?(as.to_s)
 
-      self.registered_options = registered_options.merge name => { name: name, as: as, default: default, type: type }
+      register_option name, {name: name, as: as, default: default, type: type}
+    end
 
-      define_method as do
-        options[name]
-      end
+    def include_options_from(klass, only: nil, except: nil)
+      return unless klass.respond_to? :registered_options
 
-      define_method :"#{as}?" do
-        if type == :boolean
-          !!send(as)
-        else
-          send(as).present?
+      only = Array(only).map(&:to_sym) if only.present?
+      except = Array(except).map(&:to_sym) if except.present?
+
+      klass.registered_options.each do |k, v|
+        if !registered_options.key?(k) && (only.nil? || only.include?(k)) && (except.nil? || except.exclude?(k))
+          register_option k, v
         end
       end
+
+      define_method "#{klass.name.underscore.gsub("_component", "").gsub("/", "_")}_options" do
+        options.slice(*klass.registered_options.keys)
+      end
     end
 
     def extract_options(options = {})
       options.slice(*registered_options.keys)
     end
+
+    private
+
+    def register_option(name, option)
+      self.registered_options = registered_options.merge name => option
+
+      define_method option[:as] do
+        options[name]
+      end
+
+      define_method :"#{option[:as]}?" do
+        if option[:type] == :boolean
+          !!send(option[:as])
+        else
+          send(option[:as]).present?
+        end
+      end
+    end
   end
 end

data/app/components/fox_tail/concerns/identifiable.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module FoxTail::Concerns::Identifiable
+  extend ActiveSupport::Concern
+
+  class_methods do
+    def generate_unique_id
+      "#{name.underscore.gsub("_component", "").gsub("/", "_")}_#{SecureRandom.base58(6)}"
+    end
+  end
+
+  def id
+    html_attributes[:id] ||= self.class.generate_unique_id
+  end
+  alias_method :generate_unique_id, :id
+
+  private
+
+  def __id_argument_deprecated_warning(slot: false)
+    FoxTail.deprecator.allow ["identifiable"] do
+      callstack = Array(caller_locations[slot ? 7 : 4])
+      FoxTail.deprecator.warn "first argument `id` is deprecated, use `id:` instead", callstack
+    end
+  end
+end

data/app/components/fox_tail/concerns/placeholderable.rb

@@ -11,12 +11,6 @@ module FoxTail::Concerns::Placeholderable
     !!placeholder.presence
   end
 
-  def before_render
-    super
-
-    html_attributes[:placeholder] = retrieve_placeholder if placeholder?
-  end
-
   protected
 
   def retrieve_placeholder

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

@@ -1,10 +1,8 @@
 <%= content_tag tag_name, html_attributes do %>
   <%= header if header? %>
-  <% if body? %>
+  <% bodies.each do |body| %>
     <%= body %>
-    <%= content if content? %>
-  <% elsif content? %>
-    <%= content_tag :div, content, class: theme.apply(:body, self) %>
   <% end %>
+  <%= formatted_content %>
   <%= footer if footer? %>
 <% end %>

data/app/components/fox_tail/dialog_component.rb

@@ -6,7 +6,7 @@ class FoxTail::DialogComponent < FoxTail::SurfaceComponent
     content_tag :div, options, &block
   }
 
-  renders_one :body, lambda { |options = {}, &block|
+  renders_many :bodies, lambda { |options = {}, &block|
     options[:class] = classnames theme.apply(:body, self), options[:class]
     content_tag :div, options, &block
   }
@@ -16,9 +16,11 @@ class FoxTail::DialogComponent < FoxTail::SurfaceComponent
     content_tag :div, options, &block
   }
 
+  has_option :wrap_content, type: :boolean, default: true
+
   def initialize(html_attributes = {})
     html_attributes[:border] = false unless html_attributes.key? :border
-    super(html_attributes)
+    super
   end
 
   def hover?
@@ -28,4 +30,11 @@ class FoxTail::DialogComponent < FoxTail::SurfaceComponent
   def tag_name
     :div
   end
+
+  def formatted_content
+    return nil unless content? && content.present?
+    return content unless wrap_content?
+
+    content_tag :div, content, class: theme.apply(:body, self)
+  end
 end

data/app/components/fox_tail/dismissible_component.rb

@@ -35,7 +35,7 @@ class FoxTail::DismissibleComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:remove)] = options[:remove]
       attributes[:data][value_key(:auto_close)] = options[:auto_close]
       attributes[:data][value_key(:delay)] = options[:delay]

data/app/components/fox_tail/dismissible_controller.ts

@@ -28,7 +28,7 @@ export default class extends Controller {
     declare readonly dismissedClasses: string[];
 
     private _dismissed: boolean = false;
-    private _autoCloseTimer: number | null = null;
+    private _autoCloseTimer: NodeJS.Timeout | null = null;
 
     connect() {
         super.connect();

data/app/components/fox_tail/dismissible_trigger_component.rb

@@ -7,7 +7,7 @@ class FoxTail::DismissibleTriggerComponent < FoxTail::TriggerBaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][outlet_key(:dismissible)] = options[:selector]
       attributes[:data][:action] = action(:dismiss) if options[:trigger_type] == :click
       attributes

data/app/components/fox_tail/dot_indicator_component.rb

@@ -18,8 +18,8 @@ class FoxTail::DotIndicatorComponent < FoxTail::BaseComponent
 
   def render_animated_dot
     container_classes = classnames theme.apply(:root, self),
-                                   theme.apply(:container, self),
-                                   html_class
+      theme.apply(:container, self),
+      html_class
 
     dot_classes = classnames theme.apply(:root, self), theme.apply(:dot, self)
     animated_classes = classnames dot_classes, theme.apply("dot/animation", self)

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

@@ -12,17 +12,11 @@ dot:
     neutral: &default bg-gray-400
     dark: bg-gray-700
     light: bg-gray-200
-    red: bg-red-400
-    blue: bg-blue-400
-    green: bg-green-400
-    yellow: bg-yellow-400
-    indigo: bg-indigo-400
-    purple: bg-purple-400
-    pink: bg-pink-400
-    info: bg-blue-700
-    success: bg-green-700
-    error: bg-red-700
-    warning: bg-yellow-700
+    primary: bg-primary-400
+    info: bg-info-700
+    success: bg-success-700
+    danger: bg-danger-700
+    warning: bg-warning-700
     default: *default
 dot/animation:
   base: absolute animate-ping opacity-75 w-full h-full

data/app/components/fox_tail/drawer_component.rb

@@ -19,7 +19,7 @@ class FoxTail::DrawerComponent < FoxTail::BaseComponent
 
         if use_stimulus?
           options[:data][:action] = stimulus_merger.merge_actions options[:data][:action],
-                                                                  stimulus_controller.action(:hide)
+            stimulus_controller.action(:hide)
         end
 
         content_tag :button, options do
@@ -48,8 +48,8 @@ class FoxTail::DrawerComponent < FoxTail::BaseComponent
     super
 
     html_attributes[:class] = classnames theme.apply(:root, self),
-                                         open? ? visible_classes : hidden_classes,
-                                         html_class
+      open? ? visible_classes : hidden_classes,
+      html_class
 
     html_attributes[:tab_index] ||= -1
     html_attributes[:aria] ||= {}
@@ -60,6 +60,7 @@ class FoxTail::DrawerComponent < FoxTail::BaseComponent
     content_tag tag_name, html_attributes do
       concat close_button if close_button?
       concat notch if notch?
+      yield if block_given?
       concat content
     end
   end
@@ -103,7 +104,7 @@ class FoxTail::DrawerComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:backdrop)] = options[:backdrop]
       attributes[:data][value_key(:body_scrolling)] = options[:body_scrolling]
       attributes[:data][value_key(:open)] = options[:open]