ariadne_view_components 0.0.70 → 0.0.71

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

@@ -6,7 +6,7 @@ module Ariadne
     module Combobox
       class Component < BaseComponent
         option :placement, default: proc { "bottom" }
-        option :show_search, default: proc { :yes }
+        option :show_search, default: proc { :no }
         option :size, default: proc { :md }
 
         option :clamped, default: proc { false }
@@ -15,20 +15,15 @@ module Ariadne
 
         option :filter_placeholder, default: proc { "Filter…" }
 
-        renders_many :options, Ariadne::UI::Combobox::MenuItem::Component
-        renders_one :selector, ->(size:, icon:) do
-          render(Ariadne::UI::Button::Component.new(theme: :ghost, size: size, icon_only: :yes)) do
-            render(Ariadne::UI::Heroicon::Component.new(icon: icon, variant: :solid, size: size))
-          end
-        end
+        renders_many :options, Ariadne::UI::Combobox::Option::Component
+        # behind the scenes, an item is just a very specific type of option
+        renders_many :items, Ariadne::UI::Combobox::Item::Component
 
-        def any_options?
-          options.any?
-        end
+        renders_one :button, Ariadne::UI::Button::Component
 
         accepts_html_attributes do |html_attrs|
           html_attrs[:data] = {
-            controller: "input-filter #{stimulus_name}",
+            controller: "ariadne-ui-input-filter #{stimulus_name}",
             "#{stimulus_name}-placement-value": placement,
             "#{stimulus_name}-clamped-value": clamped,
           }
@@ -43,38 +38,55 @@ module Ariadne
           type: "search",
           placeholder: proc { @filter_placeholder },
           data: {
-            "input-filter-target": "input",
+            "ariadne-ui-input-filter-target": "input",
             "#{stimulus_name}-target": "searchInput",
-            "action": "input-filter#handleInput",
+            "action": "ariadne-ui-input-filter#handleInput",
           }
 
+        def initialize(**options)
+          super
+          validate!
+        end
+
+        def choices?
+          items? || options?
+        end
+
+        def choices
+          items.presence || options
+        end
+
+        private def validate!
+          # raise ArgumentError, "Must provide only `options` or `items`, not both" if items? && options?
+        end
+
         style :popover do
           base do
             [
-              "fixed",
-              "max-w-[90vw]",
-              "z-20",
-              "scroll",
-              "scrollbar-trigger",
-              "rounded-lg",
-              "shadow-lg",
-              "bg-white",
-              "dark:bg-zinc-900",
+              "ariadne-fixed",
+              "ariadne-max-w-[90vw]",
+              "ariadne-z-20",
+              "ariadne-scroll",
+              "ariadne-scrollbar-trigger",
+              "ariadne-rounded-lg",
+              "ariadne-shadow-lg",
+              "ariadne-bg-white",
+              "dark:ariadne-bg-zinc-900",
             ]
           end
 
           variants do
             size do
-              sm { "w-36" }
-              md { "w-52" }
-              lg { "w-96" }
+              sm { "ariadne-w-36" }
+              md { "ariadne-w-52" }
+              lg { "ariadne-w-96" }
             end
           end
         end
 
         style :options do
           base do
-            ["overflow-auto", "p-2"]
+            ["ariadne-overflow-auto", "ariadne-p-2"]
           end
         end
       end

data/app/components/ariadne/ui/combobox/{menu_item → item}/component.html.erb

@@ -1,5 +1,5 @@
 <% slot = capture do %>
-  <span class="truncate"><%= label %></span>
+  <span class="ariadne-truncate"><%= label %></span>
 <% end %>
 
 <%= content_tag(

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

@@ -0,0 +1,61 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Combobox
+      module Item
+        class Component < BaseComponent
+          option :label
+          option :as, default: proc { :link } # :button
+
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(as:), html_attrs[:class]].join(" "))
+
+            # html_attrs["data-input-filter-target"] = "searchString"
+            if as == :link && !html_attrs[:target]
+              html_attrs[:target] = "_top"
+            end
+          end
+
+          def initialize(**options)
+            super(**options)
+          end
+
+          style do
+            base do
+              [
+                "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",
+              ]
+            end
+            variants do
+              as do
+                button do
+                  "ariadne-appearance-none ariadne-inline-flex ariadne-w-full"
+                end
+
+                link do
+                  "ariadne-cursor-pointer"
+                end
+              end
+            end
+          end
+
+          def link?
+            as == :link
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/combobox/option/component.html.erb

@@ -4,7 +4,7 @@
   class="<%= style %>">
   <span class="px-1"><%= option_component %></span>
   <span
-    class="truncate <%= text_content ? 'px-1' : 'inline-flex items-center' %>"
+    class="ariadne-truncate <%= text_content ? 'ariadne-px-1' : 'ariadne-inline-flex ariadne-items-center' %>"
     data-input-filter-target="searchString">
     <%= content %>
   </span>

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

@@ -14,27 +14,26 @@ module Ariadne
           accepts_html_attributes disabled: false,
             tabindex: -1,
             data: proc {
-              { action: "#{UI::Combobox::Component.stimulus_name}#checkboxClicked" }
+              { action: "#{Ariadne::UI::Combobox::Component.stimulus_name}#checkboxClicked" }
             }
 
           def option_component
-            cmp = type == :multiple ? Checkbox : Radio
+            cmp = type == :multiple ? Ariadne::Form::Checkbox : Ariadne::Form::Radio
             render(cmp::Component.new(html_attrs:))
           end
 
           style do
             base do
               [
-                "flex",
-                "gap-0.5",
-                "items-center",
-                "text-ui-base",
-                "rounded",
-                "!ring-0",
-                "hover:bg-zinc-100",
-                "hover:dark:bg-zinc-800",
-                "focus-within:bg-zinc-100",
-                "focus-within:dark:bg-zinc-800",
+                "ariadne-flex",
+                "ariadne-gap-0.5",
+                "ariadne-items-center",
+                "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",
               ]
             end
           end

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

@@ -0,0 +1 @@
+<div>Add Ariadne::UI::DataTable template here</div>

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

@@ -0,0 +1,11 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module DataTable
+      class Component < Ariadne::BaseComponent
+      end
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+<div
+  class="ariadne-contents"
+  data-controller="<%= stimulus_name %>"
+  data-action="click@window-><%= stimulus_name %>#windowClick"
+  <%= html_attrs.to_html %>>
+  <%= trigger %>
+
+  <dialog
+    class="<%= style %>"
+    data-<%= stimulus_name %>-target="dialog">
+    <div>
+      <div class="ariadne-p-6 ariadne-space-y-6">
+        <div class="ariadne-flex ariadne-flex-col ariadne-gap-3 ariadne-pe-5">
+          <h2 class="ariadne-text-lg ariadne-font-semibold ariadne-leading-none ariadne-tracking-tight"><%= title %></h2>
+          <% if description %><p class="ariadne-text-sm ariadne-text-muted-foreground"><%= description %></p><% end %>
+        </div>
+        <div><%= content %></div>
+        <% if footer? %>
+          <div class="ariadne-flex ariadne-gap-2 ariadne-flex-wrap"><%= footer %></div>
+        <% end %>
+      </div>
+      <div class="ariadne-absolute ariadne-end-3 ariadne-top-3">
+        <%= render Ariadne::UI::Button::Component.new(
+          theme: :nude, icon_only: :yes,
+          html_attrs: { "data-action": "click->#{stimulus_name}#triggerClick" }) do %>
+          <span class="sr-only"><%= trigger_close_label %></span>
+          <%= render Ariadne::UI::Heroicon::Component.new(icon: :"x-mark", size: :sm, variant: :outline) %>
+        <% end %>
+      </div>
+    </div>
+  </dialog>
+</div>

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

@@ -0,0 +1,37 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Dialog
+      class Component < Ariadne::BaseComponent
+        option :trigger_text
+        option :title
+        option :trigger_close_label
+        option :description, optional: true
+
+        renders_one :trigger
+        renders_one :footer
+
+        accepts_html_attributes
+
+        style do
+          base do
+            [
+              "ariadne-fixed",
+              "ariadne-w-96",
+              "ariadne-max-w-[90vw]",
+              "ariadne-max-h-[90-vh]",
+              "ariadne-shadow-xl",
+              "ariadne-rounded-2xl",
+              "ariadne-bg-white",
+              "dark:ariadne-bg-zinc-950",
+              "backdrop:ariadne-bg-zinc-900/20",
+              "backdrop:dark:ariadne-bg-zinc-100/20",
+            ]
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+import {controllerFactory} from '@utils/createController'
+import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock'
+
+export default class DialogController extends controllerFactory()({
+  targets: {dialog: HTMLDialogElement},
+}) {
+  close() {
+    this.dialogTarget.close()
+    enableBodyScroll(this.dialogTarget)
+  }
+  disconnect() {
+    this.close()
+  }
+  open() {
+    this.dialogTarget.showModal()
+    disableBodyScroll(this.dialogTarget, {reserveScrollBarGap: true})
+  }
+  triggerClick() {
+    if (this.dialogTarget.open) this.close()
+    else this.open()
+  }
+  windowClick(e: MouseEvent) {
+    if (e.target === this.dialogTarget) {
+      this.close()
+    }
+  }
+}

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

@@ -22,6 +22,8 @@ module Ariadne
       # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
       # @param size [Symbol] <%= one_of(Ariadne::UI::Heroicon::Component::SIZE_MAPPINGS, sort: false) %>
       class Component < Ariadne::BaseComponent
+        attr_accessor :dark_mode
+
         option :icon
         option :variant
         option :size, default: -> { :md }
@@ -30,7 +32,10 @@ module Ariadne
         include HeroiconsHelper
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([@heroicon.attributes["class"], style(size: @size), html_attrs[:class]].join(" "))
+          classes = [@heroicon.attributes["class"], style(size: @size)]
+          classes << ["dark:ariadne-invert"] if dark_mode == :invert
+          classes << html_attrs[:class]
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge(classes)
         end
 
         def initialize(**options)

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

@@ -0,0 +1,6 @@
+
+<ol class="ariadne-divide-y ariadne-divide-zinc-100 dark:ariadne-divide-zinc-800">
+    <% items.each do |item| %>
+    <li><%= item %></li>
+    <% end %>
+</ol>

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

@@ -0,0 +1,12 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module List
+      class Component < Ariadne::BaseComponent
+        renders_many :items, Ariadne::UI::List::Item::Component
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<div class="ariadne-flex ariadne-gap-3 ariadne-items-center ariadne-py-2">
+
+      <div class="ariadne-shrink-0">
+            <%= leading_item if leading_item? %>
+        </div>
+  <div class="ariadne-overflow-hidden">
+        <%= cell %>
+  </div>
+  <div class="ariadne-grow ariadne-flex ariadne-justify-end">
+   <%= trailing_item if trailing_item? %>
+  </div>
+  <% if trailing_menu? %>
+
+  <% end %>
+
+</div>

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

@@ -0,0 +1,17 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module List
+      module Item
+        class Component < Ariadne::BaseComponent
+          renders_one :leading_item, Ariadne::BaseComponent::ACCEPT_ANYTHING
+          renders_one :cell, Ariadne::BaseComponent::ACCEPT_ANYTHING
+          renders_one :trailing_item, Ariadne::BaseComponent::ACCEPT_ANYTHING
+          renders_one :trailing_menu, Ariadne::BaseComponent::ACCEPT_ANYTHING
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/table/cell/component.html.erb

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

data/app/components/ariadne/ui/table/cell/component.rb

@@ -0,0 +1,38 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Table
+      module Cell
+        class Component < Ariadne::BaseComponent
+          attr_accessor :context
+
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:cell), html_attrs[:class]].join(" "))
+          end
+
+          def tag_name
+            case context
+            when :header
+              "th"
+            else
+              "td"
+            end
+          end
+
+          style :cell do
+            base do
+              [
+                "ariadne-p-4",
+                "ariadne-align-middle",
+                "[&:has([role=checkbox])]:ariadne-pr-0",
+                "ariadne-font-medium",
+              ]
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<table class="<%= style(:table) %>" <%= html_attributes %>>
+  <% if caption? %>
+    <caption class="<%= style(:caption) %>" <%= html_attributes %>><%= caption %></caption>
+  <% end %>
+  <% if header? %>
+    <%= header %>
+  <% end %>
+  <tbody class="<%= style(:body) %>">
+    <% rows.each do |row| %>
+      <%= row %>
+    <% end %>
+  </tbody>
+</table>

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

@@ -0,0 +1,45 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Table
+      class Component < Ariadne::BaseComponent
+        renders_one :caption
+        renders_one :header, Ariadne::UI::Table::Header::Component
+        renders_many :rows, Ariadne::UI::Table::Row::Component
+        renders_one :footer, Ariadne::UI::Table::Footer::Component
+
+        style :table do
+          base do
+            [
+              "ariadne-w-full",
+              "ariadne-caption-bottom",
+              "ariadne-text-sm",
+            ]
+          end
+        end
+
+        style :body do
+          base do
+            [
+              "ariadne-divide-y",
+              "ariadne-divide-zinc-100",
+              "dark:ariadne-divide-zinc-800",
+            ]
+          end
+        end
+
+        style :caption do
+          base do
+            [
+              "ariadne-mt-4",
+              "ariadne-text-sm",
+              "ariadne-text-muted-foreground",
+            ]
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/table/footer/component.rb

@@ -0,0 +1,14 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Table
+      module Footer
+        class Component < Ariadne::BaseComponent
+          renders_one :row, Ariadne::UI::Table::Row::Component
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<thead class="<%= style(:header) %>" <%= html_attributes %>>
+  <%= row %>
+</thead>

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

@@ -0,0 +1,40 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Table
+      module Header
+        class Component < Ariadne::BaseComponent
+          renders_one :row, Ariadne::UI::Table::Row::Component
+
+          def before_render
+            row&.context = :header
+          end
+
+          style :header do
+            base do
+              [
+                "[&_tr]:ariadne-border-b",
+              ]
+            end
+          end
+
+          style :header_cell do
+            base do
+              [
+                "ariadne-h-12",
+                "ariadne-px-4",
+                "ariadne-text-left",
+                "ariadne-align-middle",
+                "ariadne-font-medium",
+                "ariadne-text-muted-foreground",
+                "[&:has([role=checkbox])]:ariadne-pr-0 ariadne-w-[100px]",
+              ]
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/table/row/component.html.erb

@@ -0,0 +1,5 @@
+<tr class="<%= style(:row) %>" <%= html_attributes %>>
+  <% cells.each do |cell| %>
+    <%= cell %>
+  <% end %>
+</tr>

data/app/components/ariadne/ui/table/row/component.rb

@@ -0,0 +1,28 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Table
+      module Row
+        class Component < Ariadne::BaseComponent
+          attr_accessor :context
+
+          renders_one :row_action, Ariadne::UI::Combobox::Component
+          renders_many :cells, Ariadne::UI::Table::Cell::Component
+
+          style :row do
+            base do
+              [
+                "ariadne-border-b",
+                "ariadne-transition-colors",
+                "hover:ariadne-bg-muted/50",
+                "data-[state=selected]:ariadne-bg-muted",
+              ]
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -1,3 +1 @@
-<%= content_tag(tag_name, html_attrs) do %>
-    <%= content %>
-<% end %>
+<%= content_tag(tag_name, class: html_attrs[:class], **html_attrs.except(:class)) { content } %>