ariadne_view_components 0.0.58 → 0.0.64

data/app/components/ariadne/ui/clipboard_copy/component.rb

@@ -0,0 +1,102 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module ClipboardCopy
+      # Use `ClipboardCopy` to copy element text content or input values to the clipboard.
+      #
+      # @example Default
+      #   <%= render(Ariadne::UI::ClipboardCopy::Component.new(value: "Text to copy", aria_label: "Copy text to the system clipboard" )) %>
+      #
+      # @example With text instead of icons
+      #   <%= render(Ariadne::UI::ClipboardCopy::Component.new(value: "Text to copy", aria_label: "Copy text to the system clipboard" )) do %>
+      #     Click to copy!
+      #   <% end %>
+      #
+      # @example Copying from an element
+      #   <%= render(Ariadne::UI::ClipboardCopy::Component.new(for_id: "blob-path", aria_label: "Copy text to the system clipboard" )) %>
+      #   <div id="blob-path">src/index.js</div>
+      #
+      # @accessibility
+      #   Always set an accessible label to help the user interact with the component.
+      class Component < Ariadne::UI::Button::Component
+        # @param value [Strinulus_g] Text to copy when the component is clicked.
+        option :value, optional: true
+        # @param for [String] If `value` is not provided, the element with this id will be copied.
+        option :for, optional: true
+
+        def initialize(**options)
+          super
+          validate!
+        end
+
+        accepts_html_attributes do |html_attrs|
+          prepend_controller(html_attrs)
+          prepend_action(html_attrs, "clipboard-copy->ariadne-ui-clipboard-copy#copy")
+          html_attrs[:value] = @value if @value.present?
+          html_attrs[:for] = @for if @for.present?
+        end
+
+        def before_render
+          validate_aria_label!(html_attrs) if content.blank?
+        end
+
+        private def validate!
+          raise ArgumentError, "Must provide either `value` or `for`" if @value.blank? && @for.blank?
+          raise ArgumentError, "Must provide only `value` or `for`, not both" if @value.present? && @for.present?
+        end
+
+        def classes
+          style(:button, size:) + style(:size)
+        end
+
+        style do
+          base do
+            [
+              "ariadne-inline-flex",
+              "ariadne-items-center",
+              "ariadne-justify-center",
+            ]
+          end
+
+          variants do
+            size do
+              xs do
+                [
+                  "ariadne-gap-0.5",
+                  "ariadne-text-xs-md",
+                  "ariadne-rounded",
+                  "[&>svg]:ariadne-size-3",
+                ]
+              end
+              sm do
+                [
+                  "ariadne-gap-0.5",
+                  "ariadne-px-1",
+                  "ariadne-text-sm-md",
+                  "ariadne-rounded",
+                  "[&>svg]:ariadne-size-4",
+                ]
+              end
+              base do
+                ["ariadne-gap-1", "ariadne-text-base", "ariadne-rounded-md"]
+              end
+              md do
+                [
+                  "ariadne-gap-1",
+                  "ariadne-text-base",
+                  "ariadne-rounded-lg",
+                  "[&>svg]:ariadne-size-5",
+                ]
+              end
+              lg do
+                ["ariadne-gap-1", "ariadne-text-lg", "ariadne-rounded-lg"]
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/clipboard_copy/component.ts

@@ -0,0 +1,54 @@
+import {controllerFactory} from '@utils/createController'
+
+import '@github/clipboard-copy-element'
+
+const CLIPBOARD_COPY_TIMER_DURATION = 2000
+
+export default class ClipboardCopyController extends controllerFactory<HTMLDetailsElement>()({
+  targets: {
+    initial: HTMLElement,
+    confirmed: null,
+  },
+}) {
+  declare clipboardCopyElementTimers: WeakMap<HTMLElement, number>
+
+  connect() {
+    this.clipboardCopyElementTimers = new WeakMap()
+  }
+
+  copy(event: Event) {
+    const target = event.target as HTMLElement
+    const currentTimeout = this.clipboardCopyElementTimers.get(target)
+
+    if (currentTimeout) {
+      clearTimeout(currentTimeout)
+      this.clipboardCopyElementTimers.delete(target)
+    } else {
+      this.showConfirm()
+    }
+
+    this.clipboardCopyElementTimers.set(
+      target,
+      window.setTimeout(() => {
+        this.showInitial()
+        this.clipboardCopyElementTimers.delete(target)
+      }, CLIPBOARD_COPY_TIMER_DURATION),
+    )
+  }
+
+  showConfirm() {
+    if (this.hasConfirmedTarget) {
+      this.confirmedTarget.classList.remove('hidden')
+      this.confirmedTarget.classList.add('inline-block')
+      this.initialTarget.classList.add('hidden')
+    }
+  }
+
+  showInitial() {
+    this.initialTarget.classList.remove('hidden')
+    this.initialTarget.classList.add('inline-block')
+    if (this.hasConfirmedTarget) {
+      this.confirmedTarget.classList.add('hidden')
+    }
+  }
+}

data/app/components/ariadne/ui/combobox/component.html.erb

@@ -0,0 +1,32 @@
+<details class="inline" <%= html_attrs.to_html %>>
+  <summary class="list-none rounded" data-combobox-target="anchor">
+    <%= content %>
+  </summary>
+  <details-menu
+    class='<%= style(:popover, size:) %>'
+    role="menu"
+    data-combobox-target="popover"
+    data-action="details-menu-selected->combobox#close">
+    <% if show_search == :yes %>
+      <div class="p-1 pb-0">
+        <%= render UI::Input::Component.new(
+          theme: :soft,
+          width: :full,
+          html_attrs: input_attrs
+        ) %>
+      </div>
+    <% end %>
+    <div class="<%= style(:options) %>"
+      data-combobox-target="options">
+      <%= options %>
+      <div class="text-center" data-input-filter-target="emptyRoot">
+        <% if any_options? %>
+          <%= "no_options" %>
+        <% else %>
+          <span class="py-3 text-sm text-zinc-600 dark:text-zinc-400"><%= translate(:no_options) %></span>
+        <% end %>
+      </div>
+    </div>
+  </details-menu>
+</details>
+<%= selector %>

data/app/components/ariadne/ui/combobox/component.rb

@@ -0,0 +1,83 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Combobox
+      class Component < BaseComponent
+        option :placement, default: proc { "bottom" }
+        option :show_search, default: proc { :yes }
+        option :size, default: proc { :md }
+
+        option :clamped, default: proc { false }
+
+        option :changed_action, optional: true
+
+        option :filter_placeholder, default: proc { "Filter…" }
+
+        renders_many :options, Ariadne::UI::Combobox::MenuItem::Component
+        renders_one :selector, ->(size:, icon:) do
+          render(Ariadne::UI::Button::Component.new(theme: :ghost, size: size, icon_only: :yes)) do
+            render(Ariadne::UI::Heroicon::Component.new(icon: icon, variant: :solid, size: size))
+          end
+        end
+
+        def any_options?
+          options.any?
+        end
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:data] = {
+            controller: "input-filter #{stimulus_name}",
+            "#{stimulus_name}-placement-value": placement,
+            "#{stimulus_name}-clamped-value": clamped,
+          }
+          if changed_action
+            html_attrs[:data][:action] = "#{stimulus_name}:changed->#{changed_action}"
+          end
+        end
+
+        accepts_html_attributes_for :input,
+          autocomplete: "off",
+          autofocus: true,
+          type: "search",
+          placeholder: proc { @filter_placeholder },
+          data: {
+            "input-filter-target": "input",
+            "#{stimulus_name}-target": "searchInput",
+            "action": "input-filter#handleInput",
+          }
+
+        style :popover do
+          base do
+            [
+              "fixed",
+              "max-w-[90vw]",
+              "z-20",
+              "scroll",
+              "scrollbar-trigger",
+              "rounded-lg",
+              "shadow-lg",
+              "bg-white",
+              "dark:bg-zinc-900",
+            ]
+          end
+
+          variants do
+            size do
+              sm { "w-36" }
+              md { "w-52" }
+              lg { "w-96" }
+            end
+          end
+        end
+
+        style :options do
+          base do
+            ["overflow-auto", "p-2"]
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/combobox/component.ts

@@ -0,0 +1,119 @@
+import {type Placement, autoUpdate, computePosition, flip, offset, shift, size} from '@floating-ui/dom'
+import {controllerFactory} from '@utils/createController'
+import {useClickOutside, useMutation} from 'stimulus-use'
+
+export default class ComboboxController extends controllerFactory<HTMLDetailsElement>()({
+  targets: {
+    anchor: null,
+    options: null,
+    popover: null,
+    searchInput: HTMLInputElement,
+  },
+  values: {
+    clamped: Boolean,
+    placement: String,
+  },
+}) {
+  private changedIds = new Set<string>()
+  private clickHandlers: Array<() => void> = []
+  labels: Array<{el: HTMLLabelElement; searchString: string}>
+  unsubAutoUpdate: (() => void) | undefined
+
+  private setupClickHandlers() {
+    const cb = () => this.toggle()
+
+    for (const fn of this.clickHandlers) {
+      fn()
+    }
+    this.clickHandlers = []
+
+    for (const el of this.anchorTarget.querySelectorAll('button, [tabindex]:not([tabindex="-1"])')) {
+      el.addEventListener('click', cb)
+      this.clickHandlers.push(() => el.removeEventListener('click', cb))
+    }
+  }
+
+  checkboxClicked(e: Event) {
+    const target = e.target as HTMLInputElement
+    const value = target.value
+    if (this.changedIds.has(value)) {
+      this.changedIds.delete(value)
+    } else {
+      this.changedIds.add(value)
+    }
+    this.dispatch('clicked', {detail: value})
+  }
+
+  clickOutside() {
+    this.element.open = false
+    this.setupAutoUpdate()
+    this.close()
+  }
+
+  close() {
+    if (this.hasSearchInputTarget) this.searchInputTarget.value = ''
+    if (this.changedIds.size > 0) {
+      this.dispatch('changed')
+      this.changedIds.clear()
+    }
+  }
+
+  connect() {
+    useClickOutside(this)
+    useMutation(this, {childList: true, subtree: true})
+    this.setupAutoUpdate()
+    this.setupClickHandlers()
+  }
+
+  disconnect() {
+    this.unsubAutoUpdate?.()
+  }
+
+  setupAutoUpdate(): void {
+    if (!this.element.open) {
+      this.unsubAutoUpdate?.()
+      return
+    }
+
+    const updatePopoverPosition = (): void => {
+      const options = this.optionsTarget
+      const searchInput = this.hasSearchInputTarget ? this.searchInputTarget : null
+      const shouldClamp = this.clampedValue
+
+      void computePosition(this.anchorTarget, this.popoverTarget, {
+        middleware: [
+          offset(6),
+          flip(),
+          shift({padding: 6}),
+          size({
+            apply({availableHeight}) {
+              const inputHeight = searchInput ? searchInput.getBoundingClientRect().height : 0
+
+              let maxHeight = availableHeight - inputHeight - 6
+              if (shouldClamp && maxHeight > 400) maxHeight = 400
+
+              Object.assign(options.style, {
+                maxHeight: `${maxHeight}px`,
+              })
+            },
+          }),
+        ],
+        placement: this.placementValue as Placement,
+        strategy: 'fixed',
+      }).then(({x, y}) => {
+        Object.assign(this.popoverTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        })
+      })
+    }
+
+    updatePopoverPosition()
+    this.unsubAutoUpdate = autoUpdate(this.anchorTarget, this.popoverTarget, updatePopoverPosition)
+  }
+
+  toggle(): void {
+    this.element.open = !this.element.open
+    this.setupAutoUpdate()
+  }
+}

data/app/components/ariadne/ui/combobox/menu_item/component.html.erb

@@ -0,0 +1,9 @@
+<% slot = capture do %>
+  <span class="truncate"><%= label %></span>
+<% end %>
+
+<%= content_tag(
+  link? ? :a : :button,
+  slot,
+  html_attrs,
+) %>

data/app/components/ariadne/ui/combobox/menu_item/component.rb

@@ -0,0 +1,53 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Combobox
+      module MenuItem
+        class Component < BaseComponent
+          option :label
+          option :as, default: proc { :link } # :button
+
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = style(as:)
+            html_attrs["data-input-filter-target"] = "searchString"
+            if as == :link && !html_attrs[:target]
+              html_attrs[:target] = "_top"
+            end
+          end
+
+          style do
+            base do
+              [
+                "flex",
+                "gap-0.5",
+                "items-center",
+                "ps-2",
+                "pe-1",
+                "text-ui-base",
+                "rounded",
+                "!ring-0",
+                "hover:bg-zinc-100",
+                "hover:dark:bg-zinc-800",
+                "focus-within:bg-zinc-100",
+                "focus-within:dark:bg-zinc-800",
+              ]
+            end
+            variants do
+              as do
+                button do
+                  "appearance-none inline-flex w-full"
+                end
+              end
+            end
+          end
+
+          def link?
+            as == :link
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/combobox/option/component.html.erb

@@ -0,0 +1,11 @@
+<label
+  tabindex="0"
+  role="menuitemcheckbox"
+  class="<%= style %>">
+  <span class="px-1"><%= option_component %></span>
+  <span
+    class="truncate <%= text_content ? 'px-1' : 'inline-flex items-center' %>"
+    data-input-filter-target="searchString">
+    <%= content %>
+  </span>
+</label>

data/app/components/ariadne/ui/combobox/option/component.rb

@@ -0,0 +1,45 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Combobox
+      module Option
+        class Component < BaseComponent
+          option :as, default: proc { :link } # :button
+
+          option :type, default: proc { :multiple }
+          option :text_content, default: proc { true }
+
+          accepts_html_attributes disabled: false,
+            tabindex: -1,
+            data: proc {
+              { action: "#{UI::Combobox::Component.stimulus_name}#checkboxClicked" }
+            }
+
+          def option_component
+            cmp = type == :multiple ? Checkbox : Radio
+            render(cmp::Component.new(html_attrs:))
+          end
+
+          style do
+            base do
+              [
+                "flex",
+                "gap-0.5",
+                "items-center",
+                "text-ui-base",
+                "rounded",
+                "!ring-0",
+                "hover:bg-zinc-100",
+                "hover:dark:bg-zinc-800",
+                "focus-within:bg-zinc-100",
+                "focus-within:dark:bg-zinc-800",
+              ]
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/heroicon/component.html.erb

@@ -0,0 +1,3 @@
+<svg class="<%= html_attrs[:class] %>" <%= svg_attributes %>>
+  <%= inner %>
+</svg>

data/app/components/ariadne/ui/heroicon/component.rb

@@ -0,0 +1,141 @@
+# typed: false
+# frozen_string_literal: true
+
+require "heroicons_helper"
+
+module Ariadne
+  module UI
+    module Heroicon
+      # @example Default
+      #   <%= render(Ariadne::UI::Heroicon::Component.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE)) %>
+      #   <%= render(Ariadne::UI::Heroicon::Component.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_SOLID)) %>
+      #
+      # @example Medium
+      #   <%= render(Ariadne::UI::Heroicon::Component.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :md)) %>
+      #
+      # @example Helper
+      #   <%= ariadne_heroicon(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
+      #
+      # @param tag [Symbol, String] The rendered tag name
+      # @param classes [String] <%= link_to_classes_docs %>
+      # @param icon [Symbol, String] Name of <%= link_to_heroicons %> to use.
+      # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
+      # @param size [Symbol] <%= one_of(Ariadne::UI::Heroicon::Component::SIZE_MAPPINGS, sort: false) %>
+      class Component < Ariadne::BaseComponent
+        option :icon
+        option :variant
+        option :size, default: -> { :md }
+
+        include IconHelper
+        include HeroiconsHelper
+
+        PRELOADED_ICONS = [
+          {
+            name: "bell",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "check",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "chevron-down",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "clipboard",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "clock",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "information-circle",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "dots-horizontal",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "link",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "lock-closed",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "mail",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "menu",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "pencil",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "plus-sm",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "question-mark-circle",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "search",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "search",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "trash",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+          {
+            name: "x-mark",
+            variant: HeroiconsHelper::Icon::VARIANT_OUTLINE,
+          },
+        ].freeze
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([@heroicon.attributes["class"], style(size: @size), html_attrs[:class]].join(" "))
+        end
+
+        def initialize(**options)
+          super
+
+          check_icon_presence!(icon, variant)
+
+          @heroicon = heroicon(@icon, variant: @variant)
+        end
+
+        def svg_attributes
+          tag.attributes(html_attrs.except(:class).merge(@heroicon.attributes.except("class", "aria-hidden")))
+        end
+
+        def inner
+          ActiveSupport::SafeBuffer.new(@heroicon.path)
+        end
+
+        style do
+          variants do
+            size do
+              xs { ["ariadne-w-4", "ariadne-h-4"] }
+              sm { ["ariadne-w-5", "ariadne-h-5"] }
+              md { ["ariadne-w-6", "ariadne-h-6"] }
+              lg { ["ariadne-w-10", "ariadne-h-10"] }
+              xl { ["ariadne-w-12", "ariadne-h-12"] }
+            end
+          end
+        end
+      end
+    end
+  end
+end