rails-active-ui 0.3.8 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ecbf2cf056cd56dbcac4a80553455b3a6b303ef8439bd38b5be513652835985f
-  data.tar.gz: 07c80687e4e01edb2050fe9e8f277dedbb7472f410f36e703948f791d4196104
+  metadata.gz: 847077ab92e13f582035970b65c03270e249b0c07d231aaa24ec9b8bd67b3747
+  data.tar.gz: 19289c0f34216d56bb1445ddba8a2458e53907f4609c7cd0daf9f725384e12f6
 SHA512:
-  metadata.gz: 03b90d0da8e67d306bb9e59946264a1d931118179b35dfbcb6f80f16bd07a4b39cd7772453dffd7faba31bdc675aa9a620898f4cf545bc4ef8b2d633ffcaf08c
-  data.tar.gz: e60026a65dc4c3fcd3bfdfe97c56b36dc8a6fd9586da21122a20374122b273b38eb7b9333273fa749ad665b151e6b755bf0b667dc487bd7ef567d3445f473c20
+  metadata.gz: 11ecf07a55ce294c3551c1a736d588aab2f02faf7e8fa53a20e44e11e1b4200d5996c867eb5bd77c6e6d99a1078269b73f2c735f5e34a59e14799b39bceca93f
+  data.tar.gz: c63697323a25b300048da0744a79fcc81b2d952bebf36983bf31ecb6810c90ff754b1cb887f419ad5baf5e5009e39e744588cabc53cd9a8eb45ffccecab1bf11

data/README.md

@@ -1,15 +1,17 @@
 # rails-active-ui
 
-A Fomantic-UI component system for Rails. Views use `.html.ruby` files with PascalCase component calls.
+A Fomantic-UI component system for Rails. Views use `.html.ruby` files with PascalCase component calls built on `ActiveModel::Attributes`.
 
 ## Setup
 
 Add to your Gemfile:
 
 ```ruby
-gem "rails-active-ui"
+gem "rails-active-ui", path: "engines/rails-active-ui"
 ```
 
+Requires Ruby >= 3.2 and Rails ~> 8.1.
+
 ### Engine initializers
 
 The gem's engine (`Ui::Engine`) registers the following automatically:
@@ -48,7 +50,7 @@ const application = Application.start()
 registerFuiControllers(application)
 ```
 
-These are thin jQuery bridge controllers that initialize Fomantic-UI widgets in `connect()` and tear them down in `disconnect()`, making them Turbo-compatible.
+These are thin jQuery bridge controllers that initialize Fomantic-UI widgets in `connect()` and tear them down in `disconnect()`, making them Turbo-compatible. There are 28 Fomantic bridge controllers covering accordion, api, calendar, checkbox, datatable, dimmer, dropdown, embed, emoji-picker, flyout, form, item-list, modal, nag, popup, progress, rating, search, shape, sidebar, site, slider, state, sticky, tab, toast, transition, and visibility.
 
 ### Rails engine usage
 
@@ -64,15 +66,157 @@ class Engine < ::Rails::Engine
 end
 ```
 
+## View DSL
+
+Views use `.html.ruby` files with a pure-Ruby DSL. Every PascalCase call renders a component:
+
+```ruby
+Header(size: :h2) { "Hello World" }
+Segment(inverted: true) {
+  Paragraph { "Some content here" }
+}
+```
+
+### Text content
+
+There are two ways to output text inside a block:
+
+- **Block return value** -- when the block contains only a string, just return it directly:
+  ```ruby
+  Header { "Page Title" }
+  Button(color: "green") { "Save" }
+  ```
+
+- **`Text` component** -- when you need to mix text with other components in the same block, use `Text { "..." }` for each piece of text and `NbSpace()` for whitespace between components:
+  ```ruby
+  Button(color: "blue") {
+    Icon(name: "edit")
+    NbSpace()
+    Text { "Add Reply" }
+  }
+  ```
+
+Prefer `{ "string" }` over `{ Text { "string" } }` when the block contains only text.
+
+Never use lowercase `text` to emit inline content alongside components -- use `Text { "..." }` instead. Never embed leading/trailing spaces into text strings -- use `NbSpace()`. Every HTML element must be rendered through a component call.
+
+### Inline elements
+
+Common HTML elements that appear inside components:
+
+| HTML | Ruby DSL |
+|------|----------|
+| `<a>Text</a>` | `LinkTo { "Text" }` |
+| `<a class="user">Name</a>` | `LinkTo(class: "user") { "Name" }` |
+| `<a href="/path">Link</a>` | `LinkTo(href: "/path") { "Link" }` |
+| `<span class="ui red text">` | `Text(color: "red") { "..." }` |
+| `<div>` (generic) | `Wrapper(class: "...") { ... }` |
+| `&nbsp;` | `NbSpace()` |
+
+### Utility helpers
+
+| Helper | Output |
+|--------|--------|
+| `text "string"` | Appends plain text to the output buffer |
+| `NbSpace()` | Appends `&nbsp;` |
+| `Partial("path/to/partial")` | Delegates to `render` |
+| `DocType()` | Outputs `<!DOCTYPE html>` |
+| `StylesheetLink("file.css")` | Wraps `stylesheet_link_tag` |
+| `JavascriptImportmap()` | Wraps `javascript_importmap_tags` |
+| `CsrfMetaTags()` | Wraps `csrf_meta_tags` |
+| `CspMetaTag()` | Wraps `csp_meta_tag` |
+| `ContentFor(:name) { ... }` | Wraps `content_for` |
+| `Style("css string")` | Renders an inline `<style>` tag |
+
+## Components
+
+All components are registered in `ComponentHelper::COMPONENT_MAP` (`app/helpers/component_helper.rb`). Every PascalCase call in a `.html.ruby` view resolves through this map.
+
+### Base class
+
+All components inherit from `Component` (`app/lib/component.rb`), which provides:
+
+- **`ActiveModel::Attributes`** for declarative attribute definitions with types and defaults
+- **Named slots** via the `slot` class macro -- yields `self` so callers fill regions:
+  ```ruby
+  Card { |c|
+    c.header { "Title" }
+    c.description { "Body text" }
+  }
+  ```
+- **HTML pass-through** -- `id`, `class`, `data`, `style`, `role`, `tabindex`, `title`, `aria`, `target`, `rel` bypass attributes and merge into the rendered tag
+- **`merge_html_options`** -- merges component-computed options with user-provided HTML options (classes concatenate, data hashes deep-merge)
+- **Dev annotations** -- in development, output is wrapped in `<!-- BEGIN ClassName -->` / `<!-- END ClassName -->` comments
+
+### Component inventory
+
+**Layout Primitives:** VStack, HStack, Column, Row, Pusher, Overlay, LinkTo, SubHeader
+
+**Globals:** Reset, Site, Wrapper, Template, BackButton
+
+**Elements:** Button, ButtonGroup, ButtonTo, Paragraph, Container, Divider, Emoji, Flag, Header, Icon, Image, Input, Tag, TagGroup, List, ListItem, ListContent, ListHeader, ListDescription, Loader, Placeholder, Rail, Reveal, Segment, SegmentGroup, Step, StepGroup, Text
+
+**Collections:** Breadcrumb, Form, Grid, Menu, MenuItem, SubMenu, Message, Table, TableRow, TableCell
+
+**Views:** Ad, ItemGroup, Card, Comment, CommentGroup, CommentReplyGroup, CommentReply, Feed, FeedItem, Item, Statistic
+
+**Modules:** Accordion, AccordionItem, SubAccordion, Calendar, Dimmer, Dropdown, Embed, Flyout, Modal, Nag, Popup, Progress, Slider, Rating, Search, Shape, Sidebar, Sticky, Tab, TabGroup, Toast, Transition
+
+**Behaviors:** Api, State, Visibility
+
+**Blocks:** ResourceListBlock
+
+### Component patterns
+
+**Simple component** -- attributes map to CSS class modifiers:
+```ruby
+Button(color: "red", size: "large") { "Delete" }
+# => <button class="ui red large button">Delete</button>
+```
+
+**Component with slots** -- child regions are filled via yielded self:
+```ruby
+FeedItem { |e|
+  e.label { Image(src: "/images/avatar/small/elliot.jpg") }
+  e.summary {
+    LinkTo(class: "user") { "Elliot Fu" }
+    NbSpace()
+    Text { "added you as a friend" }
+  }
+  e.date_inline { "1 Hour Ago" }
+  e.meta {
+    LinkTo(class: "like") {
+      Icon(name: "like")
+      NbSpace()
+      Text { "4 Likes" }
+    }
+  }
+}
+```
+
+**CSS class passthrough** -- for one-off Fomantic classes not covered by component attributes:
+```ruby
+Menu(class: "equal width") { ... }
+```
+
+### method_missing behavior
+
+PascalCase calls not in `COMPONENT_MAP` are handled by `method_missing`:
+
+1. If inside a `Form()` block, the call is tried as an underscored form builder method (e.g. `TextField` -> `f.text_field`)
+2. Otherwise, it falls through to `tag.public_send(tag_name)`, generating an arbitrary HTML element
+
+This means typos in component names will not raise errors -- they silently generate unexpected HTML tags.
+
 ## Form Builder
 
-rails-active-ui ships with `FomanticFormBuilder`, a drop-in `ActionView::Helpers::FormBuilder` subclass that wraps every field helper in Fomantic-UI markup.
+rails-active-ui ships with `Ui::FomanticFormBuilder`, a drop-in `ActionView::Helpers::FormBuilder` subclass that wraps every field helper in Fomantic-UI markup.
 
 Set it as the default in your `ApplicationController`:
 
 ```ruby
 class ApplicationController < ActionController::Base
-  ActionView::Base.default_form_builder = FomanticFormBuilder
+  default_form_builder Ui::FomanticFormBuilder
 end
 ```
 
@@ -97,7 +241,18 @@ Form(url: users_path, method: :post) {
 | `EmailField(:email)` | `f.email_field :email` | Email input |
 | `PasswordField(:password)` | `f.password_field :password` | Password input |
 | `NumberField(:age)` | `f.number_field :age` | Number input |
+| `UrlField(:website)` | `f.url_field :website` | URL input |
+| `TelephoneField(:phone)` | `f.telephone_field :phone` | Telephone input |
+| `SearchField(:q)` | `f.search_field :q` | Search input |
+| `ColorField(:color)` | `f.color_field :color` | Color picker |
+| `RangeField(:volume)` | `f.range_field :volume` | Range slider |
+| `DateField(:birthday)` | `f.date_field :birthday` | Date picker (Fomantic calendar) |
+| `DatetimeLocalField(:starts_at)` | `f.datetime_local_field :starts_at` | Datetime picker |
+| `TimeField(:alarm)` | `f.time_field :alarm` | Time picker |
+| `MonthField(:month)` | `f.month_field :month` | Month picker |
+| `WeekField(:week)` | `f.week_field :week` | Week picker |
 | `TextArea(:bio)` | `f.text_area :bio` | Textarea |
+| `EmojiField(:icon)` | `f.emoji_field :icon` | Emoji picker (Stimulus-powered) |
 | `Select(:role, choices)` | `f.select :role, choices` | Select dropdown |
 | `CheckBox(:terms)` | `f.check_box :terms` | Checkbox with Fomantic styling |
 | `RadioButton(:plan, "pro")` | `f.radio_button :plan, "pro"` | Radio button |
@@ -112,9 +267,11 @@ All field helpers accept these options:
 - `label:` -- override label text (`nil` to suppress)
 - `required:` -- adds "required" class and asterisk
 - `disabled:` -- adds "disabled" class
+- `readonly:` -- adds "read-only" class
 - `inline:` -- label sits beside the input
 - `width:` -- Fomantic grid column word (e.g. `"six"`, `"three"`)
-- `error:` -- error message string
+- `error:` -- error message string, adds "error" class
+- `warning:` -- warning message string, adds "warning" class
 - `hint:` -- grey note beneath the input
 - `field_class:` -- extra classes on the wrapping `.field` div
 - `input_class:` -- extra classes on the input element
@@ -125,6 +282,15 @@ All field helpers accept these options:
 - `size:` -- Fomantic size (e.g. `"tiny"`, `"large"`)
 - `basic:` -- basic button style
 - `icon:` -- icon name (e.g. `"checkmark"`)
+- `inverted:` -- inverted style
+
+### Checkbox / Radio options
+
+- `kind:` -- `:checkbox` (default), `:slider`, or `:toggle`
+- `size:` -- Fomantic size
+- `inverted:` -- inverted style
+- `fitted:` -- removes label padding
+- `right_aligned:` -- label appears on the left
 
 ### Field groups
 
@@ -144,5 +310,28 @@ Form(url: users_path) {
   ErrorMessage("Something went wrong", ["Email is taken"])
   SuccessMessage("All done!", "Profile updated.")
   WarningMessage("Heads up", ["Verify your email"])
+  InfoMessage("Note", ["This is informational"])
 }
 ```
+
+## FuiHelper
+
+`FuiHelper` is auto-included into `ActionView::Base` and provides:
+
+- **`fui_javascript_tags`** -- emits `<script>` tags for jQuery and all 23 Fomantic-UI component scripts in the correct load order (site and transition first)
+- **`datatable(columns:, options:, &block)`** -- renders a DataTables-powered table wrapped in a `fui-datatable` Stimulus controller div
+
+## Example Browser
+
+The repository includes a full Rails application that serves as a live example browser for all components. Example views live under `app/views/examples/` organized by Fomantic-UI category:
+
+```
+app/views/examples/
+  collections/    # breadcrumb, form, grid, menu, message, table
+  elements/       # button, container, divider, emoji, flag, header, icon, image, input, list, etc.
+  examples/       # attached, bootstrap, dashboard, fixed, grid, homepage, login, etc.
+  modules/        # accordion, calendar, checkbox, dimmer, dropdown, tab, etc.
+  views/          # advertisement, card, comment, feed, item, statistic
+```
+
+Run `bin/rails server` and visit `http://localhost:3000` to browse all examples. See `CONVERTING_EXAMPLES.md` for the guide on converting Fomantic-UI HTML docs into `.html.ruby` example views.

data/Rakefile

@@ -1,6 +1,6 @@
 require "bundler/setup"
 
-APP_RAKEFILE = File.expand_path("example/Rakefile", __dir__)
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
 load "rails/tasks/engine.rake"
 
 require "bundler/gem_tasks"

data/app/components/accordion_component.rb

@@ -1,43 +1,60 @@
 # frozen_string_literal: true
 
-# Accordion — collapsible content panel using <details>/<summary>.
+# Accordion — collapsible content panels.
+#
+# Renders a Fomantic-UI accordion container wired to the fui-accordion
+# Stimulus controller.  Block content should contain raw `.title` and
+# `.content` div pairs (built with `tag.div`).
 #
 # Usage:
-#   Accordion(attached: true) { |a|
-#     a.title { text "Section" }
-#     text "Panel content"
+#   Accordion(styled: true) {
+#     tag.div(class: "active title") {
+#       safe_join([tag.i(class: "dropdown icon"), "What is a dog?"])
+#     }
+#     tag.div(class: "active content") {
+#       tag.p { "A dog is a type of domesticated animal." }
+#     }
 #   }
 
 class AccordionComponent < Component
   include Attachable
 
-  attribute :raised,    :boolean, default: false
-  attribute :inverted,  :boolean, default: false
-  attribute :basic,     :boolean, default: false
-  attribute :compact,   :boolean, default: false
-  attribute :color,     :string,  default: nil
-  attribute :secondary, :boolean, default: false
-  attribute :open,      :boolean, default: false
-
-  slot :title
+  attribute :styled,      :boolean, default: false
+  attribute :fluid,       :boolean, default: false
+  attribute :inverted,    :boolean, default: false
+  attribute :basic,       :boolean, default: false
+  attribute :compact,     :boolean, default: false
+  attribute :very_compact, :boolean, default: false
+  attribute :tree,        :boolean, default: false
+  attribute :color,       :string,  default: nil
+  attribute :exclusive,   :boolean, default: true
+  attribute :collapsible, :boolean, default: true
+  attribute :duration,    :integer, default: 350
 
   def to_s
     classes = class_names(
       "ui",
       color,
-      { "attached" => attached, "raised" => raised, "inverted" => inverted,
-        "basic" => basic, "compact" => compact, "secondary" => secondary },
-      "segment"
+      {
+        "attached"     => attached,
+        "styled"       => styled,
+        "fluid"        => fluid,
+        "inverted"     => inverted,
+        "basic"        => basic && styled,
+        "compact"      => compact,
+        "very compact" => very_compact,
+        "tree"         => tree
+      },
+      "accordion"
     )
 
-    opts = merge_html_options(class: classes)
-    opts[:open] = "" if open
+    data = { controller: "fui-accordion" }
+    data[:fui_accordion_exclusive_value]   = "false" unless exclusive
+    data[:fui_accordion_collapsible_value] = "false" unless collapsible
+    data[:fui_accordion_duration_value]    = duration.to_s if duration != 350
+
+    opts = merge_html_options(class: classes, data: data)
 
-    tag.details(**opts) {
-      safe_join([
-        tag.summary { @slots[:title] || "" },
-        tag.div { @content }
-      ])
-    }
+    tag.div(**opts) { @content }
   end
 end

data/app/components/accordion_item_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+# AccordionItem — a single panel inside an Accordion.
+#
+# Renders two sibling divs (.title + .content) with no wrapper,
+# exactly the structure Fomantic-UI expects as direct children of
+# .ui.accordion or a nested .accordion.
+#
+# Usage:
+#   Accordion(styled: true) {
+#     AccordionItem(active: true) { |i|
+#       i.title { "What is a dog?" }
+#       i.content {
+#         Paragraph { "A dog is a type of domesticated animal." }
+#       }
+#     }
+#   }
+
+class AccordionItemComponent < Component
+  attribute :active, :boolean, default: false
+  attribute :icon,   :string,  default: "dropdown"
+
+  slot :title
+  slot :content
+
+  def to_s
+    title_classes   = class_names({ "active" => active }, "title")
+    content_classes = class_names({ "active" => active }, "content")
+
+    title_el = @slots[:title] ? tag.div(class: title_classes) {
+      safe_join([ tag.i(class: "#{icon} icon"), @slots[:title] ])
+    } : nil
+
+    content_el = @slots[:content] ? tag.div(class: content_classes) {
+      @slots[:content]
+    } : nil
+
+    safe_join([ title_el, content_el ])
+  end
+end

data/app/components/ad_component.rb

@@ -23,6 +23,6 @@ class AdComponent < Component
     opts = { class: classes }
     opts[:data] = { text: test } if test
 
-    tag.div(**opts) { @content }
+    tag.div(**merge_html_options(**opts)) { @content }
   end
 end

data/app/components/api_component.rb

@@ -19,6 +19,6 @@ class ApiComponent < Component
     data[:fui_api_action_value] = action_val if action_val
     data[:fui_api_state_context_value] = state_context if state_context
 
-    tag.div(data: data) { @content }
+    tag.div(**merge_html_options(data: data)) { @content }
   end
 end

data/app/components/breadcrumb_component.rb

@@ -21,6 +21,6 @@ class BreadcrumbComponent < Component
       "breadcrumb"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/button_group_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# ButtonGroup — a group of buttons displayed together.
+#
+# Usage:
+#   ButtonGroup(color: "teal") {
+#     Button { "Save" }
+#     Dropdown(floating: true, button: true) { ... }
+#   }
+#   ButtonGroup(icon: true) {
+#     Button { Icon(name: "bold") }
+#     Button { Icon(name: "italic") }
+#   }
+
+class ButtonGroupComponent < Component
+  include Sizeable
+
+  attribute :color,    :string,  default: nil
+  attribute :icon,     :boolean, default: false
+  attribute :vertical, :boolean, default: false
+  attribute :basic,    :boolean, default: false
+  attribute :labeled,  :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      color,
+      size,
+      { "icon" => icon, "vertical" => vertical, "basic" => basic,
+        "labeled" => labeled },
+      "buttons"
+    )
+
+    tag.div(**merge_html_options(class: classes)) { @content }
+  end
+end

data/app/components/button_to_component.rb

@@ -36,7 +36,7 @@ class ButtonToComponent < Component
 
     @view_context.button_to(
       url,
-      html_opts.merge(class: classes)
+      merge_html_options(**html_opts, class: classes)
     ) { @content }
   end
 end

data/app/components/calendar_component.rb

@@ -1,34 +1,38 @@
 # frozen_string_literal: true
 
-# Calendar — date/time picker.
+# Calendar — Fomantic-UI date/time picker container.
 #
-# Usage:
-#   Calendar(type: :date, name: "start_date")
-#   Calendar(type: :datetime, format: "YYYY-MM-DD HH:mm")
+# Standalone usage (wraps any content — Input, Button, or nothing for inline):
+#   Calendar(type: "date") { Input(icon: "calendar", icon_position: "left", placeholder: "Date") }
+#   Calendar(type: "datetime") { Button { "Select date" } }
+#   Calendar(type: "datetime")  # inline calendar (no input)
+#
+# Inside a Form, date/time fields render the calendar automatically:
+#   Form(url: "#") { DateField(:start_date) }
 
 class CalendarComponent < Component
-  attribute :type,     :string, default: "date"
-  attribute :name,     :string, default: nil
-  attribute :format,   :string, default: nil
-  attribute :min_date, :string, default: nil
-  attribute :max_date, :string, default: nil
+  attribute :type,     :string,  default: "date"
+  attribute :format,   :string,  default: nil
+  attribute :min_date, :string,  default: nil
+  attribute :max_date, :string,  default: nil
+  attribute :inverted, :boolean, default: false
+  attribute :disabled, :boolean, default: false
+  attribute :size,     :string,  default: nil
 
   def to_s
     data = { controller: "fui-calendar", fui_calendar_type_value: type }
-    data[:fui_calendar_format_value] = format if format
+    data[:fui_calendar_format_value]   = format   if format
     data[:fui_calendar_min_date_value] = min_date if min_date
     data[:fui_calendar_max_date_value] = max_date if max_date
 
-    input_opts = { type: "text", placeholder: type }
-    input_opts[:name] = name if name
+    classes = class_names(
+      "ui",
+      size,
+      ("inverted" if inverted),
+      ("disabled" if disabled),
+      "calendar"
+    )
 
-    tag.div(class: "ui calendar", data: data) {
-      tag.div(class: "ui input left icon") {
-        safe_join([
-          tag.i(class: "calendar icon"),
-          tag.input(**input_opts)
-        ])
-      }
-    }
+    tag.div(**merge_html_options(class: classes, data: data)) { @content }
   end
 end

data/app/components/card_component.rb

@@ -45,12 +45,14 @@ class CardComponent < Component
     content_el = content_parts.any? ? tag.div(class: "content") { safe_join(content_parts) } : nil
     extra_el = @slots[:extra] ? tag.div(class: "extra content") { @slots[:extra] } : nil
 
-    inner = safe_join([ image_el, content_el, @content.presence, extra_el ])
+    # Only include @content when no slots are used (block-only mode)
+    loose_content = @slots.values.any? ? nil : @content.presence
+    inner = safe_join([ image_el, content_el, loose_content, extra_el ])
 
     if href
-      tag.a(class: classes, href: href) { inner }
+      tag.a(**merge_html_options(class: classes, href: href)) { inner }
     else
-      tag.div(class: classes) { inner }
+      tag.div(**merge_html_options(class: classes)) { inner }
     end
   end
 end

data/app/components/comment_component.rb

@@ -14,6 +14,7 @@
 class CommentComponent < Component
   attribute :collapsed, :boolean, default: false
   attribute :threaded,  :boolean, default: false
+  attribute :disabled,  :boolean, default: false
 
   slot :avatar
   slot :author
@@ -23,7 +24,7 @@ class CommentComponent < Component
 
   def to_s
     classes = class_names(
-      { "collapsed" => collapsed },
+      { "collapsed" => collapsed, "disabled" => disabled },
       "comment"
     )
 
@@ -38,8 +39,9 @@ class CommentComponent < Component
 
     content_el = content_parts.any? ? tag.div(class: "content") { safe_join(content_parts) } : nil
 
-    tag.div(class: classes) {
-      safe_join([ avatar_el, content_el, @content.presence ])
+    loose_content = @slots.values.any? ? nil : @content.presence
+    tag.div(**merge_html_options(class: classes)) {
+      safe_join([ avatar_el, content_el, loose_content ])
     }
   end
 end

data/app/components/comment_group_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+# CommentGroup — wrapper for a group of comments.
+#
+# Usage:
+#   CommentGroup(threaded: true) {
+#     Comment { |c| ... }
+#     Comment { |c| ... }
+#   }
+
+class CommentGroupComponent < Component
+  attribute :threaded, :boolean, default: false
+  attribute :minimal,  :boolean, default: false
+  attribute :inverted, :boolean, default: false
+  attribute :size,     :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      { "threaded" => threaded, "minimal" => minimal, "inverted" => inverted },
+      "comments"
+    )
+
+    tag.div(**merge_html_options(class: classes)) { @content }
+  end
+end

data/app/components/comment_reply_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+# CommentReply — a reply comment nested inside a CommentReplyGroup.
+#
+# Usage:
+#   CommentReplyGroup {
+#     CommentReply { |c|
+#       c.avatar { Image(src: "avatar.png") }
+#       c.author { text "Jenny" }
+#       c.metadata { text "Just now" }
+#       c.text_slot { text "Great reply!" }
+#       c.actions { text "Reply" }
+#     }
+#   }
+
+class CommentReplyComponent < Component
+  attribute :disabled, :boolean, default: false
+
+  slot :avatar
+  slot :author
+  slot :metadata
+  slot :text_slot
+  slot :actions
+
+  def to_s
+    classes = class_names(
+      { "disabled" => disabled },
+      "comment"
+    )
+
+    avatar_el = @slots[:avatar] ? tag.a(class: "avatar") { @slots[:avatar] } : nil
+
+    content_parts = [
+      @slots[:author] ? tag.a(class: "author") { @slots[:author] } : nil,
+      @slots[:metadata] ? tag.div(class: "metadata") { @slots[:metadata] } : nil,
+      @slots[:text_slot] ? tag.div(class: "text") { @slots[:text_slot] } : nil,
+      @slots[:actions] ? tag.div(class: "actions") { @slots[:actions] } : nil
+    ].compact
+
+    content_el = content_parts.any? ? tag.div(class: "content") { safe_join(content_parts) } : nil
+
+    loose_content = @slots.values.any? ? nil : @content.presence
+    tag.div(**merge_html_options(class: classes)) {
+      safe_join([ avatar_el, content_el, loose_content ])
+    }
+  end
+end