ariadne_view_components 0.0.70 → 0.0.72

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

@@ -0,0 +1,49 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module Grid
+      class Component < Ariadne::BaseComponent
+        renders_many :items, Ariadne::Layout::Grid::Item::Component
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:grid), html_attrs[:class]].join(" "))
+        end
+
+        style :grid do
+          base do
+            [
+              "ariadne-grid",
+              "ariadne-grid-cols-1",
+              "ariadne-gap-6",
+              "sm:ariadne-grid-cols-2",
+              "md:ariadne-grid-cols-3",
+              "lg:ariadne-grid-cols-4",
+            ]
+          end
+        end
+
+        style :item do
+          base do
+            [
+              "ariadne-flex",
+              "ariadne-flex-col",
+              "ariadne-gap-3",
+              "ariadne-p-3",
+              "ariadne-ps-4",
+              "ariadne-rounded-xl",
+              "ariadne-border",
+              "ariadne-border-black/10",
+              "dark:ariadne-border-white/10",
+              "ariadne-bg-white",
+              "dark:ariadne-bg-zinc-950",
+              "hover:ariadne-shadow-lg",
+              "ariadne-transition-shadow",
+            ]
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/layout/grid/item/component.html.erb

@@ -0,0 +1,12 @@
+
+<% if html_attrs[:class].present? %>
+<li class="ariadne-contents">
+<div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
+    <%= content %>
+    </div>
+</li>
+<% else %>
+<li class="ariadne-contents" <%= html_attributes %>>
+    <%= content %>
+</li>
+<% end %>

data/app/components/ariadne/layout/grid/item/component.rb

@@ -0,0 +1,41 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module Grid
+      module Item
+        class Component < Ariadne::BaseComponent
+          # TODO: make this standard
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = if html_attrs[:class] == :remove
+              "" # user asked for no styling
+            else
+              Ariadne::ViewComponents.tailwind_merger.merge([style(:item), html_attrs[:class]].join(" "))
+            end
+          end
+
+          style :item do
+            base do
+              [
+                "ariadne-flex",
+                "ariadne-flex-col",
+                "ariadne-gap-3",
+                "ariadne-p-3",
+                "ariadne-ps-4",
+                "ariadne-rounded-xl",
+                "ariadne-border",
+                "ariadne-border-black/10",
+                "dark:ariadne-border-white/10",
+                "ariadne-bg-white",
+                "dark:ariadne-bg-zinc-950",
+                "hover:ariadne-shadow-lg",
+                "ariadne-transition-shadow",
+              ]
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -8,116 +8,27 @@
         </div>
       <% end %>
       </div>
-      <%# <div class="flex flex-1 items-center justify-center px-2 lg:ml-6 lg:justify-end">
-        <div class="w-full max-w-lg lg:max-w-xs">
-          <label for="search" class="sr-only">Search</label>
-          <div class="relative">
-            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-              Heroicon(icon: :search)
-            </div>
-            <input id="search" name="search" class="block w-full rounded-md border-0 bg-white py-1.5 pl-10 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Search" type="search">
-          </div>
-        </div>
-      </div> %>
-      <%# <div class="flex items-center lg:hidden">
-        <!-- Mobile menu button -->
-        <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
-          <span class="absolute -inset-0.5"></span>
-          <span class="sr-only">Open main menu</span>
-          <!--
-            Icon when menu is closed.
 
-            Menu open: "hidden", Menu closed: "block"
-          -->
-          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-          </svg>
-          <!--
-            Icon when menu is open.
+      <div class="ariadne-flex ariadne-items-center ariadne-space-x-4 lg:ariadne-space-x-6 ariadne-mx-6">
+        <% @links.each do |link| %>
+          <a
+            aria-current="<%= link[:current] ? "page" : "false" %>"
+            href="<%= link[:href] %>"
+            class="<%= style(:tab, active: link[:current] ? :yes : :no) %>">
+            <span class="ariadne-inline-block ariadne-rounded-md group-hover:ariadne-bg-zinc-200/20 dark:group-hover:ariadne-bg-zinc-700/20">
+              <span class="ariadne-px-1.5"><%= link[:label] %></span>
+            </span>
+          </a>
+        <% end %>
+      </div>
 
-            Menu open: "block", Menu closed: "hidden"
-          -->
-          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div> %>
       <div class="ariadne-hidden lg:ariadne-ml-4 lg:ariadne-flex lg:ariadne-items-center">
         <% trailing_items.each_with_index do |trailing_item, idx| %>
           <div class="<%= style(:trailing_item, initial: final?(idx)) %>">
             <%= trailing_item %>
           </div>
         <% end %>
-        <%# <button type="button" class="relative flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
-          <span class="absolute -inset-1.5"></span>
-          <span class="sr-only">View notifications</span>
-          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
-          </svg>
-        </button> %>
-
-        <!-- Profile dropdown -->
-        <%# <div class="relative ml-4 flex-shrink-0">
-          <div>
-            <button type="button" class="relative flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-              <span class="absolute -inset-1.5"></span>
-              <span class="sr-only">Open user menu</span>
-              <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-            </button>
-          </div>
-
-          <!--
-            Dropdown menu, show/hide based on menu state.
-
-            Entering: "transition ease-out duration-100"
-              From: "transform opacity-0 scale-95"
-              To: "transform opacity-100 scale-100"
-            Leaving: "transition ease-in duration-75"
-              From: "transform opacity-100 scale-100"
-              To: "transform opacity-0 scale-95"
-          -->
-          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
-            <!-- Active: "bg-gray-100", Not Active: "" -->
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
-            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
-          </div>
-        </div> %>
       </div>
     </nav>
   </div>
-
-  <!-- Mobile menu, show/hide based on menu state. -->
-  <%# <div class="lg:hidden" id="mobile-menu">
-    <div class="space-y-1 pb-3 pt-2">
-      <!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
-      <a href="#" class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700">Dashboard</a>
-      <a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Team</a>
-      <a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Projects</a>
-      <a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Calendar</a>
-    </div>
-    <div class="border-t border-gray-200 pb-3 pt-4">
-      <div class="flex items-center px-4">
-        <div class="flex-shrink-0">
-          <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-        </div>
-        <div class="ml-3">
-          <div class="text-base font-medium text-gray-800">Tom Cook</div>
-          <div class="text-sm font-medium text-gray-500">tom@example.com</div>
-        </div>
-        <button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
-          <span class="absolute -inset-1.5"></span>
-          <span class="sr-only">View notifications</span>
-          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
-          </svg>
-        </button>
-      </div>
-      <div class="mt-3 space-y-1">
-        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Your Profile</a>
-        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Settings</a>
-        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Sign out</a>
-      </div>
-    </div>
-  </div> %>
 </header>

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

@@ -8,18 +8,18 @@ module Ariadne
         # Leading items at the far left of the header.
         renders_many :leading_items, BaseComponent::ACCEPT_ANYTHING
 
-        # Leading items at the far left of the header.
-        renders_many :trailing_items, lambda { |static_content = nil, &block|
-          next static_content if static_content.present?
-
-          view_context.capture { block&.call }
+        # Leading items at the far right of the header.
+        renders_many :center_links, lambda { |href:, label:, current:|
+          @links << { href: href, label: label, current: current }
         }
 
-        renders_many :navigation_items, lambda { |static_content = nil, &block|
-          next static_content if static_content.present?
+        # Leading items at the far right of the header.
+        renders_many :trailing_items, BaseComponent::ACCEPT_ANYTHING
 
-          view_context.capture { block&.call }
-        }
+        def initialize(**options)
+          super
+          @links = []
+        end
 
         def initial?(position)
           position.zero?
@@ -57,6 +57,35 @@ module Ariadne
           end
         end
 
+        style :tab do
+          base do
+            [
+              "ariadne-text-base",
+              "ariadne-font-medium",
+              "ariadne-whitespace-nowrap",
+              "ariadne-border-b-2",
+              "ariadne-py-2",
+            ]
+          end
+          variants do
+            active do
+              no do
+                [
+                  "ariadne-group", "ariadne-border-transparent",
+                ]
+              end
+              yes do
+                [
+                  "ariadne-border-billy-purple-700",
+                  "ariadne-text-billy-purple-700",
+                  "dark:ariadne-border-billy-purple-300",
+                  "dark:ariadne-text-billy-purple-300",
+                ]
+              end
+            end
+          end
+        end
+
         style(:trailing_item) do
           base do
             [

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

@@ -0,0 +1,14 @@
+<main class="ariadne-grow ariadne-flex">
+    <div class="ariadne-grow">
+<div class="<%= style %>">
+  <div class="<%= style(:menu) %>">
+    <%= left_panel %>
+  </div>
+    <div class="ariadne-grow ariadne-min-w-0 ariadne-w-full">
+    <div class="md:ariadne-w-4/5 md:ariadne-mx-auto ariadne-p-2.5">
+        <%= content %>
+    </div>
+
+</div>
+</div>
+</main>

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

@@ -0,0 +1,38 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module TwoPanel
+      class Component < Ariadne::BaseComponent
+        renders_one :left_panel, Ariadne::BaseComponent::ACCEPT_ANYTHING
+
+        style do
+          base do
+            [
+              "ariadne-flex", "ariadne-flex-col", "sm:ariadne-flex-row", "ariadne-h-full",
+            ]
+          end
+        end
+
+        style :menu do
+          base do
+            [
+              "ariadne-basis-1/4",
+              "ariadne-shrink-0",
+              "ariadne-px-2",
+              "ariadne-pb-2",
+              "sm:ariadne-p-4",
+              "ariadne-bg-zinc-50",
+              "dark:ariadne-bg-zinc-900",
+              "max-sm:ariadne-border-b",
+              "sm:ariadne-border-e",
+              "ariadne-border-black/10",
+              "dark:ariadne-border-white/10",
+            ]
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<main class="<%= style %>" <%= html_attributes %>>
+    <div class="container mx-auto">
+      <%= content %>
+    </div>
+
+    <% if footer? %>
+        <%= footer %>
+    <% end %>
+</main>

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

@@ -0,0 +1,24 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module Wide
+      class Component < BaseComponent
+        renders_one :footer, Ariadne::BaseComponent::ACCEPT_ANYTHING
+
+        style do
+          base do
+            [
+              "ariadne-grow",
+              "ariadne-bg-zinc-50",
+              "dark:ariadne-bg-zinc-900",
+              "ariadne-py-6",
+              "ariadne-px-1",
+            ]
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/turbo/frame/component.html.erb

@@ -0,0 +1,3 @@
+<turbo-frame class="contents" id="<%= target %>">
+  <%= render component %>
+</turbo-frame>

data/app/components/ariadne/turbo/frame/component.rb

@@ -0,0 +1,16 @@
+# typed: false
+# frozen_string_literal: true
+
+module UI
+  module Turbo
+    module Frame
+      class Component < ApplicationViewComponent
+        option :component
+
+        def target
+          @target ||= component.component_id
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/turbo/stream_action/component.html.erb

@@ -0,0 +1,4 @@
+<%= helpers.turbo_stream_action_tag(
+  turbo_action,
+  target:, template: (empty? ? "" : render(component)),
+) %>

data/app/components/ariadne/turbo/stream_action/component.rb

@@ -0,0 +1,25 @@
+# typed: false
+# frozen_string_literal: true
+
+module UI
+  module Turbo
+    module StreamAction
+      class Component < ApplicationViewComponent
+        option :component
+        option :action, default: -> { "update" }
+
+        def target
+          @target ||= component.component_id
+        end
+
+        def turbo_action
+          @turbo_action ||= empty? ? "update" : action
+        end
+
+        def empty?
+          action == "drop"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<span <%= html_attrs.to_html %>><%= leading_item if leading_item? %><%= text %></span>

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

@@ -0,0 +1,76 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Badge
+      class Component < Ariadne::BaseComponent
+        option :size, default: proc { :base }
+
+        renders_one :text
+        renders_one :leading_color_dot, lambda { |**options|
+          options[:size] = size # Use the same size as the badge
+          Ariadne::UI::ColorDot::Component.new(**options)
+        }
+
+        include Ariadne::Behaviors::Tooltipable
+
+        WITH_LEADING_PADDINGS = {
+          xs: "ariadne-pe-1 ariadne-ps-0.5",
+          sm: "ariadne-pe-1.5 ariadne-ps-0.5",
+          base: "ariadne-pe-1.5 ariadne-ps-0.5",
+          md: "ariadne-pe-1.5 ariadne-ps-0.5",
+        }
+
+        WITHOUT_LEADING_PADDINGS = {
+          xs: "ariadne-px-1",
+          sm: "ariadne-px-1.5",
+          base: "ariadne-px-2",
+          md: "ariadne-px-2",
+        }
+
+        # must be dont here rather than within an `accepts_html_attributes` block
+        # because the padding class is dependent on the slot existing, which isn't known until now
+        def before_render
+          padding_class = (leading_item? ? WITH_LEADING_PADDINGS : WITHOUT_LEADING_PADDINGS)[size]
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size:, with_leading_item: leading_item? ? :yes : :no), padding_class, html_attrs[:class]].join(" "))
+        end
+
+        private def leading_item?
+          leading_color_dot.present?
+        end
+
+        private def leading_item
+          leading_color_dot.presence
+        end
+
+        style do
+          base do
+            [
+              "ariadne-truncate",
+              "ariadne-max-w-full",
+              "ariadne-border-0.5",
+              "ariadne-border-solid",
+              "ariadne-border-black/10",
+              "dark:ariadne-border-white/10",
+            ]
+          end
+
+          variants do
+            with_leading_item do
+              yes { "ariadne-inline-flex ariadne-items-center" }
+              no { "ariadne-inline-block" }
+            end
+
+            size do
+              xs { "ariadne-leading-5 ariadne-text-xs ariadne-rounded-md" }
+              sm { "ariadne-leading-6 ariadne-text-sm ariadne-rounded-lg" }
+              base { "ariadne-leading-7 ariadne-text-base ariadne-rounded-xl" }
+              md { "ariadne-leading-7 ariadne-text-base ariadne-rounded-xl" }
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<div class="ariadne-grow ariadne-flex ariadne-flex-col ariadne-justify-center ariadne-items-center <%= base? ? 'ariadne-gap-4' : 'ariadne-gap-1' %>">
+  <%= icon %>
+  <div class="ariadne-text-center ariadne-space-y-2">
+    <%= render(Ariadne::UI::Typography::Component.new(type: title_type_from_size)) { title } %>
+    <% if description.present? %>
+    <%= render(Ariadne::UI::Typography::Component.new(type: description_type_from_size, html_attrs: { class: "text-zinc-600 dark:text-zinc-400 text-balance" })) { description } %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,37 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Blankslate
+      class Component < Ariadne::BaseComponent
+        option :size, default: proc { :base }
+
+        option :title
+        option :description, optional: true
+
+        renders_one :icon, Ariadne::UI::Heroicon::Component
+
+        def before_render
+          icon&.dark_mode = :invert
+        end
+
+        def title_type_from_size
+          case size
+          when :base
+            :h2
+          when :sm
+
+          end
+        end
+
+        def description_type_from_size
+        end
+
+        def base?
+          size == :base
+        end
+      end
+    end
+  end
+end

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

@@ -5,6 +5,7 @@ module Ariadne
   module UI
     module Button
       class Component < Ariadne::BaseComponent
+        include Ariadne::Behaviors::Captionable
         include Ariadne::Behaviors::Tooltipable
 
         option :as, default: proc { :button }
@@ -85,7 +86,7 @@ module Ariadne
                   "dark:active:ariadne-bg-zinc-700/20",
                 ]
               end
-              ghost do
+              nude do
                 [
                   "ariadne-text-black",
                   "dark:ariadne-text-white",

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

@@ -0,0 +1,7 @@
+<span class="<%= style(size:) %>">
+    <span class="ariadne-px-0.5 ariadne-p-1 ariadne-shrink-0">
+        <svg class="<%= style(:svg, size:) %>" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="0.5" cy="0.5" r="0.5" fill="<%= "rgba(#{color.join(',')})" %>" />
+        </svg>
+    </span>
+</span>

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

@@ -0,0 +1,39 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module ColorDot
+      class Component < Ariadne::BaseComponent
+        option :color
+        option :size, default: -> { :base }
+
+        style do
+          base do
+            "ariadne-inline-flex ariadne-items-center ariadne-truncate"
+          end
+
+          variants do
+            size do
+              xs { "ariadne-ps-0.5" }
+              sm { "ariadne-ps-0.5" }
+              base { "ariadne-ps-1" }
+              md { "ariadne-ps-1" }
+            end
+          end
+        end
+
+        style :svg do
+          variants do
+            size do
+              xs { "ariadne-size-2" }
+              sm { "ariadne-size-2.5" }
+              base { "ariadne-size-3" }
+              md { "ariadne-size-3" }
+            end
+          end
+        end
+      end
+    end
+  end
+end