ariadne_view_components 0.0.95.6 → 0.0.96

data/app/components/ariadne/ui/sidebar/group/component.ts

@@ -0,0 +1,72 @@
+import { controllerFactory } from '@utils/createController'
+
+export default class SidebarGroupController extends controllerFactory()({
+  targets: {
+    content: HTMLElement,
+    chevron: HTMLElement
+  },
+  values: {
+    open: { type: Boolean, default: false }
+  }
+}) {
+  static classes = ['open', 'closed']
+  
+  connect() {
+    this.applyState(this.openValue)
+  }
+  
+
+  toggle(event: Event) {
+    if (event) {
+      event.stopPropagation()
+    }
+    
+    this.openValue = !this.openValue
+  }
+  
+  openValueChanged(isOpen: boolean) {
+    this.applyState(isOpen)
+  }
+  
+  applyState(isOpen: boolean) {
+    const content = this.contentTarget
+    const chevron = this.hasChevronTarget ? this.chevronTarget : null
+    
+    const contentHeight = content.scrollHeight
+    
+    if (isOpen) {
+      content.classList.add('ariadne:animate-accordion-down')
+      content.classList.remove('ariadne:animate-accordion-up')
+      content.style.height = `${contentHeight}px`
+      
+      this.element.classList.add('ariadne-sidebar-group-open')
+      this.element.classList.remove('ariadne-sidebar-group-closed')
+      
+      if (chevron) {
+        chevron.classList.add('ariadne:rotate-90')
+      }
+      
+      setTimeout(() => {
+        if (this.openValue) {
+          content.style.height = 'auto'
+        }
+      }, 200)
+    } else {
+      content.classList.add('ariadne:animate-accordion-up')
+      content.classList.remove('ariadne:animate-accordion-down')
+      
+      content.style.height = `${contentHeight}px`
+      
+      content.offsetHeight
+      
+      content.style.height = '0px'
+      
+      this.element.classList.add('ariadne-sidebar-group-closed')
+      this.element.classList.remove('ariadne-sidebar-group-open')
+      
+      if (chevron) {
+        chevron.classList.remove('ariadne:rotate-90')
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+<div class="<%= style %>">
+  <% if primary %>
+    <div class="ariadne:flex ariadne:items-center ariadne:gap-2">
+      <%= primary %>
+    </div>
+  <% end %>
+  <% if secondary %>
+    <div class="ariadne:flex ariadne:items-center ariadne:gap-2">
+      <%= secondary %>
+    </div>
+  <% end %>
+</div>
+ 

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

@@ -0,0 +1,54 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Sidebar
+      module Header
+        # Header component for the sidebar.
+        # Typically contains branding, logo, and/or application name.
+        class Component < Ariadne::BaseComponent
+          # @param [Boolean] sticky (true) Whether the header sticks to the top of the sidebar.
+          option :sticky, default: -> { true }
+
+          # Primary content for the header
+          renders_one :primary
+
+          # Secondary content for the header, often used for actions
+          renders_one :secondary
+
+          style do
+            base do
+              [
+                "ariadne:flex",
+                "ariadne:items-center",
+                "ariadne:justify-between",
+                "ariadne:p-4",
+                "ariadne:border-b",
+                "ariadne:border-zinc-100",
+                "ariadne:dark:border-zinc-800",
+                "ariadne:bg-white", # Match Figma
+              ]
+            end
+
+            variants do
+              sticky do
+                no do
+                  []
+                end
+
+                yes do
+                  [
+                    "ariadne:sticky",
+                    "ariadne:top-0",
+                    "ariadne:z-10",
+                  ]
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end 

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

@@ -0,0 +1,24 @@
+<% tag_name = href.present? ? "a" : "div" %>
+<% tag_attributes = { class: style(current: current), data: { collapsed: false } } %>
+<% tag_attributes[:href] = href if href.present? %>
+<%= content_tag(tag_name, **tag_attributes) do %>
+  <% if icon %>
+    <span class="ariadne:flex ariadne:items-center ariadne:justify-center ariadne:w-5 ariadne:h-5 ariadne:flex-shrink-0">
+      <%= icon %>
+    </span>
+  <% elsif icon_slot %>
+    <span class="ariadne:flex ariadne:items-center ariadne:justify-center ariadne:w-5 ariadne:h-5 ariadne:flex-shrink-0">
+      <%= icon_slot %>
+    </span>
+  <% end %>
+  <% if label.present? %>
+    <span class="ariadne:truncate ariadne:data-[sidebar-collapsed=true]:hidden"><%= label %></span>
+  <% elsif custom_content %>
+    <span class="ariadne:flex-1 ariadne:data-[sidebar-collapsed=true]:hidden"><%= custom_content %></span>
+  <% end %>
+  <% if badge %>
+    <div class="ariadne:ml-auto ariadne:data-[sidebar-collapsed=true]:hidden">
+      <%= badge %>
+    </div>
+  <% end %>
+<% end %> 

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

@@ -0,0 +1,78 @@
+# 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 }
+
+          # 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, Ariadne::UI::Badge::Component
+
+          # Content for the item if not using label
+          renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
+
+          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",
+              ]
+            end
+
+            variants do
+              current do
+                no do
+                  [
+                    "ariadne:text-zinc-700",
+                    "ariadne:dark:text-zinc-300",
+                    "ariadne:hover:bg-violet-50", # Purple hover state based on Figma
+                    "ariadne:hover:text-violet-700", # Text color on hover
+                    "ariadne:dark:hover:bg-violet-900",
+                    "ariadne:dark:hover:text-violet-300",
+                  ]
+                end
+
+                yes do
+                  [
+                    "ariadne:text-violet-700", # Purple active text based on Figma
+                    "ariadne:bg-violet-50", # Light purple background
+                    "ariadne:dark:text-violet-300",
+                    "ariadne:dark:bg-violet-900",
+                  ]
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end 

data/app/frontend/stylesheets/ariadne_view_components.css

@@ -1,5 +1,5 @@
 @import 'tailwindcss' prefix(ariadne);
-
+@import 'tw-animate-css';
 @import '@evilmartians/harmony/tailwind.css';
 
 @import './theme.css' layer(base);

data/app/helpers/ariadne/form_helper.rb

@@ -5,7 +5,10 @@ module Ariadne
   # :nodoc:
   module FormHelper
     def ariadne_form_with(**kwargs, &block)
-      kwargs[:id] ||= Ariadne::BaseComponent.generate_id(base_name: "form")
+      kwargs[:id] = Ariadne::BaseComponent.generate_id(base_name: "form")
+      kwargs[:data] ||= {}
+      kwargs[:data]["ariadne-form-validity-target"] = "form"
+
       form_with(**kwargs, skip_default_ids: false, builder: Ariadne::Forms::Builder, &block)
     end
 

data/lib/ariadne/view_components/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.95.6
+  version: 0.0.96
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-17 00:00:00.000000000 Z
+date: 2025-03-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -141,6 +141,7 @@ files:
 - app/components/ariadne/form/group/component.rb
 - app/components/ariadne/form/hidden_field/component.html.erb
 - app/components/ariadne/form/hidden_field/component.rb
+- app/components/ariadne/form/label_helper.rb
 - app/components/ariadne/form/radio/component.html.erb
 - app/components/ariadne/form/radio/component.rb
 - app/components/ariadne/form/radio_button/component.html.erb
@@ -177,6 +178,8 @@ files:
 - app/components/ariadne/layout/section_block/component.rb
 - app/components/ariadne/layout/section_block/header/component.html.erb
 - 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/two_panel/component.html.erb
 - app/components/ariadne/layout/two_panel/component.rb
 - app/components/ariadne/layout/wide/component.html.erb
@@ -213,8 +216,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/dialog/body/component.html.erb
-- app/components/ariadne/ui/dialog/body/component.rb
 - app/components/ariadne/ui/dialog/component.html.erb
 - app/components/ariadne/ui/dialog/component.rb
 - app/components/ariadne/ui/dialog/component.ts
@@ -242,6 +243,19 @@ 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/dialog/body/component.html.erb

@@ -1,3 +0,0 @@
-<div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-  <%= content %>
-</div>

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

@@ -1,28 +0,0 @@
-# typed: false
-# frozen_string_literal: true
-
-module Ariadne
-  module UI
-    module Dialog
-      module Body
-        # A `Dialog::Body` is a compositional component, used to render the
-        # innards of a dialog. See <%= link_to_component(Ariadne::UI::Dialog::Component) %>.
-        class Component < Ariadne::BaseComponent
-          attr_accessor :context
-
-          accepts_html_attributes do |html_attrs|
-            html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
-
-            html_attrs
-          end
-
-          style do
-            base do
-              []
-            end
-          end
-        end
-      end
-    end
-  end
-end