anchor_view_components 0.20.1 → 0.22.0

data/app/components/anchor/copy_to_clipboard_component.rb

@@ -0,0 +1,15 @@
+module Anchor
+  class CopyToClipboardComponent < Component
+    attr_reader :label, :value
+
+    def initialize(
+      value: nil,
+      label: nil,
+      **kwargs
+    )
+      @label = label
+      @value = value
+      super
+    end
+  end
+end

data/app/components/anchor/copy_to_clipboard_controller.ts

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller<HTMLDivElement> {
+  static targets = [ "initialIcon", "successIcon"];
+  static classes = [ "hidden" ]
+
+  declare readonly initialIconTarget: SVGElement;
+  declare readonly successIconTarget: SVGElement;
+  declare readonly notificationDelayValue: number;
+  declare readonly hiddenClass: string;
+  declare readonly textToCopyValue: string;
+  declare readonly hasTextToCopyValue: boolean;
+
+  static values = {
+    notificationDelay: { type: Number, default: 1500 },
+    textToCopy: String,
+  };
+
+  copy(): void {
+    if (this.hasTextToCopyValue) {
+      navigator.clipboard.writeText(this.textToCopyValue);
+    }
+    this.toggleIcons();
+
+    setTimeout(() => {
+      this.toggleIcons();
+    }, this.notificationDelayValue);
+  }
+
+  toggleIcons(): void {
+    this.initialIconTarget.classList.toggle(this.hiddenClass); 
+    this.successIconTarget.classList.toggle(this.hiddenClass); 
+  }
+}

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

@@ -1,14 +1,13 @@
 <%= show_button if show_button? %>
 
-<%= tag.dialog(
+<%= tag.dialog(**merge_options(wrapper_options, {
   aria: { labelledby: title_id },
-  class: class_names("w-[36rem] rounded-lg p-0 bg-white shadow-lg backdrop:bg-grey-100/50", classes),
+  class: "w-[36rem] rounded-lg p-0 bg-white shadow-lg backdrop:bg-grey-100/50",
   data: {
     controller: "dialog",
     testid: title_id,
   },
-  id: id,
-) do %>
+})) do %>
   <header class="p-6 flex gap-4 justify-between items-center">
     <%= render Anchor::TextComponent.new(
       variant: :heading_2xl,

data/app/components/anchor/icon_component.html.erb

@@ -1,6 +1,4 @@
 <%= anchor_svg(
   "icons/#{icon}",
-  aria: { hidden: true },
-  class: classes,
-  data: data,
+  **merge_options(wrapper_options, { aria: { hidden: true } }),
 ) %>

data/app/components/anchor/icon_component.rb

@@ -3,7 +3,7 @@ module Anchor
     def initialize(icon:, **kwargs)
       @icon = icon
 
-      super
+      super(**kwargs)
     end
 
     private

data/app/components/anchor/loading_indicator_component.html.erb

@@ -1,7 +1,6 @@
 <%= tag.span t(".label"), class: "sr-only" %>
 
-<%= anchor_icon(
+<%= anchor_icon(**merge_options(wrapper_options,
+  class: class_names(wrapper_options[:class], "text-grey-100 animate-spin"),
   icon: "loading-indicator",
-  classes: "text-grey-100 animate-spin",
-  data: data,
-) %>
+)) %>

data/app/components/anchor/logo_component.html.erb

@@ -1,7 +1,4 @@
-<%= tag.div(
-  class: classes,
-  data: data,
-) do %>
+<%= tag.div(wrapper_options) do %>
   <%= tag.div(
     class: class_names(
       "w-fit max-w-full",

data/app/components/anchor/logo_component.rb

@@ -35,7 +35,7 @@ module Anchor
       ]
       @variant_aspect_ratio = VARIANT_ASPECT_RATIO_MAPPINGS[variant]
 
-      super
+      super(**kwargs)
     end
 
     private

data/app/components/anchor/panel/body_component.html.erb

@@ -1,8 +1,6 @@
-<%= tag.div(
-  class: class_names(
-    "p-6",
-    classes
-  )
+<%= tag.div(**wrapper_options.except(:class).merge({
+    class: class_names("p-6", wrapper_options[:class]),
+  }),
 ) do %>
   <%= content %>
 <% end %>

data/app/components/anchor/panel_component.html.erb

@@ -1,4 +1,6 @@
-<%= tag.div(class: class_names("border border-subdued", classes)) do %>
+<%= tag.div(**merge_options(wrapper_options,
+  class: "border border-subdued",
+)) do %>
   <%= header %>
 
   <% if active? %>

data/app/components/anchor/popover_component.html.erb

@@ -4,15 +4,11 @@
 ) do %>
   <%= trigger if trigger? %>
 
-  <%= tag.div(
-    class: class_names(
-      "absolute -left-full -top-full m-0 bg-white rounded border border-subdued popover-open:block",
-      classes
-    ),
+  <%= tag.div(**merge_options(wrapper_options,
+    class: "absolute -left-full -top-full m-0 bg-white rounded border border-subdued popover-open:block",
     data: { action: "toggle->popover#positionPopover" },
-    id:,
     popover: "auto",
-  ) do %>
+  )) do %>
     <%= content %>
   <% end %>
 <% end %>

data/app/components/anchor/popover_controller.ts

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import { computePosition, autoPlacement, offset } from "@floating-ui/dom";
+import { computePosition, autoPlacement, offset, autoUpdate } from "@floating-ui/dom";
 
 export default class extends Controller<HTMLDivElement> {
   static targets = ["button"];
@@ -7,20 +7,26 @@ export default class extends Controller<HTMLDivElement> {
   declare readonly buttonTarget: HTMLButtonElement;
 
   positionPopover = (event: { target: HTMLDivElement }): void => {
+    const trigger = this.buttonTarget
     const popover = event.target;
-    computePosition(this.buttonTarget, popover, {
-      placement: "bottom-start",
-      middleware: [
-        autoPlacement({
-          allowedPlacements: ["bottom-start", "bottom-end", "top-start", "top-end"],
-        }),
-        offset(4)
-      ],
-    }).then(({ x, y }) => {
-      Object.assign(popover.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      });
-    });
+
+    const updatePosition = () => {
+      computePosition(trigger, popover, {
+        placement: "bottom-start",
+        middleware: [
+          autoPlacement({
+            allowedPlacements: ["bottom-start", "bottom-end", "top-start", "top-end"],
+          }),
+          offset(4)
+        ],
+      }).then(({ x, y }) => {
+        Object.assign(popover.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      })
+    };
+
+    autoUpdate(trigger, popover, updatePosition);
   };
 }

data/app/components/anchor/prose_component.html.erb

@@ -1,8 +1,9 @@
 <%= tag.div(
   content,
-  class: class_names(
-    "prose",
-    classes,
+  **wrapper_options.except(:class).merge(
+    class: class_names(
+      "prose",
+      wrapper_options[:class],
+    ),
   ),
-  data: data
 ) %>

data/app/components/anchor/radio_button_collection_component.html.erb

@@ -0,0 +1 @@
+<%= tag.div content, class: "flex flex-col space-y-2 text-base" %>

data/app/components/anchor/radio_button_collection_component.rb

@@ -0,0 +1,35 @@
+module Anchor
+  class RadioButtonCollectionComponent < Component
+    attr_reader :attribute, :descriptions, :form_builder
+
+    def initialize(
+      form_builder:,
+      attribute:,
+      collection:,
+      value_method:,
+      text_method:,
+      **options
+    )
+      @form_builder = form_builder
+      @attribute = attribute
+      @collection = collection
+      @value_method = value_method
+      @text_method = text_method
+      @descriptions = options.delete(:descriptions)
+
+      super
+
+      def options
+        { class: RadioButtonComponent::INPUT_CLASSES }
+      end
+
+      def radio(radio:)
+        RadioButtonComponent.new(
+          radio:,
+          attribute:,
+          form_builder:
+        )
+      end
+    end
+  end
+end

data/app/components/anchor/radio_button_component.html.erb

@@ -0,0 +1,11 @@
+<div class="flex gap-1 items-start">
+  <%= radio.radio_button(radio_options) %>
+  <% if description.present? %>
+    <div class="flex flex-col gap-1">
+      <%= radio.label %>
+      <%= description_span %>
+    </div>
+  <% else %>
+    <%= tag.div radio.label, class: "self-center" %>
+  <% end %>
+</div>

data/app/components/anchor/radio_button_component.rb

@@ -0,0 +1,105 @@
+module Anchor
+  class RadioButtonComponent < Anchor::Component
+    INPUT_CLASSES = %w(
+      appearance-none
+      w-[18px]
+      m-[3px]
+      aspect-square
+      rounded-full
+      border-2
+      border-grey-60
+      hover:border-grey-80
+      checked:bg-gradient-radial
+      checked:from-blue-50
+      checked:from-[50%]
+      checked:to-transparent
+      checked:to-[54%]
+      checked:border-blue-50
+      checked:hover:from-blue-60
+      checked:hover:from-[50%]
+      checked:hover:to-transparent
+      checked:hover:to-[54%]
+      checked:hover:border-blue-60
+      disabled:border-grey-40
+      disabled:checked:border-grey-40
+      disabled:checked:from-grey-40
+      disabled:checked:from-[50%]
+      disabled:checked:to-transparent
+      disabled:checked:to-[54%]
+      disabled:checked:border-grey-40
+      aria-readonly:border-grey-40
+      aria-readonly:checked:border-grey-40
+      aria-readonly:checked:from-grey-40
+      aria-readonly:checked:from-[50%]
+      aria-readonly:checked:to-transparent
+      aria-readonly:checked:to-[54%]
+      aria-readonly:checked:border-grey-40
+    ).freeze
+
+    DESCRIPTION_CLASSES = %w(
+      text-secondary
+      text-sm
+    ).freeze
+
+    def initialize(radio:, attribute:, form_builder:)
+      @radio = radio
+      @attribute = attribute
+      @form_builder = form_builder
+
+      super
+    end
+
+    private
+
+    attr_reader :radio, :attribute, :form_builder
+
+    delegate :value, to: :radio
+
+    def aria_description
+      { describedby: description_id }
+    end
+
+    def description
+      if radio.object.is_a?(Hash)
+        radio.object[:description]
+      elsif radio.object.respond_to?(:description)
+        radio.object.description
+      elsif I18n.exists?(description_translation_scope)
+        human_attribute_description
+      else
+        false
+      end
+    end
+
+    def description_id
+      "#{attribute}-#{value}-description"
+    end
+
+    def description_span
+      tag.span description, id: description_id, class: DESCRIPTION_CLASSES
+    end
+
+    def description_text
+      human_attribute_description
+    end
+
+    def description_translation_scope
+      ["activerecord.values", i18n_model_key, description_id.gsub("-", ".")]
+    end
+
+    def human_attribute_description
+      I18n.t description_translation_scope.join(".")
+    end
+
+    def i18n_model_key
+      form_builder.object.class.model_name.i18n_key
+    end
+
+    def radio_options
+      {
+        aria: description.present? && aria_description,
+        data: { testid: "radio-#{attribute}-#{radio.value}".dasherize },
+      }
+    end
+  end
+end

data/app/components/anchor/side_nav_component.html.erb

@@ -1,20 +1,19 @@
-<%= tag.div(
-  class: "flex min-h-[100dvh] max-h-[100dvh] overflow-hidden",
+<%= tag.div(**merge_options(wrapper_options, {
+ class: "flex min-h-[100dvh] max-h-[100dvh] overflow-hidden",
   data: {
     controller: "toggle",
     toggle_toggle_class: "side-nav-open",
     toggle_initial_label_value: t(".hide_nav"),
     toggle_intermediate_label_value: t(".show_nav"),
-  },
-) do %>
-  <%= tag.header(
+  }
+})) do %>
+  <%= tag.header(**merge_options(sidebar_options, {
     class: class_names(
       "flex flex-shrink-0 w-[15rem] relative",
       "[.side-nav-open_&]:w-[3.5rem] transition-[width] duration-500",
-      classes
     ),
-    data: { testid: "side-nav" }
-  ) do %>
+    data: { testid: "side-nav" },
+  })) do %>
     <%= tag.div(
       class: class_names(
         "bg-teal text-white w-[15rem] flex flex-col divide-y divide-solid divide-white/10 duration-500",
@@ -58,7 +57,7 @@
         ),
         data: { toggle_target: "inertify" },
       ) do %>
-        <%= render Anchor::ActionMenuComponent.new(classes: "py-4", menu_classes: "ml-4 w-[198px]") do |c| %>
+      <%= render Anchor::ActionMenuComponent.new(classes: "py-4", menu_options: { class: "ml-4 w-[198px]" }) do |c| %>
           <% c.with_show_button(
             classes: "text-lg text-white w-full hover:text-white hover:bg-white/[.05] px-6 justify-between rounded-none",
             full_width: true,

data/app/components/anchor/side_nav_component.rb

@@ -8,18 +8,21 @@ module Anchor
       apps_button_text:,
       nav_items:,
       employee:,
+      sidebar_options: {},
       **kwargs
     )
       @apps = apps
       @apps_button_text = apps_button_text
       @nav_items = nav_items
       @employee = employee
+      @sidebar_options = sidebar_options
 
       super
     end
 
     private
 
-    attr_reader :apps, :apps_button_text, :employee, :nav_items
+    attr_reader :apps, :apps_button_text, :employee, :nav_items,
+      :sidebar_options
   end
 end

data/app/components/anchor/tab_bar/tab_component.html.erb

@@ -1,11 +1,13 @@
 <%= link_to(
   content,
   href,
-  aria: {
-    current: { page: active }
-  },
-  class: class_names(
-    "inline-block px-5 py-4 text-sm font-semibold relative text-gray-600 hover:text-gray-900",
-    "text-gray-900 after:block after:bg-blue-500 after:h-1 after:absolute after:-bottom-1 after:inset-x-0" => active,
+  **merge_options(wrapper_options,
+    aria: {
+      current: { page: active }
+    },
+    class: class_names(
+      "inline-block px-5 py-4 text-sm font-semibold relative text-gray-600 hover:text-gray-900",
+      "text-gray-900 after:block after:bg-blue-500 after:h-1 after:absolute after:-bottom-1 after:inset-x-0" => active,
+    )
   )
 ) %>

data/app/components/anchor/tab_bar/tab_component.rb

@@ -1,11 +1,11 @@
 module Anchor
   module TabBar
     class TabComponent < Component
-      def initialize(href:, active: false)
+      def initialize(href:, active: false, **kwargs)
         @href = href
         @active = active
 
-        super
+        super(**kwargs)
       end
 
       private

data/app/components/anchor/tab_bar_component.html.erb

@@ -1,7 +1,6 @@
-<%= tag.nav(
-  aria: { label: label },
-  class: class_names("shadow-[inset_0_-1px] shadow-gray-400 pb-1", classes),
-) do %>
+<%= tag.nav(**merge_options(wrapper_options,
+  class: "shadow-[inset_0_-1px] shadow-gray-400 pb-1",
+)) do %>
   <ul class="flex">
     <% tabs.each do |tab| %>
       <%= tag.li tab %>

data/app/components/anchor/tab_bar_component.rb

@@ -3,9 +3,10 @@ module Anchor
     renders_many :tabs, TabBar::TabComponent
 
     def initialize(label:, **kwargs)
-      @label = label
+      aria = kwargs.delete(:aria) || {}
+      aria[:label] = label
 
-      super
+      super(**kwargs, aria:)
     end
 
     private

data/app/components/anchor/table_component.rb

@@ -23,7 +23,7 @@ module Anchor
       @caption = caption
       @paginate = paginate
 
-      super
+      super()
     end
 
     private

data/app/components/anchor/text_component.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(
-  tag,
-  class: class_names(variant, classes),
-  id: id,
-  data: data
-) do %>
+<%= content_tag(tag, **wrapper_options) do %>
   <%= content %>
 <% end %>

data/app/components/anchor/text_component.rb

@@ -3,7 +3,7 @@ module Anchor
     TAG_DEFAULT = :p
 
     VARIANT_DEFAULT = :body_base
-    VARIANT_MAPPING = {
+    VARIANT_MAPPINGS = {
       body_lg: "text-lg",
       body_base: "text-base",
       body_sm: "text-sm",
@@ -16,25 +16,16 @@ module Anchor
       subheading_sm: "text-sm font-bold leading-4 uppercase",
       subheading_xs: "text-xs font-bold leading-4 uppercase",
     }.freeze
-    VARIANT_OPTIONS = VARIANT_MAPPING.keys
+    VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 
-    def initialize(
-      variant: VARIANT_DEFAULT,
-      tag: TAG_DEFAULT,
-      **kwargs
-    )
-      @variant = VARIANT_MAPPING[
-        fetch_or_fallback(VARIANT_OPTIONS, variant, VARIANT_DEFAULT)
-      ]
+    def initialize(tag: TAG_DEFAULT, **kwargs)
       @tag = tag
-      @id = id
-
-      super
+      super(**kwargs)
     end
 
     private
 
-    attr_reader :variant, :tag, :id
+    attr_reader :tag
 
     def render?
       content.present?

data/app/components/anchor/text_field_component.html.erb

@@ -1 +1,19 @@
-<%= content %>
+<% if starting_icon? || ending_icon? %>
+  <%= tag.div class: "relative" do %>
+    <%= content %>
+    <% if starting_icon? %>
+      <%= anchor_icon(
+        icon: starting_icon,
+        classes: class_names(ICON_CLASSES, "left-4")
+      ) %>
+    <% end %>
+    <% if ending_icon? %>
+      <%= anchor_icon(
+        icon: ending_icon,
+        classes: class_names(ICON_CLASSES, "right-4")
+      ) %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= content %>
+<% end %>

data/app/components/anchor/text_field_component.rb

@@ -1,30 +1,49 @@
 module Anchor
   class TextFieldComponent < Component
-    INPUT_CLASSES = %w(
-      block
-      border
-      form-input
-      min-h-[40px]
-      mt-1
-      resize-none
-      rounded
-      text-base
-      w-full
-      [&[readonly]]:bg-grey-10
-      [&[readonly]]:border-grey-40
-      [&[readonly]]:shadow-none
+    ICON_CLASSES = %w(
+      absolute
+      h-5
+      w-5
+      top-1/2
+      -translate-y-1/2
+      text-secondary
+      pointer-events-none
     ).freeze
 
-    def initialize(form_builder:, attribute:, **options)
+    def initialize(
+      form_builder:,
+      attribute:,
+      starting_icon: nil,
+      ending_icon: nil
+    )
       @form_builder = form_builder
       @attribute = attribute
-      @options = options
+      @starting_icon = starting_icon
+      @ending_icon = ending_icon
 
       super
     end
 
+    attr_reader :starting_icon, :ending_icon
+
     def options
-      { class: INPUT_CLASSES }
+      {
+        class: class_names(
+          TailwindConstants::INPUT,
+          "pl-11" => starting_icon?,
+          "pr-11" => ending_icon?
+        ),
+      }
+    end
+
+    private
+
+    def starting_icon?
+      starting_icon.present?
+    end
+
+    def ending_icon?
+      ending_icon.present?
     end
   end
 end

data/app/components/anchor/toast_component.html.erb

@@ -1,12 +1,9 @@
 <%= tag.div(
-  class: class_names(
-    "toast",
-    variant,
-  ),
-  data: { controller: "toast" },
-  id: id,
-  popover: "manual",
-  role:,
+  **merge_options(wrapper_options, {
+    class: "toast",
+    data: { controller: "toast", testid: test_id },
+    popover: "manual",
+  })
 ) do %>
   <% if icon? %>
     <%= icon %>