ariadne_view_components 0.0.80.3 → 0.0.82

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

@@ -1,13 +1,14 @@
 import {type Placement, autoUpdate, computePosition, flip, offset, shift, size} from '@floating-ui/dom'
+import DetailsMenuElement from '@github/details-menu-element'
 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,
+    wrapper: HTMLDetailsElement,
+    button: HTMLElement,
+    popover: DetailsMenuElement,
+    options: HTMLDivElement,
   },
   values: {
     clamped: Boolean,
@@ -15,35 +16,8 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
   },
 }) {
   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()
@@ -51,7 +25,6 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
   }
 
   close() {
-    if (this.hasSearchInputTarget) this.searchInputTarget.value = ''
     if (this.changedIds.size > 0) {
       this.dispatch('changed')
       this.changedIds.clear()
@@ -62,13 +35,28 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
     useClickOutside(this)
     useMutation(this, {childList: true, subtree: true})
     this.setupAutoUpdate()
-    this.setupClickHandlers()
+    this.setupForm()
   }
 
   disconnect() {
     this.unsubAutoUpdate?.()
   }
 
+  setupForm(): void {
+    // https://github.com/github/details-menu-element?tab=readme-ov-file#markup
+    for (const checkbox of this.popoverTarget.querySelectorAll('input[type="checkbox"]')) {
+      checkbox.addEventListener('change', (e: {target: HTMLInputElement}) => {
+        const value = e.target as HTMLInputElement
+        if (this.changedIds.has(value)) {
+          this.changedIds.delete(value)
+        } else {
+          this.changedIds.add(value)
+        }
+        this.dispatch('clicked', {detail: value})
+      })
+    }
+  }
+
   setupAutoUpdate(): void {
     if (!this.element.open) {
       this.unsubAutoUpdate?.()
@@ -77,19 +65,16 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
 
     const updatePopoverPosition = (): void => {
       const options = this.optionsTarget
-      const searchInput = this.hasSearchInputTarget ? this.searchInputTarget : null
       const shouldClamp = this.clampedValue
 
-      void computePosition(this.anchorTarget, this.popoverTarget, {
+      void computePosition(this.buttonTarget, this.popoverTarget, {
         middleware: [
           offset(6),
           flip(),
           shift({padding: 6}),
           size({
             apply({availableHeight}) {
-              const inputHeight = searchInput ? searchInput.getBoundingClientRect().height : 0
-
-              let maxHeight = availableHeight - inputHeight - 6
+              let maxHeight = availableHeight - 6
               if (shouldClamp && maxHeight > 400) maxHeight = 400
 
               Object.assign(options.style, {
@@ -109,7 +94,7 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
     }
 
     updatePopoverPosition()
-    this.unsubAutoUpdate = autoUpdate(this.anchorTarget, this.popoverTarget, updatePopoverPosition)
+    this.unsubAutoUpdate = autoUpdate(this.buttonTarget, this.popoverTarget, updatePopoverPosition)
   }
 
   toggle(): void {

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

@@ -8,6 +8,7 @@ module Ariadne
         option :title
         option :trigger_close_label
         option :description, optional: true
+        option :width, default: proc { :base }
 
         renders_one :trigger
         renders_one :footer
@@ -18,8 +19,6 @@ module Ariadne
           base do
             [
               "ariadne-fixed",
-              "ariadne-w-96",
-              "ariadne-max-w-[90vw]",
               "ariadne-max-h-[90-vh]",
               "ariadne-shadow-xl",
               "ariadne-rounded-2xl",
@@ -31,6 +30,23 @@ module Ariadne
               "backdrop:dark:ariadne-bg-zinc-100/20",
             ]
           end
+          variants do
+            width do
+              base do
+                [
+                  "ariadne-w-96",
+                  "ariadne-max-w-[90vw]",
+                ]
+              end
+
+              wide do
+                [
+                  "ariadne-w-3/5",
+                  "ariadne-max-w-[90vw]",
+                ]
+              end
+            end
+          end
         end
       end
     end

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

@@ -1,18 +1,18 @@
 <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-<div class="ariadne-p-4">
+  <div class="ariadne-p-4">
     <div class="ariadne-flex ariadne-items-start">
-    <div class="ariadne-flex-shrink-0 <%= style(:text, type:) %>">
+      <div class="ariadne-flex-shrink-0 <%= style(:text, type:) %>">
         <%= icon %>
-    </div>
-    <div class="ariadne-ml-3 ariadne-w-0 ariadne-flex-1 ariadne-pt-0.5 <%= style(:text, type:) %>">
-        <p class="ariadne-text-sm ariadne-font-semibold "><%= title %></p>
-        <p class="ariadne-mt-1 ariadne-text-sm "><%= message %></p>
-    </div>
-    <div class="ariadne-ml-4 ariadne-flex ariadne-flex-shrink-0 ">
+      </div>
+      <div class="ariadne-ml-3 ariadne-w-0 ariadne-flex-1 ariadne-pt-0.5 <%= style(:text, type:) %>">
+        <p class="ariadne-text-sm ariadne-font-semibold" data-flash-target="title"><%= title %></p>
+        <p class="ariadne-mt-1 ariadne-text-sm" data-flash-target="message"><%= message %></p>
+      </div>
+      <div class="ariadne-ml-4 ariadne-flex ariadne-flex-shrink-0 ">
         <% if dismissable? %>
-            <%= render Ariadne::UI::Button::Component.new(theme: :nude, html_attrs: { class: style(:dismissable, type:), aria: { label: "close_label" }, data: { action: "click->#{stimulus_name}#hide" } }).as_icon(icon: "x-mark", variant: :outline) %>
+          <%= render Ariadne::UI::Button::Component.new(theme: :nude, html_attrs: { class: style(:dismissable, type:), aria: { label: "close_label" }, data: { action: "click->#{stimulus_name}#hide" } }).as_icon(icon: "x-mark", variant: :outline) %>
         <% end %>
+      </div>
     </div>
-    </div>
-</div>
+  </div>
 </div>

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

@@ -9,20 +9,25 @@ module Ariadne
         option :dismissible, default: proc { false }
         option :title
         option :message
+        option :persist, default: proc { false }
+        option :width, default: proc { :base }
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:data] = {
-            controller: "flash",
-            transition_enter: "ariadne-transform ariadne-ease-out ariadne-duration-300 ariadne-transition-all",
-            transition_enter_start: "ariadne-translate-y-2 ariadne-opacity-0 sm:ariadne-translate-y-0 sm:ariadne-translate-x-2",
-            transition_enter_end: "ariadne-translate-y-0 ariadne-opacity-100 sm:ariadne-translate-x-0",
-            transition_leave: "ariadne-transition-all ariadne-ease-in ariadne-duration-100",
-            transition_leave_start: "ariadne-opacity-100",
-            transition_leave_end: "ariadne-opacity-0",
-          }
+          unless persist
+            html_attrs[:data] = {
+              controller: "flash",
+              transition_enter: "ariadne-transform ariadne-ease-out ariadne-duration-300 ariadne-transition-all",
+              transition_enter_start: "ariadne-translate-y-2 ariadne-opacity-0 sm:ariadne-translate-y-0 sm:ariadne-translate-x-2",
+              transition_enter_end: "ariadne-translate-y-0 ariadne-opacity-100 sm:ariadne-translate-x-0",
+              transition_leave: "ariadne-transition-all ariadne-ease-in ariadne-duration-100",
+              transition_leave_start: "ariadne-opacity-100",
+              transition_leave_end: "ariadne-opacity-0",
+            }
+          end
+
           html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([
             html_attrs[:class],
-            style(type:),
+            style(type:, width:),
           ])
         end
 
@@ -36,8 +41,6 @@ module Ariadne
           base do
             [
               "ariadne-pointer-events-auto",
-              "ariadne-w-full",
-              "ariadne-max-w-sm",
               "ariadne-overflow-hidden",
               "ariadne-rounded-lg",
               "ariadne-shadow-lg",
@@ -49,6 +52,21 @@ module Ariadne
           end
 
           variants do
+            width do
+              base do
+                [
+                  "ariadne-w-full",
+                  "ariadne-max-w-sm",
+                ]
+              end
+
+              full do
+                [
+                  "ariadne-w-full",
+                ]
+              end
+            end
+
             type do
               danger do
                 [

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

@@ -32,20 +32,36 @@ module Ariadne
             theme do
               base do
                 [
+                  "ariadne-text-indigo-600",
+                  "dark:ariadne-text-indigo-400",
+
                   "[&>svg]:ariadne-text-zinc-400",
                   "[&>svg]:dark:ariadne-text-zinc-600",
-                  "hover:ariadne-text-indigo-600",
-                  "dark:hover:ariadne-text-indigo-400",
+
+                  "hover:ariadne-text-indigo-500",
+                  "dark:hover:ariadne-text-indigo-300",
+                  "hover:ariadne-border-indigo-500",
+                  "dark:hover:ariadne-border-indigo-300",
+                  "focus:ariadne-text-indigo-500",
+                  "dark:focus:ariadne-text-indigo-300",
+                  "focus:!ariadne-border-transparent",
+                  "active:ariadne-bg-indigo-700/10",
+                  "active:dark:ariadne-bg-indigo-300/10",
+                ]
+              end
+
+              nude do
+                [
                   "hover:ariadne-border-indigo-600",
                   "dark:hover:ariadne-border-indigo-400",
-                  "focus:ariadne-text-indigo-600",
-                  "dark:focus:ariadne-text-indigo-400",
+                  "focus:ariadne-text-indigo-500",
+                  "dark:focus:ariadne-text-indigo-300",
                   "focus:!ariadne-border-transparent",
                   "active:ariadne-bg-indigo-700/10",
                   "active:dark:ariadne-bg-indigo-300/10",
                 ]
               end
-              nude { "" }
+
               thick { "ariadne-font-semibold" }
             end
             size do

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

@@ -1,6 +1,30 @@
-
-<ol class="ariadne-divide-y ariadne-divide-zinc-100 dark:ariadne-divide-zinc-800">
+<div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
+  <% if filter_field? %>
+    <div class="ariadne-pb-1.5 ariadne-px-1">
+      <%= render filter_field %>
+    </div>
+  <% end %>
+  <div class="<%= style(:items) %>">
+    <% links.each do |link| %>
+      <div class="" role="menuitem"><%= link %></div>
+    <% end %>
+    <% checkboxes.each do |checkbox| %>
+      <div
+            class="<%= style(:item) %>"
+            data-<%= stimulus_name %>-target="searchString">
+        <div class="ariadne-truncate" role="menuitemcheckbox"><%= checkbox %></div>
+      </div>
+    <% end %>
     <% items.each do |item| %>
-    <li><%= item %></li>
+      <div
+            <%= 'role="menuitem"' if as_menu %>
+            class="<%= style(:item) %>"
+            data-<%= stimulus_name %>-target="searchString">
+        <div class="ariadne-relative ariadne-flex ariadne-cursor-default ariadne-select-none ariadne-items-center ariadne-rounded-sm ariadne-px-2 ariadne-py-1.5 ariadne-text-sm ariadne-outline-none ariadne-data-[disabled=true]:pointer-events-none ariadne-data-[selected=true]:bg-accent ariadne-data-[selected=true]:text-accent-foreground data-[disabled=true]:ariadne-opacity-50"><%= item %></div>
+      </div>
     <% end %>
-</ol>
+    <div class="ariadne-text-center ariadne-hidden" data-<%= stimulus_name %>-target="emptyRoot">
+      <span class="ariadne-py-3 ariadne-text-md ariadne-text-zinc-600 dark:ariadne-text-zinc-400"><%= @empty_placeholder %> </span>
+    </div>
+  </div>
+</div>

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

@@ -5,7 +5,125 @@ module Ariadne
   module UI
     module List
       class Component < Ariadne::BaseComponent
-        renders_many :items, Ariadne::UI::List::Item::Component
+        option :as_menu, default: proc { false }
+
+        option :size, default: proc { :md }
+
+        renders_one :filter_field, lambda { |**options|
+          raise ArgumentError, "Must provide text for `empty_placeholder`" if options[:empty_placeholder].blank?
+
+          @empty_placeholder = options.delete(:empty_placeholder)
+
+          options.delete(:size)
+          options[:theme] = :nude
+          options[:width] = :full
+          options[:name] = "search"
+          options[:label] = ""
+
+          options[:html_attrs] ||= {}
+          options[:html_attrs].merge!({
+            autocomplete: "off",
+            autofocus: true,
+            type: "search",
+            data: {
+              "#{stimulus_name}-target": "input",
+              action: "#{stimulus_name}#handleInput",
+            },
+          })
+
+          Ariadne::Form::TextField::Component.new(**options)
+        }
+
+        renders_many :checkboxes, Ariadne::Form::Checkbox::Component
+        renders_many :radio_buttons, Ariadne::Form::RadioButton::Component
+        renders_many :links, lambda { |**options|
+          options[:theme] = :nude
+          options[:"data-#{stimulus_name}-target"] = "searchString"
+
+          options[:html_attrs] ||= {}
+          options[:html_attrs][:class] ||= ""
+          options[:html_attrs][:class] = [
+            "ariadne-truncate",
+            "ariadne-border-b-0",
+            "ariadne-flex",
+            "ariadne-gap-0.5",
+            "ariadne-items-center",
+            "ariadne-ps-2",
+            "ariadne-pe-1",
+            "ariadne-rounded",
+            "!ariadne-ring-0",
+            "hover:ariadne-bg-zinc-100",
+            "hover:dark:ariadne-bg-zinc-800",
+            "focus-within:ariadne-bg-zinc-100",
+            "focus-within:dark:ariadne-bg-zinc-800",
+            "ariadne-cursor-pointer",
+            options[:html_attrs][:class],
+          ]
+
+          Ariadne::UI::Link::Component.new(**options)
+        }
+
+        renders_many :items, BaseComponent::ACCEPT_ANYTHING
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
+          html_attrs[:data] = {
+            controller: stimulus_name,
+          }
+        end
+
+        style do
+          base do
+            [
+              "ariadne-overflow-y-auto",
+            ]
+          end
+
+          variants do
+            size do
+              sm { "ariadne-w-36" }
+              md { "ariadne-w-52" }
+              lg { "ariadne-w-96" }
+              full { "ariadne-w-full" }
+            end
+          end
+        end
+
+        style :items do
+          base do
+            [
+              "ariadne-flex",
+              "ariadne-flex-col",
+              "ariadne-grow",
+            ]
+          end
+        end
+
+        style :item do
+          base do
+            [
+              # "ariadne-gap-0.5",
+              "ariadne-items-center",
+              "ariadne-rounded",
+              "!ariadne-ring-0",
+              "hover:ariadne-bg-zinc-100",
+              "hover:dark:ariadne-bg-zinc-800",
+              "focus-within:ariadne-bg-zinc-100",
+              "focus-within:dark:ariadne-bg-zinc-800",
+              "ariadne-cursor-default",
+              "ariadne-select-none",
+              "ariadne-items-center",
+              "ariadne-rounded-sm",
+              "ariadne-px-2",
+              # "ariadne-py-1.5",
+              "ariadne-text-sm",
+              "ariadne-outline-none",
+              "ariadne-transition-colors",
+              "disabled:ariadne-pointer-events-none",
+              "disabled:ariadne-opacity-50",
+            ]
+          end
+        end
       end
     end
   end

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

@@ -0,0 +1,57 @@
+import {controllerFactory} from '@utils/createController'
+import {useIntersection} from 'stimulus-use'
+
+export default class InputFilterController extends controllerFactory()({
+  targets: {
+    emptyRoot: null,
+    input: HTMLInputElement,
+    searchString: null,
+  },
+}) {
+  private items: {el: HTMLElement; searchString: string}[]
+
+  private handleNewQuery(query: string) {
+    let foundSomething = false
+
+    for (const {el, searchString} of this.items) {
+      const contains = searchString.includes(query.trim().toLowerCase())
+
+      if (!foundSomething && contains) foundSomething = true
+
+      if (contains) {
+        el.classList.remove('ariadne-hidden')
+      } else {
+        el.classList.add('ariadne-hidden')
+      }
+    }
+
+    if (foundSomething) {
+      this.emptyRootTarget.classList.add('ariadne-hidden')
+    } else {
+      this.emptyRootTarget.classList.remove('ariadne-hidden')
+    }
+  }
+
+  connect() {
+    this.items = this.searchStringTargets.map((el: HTMLElement) => {
+      return {
+        el,
+        searchString: (el.textContent ?? '').trim().toLowerCase(),
+      }
+    })
+    useIntersection(this)
+  }
+
+  appear(entry, observer) {
+    this.reset()
+  }
+
+  handleInput() {
+    if (this.hasSearchStringTarget) this.handleNewQuery(this.inputTarget.value)
+  }
+
+  reset() {
+    this.handleNewQuery('')
+    if (this.hasInputTarget) this.inputTarget.value = ''
+  }
+}

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

@@ -1,6 +1,6 @@
 <div data-controller="<%= @stimulus_controllers %>">
-<%= button %>
-<div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-  <%= content %>
-</div>
+  <%= button %>
+  <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
+    <%= content %>
+  </div>
 </div>

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

@@ -28,7 +28,7 @@ module Ariadne
 
                                options[:html_attrs][:data] ||= {}
                                options[:html_attrs][:data] = {
-                                 "#{stimulus_name}-target" => ["toggle", html_attrs.fetch(:data, {}).fetch(:target, nil)].compact.join(" "),
+                                 "#{stimulus_name}-target" => ["button", html_attrs.fetch(:data, {}).fetch(:target, nil)].compact.join(" "),
                                }.merge(options[:html_attrs][:data])
 
                                Ariadne::UI::Button::Component.new(**options)
@@ -38,6 +38,8 @@ module Ariadne
           html_attrs[:id] ||= target_id
           html_attrs[:popover] = ""
 
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
+
           # requires CSS Anchor Positioning
           # as a `style` to account for future feature where the popover can be moved
           # html_attrs[:style] = "inset: unset; top: anchor(--popover-#{target_id} bottom); right: anchor(--popover-#{target_id} left, -1rem);"

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

@@ -24,7 +24,7 @@ export default class PopoverController extends controllerFactory()({
         placement: this.placementValue,
         middleware: [offset(5), flip(), shift({padding: 5})],
       }).then(({x, y}) => {
-        Object.assign(this.target.style, {
+        Object.assign(this.buttonTarget.style, {
           left: `${x}px`,
           top: `${y}px`,
         })

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

@@ -25,8 +25,12 @@ module Ariadne
             :h3
           when :ann
             :h4
+          when :label
+            :h5
           when :lede
             :p
+          when :text
+            :p
           when :code
             :code
           else
@@ -110,6 +114,18 @@ module Ariadne
                 ]
               end
 
+              label do
+                [
+                  "ariadne-justify-between",
+                  "ariadne-whitespace-nowrap",
+                  "ariadne-text-sm",
+                  "ariadne-font-medium",
+                  "ariadne-uppercase",
+                  "ariadne-text-zinc-600",
+                  "dark:ariadne-text-zinc-400",
+                ]
+              end
+
               code do
                 [
                   "ariadne-relative",
@@ -128,6 +144,9 @@ module Ariadne
                   "ariadne-text-muted-foreground",
                 ]
               end
+
+              text do
+              end
             end
           end
         end

data/app/frontend/ariadne/stimulus_app.ts

@@ -40,8 +40,8 @@ for (const [path, module] of Object.entries(controllerModules)) {
   const dirs = path.split('/')
 
   // Dropping ../controllers to end up
-  // with something like "ariadne-component-name"
-  const name = dirs.slice(2, dirs.length).join('-').replace('.ts', '').replaceAll('_', '-').toLocaleLowerCase()
+  // with something like "ariadne-controllername"
+  const name = dirs[dirs.length - 1].replace('_controller.ts', '').replaceAll('_', '-').toLocaleLowerCase()
 
   application.register(
     // @tag stimulus-id

data/app/frontend/controllers/{autosubmittable_controller.ts → form_autosubmit_controller.ts}

@@ -2,8 +2,7 @@ import {Controller} from '@hotwired/stimulus'
 
 import {useDebounce} from 'stimulus-use'
 
-// can't use controllerFactory because it  seems to conflict with `useDebounce`
-export default class AutoSubmittableController extends Controller<HTMLFormElement> {
+export default class FormAutosubmitController extends Controller<HTMLFormElement> {
   static debounces = ['save']
   static targets = ['form']
   declare readonly formTarget: HTMLFormElement