fox_tail 0.1.0

data/app/components/fox_tail/collapsible_trigger_controller.ts

@@ -0,0 +1,70 @@
+import { Controller } from '@hotwired/stimulus';
+
+import CollapsibleController from './collapsible_controller';
+import useForwardedEventListener from '../../../src/mixins/use_forwarded_event_listener';
+
+export default class extends Controller {
+    static classes = ['expanded', 'collapsed'];
+    static outlets = ['fox-tail--collapsible'];
+
+    static values = {
+        collapsed: {
+            type: Boolean,
+            default: false,
+        },
+    };
+
+    declare readonly expandedClasses: string[];
+    declare readonly collapsedClasses: string[];
+    declare readonly foxTailCollapsibleOutlet: CollapsibleController;
+
+    declare _unsubscribeListener: (() => void) | null;
+
+    foxTailCollapsibleOutletConnected(
+        _outlet: CollapsibleController,
+        element: Element,
+    ): void {
+        const [observe, unobserve] = useForwardedEventListener(
+            this,
+            ['show', 'shown', 'hide', 'hidden'],
+            element,
+            this.element,
+            { capture: true, eventPrefix: 'fox-tail--collapsible' },
+        );
+
+        this._unsubscribeListener = unobserve;
+        observe();
+    }
+
+    foxTailCollapsibleOutletDisconnected(): void {
+        this._unsubscribeListener && this._unsubscribeListener();
+        this._unsubscribeListener = null;
+    }
+
+    show(): void {
+        this.foxTailCollapsibleOutlet.show();
+    }
+
+    hide(): void {
+        this.foxTailCollapsibleOutlet.hide();
+    }
+
+    toggle(): void {
+        this.foxTailCollapsibleOutlet.toggle();
+    }
+
+    onForwardEvent(): void {
+        this.element.setAttribute(
+            'aria-expanded',
+            this.foxTailCollapsibleOutlet.isVisible.toString(),
+        );
+
+        if (this.foxTailCollapsibleOutlet.isVisible) {
+            this.element.classList.remove(...this.collapsedClasses);
+            this.element.classList.add(...this.expandedClasses);
+        } else {
+            this.element.classList.remove(...this.expandedClasses);
+            this.element.classList.add(...this.collapsedClasses);
+        }
+    }
+}

data/app/components/fox_tail/color_theme_controller.ts

@@ -0,0 +1,119 @@
+import { Controller } from '@hotwired/stimulus';
+import CookieStorage from '../../../src/utilities/cookie-storage';
+
+export default class extends Controller {
+    static values = {
+        key: {
+            type: String,
+            default: 'color-theme',
+        },
+        storage: {
+            type: String,
+            default: 'local',
+        },
+        defaultTheme: {
+            type: String,
+            default: 'media',
+        },
+        domain: String,
+    };
+
+    declare readonly keyValue: string;
+    declare readonly storageValue: string;
+    declare readonly defaultThemeValue: string;
+    declare readonly hasDomainValue: boolean;
+    declare readonly domainValue: string;
+
+    get htmlElement(): Element {
+        return document.querySelector('html') as Element;
+    }
+
+    toggle() {
+        if (this.isDarkMode()) {
+            this.setLightMode();
+        } else {
+            this.setDarkMode();
+        }
+    }
+
+    setDarkMode() {
+        if (this.onThemeChange('dark')) {
+            return;
+        }
+
+        this.htmlElement.classList.add('dark');
+        this.getStorage().setItem(this.keyValue, 'dark');
+        this.onThemeChanged('dark');
+    }
+
+    setLightMode() {
+        if (this.onThemeChange('light')) {
+            return;
+        }
+
+        this.htmlElement.classList.remove('dark');
+        this.getStorage().setItem(this.keyValue, 'light');
+        this.onThemeChanged('light');
+    }
+
+    setPreferred() {
+        if (this.onThemeChange('media')) {
+            return;
+        }
+
+        this.getStorage().setItem(this.keyValue, 'media');
+
+        if (this.getPreferredTheme() === 'dark') {
+            this.htmlElement.classList.add('dark');
+        } else {
+            this.htmlElement.classList.remove('dark');
+        }
+
+        this.onThemeChanged('media');
+    }
+
+    protected onThemeChange(mode: string): boolean {
+        return this.dispatch('change', { detail: { mode }, cancelable: true })
+            .defaultPrevented;
+    }
+
+    protected onThemeChanged(mode: string) {
+        this.dispatch('changed', { detail: { mode } });
+    }
+
+    private getStorage(): Storage {
+        if (this.storageValue === 'local') {
+            return window.localStorage;
+        } else if (this.storageValue === 'session') {
+            return window.sessionStorage;
+        } else if (this.storageValue === 'cookie') {
+            return new CookieStorage({
+                domain: this.hasDomainValue ? this.domainValue : undefined,
+            });
+        } else {
+            throw `Unknown storage type '${this.storageValue}'`;
+        }
+    }
+
+    private getPreferredTheme(): string {
+        return window.matchMedia &&
+            window.matchMedia('(prefers-color-scheme:dark)').matches
+            ? 'dark'
+            : 'light';
+    }
+
+    private getCurrentTheme(): string {
+        const storage = this.getStorage();
+        return storage.getItem(this.keyValue) || this.defaultThemeValue;
+    }
+
+    private isDarkMode(): boolean {
+        let theme = this.getCurrentTheme();
+
+        if (theme === 'media') {
+            theme = this.getPreferredTheme();
+        }
+
+        return theme === 'dark';
+    }
+}

data/app/components/fox_tail/color_theme_trigger_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+class FoxTail::ColorThemeTriggerComponent < FoxTail::TriggerBaseComponent
+  has_option :action
+
+  def initialize(html_attributes = {})
+    super html_attributes.delete(:id), nil, html_attributes
+  end
+
+  def stimulus_controller_options
+    super.merge action: action
+  end
+
+  class << self
+    def stimulus_controller_name
+      :color_theme
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    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[: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]
+      attributes[:data][value_key(:domain)] = controller_options[:domain]
+      attributes[:data][:action] = action(options[:action], event: options[:trigger_type]) if options[:action].present?
+      attributes
+    end
+
+    def toggle_action(event: nil)
+      action :toggle, event: event
+    end
+
+    def set_dark_mode_action(event: nil)
+      action "setDarkMode", event: event
+    end
+
+    def set_light_mode_action(event: nil)
+      action "setLightMode", event: event
+    end
+
+    def set_preferred_action(event: nil)
+      action "setPreferred", event: event
+    end
+  end
+end

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

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module FoxTail::Concerns::Formable
+  include ActionView::ModelNaming
+  extend ActiveSupport::Concern
+
+  included do
+    has_option :object_name
+    has_option :method_name
+    has_option :namespace
+    has_option :object
+    has_option :skip_default_ids, type: :boolean, default: false
+    has_option :allow_method_names_outside_object, type: :boolean, default: false
+    has_option :value_array, type: :boolean, default: false
+    has_option :object_index
+  end
+
+  def initialize(*)
+    super
+
+    options[:object_name] = object_name.to_s.dup if object_name?
+    options[:method_name] = method_name.to_s.dup if method_name?
+
+    return unless object_name?
+
+    object_name.sub!(/\[\]$/, "") || object_name.sub!(/\[\]\]$/, "]")
+
+    if Regexp.last_match
+      @generate_indexed_names = true
+      @auto_index = retrieve_autoindex
+    else
+      @generate_indexed_names = false
+      @auto_index = nil
+    end
+  end
+
+  def name_and_id_index
+    if self.options.key? :object_index
+      object_index.presence || ""
+    elsif @generate_indexed_names
+      @auto_index || ""
+    end
+  end
+
+  def value_from_object
+    if @allow_method_names_outside_object
+      object.public_send method_name if object.respond_to?(method_name)
+    else
+      object&.public_send method_name
+    end
+  end
+
+  def value_came_from_user?
+    method_came_from_user = "#{method_name}_came_from_user?"
+    !object.respond_to?(method_came_from_user) || object.public_send(method_came_from_user)
+  end
+
+  def retrieve_autoindex
+    unless object.respond_to?(:to_param)
+      raise ArgumentError, <<~MSG
+        object[] naming but object param and @object var don't exist or don't respond to to_param: #{object.inspect}
+      MSG
+    end
+
+    object.to_param
+  end
+
+  def value_before_type_cast
+    return if object.nil?
+
+    method_before_type_cast = "#{method_name}_before_type_cast"
+
+    if value_came_from_user? && object.respond_to?(method_before_type_cast)
+      object.public_send(method_before_type_cast)
+    else
+      value_from_object
+    end
+  end
+
+  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
+  end
+
+  def tag_id_for_value(value, attributes = html_attributes)
+    if value.nil?
+      tag_id
+    else
+      specified_id = attributes[:id]
+      id = tag_id
+
+      if specified_id.blank? && id.present?
+        "#{id}_#{sanitized_value(tag_value)}"
+      else
+        tag_id
+      end
+    end
+  end
+
+  def add_default_name_and_id(attributes: html_attributes)
+    add_default_name attributes: attributes
+    add_default_id attributes: attributes
+  end
+
+  def add_default_name(attributes: html_attributes)
+    attributes[:name] = tag_name unless attributes.key? :name
+  end
+
+  def add_default_id(attributes: html_attributes)
+    return if skip_default_ids?
+
+    if attributes.key? :id
+      attributes[:id] = attributes[:id] ? "#{namespace}_#{attributes[:id]}" : namespace if namespace?
+    else
+      attributes[:id] = tag_id
+    end
+  end
+
+  def field_id(method, *suffixes, namespace: self.namespace, index: self.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)
+    view_context.field_name(object_name, method, *methods, index: index.presence, multiple: !!multiple).presence
+  end
+
+  def tag_name
+    field_name sanitized_method_name, multiple: value_array?, index: name_and_id_index
+  end
+
+  def tag_id
+    field_id method_name, index: name_and_id_index, namespace: namespace
+  end
+
+  def sanitized_method_name
+    @sanitized_method_name ||= method_name.presence&.delete_suffix("?")
+  end
+
+  def sanitized_value(value)
+    value.to_s.gsub(/[\s.]/, "_").gsub(/[^-[[:word:]]]/, "").downcase
+  end
+
+  def translator(value: nil, scope: nil, default: "")
+    FoxTail::Translator.new object,
+                                             object_name,
+                                             method_name,
+                                             value: value,
+                                             scope: scope,
+                                             default: default
+  end
+
+  def object_errors?(method = method_name)
+    object = convert_to_model self.object
+    object.present? && method.present? && object.errors[method.to_sym].present?
+  end
+end

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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module FoxTail::Concerns::HasOptions
+  extend ActiveSupport::Concern
+
+  RESERVED_OPTIONS = [FoxTail::Theme::BASE_KEY.to_s].freeze
+
+  def options
+    @options ||= self.class.default_options
+  end
+
+  def extract_options!(options = {})
+    options.extract!(*registered_options.keys).each do |k, v|
+      self.options[k.to_sym] = v
+    end
+  end
+
+  included do
+    class_attribute :registered_options, instance_writer: false, instance_predicate: false
+    self.registered_options = {}
+  end
+
+  class_methods do
+    def default_options
+      registered_options.reject { |_,v| v[:default].blank? }.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 }
+
+      define_method as do
+        options[name]
+      end
+
+      define_method :"#{as}?" do
+        if type == :boolean
+          !!send(as)
+        else
+          send(as).present?
+        end
+      end
+    end
+
+    def extract_options(options = {})
+      options.slice(*registered_options.keys)
+    end
+  end
+end

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module FoxTail::Concerns::HasStimulusController
+  extend ActiveSupport::Concern
+
+  included do
+    delegate :stimulus_controller, :stimulus_controller_identifier, :use_stimulus?, :stimulus_merger, to: :class
+  end
+
+  def before_render
+    super
+
+    stimulus_controller.merge! html_attributes, stimulus_controller_options if use_stimulus?
+  end
+
+  def stimulus_controller_options
+    raise NotImplementedError
+  end
+
+  class_methods do
+    def stimulus_controller
+      @stimulus_controller ||= find_stimulus_controller!
+    end
+
+    def stimulus_controller_identifier
+      :"fox_tail--#{stimulus_controller_name.to_s.gsub("_", "-")}"
+    end
+
+    def stimulus_controller_name
+      name.demodulize.underscore.gsub(/_component$/, "").to_sym
+    end
+
+    private
+
+    def find_stimulus_controller!
+      find_stimulus_controller(self) ||
+        raise(FoxTail::ControllerNotImplemented, "Stimulus controller for #{name} not defined.")
+    end
+
+    def find_stimulus_controller(klass)
+      if defined? klass::StimulusController
+        klass::StimulusController.new stimulus_controller_identifier
+      elsif klass != FoxTail::Base
+        find_stimulus_controller klass.superclass
+      end
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module FoxTail::Concerns::HasTheme
+  extend ActiveSupport::Concern
+
+  def theme
+    @theme ||= self.class.theme
+  end
+
+  class_methods do
+    def theme
+      theme = FoxTail::Theme.new
+      theme.merge! superclass.theme if superclass.respond_to?(:theme)
+      theme.merge! theme_file if theme_file.present?
+      theme
+    end
+
+    def theme_file
+      theme_paths.detect(&:exist?)&.to_s
+    end
+
+    def theme_paths
+      virtual_path = self.virtual_path.gsub %r{^/}, ""
+      app_directory = Rails.root.join(ViewComponent::Base.view_component_path, File.dirname(virtual_path))
+      directory = File.dirname(source_location)
+      filename = File.basename(source_location, ".rb")
+      component_name = name.demodulize.underscore
+
+      sidecar_theme_files(app_directory, filename, component_name) +
+        sidecar_theme_files(directory, filename, component_name)
+    end
+
+    private
+
+    def sidecar_theme_files(directory, filename, component_name)
+      directory = Pathname(directory) unless directory.is_a? Pathname
+
+      files = [
+        directory.join("#{component_name}.theme.yml"),          # Sidecar theme file
+        directory.join(component_name, "#{filename}.theme.yml") # Sidecar directory file
+      ]
+
+      # Support nested components
+      if name.include?("::") && component_name != filename
+        files << directory.join(filename, "#{component_name}.theme.yml")
+      end
+
+      files
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module FoxTail::Concerns::Placeholderable
+  extend ActiveSupport::Concern
+
+  included do
+    has_option :placeholder
+  end
+
+  def placeholder?
+    !!placeholder.presence
+  end
+
+  def before_render
+    super
+
+    html_attributes[:placeholder] = retrieve_placeholder if placeholder?
+  end
+
+  protected
+
+  def retrieve_placeholder
+    return placeholder if placeholder.is_a? String
+    return nil unless object_name? && method_name?
+
+    value = placeholder unless placeholder.is_a? TrueClass
+    placeholder_translator(value: value).translate || default_placeholder
+  end
+
+  def default_placeholder
+    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 placeholder_translator(value: nil)
+    translator value: value, scope: "helpers.placeholder"
+  end
+end

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

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

data/app/components/fox_tail/dialog_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class FoxTail::DialogComponent < FoxTail::SurfaceComponent
+  renders_one :header, lambda { |options = {}, &block|
+    options[:class] = classnames theme.apply(:header, self), options[:class]
+    content_tag :div, options, &block
+  }
+
+  renders_one :body, lambda { |options = {}, &block|
+    options[:class] = classnames theme.apply(:body, self), options[:class]
+    content_tag :div, options, &block
+  }
+
+  renders_one :footer, lambda { |options = {}, &block|
+    options[:class] = classnames theme.apply(:footer, self), options[:class]
+    content_tag :div, options, &block
+  }
+
+  def initialize(html_attributes = {})
+    html_attributes[:border] = false unless html_attributes.key? :border
+    super(html_attributes)
+  end
+
+  def hover?
+    false
+  end
+
+  def tag_name
+    :div
+  end
+end

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

@@ -0,0 +1,11 @@
+header:
+  base: >-
+    flex items-start justify-between p-4 rounded-t-lg
+    text-gray-900 dark:text-white
+    border-b border-gray-200 dark:border-gray-700
+body:
+  base: p-6 text-gray-500 dark:text-gray-400
+footer:
+  base: >-
+    flex items-center justify-end gap-2 rounded-b-lg p-6
+    border-t border-gray-200 dark:border-gray-700

data/app/components/fox_tail/dismissible_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class FoxTail::DismissibleComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  has_option :remove, default: false, type: :boolean
+  has_option :auto_close, default: false, type: :boolean
+  has_option :delay, default: 3000
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :div, content, html_attributes
+  end
+
+  def stimulus_controller_options
+    {
+      remove: remove?,
+      auto_close: auto_close?,
+      delay: delay,
+      dismissing_classes: theme.apply("root/dismissing", self),
+      dismissed_classes: theme.apply("root/dismissed", self)
+    }
+  end
+
+  class << self
+    def stimulus_controller_name
+      :dismissible
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def attributes(options = {})
+      attributes = super options
+      attributes[:data][value_key(:remove)] = options[:remove]
+      attributes[:data][value_key(:auto_close)] = options[:auto_close]
+      attributes[:data][value_key(:delay)] = options[:delay]
+      attributes[:data][classes_key(:dismissing)] = options[:dismissing_classes]
+      attributes[:data][classes_key(:dismissed)] = options[:dismissed_classes]
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+root/dismissing:
+  base: transition-opacity duration-300 ease-out opacity-0
+root/dismissed:
+  base: hidden