ariadne_view_components 0.0.85 → 0.0.86

data/app/components/ariadne/form/toggle_group/option/component.rb

@@ -0,0 +1,46 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Form
+    module ToggleGroup
+      module Option
+        class Component < Ariadne::BaseComponent
+          option :name
+          option :value
+          option :label
+          option :type
+          option :checked, default: proc { false }
+
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:tab), html_attrs[:class]].join(" "))
+          end
+
+          def input_type
+            if type == :multiple
+              "checkbox"
+            elsif type == :single
+              "radio"
+            else
+              raise ArgumentError, "Unknown type: #{type}"
+            end
+          end
+
+          style :tab do
+            base do
+              [
+                "ariadne-px-1.5",
+                "ariadne-rounded-md",
+                "ariadne-opacity-75",
+                "has-[:checked]:ariadne-shadow-sm",
+                "has-[:checked]:ariadne-opacity-100",
+                "has-[:checked]:ariadne-bg-white",
+                "dark:has-[:checked]:ariadne-bg-white/20",
+              ]
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<div>
+  <div class='ariadne-py-1 ariadne-mb-1 text-h5-caps ariadne-text-zinc-600 dark:ariadne-text-zinc-400'>
+    <div class="aridne--ml-px aridne-flex aridne-flex-1">
+      <%= label %>
+      <% if trailing_visual? %>
+        <%= trailing_visual %>
+      <% end %>
+    </a>
+  </div>
+</div>
+<%= content %>
+</div>

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

@@ -0,0 +1,39 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module LabelBlock
+      class Component < Ariadne::BaseComponent
+        option :label
+
+        # Trailing visuals appear to the right of the label text.
+        #
+        # Use:
+        #
+        # - `trailing_visual_button` for a <%= link_to_component(Ariadne::UI::Button::Component) %>.
+        renders_one :trailing_visual, types: {
+          button: lambda { |**options|
+            options[:size] ||= :xs
+            options[:theme] ||= :none
+            options[:html_attrs] ||= {}
+
+            options[:html_attrs][:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:trailing_visual), options[:html_attrs][:class] || ""].join(" "))
+
+            Ariadne::UI::Button::Component.new(**options)
+          },
+        }
+
+        style(:trailing_visual) do
+          base do
+            [
+              "araidne-pl-2",
+              "ariadne-text-gray-400",
+              "hover:ariadne-text-gray-500",
+            ]
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -32,13 +32,13 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-bg-foreground",
-              "dark:ariadne-bg-background-dark",
-              "dark:ariadne-border-b",
+              "ariadne-bg-panel",
+              "dark:ariadne-bg-panel-dark",
+              "ariadne-border-b",
+              "ariadne-border-zinc-100",
               "dark:ariadne-border-zinc-900",
               "ariadne-z-50",
               "ariadne-overflow-hidden",
-              "ariadne-border-zinc-100",
             ]
           end
         end

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

@@ -0,0 +1,4 @@
+<section class="ariadne-flex ariadne-flex-col ariadne-h-full">
+  <%= header %>
+  <%= content %>
+</section>

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

@@ -0,0 +1,12 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module SectionBlock
+      class Component < Ariadne::BaseComponent
+        renders_one :header, "Ariadne::Layout::SectionBlock::Header::Component"
+      end
+    end
+  end
+end

data/app/components/ariadne/layout/section_block/header/component.html.erb

@@ -0,0 +1,4 @@
+<div class="ariadne-flex ariadne-justify-between ariadne-items-center ariadne-p-1">
+  <div class="ariadne-uppercase ariadne-text-muted-foreground dark:ariadne-text-muted-foreground-dark ariadne-text-xs"><%= label %></div>
+  <%= content %>
+</div>

data/app/components/ariadne/layout/section_block/header/component.rb

@@ -0,0 +1,14 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module SectionBlock
+      module Header
+        class Component < Ariadne::BaseComponent
+          option :label
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<% if src %>
+  <img src="<%= src %>" title="<%= title %>" class="<%= style(size:, circle:, has_src: src.present?) %>">
+<% else %>
+  <div title="<%= title %>" class="<%= style(size:, circle:, has_src: src.present?) %>">
+    <%= placeholder_text %>
+  </div>
+<% end %>

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

@@ -0,0 +1,54 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Avatar
+      class Component < Ariadne::BaseComponent
+        option :title, default: proc { "" }
+        option :src, optional: true
+        option :size, default: proc { :base }
+        option :circle, default: proc { false }
+
+        attr_reader :placeholder_text
+
+        style do
+          base do
+            "select-none object-cover"
+          end
+
+          variants do
+            size do
+              xs { ["ariadne-size-4", "ariadne-rounded"] }
+              sm { ["ariadne-size-5", "ariadne-rounded-md"] }
+              md { ["ariadne-size-8", "ariadne-rounded-lg"] }
+              lg { ["ariadne-size-10", "ariadne-rounded-xl"] }
+              xl { ["ariadne-size-12", "ariadne-rounded-2xl"] }
+            end
+            circle do
+              yes { "!ariadne-rounded-full" }
+            end
+            has_src do
+              no do
+                [
+                  "ariadne-inline-flex",
+                  "ariadne-items-center",
+                  "ariadne-justify-center",
+                  "ariadne-bg-violet-200",
+                  "dark:ariadne-bg-violet-800",
+                  "ariadne-text-violet-600",
+                  "dark:ariadne-text-violet-400",
+                ]
+              end
+            end
+          end
+        end
+
+        def before_render
+          len = [:xs, :sm, :md].include?(size) ? 0 : 1
+          @placeholder_text = (title || "").strip.split[0..len].map { |word| word.capitalize[0] }.join
+        end
+      end
+    end
+  end
+end

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

@@ -44,6 +44,14 @@ module Ariadne
               "dark:ariadne-border-white/10",
               "ariadne-text-content",
               "dark:ariadne-text-content-dark",
+              "ariadne-outline-none",
+              "ariadne-ring-offset-0",
+              "focus-visible:ariadne-ring-2",
+              "ariadne-ring-blue-400",
+              "dark:ariadne-ring-blue-600",
+              "ariadne-py-1",
+              "ariadne-px-1.5",
+              "ariadne-rounded-md",
             ]
           end
 

data/app/components/ariadne/ui/card/body/component.html.erb

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

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

@@ -0,0 +1,25 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Card
+      module Body
+        class Component < Ariadne::BaseComponent
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
+          end
+
+          style do
+            base do
+              [
+                "ariadne-p-6",
+                "ariadne-pt-0",
+              ]
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -2,16 +2,12 @@
   <% if href.present? %>
     <%= render(Ariadne::UI::Link::Component.new(href: href, theme: :none, html_attrs: { class: "w-full h-full"})) do %>
       <%= header %>
-      <div class="ariadne-p-6 ariadne-pt-0">
-        <%= content %>
-      </div>
+      <%= body %>
       <%= footer %>
     <% end %>
   <% else %>
     <%= header %>
-    <div class="ariadne-p-6 ariadne-pt-0">
-      <%= content %>
-    </div>
+    <%= body %>
     <%= footer %>
   </div>
 <% end %>

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

@@ -13,6 +13,7 @@ module Ariadne
           html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(link: href.present? ? :yes : :no), html_attrs[:class]].join(" "))
         end
 
+        renders_one :body, Ariadne::UI::Card::Body::Component
         renders_one :footer, Ariadne::UI::Card::Footer::Component
 
         style do

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

@@ -64,6 +64,8 @@ module Ariadne
               sm { "ariadne-w-36" }
               md { "ariadne-w-52" }
               lg { "ariadne-w-96" }
+              full { "ariadne-w-full" }
+              none {} # let the child decide how big its menu ought to be
             end
           end
         end

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

@@ -12,7 +12,7 @@
       <div
             class="<%= style(:item) %>"
             data-<%= stimulus_name %>-target="searchString">
-        <div class="ariadne-truncate" role="menuitemcheckbox"><%= checkbox %></div>
+        <div class="ariadne-truncate ariadne-w-full" role="menuitemcheckbox"><%= checkbox %></div>
       </div>
     <% end %>
     <% radio_buttons.each do |radio_button| %>
@@ -27,7 +27,7 @@
             <%= 'role="menuitem"' if as_menu %>
             class="<%= style(:item) %>"
             data-<%= stimulus_name %>-target="searchString">
-        <div class="ariadne-relative ariadne-flex "><%= item %></div>
+        <div class="ariadne-relative ariadne-flex ariadne-w-full"><%= item %></div>
       </div>
     <% end %>
     <div class="ariadne-text-center ariadne-hidden" data-<%= stimulus_name %>-target="emptyRoot">

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

@@ -15,9 +15,8 @@ module Ariadne
           @empty_placeholder = options.delete(:empty_placeholder)
 
           options.delete(:size)
-          options[:theme] = :nude
           options[:width] = :full
-          options[:name] = "search"
+          options[:name] = ""
           options[:label] = ""
 
           options[:html_attrs] ||= {}
@@ -76,6 +75,7 @@ module Ariadne
           base do
             [
               "ariadne-overflow-y-auto",
+              "ariadne-grow",
             ]
           end
 
@@ -94,7 +94,7 @@ module Ariadne
             [
               "ariadne-flex",
               "ariadne-flex-col",
-              "ariadne-grow",
+              "ariadne-gap-1",
             ]
           end
         end
@@ -121,6 +121,7 @@ module Ariadne
               "ariadne-transition-colors",
               "disabled:ariadne-pointer-events-none",
               "disabled:ariadne-opacity-50",
+
             ]
           end
         end

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

@@ -0,0 +1,29 @@
+<nav
+    role="navigation"
+    aria-label="<%= label %>">
+  <div class="[grid-area:pages] flex justify-center">
+    <ul class="inline-flex items-baseline justify-start gap-2">
+      <% page_links.each do |page| %>
+        <li>
+          <% if page.nil? %>
+            <span aria-hidden>…</span>
+          <% else %>
+            <%= render UI::Button::Component.new(
+                as: :link,
+                theme: :ghost,
+                state: page == current_page ? 'active' : '',
+                href: callback_page_url.call(page),
+                html_attrs: {
+                  "aria-current": page == current_page ? 'true' : 'false',
+                  "aria-label": goto_label,
+                  data: { turbo: false },
+                }
+              ) do %>
+              <%= page %>
+            <% end %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</nav>

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

@@ -0,0 +1,30 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Pagination
+      class Component < Ariadne::BaseComponent
+        option :label
+        option :goto_label
+
+        option :current_page
+        option :pages_count
+
+        option :callback_page_url
+
+        option :page_size_options, default: proc { [10, 25, 50, 100] }
+
+        def page_links
+          (1..pages_count).each_with_object([]) do |page, list|
+            if [1, pages_count].include?(page) || page.between?(current_page - 2, current_page + 2)
+              list << page
+            elsif list.last
+              list << nil
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<dl class="flex flex-wrap space-x-2 divide-x divide-slate-100 dark:divide-slate-800">
+  <% stats.each_with_index do |stat, index| %>
+    <span class="flex-1 <%= 'pl-2' if index > 0 %>">
+      <%= render stat %>
+    </span>
+  <% end %>
+</dl>

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

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

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

@@ -0,0 +1,4 @@
+<span class="flex flex-col-reverse">
+  <dt class="text-zinc-600 dark:text-zinc-400 text-xs"><%= label %></dt>
+  <dd class="<%= style(theme: ) %>"><%= content %></dd>
+</span>

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

@@ -0,0 +1,27 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module StatsPanel
+      module Item
+        class Component < Ariadne::BaseComponent
+          option :theme, default: proc { :default }
+          option :label
+
+          style do
+            base { ["text-number-lg-smb"] }
+
+            variants do
+              theme do
+                default { [] }
+                success { ["ariadne-text-emerald-600", "dark:ariadne-text-emerald-400"] }
+                danger { ["ariadne-text-red-600", "dark:ariadne-text-red-400"] }
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<relative-time <%= html_attributes %>></relative-time>

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

@@ -0,0 +1,155 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module TimeAgo
+      # Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
+      class Component < Ariadne::BaseComponent
+        include FetchOrFallbackHelper
+
+        TENSE_DEFAULT = :auto
+        TENSE_OPTIONS = [TENSE_DEFAULT, :past, :future].freeze
+
+        FORMAT_DEFAULT = :auto
+        FORMAT_OPTIONS = [FORMAT_DEFAULT, :micro, :elapsed].freeze
+
+        FORMAT_STYLE_DEFAULT = nil
+        FORMAT_STYLE_OPTIONS = [FORMAT_STYLE_DEFAULT, :long, :short, :narrow].freeze
+
+        SECOND_DEFAULT = nil
+        SECOND_MAPPINGS = {
+          SECOND_DEFAULT => nil,
+          :numeric => "numeric",
+          :two_digit => "2-digit",
+        }.freeze
+        SECOND_OPTIONS = SECOND_MAPPINGS.keys
+
+        MINUTE_DEFAULT = nil
+        MINUTE_MAPPINGS = {
+          MINUTE_DEFAULT => nil,
+          :numeric => "numeric",
+          :two_digit => "2-digit",
+        }.freeze
+        MINUTE_OPTIONS = MINUTE_MAPPINGS.keys
+
+        HOUR_DEFAULT = nil
+        HOUR_MAPPINGS = {
+          HOUR_DEFAULT => nil,
+          :numeric => "numeric",
+          :two_digit => "2-digit",
+        }.freeze
+        HOUR_OPTIONS = HOUR_MAPPINGS.keys
+
+        WEEKDAY_DEFAULT = nil
+        WEEKDAY_OPTIONS = [WEEKDAY_DEFAULT, :long, :short, :narrow].freeze
+
+        DAY_DEFAULT = nil
+        DAY_MAPPINGS = {
+          DAY_DEFAULT => nil,
+          :numeric => "numeric",
+          :two_digit => "2-digit",
+        }.freeze
+        DAY_OPTIONS = DAY_MAPPINGS.keys
+
+        MONTH_DEFAULT = nil
+        MONTH_MAPPINGS = {
+          MONTH_DEFAULT => nil,
+          :numeric => "numeric",
+          :two_digit => "2-digit",
+          :short => "short",
+          :long => "long",
+          :narrow => "narrow",
+        }.freeze
+        MONTH_OPTIONS = MONTH_MAPPINGS.keys
+
+        YEAR_DEFAULT = nil
+        YEAR_MAPPINGS = {
+          YEAR_DEFAULT => nil,
+          :numeric => "numeric",
+          :two_digit => "2-digit",
+        }.freeze
+        YEAR_OPTIONS = YEAR_MAPPINGS.keys
+
+        TIMEZONENAME_DEFAULT = nil
+        TIMEZONE_MAPPINGS = {
+          TIMEZONENAME_DEFAULT => nil,
+          :long => "long",
+          :short => "short",
+          :short_offset => "shortOffset",
+          :long_offset => "longOffset",
+          :short_generic => "shortGeneric",
+          :long_generic => "longGeneric",
+        }.freeze
+        TIMEZONENAME_OPTIONS = TIMEZONE_MAPPINGS.keys
+
+        PRECISION_DEFAULT = nil
+        PRECISION_OPTIONS = [PRECISION_DEFAULT, :second, :minute, :hour, :day, :month, :year].freeze
+
+        # @param datetime [Time] The time to be formatted.
+        option :datetime
+        # @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
+        option :tense, default: -> { TENSE_DEFAULT }
+        # @param prefix [sring] What to prefix the relative time display with.
+        option :prefix, default: -> { nil }
+        # @param second [Symbol] What format seconds should take. <%= one_of(Primer::Beta::RelativeTime::SECOND_OPTIONS) %>
+        option :second, default: -> { SECOND_DEFAULT }
+        # @param minute [Symbol] What format minues should take. <%= one_of(Primer::Beta::RelativeTime::MINUTE_OPTIONS) %>
+        option :minute, default: -> { MINUTE_DEFAULT }
+        # @param hour [Symbol] What format hours should take. <%= one_of(Primer::Beta::RelativeTime::HOUR_OPTIONS) %>
+        option :hour, default: -> { HOUR_DEFAULT }
+        # @param weekday [Symbol] What format weekdays should take. <%= one_of(Primer::Beta::RelativeTime::WEEKDAY_OPTIONS) %>
+        option :weekday, default: -> { WEEKDAY_DEFAULT }
+        # @param day [Symbol] What format days should take. <%= one_of(Primer::Beta::RelativeTime::DAY_OPTIONS) %>
+        option :day, default: -> { DAY_DEFAULT }
+        # @param month [Symbol] What format months should take. <%= one_of(Primer::Beta::RelativeTime::MONTH_OPTIONS) %>
+        option :month, default: -> { MONTH_DEFAULT }
+        # @param year [Symbol] What format years should take. <%= one_of(Primer::Beta::RelativeTime::YEAR_OPTIONS) %>
+        option :year, default: -> { YEAR_DEFAULT }
+        # @param time_zone_name [Symbol] What format the time zone should take. <%= one_of(Primer::Beta::RelativeTime::TIMEZONENAME_OPTIONS) %>
+        option :time_zone_name, default: -> { TIMEZONENAME_DEFAULT }
+        # @param threshold [String] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
+        option :threshold, default: -> { nil }
+        # @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %>
+        option :precision, default: -> { PRECISION_DEFAULT }
+        # @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %>
+        option :format, default: -> { FORMAT_DEFAULT }
+        # @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
+        option :format_style, default: -> { FORMAT_STYLE_DEFAULT }
+        # @param lang [String] The language to use.
+        option :lang, default: -> { nil }
+        # @param title [String] Provide a custom title to the element.
+        option :title, default: -> { nil }
+        # @param no_title [Boolean] Removes the `title` attribute provided on the element by default.
+        option :no_title, default: -> { false }
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:tense] = tense if tense.present?
+          html_attrs[:prefix] = prefix if prefix.present?
+          html_attrs[:second] = fetch_or_fallback(SECOND_OPTIONS, second, SECOND_DEFAULT) if second.present?
+          html_attrs[:minute] = fetch_or_fallback(MINUTE_OPTIONS, minute, MINUTE_DEFAULT) if minute.present?
+          html_attrs[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
+          html_attrs[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
+          html_attrs[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
+          html_attrs[:month] = fetch_or_fallback(MONTH_OPTIONS, month, MONTH_DEFAULT) if month.present?
+          html_attrs[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
+          html_attrs[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
+          html_attrs[:threshold] = threshold if threshold.present?
+          html_attrs[:precision] = precision if precision.present?
+          html_attrs[:title] = title if title.present?
+          html_attrs[:"no-title"] = no_title if no_title
+          html_attrs[:lang] = lang if lang.present?
+          html_attrs[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
+          html_attrs[:"format-style"] = format_style if format_style.present?
+          if datetime.respond_to?(:iso8601)
+            @datetime = datetime
+            html_attrs[:datetime] = datetime.iso8601
+          elsif datetime.present?
+            @datetime = Time.iso8601(datetime)
+            html_attrs[:datetime] = @datetime
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/time_ago/en.yml

@@ -0,0 +1,12 @@
+---
+en:
+  ariadne:
+    ui:
+      time_ago:
+        ago: "%{dt} ago"
+        days: "%{count}d"
+        full_date_format: "%b %d, %Y %I:%M %p"
+        hours: "%{count}h"
+        minutes: "%{count}m"
+        right_now: right now
+        short_date_format: "%b %d, %I:%M %p"