ariadne_view_components 0.0.82 → 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/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",
@@ -62,7 +63,15 @@ module Ariadne
                 ]
               end
 
-              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="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 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/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/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/form_object.rb

@@ -9,7 +9,7 @@ module Ariadne
 
         attr_reader :builder, :form, :id
 
-        def initialize(builder:, form:, id: ::Ariadne.generate_id)
+        def initialize(builder:, form:, id: ::Ariadne::ViewHelper.generate_id)
           @builder = builder
           @form = form
           @id = id

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

@@ -108,7 +108,7 @@ module Ariadne
 
           @options[:invalid] = "true" if invalid?
 
-          @base_id = Ariadne.generate_id
+          @base_id = ::Ariadne::ViewHelper.generate_id
 
           @ids = {}.tap do |id_map|
             id_map[:validation] = "validation-#{@base_id}" if supports_validation?

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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class SelectInput < Input
+        SELECT_ARGUMENTS = [:multiple, :include_blank, :include_hidden, :prompt].freeze
+
+        attr_reader :name, :label, :options, :select_arguments
+
+        def initialize(name:, label:, **options)
+          @name = name
+          @label = label
+          @options = []
+
+          @select_arguments = {}.tap do |select_args|
+            SELECT_ARGUMENTS.each do |select_arg|
+              select_args[select_arg] = options.delete(select_arg)
+            end
+          end
+
+          super(**options)
+
+          yield(self) if block_given?
+        end
+
+        def multiple?
+          @select_arguments.fetch(:multiple, false)
+        end
+
+        def to_component
+          Ariadne::Form::Select::Component.new(name:, label:, **@options)
+        end
+
+        # :nocov:
+        def type
+          :select_list
+        end
+        # :nocov:
+
+        # :nocov:
+        def focusable?
+          true
+        end
+        # :nocov:
+      end
+    end
+  end
+end

data/lib/ariadne/view_components/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.82
+  version: 0.0.83
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-06-19 00:00:00.000000000 Z
+date: 2024-07-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -151,6 +151,8 @@ files:
 - app/components/ariadne/form/radio_button/component.rb
 - app/components/ariadne/form/radio_button_group/component.html.erb
 - app/components/ariadne/form/radio_button_group/component.rb
+- app/components/ariadne/form/select/component.html.erb
+- app/components/ariadne/form/select/component.rb
 - app/components/ariadne/form/separator/component.html.erb
 - app/components/ariadne/form/separator/component.rb
 - app/components/ariadne/form/text_field/component.html.erb
@@ -174,6 +176,11 @@ files:
 - app/components/ariadne/turbo/frame/component.rb
 - app/components/ariadne/turbo/stream_action/component.html.erb
 - app/components/ariadne/turbo/stream_action/component.rb
+- app/components/ariadne/ui/accordion/component.html.erb
+- app/components/ariadne/ui/accordion/component.rb
+- app/components/ariadne/ui/accordion/component.ts
+- app/components/ariadne/ui/accordion/item/component.html.erb
+- app/components/ariadne/ui/accordion/item/component.rb
 - app/components/ariadne/ui/badge/component.html.erb
 - app/components/ariadne/ui/badge/component.rb
 - app/components/ariadne/ui/blankslate/component.html.erb
@@ -234,6 +241,7 @@ files:
 - app/frontend/ariadne/stimulus_app.ts
 - app/frontend/ariadne/theme.ts
 - app/frontend/controllers/form_autosubmit_controller.ts
+- app/frontend/controllers/form_validity_controller.ts
 - app/frontend/entrypoints/application.ts
 - app/frontend/stylesheets/ariadne_view_components.css
 - app/frontend/stylesheets/scrollbar.css
@@ -264,6 +272,7 @@ files:
 - lib/ariadne/forms/dsl/input_methods.rb
 - lib/ariadne/forms/dsl/radio_button_group_input.rb
 - lib/ariadne/forms/dsl/radio_button_input.rb
+- lib/ariadne/forms/dsl/select_input.rb
 - lib/ariadne/forms/dsl/submit_button_input.rb
 - lib/ariadne/forms/dsl/text_field_input.rb
 - lib/ariadne/forms/utils.rb