igniter 0.5.0 → 0.5.1

data/packages/igniter-frontend/lib/igniter/frontend/arbre/components/table_with.rb

@@ -0,0 +1,203 @@
+# frozen_string_literal: true
+
+require_relative "../component"
+require_relative "display_value_support"
+
+module Igniter
+  module Frontend
+    module Arbre
+      module Components
+        class TableWith < Arbre::Component
+          builder_method :table_with
+          include DisplayValueSupport
+
+          Column = ::Data.define(
+            :title,
+            :key,
+            :as,
+            :placeholder,
+            :badge_options,
+            :header_class,
+            :cell_class,
+            :block,
+            :kind
+          )
+
+          def build(collection, *args, &block)
+            options = extract_options!(args)
+            title = options.delete(:title)
+            subtitle = options.delete(:subtitle)
+            theme = options.delete(:theme) || :companion
+            empty_message = options.delete(:empty_message) || "Nothing to show yet."
+            compact = options.delete(:compact)
+            class_name = options.delete(:class_name)
+            span = options.delete(:span)
+            span_class = span ? "span-#{span}" : nil
+
+            @rows = normalize_rows(collection)
+            @columns = []
+            @theme = ui_theme(theme)
+            @empty_message = empty_message
+            @compact = compact
+
+            super(options.merge(class: merge_classes("table-shell overflow-x-auto", span_class, class_name)))
+            render_header(title, subtitle)
+            render_build_block(block) if block&.arity.to_i <= 0
+            render_table
+          end
+
+          def column(title, key = nil, as: nil, placeholder: nil, badge: nil, header_class: nil, cell_class: nil, &block)
+            @columns << Column.new(title, key || title, as, placeholder, badge, header_class, cell_class, block, :value)
+            nil
+          end
+
+          def actions(title = "Actions", header_class: nil, cell_class: nil, &block)
+            @columns << Column.new(title, nil, nil, nil, nil, header_class, cell_class, block, :actions)
+            nil
+          end
+
+          private
+
+          def render_header(title, subtitle)
+            return if title.nil? && subtitle.nil?
+
+            div(class: "mb-5 grid gap-2") do
+              h2(title, class: @theme.section_heading_class(extra: "mt-0")) if title
+              div(subtitle, class: @theme.muted_text_class) if subtitle
+            end
+          end
+
+          def render_table
+            table(class: merge_classes("min-w-full border-separate border-spacing-0", @compact ? "text-sm" : nil)) do |root|
+              render_head(root)
+              render_body(root)
+            end
+          end
+
+          def render_head(root)
+            header_class = merge_classes(
+              @theme.field_label_class(extra: @compact ? "px-3 py-2 text-left align-bottom border-b border-white/10" : "px-4 py-3 text-left align-bottom border-b border-white/10")
+            )
+
+            root.thead do |thead|
+              thead.tr do |row|
+                @columns.each do |col|
+                  row.th(humanize_label(col.title), class: merge_classes(header_class, col.header_class))
+                end
+              end
+            end
+          end
+
+          def render_body(root)
+            root.tbody do |tbody|
+              if @rows.empty?
+                render_empty_row(tbody)
+              else
+                @rows.each_with_index do |entry, index|
+                  row_class = merge_classes(index.even? ? "bg-white/[0.02]" : nil, "transition hover:bg-white/[0.04]")
+                  tbody.tr(class: row_class) do |row|
+                    @columns.each do |col|
+                      render_cell(row, entry, col)
+                    end
+                  end
+                end
+              end
+            end
+          end
+
+          def render_empty_row(tbody)
+            tbody.tr do |row|
+              row.td(@empty_message, colspan: @columns.size, class: merge_classes(cell_base_class, "text-stone-400 italic"))
+            end
+          end
+
+          def render_cell(row, entry, column)
+            row.td(class: merge_classes(cell_base_class, column.cell_class)) do |cell|
+              if column.kind == :actions
+                render_actions_cell(cell, entry, column.block)
+              else
+                value = extract_value(entry, column)
+                render_value(cell, value, as: column.as, placeholder: column.placeholder, badge_options: column.badge_options)
+              end
+            end
+          end
+
+          def render_actions_cell(cell, entry, block)
+            return if block.nil?
+
+            cell.action_group(class_name: "flex flex-wrap gap-2") do |actions|
+              if block.arity >= 2
+                block.call(entry, actions)
+              else
+                result = block.call(entry)
+                actions.text_node(result.to_s) unless result.nil?
+              end
+            end
+          end
+
+          def render_value(cell, value, as:, placeholder:, badge_options:)
+            content = if value.nil? || (value.respond_to?(:empty?) && value.empty?)
+                        placeholder
+                      else
+                        value
+                      end
+            return if content.nil?
+
+            case content
+            when Array
+              render_array_value(cell, content, as: as, badge_options: badge_options)
+            else
+              render_scalar_value(cell, content, as: as, badge_options: badge_options)
+            end
+          end
+
+          def render_array_value(cell, values, as:, badge_options:)
+            items = values.compact
+            return if items.empty?
+
+            if as == :badge
+              cell.div(class: "flex flex-wrap gap-2") do |container|
+                items.each { |item| container.badge(item, **(badge_options || {})) }
+              end
+            else
+              cell.text_node(items.map { |item| display_text(item) }.join(", "))
+            end
+          end
+
+          def render_scalar_value(cell, value, as:, badge_options:)
+            render_semantic_scalar(cell, value, as: as, badge_options: badge_options, theme: @theme)
+          end
+
+          def extract_value(entry, column)
+            return column.block.call(entry) if column.block
+
+            key = column.key
+            return unless key
+
+            if entry.respond_to?(key)
+              entry.public_send(key)
+            elsif entry.respond_to?(:[])
+              entry[key] || entry[key.to_s]
+            end
+          end
+
+          def normalize_rows(collection)
+            return [] if collection.nil?
+            return collection.to_a if collection.respond_to?(:to_a) && !collection.is_a?(Hash)
+
+            [collection]
+          end
+
+          def cell_base_class
+            extra = @compact ? "px-3 py-2 align-top border-b border-white/5 text-sm" : "px-4 py-3 align-top border-b border-white/5"
+            @theme.body_text_class(extra: extra)
+          end
+
+          def tag_name
+            "div"
+          end
+        end
+      end
+    end
+  end
+end

data/packages/igniter-frontend/lib/igniter/frontend/arbre/components/tabs.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+require "json"
+require_relative "../component"
+
+module Igniter
+  module Frontend
+    module Arbre
+      module Components
+        class Tabs < Arbre::Component
+          builder_method :tabs
+
+          def build(*args, &block)
+            options = extract_options!(args)
+            title = options.delete(:title)
+            subtitle = options.delete(:subtitle)
+            span = options.delete(:span)
+            class_name = options.delete(:class_name)
+            tabs_id = options.delete(:id) || "tabs-#{object_id.abs}"
+            span_class = span ? "span-#{span}" : nil
+
+            @tabs_id = tabs_id
+            @tabs = []
+
+            super(
+              options.merge(
+                id: @tabs_id,
+                class: merge_classes("panel tabs-panel", span_class, class_name),
+                "data-ig-controller": "tabs"
+              )
+            )
+
+            build_heading(title, subtitle)
+            render_build_block(block)
+            render_tabs(title || "Tabs")
+          end
+
+          def add_child(child)
+            super
+          end
+
+          def meta(value = nil, &block)
+            container = ensure_header_container!
+            value.nil? ? container.div(class: "meta", &block) : container.div(value, class: "meta", &block)
+          end
+
+          def actions(class_name: nil, &block)
+            ensure_header_container!.action_group(class_name: class_name, &block)
+          end
+
+          def tab(title, active: nil, id: nil, &block)
+            active = @tabs.empty? if active.nil?
+            fragment = id || fragmentize(title)
+            pane_id = "#{@tabs_id}-#{fragment}"
+            button_id = "#{pane_id}-tab"
+            @tabs << {
+              title: title,
+              active: active,
+              pane_id: pane_id,
+              button_id: button_id,
+              block: block
+            }
+          end
+
+          def json_tab(title, payload:, panel_id: nil, panel_attributes: nil, active: nil, id: nil)
+            tab(title, active: active, id: id) do |pane|
+              attributes = (panel_attributes || {}).merge(id: panel_id)
+              pane.pre(attributes) { |code| code.text_node(JSON.pretty_generate(payload)) }
+            end
+          end
+
+          private
+
+          def render_tabs(label)
+            div(class: "tabs-nav", role: "tablist", "aria-label": label) do |nav|
+              @tabs.each do |entry|
+                nav.button(
+                  entry.fetch(:title),
+                  type: "button",
+                  id: entry.fetch(:button_id),
+                  class: merge_classes("tab-button", entry.fetch(:active) ? "active" : nil),
+                  role: "tab",
+                  "aria-controls": entry.fetch(:pane_id),
+                  "aria-selected": entry.fetch(:active).to_s,
+                  tabindex: entry.fetch(:active) ? "0" : "-1",
+                  "data-ig-tabs-target": "button",
+                  "data-ig-tabs-pane-id": entry.fetch(:pane_id)
+                )
+              end
+            end
+
+            div(class: "panel-body tabs-body") do |body|
+              body.div(class: "tabs-panes") do |panes|
+                @tabs.each do |entry|
+                  panes.div(
+                    id: entry.fetch(:pane_id),
+                    class: merge_classes("tab-pane", entry.fetch(:active) ? "active" : nil),
+                    role: "tabpanel",
+                    "aria-labelledby": entry.fetch(:button_id),
+                    "data-ig-tabs-target": "pane"
+                  ) do |pane|
+                    render_tab_content(pane, entry[:block])
+                  end
+                end
+              end
+            end
+          end
+
+          def render_tab_content(pane, block)
+            return unless block
+
+            if block.arity.zero?
+              pane.instance_exec(&block)
+            else
+              block.call(pane)
+            end
+          end
+
+          def build_heading(title, subtitle)
+            return if title.nil? && subtitle.nil?
+
+            ensure_heading_container!
+            @heading.h2(title) if title
+            @heading.div(subtitle, class: "caption") if subtitle
+          end
+
+          def ensure_header_container!
+            @header ||= div(class: "panel-header")
+          end
+
+          def ensure_heading_container!
+            ensure_header_container!
+            @heading ||= @header.div(class: "panel-heading")
+          end
+
+          def fragmentize(value)
+            value.to_s.downcase.gsub(/[^a-z0-9]+/, "-").gsub(/\A-+|-+\z/, "")
+          end
+
+          def tag_name
+            "article"
+          end
+        end
+      end
+    end
+  end
+end

data/packages/igniter-frontend/lib/igniter/frontend/arbre/components/viz.rb

@@ -0,0 +1,185 @@
+# frozen_string_literal: true
+
+require_relative "../component"
+
+module Igniter
+  module Frontend
+    module Arbre
+      module Components
+        class Viz < Arbre::Component
+          builder_method :viz
+
+          DEFAULT_MAX_ITEMS = 20
+
+          def build(value, *args)
+            options = extract_options!(args)
+            title = options.delete(:title)
+            name = options.delete(:name)
+            open = options.key?(:open) ? options.delete(:open) : true
+            compact = options.delete(:compact)
+            max_items = options.delete(:max_items) || DEFAULT_MAX_ITEMS
+            class_name = options.delete(:class_name)
+
+            @theme = ui_theme(:companion)
+            @compact = compact
+            @max_items = max_items
+
+            super(options.merge(class: merge_classes("viz-panel grid gap-3", class_name)))
+            render_header(title)
+            render_value(self, normalize(value), label: name, open: open, depth: 0, root: true)
+          end
+
+          private
+
+          def render_header(title)
+            return unless title
+
+            h3(title, class: @theme.section_heading_class(extra: "mt-0"))
+          end
+
+          def render_value(view, value, label:, open:, depth:, root: false)
+            case value
+            when Hash
+              render_hash(view, value, label: label, open: open, depth: depth, root: root)
+            when Array
+              render_array(view, value, label: label, open: open, depth: depth, root: root)
+            else
+              render_leaf(view, value, label: label)
+            end
+          end
+
+          def render_hash(view, hash, label:, open:, depth:, root:)
+            entries = hash.to_a.first(@max_items)
+
+            if root
+              container = view.div(class: block_class(depth))
+              entries.each do |key, value|
+                render_value(container, normalize(value), label: key.to_s, open: false, depth: depth + 1)
+              end
+              render_omitted_notice(container, hash.size - entries.size)
+              return
+            end
+
+            view.details(open: open ? true : nil, class: block_class(depth)) do |details|
+              details.summary(class: summary_class) do |summary|
+                summary.strong(label.to_s, class: "font-semibold text-stone-100") if label
+                summary.span("Hash · #{hash.size} entr#{hash.size == 1 ? "y" : "ies"}", class: "caption")
+              end
+
+              details.div(class: merge_classes("mt-3 grid gap-3", nested_class(depth))) do |body|
+                if entries.empty?
+                  body.div("Empty Hash", class: empty_class)
+                else
+                  entries.each do |key, value|
+                    render_value(body, normalize(value), label: key.to_s, open: false, depth: depth + 1)
+                  end
+                  render_omitted_notice(body, hash.size - entries.size)
+                end
+              end
+            end
+          end
+
+          def render_array(view, array, label:, open:, depth:, root: false)
+            items = array.first(@max_items)
+
+            if root
+              container = view.div(class: block_class(depth))
+              items.each_with_index do |item, index|
+                render_value(container, normalize(item), label: "[#{index}]", open: false, depth: depth + 1)
+              end
+              render_omitted_notice(container, array.size - items.size)
+              return
+            end
+
+            view.details(open: open ? true : nil, class: block_class(depth)) do |details|
+              details.summary(class: summary_class) do |summary|
+                summary.strong(label.to_s, class: "font-semibold text-stone-100") if label
+                summary.span("Array · #{array.size} item#{array.size == 1 ? "" : "s"}", class: "caption")
+              end
+
+              details.div(class: merge_classes("mt-3 grid gap-3", nested_class(depth))) do |body|
+                if items.empty?
+                  body.div("Empty Array", class: empty_class)
+                else
+                  items.each_with_index do |item, index|
+                    render_value(body, normalize(item), label: "[#{index}]", open: false, depth: depth + 1)
+                  end
+                  render_omitted_notice(body, array.size - items.size)
+                end
+              end
+            end
+          end
+
+          def render_leaf(view, value, label:)
+            view.div(class: row_class) do |row|
+              row.div(label.to_s, class: @theme.field_label_class) if label
+
+              case value
+              when true, false
+                row.badge(value, size: :sm)
+              when nil
+                row.div("nil", class: empty_class)
+              else
+                row.code(display_text(value), class: @theme.code_class)
+              end
+            end
+          end
+
+          def render_omitted_notice(view, omitted_count)
+            return unless omitted_count.positive?
+
+            view.div("… #{omitted_count} more item#{omitted_count == 1 ? "" : "s"}", class: empty_class)
+          end
+
+          def normalize(value)
+            return value if value.is_a?(Hash) || value.is_a?(Array)
+            return value unless value.respond_to?(:to_h)
+
+            value.to_h
+          rescue StandardError
+            value
+          end
+
+          def display_text(value)
+            case value
+            when Symbol
+              humanize_label(value)
+            else
+              value.to_s
+            end
+          end
+
+          def block_class(depth)
+            merge_classes(
+              "rounded-2xl border border-white/10 bg-white/[0.03] p-4",
+              depth.zero? && @compact ? "p-3" : nil
+            )
+          end
+
+          def nested_class(depth)
+            depth.positive? ? "pl-3 border-l border-white/5" : nil
+          end
+
+          def row_class
+            merge_classes(
+              "grid gap-2",
+              @compact ? "grid-cols-[minmax(110px,160px)_1fr]" : "grid-cols-[minmax(140px,190px)_1fr]"
+            )
+          end
+
+          def summary_class
+            "flex flex-wrap items-center gap-3 cursor-pointer"
+          end
+
+          def empty_class
+            "text-sm italic text-stone-400"
+          end
+
+          def tag_name
+            "div"
+          end
+        end
+      end
+    end
+  end
+end

data/packages/igniter-frontend/lib/igniter/frontend/arbre/page.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+require_relative "../tailwind"
+require_relative "component"
+
+require_relative "components/action_group"
+require_relative "components/badge"
+require_relative "components/boolean"
+require_relative "components/breadcrumbs"
+require_relative "components/card"
+require_relative "components/conversation_panel"
+require_relative "components/datetime"
+require_relative "components/empty_state"
+require_relative "components/event_list"
+require_relative "components/filters"
+require_relative "components/indicator"
+require_relative "components/json_panel"
+require_relative "components/key_value_list"
+require_relative "components/loading_state"
+require_relative "components/metric_grid"
+require_relative "components/number"
+require_relative "components/page_header"
+require_relative "components/panel"
+require_relative "components/pagination"
+require_relative "components/percentage"
+require_relative "components/resource_list"
+require_relative "components/scenario_card"
+require_relative "components/shell_columns"
+require_relative "components/sidebar_shell"
+require_relative "components/table_with"
+require_relative "components/tabs"
+require_relative "components/viz"
+
+module Igniter
+  module Frontend
+    module Arbre
+      class Page
+        class << self
+          def render_fragment(assigns: {}, helpers: nil, &block)
+            Arbre.ensure_available!
+            context_class.new(assigns, helpers, &block).to_s
+          end
+
+          def render_page(title:, lang: "en", theme: :companion,
+                          body_class: Igniter::Frontend::Tailwind::DEFAULT_BODY_CLASS,
+                          main_class: Igniter::Frontend::Tailwind::DEFAULT_MAIN_CLASS,
+                          include_play_cdn: true, tailwind_config: nil, head_content: nil,
+                          assigns: {}, helpers: nil, &block)
+            fragment = render_fragment(assigns: assigns, helpers: helpers, &block)
+
+            Igniter::Frontend::Tailwind.render_page(
+              title: title,
+              lang: lang,
+              theme: theme,
+              body_class: body_class,
+              main_class: main_class,
+              include_play_cdn: include_play_cdn,
+              tailwind_config: tailwind_config,
+              head_content: head_content
+            ) do |main|
+              main.raw(fragment)
+            end
+          end
+
+          private
+
+          def context_class
+            Arbre.context_class
+          end
+        end
+      end
+    end
+  end
+end

data/packages/igniter-frontend/lib/igniter/frontend/arbre/raw_text_node.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Igniter
+  module Frontend
+    module Arbre
+      FallbackElement = Class.new do
+        def self.builder_method(*)
+          nil
+        end
+      end
+
+      raw_text_base_class = if Arbre.available?
+                              dependency = Arbre.dependency
+                              if dependency.const_defined?(:Element)
+                                dependency.const_get(:Element)
+                              else
+                                component_class.superclass
+                              end
+                            else
+                              FallbackElement
+                            end
+
+      class RawTextNode < raw_text_base_class
+        builder_method :raw_text
+
+        def build(content)
+          @content = content.to_s
+        end
+
+        def to_s
+          @content
+        end
+
+        def tag_name
+          nil
+        end
+      end
+    end
+  end
+end