avo 3.30.4 → 4.0.0.beta.2

data/app/components/avo/u_i/badge_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Avo::UI::BadgeComponent < Avo::BaseComponent
+  VALID_STYLES = %i[solid subtle].freeze unless defined?(VALID_STYLES)
+  VALID_COLORS = %i[neutral success info warning danger red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose].freeze unless defined?(VALID_COLORS)
+
+  prop :color do |value|
+    normalize_to_valid(value, VALID_COLORS, :neutral)
+  end
+
+  prop :style, default: :subtle do |value|
+    normalize_to_valid(value, VALID_STYLES, :subtle)
+  end
+
+  prop :label
+  prop :icon
+  prop :classes
+
+  def style_classes
+    "badge--#{@style}" if @style.present?
+  end
+
+  def color_classes
+    "badge--#{@color}" if @color.present?
+  end
+
+  private
+
+  def normalize_to_valid(value, valid_options, fallback)
+    return fallback if value.blank?
+
+    normalized = value.to_s.to_sym
+    valid_options.include?(normalized) ? normalized : fallback
+  end
+end

data/app/components/avo/u_i/card_component.html.erb

@@ -0,0 +1,29 @@
+<%= tag.div class: class_names("card", @class), data: {**@data, item_index: @index} do %>
+  <%= tag.div class: class_names("card__wrapper", @wrapper_class) do %>
+    <% if header? %>
+      <div class="card__header"><%= header %></div>
+    <% else %>
+      <% if @title.present? || @description.present? %>
+        <div class="card__header">
+          <% if @title.present? %>
+            <div class="card__title"><%= @title %></div>
+          <% end %>
+
+          <% if @description.present? %>
+            <div class="card__description"><%= @description %></div>
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
+
+    <% if body? %>
+      <%= body %>
+    <% elsif content? %>
+      <div class="card__body"><%= content %></div>
+    <% end %>
+
+    <% if footer? %>
+      <div class="card__footer"><%= footer %></div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/avo/u_i/card_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+class Avo::UI::CardComponent < Avo::BaseComponent
+  prop :title
+  prop :description
+  prop :class
+  prop :wrapper_class
+  prop :with_padding, default: -> { true }
+  prop :variant, default: -> { :default }
+  prop :options, kind: :**
+  prop :data, default: -> { {}.freeze }
+  prop :index
+
+  renders_one :header
+  renders_one :body, "BodyComponent"
+  renders_one :footer
+
+  class BodyComponent < Avo::BaseComponent
+    prop :class
+    prop :data, default: -> { {}.freeze }
+
+    def call
+      tag.div class: class_names("card__body", @class), data: {**@data, item_index: @index} do
+        content
+      end
+    end
+  end
+
+  private
+
+  # def panel_classes
+  #   base_classes = "panel"
+  #   variant_classes = case variant
+  #                    when :compact
+  #                      "panel--compact"
+  #                    when :full_width
+  #                      "panel--full-width"
+  #                    else
+  #                      "panel--default"
+  #                    end
+  #   padding_classes = with_padding ? "panel--with-padding" : ""
+
+  #   [base_classes, variant_classes, padding_classes].compact.join(" ")
+  # end
+
+  # def compact?
+  #   variant == :compact
+  # end
+
+  # def full_width?
+  #   variant == :full_width
+  # end
+
+  # def with_padding?
+  #   with_padding
+  # end
+
+  # def header_classes
+  #   "panel__header"
+  # end
+
+  # def body_classes
+  #   "panel__body"
+  # end
+end

data/app/components/avo/u_i/dropdown_component.html.erb

@@ -0,0 +1,14 @@
+<%= content_tag :div, class: class_names("dropdown"), data: do %>
+  <%= trigger %>
+
+  <% if items.present? %>
+    <%= render Avo::UI::DropdownMenuComponent.new(
+      data: {dropdown_menu_target: "menu"}.merge(@data),
+      classes: @classes,
+      dropdown_menu_classes: @dropdown_menu_classes,
+      open: @open
+    ) do %>
+      <%= items %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/avo/u_i/dropdown_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Avo::UI::DropdownComponent < Avo::BaseComponent
+  prop :classes
+  prop :data, default: {}.freeze
+  prop :wrapper_data, default: {}.freeze
+  prop :open, default: false
+  prop :dropdown_menu_classes, default: ""
+
+  renders_one :trigger
+  renders_one :items
+
+  # this is used to trigger the dropdown menu from trigger element
+  # data: {action: component.action} => click->dropdown-menu#toggle
+  def action
+    @action ||= "click->dropdown-menu#toggle"
+  end
+
+  def data
+    return {} if items.blank?
+
+    {
+      controller: "dropdown-menu",
+    }.merge(@wrapper_data)
+  end
+end

data/app/components/avo/u_i/dropdown_menu_component.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag :dialog,
+  class: class_names(
+    "dropdown-popover",
+    "css-animate-dialog-slide-down",
+    @classes
+  ), 
+  open: @open,
+  data: @data do %>
+  <div class="dropdown-menu <%= @dropdown_menu_classes %>">
+    <div class="dropdown-menu__group">
+      <div class="dropdown-menu__list">
+        <%= content %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/avo/u_i/dropdown_menu_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Avo::UI::DropdownMenuComponent < Avo::BaseComponent
+  prop :data, default: {}.freeze
+  prop :classes
+  prop :open, default: false
+  prop :dropdown_menu_classes, default: ""
+end

data/app/components/avo/u_i/file_upload_input_component.html.erb

@@ -0,0 +1,26 @@
+<%= content_tag :label, for: @id, class: class_names(
+    "file-upload-input",
+    "file-upload-input--#{@size}",
+    {
+      "file-upload-input--disabled": @disabled
+    },
+    @classes) do %>
+  <span class="file-upload-input__icon" aria-hidden="true">
+    <%= svg "tabler/outline/upload" %>
+  </span>
+
+  <% if @size != :sm %>
+    <span class="file-upload-input__content">
+      <span class="file-upload-input__title">
+        <%= @title %>
+        <span class="file-upload-input__subtitle"><%= @subtitle %></span>
+      </span>
+
+      <%= content_tag(:span, @description, class: "file-upload-input__description") %>
+    </span>
+  <% end %>
+
+  <div class="file-upload-input__native-input">
+    <%= content if content.present? %>
+  </div>
+<% end %>

data/app/components/avo/u_i/file_upload_input_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Avo::UI::FileUploadInputComponent < Avo::BaseComponent
+  VALID_SIZES = %i[sm md lg].freeze unless defined?(VALID_SIZES)
+
+  prop :id
+  prop :title, default: "Click to upload"
+  prop :subtitle, default: "or drag and drop"
+  prop :description
+  prop :size, default: :lg do |value|
+    VALID_SIZES.include?(value) ? value : :lg
+  end
+  prop :disabled, default: false
+  prop :classes
+end

data/app/components/avo/u_i/file_upload_item_component.html.erb

@@ -0,0 +1,48 @@
+<%= content_tag :div, class: class_names("file-upload-item",{
+  "file-upload-item--uploading": show_progress?,
+}, @classes) do %>
+  <span
+    class="file-upload-item__progress"
+    style="width: <%= progress_percentage %>%;"
+    aria-hidden="true">
+  </span>
+
+  <div class="file-upload-item__body">
+    <p class="file-upload-item__title" title="<%= @title %>"><%= @title %></p>
+
+    <div class="file-upload-item__meta">
+      <span class="file-upload-item__size">
+        <% if @state == :error || @state == :failed %>
+          Upload failed.
+        <% else %>
+          <%= @size_label %>
+        <% end %>
+      </span>
+
+      <% if show_progress? %>
+        <span aria-hidden="true">|</span>
+
+        <% if @state == :complete %>
+          <span class="file-upload-item__status file-upload-item__status--complete">
+          <%= svg("tabler/outline/circle-check", class: "file-upload-item__status-icon") %>
+            <span class="file-upload-item__status-label">Complete</span>
+          </span>
+        <% end %>
+        <% if @state == :error || @state == :failed %>
+          <span class="file-upload-item__status file-upload-item__status--error">
+            <%= svg("tabler/outline/circle-x", class: "file-upload-item__status-icon") %>
+            <span class="file-upload-item__status-label">Try again</span>
+          </span>
+        <% end %>
+        <% if @state == :uploading %>
+          <span class="file-upload-item__status file-upload-item__status--uploading">
+            <%= svg("tabler/outline/upload", class: "file-upload-item__status-icon") %>
+            <span class="file-upload-item__status-label"><%= progress_percentage %>%</span>
+          </span>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <%= content_tag :div, content, class: "file-upload-item__actions" if content.present? %>
+<% end %>

data/app/components/avo/u_i/file_upload_item_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Avo::UI::FileUploadItemComponent < Avo::BaseComponent
+  prop :title
+  prop :size_label
+  prop :progress, default: 0
+  prop :classes
+  prop :state, default: :default # :uploading, :complete, :error, :failed after we wull implement the states dynamically
+
+  def show_progress?
+    @progress.to_i > 0 || @state != :default
+  end
+
+  def progress_percentage
+    @progress.to_i.clamp(0, 100)
+  end
+end

data/app/components/avo/u_i/icon_button_component.html.erb

@@ -0,0 +1,7 @@
+<%= tag.button(
+  type: @type,
+  class: button_classes,
+  data: data
+) do %>
+  <%= svg(@icon) %>
+<% end %>

data/app/components/avo/u_i/icon_button_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class Avo::UI::IconButtonComponent < Avo::BaseComponent
+  prop :icon
+  prop :action
+  prop :classes
+  prop :type, default: :button
+  prop :data, default: {}.freeze
+
+  def data
+    {
+      action: @action
+    }.merge(@data)
+  end
+
+  def button_classes
+    class_names(
+      "inline-flex items-center justify-center rounded-md p-1 cursor-pointer",
+      @classes
+    )
+  end
+end

data/app/components/avo/u_i/panel_component.html.erb

@@ -0,0 +1,49 @@
+<%= tag.div class: class_names(
+  "panel",
+  @class,
+  "panel--has-sidebar": sidebar?,
+  "has-cover": has_cover?,
+), data: {
+  **@data,
+  component_name:,
+  "item-index": @index
+} do %>
+  <% if cover? %>
+    <div class="panel__cover"><%= cover %></div>
+  <% end %>
+
+  <% if header? %>
+    <div class="panel__header"><%= header %></div>
+  <% elsif title.present? || description.present? || controls? %>
+    <div class="panel__header">
+      <%= render ui.panel_header(
+        title:,
+        description:,
+      ) do |header| %>
+        <% if controls? %>
+          <% header.with_controls do %>
+            <%= controls %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="panel__content">
+    <div class="panel__body">
+      <% if card? %>
+        <div class="panel__card"><%= card %></div>
+      <% else %>
+        <%= body %>
+      <% end %>
+
+      <% if footer? %>
+        <div class="panel__footer"><%= footer %></div>
+      <% end %>
+    </div>
+
+    <% if sidebar? %>
+      <div class="panel__sidebar"><%= sidebar %></div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/u_i/panel_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Avo::UI::PanelComponent < Avo::BaseComponent
+  prop :title, reader: :public
+  prop :description, reader: :public
+  prop :external_link
+  prop :args, kind: :**, default: {}.freeze
+  prop :avatar
+  prop :cover
+  prop :class
+  prop :index
+  prop :data, default: -> { {}.freeze }
+
+  renders_one :header
+  renders_one :controls
+  renders_one :cover
+  renders_one :sidebar
+  renders_one :body
+  renders_one :card, "Avo::UI::CardComponent" # wraps content into a card automatically
+  renders_one :footer
+
+  def has_cover?
+    @cover.present?
+  end
+
+  def has_avatar?
+    @avatar.present?
+  end
+end

data/app/components/avo/u_i/panel_header_component.html.erb

@@ -0,0 +1,37 @@
+<%= tag.div class: class_names(
+  @class,
+  "header",
+  "header--size-medium": size_medium?,
+  "header--size-small": size_small?
+), data: { "item-index": @index, component: component_name }.compact_blank do %>
+  <div class="header__main">
+    <div class="header__content">
+      <% if avatar? %>
+        <div class="header__avatar"><%= avatar %></div>
+      <% end %>
+
+      <div class="header__text">
+        <div class="header__title">
+          <% if @url.present? %>
+            <%= link_to @title, @url, target: @target %>
+          <% else %>
+            <%= @title %>
+          <% end %>
+          <%= title_slot %>
+        </div>
+
+        <% if @description.present? %>
+          <p class="header__description"><%= @description %></p>
+        <% end %>
+
+      <% if discreet_information? %>
+        <div class="header__discreet-information mt-2"><%= discreet_information %></div>
+      <% end %>
+      </div>
+    </div>
+
+    <% if controls? %>
+      <div class="header__controls"><%= controls %></div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/u_i/panel_header_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class Avo::UI::PanelHeaderComponent < Avo::BaseComponent
+  prop :title
+  prop :description
+  prop :size, default: :medium
+  prop :url
+  prop :target
+  prop :index
+  prop :class
+
+  renders_one :title_slot
+  renders_one :avatar
+  renders_one :controls
+  renders_one :discreet_information
+
+  def size_medium?
+    @size == :medium
+  end
+
+  def size_small?
+    @size == :small
+  end
+end

data/app/components/avo/u_i/search_input_component.html.erb

@@ -0,0 +1,28 @@
+<%= content_tag :div, class: "search-input" do %>
+  <%= search_field_tag @name, @value,
+    id: @id,
+    placeholder: @placeholder,
+    class: class_names(
+      "search-input__input",
+      {"search-input__input--with-shortcut": @with_shortcut},
+      @classes
+    ),
+    disabled: @disabled,
+    autocomplete: "off",
+    data: @data
+  %>
+
+  <span class="search-input__prefix" aria-hidden="true">
+    <%= helpers.svg "tabler/outline/search" %>
+  </span>
+
+  <% if @with_shortcut %>
+    <span class="search-input__suffix" aria-hidden="true">
+      <kbd class="search-input__shortcut">
+        <abbr title="Command" class="no-underline os-pc:hidden">⌘</abbr>
+        <abbr title="CTRL" class="no-underline os-mac:hidden">CTRL</abbr>
+      </kbd>
+      <kbd class="search-input__shortcut">K</kbd>
+    </span>
+  <% end %>
+<% end %>

data/app/components/avo/u_i/search_input_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Avo::UI::SearchInputComponent < Avo::BaseComponent
+  prop :name, default: "q"
+  prop :id
+  prop :value
+  prop :placeholder
+  prop :disabled, default: false
+  prop :with_shortcut, default: false
+  prop :classes
+  prop :data, default: -> { {} }
+end

data/app/components/avo/u_i/tabs/tab_component.html.erb

@@ -0,0 +1,26 @@
+<%= content_tag :div, class: class_names(
+  "tabs__item-wrapper",
+  "tabs__item-wrapper--#{@variant}",
+  "#{ACTIVE_CLASS}": @variant == :scope && @active
+) do %>
+  <%= link_to(@href,
+    class: class_names(
+      @classes,
+      "tabs__item",
+      "tabs__item--group": @variant == :group,
+      "tabs__item--disabled": @disabled,
+      "#{ACTIVE_CLASS}": @active
+    ),
+    data: @data,
+    title: @title,
+    role: "tab",
+    id: @id,
+    "aria-selected": @active,
+    "aria-controls": @aria_controls,
+    "aria-disabled": @disabled,
+    tabindex: @disabled ? -1 : 0
+  ) do %>
+    <%= svg @icon, class: "tabs__item-icon", "aria-hidden": "true" if @icon.present? %>
+    <%= tag.span @label, class: "tabs__item-label" if @label.present? %>
+  <% end %>
+<% end %>

data/app/components/avo/u_i/tabs/tab_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Avo
+  module UI
+    module Tabs
+      class TabComponent < Avo::BaseComponent
+        include Avo::ApplicationHelper
+
+        ACTIVE_CLASS = "tabs__item--active"
+
+        prop :label
+        prop :variant, default: :scope
+        prop :active, default: false
+        prop :icon
+        prop :href, default: "#"
+        prop :id, default: -> { "tab-#{object_id}" }
+        prop :disabled, default: false
+        prop :aria_controls, default: -> { "#{@id}-panel" }
+        prop :data, default: {}.freeze
+        prop :classes
+        prop :title
+      end
+    end
+  end
+end

data/app/components/avo/u_i/tabs/tabs_component.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag :div,
+  class: "tabs",
+  role: :tablist,
+  id: @id,
+  "aria-label": @aria_label do %>
+  <%= content %>
+<% end %>

data/app/components/avo/u_i/tabs/tabs_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Avo
+  module UI
+    module Tabs
+      class TabsComponent < Avo::BaseComponent
+        prop :variant, default: :scope
+        prop :aria_label, default: "Tabs navigation"
+        prop :id, default: -> { "tabs-#{object_id}" }
+      end
+    end
+  end
+end

data/app/components/avo/view_types/base_view_type_component.rb

@@ -0,0 +1,26 @@
+class Avo::ViewTypes::BaseViewTypeComponent < Avo::BaseComponent
+  extend PropInitializer::Properties
+
+  prop :resources
+  prop :resource
+  prop :reflection
+  prop :parent_record
+  prop :parent_resource
+  prop :actions, reader: :public
+  prop :pagy
+  prop :query
+  prop :turbo_frame
+  prop :index_params
+
+  def paginator_component
+    Avo::PaginatorComponent.new(
+      pagy: @pagy,
+      turbo_frame: @turbo_frame,
+      index_params: @index_params,
+      resource: @resource,
+      parent_record: @parent_record,
+      parent_resource: @parent_resource,
+      discreet_pagination: field&.discreet_pagination
+    )
+  end
+end

data/app/components/avo/view_types/grid_component.html.erb

@@ -0,0 +1,18 @@
+<turbo-frame id="<%= @resource.model_key %>_list" target="_top" class="relative flex w-full flex-col @container">
+  <%= content_tag :div,
+    class: "grid-wrapper",
+    data: {
+      component_name: self.class.to_s.underscore,
+      selected_resources_name: @resource.model_key,
+      selected_resources: [],
+      **(try(:drag_reorder_data_attributes) || {})
+    } do %>
+    <% @resources.each_with_index do |resource, index| %>
+      <% cache_if Avo.configuration.cache_resources_on_index_view, resource.cache_hash(@parent_record) do %>
+        <%= render(resource.resolve_component(Avo::Index::GridItemComponent).new(resource: resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, actions: actions)) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <div class="mt-6"><%= render paginator_component %></div>
+</turbo-frame>

data/app/components/avo/view_types/grid_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::ViewTypes::GridComponent < Avo::ViewTypes::BaseViewTypeComponent
+end