ariadne_view_components 0.0.96.6 → 0.0.96.8

data/app/components/ariadne/{ui → layout}/sidebar/group/component.rb

@@ -2,7 +2,7 @@
 # frozen_string_literal: true
 
 module Ariadne
-  module UI
+  module Layout
     module Sidebar
       module Group
         # Group component for the sidebar.
@@ -18,7 +18,7 @@ module Ariadne
           option :default_open, default: -> { true }
 
           # Individual items in the group
-          renders_many :items, Ariadne::UI::Sidebar::Item::Component
+          renders_many :items, Ariadne::Layout::Sidebar::Group::Item::Component
 
           # Custom content for the group
           renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING

data/app/components/ariadne/layout/sidebar/group/item/component.html.erb

@@ -0,0 +1,21 @@
+<%= content_tag(href.present? ? "a" : "div", data: { collapsed: false }, **html_attrs) do %>
+  <% if custom_content %>
+    <div class="ariadne:flex-1 ariadne:data-[sidebar-collapsed=true]:hidden"><%= custom_content %></div>
+  <% else %>
+    <div class="ariadne:flex ariadne:items-center ariadne:w-full">
+      <% if icon %>
+        <span class="ariadne:flex mr-2 ariadne:items-center ariadne:justify-center ariadne:w-5 ariadne:h-5 ariadne:flex-shrink-0">
+          <%= icon %>
+        </span>
+      <% end %>
+      <% if label.present? %>
+        <span class="ariadne:truncate ariadne:data-[sidebar-collapsed=true]:hidden"><%= label %></span>
+        <% if badge %>
+          <span class="ariadne:ml-auto ariadne:inline-flex ariadne:items-center ariadne:py-0 ariadne:h-5 ariadne:data-[sidebar-collapsed=true]:hidden">
+            <%= badge %>
+          </span>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/ariadne/layout/sidebar/group/item/component.rb

@@ -0,0 +1,76 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module Sidebar
+      module Group
+        module Item
+          # Item component for the sidebar.
+          # Used for navigation links or actions.
+          class Component < Ariadne::BaseComponent
+            # @param [String] href The URL the item links to
+            option :href, default: -> { nil }
+
+            # @param [Boolean] current Whether this item represents the current page
+            option :current, default: -> { false }
+
+            # @param [String] label Text label for the item
+            option :label, default: -> { nil }
+
+            # Icon for the item
+            renders_one :icon, Ariadne::UI::Heroicon::Component
+            # Generic icon slot for custom icons
+            renders_one :icon_slot, BaseComponent::ACCEPT_ANYTHING
+
+            # Badge for the item (e.g., notification count)
+            renders_one :badge, BaseComponent::ACCEPT_ANYTHING
+
+            # Content for the item if not using label/link
+            renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
+
+            accepts_html_attributes do |html_attrs|
+              html_attrs[:class] = merge_tailwind_classes([style(current: current), html_attrs[:class]].join(" "))
+
+              if href.present?
+                html_attrs[:href] = href
+              end
+            end
+
+            style do
+              base do
+                [
+                  "ariadne:flex",
+                  "ariadne:items-center",
+                  "ariadne:gap-3",
+                  "ariadne:p-2",
+                  "ariadne:rounded-md",
+                  "ariadne:text-sm",
+                  "ariadne:font-medium",
+                  "ariadne:transition-colors",
+                  "ariadne:duration-200",
+                  "ariadne:outline-none",
+                  "ariadne:focus-visible:ring-2",
+                  "ariadne:focus-visible:ring-offset-2",
+                  "ariadne:relative",
+                  "ariadne:dark:hover:bg-purple-700/20",
+                ]
+              end
+
+              variants do
+                current do
+                  yes do
+                    [
+                      "ariadne:bg-purple-700/20",
+                      "ariadne:dark:bg-purple-300/20",
+                    ]
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/{ui → layout}/sidebar/header/component.rb

@@ -2,7 +2,7 @@
 # frozen_string_literal: true
 
 module Ariadne
-  module UI
+  module Layout
     module Sidebar
       module Header
         # Header component for the sidebar.
@@ -21,6 +21,7 @@ module Ariadne
             base do
               [
                 "ariadne:flex",
+                "ariadne:flex-col",
                 "ariadne:items-center",
                 "ariadne:justify-between",
                 "ariadne:px-4",

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

@@ -1,4 +1,4 @@
-<span>
+<div class="ariadne:relative ariadne:inline-block">
   <% if src %>
     <%= render Ariadne::UI::Image::Component.new(src:, alt:, size:, html_attrs: ) %>
   <% else %>
@@ -6,4 +6,9 @@
       <%= placeholder_text %>
     </span>
     <% end %>
-  </span>
+    <% if badge? %>
+      <div class="<%= badge_classes %> " style="line-height: 0;" <%= badge.html_attrs.except(:class) %>>
+        <%= badge %>
+      </div>
+    <% end %>
+  </div>

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

@@ -29,11 +29,26 @@ module Ariadne
         # @param [Symbol] shape Shape of the avatar. <%= one_of(Ariadne::UI::Avatar::Component::SHAPE_OPTIONS) %>
         option :shape, default: proc { DEFAULT_SHAPE }
 
-        attr_reader :placeholder_text
+        DEFAULT_BADGE_POSITION = :bottom_right
+        BADGE_POSITIONS = [:top_right, :top_left, :bottom_right, :bottom_left].freeze
+        # @param [Symbol] badge_position Position of the badge relative to the avatar.
+        #   <%= one_of(Ariadne::UI::Avatar::Component::BADGE_POSITIONS) %>
+        option :badge_position, default: proc { DEFAULT_BADGE_POSITION }
 
-        accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = merge_tailwind_classes([style(size:, shape:, has_src: src.present?), html_attrs[:class]].join(" "))
-        end
+        renders_one :badge, types: {
+          heroicon: lambda { |**options|
+            @badge_position = options.delete(:badge_position) || :bottom_right
+
+            Ariadne::UI::Button::Component.new(**options)
+          },
+          image: lambda { |**options|
+            @badge_position = options.delete(:badge_position) || :bottom_right
+
+            Ariadne::UI::Image::Component.new(**options)
+          },
+        }
+
+        attr_reader :placeholder_text
 
         style do
           base do
@@ -41,6 +56,8 @@ module Ariadne
               "ariadne:select-none",
               "ariadne:object-cover",
               "ariadne:shadow-sm",
+              "ariadne:relative", # Needed for badge positioning
+              "ariadne:inline-block", # Ensures proper layout containing the badge
             ]
           end
 
@@ -79,12 +96,25 @@ module Ariadne
                 ]
               end
             end
+
+            has_badge do
+              yes do
+                [
+                  "ariadne:inline-block", # Ensures proper badge positioning
+                  "ariadne:box-border", # Ensures proper sizing with badge
+                ]
+              end
+            end
           end
         end
 
         def before_render
           validate!
 
+          # must be done here rather than within an `accepts_html_attributes` block
+          # because it's dependewnt on `with_badge_*` slot's existence, which isn't known until now
+          html_attrs[:class] = merge_tailwind_classes([style(size:, shape:, has_src: src.present?, has_badge: badge), html_attrs[:class]].join(" "))
+
           # One char long or two
           len = [:xs, :sm, :md].include?(size) ? 0 : 1
           @placeholder_text = (text || "").strip.split[0..len].map { |word| word.capitalize[0] }.join
@@ -108,9 +138,52 @@ module Ariadne
           end
         end
 
+        def badge_position_classes
+          position_classes = {
+            top_right: "ariadne:-top-1 ariadne:-right-1",
+            top_left: "ariadne:-top-1 ariadne:-left-1",
+            bottom_right: "ariadne:-bottom-1 ariadne:-right-1",
+            bottom_left: "ariadne:-bottom-1 ariadne:-left-1",
+          }
+
+          # Apply size-specific adjustments with class-based approach for badge sizing
+          size_classes = case size
+          when :xs, :sm
+            "ariadne:h-3 ariadne:w-3 ariadne:text-[8px]"
+          when :md
+            "ariadne:h-4 ariadne:w-4 ariadne:text-[10px]"
+          when :lg, :xl
+            "ariadne:h-5 ariadne:w-5 ariadne:text-xs"
+          else
+            "ariadne:h-4 ariadne:w-4 ariadne:text-[10px]"
+          end
+
+          # Add border to make badge stand out against avatar
+          "#{position_classes[badge_position]} #{size_classes} ariadne:z-10 ariadne:ring-1 ariadne:ring-white ariadne:dark:ring-gray-800 ariadne:rounded-full ariadne:flex ariadne:items-center ariadne:justify-center ariadne:overflow-hidden"
+        end
+
+        def badge_style_classes
+          [
+            "ariadne:absolute",
+            "ariadne:bg-white",
+            "ariadne:p-0.5",
+            "ariadne:leading-[0]",
+          ]
+        end
+
+        # Returns the merged badge classes
+        def badge_classes
+          merge_tailwind_classes([badge_position_classes, badge_style_classes])
+        end
+
         private def validate!
           raise ArgumentError, "Must provide either `text` or `src`" if @text.blank? && @src.blank?
           raise ArgumentError, "Must provide only `text` or `src`, not both" if @text.present? && @src.present?
+          raise ArgumentError, "Must provide `alt` text when `src` is provided" if @src.present? && @alt.blank?
+
+          if badge? && !BADGE_POSITIONS.include?(badge_position)
+            raise ArgumentError, "Invalid badge position: #{badge_position}. Must be one of: #{BADGE_POSITIONS.join(", ")}"
+          end
         end
       end
     end

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

@@ -26,7 +26,7 @@ module Ariadne
         option :type, default: proc { "button" }
 
         DEFAULT_SCHEME = :primary
-        SCHEME_OPTIONS = [DEFAULT_SCHEME, :outline, :secondary, :nude, :danger].freeze
+        SCHEME_OPTIONS = [DEFAULT_SCHEME, :outline, :secondary, :nude, :danger, :none].freeze
 
         # @param [Symbol] scheme (:primary) Indicates the button's scheme. <%= one_of(Ariadne::UI::Button::Component::SCHEME_OPTIONS) %>
         option :scheme, default: proc { DEFAULT_SCHEME }

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

@@ -5,7 +5,6 @@ export default class DialogController extends controllerFactory()({
   targets: {dialog: HTMLDialogElement},
 }) {
   close(e?:MouseEvent) {
-    if (e) e.preventDefault()
     if (!this.dialogTarget.open) return
     this.dialogTarget.close()
     enableBodyScroll(this.dialogTarget)

data/lib/ariadne/view_components/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.96.6
+  version: 0.0.96.8
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-01 00:00:00.000000000 Z
+date: 2025-04-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -182,6 +182,15 @@ files:
 - app/components/ariadne/layout/section_block/header/component.rb
 - app/components/ariadne/layout/sidebar/component.html.erb
 - app/components/ariadne/layout/sidebar/component.rb
+- app/components/ariadne/layout/sidebar/footer/component.html.erb
+- app/components/ariadne/layout/sidebar/footer/component.rb
+- app/components/ariadne/layout/sidebar/group/component.html.erb
+- app/components/ariadne/layout/sidebar/group/component.rb
+- app/components/ariadne/layout/sidebar/group/component.ts
+- app/components/ariadne/layout/sidebar/group/item/component.html.erb
+- app/components/ariadne/layout/sidebar/group/item/component.rb
+- app/components/ariadne/layout/sidebar/header/component.html.erb
+- app/components/ariadne/layout/sidebar/header/component.rb
 - app/components/ariadne/layout/two_panel/component.html.erb
 - app/components/ariadne/layout/two_panel/component.rb
 - app/components/ariadne/layout/wide/component.html.erb
@@ -245,19 +254,6 @@ files:
 - app/components/ariadne/ui/shortcut/component.html.erb
 - app/components/ariadne/ui/shortcut/component.rb
 - app/components/ariadne/ui/shortcut/component.ts
-- app/components/ariadne/ui/sidebar/component.html.erb
-- app/components/ariadne/ui/sidebar/component.rb
-- app/components/ariadne/ui/sidebar/content/component.html.erb
-- app/components/ariadne/ui/sidebar/content/component.rb
-- app/components/ariadne/ui/sidebar/footer/component.html.erb
-- app/components/ariadne/ui/sidebar/footer/component.rb
-- app/components/ariadne/ui/sidebar/group/component.html.erb
-- app/components/ariadne/ui/sidebar/group/component.rb
-- app/components/ariadne/ui/sidebar/group/component.ts
-- app/components/ariadne/ui/sidebar/header/component.html.erb
-- app/components/ariadne/ui/sidebar/header/component.rb
-- app/components/ariadne/ui/sidebar/item/component.html.erb
-- app/components/ariadne/ui/sidebar/item/component.rb
 - app/components/ariadne/ui/skeleton/component.html.erb
 - app/components/ariadne/ui/skeleton/component.rb
 - app/components/ariadne/ui/stats_panel/component.html.erb

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

@@ -1,24 +0,0 @@
-<%# Sidebar container with data attributes for JavaScript interactions %>
-<%= tag.aside(
-  id: "sidebar-#{object_id}",
-  class: style,
-  data: {
-    controller: "ariadne--ui--sidebar",
-    ariadne__ui__sidebar_target: "sidebar",
-    collapsed: !default_open,
-    collapsible: collapsible,
-  }
-) do %>
-  <%# Render the header if provided %>
-  <% if header_component %>
-    <%= header_component %>
-  <% end %>
-  <%# Render the content if provided %>
-  <% if content_component %>
-    <%= content_component %>
-  <% end %>
-  <%# Render the footer if provided %>
-  <% if footer_component %>
-    <%= footer_component %>
-  <% end %>
-<% end %>

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

@@ -1,72 +0,0 @@
-# typed: false
-# frozen_string_literal: true
-
-module Ariadne
-  module UI
-    module Sidebar
-      # A sidebar component for navigation and application structure.
-      #
-      # The sidebar can be collapsible, with configurable breakpoints for responsive behavior.
-      # It supports header, footer, and content sections with nested groups and items.
-      class Component < Ariadne::BaseComponent
-        # @param [Symbol] collapsible (:icon) Indicates how the sidebar collapses. Can be `:icon` (collapses to icons), `:hidden` (hides completely), or `:none` (doesn't collapse).
-        option :collapsible, default: -> { :icon }
-
-        # @param [Boolean] default_open (true) Whether the sidebar is open by default.
-        option :default_open, default: -> { true }
-
-        # @param [Symbol] variant (:default) The visual variant of the sidebar.
-        option :variant, default: -> { :default }
-
-        # @param [Symbol] size (:md) Size of the sidebar. Can be :sm, :md, or :lg.
-        option :size, default: -> { :md }
-
-        # @param [String] width (null) The width of the sidebar. If provided, overrides the size option.
-        option :width, default: -> { nil }
-
-        # @param [String] collapsed_width (null) The width of the collapsed sidebar. If provided, overrides the default.
-        option :collapsed_width, default: -> { nil }
-
-        # Header component for the sidebar
-        renders_one :header_component, Ariadne::UI::Sidebar::Header::Component
-
-        # Footer component for the sidebar
-        renders_one :footer_component, Ariadne::UI::Sidebar::Footer::Component
-
-        # Content component for the sidebar
-        renders_one :content_component, Ariadne::UI::Sidebar::Content::Component
-        # Define style variants for the sidebar
-        style do
-          base do
-            [
-              "ariadne:flex",
-              "ariadne:flex-col",
-              "ariadne:h-screen",
-              "ariadne:overflow-hidden",
-              "ariadne:transition-all",
-              "ariadne:duration-300",
-              "ariadne:ease-in-out",
-              "ariadne:z-20",
-            ]
-          end
-
-          variants do
-            size do
-              sm do
-                ["ariadne:w-64 ariadne:data-[collapsed=true]:w-16"]
-              end
-
-              md do
-                ["ariadne:w-72 ariadne:data-[collapsed=true]:w-20"]
-              end
-
-              lg do
-                ["ariadne:w-80 ariadne:data-[collapsed=true]:w-24"]
-              end
-            end
-          end
-        end
-      end
-    end
-  end
-end

data/app/components/ariadne/ui/sidebar/content/component.html.erb

@@ -1,13 +0,0 @@
-<div class="<%= style %>">
-  <% if custom_content %>
-    <%= custom_content %>
-  <% end %>
-  <% if search %>
-    <%= search %>
-  <% end %>
-  <% if groups.any? %>
-    <% groups.each do |group| %>
-      <%= group %>
-    <% end %>
-  <% end %>
-</div>

data/app/components/ariadne/ui/sidebar/content/component.rb

@@ -1,37 +0,0 @@
-# typed: false
-# frozen_string_literal: true
-
-module Ariadne
-  module UI
-    module Sidebar
-      module Content
-        # Content component for the sidebar.
-        # Container for sidebar groups and items.
-        class Component < Ariadne::BaseComponent
-          # Accepts any content for the sidebar
-          renders_many :groups, Ariadne::UI::Sidebar::Group::Component
-
-          # Custom content can be placed anywhere within the sidebar content
-          renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
-
-          # Search box for the sidebar
-          renders_one :search, BaseComponent::ACCEPT_ANYTHING
-
-          style do
-            base do
-              [
-                "ariadne:flex",
-                "ariadne:flex-col",
-                "ariadne:gap-4",
-                "ariadne:flex-1",
-                "ariadne:overflow-y-auto",
-                "ariadne:p-4",
-                "ariadne:rounded-md",
-              ]
-            end
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,20 +0,0 @@
-<%= content_tag(href.present? ? "a" : "div", data: { collapsed: false }, **html_attrs) do %>
-  <% if custom_content %>
-    <div class="ariadne:flex-1 ariadne:data-[sidebar-collapsed=true]:hidden"><%= custom_content %></div>
-  <% end %>
-  <div class="ariadne:flex ariadne:items-center ariadne:w-full">
-    <% if icon %>
-      <span class="ariadne:flex mr-2 ariadne:items-center ariadne:justify-center ariadne:w-5 ariadne:h-5 ariadne:flex-shrink-0">
-        <%= icon %>
-      </span>
-    <% end %>
-    <% if label.present? %>
-      <span class="ariadne:truncate ariadne:data-[sidebar-collapsed=true]:hidden"><%= label %></span>
-      <% if badge %>
-        <span class="ariadne:ml-auto ariadne:inline-flex ariadne:items-center ariadne:py-0 ariadne:h-5 ariadne:data-[sidebar-collapsed=true]:hidden">
-          <%= badge %>
-        </span>
-      <% end %>
-    <% end %>
-  </div>
-<% end %>

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

@@ -1,75 +0,0 @@
-# typed: false
-# frozen_string_literal: true
-
-module Ariadne
-  module UI
-    module Sidebar
-      module Item
-        # Item component for the sidebar.
-        # Used for navigation links or actions.
-        class Component < Ariadne::BaseComponent
-          # @param [String] href The URL the item links to
-          option :href, default: -> { nil }
-
-          # @param [Boolean] current Whether this item represents the current page
-          option :current, default: -> { false }
-
-          # @param [String] label Text label for the item
-          option :label, default: -> { nil }
-          option :html_attrs, default: -> { {} }
-
-          # Icon for the item
-          renders_one :icon, Ariadne::UI::Heroicon::Component
-          # Generic icon slot for custom icons
-          renders_one :icon_slot, BaseComponent::ACCEPT_ANYTHING
-
-          # Badge for the item (e.g., notification count)
-          renders_one :badge, BaseComponent::ACCEPT_ANYTHING
-
-          # Content for the item if not using label
-          renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
-
-          accepts_html_attributes do |html_attrs|
-            html_attrs[:class] = merge_tailwind_classes([style(current: current), html_attrs[:class]].join(" "))
-
-            if href.present?
-              html_attrs[:href] = href
-            end
-          end
-
-          style do
-            base do
-              [
-                "ariadne:flex",
-                "ariadne:items-center",
-                "ariadne:gap-3",
-                "ariadne:p-2",
-                "ariadne:rounded-md",
-                "ariadne:text-sm",
-                "ariadne:font-medium",
-                "ariadne:transition-colors",
-                "ariadne:duration-200",
-                "ariadne:outline-none",
-                "ariadne:focus-visible:ring-2",
-                "ariadne:focus-visible:ring-offset-2",
-                "ariadne:relative",
-                "ariadne:dark:hover:bg-purple-700/20",
-              ]
-            end
-
-            variants do
-              current do
-                yes do
-                  [
-                    "ariadne:bg-purple-700/20",
-                    "ariadne:dark:bg-purple-300/20",
-                  ]
-                end
-              end
-            end
-          end
-        end
-      end
-    end
-  end
-end