fox_tail 0.1.1 → 0.2.0

data/app/components/fox_tail/filter_bar_component.rb

@@ -0,0 +1,213 @@
+# frozen_string_literal: true
+
+class FoxTail::FilterBarComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Identifiable
+
+  renders_many :hidden_fields, lambda { |name, value = nil, options = {}|
+    hidden_field_tag name, value, options
+  }
+
+  renders_many :static_filters, types: {
+    keyword: {
+      as: :static_keyword_filter,
+      renders: lambda { |name, options = {}| keyword_filter_component name, options }
+    },
+    autocomplete: {
+      as: :static_autocomplete_filter,
+      renders: lambda { |name, url, options = {}| autocomplete_filter_component name, url, options }
+    },
+    select_input: {
+      as: :static_select_filter,
+      renders: lambda { |name, options = {}| select_filter_component name, options }
+    },
+    button: {
+      as: :static_button_filter,
+      renders: lambda { |options = {}| button_filter_component options }
+    }
+  }
+
+  renders_many :filters, types: {
+    keyword: {
+      as: :keyword_filter,
+      renders: lambda { |name, options = {}| keyword_filter_component name, options }
+    },
+    autocomplete: {
+      as: :autocomplete_filter,
+      renders: lambda { |name, url, options = {}| autocomplete_filter_component name, url, options }
+    },
+    select_input: {
+      as: :select_filter,
+      renders: lambda { |name, options = {}| select_filter_component name, options }
+    },
+    button: {
+      as: :button_filter,
+      renders: lambda { |options = {}| button_filter_component options }
+    }
+  }
+
+  renders_one :filter_toggle, types: {
+    icon_button: {
+      as: :filter_icon_button_trigger,
+      renders: lambda { |options = {}, &block|
+        icon = options.delete(:icon) { :funnel }
+
+        render_filter_button_toggle :icon_button, options, block do |attributes|
+          FoxTail::IconButtonComponent.new icon, attributes
+        end
+      }
+    },
+    button: {
+      as: :filter_button_trigger,
+      renders: lambda { |options = {}, &block|
+        render_filter_button_toggle :button, options, block do |attributes|
+          FoxTail::ButtonComponent.new attributes
+        end
+      }
+    },
+    trigger: {
+      as: :filter_trigger,
+      renders: lambda { |options = {}|
+        type = options.delete(:type) || :custom
+        options[:class] = filter_toggle_classnames type, options
+        filter_trigger_component options
+      }
+    }
+  }
+
+  renders_many :submit_buttons, types: {
+    button: {
+      as: :submit_button,
+      renders: lambda { |options = {}|
+        options[:type] = :submit
+        options[:size] = size
+        options[:class] = submit_classnames :button, options
+        FoxTail::ButtonComponent.new options
+      }
+    },
+    icon_button: {
+      as: :submit_icon_button,
+      renders: lambda { |options = {}|
+        icon = options.delete(:icon) { :magnifying_glass }
+        options[:type] = :submit
+        options[:size] = size
+        options[:class] = submit_classnames :icon_button, options
+        FoxTail::IconButtonComponent.new icon, options
+      }
+    }
+  }
+
+  has_option :url
+  has_option :turbo, type: :boolean, default: false
+  has_option :size, default: :sm
+  has_option :params
+
+  def initialize(html_attributes = {})
+    super
+  end
+
+  def url
+    options[:url] ||= request.path
+  end
+
+  def params
+    options[:params] ||= view_context.try(:params)
+  end
+
+  def before_render
+    super
+
+    with_submit_button.with_content(t(".submit")) unless submit_buttons?
+    with_filter_icon_button_trigger unless filter_toggle?
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    html_attributes[:method] ||= :get
+  end
+
+  def keyword_filter_component(name, options = {})
+    add_default_filter_options name, :keyword, options
+    icon = options.delete(:icon) { :magnifying_glass }
+    component = FoxTail::InputComponent.new options
+    component.with_left_icon icon if icon.present?
+    component
+  end
+
+  def autocomplete_filter_component(name, url, options = {})
+    add_default_filter_options name, :autocomplete, options
+    FoxTail::AutocompleteComponent.new url, options
+  end
+
+  def select_filter_component(name, options = {})
+    add_default_filter_options name, :select, options
+    FoxTail::SelectComponent.new options
+  end
+
+  def button_filter_component(options = {})
+    options[:color] ||= :neutral
+    options[:size] = size
+    options[:class] = filter_classnames :button, options
+
+    FoxTail::ButtonComponent.new(options)
+  end
+
+  def filter_trigger_component(options = {})
+    FoxTail::CollapsibleTriggerComponent.new "##{collapsible_id}", options
+  end
+
+  def collapsible_id
+    "#{id}_collapsible"
+  end
+
+  private
+
+  def filter_classnames(type, options)
+    classnames theme.apply(:filter, self), theme.apply("#{type}_filter", self), options[:class]
+  end
+
+  def filter_toggle_classnames(type, options)
+    classnames theme.apply(:filter, self),
+      theme.apply("#{type}_filter", self),
+      theme.apply(:filter_toggle, self),
+      theme.apply("filter_toggle_#{type}", self),
+      options[:class]
+  end
+
+  def submit_classnames(type, options)
+    classnames theme.apply(:filter, self),
+      theme.apply("#{type}_filter", self),
+      theme.apply(:submit, self),
+      theme.apply("submit_#{type}", self),
+      options[:class]
+  end
+
+  def add_default_filter_options(name, type, options)
+    options[:name] = options[:multiple] ? "#{name}[]" : name
+    options[:value] ||= params[name]
+    options[:class] = filter_classnames type, options
+    options[:size] = size
+    options
+  end
+
+  def render_filter_button_toggle(type, options, block)
+    indicator = options.delete :indicator
+    text = options.delete(:text) { t(".filter_toggle") }
+    options[:size] = size
+    options[:color] ||= :light
+    options[:class] = filter_toggle_classnames type, options
+
+    render filter_trigger_component(options) do |trigger|
+      render yield(trigger.html_attributes) do |button|
+        if indicator.is_a? TrueClass
+          button.with_dot_indicator
+        elsif indicator.present?
+          button.with_badge_indicator_content indicator
+        end
+
+        if block
+          capture(button, &block).presence || text
+        else
+          text
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+root:
+  base: flex flex-col lg:inline-flex lg:flex-row lg:flex-wrap lg:items-center gap-2 lg:gap-3
+filter:
+  base: w-full lg:w-32
+  size:
+    sm: h-10
+    base: h-11
+    lg: h-16
+filters:
+  base: w-full lg:w-auto flex lg:flex flex-col lg:flex-row lg:items-center gap-2 lg:gap-3
+static_filters:
+  base: flex flex-col lg:flex-row lg:items-center gap-2 lg:gap-3
+controls:
+  base: flex flex-row items-center gap-2 lg:gap-3 ml-auto lg:ml-0 lg:order-last
+icon_button_filter:
+  base: flex items-center justify-center
+  size:
+    sm: w-10 lg:w-10
+    base: w-11 lg:w-11
+    lg: w-16 lg:w-16
+button_filter:
+  base: w-full lg:w-auto flex items-center
+filter_toggle:
+  base: lg:hidden

data/app/components/fox_tail/filter_summary_component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+class FoxTail::FilterSummaryComponent < FoxTail::BaseComponent
+  renders_many :filters, lambda { |name, options = {}|
+    param_names << name.to_s
+    filter_options = options.extract! :value
+    dismiss_options = options.extract! :icon, :variant, :url
+    dismiss_options[:url] ||= remove_filter_url(name, filter_options)
+    options[:size] = size
+    options[:color] ||= color
+
+    FoxTail::WrapperComponent.new options do |wrapped|
+      render FoxTail::BadgeComponent.new(wrapped.html_attributes) do |badge|
+        badge.with_dismiss_icon(dismiss_options).with_content(t(".remove", default: "Remove"))
+        wrapped.content
+      end
+    end
+  }
+
+  renders_one :clear_button, types: {
+    button: {
+      as: :clear_button,
+      renders: lambda { |options = {}|
+        options[:class] = classnames theme.apply(:clear_button, self), options[:class]
+        options[:size] ||= :xs
+        options[:url] ||= clear_url
+        FoxTail::ButtonComponent.new options
+      }
+    },
+    text: {
+      as: :clear_link,
+      renders: lambda { |options = {}|
+        url = options.delete(:url) { clear_url }
+        options[:class] = classnames theme.apply(:clear_text, self), options[:class]
+        FoxTail::LinkComponent.new url, options
+      }
+    }
+  }
+
+  has_option :color, default: :default
+  has_option :size, default: :base
+  has_option :url
+  has_option :params
+  has_option :param_names, default: []
+
+  def url
+    options[:url] ||= request.original_fullpath
+  end
+
+  def render?
+    filters?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      filters.each { |filter| concat filter }
+      concat clear_button if clear_button?
+    end
+  end
+
+  def clear_url
+    uri = URI(url)
+    params = Rack::Utils.parse_nested_query uri.query
+    param_names.each { |name| params.delete name.to_s }
+    uri.query = Rack::Utils.build_nested_query params
+    uri.to_s
+  end
+
+  def remove_filter_url(name, options = {})
+    uri = URI(url)
+    params = Rack::Utils.parse_nested_query uri.query
+    remove_filter params, name, options
+    uri.query = Rack::Utils.build_nested_query params
+    uri.to_s
+  end
+
+  def remove_filter(params, name, options = {})
+    return params.delete(name.to_s) unless options.key? :value
+
+    params[name.to_s]&.delete options[:value].to_s
+  end
+end

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

@@ -0,0 +1,8 @@
+root:
+  base: flex flex-row flex-wrap items-center gap-2 lg:gap-3
+clear_text:
+  base: font-normal
+  size:
+    base: text-xs
+    sm: text-sm
+

data/app/components/fox_tail/form_controller.ts

@@ -0,0 +1,155 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller<HTMLFormElement> {
+    static values = {
+        enabled: {
+            type: Boolean,
+            default: true,
+        },
+    };
+
+    declare readonly listenerTargets: HTMLElement[];
+    declare enabledValue: boolean;
+
+    private _valid: boolean = true;
+
+    get useTurbo() {
+        return (
+            typeof (window as any).Turbo !== 'undefined' &&
+            (!this.element.hasAttribute('data-turbo') ||
+                this.element.dataset.turbo)
+        );
+    }
+
+    get isValid(): boolean {
+        return this._valid;
+    }
+
+    connect() {
+        this._valid = this.element.checkValidity();
+
+        if (this.useTurbo) {
+            this.element.addEventListener(
+                'turbo:submit-start',
+                this.handleTurboSubmitStarted.bind(this),
+            );
+
+            this.element.addEventListener(
+                'turbo:submit-end',
+                this.handleTurboSubmitEnded.bind(this),
+            );
+        } else {
+            this.element.addEventListener(
+                'submit',
+                this.handleSubmit.bind(this),
+            );
+        }
+    }
+
+    disconnect() {
+        if (this.useTurbo) {
+            this.element.removeEventListener(
+                'turbo:submit-start',
+                this.handleTurboSubmitStarted.bind(this),
+            );
+
+            this.element.removeEventListener(
+                'turbo:submit-end',
+                this.handleTurboSubmitEnded.bind(this),
+            );
+        } else {
+            this.element.removeEventListener(
+                'submit',
+                this.handleSubmit.bind(this),
+            );
+        }
+    }
+
+    submit() {
+        this.element.submit();
+    }
+
+    requestSubmit() {
+        this.element.requestSubmit();
+    }
+
+    enable() {
+        this.enabledValue = true;
+    }
+
+    disable() {
+        this.enabledValue = false;
+    }
+
+    validate() {
+        this.updateValidity(this.element.checkValidity());
+    }
+
+    reportValidity() {
+        this.updateValidity(this.element.reportValidity());
+    }
+
+    reset() {
+        this.element.reset();
+        this.dispatch('reset');
+    }
+
+    enabledValueChanged() {
+        const eventName = this.enabledValue ? 'enabled' : 'disabled';
+        this.dispatch(eventName);
+    }
+
+    private handleSubmit(event: Event) {
+        if (!this.enabledValue || this.onSubmit()) {
+            event.preventDefault();
+        }
+    }
+
+    private handleTurboSubmitStarted(event: any) {
+        if (!this.enabledValue || this.onSubmit()) {
+            event.detail.formSubmission.stop();
+        }
+    }
+
+    private handleTurboSubmitEnded(event: any) {
+        const { success, fetchResponse, error } = event.detail;
+
+        if (success) {
+            this.onSuccess(fetchResponse.response);
+            this.onFinished(true, fetchResponse.response, null);
+        } else {
+            this.onFailed(error);
+            this.onFinished(false, null, error);
+        }
+    }
+
+    private onSubmit(): boolean {
+        return this.dispatch('submit', { cancelable: true }).defaultPrevented;
+    }
+
+    private onSuccess(response: Response) {
+        this.dispatch('success', { detail: { response } });
+    }
+
+    private onFailed(error: Error) {
+        this.dispatch('failed', { detail: { error } });
+    }
+
+    private onFinished(
+        success: boolean,
+        response: Response | null,
+        error: Error | null,
+    ) {
+        this.dispatch('finished', { detail: { success, response, error } });
+    }
+
+    private updateValidity(valid: boolean): void {
+        if (this._valid == valid) {
+            return;
+        }
+
+        this._valid = valid;
+        const eventName = valid ? 'valid' : 'invalid';
+        this.dispatch(eventName);
+    }
+}

data/app/components/fox_tail/form_field_controller.ts

@@ -0,0 +1,46 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller<
+    HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+> {
+    private _valid: boolean = true;
+
+    get isValid(): boolean {
+        return this.element.checkValidity();
+    }
+
+    get disabled(): boolean {
+        return this.element.disabled;
+    }
+
+    connect() {
+        super.connect();
+
+        this._valid = this.element.checkValidity();
+    }
+
+    enable() {
+        this.element.disabled = false;
+    }
+
+    disable() {
+        this.element.disabled = true;
+    }
+
+    validate() {
+        this.updateValidity(this.isValid);
+    }
+
+    reportValidation() {
+        this.updateValidity(this.element.reportValidity());
+    }
+
+    private updateValidity(valid: boolean) {
+        if (this._valid == valid) {
+            return;
+        }
+
+        this._valid = valid;
+        this.dispatch(valid ? 'valid' : 'invalid');
+    }
+}

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

@@ -1,5 +1,5 @@
 root:
   base: text-sm text-gray-500 dark:text-gray-400
   state:
-    valid: text-green-600 dark:text-green-500
-    invalid: text-red-600 dark:text-red-500
+    valid: text-success-600 dark:text-success-500
+    invalid: text-danger-600 dark:text-danger-500

data/app/components/fox_tail/history_controller.ts

@@ -0,0 +1,116 @@
+import { Controller } from '@hotwired/stimulus';
+
+import useEventListeners from '../../../src/mixins/use_event_listeners';
+import { v4 as uuid } from 'uuid';
+
+export default class extends Controller {
+    static values = {
+        path: String,
+        title: String,
+    };
+
+    declare readonly pathValue: string;
+    declare readonly titleValue: string;
+    declare readonly hasTitleValue: boolean;
+
+    private _pushed: boolean = false;
+    private _id: string = uuid();
+    private _previousTurboRestorationIdentifier: string = null;
+
+    get turbo(): any {
+        return (window as any).Turbo;
+    }
+
+    connect() {
+        super.connect();
+
+        useEventListeners(
+            this,
+            window,
+            'popstate',
+            (event: PopStateEvent) => {
+                const { turbo, controller, title } = event.state;
+                const { restorationIdentifier } = turbo || {};
+
+                if (
+                    this._pushed &&
+                    (controller == this._id ||
+                        (restorationIdentifier &&
+                            restorationIdentifier ==
+                                this._previousTurboRestorationIdentifier))
+                ) {
+                    if (title) {
+                        document.title = '';
+                        document.title = title;
+                    }
+
+                    this._previousTurboRestorationIdentifier = null;
+                    this._pushed = false;
+                    this.onPopped();
+                }
+            },
+            { attached: true },
+        );
+    }
+
+    disconnect() {
+        super.disconnect();
+
+        this.pop();
+    }
+
+    push() {
+        if (this._pushed || this.onPush()) {
+            return;
+        }
+
+        if (this.turbo && this.turbo.session.drive) {
+            this._previousTurboRestorationIdentifier =
+                this.turbo.session.history.restorationIdentifier;
+
+            this.turbo.session.history.push(
+                new URL(this.pathValue, document.baseURI),
+                this._id,
+            );
+        } else {
+            history.pushState(
+                { controller: this._id, title: document.title },
+                '',
+                this.pathValue,
+            );
+        }
+
+        if (this.hasTitleValue) {
+            document.title = '';
+            document.title = this.titleValue;
+        }
+
+        this._pushed = true;
+
+        this.onPushed();
+    }
+
+    pop() {
+        if (!this._pushed || this.onPop()) {
+            return;
+        }
+
+        history.back();
+    }
+
+    protected onPush(): boolean {
+        return this.dispatch('pushing', { cancelable: true }).defaultPrevented;
+    }
+
+    protected onPushed() {
+        this.dispatch('pushed');
+    }
+
+    protected onPop(): boolean {
+        return this.dispatch('popping', { cancelable: true }).defaultPrevented;
+    }
+
+    protected onPopped() {
+        return this.dispatch('popped');
+    }
+}

data/app/components/fox_tail/hr_component.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 class FoxTail::HrComponent < FoxTail::BaseComponent
-
   has_option :size, default: :base
   has_option :shape, default: :none
   has_option :trimmed, default: false, type: :boolean
@@ -13,11 +12,11 @@ class FoxTail::HrComponent < FoxTail::BaseComponent
   def call
     content_tag :div, class: wrapper_classes do
       if content? && shape == :none
-        concat tag(:hr, class: hr_classes)
+        concat tag.hr(class: hr_classes)
         concat content_tag(:div, content, class: content_classes)
-        concat tag(:hr, class: hr_classes)
+        concat tag.hr(class: hr_classes)
       else
-        tag :hr, class: hr_classes
+        tag.hr(class: hr_classes)
       end
     end
   end