ariadne_view_components 0.0.81 → 0.0.83

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

@@ -16,10 +16,32 @@ module Ariadne
         option :type, default: proc { "button" }
         option :state, default: proc { "" }
         option :theme, default: proc { :primary }
-        option :size, default: proc { :base }
+        option :size, default: proc { :md }
         option :width, default: proc { :narrow }
 
-        renders_one :leading_visual_icon, Ariadne::UI::Heroicon::Component
+        # Leading visuals appear to the left of the button text.
+        #
+        # Use:
+        #
+        # - `leading_visual_heroicon` for a <%= link_to_component(Ariadne::UI::Heroicon::Component) %>.
+        renders_one :leading_visual, types: {
+          heroicon: lambda { |**options|
+            options[:size] = @size
+            Ariadne::UI::Heroicon::Component.new(**options)
+          },
+        }
+
+        # Trailing visuals appear to the right of the button text.
+        #
+        # Use:
+        #
+        # - `trailing_visual_heroicon` for a <%= link_to_component(Ariadne::UI::Heroicon::Component) %>.
+        renders_one :trailing_visual, types: {
+          heroicon: lambda { |**options|
+            options[:size] = @size
+            Ariadne::UI::Heroicon::Component.new(**options)
+          },
+        }
 
         accepts_html_attributes do |html_attrs|
           html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(theme:, size:, icon_only:, width:), html_attrs[:class]].join(" "))
@@ -45,7 +67,8 @@ module Ariadne
           @icon_only = true
           @aria_label = aria(html_attrs, "label")
           @aria_description = aria(html_attrs, "description")
-          options.delete(:size)
+
+          options[:size] = @size
 
           @icon = Ariadne::UI::Heroicon::Component.new(**options)
           self
@@ -60,7 +83,7 @@ module Ariadne
               "ariadne-gap-x-1.5",
               "ariadne-rounded",
               "ariadne-px-2",
-              "ariadne-py-1",
+              # "ariadne-py-1",
               "ariadne-font-semibold",
               "ariadne-shadow-sm",
               "ariadne-text-black",
@@ -140,6 +163,12 @@ module Ariadne
                   "dark:active:ariadne-bg-red-400",
                 ]
               end
+
+              none do
+                [
+                  "ariadne-shadow-none",
+                ]
+              end
             end
 
             size do
@@ -154,7 +183,7 @@ module Ariadne
                   "ariadne-leading-5",
                 ]
               end
-              base do
+              md do
                 [
                   "ariadne-rounded-md",
                   "ariadne-px-2.5",
@@ -190,9 +219,7 @@ module Ariadne
           end
         end
 
-        private
-
-        def button_tag
+        private def button_tag
           if link?
             "a"
           else
@@ -200,8 +227,19 @@ module Ariadne
           end
         end
 
-        def link? = as == :link
-        def button? = as == :button
+        private def link? = as == :link
+        private def button? = as == :button
+
+        private def trimmed_content
+          return if content.blank?
+
+          trimmed_content = content.strip
+
+          return trimmed_content unless content.html_safe?
+
+          # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+          trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
+        end
       end
     end
   end

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

@@ -1,7 +1,17 @@
 <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
+  <% if href.present? %>
+    <%= render(Ariadne::UI::Link::Component.new(href: href, theme: :none, html_attrs: { class: "w-full h-full"})) do %>
+      <%= header %>
+      <div class="ariadne-p-6 ariadne-pt-0">
+        <%= content %>
+      </div>
+      <%= footer %>
+    <% end %>
+  <% else %>
     <%= header %>
-  <div class="ariadne-p-6 ariadne-pt-0">
-    <%= content %>
+    <div class="ariadne-p-6 ariadne-pt-0">
+      <%= content %>
     </div>
     <%= footer %>
   </div>
+<% end %>

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

@@ -5,10 +5,12 @@ module Ariadne
   module UI
     module Card
       class Component < Ariadne::BaseComponent
+        option :href, default: -> { nil }
+
         renders_one :header, Ariadne::UI::Card::Header::Component
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(link: href.present? ? :yes : :no), html_attrs[:class]].join(" "))
         end
 
         renders_one :footer, Ariadne::UI::Card::Footer::Component
@@ -18,13 +20,30 @@ module Ariadne
             [
               "ariadne-rounded-lg",
               "ariadne-border",
-              "ariadne-shadow-sm",
               "ariadne-bg-foreground",
               "dark:ariadne-bg-foreground-dark",
               "ariadne-text-content",
               "dark:ariadne-text-content-dark",
             ]
           end
+
+          variants do
+            link do
+              no do
+                []
+              end
+
+              yes do
+                [
+                  "hover:ariadne-shadow-md",
+                  "hover:ariadne-border-indigo-600",
+                  "dark:hover:ariadne-border-indigo-400",
+                  "hover:ariadne-bg-foreground-700/10",
+                  "dark:hover:ariadne-bg-foreground-300/10",
+                ]
+              end
+            end
+          end
         end
       end
     end

data/app/components/ariadne/ui/card/header/component.html.erb

@@ -1,7 +1,6 @@
 <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-    <%= title %>
-
-    <% if description %>
+  <%= title %>
+  <% if description %>
     <%= description %>
-    <% end %>
+  <% end %>
 </div>

data/app/components/ariadne/ui/card/header/component.rb

@@ -6,17 +6,20 @@ module Ariadne
     module Card
       module Header
         class Component < Ariadne::BaseComponent
-          option :prioritize, default: proc { :title }
-          option :size, default: proc { :base }
-
           renders_one :title, lambda { |type: :subheading, **options|
                                 options[:type] ||= type
+                                options[:html_attrs] ||= {}
+                                options[:html_attrs][:class] ||= ""
+                                options[:html_attrs][:class] = [
+                                  "ariadne-grow",
+                                  "ariadne-leading-none",
+                                  options[:html_attrs][:class],
+                                ]
                                 Ariadne::UI::Typography::Component.new(**options)
                               }
 
-          renders_one :description, lambda { |type: :muted, size: :sm, **options|
+          renders_one :description, lambda { |type: :muted, **options|
                                       options[:type] ||= type
-                                      options[:size] ||= size
                                       Ariadne::UI::Typography::Component.new(**options)
                                     }
 

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

@@ -19,12 +19,14 @@ module Ariadne
         renders_one :button, Ariadne::UI::Button::Component
 
         accepts_html_attributes do |html_attrs|
+          html_attrs[:data] ||= {}
           html_attrs[:data] = {
-            controller: stimulus_name,
+            controller: "#{stimulus_name} #{html_attrs[:data].delete(:controller)}".strip,
             "#{stimulus_name}-target": "wrapper",
             "#{stimulus_name}-placement-value": placement,
             "#{stimulus_name}-clamped-value": clamped,
-          }
+          }.merge(html_attrs[:data])
+
           if changed_action
             html_attrs[:data][:action] = "#{stimulus_name}:changed->#{changed_action}"
           end

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

@@ -13,6 +13,7 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
   values: {
     clamped: Boolean,
     placement: String,
+    dynamicLabelPrefix: String,
   },
 }) {
   private changedIds = new Set<string>()
@@ -43,17 +44,19 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
   }
 
   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})
-      })
+    for (const formType of ['checkbox', 'radio']) {
+      // https://github.com/github/details-menu-element?tab=readme-ov-file#markup
+      for (const el of this.popoverTarget.querySelectorAll(`input[type="${formType}"]`)) {
+        el.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})
+        })
+      }
     }
   }
 
@@ -97,6 +100,19 @@ export default class ComboboxController extends controllerFactory<HTMLDetailsEle
     this.unsubAutoUpdate = autoUpdate(this.buttonTarget, this.popoverTarget, updatePopoverPosition)
   }
 
+  updateButtonLabel(e: Event): void {
+    const target = e.target as HTMLDetailsElement
+    const checkedRadioButton = target.querySelector('input[type=radio]:checked') as HTMLInputElement | null
+
+    if (!checkedRadioButton) return
+
+    const selectedText = (checkedRadioButton.labels?.item(0) as HTMLLabelElement).textContent
+
+    this.buttonTarget.querySelector(
+      '[data-ariadne-ui-button-target="content"]',
+    ).textContent = `${this.dynamicLabelPrefixValue}${selectedText}`
+  }
+
   toggle(): void {
     this.element.open = !this.element.open
     this.setupAutoUpdate()

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

@@ -19,9 +19,10 @@ module Ariadne
         style do
           base do
             [
+              "ariadne-cursor-pointer",
               "ariadne-text-content",
               "dark:ariadne-text-content-dark",
-              "ariadne-inline-flex",
+              # "ariadne-inline-flex",
               "ariadne-items-center",
               "ariadne-border-b",
               "ariadne-border-transparent",
@@ -32,21 +33,45 @@ 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" }
+
+              none do
+                []
+              end
+
+              thick do
+                [
+                  "ariadne-font-semibold",
+                ]
+              end
             end
             size do
               xs { "ariadne-text-xs ariadne-gap-0.5 [&>svg]:ariadne-size-3" }

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

@@ -15,12 +15,19 @@
         <div class="ariadne-truncate" role="menuitemcheckbox"><%= checkbox %></div>
       </div>
     <% end %>
+    <% radio_buttons.each do |radio_button| %>
+      <div
+            class="<%= style(:item) %>"
+            data-<%= stimulus_name %>-target="searchString">
+        <div class="ariadne-truncate" role="menuitemradiobutton"><%= radio_button %></div>
+      </div>
+    <% end %>
     <% items.each do |item| %>
       <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 class="ariadne-relative ariadne-flex "><%= item %></div>
       </div>
     <% end %>
     <div class="ariadne-text-center ariadne-hidden" data-<%= stimulus_name %>-target="emptyRoot">

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

@@ -42,7 +42,23 @@ module Ariadne
 
           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]}"
+          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)
         }
@@ -86,7 +102,6 @@ module Ariadne
         style :item do
           base do
             [
-              "ariadne-flex",
               # "ariadne-gap-0.5",
               "ariadne-items-center",
               "ariadne-rounded",

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

@@ -68,7 +68,7 @@ module Ariadne
         end
 
         def target_id
-          @target_id ||= Ariadne.generate_id
+          @target_id ||= ::Ariadne::ViewHelper.generate_id
         end
 
         style do

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

@@ -29,6 +29,8 @@ module Ariadne
             :h5
           when :lede
             :p
+          when :text
+            :p
           when :code
             :code
           else
@@ -142,6 +144,9 @@ module Ariadne
                   "ariadne-text-muted-foreground",
                 ]
               end
+
+              text do
+              end
             end
           end
         end

data/app/frontend/controllers/form_validity_controller.ts

@@ -0,0 +1,32 @@
+import {controllerFactory} from '@utils/createController'
+import {useMutation} from 'stimulus-use'
+
+/**
+ * Simple controller that sets `disabled` attribute on submit button
+ * based on the basic validity of the form (HTML validation only).
+ */
+export default class FormValidity extends controllerFactory<HTMLFormElement>()({
+  targets: {
+    button: HTMLButtonElement,
+    form: HTMLFormElement,
+  },
+}) {
+  private get form(): HTMLFormElement {
+    return this.hasFormTarget ? this.formTarget : this.element
+  }
+
+  private runCheck() {
+    this.buttonTarget.disabled = !this.form.checkValidity()
+  }
+
+  connect() {
+    this.form.addEventListener('input', () => this.runCheck())
+    this.runCheck()
+
+    useMutation(this, {childList: true, subtree: true})
+  }
+
+  mutate() {
+    this.runCheck()
+  }
+}

data/app/lib/ariadne/view_helper.rb

@@ -6,6 +6,12 @@ module Ariadne
   module ViewHelper
     class ViewHelperNotFound < StandardError; end
 
+    class << self
+      def generate_id
+        SecureRandom.hex(6)
+      end
+    end
+
     HELPERS = {
       heroicon: "Ariadne::UI::Heroicon::Component",
     }.freeze

data/lib/ariadne/forms/dsl/badge.rb

@@ -23,11 +23,11 @@ module Ariadne
         end
 
         def type
-          :group
+          :badge
         end
 
         def input?
-          true
+          false
         end
       end
     end

data/lib/ariadne/forms/dsl/button_input.rb

@@ -17,7 +17,8 @@ module Ariadne
         end
 
         def to_component
-          Ariadne::UI::Button::Component.new(**@options).with_content(@label)
+          html_attrs = @input_attributes || {}
+          Ariadne::UI::Button::Component.new(**@options, html_attrs: html_attrs).with_content(@label)
         end
 
         # :nocov: