ariadne_view_components 0.0.95.5 → 0.0.96

data/app/components/ariadne/form/text_field/component.html.erb

@@ -1,15 +1,11 @@
-<div>
-  <label
-    class="<%= label_styles %>"
-    for="<%= @name %>"><%= @label %></label>
-  <% if required? %>
-    <span aria-hidden="true">*</span>
-  <% end %>
+<div class="ariadne:space-y-2">
+  <%= render_label %>
   <div class="ariadne:relative">
     <div class="ariadne:pointer-events-none ariadne:absolute ariadne:inset-y-0 ariadne:left-0 ariadne:flex ariadne:items-center ariadne:px-3">
       <%= leading_visual if leading_visual? %>
     </div>
-    <%= content_tag(
+    <div class="ariadne:flex">
+      <%= content_tag(
     input? ? :input : :textarea,
     input? ? nil : html_attrs[:value],
     name: @name,
@@ -17,6 +13,10 @@
     type: @type,
     **html_attrs.except(:class)
     ) %>
+      <% if copyable? %>
+        <%= render Ariadne::UI::ClipboardCopy::Component.new(for: html_attrs[:id], html_attrs: { aria: { label: @label }} ) %>
+      <% end %>
+    </div>
     <% if @validation_message %>
       <%= render(Primer::BaseComponent.new(tag: :div, **@validation_arguments)) do %>
         <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>

data/app/components/ariadne/form/text_field/component.rb

@@ -40,11 +40,8 @@ module Ariadne
         option :size, default: -> { :base }
         option :width, default: -> { :narrow }
 
-        option :label_classes, default: -> { "" }
-        option :label_arguments, default: -> { {} }
-
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = merge_tailwind_classes([style(theme:, size:, width:, type: ), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(theme:, size:, width:, type:), html_attrs[:class]].join(" "))
 
           html_attrs
         end
@@ -57,10 +54,6 @@ module Ariadne
           true
         end
 
-        def label_styles
-          merge_tailwind_classes([style(:label), label_classes].join(" "))
-        end
-
         style do
           base do
             [
@@ -140,41 +133,41 @@ module Ariadne
             end
 
             type do
-              text { }
-                text_area do
-                  [
-                    "ariadne:relative",
-                    "ariadne:px-[calc(--spacing(3.5)-1px)]",
-                    "ariadne:py-[calc(--spacing(2.5)-1px)]",
-                    "ariadne:sm:px-[calc(--spacing(3)-1px)]",
-                    "ariadne:sm:py-[calc(--spacing(1.5)-1px)]",
-                    "ariadne:block",
-                    "ariadne:h-full",
-                    "ariadne:w-full",
-                    "ariadne:appearance-none",
-                    "ariadne:rounded-lg",
-                    "ariadne:text-base/6",
-                    "ariadne:text-zinc-950",
-                    "ariadne:placeholder:text-zinc-500",
-                    "ariadne:sm:text-sm/6",
-                    "ariadne:dark:text-white",
-                    "ariadne:border",
-                    "ariadne:border-zinc-950/10",
-                    "ariadne:data-hover:border-zinc-950/20",
-                    "ariadne:dark:border-white/10",
-                    "ariadne:dark:data-hover:border-white/20",
-                    "ariadne:bg-transparent",
-                    "ariadne:dark:bg-white/5",
-                    "ariadne:focus:outline-hidden",
-                    "ariadne:data-invalid:border-red-500",
-                    "ariadne:data-invalid:data-hover:border-red-500",
-                    "ariadne:dark:data-invalid:border-red-600",
-                    "ariadne:dark:data-invalid:data-hover:border-red-600",
-                    "ariadne:disabled:border-zinc-950/20",
-                    "ariadne:dark:disabled:border-white/15",
-                    "ariadne:dark:data-hover:disabled:border-white/15",
-                    "ariadne:resize-y"
-                  ]
+              text {}
+              text_area do
+                [
+                  "ariadne:relative",
+                  "ariadne:px-[calc(--spacing(3.5)-1px)]",
+                  "ariadne:py-[calc(--spacing(2.5)-1px)]",
+                  "ariadne:sm:px-[calc(--spacing(3)-1px)]",
+                  "ariadne:sm:py-[calc(--spacing(1.5)-1px)]",
+                  "ariadne:block",
+                  "ariadne:h-full",
+                  "ariadne:w-full",
+                  "ariadne:appearance-none",
+                  "ariadne:rounded-lg",
+                  "ariadne:text-base/6",
+                  "ariadne:text-zinc-950",
+                  "ariadne:placeholder:text-zinc-500",
+                  "ariadne:sm:text-sm/6",
+                  "ariadne:dark:text-white",
+                  "ariadne:border",
+                  "ariadne:border-zinc-950/10",
+                  "ariadne:data-hover:border-zinc-950/20",
+                  "ariadne:dark:border-white/10",
+                  "ariadne:dark:data-hover:border-white/20",
+                  "ariadne:bg-transparent",
+                  "ariadne:dark:bg-white/5",
+                  "ariadne:focus:outline-hidden",
+                  "ariadne:data-invalid:border-red-500",
+                  "ariadne:data-invalid:data-hover:border-red-500",
+                  "ariadne:dark:data-invalid:border-red-600",
+                  "ariadne:dark:data-invalid:data-hover:border-red-600",
+                  "ariadne:disabled:border-zinc-950/20",
+                  "ariadne:dark:disabled:border-white/15",
+                  "ariadne:dark:data-hover:disabled:border-white/15",
+                  "ariadne:resize-y",
+                ]
               end
             end
           end
@@ -182,14 +175,7 @@ module Ariadne
 
         style(:label) do
           base do
-            [
-              "ariadne:text-content",
-              "ariadne:dark:text-content-dark",
-              "ariadne:peer-disabled:cursor-not-allowed",
-              "ariadne:peer-disabled:opacity-70",
-              "ariadne:leading-none",
-              "ariadne:font-medium",
-            ]
+            Ariadne::Form::BaseComponent::BASE_LABEL_STYLES
           end
 
           variants do

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

@@ -0,0 +1,10 @@
+<div class="<%= style %>">
+  <% if sidebar_component %>
+    <%= sidebar_component %>
+  <% elsif sidebar_content %>
+    <%= sidebar_content %>
+  <% end %>
+  <div class="<%= style(:main_content) %>">
+    <%= main_content if main_content %>
+  </div>
+</div>

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

@@ -0,0 +1,45 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module Sidebar
+      # Renders a layout with a sidebar on the left and main content on the right.
+      # The sidebar is always positioned on the left side of the layout.
+      class Component < Ariadne::BaseComponent
+        # @param [Ariadne::UI::Sidebar::Component, nil] sidebar_component The sidebar component to render.
+        #        If nil, you must provide sidebar content using with_sidebar_content.
+        option :sidebar_component, optional: true
+        
+        # Sidebar content to be rendered if no sidebar_component is provided
+        # Only used when sidebar_component option is nil
+        renders_one :sidebar_content, Ariadne::BaseComponent::ACCEPT_ANYTHING
+
+        # Main content area to be rendered alongside the sidebar
+        renders_one :main_content, Ariadne::BaseComponent::ACCEPT_ANYTHING
+
+        # Style definitions for the layout container
+        style do
+          base do
+            [
+              "ariadne:flex",
+              "ariadne:h-full",
+              "ariadne:min-h-screen",
+              "ariadne:overflow-hidden"
+            ]
+          end
+        end
+
+        # Main content area styles
+        style(:main_content) do
+          base do
+            [
+              "ariadne:flex-1",
+              "ariadne:overflow-auto"
+            ]
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -17,7 +17,7 @@ module Ariadne
         option :text, optional: true
         # @param [String] src The avatar's URL.
         option :src, optional: true
-        # @param [String] size The avatar's alt text.
+        # @param [String] alt The avatar's alt text.
         option :alt, optional: true
         # @param [String] size (Ariadne::UI::Badge::DEFAULT_SIZE) The avatar's size. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
         option :size, default: proc { :md }

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

@@ -47,8 +47,6 @@ module Ariadne
             [
               "ariadne:truncate",
               "ariadne:max-w-full",
-              "ariadne:border",
-              "ariadne:border-solid",
               "ariadne:border-black/10",
               "ariadne:dark:border-white/10",
               "ariadne:text-content",

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

@@ -50,6 +50,7 @@ export default class ClipboardCopyController extends controllerFactory<HTMLDetai
       target,
       window.setTimeout(() => {
         this.showInitial()
+        this.hideConfirm()
         this.clipboardCopyElementTimers.delete(target)
       }, CLIPBOARD_COPY_TIMER_DURATION),
     )
@@ -70,4 +71,10 @@ export default class ClipboardCopyController extends controllerFactory<HTMLDetai
       this.confirmedTarget.classList.add(this.hiddenClassValue)
     }
   }
+
+  hideConfirm() {
+    if (this.hasConfirmedTarget) {
+      this.confirmedTarget.classList.remove(this.showClassValue)
+    }
+  }
 }

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

@@ -12,13 +12,9 @@
     <%= html_attributes %>>
     <div class="ariadne:flex ariadne:flex-col ariadne:space-y-2 ariadne:text-center ariadne:sm:text-left">
       <span id="<%= dialog_id %>-title" class="ariadne:text-lg ariadne:font-semibold"><%= title %></span>
-  <% if content.present? %>
-    <%= content %>
-  <% else %>
-    <div data-labelled-by="<%= labelledby %>">
-      <%= body %>
-    </div>
-  <% end %>
+  <div data-labelled-by="<%= labelledby %>">
+    <%= body %>
+  </div>
   <% if footer? %>
     <%= footer %>
   <% end %>
@@ -27,7 +23,7 @@
   <%= render Ariadne::UI::Button::Component.new(
           scheme: :nude,
           size: :xs,
-          html_attrs: { "data-action": "click->#{stimulus_name}#swapVisibility", aria: { label: dialog_close_label } }).as_icon(icon: "x-mark", variant: :outline) %>
+          html_attrs: { "data-action": "click->#{stimulus_name}#close", aria: { label: dialog_close_label } }).as_icon(icon: "x-mark", variant: :outline) %>
 </div>
 </div>
 </dialog>

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

@@ -37,7 +37,7 @@ module Ariadne
         # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Button::Component) %>.
         renders_one :reveal_button, lambda { |**options|
           component_data_attrs = {
-            action: "#{Ariadne::UI::Dialog::Component.stimulus_name}#swapVisibility",
+            action: "#{Ariadne::UI::Dialog::Component.stimulus_name}#open",
           }
 
           options[:html_attrs] ||= {}
@@ -50,7 +50,7 @@ module Ariadne
         # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Link::Component) %>.
         renders_one :reveal_link, lambda { |**options|
           component_data_attrs = {
-            action: "#{Ariadne::UI::Dialog::Component.stimulus_name}#swapVisibility",
+            action: "#{Ariadne::UI::Dialog::Component.stimulus_name}#open",
           }
 
           options[:html_attrs] ||= {}
@@ -58,10 +58,8 @@ module Ariadne
           Ariadne::UI::Link::Component.new(**options)
         }
 
-        # The content.
-        #
-        # @param system_arguments [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Dialog::Body::Component) %>.
-        renders_one :body, Ariadne::UI::Dialog::Body::Component
+        # The main content within the dialog.
+       renders_one :body, BaseComponent::ACCEPT_ANYTHING
 
         # Optional footer content to the dialog; usually form buttons for submit or cancel.
         #

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

@@ -4,7 +4,8 @@ import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock'
 export default class DialogController extends controllerFactory()({
   targets: {dialog: HTMLDialogElement},
 }) {
-  close() {
+  close(e?:MouseEvent) {
+    if (e) e.preventDefault()
     if (!this.dialogTarget.open) return
     this.dialogTarget.close()
     enableBodyScroll(this.dialogTarget)
@@ -14,17 +15,12 @@ export default class DialogController extends controllerFactory()({
     this.close()
   }
 
-  open() {
+  open(e: MouseEvent) {
+    e.preventDefault();
     this.dialogTarget.showModal()
     disableBodyScroll(this.dialogTarget, {reserveScrollBarGap: true})
   }
 
-  swapVisibility(e: MouseEvent) {
-    e.preventDefault()
-    if (this.dialogTarget.open) this.close()
-    else this.open()
-  }
-
   windowClick(e: MouseEvent) {
     if (e.target === this.dialogTarget) {
       this.close()

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

@@ -1,4 +1,4 @@
-<div data-controller="<%= @stimulus_controllers %>">
+<div data-controller="<%= @stimulus_controllers %>" data-<%= stimulus_name %>-placement-value="<%= popover_placement %>">
   <%= reveal_button %>
   <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
     <%= content %>

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

@@ -59,18 +59,16 @@ module Ariadne
           html_attrs[:data] ||= {}
           html_attrs[:data] = {
             "#{stimulus_name}-target" => ["popover", html_attrs.fetch(:data, {}).fetch(:target, nil)].compact.join(" "),
-            "#{stimulus_name}-placement-value" => popover_placement,
           }.merge(html_attrs[:data])
         end
 
         def popover_placement
-          placement =
-            case @position
-            when :above then "top"
-            when :below then "bottom"
-            else
-              "bottom"
-            end
+          placement = case @position
+          when :above then "top"
+          when :below then "bottom"
+          else
+            "bottom"
+          end
           placement += "-start" if @alignment == :left
           placement += "-end" if @alignment == :right
           placement

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

@@ -18,13 +18,17 @@ export default class PopoverController extends controllerFactory()({
     })
   }
 
+  toggle() {
+    dispatchEvent(new CustomEvent('toggle', {detail: {newState: this.popoverTarget.open ? 'closed' : 'open'}}))
+  }
+
   updatePosition() {
     autoUpdate(this.buttonTarget, this.popoverTarget, () => {
       computePosition(this.buttonTarget, this.popoverTarget, {
         placement: this.placementValue,
         middleware: [offset(5), flip(), shift({padding: 5})],
       }).then(({x, y}) => {
-        Object.assign(this.buttonTarget.style, {
+        Object.assign(this.popoverTarget.style, {
           left: `${x}px`,
           top: `${y}px`,
         })

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

@@ -0,0 +1,24 @@
+<%# 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

@@ -0,0 +1,82 @@
+# 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:border-r",
+              "ariadne:bg-white", # Add background color matching Figma
+              "ariadne:border-zinc-100",
+              "ariadne:dark:border-zinc-800", # Updated dark border color
+              "ariadne:transition-all",
+              "ariadne:duration-300",
+              "ariadne:ease-in-out",
+              "ariadne:z-20"
+            ]
+          end
+
+          variants do
+            variant do
+              default do
+                []
+              end
+            end
+
+            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

@@ -0,0 +1,14 @@
+<div class="<%= style %>">
+  <% if search %>
+    <div class="ariadne:mb-4">
+      <%= search %>
+    </div>
+  <% end %>
+  <% if groups.any? %>
+    <% groups.each do |group| %>
+      <%= group %>
+    <% end %>
+  <% elsif custom_content %>
+    <%= custom_content %>
+  <% end %>
+</div>

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

@@ -0,0 +1,47 @@
+# 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
+
+          # If no groups are used, any content can be passed directly
+          renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
+          
+          # Search box for the sidebar
+          renders_one :search
+
+          # Whether to render direct content with padding
+          option :padded, default: -> { true }
+
+          style do
+            base do
+              [
+                "ariadne:flex",
+                "ariadne:flex-col",
+                "ariadne:gap-3",
+                "ariadne:flex-1",
+                "ariadne:overflow-y-auto",
+                "ariadne:py-2",
+                "ariadne:bg-white", # Match Figma background
+              ]
+            end
+
+            variants do
+              padded do
+                yes { "ariadne:px-4" }
+                no { "" }
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end 

data/app/components/ariadne/ui/sidebar/footer/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/footer/component.rb

@@ -0,0 +1,54 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Sidebar
+      module Footer
+        # Footer component for the sidebar.
+        # Often used for user profile, settings, or other actions at the bottom of the sidebar.
+        class Component < Ariadne::BaseComponent
+          # @param [Boolean] sticky (true) Whether the footer sticks to the bottom of the sidebar.
+          option :sticky, default: -> { true }
+
+          # Primary content slot for the footer
+          renders_one :primary
+
+          # Secondary content slot for the footer, often used for actions
+          renders_one :secondary
+
+          style do
+            base do
+              [
+                "ariadne:flex",
+                "ariadne:items-center",
+                "ariadne:justify-between",
+                "ariadne:p-4",
+                "ariadne:border-t",
+                "ariadne:border-zinc-100",
+                "ariadne:dark:border-zinc-800",
+              ]
+            end
+
+            variants do
+              sticky do
+                no do
+                  []
+                end
+
+                yes do
+                  [
+                    "ariadne:sticky",
+                    "ariadne:bottom-0",
+                    "ariadne:z-10",
+                    "ariadne:mt-auto",
+                  ]
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end 

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

@@ -0,0 +1,36 @@
+<div class="<%= style %>" 
+     id="<%= component_id %>" 
+     data-controller="<%= collapsible ? 'ariadne-ui-sidebar-group' : nil %>"
+     data-ariadne-ui-sidebar-group-open-value="<%= default_open %>">
+  <% if label.present? %>
+    <div class="<%= style(:label) %>" <%= "data-action='click->ariadne-ui-sidebar-group#toggle'" if collapsible %>>
+      <%= label %>
+      <% if collapsible %>
+        <button type="button" 
+           data-action="ariadne-ui-sidebar-group#toggle"
+           class="ariadne:cursor-pointer ariadne:ml-auto ariadne:flex ariadne:items-center ariadne:text-current ariadne:bg-transparent ariadne:border-0 ariadne:p-0">
+          <%= render Ariadne::UI::Heroicon::Component.new(
+            icon: "chevron-right",
+            size: :xs,
+            variant: :solid,
+            class: "ariadne:ml-auto ariadne:duration-200 ariadne:ease-in-out ariadne:mr-0.5",
+            html_attrs: {
+              data: { "ariadne-ui-sidebar-group-target": "chevron" },
+              class: "ariadne:transition-transform #{default_open ? 'ariadne:rotate-90' : ''}"
+            }
+          ) %>
+        </button>
+      <% end %>
+    </div>
+  <% end %>
+  <div class="<%= style(:items_container, collapsible: collapsible) %> ariadne:overflow-hidden" 
+       data-ariadne-ui-sidebar-group-target="content">
+    <% if items.any? %>
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    <% elsif custom_content %>
+      <%= custom_content %>
+    <% end %>
+  </div>
+</div>