rails-active-ui 0.1.0

data/app/components/table_component.rb

@@ -0,0 +1,160 @@
+# frozen_string_literal: true
+
+# Table — data tables with column accumulator pattern.
+#
+# Usage:
+#   Table(striped: true, rows: @users) { |c|
+#     c.column(:name, heading: "Name") { |user|
+#       Text(weight: :bold) { text user.name }
+#     }
+#     c.column(:email) { |user|
+#       Text(color: :grey) { text user.email }
+#     }
+#   }
+#
+# Or with manual content:
+#   Table(celled: true) { |c|
+#     c.header {
+#       TableRow {
+#         TableCell(heading: true) { text "Name" }
+#         TableCell(heading: true) { text "Age" }
+#       }
+#     }
+#     TableRow {
+#       TableCell { text "Alice" }
+#       TableCell { text "30" }
+#     }
+#   }
+
+class TableComponent < Component
+  attribute :rows,        default: nil
+  attribute :definition,  :boolean, default: false
+  attribute :structured,  :boolean, default: false
+  attribute :single_line, :boolean, default: false
+  attribute :fixed,       :boolean, default: false
+  attribute :selectable,  :boolean, default: false
+  attribute :striped,     :boolean, default: false
+  attribute :sortable,    :boolean, default: false
+  attribute :celled,      :boolean, default: false
+  attribute :basic,       :string,  default: nil
+  attribute :compact,     :string,  default: nil
+  attribute :padded,      :string,  default: nil
+  attribute :collapsing,  :boolean, default: false
+  attribute :inverted,    :boolean, default: false
+  attribute :color,       :string,  default: nil
+  attribute :size,        :string,  default: nil
+  attribute :unstackable, :boolean, default: false
+  attribute :stackable,   :boolean, default: false
+  attribute :attached,    :string,  default: nil
+
+  slot :header
+  slot :footer
+
+  def columns
+    @columns ||= []
+  end
+
+  def column(key, heading: key.to_s.titleize, &block)
+    columns << { key: key, heading: heading, block: block }
+  end
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      color,
+      basic_class,
+      compact_class,
+      padded_class,
+      attached_class,
+      { "definition" => definition,
+        "structured" => structured,
+        "single line" => single_line,
+        "fixed" => fixed,
+        "selectable" => selectable,
+        "striped" => striped,
+        "sortable" => sortable,
+        "celled" => celled,
+        "collapsing" => collapsing,
+        "inverted" => inverted,
+        "unstackable" => unstackable,
+        "stackable" => stackable },
+      "table"
+    )
+
+    if columns.any? && rows
+      column_table(classes)
+    else
+      manual_table(classes)
+    end
+  end
+
+  private
+
+  def column_table(classes)
+    head_cells = columns.map { |col| tag.th { col[:heading] } }
+
+    body_rows = Array(rows).map { |row|
+      cells = columns.map { |col|
+        cell_content = col[:block]
+          .then { |b| b && @view_context.capture(row, &b) }
+          .then { |c| c || ERB::Util.html_escape(row.public_send(col[:key]).to_s) }
+        tag.td { cell_content }
+      }
+      tag.tr { safe_join(cells) }
+    }
+
+    footer_el = @slots[:footer] ? tag.tfoot { @slots[:footer] } : nil
+
+    tag.table(class: classes) {
+      safe_join([
+        tag.thead { tag.tr { safe_join(head_cells) } },
+        tag.tbody { safe_join(body_rows) },
+        footer_el
+      ])
+    }
+  end
+
+  def manual_table(classes)
+    header_el = @slots[:header] ? tag.thead { @slots[:header] } : nil
+    footer_el = @slots[:footer] ? tag.tfoot { @slots[:footer] } : nil
+    body_el = @content.presence ? tag.tbody { @content } : nil
+
+    tag.table(class: classes) {
+      safe_join([ header_el, body_el, footer_el ])
+    }
+  end
+
+  def basic_class
+    case basic
+    when "very" then "very basic"
+    when "true", true then "basic"
+    when String then "#{basic} basic"
+    end
+  end
+
+  def compact_class
+    case compact
+    when "very" then "very compact"
+    when "true", true then "compact"
+    when String then "#{compact} compact"
+    end
+  end
+
+  def attached_class
+    case attached
+    when "top" then "top attached"
+    when "bottom" then "bottom attached"
+    when "" then "attached"
+    when String then "#{attached} attached"
+    end
+  end
+
+  def padded_class
+    case padded
+    when "very" then "very padded"
+    when "true", true then "padded"
+    when String then "#{padded} padded"
+    end
+  end
+end

data/app/components/table_row_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+# TableRow — a table row.
+#
+# Usage:
+#   Table(celled: true) { |c|
+#     c.header {
+#       TableRow {
+#         TableCell(heading: true) { text "Name" }
+#         TableCell(heading: true) { text "Age" }
+#       }
+#     }
+#     TableRow {
+#       TableCell { text "Alice" }
+#       TableCell { text "30" }
+#     }
+#   }
+
+class TableRowComponent < Component
+  attribute :active,   :boolean, default: false
+  attribute :positive, :boolean, default: false
+  attribute :negative, :boolean, default: false
+  attribute :warning,  :boolean, default: false
+  attribute :error,    :boolean, default: false
+  attribute :disabled, :boolean, default: false
+
+  def to_s
+    classes = [
+      ("active" if active),
+      ("positive" if positive),
+      ("negative" if negative),
+      ("warning" if warning),
+      ("error" if error),
+      ("disabled" if disabled)
+    ].compact
+
+    if classes.any?
+      tag.tr(class: classes.join(" ")) { @content }
+    else
+      tag.tr { @content }
+    end
+  end
+end

data/app/components/text_component.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+# Text — inline text container. Merges the holy spec primitive with Fomantic-UI text.
+#
+# Usage:
+#   Text { text "Hello" }
+#   Text(size: :sm, style: :secondary) { text "Muted text" }
+#   Text(weight: :bold, color: :red) { text "Important" }
+
+class TextComponent < Component
+  attribute :style,  :string, default: nil
+  attribute :size,   :string, default: nil
+  attribute :weight, :string, default: nil
+  attribute :color,  :string, default: nil
+
+  def to_s
+    has_fui_class = color || size_fui
+
+    fui_classes = if has_fui_class
+      class_names(
+        "ui",
+        color,
+        size_fui,
+        "text"
+      )
+    end
+
+    style_parts = [
+      (style && "text-#{style}"),
+      (size_css && "font-size:#{size_css}"),
+      (weight && "font-weight:#{weight_value}")
+    ].compact
+
+    opts = {}
+    opts[:class] = fui_classes if fui_classes
+    opts[:style] = style_parts.join(";") if style_parts.any?
+
+    tag.span(**opts) { @content }
+  end
+
+  private
+
+  # Fomantic-UI text size classes
+  def size_fui
+    case size
+    when "mini", "tiny", "small", "medium", "large", "big", "huge", "massive"
+      size
+    end
+  end
+
+  # CSS font-size for spec-style sizes (sm, xs, etc.)
+  def size_css
+    case size
+    when "xs"  then "0.75rem"
+    when "sm"  then "0.875rem"
+    when "lg"  then "1.125rem"
+    when "xl"  then "1.25rem"
+    when "2xl" then "1.5rem"
+    end
+  end
+
+  def weight_value
+    case weight.to_s
+    when "light"    then "300"
+    when "normal"   then "400"
+    when "medium"   then "500"
+    when "semibold" then "600"
+    when "bold"     then "700"
+    when "heavy"    then "900"
+    else weight
+    end
+  end
+end

data/app/components/toast_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# Toast — toast notifications.
+#
+# Usage:
+#   Toast(title: "Success", message: "Item saved.", type: :success)
+#   Toast(title: "Error", message: "Something went wrong.", type: :error, position: "bottom right")
+
+class ToastComponent < Component
+  include Positionable
+  default position: "top right"
+
+  attribute :title,         :string,  default: nil
+  attribute :message,       :string,  default: nil
+  attribute :type,          :string,  default: "neutral"
+  attribute :display_time,  :integer, default: 3000
+  attribute :close_icon,    :boolean, default: false
+  attribute :compact,       :boolean, default: true
+  attribute :show_progress, :boolean, default: false
+
+  def to_s
+    data = {
+      controller: "fui-toast",
+      fui_toast_class_value: type,
+      fui_toast_position_value: position,
+      fui_toast_display_time_value: display_time
+    }
+    data[:fui_toast_title_value] = title if title
+    data[:fui_toast_message_value] = message if message
+    data[:fui_toast_close_icon_value] = "true" if close_icon
+    data[:fui_toast_compact_value] = "true" if compact
+    data[:fui_toast_show_progress_value] = "true" if show_progress
+
+    tag.div(data: data) { @content }
+  end
+end

data/app/components/transition_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+# Transition — CSS animation framework.
+#
+# Usage:
+#   Transition(animation: :fade, visible: true) { text "Fading content" }
+#   Transition(animation: :scale, duration: 500) { text "Scaling content" }
+
+class TransitionComponent < Component
+  attribute :animation, :string,  default: "fade"
+  attribute :duration,  :integer, default: 500
+  attribute :visible,   :boolean, default: true
+
+  def to_s
+    classes = class_names(
+      animation,
+      { "visible" => visible,
+        "hidden" => !visible },
+      "transition"
+    )
+
+    tag.div(
+      class: classes,
+      style: "animation-duration:#{duration}ms",
+      data: {
+        controller: "fui-transition",
+        fui_transition_animation_value: animation,
+        fui_transition_duration_value: duration
+      }
+    ) { @content }
+  end
+end

data/app/components/v_stack_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class VStackComponent < Component
+  attribute :spacing, :integer, default: 0
+  attribute :align,   :string,  default: "start"
+
+  def to_s
+    style_parts = [
+      "display:flex",
+      "flex-direction:column",
+      ("gap:#{spacing}px" if spacing > 0),
+      ("align-items:#{align_value}" if align != "start")
+    ].compact.join(";")
+
+    opts = {}
+    opts[:style] = style_parts unless style_parts.empty?
+
+    tag.div(**opts) { @content }
+  end
+
+  private
+
+  def align_value
+    case align
+    when "center" then "center"
+    when "end"    then "flex-end"
+    when "stretch" then "stretch"
+    else "flex-start"
+    end
+  end
+end

data/app/components/visibility_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Visibility — scroll-based visibility detection.
+#
+# Usage:
+#   Visibility(once: true) { Image(src: "lazy.jpg") }
+#   Visibility(offset: 100) { text "I trigger when visible" }
+
+class VisibilityComponent < Component
+  attribute :type,   :string,  default: nil
+  attribute :offset, :integer, default: 0
+  attribute :once,   :boolean, default: false
+
+  def to_s
+    data = { controller: "fui-visibility" }
+    data[:fui_visibility_type_value] = type if type
+    data[:fui_visibility_offset_value] = offset if offset > 0
+    data[:fui_visibility_once_value] = "true" if once
+
+    tag.div(data: data) { @content }
+  end
+end

data/app/helpers/component_helper.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+# The Registry of Names
+#
+# All components available to views are declared here. There is no
+# method_missing sorcery, no dynamic resolution, no convention-based guessing.
+# If a component is not in the registry, it does not exist.
+#
+# To create a new component: add one line to COMPONENT_MAP and create the class.
+#
+# See: specs/the-holy-view-spec.md, Article 3
+
+module ComponentHelper
+  COMPONENT_MAP = {
+    # Layout Primitives
+    VStack:      VStackComponent,
+    HStack:      HStackComponent,
+    Column:      ColumnComponent,
+    Row:         RowComponent,
+    Pusher:      PusherComponent,
+    Overlay:     OverlayComponent,
+    Link:        LinkComponent,
+    SubHeader:   SubHeaderComponent,
+
+    # Globals
+    Reset:       ResetComponent,
+    Site:        SiteComponent,
+
+    # Elements
+    Button:      ButtonComponent,
+    Container:   ContainerComponent,
+    Divider:     DividerComponent,
+    Emoji:       EmojiComponent,
+    Flag:        FlagComponent,
+    Header:      HeaderComponent,
+    Icon:        IconComponent,
+    Image:       ImageComponent,
+    Input:       InputComponent,
+    Label:       LabelComponent,
+    List:        ListComponent,
+    Loader:      LoaderComponent,
+    Placeholder: PlaceholderComponent,
+    Rail:        RailComponent,
+    Reveal:      RevealComponent,
+    Segment:      SegmentComponent,
+    SegmentGroup: SegmentGroupComponent,
+    Step:        StepComponent,
+    StepGroup:   StepGroupComponent,
+    Text:        TextComponent,
+
+    # Collections
+    Breadcrumb:  BreadcrumbComponent,
+    Form:        FormComponent,
+    Grid:        GridComponent,
+    Menu:        MenuComponent,
+    MenuItem:    MenuItemComponent,
+    SubMenu:     SubMenuComponent,
+    Message:     MessageComponent,
+    Table:       TableComponent,
+    TableRow:    TableRowComponent,
+    TableCell:   TableCellComponent,
+
+    # Views
+    Ad:          AdComponent,
+    ItemGroup:   ItemGroupComponent,
+    Card:        CardComponent,
+    Comment:     CommentComponent,
+    Feed:        FeedComponent,
+    Item:        ItemComponent,
+    Statistic:   StatisticComponent,
+
+    # Modules
+    Accordion:   AccordionComponent,
+    Calendar:    CalendarComponent,
+    Checkbox:    CheckboxComponent,
+    Dimmer:      DimmerComponent,
+    Dropdown:    DropdownComponent,
+    Embed:       EmbedComponent,
+    Flyout:      FlyoutComponent,
+    Modal:       ModalComponent,
+    Nag:         NagComponent,
+    Popup:       PopupComponent,
+    Progress:    ProgressComponent,
+    Slider:      SliderComponent,
+    Rating:      RatingComponent,
+    Search:      SearchComponent,
+    Shape:       ShapeComponent,
+    Sidebar:     SidebarComponent,
+    Sticky:      StickyComponent,
+    Tab:         TabComponent,
+    Toast:       ToastComponent,
+    Transition:  TransitionComponent,
+
+    # Behaviors
+    Api:         ApiComponent,
+    State:       StateComponent,
+    Visibility:  VisibilityComponent
+  }.freeze
+
+  COMPONENT_MAP.each do |name, klass|
+    define_method(name) { |**kwargs, &block|
+      output_buffer << render(klass.new(**kwargs), &block)
+    }
+  end
+
+  def text(content)
+    output_buffer << content.to_s
+  end
+end

data/app/helpers/fui_helper.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+# Provides the fui_javascript_tags helper for loading jQuery and
+# Fomantic-UI component scripts in the correct order.
+#
+# Usage (in your application layout, before javascript_importmap_tags):
+#
+#   <%= fui_javascript_tags %>
+#   <%= javascript_importmap_tags %>
+#
+# This emits <script> tags for jQuery and each Fomantic-UI component.
+# The Stimulus bridge controllers are loaded separately via importmap.
+
+module FuiHelper
+  # Fomantic component scripts in load order.
+  # site and transition must come first — other components depend on them.
+  FOMANTIC_SCRIPTS = %w[
+    site
+    transition
+    accordion
+    api
+    calendar
+    checkbox
+    dimmer
+    dropdown
+    embed
+    flyout
+    form
+    modal
+    nag
+    popup
+    progress
+    rating
+    search
+    shape
+    sidebar
+    slider
+    state
+    sticky
+    tab
+    toast
+    visibility
+  ].freeze
+
+  def fui_javascript_tags
+    tags = []
+    tags << javascript_include_tag("jquery")
+    FOMANTIC_SCRIPTS.each do |name|
+      tags << javascript_include_tag(name)
+    end
+    safe_join(tags, "\n")
+  end
+end