ariadne_view_components 0.0.80.3 → 0.0.81

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/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="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,110 @@ 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-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-flex",
+              # "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,6 +25,8 @@ module Ariadne
             :h3
           when :ann
             :h4
+          when :label
+            :h5
           when :lede
             :p
           when :code
@@ -110,6 +112,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",

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

data/app/lib/ariadne/view_component/style_variants.rb

@@ -11,6 +11,56 @@ module Ariadne
           @default_style_name ||= name.split("::")[-2].underscore.presence || "component"
         end
       end
+
+      extend ActiveSupport::Concern
+
+      class_methods do
+        def accepts_styles_for(*names, **defaults, &block)
+          names ||= []
+          names << default_style_name
+
+          names.each do |name|
+            style_accessors[name] = {}
+          end
+
+          method_name = :styles
+          ivar_name = :"@styles"
+
+          attr_reader(method_name)
+
+          mod = Module.new do
+            define_method(:initialize) do |**options|
+              value = options.delete(method_name)&.to_h || {}
+
+              super(**options)
+              instance_exec(value, &block) if block
+              instance_variable_set(ivar_name, value)
+            end
+          end
+
+          prepend(mod)
+        end
+
+        # use `accepts_styles` to allow end users to merge their own styles with Ariadne's provided ones
+        def accepts_styles(*names, **defaults, &block)
+          accepts_styles_for(*names, **defaults, &block)
+        end
+
+        def style_accessors
+          @style_accessors ||=
+            if superclass.respond_to?(:style_accessors)
+              superclass.style_accessors.deep_dup
+            else
+              {}
+            end
+        end
+      end
+
+      # merge Araidne style variants with user provided overrides
+      def merged_styles(name = self.class.default_style_name, **variants)
+        default_styles = self.class.style_config.compile(name.to_sym, **variants)
+        Ariadne::ViewComponents.tailwind_merger.merge([default_styles, styles.fetch(name, "")])
+      end
     end
   end
 end

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.80.3"
+    VERSION = "0.0.81"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.80.3
+  version: 0.0.81
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-29 00:00:00.000000000 Z
+date: 2024-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -194,10 +194,6 @@ files:
 - app/components/ariadne/ui/combobox/component.html.erb
 - app/components/ariadne/ui/combobox/component.rb
 - app/components/ariadne/ui/combobox/component.ts
-- app/components/ariadne/ui/combobox/item/component.html.erb
-- app/components/ariadne/ui/combobox/item/component.rb
-- app/components/ariadne/ui/combobox/option/component.html.erb
-- app/components/ariadne/ui/combobox/option/component.rb
 - app/components/ariadne/ui/data_table/component.html.erb
 - app/components/ariadne/ui/data_table/component.rb
 - app/components/ariadne/ui/dialog/component.html.erb
@@ -213,8 +209,7 @@ files:
 - app/components/ariadne/ui/link/component.rb
 - app/components/ariadne/ui/list/component.html.erb
 - app/components/ariadne/ui/list/component.rb
-- app/components/ariadne/ui/list/item/component.html.erb
-- app/components/ariadne/ui/list/item/component.rb
+- app/components/ariadne/ui/list/component.ts
 - app/components/ariadne/ui/overlay/component.html.erb
 - app/components/ariadne/ui/overlay/component.rb
 - app/components/ariadne/ui/overlay/component.ts
@@ -238,7 +233,7 @@ files:
 - app/frontend/ariadne/index.ts
 - app/frontend/ariadne/stimulus_app.ts
 - app/frontend/ariadne/theme.ts
-- app/frontend/controllers/autosubmittable_controller.ts
+- app/frontend/controllers/form_autosubmit_controller.ts
 - app/frontend/entrypoints/application.ts
 - app/frontend/stylesheets/ariadne_view_components.css
 - app/frontend/stylesheets/scrollbar.css

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

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

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

@@ -1,61 +0,0 @@
-# typed: false
-# frozen_string_literal: true
-
-module Ariadne
-  module UI
-    module Combobox
-      module Item
-        class Component < Ariadne::BaseComponent
-          option :label
-          option :as, default: proc { :link } # :button
-
-          accepts_html_attributes do |html_attrs|
-            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(as:), html_attrs[:class]].join(" "))
-
-            # html_attrs["data-input-filter-target"] = "searchString"
-            if as == :link && !html_attrs[:target]
-              html_attrs[:target] = "_top"
-            end
-          end
-
-          def initialize(**options)
-            super(**options)
-          end
-
-          style do
-            base do
-              [
-                "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",
-              ]
-            end
-            variants do
-              as do
-                button do
-                  "ariadne-appearance-none ariadne-inline-flex ariadne-w-full"
-                end
-
-                link do
-                  "ariadne-cursor-pointer"
-                end
-              end
-            end
-          end
-
-          def link?
-            as == :link
-          end
-        end
-      end
-    end
-  end
-end

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

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

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

@@ -1,44 +0,0 @@
-# typed: false
-# frozen_string_literal: true
-
-module Ariadne
-  module UI
-    module Combobox
-      module Option
-        class Component < Ariadne::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: "#{Ariadne::UI::Combobox::Component.stimulus_name}#checkboxClicked" }
-            }
-
-          def option_component
-            cmp = type == :multiple ? Ariadne::Form::Checkbox : Ariadne::Form::Radio
-            render(cmp::Component.new(html_attrs:))
-          end
-
-          style do
-            base do
-              [
-                "ariadne-flex",
-                "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",
-              ]
-            end
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,16 +0,0 @@
-<div class="ariadne-flex ariadne-gap-3 ariadne-items-center ariadne-py-2">
-
-      <div class="ariadne-shrink-0">
-            <%= leading_item if leading_item? %>
-        </div>
-  <div class="ariadne-overflow-hidden">
-        <%= cell %>
-  </div>
-  <div class="ariadne-grow ariadne-flex ariadne-justify-end">
-   <%= trailing_item if trailing_item? %>
-  </div>
-  <% if trailing_menu? %>
-
-  <% end %>
-
-</div>