fox_tail 0.1.0 → 0.2.0

data/app/components/fox_tail/radio_button_component.rb

@@ -1,17 +1,53 @@
 # frozen_string_literal: true
 
 class FoxTail::RadioButtonComponent < 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 :checked, as: :boolean, default: false
+  has_option :controlled, type: :boolean, default: false
+
+  def value
+    options[:value] ||= value_from_object
+  end
+
+  def checked?
+    return !!options[:checked] if options.key? :checked
+    return false if object.blank?
+
+    value.to_s == value_from_object.to_s
+  end
+
+  def use_stimulus?
+    super && controlled?
+  end
+
+  def stimulus_controller_options
+    {}
+  end
 
   def before_render
     super
 
+    add_default_name_and_id_for_value value
     html_attributes[:type] = :radio
     html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    html_attributes[:value] = value
+    html_attributes[:checked] = checked?
   end
 
   def call
-    tag :input, html_attributes
+    tag.input(html_attributes)
   end
+
+  class << self
+    def stimulus_controller_name
+      "form-field"
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController; end
 end

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

@@ -3,13 +3,11 @@ root:
     bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600
     focus:ring-2 dark:ring-offset-gray-800
   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
+    primary: &default 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: *default
   size:
     sm: w-3 h-3

data/app/components/fox_tail/range_component.rb

@@ -22,6 +22,6 @@ class FoxTail::RangeComponent < FoxTail::BaseComponent
   end
 
   def call
-    tag :input, html_attributes
+    tag.input(html_attributes)
   end
 end

data/app/components/fox_tail/search_filtering_controller.ts

@@ -0,0 +1,164 @@
+import { Controller } from '@hotwired/stimulus';
+
+import FlexSearch from 'flexsearch';
+import { v4 as uuid } from 'uuid';
+
+import debounce from '../../../src/utilities/debounce';
+import useEventListeners from '../../../src/mixins/use_event_listeners';
+
+export default class extends Controller {
+    static classes = ['visible', 'hidden'];
+    static targets = ['input', 'searchable', 'group', 'empty'];
+
+    static values = {
+        preset: { type: String, default: 'memory' },
+        tokenize: { type: String, default: 'forward' },
+        limit: { type: Number, default: 100 },
+        length: { type: Number, default: 2 },
+        delay: { type: Number, default: 320 },
+    };
+
+    declare readonly visibleClasses: string[];
+    declare readonly hiddenClasses: string[];
+    declare readonly inputTarget: HTMLInputElement;
+    declare readonly searchableTargets: HTMLElement[];
+    declare readonly groupTargets: HTMLElement[];
+    declare readonly emptyTarget: HTMLElement;
+    declare readonly presetValue: string;
+    declare readonly tokenizeValue: string;
+    declare readonly lengthValue: number;
+    declare readonly limitValue: number;
+    declare readonly delayValue: number;
+
+    private _index: FlexSearch.Index = null;
+
+    searchableTargetConnected(target: HTMLElement) {
+        this.addSearchable(target);
+    }
+
+    searchableTargetDisconnected(target: HTMLElement) {
+        this.removeSearchable(target);
+    }
+
+    groupTargetConnected(target: HTMLElement) {
+        target.setAttribute('aria-hidden', 'false');
+    }
+
+    connect() {
+        super.connect();
+
+        this._index = new FlexSearch.Index({
+            preset: this.presetValue as FlexSearch.Preset,
+            tokenize: this.tokenizeValue as FlexSearch.Tokenizer,
+        });
+
+        this.searchableTargets.forEach((element) =>
+            this.addSearchable(element),
+        );
+
+        useEventListeners(
+            this,
+            this.inputTarget,
+            'input',
+            debounce(this.search.bind(this), this.delayValue),
+            { attached: true, passive: true },
+        );
+
+        useEventListeners(
+            this,
+            this.inputTarget,
+            'search',
+            this.clear.bind(this),
+            { attached: true, passive: true },
+        );
+    }
+
+    disconnect() {
+        super.disconnect();
+
+        this._index = null;
+    }
+
+    clear() {
+        this.reset();
+        this.inputTarget.value = '';
+    }
+
+    private addSearchable(element: HTMLElement) {
+        if (!this._index) {
+            return;
+        }
+
+        if (!element.id) {
+            element.id = uuid();
+        }
+
+        element.setAttribute('aria-hidden', 'false');
+
+        this._index.add(element.id, element.textContent);
+    }
+
+    private removeSearchable(element: HTMLElement) {
+        if (!this._index || !element.id) {
+            return;
+        }
+
+        this._index.remove(element.id);
+    }
+
+    private async search() {
+        const value = this.inputTarget.value.trimStart();
+
+        if (value.length >= this.lengthValue) {
+            const result = await this._index.searchAsync(
+                value,
+                this.limitValue,
+            );
+
+            const hashedIds = result.reduce<any>((h, id) => {
+                h[id] = true;
+                return h;
+            }, {});
+
+            this.searchableTargets.forEach((element) => {
+                if (element.id) {
+                    this.toggleVisibility(element, hashedIds[element.id]);
+                }
+            });
+
+            this.groupTargets.forEach((element) => {
+                const visible = element.querySelector(
+                    `[${this.context.schema.targetAttributeForScope(
+                        this.identifier,
+                    )}~="searchable"][aria-hidden="false"]`,
+                );
+
+                this.toggleVisibility(element, !!visible);
+            });
+
+            this.toggleVisibility(this.emptyTarget, result.length === 0);
+        } else {
+            this.reset();
+        }
+    }
+
+    private reset() {
+        this.searchableTargets.forEach((element) =>
+            this.toggleVisibility(element, true),
+        );
+
+        this.toggleVisibility(this.emptyTarget, false);
+    }
+
+    private toggleVisibility(element: HTMLElement, visible: boolean) {
+        if (visible) {
+            element.classList.add(...this.visibleClasses);
+            element.classList.remove(...this.hiddenClasses);
+            element.setAttribute('aria-hidden', 'false');
+        } else {
+            element.classList.add(...this.hiddenClasses);
+            element.classList.remove(...this.visibleClasses);
+            element.setAttribute('aria-hidden', 'true');
+        }
+    }
+}

data/app/components/fox_tail/select_component.rb

@@ -1,11 +1,15 @@
 # frozen_string_literal: true
 
 class FoxTail::SelectComponent < FoxTail::InputBaseComponent
+  include FoxTail::Concerns::Placeholderable
+  include FoxTail::Concerns::Choosable
+
   has_option :disabled, type: :boolean, default: false
   has_option :value
   has_option :include_hidden, type: :boolean, default: true
+  has_option :include_blank, type: :boolean, default: false
 
-  renders_one :placeholder, lambda { |text, selected: false, disabled: true|
+  renders_one :prompt, lambda { |text, selected: false, disabled: true|
     FoxTail::Select::OptionComponent.new("", disabled: disabled, selected: selected).with_content(text)
   }
 
@@ -20,7 +24,7 @@ class FoxTail::SelectComponent < FoxTail::InputBaseComponent
     group: {
       as: :select_group,
       renders: lambda { |label, options = {}|
-        options[:selected_value] = self.value
+        options[:selected_value] = value
         FoxTail::Select::OptionGroupComponent.new label, options
       }
     }
@@ -35,6 +39,14 @@ class FoxTail::SelectComponent < FoxTail::InputBaseComponent
 
     html_attributes[:class] = classnames theme.apply(:root, self), html_class
     html_attributes[:multiple] = :multiple if html_attributes[:multiple]
+
+    if placeholder?
+      with_prompt retrieve_placeholder, selected: value_from_object.nil?
+    elsif include_blank?
+      with_prompt "", disabled: false, selected: value_from_object.nil?
+    end
+
+    add_choices
   end
 
   def call
@@ -54,15 +66,28 @@ class FoxTail::SelectComponent < FoxTail::InputBaseComponent
     true
   end
 
+  def add_choice(value, label, options = {})
+    with_select_option(value, options).with_content(label)
+  end
+
+  def add_choice_group(label, choices)
+    with_select_group label do |group|
+      choices.each do |choice|
+        text, value, options = extract_choice_values choice
+        group.with_group_option(value, options).with_content(text)
+      end
+    end
+  end
+
   private
 
   def render_hidden
-    tag :input, disabled: disabled?, name: html_attributes[:name], type: :hidden, value: "", autocomplete: :off
+    tag.input(disabled: disabled?, name: html_attributes[:name], type: :hidden, value: "", autocomplete: :off)
   end
 
   def render_select
     content_tag :select, html_attributes do
-      concat placeholder if placeholder?
+      concat prompt if prompt?
       select_options.each { |select_option| concat select_option } if select_options?
       concat content if content?
     end

data/app/components/fox_tail/show_password_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class FoxTail::ShowPasswordComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+
+  has_option :for, as: :input_id
+
+  def input_id
+    options[:input_id] ||= tag_id
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    render FoxTail::PasswordInputTriggerComponent.new("##{input_id}", html_attributes) do |trigger|
+      content_tag :button, trigger.html_attributes.merge(type: :button) do
+        concat render_content(:hidden, text(:show), :eye)
+        concat render_content(:visible, text(:hide), :eye_slash)
+      end
+    end
+  end
+
+  private
+
+  def text(key)
+    t key, scope: "helpers.show_password", default: key.to_s.humanize
+  end
+
+  def render_content(state, text, icon)
+    classes = classnames theme.apply(:container, self), theme.apply("container/#{state}", self)
+
+    content_tag :div, class: classes do
+      concat render(FoxTail::IconBaseComponent.new(icon, class: theme.apply(:icon, self), "aria-hidden": true))
+      concat content_tag(:span, text)
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+root:
+  base: group block text-sm font-medium text-primary-600 dark:text-primary-500 hover:underline
+container:
+  base: inline-flex flex-row items-center gap-1
+container/visible:
+  base: hidden group-[.password-visible]:inline-flex
+container/hidden:
+  base: group-[.password-visible]:hidden
+icon:
+  base: w-4 h-4

data/app/components/fox_tail/sidebar/menu_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class FoxTail::Sidebar::MenuComponent < FoxTail::BaseComponent
+  renders_one :title
+
+  renders_many :items, lambda { |options = {}|
+    options[:theme] = theme.theme :menu_item
+    FoxTail::Sidebar::MenuItemComponent.new options
+  }
+
+  def render?
+    items?
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :div, class: theme.apply(:container, self) do
+      concat render_title if title?
+      concat render_menu
+    end
+  end
+
+  private
+
+  def render_title
+    content_tag :h3, title, class: theme.apply(:title, self)
+  end
+
+  def render_menu
+    content_tag :ul, html_attributes do
+      items.each { |item| concat item }
+    end
+  end
+end

data/app/components/fox_tail/sidebar/menu_item_component.rb

@@ -0,0 +1,133 @@
+# frozen_string_literal: true
+
+class FoxTail::Sidebar::MenuItemComponent < FoxTail::ClickableComponent
+  renders_one :left_visual, types: {
+    icon: {
+      as: :left_icon,
+      renders: lambda { |icon, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, {position: :left, type: :svg}),
+          options[:class]
+
+        FoxTail::IconBaseComponent.new icon, options
+      }
+    },
+    svg: {
+      as: :left_svg,
+      renders: lambda { |path, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, {position: :left, type: :svg}),
+          options[:class]
+
+        FoxTail::InlineSvgComponent.new path, options
+      }
+    },
+    image: {
+      as: :left_image,
+      renders: lambda { |source, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, {position: :left, type: :image}),
+          options[:class]
+
+        image_tag source, options
+      }
+    }
+  }
+
+  renders_one :right_visual, types: {
+    icon: {
+      as: :right_icon,
+      renders: lambda { |icon, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, {position: :right, type: :icon}),
+          options[:class]
+
+        FoxTail::IconBaseComponent.new icon, options
+      }
+    },
+    svg: {
+      as: :right_svg,
+      renders: lambda { |path, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, {position: :right, type: :svg}),
+          options[:class]
+
+        FoxTail::InlineSvgComponent.new path, options
+      }
+    },
+    image: {
+      as: :right_image,
+      renders: lambda { |source, options = {}|
+        options[:class] = classnames theme.apply(:visual, self, {position: :right, type: :image}),
+          options[:class]
+        image_tag source, options
+      }
+    },
+    badge: {
+      as: :badge,
+      renders: lambda { |options = {}|
+        options[:class] = classnames theme.apply(:visual, self, {position: :right, type: :badge}),
+          options[:class]
+
+        FoxTail::BadgeComponent.new options
+      }
+    }
+  }
+
+  renders_one :menu, lambda { |options = {}|
+    options[:theme] = theme.theme :menu
+    options[:id] = menu_id
+    FoxTail::Sidebar::MenuComponent.new options
+  }
+
+  has_option :id
+  has_option :menu_id
+  has_option :selected, type: :boolean, default: false
+
+  def initialize(html_attributes = {})
+    super
+
+    options[:id] ||= "menu_item_#{SecureRandom.alphanumeric 16}"
+    options[:menu_id] ||= "#{options[:id]}_menu"
+  end
+
+  def link?
+    menu? ? false : super
+  end
+
+  def before_render
+    super
+
+    if menu?
+      with_right_icon "chevron-down" unless right_visual
+    end
+  end
+
+  def call
+    content_tag :li do
+      if menu?
+        concat render_collapsible_trigger
+        concat render_menu
+      else
+        render_item
+      end
+    end
+  end
+
+  private
+
+  def render_collapsible_trigger
+    render FoxTail::CollapsibleTriggerComponent.new id, "##{menu_id}", open: selected?, theme: theme do |trigger|
+      render_item trigger.html_attributes
+    end
+  end
+
+  def render_item(attributes = {})
+    attributes = stimulus_merger.merge_attributes html_attributes, attributes
+
+    content_tag root_tag_name, attributes do
+      concat left_visual if left_visual?
+      concat content_tag(:span, content, class: theme.apply(:content, self))
+      concat right_visual if right_visual?
+    end
+  end
+
+  def render_menu
+    render FoxTail::CollapsibleComponent.new(menu_id, open: selected?).with_content(menu)
+  end
+end

data/app/components/fox_tail/sidebar_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class FoxTail::SidebarComponent < FoxTail::BaseComponent
+  renders_one :header
+
+  renders_many :menus, lambda { |options = {}|
+    options[:theme] = theme.theme :menu
+
+    FoxTail::Sidebar::MenuComponent.new options
+  }
+
+  renders_one :divider, lambda { |options = {}|
+    options[:class] = classnames theme.apply(:divider, self), options[:class]
+
+    FoxTail::HrComponent.new options
+  }
+
+  has_option :dividers, type: :boolean, default: true
+
+  def before_render
+    super
+
+    with_divider if !divider && dividers?
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      concat header if header?
+      concat render_menus if menus?
+    end
+  end
+
+  private
+
+  def render_menus
+    content_tag :div, class: theme.apply(:menu_container, self) do
+      menus.each_with_index do |menu, index|
+        concat divider if divider? && !index.zero?
+        concat menu
+      end
+    end
+  end
+
+  class << self
+    def stimulus_controller_name
+      :drawer
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+menu_container:
+  dividers?: divider-y divider-gray-200 dark:divider-gray-700 space-y-4
+_menu_item: &menu_item
+  root:
+    base: &menu_item_root_base >-
+      flex items-center gap-3 w-full p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group
+    selected?: bg-gray-100 dark:bg-gray-700
+  content:
+    base: truncate whitespace-nowrap flex-grow-1 flex-shrink-1
+    selected?: font-semibold
+  visual:
+    position:
+      left: w-5 h-5 text-gray-500
+      right: ml-auto
+menu:
+  root:
+    base: space-y-2 font-medium
+  container:
+    base: space-y-2
+  title:
+    base: text-sm font-medium uppercase text-gray-500
+  menu_item:
+    <<: *menu_item
+    menu:
+      root:
+        base: py-2 space-y-2
+      menu_item:
+        <<: *menu_item
+        root:
+          base: !concat [*menu_item_root_base, "pl-11"]

data/app/components/fox_tail/spinner_component.rb

@@ -6,7 +6,7 @@ class FoxTail::SpinnerComponent < FoxTail::InlineSvgComponent
 
   def initialize(html_attributes = {})
     path = html_attributes.delete(:path) { self.class.spinner_path }
-    super path, html_attributes
+    super(path, html_attributes)
   end
 
   def before_render

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

@@ -2,13 +2,11 @@ root:
   base: animate-spin text-gray-200 dark:text-gray-600
   color:
     neutral: fill-gray-600 dark:fill-gray-300
-    blue: &default fill-blue-600
-    red: fill-red-600
-    green: fill-green-500
-    yellow: fill-yellow-400
-    indigo: fill-indigo-600
-    purple: fill-purple-600
-    pink: fill-pink-600
+    primary: &default fill-primary-600
+    info: fill-info-600
+    success: fill-success-500
+    warning: fill-warning-400
+    danger: fill-danger-600
     default: *default
   size:
     xs: w-2.5 h-2.5

data/app/components/fox_tail/stepper/step_component.rb

@@ -15,13 +15,11 @@ class FoxTail::Stepper::StepComponent < FoxTail::BaseComponent
     svg: {
       as: :svg,
       renders: lambda { |path, options = {}|
-
       }
     },
     image: {
       as: :image,
       renders: lambda { |source, options = {}|
-
       }
     }
   }

data/app/components/fox_tail/stepper_component.rb

@@ -11,7 +11,7 @@ class FoxTail::StepperComponent < FoxTail::BaseComponent
   has_option :variant, default: :default
 
   def initialize(html_attributes = {})
-    super(html_attributes)
+    super
 
     @index = 0
   end