avo 3.30.4 → 4.0.0.beta.2

data/app/components/avo/button_component.rb

@@ -1,22 +1,20 @@
 # frozen_string_literal: true
 
 # A button/link can have the following settings:
-# style: primary/outline/text/icon
-# size: :xs :sm, :md, :lg, :xl
-# color: :gray, :red, :green, :blue, or any other tailwind color
+# style: primary/outline/text
+# size: :sm, :md, :lg
+# color: nil, :primary, :accent, :gray, :red, :green, :blue, or any other tailwind color
 # icon: "heroicons/outline/paperclip" as specified in the docs (https://docs.avohq.io/3.0/icons.html)
 class Avo::ButtonComponent < Avo::BaseComponent
   prop :path, kind: :positional
   prop :size, default: :md
   prop :style, default: :outline
-  prop :color, default: :gray
+  prop :color
   prop :icon do |value|
     value&.to_sym
   end
   prop :icon_class, default: ""
   prop :is_link, default: false
-  prop :rounded, default: true
-  prop :compact, default: false
   prop :aria, default: {}.freeze
   prop :args, kind: :**, default: {}.freeze
   prop :class
@@ -34,48 +32,22 @@ class Avo::ButtonComponent < Avo::BaseComponent
   end
 
   def button_classes
-    classes = "button-component inline-flex flex-grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60 data-[disabled='true']:opacity-60 justify-center #{@class}"
-
-    # For non-icon-styled buttons we should not add borders.
-    classes += " border active:outline active:outline-1" unless is_icon?
-
-    classes += " rounded" if @rounded.present?
-    classes += style_classes
-    classes += horizontal_padding_classes
-    classes += vertical_padding_classes
-    classes += text_size_classes
-
-    classes
+    base_classes = [
+      "button",
+      "button--size-#{@size}",
+      "button--style-#{@style}",
+      @class,
+      "button--color-#{@color}": @color.present?
+    ]
+    base_classes << "button--loading" if @args[:loading]
+
+    class_names(*base_classes.compact)
   end
 
   def is_link?
     @is_link
   end
 
-  def is_icon?
-    @style == :icon
-  end
-
-  def is_not_icon?
-    !is_icon?
-  end
-
-  def full_content
-    result = ""
-    # space out the icon from the text if text is present
-    # add the icon height
-    icon_classes = class_names(@icon_class, "pointer-events-none", icon_size_classes, "mr-1": content.present? && is_not_icon?)
-
-    # Add the icon
-    result += helpers.svg(@icon, class: icon_classes) if @icon.present?
-
-    if is_not_icon? && content.present?
-      result += content
-    end
-
-    result.html_safe
-  end
-
   def call
     if is_link?
       output_link
@@ -86,104 +58,26 @@ class Avo::ButtonComponent < Avo::BaseComponent
 
   def output_link
     link_to @path, **args do
-      full_content
+      render_content
     end
   end
 
   def output_button
     if args.dig(:method).present? || args.dig(:data, :turbo_method).present?
       button_to args[:url], **args do
-        full_content
+        render_content
       end
     else
       button_tag(**args) do
-        full_content
+        render_content
       end
     end
   end
 
   private
 
-  def vertical_padding_classes
-    return " py-0" if is_icon?
-
-    case @size.to_sym
-    when :xs
-      " py-0"
-    when :sm
-      " py-1"
-    when :md
-      " py-1.5"
-    when :lg
-      " py-2"
-    when :xl
-      " py-3"
-    else
-      ""
-    end
-  end
-
-  def horizontal_padding_classes
-    return " px-0" if is_icon?
-    return " px-1" if @compact
-
-    case @size.to_sym
-    when :xs
-      " px-2"
-    when :sm
-      " px-3"
-    when :md
-      " px-3"
-    when :lg
-      " px-5"
-    when :xl
-      " px-6"
-    else
-      "px-4"
-    end
-  end
-
-  def text_size_classes
-    case @size.to_sym
-    when :xs
-      " text-xs"
-    else
-      " text-sm"
-    end
-  end
-
-  def style_classes
-    case @style
-    when :primary
-      " bg-#{@color}-500 text-white border-#{@color}-500 hover:bg-#{@color}-600 hover:border-#{@color}-600 active:border-#{@color}-600 active:outline-#{@color}-600 active:bg-#{@color}-600"
-    when :outline
-      " bg-white text-#{@color}-500 border-#{@color}-500 hover:bg-#{@color}-100 active:bg-#{@color}-100 active:border-#{@color}-500 active:outline-#{@color}-500"
-    when :text
-      " text-#{@color}-500 active:outline-#{@color}-500 hover:bg-gray-100 border-transparent"
-    when :icon
-      " text-#{@color}-600"
-    else
-      ""
-    end
-  end
-
-  def icon_size_classes
-    icon_classes = ""
-    return icon_classes if is_icon?
-
-    case @size
-    when :xs
-      icon_classes += " h-4 my-1"
-    when :sm
-      icon_classes += " h-4 my-1"
-    when :md
-      icon_classes += " h-4 my-1"
-    when :lg
-      icon_classes += " h-5 my-0.5"
-    when :xl
-      icon_classes += " h-6"
-    end
-
-    icon_classes
+  def render_content
+    concat helpers.svg(@icon, class: class_names("button__icon", @icon_class)) if @icon.present?
+    concat content if content.present?
   end
 end

data/app/components/avo/clipboard_component.html.erb

@@ -1,5 +1,6 @@
 <%= content_tag :div,
-  class: "opacity-0 group-hover/clipboard:opacity-100 transition-opacity duration-200 inline-block",
+  # the div is making the row taller without without the -my-1 class
+  class: "opacity-0 group-hover/clipboard:opacity-100 transition-opacity duration-200 inline-block -my-1 cursor-pointer",
   data: {
     controller: "clipboard",
     clipboard_success_duration_value: @duration_value,
@@ -15,7 +16,7 @@
         tippy: "tooltip",
         tippy_content: I18n.t("avo.copy")
       } do %>
-      <%= helpers.svg "heroicons/outline/clipboard", class: "h-4 inline" %>
+      <%= helpers.svg "tabler/outline/clipboard", class: "h-4 inline" %>
     <% end %>
   </div>
 <% end %>

data/app/components/avo/clipboard_component.rb

@@ -5,7 +5,7 @@ class Avo::ClipboardComponent < Avo::BaseComponent
 
   def before_render
     @duration_value = 2500
-    @content_value = helpers.svg("heroicons/outline/clipboard-document-check", class: "h-4 inline").tr('"', "'")
+    @content_value = helpers.svg("tabler/outline/clipboard-check", class: "h-4 inline").tr('"', "'")
   end
 
   def render?

data/app/components/avo/component_missing_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::ComponentMissingComponent < ViewComponent::Base
+  def initialize(*args, component_name:, &block)
+    @component_name = component_name
+  end
+
+  def call
+    "Component #{@component_name} not found in the Avo UI catalog."
+  end
+end

data/app/components/avo/cover_component.html.erb

@@ -0,0 +1,3 @@
+<%= tag.div class: class_names("related w-full flex overflow-hidden rounded-2xl", size_class), data: {component: component_name} do %>
+  <%= image_tag helpers.main_app.url_for(@cover.value), class: class_names("w-full object-cover self-center") %>
+<% end %>

data/app/components/avo/cover_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class Avo::CoverComponent < Avo::BaseComponent
+  prop :cover
+  prop :size do |value|
+    @cover&.size
+  end
+
+  def size_class
+    case @size
+    when :sm
+      "max-h-60"
+    when :md
+      "max-h-100"
+    when :lg
+      "max-h-140"
+    when :full
+      "max-h-none"
+    end
+  end
+
+  def render?
+    @cover.present? && @cover.visible_in_current_view?
+  end
+end

data/app/components/avo/debug/status_component.html.erb

@@ -0,0 +1,59 @@
+<div class="flex flex-col">
+  <%= render ui.panel(title: 'Avo Status', description: 'Use this page to debug your Avo instance.') do |panel| %>
+    <% panel.with_card do %>
+      <div class="grid gap-4 grid-cols-2">
+        <div class="relative flex flex-col bg-white rounded-sm shadow-panel p-4 space-y-4 h-full">
+          <div class="flex justify-between w-full">
+            <div class="font-semibold">License info</div>
+          </div>
+          <div class="flex flex-col flex-1">
+            <div>
+              <div class="text-xl font-semibold">
+                <span class="text-green-700 text-xl">
+                  <%= helpers.svg "heroicons/outline/check-badge", class: "h-5 inline -mt-1 relative" %> <span>Community</span>
+                </span> license
+              </div>
+              <div class="mt-4">
+                <dl>
+                  <% information_items.each do |key, value| %>
+                    <dt><%= key.humanize %></dt>
+                    <dd><%= value %></dd>
+                  <% end %>
+                </dl>
+              </div>
+              <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-sm">
+                <div class="font-semibold text-blue-800 mb-2">Ready to level up?</div>
+                <p class="text-sm text-blue-700 mb-4">
+                  Visit the link below, select your license, and head to the <strong>Upgrade</strong> section to get started.
+                </p>
+                <%= a_link 'https://avohq.io/licenses',
+                  style: :primary,
+                  color: :blue,
+                  target: '_blank',
+                  icon: 'heroicons/outline/external-link' do %>
+                  Get started!
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="relative flex flex-col bg-white rounded-sm shadow-panel p-4 space-y-4 h-full">
+          <div class="flex justify-between w-full">
+            <div class="font-semibold">Plugins</div>
+          </div>
+          <div class="flex flex-col flex-1">
+            <div>
+              <ul>
+                <li>Avo <%= Avo::VERSION %></li>
+                <% Avo.plugin_manager.plugins.each do |plugin| %>
+                  <li><%= plugin.name %> - <%= plugin.version %></li>
+                <% end %>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+</div>
+

data/app/components/avo/debug/status_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class Avo::Debug::StatusComponent < Avo::BaseComponent
+  include Avo::ApplicationHelper
+
+  def information_items
+    @information_items ||= {
+      license_key: Avo.configuration.license_key,
+      ruby_version: RUBY_VERSION,
+      rails_version: Rails::VERSION::STRING,
+      environment: Rails.env,
+      host: Avo::Current.request&.host,
+      port: Avo::Current.request&.port,
+      ip: Avo::Current.request&.ip,
+      app_name: Avo.configuration.app_name,
+      cache_store: Avo.cache_store.class,
+      cache_operational:,
+    }.stringify_keys.except(*Avo.configuration.exclude_from_status)
+  end
+
+  def cache_operational
+    icon, color = if Avo::Services::TelemetryService.cache_operational?
+      ["tabler/outline/circle-check", "text-green-500"]
+    else
+      ["tabler/outline/circle-x", "text-red-500"]
+    end
+
+    helpers.svg(icon, class: "h-5 inline -mt-1 relative #{color}")
+  end
+end

data/app/components/avo/description_list_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::DescriptionListComponent < Avo::BaseComponent
+  prop :classes, default: ""
+
+  def call
+    tag.div class: class_names("description-list", @classes) do
+      content
+    end
+  end
+end

data/app/components/avo/discreet_information_component.html.erb

@@ -1,7 +1,32 @@
-<div class="flex gap-2 ml-2 mt-1 items-center">
-  <% items.each do |item| %>
-    <%= content_tag element_tag(item), **element_attributes(item), class: element_classes(item), title: item.tooltip, data: {tippy: :tooltip, **data(item)} do %>
-      <%= item.label if item.label.present? %> <%= helpers.svg item.icon, class: icon_classes(item) %>
-    <% end %>
+<%= wrapper_element class: class_names(
+  @classes,
+  "discreet-information",
+  "discreet-information--as-icon": as_icon?,
+  "discreet-information--as-text": as_text?,
+  "discreet-information--as-badge": as_badge?,
+  "discreet-information--as-key-value": as_key_value?
+), title: @title, data: { **(@data || {}), tippy: (@title.present? ? :tooltip : nil) } do %>
+  <% if as_icon? %>
+    <%= helpers.svg @icon, class: "discreet-information__icon" %>
+  <% elsif as_text? %>
+    <div class="discreet-information__text">
+      <%= helpers.svg @icon, class: "discreet-information__icon" if @icon.present? %>
+      <%= @text %>
+    </div>
+  <% elsif as_badge? %>
+    <div class="discreet-information__badge">
+      <div class="discreet-information__text">
+        <%= helpers.svg @icon, class: "discreet-information__icon" if @icon.present? %>
+        <%= @text %>
+      </div>
+    </div>
+  <% elsif as_key_value? %>
+    <div class="discreet-information__key-value">
+      <div class="discreet-information__key"><%= @key %></div>
+
+      <div class="discreet-information__text">
+        <%= @value %>
+      </div>
+    </div>
   <% end %>
-</div>
+<% end %>

data/app/components/avo/discreet_information_component.rb

@@ -1,47 +1,38 @@
 # frozen_string_literal: true
 
 class Avo::DiscreetInformationComponent < Avo::BaseComponent
-  prop :payload
-
-  def items
-    @payload.items.compact.filter { |item| render_item?(item) }
+  prop :icon
+  prop :key
+  prop :text
+  prop :value
+  prop :as, default: :text
+  prop :url
+  prop :target
+  prop :title
+  prop :data
+  prop :classes
+
+  def as_icon?
+    @as == :icon
   end
 
-  def element_tag(item)
-    if item.url.present?
-      :a
-    else
-      :div
-    end
+  def as_text?
+    @as == :text
   end
 
-  def element_attributes(item)
-    if item.url.present?
-      {href: item.url, target: item.url_target}
-    else
-      {}
-    end
+  def as_badge?
+    @as == :badge
   end
 
-  def element_classes(item)
-    if item.as == :badge
-      %w[flex gap-1 whitespace-nowrap rounded-md uppercase px-2 py-1 leading-none items-center text-xs block text-center truncate bg-gray-400 text-white hover:bg-gray-500]
-    else
-      %w[flex gap-1 text-xs font-normal text-gray-600 hover:text-gray-900]
-    end
+  def as_key_value?
+    @as == :key_value
   end
 
-  def icon_classes(item)
-    if item.as == :badge
-      %w[text-2xl h-3]
+  def wrapper_element(args = {}, &block)
+    if @url.present?
+      link_to @url, **args, target: @target, &block
     else
-      %w[text-2xl h-4]
+      tag.div(**args, &block)
     end
   end
-
-  def data(item) = item.data || {}
-
-  def render_item?(item)
-    item.visible.nil? || item.visible
-  end
 end

data/app/components/avo/divider_component.html.erb

@@ -1,6 +1,6 @@
-<div class="relative flex justify-center items-center w-full !border-b-2 border-gray-200 border-solid" data-component-name="<%= self.class.to_s.underscore %>">
+<div class="relative flex items-center w-[calc(100%+2rem)] border-t border-tertiary border-solid my-1 -mx-2 px-2" data-component-name="<%= self.class.to_s.underscore %>">
   <% if @label.present? %>
-    <div class="absolute inset-auto z-20 text-xs font-semibold uppercase leading-none text-gray-500 bg-white px-2 border py-1 rounded">
+    <div class="relative inset-auto z-20 text-xs leading-none text-content-secondary px-2 pt-2 pb-1 font-medium">
       <%= @label %>
     </div>
   <% end %>

data/app/components/avo/empty_state_component.html.erb

@@ -1,12 +1,5 @@
-<% if @add_background %>
-  <div class="bg-white rounded shadow-panel">
-<% end %>
-<div class="relative flex-1 flex flex-col items-center justify-center space-y-12 py-24">
-  <%= helpers.svg view_type_svg, class: 'h-[250px]' %>
-  <div class="text-gray-500 text-center">
+<div class="relative flex-1 flex flex-col items-center justify-center space-y-2 py-6 border border-dashed border-content-secondary rounded-lg">
+  <div class="text-content-secondary text-center">
     <%= text %>
   </div>
 </div>
-<% if @add_background %>
-  </div>
-<% end %>

data/app/components/avo/empty_state_component.rb

@@ -2,20 +2,12 @@
 
 class Avo::EmptyStateComponent < Avo::BaseComponent
   prop :message
-  prop :view_type, default: :table do |value|
-    value&.to_sym
-  end
-  prop :add_background, default: false
   prop :by_association, default: false
 
   def text
     @message || locale_message
   end
 
-  def view_type_svg
-    "avo/#{@view_type}-empty-state"
-  end
-
   private
 
   def locale_message

data/app/components/avo/field_wrapper_component.html.erb

@@ -1,32 +1,29 @@
 <%= content_tag :div,
+  id: dom_id(@field),
   class: classes,
   style: style,
   data: data do %>
-  <%= content_tag :div, class: class_names("pt-4 flex self-start items-center flex-shrink-0 w-full px-6 uppercase font-semibold text-gray-500 text-sm", @field.get_html(:classes, view: @view, element: :label), {
-    "md:pt-4": stacked?,
-    "h-full md:pt-0": !stacked?,
-    "md:h-10 ": !stacked? && short?,
-    "md:h-14 ": !stacked? && !short?,
-    "md:w-48": !stacked? && compact?,
-    "md:w-64": !stacked? && !compact?,
-  }), data: {slot: "label"} do %>
+  <%= content_tag :div,
+    class: class_names("field-wrapper__label", @field.get_html(:classes, view: @view, element: :label)),
+    data: {slot: "label"} do %>
+    <span class="self-center">
     <% if @form.present? %>
       <%= @form.label label_for, label %>
     <% else %>
       <%= @field.name %>
     <% end %>
-    <% if on_edit? && @field.is_required? %> <span class="text-red-600 ml-1">*</span> <% end %>
+    <% if on_edit? && @field.is_required? %> <span class="text-red-600 ms-1">*</span> <% end %>
+    <% if label_help.present? %>
+      <div class="field-wrapper__label-help"><%== label_help %></div>
+    <% end %>
+    </span>
   <% end %>
-  <%= content_tag :div, class: class_names("flex-1 flex flex-row md:min-h-inherit px-6",
-    @field.get_html(:classes, view: @view, element: :content),
-      {
-        "pb-4": stacked?,
-        "py-2": !compact?,
-        "py-1": compact?,
-      }), data: {slot: "value"} do %>
-    <div class="self-center w-full <% unless full_width? || compact? || stacked? %> md:w-8/12 has-sidebar:w-full <% end %>">
+  <%= content_tag :div,
+    class: class_names("field-wrapper__content", @field.get_html(:classes, view: @view, element: :content)),
+    data: {slot: "value"} do %>
+    <%= tag.div class: "field-wrapper__content-wrapper" do %>
       <% if on_show? %>
-        <div class="flex flex-row items-center group gap-x-1 group/clipboard">
+        <div class="flex flex-row items-center group gap-x-1 group/clipboard w-full">
           <% if render_dash? %>
             —
           <% else %>
@@ -37,15 +34,17 @@
           <% end %>
         </div>
       <% elsif on_edit? %>
-        <%= content %>
+        <div class="field-wrapper__input">
+          <%= content %>
+        </div>
         <% if @field.record_errors.include?(@field.id) %>
-          <div class="text-red-600 mt-2 text-sm"><%= @field.record_errors.full_messages_for(@field.id).to_sentence %></div>
+          <div class="field-wrapper__error"><%= @field.record_errors.full_messages_for(@field.id).to_sentence %></div>
         <% end %>
         <% if help.present? %>
-          <div class="text-gray-600 mt-2 text-sm"><%= sanitize help %></div>
+          <div class="field-wrapper__help"><%== help %></div>
         <% end %>
       <% end %>
-    </div>
+    <% end %>
   <% end %>
   <% if params[:avo_debug].present? %>
     <!-- Raw value: -->

data/app/components/avo/field_wrapper_component.rb

@@ -7,12 +7,12 @@ class Avo::FieldWrapperComponent < Avo::BaseComponent
   prop :data, default: {}.freeze
   prop :compact, default: false
   prop :help
+  prop :label_help
   prop :field
   prop :form
   prop :full_width, default: false
   prop :label
   prop :resource
-  prop :short, default: false
   prop :stacked
   prop :style, default: ""
   prop :view, default: Avo::ViewInquirer.new(:show).freeze
@@ -27,19 +27,14 @@ class Avo::FieldWrapperComponent < Avo::BaseComponent
   end
 
   def classes(extra_classes = "")
-    class_names("field-wrapper relative flex flex-col grow pb-2 md:pb-0 leading-tight size-auto",
+    class_names("field-wrapper",
       @classes,
       extra_classes,
+      @field.width_class,
       @field.get_html(:classes, view: @view, element: :wrapper),
       {
-        "min-h-14": !short?,
-        "min-h-10": short?,
-        "field-wrapper-size-compact": compact?,
-        "field-wrapper-size-regular": !compact?,
-        "field-width-full": full_width?,
-        "field-width-regular": !full_width?,
-        "field-wrapper-layout-stacked": stacked?,
-        "field-wrapper-layout-inline md:flex-row md:items-center": !stacked?
+        "field-wrapper--stacked": stacked?,
+        "field-wrapper--full-width": full_width?,
       })
   end
 
@@ -61,6 +56,10 @@ class Avo::FieldWrapperComponent < Avo::BaseComponent
     Avo::ExecutionContext.new(target: @help || @field.help, record: record, resource: @resource, view: @view).handle
   end
 
+  def label_help
+    Avo::ExecutionContext.new(target: @label_help || @field.label_help, record: record, resource: @resource, view: @view).handle
+  end
+
   def record
     @resource.present? ? @resource.record : nil
   end
@@ -101,14 +100,6 @@ class Avo::FieldWrapperComponent < Avo::BaseComponent
     Avo.configuration.field_wrapper_layout == :stacked
   end
 
-  def compact?
-    @compact
-  end
-
-  def short?
-    @short
-  end
-
   def full_width?
     @full_width
   end

data/app/components/avo/fields/avatar_field/index_component.html.erb

@@ -0,0 +1,9 @@
+<%= index_field_wrapper(**field_wrapper_args, flush: true, dash_if_blank: false, center_content: true) do %>
+  <% if @resource.avatar.present? && @resource.avatar.value.present? %>
+    <%= render Avo::UI::AvatarComponent.new src: helpers.main_app.url_for(@resource.avatar.value), shape: :square, type: :avatar, size: :small %>
+  <% elsif @resource.initials.present? %>
+    <%= render Avo::UI::AvatarComponent.new shape: :square, type: :initials, size: :small, initials: @resource.initials %>
+  <% else %>
+    <%= render Avo::UI::AvatarComponent.new shape: :square, type: :placeholder, size: :small %>
+  <% end %>
+<% end %>