rails-active-ui 0.1.0

data/app/components/accordion_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# Accordion — collapsible content panels.
+#
+# Usage:
+#   Accordion(styled: true) {
+#     MenuItem(header: true) {
+#       Icon(name: "dropdown")
+#       text " Section"
+#     }
+#     text "Panel content"
+#   }
+
+class AccordionComponent < Component
+  attribute :styled,   :boolean, default: false
+  attribute :fluid,    :boolean, default: false
+  attribute :inverted, :boolean, default: false
+  attribute :exclusive, :boolean, default: true
+  attribute :collapsible, :boolean, default: true
+
+  def to_s
+    classes = class_names(
+      "ui",
+      { "styled" => styled, "fluid" => fluid, "inverted" => inverted },
+      "accordion"
+    )
+
+    data = { controller: "fui-accordion" }
+    data[:fui_accordion_exclusive_value] = "false" unless exclusive
+    data[:fui_accordion_collapsible_value] = "false" unless collapsible
+
+    tag.div(class: classes, data: data) { @content }
+  end
+end

data/app/components/ad_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# Ad — standard ad unit sizes following IAB standards.
+#
+# Usage:
+#   Ad(unit: :leaderboard)
+#   Ad(unit: :medium_rectangle, test: "Ad Placeholder")
+
+class AdComponent < Component
+  attribute :unit, :string, default: nil
+  attribute :test, :string, default: nil
+
+  def to_s
+    unit_class = unit.to_s.tr("_", " ")
+
+    classes = class_names(
+      "ui",
+      unit_class,
+      { "test" => test },
+      "ad"
+    )
+
+    opts = { class: classes }
+    opts[:data] = { text: test } if test
+
+    tag.div(**opts) { @content }
+  end
+end

data/app/components/api_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# Api — AJAX request management wrapper.
+#
+# Usage:
+#   Api(url: "/api/users", method_val: :get) {
+#     Button { text "Load Users" }
+#   }
+
+class ApiComponent < Component
+  attribute :url,           :string, default: nil
+  attribute :method_val,    :string, default: "get"
+  attribute :action_val,    :string, default: nil
+  attribute :state_context, :string, default: nil
+
+  def to_s
+    data = { controller: "fui-api", fui_api_method_value: method_val }
+    data[:fui_api_url_value] = url if url
+    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 }
+  end
+end

data/app/components/breadcrumb_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+# Breadcrumb — navigation breadcrumb trail.
+#
+# Usage:
+#   Breadcrumb {
+#     text '<a class="section">Home</a>'.html_safe
+#     text '<div class="divider">/</div>'.html_safe
+#     text '<div class="active section">Current</div>'.html_safe
+#   }
+#   Breadcrumb(size: :large)
+
+class BreadcrumbComponent < Component
+  attribute :size,    :string, default: nil
+  attribute :divider, :string, default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      "breadcrumb"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/button_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+# Button — buttons in many styles.
+#
+# Usage:
+#   Button(color: :green, icon: "checkmark") { text "Approve" }
+#   Button(variant: :primary, size: :large, fluid: true) { text "Submit" }
+#   Button(href: "/path", variant: :primary) { text "Go" }
+
+class ButtonComponent < Component
+  include Attachable
+  include Sizeable
+
+  attribute :color,    :string,  default: nil
+  attribute :variant,  :string,  default: nil
+  attribute :icon,     :string,  default: nil
+  attribute :fluid,    :boolean, default: false
+  attribute :disabled, :boolean, default: false
+  attribute :loading,  :boolean, default: false
+  attribute :animated, :string,  default: nil
+  attribute :labeled,  :boolean, default: false
+  attribute :href,     :string,  default: nil
+  attribute :type,     :string,  default: "button"
+  attribute :inverted, :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      color,
+      size,
+      variant,
+      animated && "animated #{animated unless animated == 'true'}".strip,
+      { "fluid" => fluid, "disabled" => disabled, "loading" => loading,
+        "inverted" => inverted, "attached" => attached,
+        "labeled icon" => labeled && icon,
+        "icon" => icon && !labeled && !@content },
+      "button"
+    )
+
+    icon_el = icon ? tag.i(class: "#{icon} icon") : nil
+    content = safe_join([ icon_el, @content ])
+
+    if href
+      tag.a(class: classes, href: href) { content }
+    else
+      tag.button(class: classes, type: type) { content }
+    end
+  end
+end

data/app/components/calendar_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# Calendar — date/time picker.
+#
+# Usage:
+#   Calendar(type: :date, name: "start_date")
+#   Calendar(type: :datetime, format: "YYYY-MM-DD HH:mm")
+
+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
+
+  def to_s
+    data = { controller: "fui-calendar", fui_calendar_type_value: type }
+    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
+
+    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)
+        ])
+      }
+    }
+  end
+end

data/app/components/card_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+# Card — content cards with multiple regions.
+#
+# Usage:
+#   Card(fluid: true) { |c|
+#     c.image { Image(src: "photo.jpg") }
+#     c.header { text "Title" }
+#     c.meta { text "Subtitle" }
+#     c.description { text "Body text" }
+#     c.extra { text "Extra content" }
+#   }
+
+class CardComponent < Component
+  attribute :fluid,    :boolean, default: false
+  attribute :centered, :boolean, default: false
+  attribute :raised,   :boolean, default: false
+  attribute :link,     :boolean, default: false
+  attribute :color,    :string,  default: nil
+  attribute :href,     :string,  default: nil
+
+  slot :image
+  slot :header
+  slot :meta
+  slot :description
+  slot :extra
+
+  def to_s
+    classes = class_names(
+      "ui",
+      color,
+      { "fluid" => fluid, "centered" => centered, "raised" => raised,
+        "link" => link || href },
+      "card"
+    )
+
+    image_el = @slots[:image] ? tag.div(class: "image") { @slots[:image] } : nil
+
+    content_parts = [
+      @slots[:header] ? tag.div(class: "header") { @slots[:header] } : nil,
+      @slots[:meta] ? tag.div(class: "meta") { @slots[:meta] } : nil,
+      @slots[:description] ? tag.div(class: "description") { @slots[:description] } : nil
+    ].compact
+
+    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 ])
+
+    if href
+      tag.a(class: classes, href: href) { inner }
+    else
+      tag.div(class: classes) { inner }
+    end
+  end
+end

data/app/components/checkbox_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# Checkbox — checkboxes, radios, toggles, sliders.
+#
+# Usage:
+#   Checkbox(label_text: "Accept terms", name: "terms")
+#   Checkbox(type: :toggle, label_text: "Dark mode", checked: true)
+#   Checkbox(type: :radio, label_text: "Option A", name: "choice", value: "a")
+
+class CheckboxComponent < Component
+  attribute :type,       :string,  default: "checkbox"
+  attribute :label_text, :string,  default: nil
+  attribute :name,       :string,  default: nil
+  attribute :value,      :string,  default: nil
+  attribute :checked,    :boolean, default: false
+  attribute :disabled,   :boolean, default: false
+  attribute :read_only,  :boolean, default: false
+  attribute :fitted,     :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      (type unless type == "checkbox"),
+      { "fitted" => fitted, "read-only" => read_only, "disabled" => disabled },
+      "checkbox"
+    )
+
+    field_type = type == "radio" ? "radio" : "checkbox"
+    input_opts = { type: field_type }
+    input_opts[:name] = name if name
+    input_opts[:value] = value if value
+    input_opts[:checked] = "checked" if checked
+    input_opts[:disabled] = "disabled" if disabled
+
+    label_el = tag.label { label_text || "" }
+
+    tag.div(class: classes, data: { controller: "fui-checkbox" }) {
+      safe_join([ tag.input(**input_opts), label_el ])
+    }
+  end
+end

data/app/components/column_component.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+# Column — grid column with responsive width support.
+#
+# Usage:
+#   Grid(stackable: true) {
+#     Column(width: 4) { text "Four wide" }
+#     Column(computer: 8, tablet: 16) { text "Responsive" }
+#     Column(computer: 4, tablet: 8, mobile: 16, aligned: "center") { text "All breakpoints" }
+#   }
+
+class ColumnComponent < Component
+  NUMBERS = %w[one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen].freeze
+
+  attribute :width,    :integer, default: nil
+  attribute :computer, :integer, default: nil
+  attribute :tablet,   :integer, default: nil
+  attribute :mobile,   :integer, default: nil
+  attribute :widescreen, :integer, default: nil
+  attribute :large_screen, :integer, default: nil
+  attribute :aligned,  :string,  default: nil
+  attribute :floated,  :string,  default: nil
+  attribute :only,     :string,  default: nil
+  attribute :color,    :string,  default: nil
+
+  def to_s
+    # Cannot use class_names here — it deduplicates tokens, which breaks
+    # responsive widths where "wide" appears for each breakpoint.
+    classes = [
+      width_class(width, nil),
+      width_class(computer, "computer"),
+      width_class(tablet, "tablet"),
+      width_class(mobile, "mobile"),
+      width_class(widescreen, "widescreen"),
+      width_class(large_screen, "large screen"),
+      only_class,
+      (aligned && "#{aligned} aligned"),
+      (floated && "#{floated} floated"),
+      color,
+      "column"
+    ].compact.join(" ")
+
+    tag.div(class: classes) { @content }
+  end
+
+  private
+
+  # Supports single ("mobile") or multiple ("tablet mobile") only values.
+  # Each device word gets "only" appended: "tablet only mobile only"
+  def only_class
+    return unless only
+
+    only.split.map { |device| "#{device} only" }.join(" ")
+  end
+
+  def width_class(value, device)
+    return unless value && value.between?(1, 16)
+
+    word = NUMBERS[value - 1]
+    device ? "#{word} wide #{device}" : "#{word} wide"
+  end
+end

data/app/components/comment_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+# Comment — threaded comment display.
+#
+# Usage:
+#   Comment { |c|
+#     c.avatar { Image(src: "avatar.png") }
+#     c.author { text "Matt" }
+#     c.metadata { text "Today at 5:42PM" }
+#     c.text_slot { text "Great post!" }
+#     c.actions { text '<a class="reply">Reply</a>'.html_safe }
+#   }
+
+class CommentComponent < Component
+  attribute :collapsed, :boolean, default: false
+  attribute :threaded,  :boolean, default: false
+
+  slot :avatar
+  slot :author
+  slot :metadata
+  slot :text_slot
+  slot :actions
+
+  def to_s
+    classes = class_names(
+      { "collapsed" => collapsed },
+      "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
+
+    tag.div(class: classes) {
+      safe_join([ avatar_el, content_el, @content.presence ])
+    }
+  end
+end

data/app/components/concerns/alignable.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+# Alignable — adds an `aligned` string attribute (vertical / horizontal).
+#
+# Usage:
+#   class GridComponent < Component
+#     include Alignable                             # default: nil
+#   end
+#
+#   class ColumnComponent < Component
+#     include Alignable
+#     default aligned: "vertical"                   # override default
+#   end
+
+module Alignable
+  extend ActiveSupport::Concern
+
+  included do
+    attribute :aligned, :string, default: nil
+  end
+end

data/app/components/concerns/attachable.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# Attachable — adds an `attached` boolean attribute to a component.
+#
+# Usage:
+#   class ButtonComponent < Component
+#     include Attachable
+#   end
+
+module Attachable
+  extend ActiveSupport::Concern
+
+  included do
+    attribute :attached, :boolean, default: false
+  end
+end

data/app/components/concerns/orientable.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+# Orientable — adds an `orientation` string attribute (vertical / horizontal).
+#
+# Usage:
+#   class DividerComponent < Component
+#     include Orientable                            # default: nil
+#   end
+#
+#   class MenuComponent < Component
+#     include Orientable
+#     default orientation: "horizontal"             # override default
+#   end
+
+module Orientable
+  extend ActiveSupport::Concern
+
+  included do
+    attribute :orientation, :string, default: nil
+  end
+end

data/app/components/concerns/positionable.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+# Positionable — adds a `position` string attribute to a component.
+#
+# Usage:
+#   class MenuComponent < Component
+#     include Positionable                        # default: nil
+#   end
+#
+#   class RailComponent < Component
+#     include Positionable
+#     default position: "left"                    # override default
+#   end
+
+module Positionable
+  extend ActiveSupport::Concern
+
+  included do
+    attribute :position, :string, default: nil
+  end
+end

data/app/components/concerns/sizeable.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# Sizeable — adds a `size` string attribute.
+#
+# Valid sizes: mini, tiny, small, large, big, huge, massive
+#
+# Usage:
+#   class ButtonComponent < Component
+#     include Sizeable
+#   end
+
+module Sizeable
+  extend ActiveSupport::Concern
+
+  included do
+    attribute :size, :string, default: nil
+  end
+end

data/app/components/container_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# Container — fixed-width page container.
+#
+# Usage:
+#   Container { text "Page content" }
+#   Container(text: true) { text "Narrower text container" }
+#   Container(fluid: true) { text "Full-width" }
+
+class ContainerComponent < Component
+  attribute :text,  :boolean, default: false
+  attribute :fluid, :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      { "text" => text, "fluid" => fluid },
+      "container"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/dimmer_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+# Dimmer — page/element overlay dimmer.
+#
+# Usage:
+#   Dimmer(active: true) { text "Dimmed content" }
+#   Dimmer(inverted: true, active: true) {
+#     Loader(active: true) { text "Loading..." }
+#   }
+
+class DimmerComponent < Component
+  attribute :active,   :boolean, default: false
+  attribute :inverted, :boolean, default: false
+  attribute :blurring, :boolean, default: false
+  attribute :simple,   :boolean, default: false
+  attribute :page,     :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      { "active" => active, "inverted" => inverted, "blurring" => blurring,
+        "simple" => simple, "page" => page },
+      "dimmer"
+    )
+
+    content_el = @content.present? ? tag.div(class: "content") { @content } : nil
+
+    tag.div(class: classes, data: { controller: "fui-dimmer" }) { content_el }
+  end
+end

data/app/components/divider_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+# Divider — horizontal/vertical dividers, optionally with text or icon.
+#
+# Usage:
+#   Divider()
+#   Divider(horizontal: true) { text "OR" }
+#   Divider(section: true, inverted: true)
+
+class DividerComponent < Component
+  attribute :vertical,   :boolean, default: false
+  attribute :horizontal, :boolean, default: false
+  attribute :hidden,     :boolean, default: false
+  attribute :section,    :boolean, default: false
+  attribute :inverted,   :boolean, default: false
+  attribute :fitted,     :boolean, default: false
+  attribute :clearing,   :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      { "vertical" => vertical, "horizontal" => horizontal, "hidden" => hidden,
+        "section" => section, "inverted" => inverted, "fitted" => fitted,
+        "clearing" => clearing },
+      "divider"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/dropdown_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+# Dropdown — selection dropdowns with search and multi-select.
+#
+# Usage:
+#   Dropdown(selection: true, placeholder: "Select...", name: "country") {
+#     MenuItem { text "United States" }
+#     MenuItem { text "Canada" }
+#   }
+
+class DropdownComponent < Component
+  attribute :selection,     :boolean, default: false
+  attribute :search,        :boolean, default: false
+  attribute :multiple,      :boolean, default: false
+  attribute :clearable,     :boolean, default: false
+  attribute :fluid,         :boolean, default: false
+  attribute :placeholder,   :string,  default: nil
+  attribute :name,          :string,  default: nil
+  attribute :default_value, :string,  default: nil
+  attribute :pointing,      :string,  default: nil
+  attribute :compact,       :boolean, default: false
+  attribute :scrolling,     :boolean, default: false
+  attribute :inline,        :boolean, default: false
+  attribute :floating,      :boolean, default: false
+  attribute :button,        :boolean, default: false
+  attribute :labeled,       :boolean, default: false
+  attribute :loading,       :boolean, default: false
+  attribute :disabled,      :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      pointing && "#{pointing} pointing",
+      { "selection" => selection, "search" => search, "multiple" => multiple,
+        "clearable" => clearable, "fluid" => fluid, "compact" => compact,
+        "scrolling" => scrolling, "inline" => inline, "floating" => floating,
+        "button" => button, "labeled" => labeled, "loading" => loading,
+        "disabled" => disabled },
+      "dropdown"
+    )
+
+    data = { controller: "fui-dropdown" }
+    data[:fui_dropdown_clearable_value] = "true" if clearable
+    data[:fui_dropdown_placeholder_value] = placeholder if placeholder
+
+    hidden_opts = { type: "hidden", value: default_value || "" }
+    hidden_opts[:name] = name if name
+
+    search_el = search ? tag.input(class: "search") : nil
+    text_el = tag.div(class: "default text") { placeholder || "" }
+    menu_el = tag.div(class: "menu") { @content }
+
+    tag.div(class: classes, data: data) {
+      safe_join([
+        tag.input(**hidden_opts),
+        search_el,
+        text_el,
+        tag.i(class: "dropdown icon"),
+        menu_el
+      ])
+    }
+  end
+end