rails-active-ui 0.1.0

data/app/components/search_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+# Search — search component with local/remote data.
+#
+# Usage:
+#   Search(placeholder: "Search...", name: "q")
+#   Search(category: true, fluid: true, size: :large)
+
+class SearchComponent < Component
+  attribute :category,       :boolean, default: false
+  attribute :placeholder,    :string,  default: "Search..."
+  attribute :min_characters, :integer, default: 1
+  attribute :fluid,          :boolean, default: false
+  attribute :size,           :string,  default: nil
+  attribute :name,           :string,  default: nil
+  attribute :url,            :string,  default: nil
+  attribute :aligned,        :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      aligned && "#{aligned} aligned",
+      { "category" => category,
+        "fluid" => fluid },
+      "search"
+    )
+
+    data = { controller: "fui-search" }
+    data[:fui_search_url_value] = url if url
+
+    input_opts = { class: "prompt", type: "text", placeholder: placeholder }
+    input_opts[:name] = name if name
+
+    input_wrapper = tag.div(class: "ui icon input") {
+      safe_join([ tag.input(**input_opts), tag.i(class: "search icon") ])
+    }
+    results_el = tag.div(class: "results")
+
+    tag.div(class: classes, data: data) {
+      safe_join([ input_wrapper, results_el, @content ])
+    }
+  end
+end

data/app/components/segment_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+# Segment — grouped content sections.
+#
+# Usage:
+#   Segment { text "Basic segment" }
+#   Segment(raised: true, padded: :very) { text "Raised" }
+#   Segment(inverted: true, color: :blue) { text "Blue inverted" }
+
+class SegmentComponent < Component
+  include Attachable
+  include Sizeable
+
+  attribute :raised,    :boolean, default: false
+  attribute :stacked,   :boolean, default: false
+  attribute :piled,     :boolean, default: false
+  attribute :vertical,  :boolean, default: false
+  attribute :inverted,  :boolean, default: false
+  attribute :padded,    :string,  default: nil
+  attribute :compact,   :boolean, default: false
+  attribute :color,     :string,  default: nil
+  attribute :loading,   :boolean, default: false
+  attribute :clearing,  :boolean, default: false
+  attribute :basic,     :boolean, default: false
+  attribute :circular,  :boolean, default: false
+  attribute :disabled,  :boolean, default: false
+  attribute :placeholder_seg, :boolean, default: false
+  attribute :secondary, :boolean, default: false
+  attribute :tertiary,  :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      color,
+      padded && "#{padded == "very" ? "very " : ""}padded",
+      { "attached" => attached,
+        "raised" => raised,
+        "stacked" => stacked,
+        "piled" => piled,
+        "vertical" => vertical,
+        "inverted" => inverted,
+        "compact" => compact,
+        "loading" => loading,
+        "clearing" => clearing,
+        "basic" => basic,
+        "circular" => circular,
+        "disabled" => disabled,
+        "placeholder" => placeholder_seg,
+        "secondary" => secondary,
+        "tertiary" => tertiary },
+      "segment"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/segment_group_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# SegmentGroup — wraps multiple segments into a visual group.
+#
+# Usage:
+#   SegmentGroup {
+#     Segment { text "Top" }
+#     Segment { text "Bottom" }
+#   }
+#
+#   SegmentGroup(aligned: "horizontal") {
+#     Segment { text "Left" }
+#     Segment { text "Right" }
+#   }
+
+class SegmentGroupComponent < Component
+  include Alignable
+
+  attribute :compact,    :boolean, default: false
+  attribute :basic,      :boolean, default: false
+  attribute :equal_width, :boolean, default: false
+  attribute :wrapping,   :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      aligned,
+      { "compact" => compact,
+        "basic" => basic, "equal width" => equal_width,
+        "wrapping" => wrapping },
+      "segments"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/shape_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Shape — 3D CSS shape transformations.
+#
+# Usage:
+#   Shape(type: :cube) {
+#     text '<div class="sides">'.html_safe
+#     text '<div class="side active">Side 1</div>'.html_safe
+#     text '<div class="side">Side 2</div>'.html_safe
+#     text '</div>'.html_safe
+#   }
+
+class ShapeComponent < Component
+  attribute :type, :string, default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      type,
+      "shape"
+    )
+
+    tag.div(class: classes, data: { controller: "fui-shape" }) { @content }
+  end
+end

data/app/components/sidebar_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# Sidebar — slide-out sidebar navigation.
+#
+# Usage:
+#   Sidebar(direction: :left, visible: true, inverted: true) {
+#     MenuItem(href: "#") { text "Home" }
+#     MenuItem(href: "#") { text "Settings" }
+#   }
+
+class SidebarComponent < Component
+  attribute :direction,  :string,  default: "left"
+  attribute :transition, :string,  default: "overlay"
+  attribute :visible,    :boolean, default: false
+  attribute :inverted,   :boolean, default: false
+  attribute :vertical,   :boolean, default: true
+  attribute :width,      :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      direction,
+      width,
+      { "inverted" => inverted,
+        "vertical" => vertical,
+        "visible" => visible },
+      "sidebar",
+      "menu"
+    )
+
+    tag.div(class: classes, data: { controller: "fui-sidebar", fui_sidebar_transition_value: transition }) { @content }
+  end
+end

data/app/components/site_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+# Site — base site wrapper with Fomantic-UI site module.
+#
+# Wraps content in a container that initializes the Fomantic-UI site module
+# via the fui-site Stimulus controller.
+
+class SiteComponent < Component
+  def to_s
+    tag.div(data: { controller: "fui-site" }) { @content }
+  end
+end

data/app/components/slider_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+# Slider — range slider control.
+#
+# Usage:
+#   Slider(min: 0, max: 100, value: 50, name: "volume")
+#   Slider(min: 0, max: 10, step: 1, labeled: true, color: :blue)
+
+class SliderComponent < Component
+  attribute :min,      :integer, default: 0
+  attribute :max,      :integer, default: 100
+  attribute :value,    :integer, default: 0
+  attribute :step,     :integer, default: 1
+  attribute :labeled,  :boolean, default: false
+  attribute :vertical, :boolean, default: false
+  attribute :reversed, :boolean, default: false
+  attribute :color,    :string,  default: nil
+  attribute :name,     :string,  default: nil
+  attribute :disabled, :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      color,
+      { "labeled" => labeled,
+        "vertical" => vertical,
+        "reversed" => reversed,
+        "disabled" => disabled },
+      "slider"
+    )
+
+    data = {
+      controller: "fui-slider",
+      fui_slider_min_value: min,
+      fui_slider_max_value: max,
+      fui_slider_start_value: value,
+      fui_slider_step_value: step
+    }
+
+    name_el = name ? tag.input(type: "hidden", name: name, value: value) : nil
+
+    tag.div(class: classes, data: data) {
+      safe_join([ name_el, @content ])
+    }
+  end
+end

data/app/components/state_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# State — UI state management for elements.
+#
+# Usage:
+#   State(text_active: "Following", text_inactive: "Follow") {
+#     Button { text "Follow" }
+#   }
+
+class StateComponent < Component
+  attribute :text_active,   :string, default: nil
+  attribute :text_inactive, :string, default: nil
+  attribute :class_active,  :string, default: nil
+  attribute :class_inactive, :string, default: nil
+
+  def to_s
+    data = { controller: "fui-state" }
+    data[:fui_state_text_active_value] = text_active if text_active
+    data[:fui_state_text_inactive_value] = text_inactive if text_inactive
+    data[:fui_state_class_active_value] = class_active if class_active
+    data[:fui_state_class_inactive_value] = class_inactive if class_inactive
+
+    tag.div(data: data) { @content }
+  end
+end

data/app/components/statistic_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+# Statistic — numeric statistics display.
+#
+# Usage:
+#   Statistic(color: :blue) { |c|
+#     c.value { text "5,550" }
+#     c.label { text "Downloads" }
+#   }
+#   Statistic(horizontal: true) { |c|
+#     c.value { text "22" }
+#     c.label { text "Members" }
+#   }
+
+class StatisticComponent < Component
+  attribute :horizontal, :boolean, default: false
+  attribute :color,      :string,  default: nil
+  attribute :size,       :string,  default: nil
+  attribute :inverted,   :boolean, default: false
+  attribute :floated,    :string,  default: nil
+
+  slot :value
+  slot :label
+
+  def to_s
+    classes = class_names(
+      "ui",
+      color,
+      size,
+      floated && "#{floated} floated",
+      { "horizontal" => horizontal,
+        "inverted" => inverted },
+      "statistic"
+    )
+
+    value_el = @slots[:value] ? tag.div(class: "value") { @slots[:value] } : nil
+    label_el = @slots[:label] ? tag.div(class: "label") { @slots[:label] } : nil
+
+    tag.div(class: classes) {
+      safe_join([ value_el, label_el, @content.presence ])
+    }
+  end
+end

data/app/components/step_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+# Step — individual step within a StepGroup.
+#
+# Usage:
+#   StepGroup {
+#     Step(active: true, icon: "truck", title: "Shipping", description: "Choose shipping")
+#     Step(title: "Billing", description: "Enter billing info")
+#     Step(disabled: true, title: "Confirm Order")
+#   }
+#
+#   StepGroup {
+#     Step(completed: true) {
+#       text "Custom content"
+#     }
+#   }
+
+class StepComponent < Component
+  attribute :active,      :boolean, default: false
+  attribute :completed,   :boolean, default: false
+  attribute :disabled,    :boolean, default: false
+  attribute :icon,        :string,  default: nil
+  attribute :title,       :string,  default: nil
+  attribute :description, :string,  default: nil
+  attribute :href,        :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      { "active" => active, "completed" => completed, "disabled" => disabled },
+      "step"
+    )
+
+    icon_el = icon ? tag.i(class: "#{icon} icon") : nil
+
+    content_parts = [
+      (title ? tag.div(class: "title") { title } : nil),
+      (description ? tag.div(class: "description") { description } : nil)
+    ].compact
+
+    content_el = if content_parts.any?
+      tag.div(class: "content") { safe_join(content_parts) }
+    end
+
+    inner = if @content.present?
+      @content
+    else
+      safe_join([ icon_el, content_el ])
+    end
+
+    if href
+      tag.a(class: classes, href: href) { inner }
+    else
+      tag.div(class: classes) { inner }
+    end
+  end
+end

data/app/components/step_group_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+# StepGroup — container for step indicators in multi-step workflows.
+#
+# Usage:
+#   StepGroup(ordered: true) {
+#     Step(active: true, title: "Shipping", description: "Choose your shipping options")
+#     Step(title: "Billing", description: "Enter billing information")
+#     Step(disabled: true, title: "Confirm Order")
+#   }
+
+class StepGroupComponent < Component
+  attribute :ordered,     :boolean, default: false
+  attribute :vertical,    :boolean, default: false
+  attribute :fluid,       :boolean, default: false
+  attribute :attached,    :string,  default: nil
+  attribute :unstackable, :boolean, default: false
+  attribute :size,        :string,  default: nil
+  attribute :stackable,   :boolean, default: false
+  attribute :circular,    :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      attached && "#{attached} attached",
+      { "ordered" => ordered,
+        "vertical" => vertical,
+        "fluid" => fluid,
+        "unstackable" => unstackable,
+        "stackable" => stackable,
+        "circular" => circular },
+      "steps"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/sticky_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Sticky — sticky/fixed position elements that follow scroll.
+#
+# Usage:
+#   Sticky { text "I stick on scroll" }
+#   Sticky(offset: 50, pushing: true) { text "Sticky header" }
+
+class StickyComponent < Component
+  attribute :context, :string,  default: nil
+  attribute :pushing, :boolean, default: false
+  attribute :offset,  :integer, default: 0
+
+  def to_s
+    data = { controller: "fui-sticky" }
+    data[:fui_sticky_context_value] = context if context
+    data[:fui_sticky_pushing_value] = "true" if pushing
+    data[:fui_sticky_offset_value] = offset if offset > 0
+
+    tag.div(class: "ui sticky", data: data) { @content }
+  end
+end

data/app/components/sub_header_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# SubHeader — sub header text within a Header.
+#
+# Usage:
+#   Header(size: :h2) {
+#     text "Main Title"
+#     SubHeader { text "A subtitle or description" }
+#   }
+
+class SubHeaderComponent < Component
+  def to_s
+    tag.div(class: "sub header") { @content }
+  end
+end

data/app/components/sub_menu_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# SubMenu — sub-menu or positioned menu group within a Menu.
+#
+# Usage:
+#   Menu {
+#     MenuItem(href: "/") { text "Home" }
+#     SubMenu(position: "right") {
+#       MenuItem(href: "/login") { text "Login" }
+#     }
+#   }
+
+class SubMenuComponent < Component
+  include Positionable
+
+  def to_s
+    classes = class_names(
+      position,
+      "menu"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/tab_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# Tab — tab navigation with content panes.
+#
+# Usage:
+#   Tab(active: true) { text "Tab pane content" }
+
+class TabComponent < Component
+  attribute :active, :boolean, default: false
+  attribute :path,   :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      { "active" => active },
+      "tab"
+    )
+
+    data = { controller: "fui-tab" }
+    data[:tab] = path if path
+
+    tag.div(class: classes, data: data) { @content }
+  end
+end

data/app/components/table_cell_component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+# TableCell — a table cell (td or th).
+#
+# Usage:
+#   TableRow {
+#     TableCell { text "Data" }
+#     TableCell(aligned: "right", collapsing: true) { text "10 hours ago" }
+#     TableCell(heading: true, colspan: 3) { text "Section" }
+#   }
+
+class TableCellComponent < Component
+  attribute :heading,    :boolean, default: false
+  attribute :aligned,    :string,  default: nil
+  attribute :collapsing, :boolean, default: false
+  attribute :single_line, :boolean, default: false
+  attribute :positive,   :boolean, default: false
+  attribute :negative,   :boolean, default: false
+  attribute :warning,    :boolean, default: false
+  attribute :error,      :boolean, default: false
+  attribute :active,     :boolean, default: false
+  attribute :disabled,   :boolean, default: false
+  attribute :selectable, :boolean, default: false
+  attribute :color,      :string,  default: nil
+  attribute :width,      :integer, default: nil
+  attribute :colspan,    :integer, default: nil
+  attribute :rowspan,    :integer, default: nil
+
+  NUMBERS = %w[one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen].freeze
+
+  def to_s
+    width_word = width && width.between?(1, 16) ? NUMBERS[width - 1] : nil
+
+    classes = [
+      (aligned && "#{aligned} aligned"),
+      ("collapsing" if collapsing),
+      ("single line" if single_line),
+      ("positive" if positive),
+      ("negative" if negative),
+      ("warning" if warning),
+      ("error" if error),
+      ("active" if active),
+      ("disabled" if disabled),
+      ("selectable" if selectable),
+      color,
+      (width_word && "#{width_word} wide")
+    ].compact
+
+    opts = {}
+    opts[:class] = classes.join(" ") if classes.any?
+    opts[:colspan] = colspan if colspan
+    opts[:rowspan] = rowspan if rowspan
+
+    if heading
+      tag.th(**opts) { @content }
+    else
+      tag.td(**opts) { @content }
+    end
+  end
+end