fox_tail 0.1.1 → 0.2.0

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

@@ -2,6 +2,7 @@
 
 class FoxTail::SelectComponent < FoxTail::InputBaseComponent
   include FoxTail::Concerns::Placeholderable
+  include FoxTail::Concerns::Choosable
 
   has_option :disabled, type: :boolean, default: false
   has_option :value
@@ -23,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
       }
     }
@@ -44,6 +45,8 @@ class FoxTail::SelectComponent < FoxTail::InputBaseComponent
     elsif include_blank?
       with_prompt "", disabled: false, selected: value_from_object.nil?
     end
+
+    add_choices
   end
 
   def call
@@ -63,10 +66,23 @@ 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

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

@@ -1,16 +1,13 @@
 # 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
   }
 
-  renders_one :menu, lambda { |options = {}|
-    options[:theme] = theme.theme :menu
-    FoxTail::Sidebar::MenuItemComponent.new options
-  }
-
   def render?
     items?
   end
@@ -22,6 +19,19 @@ class FoxTail::Sidebar::MenuComponent < FoxTail::BaseComponent
   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

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

@@ -5,8 +5,8 @@ class FoxTail::Sidebar::MenuItemComponent < FoxTail::ClickableComponent
     icon: {
       as: :left_icon,
       renders: lambda { |icon, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :left, type: :svg }),
-                                     options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :left, type: :svg}),
+          options[:class]
 
         FoxTail::IconBaseComponent.new icon, options
       }
@@ -14,8 +14,8 @@ class FoxTail::Sidebar::MenuItemComponent < FoxTail::ClickableComponent
     svg: {
       as: :left_svg,
       renders: lambda { |path, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :left, type: :svg }),
-                                     options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :left, type: :svg}),
+          options[:class]
 
         FoxTail::InlineSvgComponent.new path, options
       }
@@ -23,8 +23,8 @@ class FoxTail::Sidebar::MenuItemComponent < FoxTail::ClickableComponent
     image: {
       as: :left_image,
       renders: lambda { |source, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :left, type: :image }),
-                                     options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :left, type: :image}),
+          options[:class]
 
         image_tag source, options
       }
@@ -35,8 +35,8 @@ class FoxTail::Sidebar::MenuItemComponent < FoxTail::ClickableComponent
     icon: {
       as: :right_icon,
       renders: lambda { |icon, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :right, type: :icon }),
-                                     options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :right, type: :icon}),
+          options[:class]
 
         FoxTail::IconBaseComponent.new icon, options
       }
@@ -44,8 +44,8 @@ class FoxTail::Sidebar::MenuItemComponent < FoxTail::ClickableComponent
     svg: {
       as: :right_svg,
       renders: lambda { |path, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :right, type: :svg }),
-                                     options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :right, type: :svg}),
+          options[:class]
 
         FoxTail::InlineSvgComponent.new path, options
       }
@@ -53,16 +53,16 @@ class FoxTail::Sidebar::MenuItemComponent < FoxTail::ClickableComponent
     image: {
       as: :right_image,
       renders: lambda { |source, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :right, type: :image }),
-                                     options[:class]
+        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]
+        options[:class] = classnames theme.apply(:visual, self, {position: :right, type: :badge}),
+          options[:class]
 
         FoxTail::BadgeComponent.new options
       }
@@ -80,7 +80,7 @@ class FoxTail::Sidebar::MenuItemComponent < FoxTail::ClickableComponent
   has_option :selected, type: :boolean, default: false
 
   def initialize(html_attributes = {})
-    super(html_attributes)
+    super
 
     options[:id] ||= "menu_item_#{SecureRandom.alphanumeric 16}"
     options[:menu_id] ||= "#{options[:id]}_menu"
@@ -99,13 +99,13 @@ class FoxTail::Sidebar::MenuItemComponent < FoxTail::ClickableComponent
   end
 
   def call
-     content_tag :li do
-       if menu?
-         concat render_collapsible_trigger
-         concat render_menu
-       else
-         render_item
-       end
+    content_tag :li do
+      if menu?
+        concat render_collapsible_trigger
+        concat render_menu
+      else
+        render_item
+      end
     end
   end
 

data/app/components/fox_tail/sidebar_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class FoxTail::SidebarComponent < FoxTail::DrawerComponent
+class FoxTail::SidebarComponent < FoxTail::BaseComponent
   renders_one :header
 
   renders_many :menus, lambda { |options = {}|
@@ -21,10 +21,12 @@ class FoxTail::SidebarComponent < FoxTail::DrawerComponent
     super
 
     with_divider if !divider && dividers?
+
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
   end
 
   def call
-    super do
+    content_tag :div, html_attributes do
       concat header if header?
       concat render_menus if menus?
     end

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

@@ -4,16 +4,21 @@ _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 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white
+      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:

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

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

@@ -27,14 +27,14 @@ step:
           after:border-b after:border-4 after:border-gray-100 dark:after:border-gray-700
         state:
           pending:
-          completed: after:border-green-100 dark:after:border-green-800
+          completed: after:border-success-100 dark:after:border-success-800
           current:
       detailed:
         base: flex items-center text-gray-500 dark:text-gray-400 space-x-2.5
         state:
           pending:
-          completed: text-green-600 dark:text-green-500
-          current: text-blue-600 dark:text-blue-500
+          completed: text-success-600 dark:text-success-500
+          current: text-primary-600 dark:text-primary-500
       vertical:
         base: >-
           w-full p-4 flex items-center justify-between
@@ -44,19 +44,19 @@ step:
         state:
           pending:
           completed: >-
-            text-green-700 dark:text-green-400
-            border-green-300 dark:border-green-800
-            bg-green-50 dark:bg-gray-800
+            text-success-700 dark:text-success-400
+            border-success-300 dark:border-success-800
+            bg-success-50 dark:bg-gray-800
           current: >-
-            text-blue-700 dark:text-blue-400
-            bg-blue-100 dark:bg-gray-800
-            border-blue-300 dark:border-blue-800
+            text-primary-700 dark:text-primary-400
+            bg-primary-100 dark:bg-gray-800
+            border-primary-300 dark:border-primary-800
       breadcrumb: flex items-center group/step
       timeline: mb-10 ml-6
     state:
       pending:
-      completed: text-green-600 dark:text-green-500
-      current: text-blue-600 dark:text-blue-500
+      completed: text-success-600 dark:text-success-500
+      current: text-primary-600 dark:text-primary-500
   visual/container:
     base:
     variant:
@@ -69,8 +69,8 @@ step:
           text-gray-500 dark:text-gray-100
         state:
           pending:
-          completed: bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-300
-          current: bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300
+          completed: bg-success-100 dark:bg-success-800 text-success-600 dark:text-success-300
+          current: bg-primary-100 dark:bg-primary-800 text-primary-600 dark:text-primary-300
       detailed:
         base: >-
           flex items-center justify-center shrink-0
@@ -78,8 +78,8 @@ step:
           rounded-full border border-gray-500 dark:border-gray-400
         state:
           pending:
-          completed: border-green-600 dark:border-green-500
-          current: border-blue-600 dark:border-blue-500
+          completed: border-success-600 dark:border-success-500
+          current: border-primary-600 dark:border-primary-500
       vertical:
       breadcrumb:
         base: >-
@@ -88,8 +88,8 @@ step:
           rounded-full border border-gray-500 dark:border-gray-400
         state:
           pending:
-          completed: border-green-600 dark:border-green-500
-          current: border-blue-600 dark:border-blue-500
+          completed: border-success-600 dark:border-success-500
+          current: border-primary-600 dark:border-primary-500
       timeline:
         base: >-
           absolute flex items-center justify-center 
@@ -98,8 +98,8 @@ step:
           ring-4 ring-white dark:ring-gray-900
         state:
           pending:
-          completed: bg-green-200 dark:bg-green-900
-          current: bg-blue-200 dark:bg-blue-900
+          completed: bg-success-200 dark:bg-success-900
+          current: bg-primary-200 dark:bg-primary-900
     state:
       pending:
       completed:

data/app/components/fox_tail/surface_component.rb

@@ -1,10 +1,14 @@
 # frozen_string_literal: true
 
-class FoxTail::SurfaceComponent < FoxTail::BaseComponent
+class FoxTail::SurfaceComponent < FoxTail::ClickableComponent
   has_option :border, type: :boolean, default: true
   has_option :tag_name, default: :div
   has_option :hover, type: :boolean, default: false
 
+  def root_tag_name
+    link? ? :a : tag_name
+  end
+
   def before_render
     super
 
@@ -12,6 +16,6 @@ class FoxTail::SurfaceComponent < FoxTail::BaseComponent
   end
 
   def call
-    content_tag tag_name, content, html_attributes
+    content_tag root_tag_name, content, html_attributes
   end
 end

data/app/components/fox_tail/table_component.rb

@@ -43,6 +43,6 @@ class FoxTail::TableComponent < FoxTail::BaseComponent
   private
 
   def section_options
-    self.options.slice :highlight, :hover, :border
+    options.slice :highlight, :hover, :border
   end
 end

data/app/components/fox_tail/tabs/panel_component.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 class FoxTail::Tabs::PanelComponent < FoxTail::CollapsibleComponent
-
   class << self
     def stimulus_controller_name
       :collapsible