rails-active-ui 0.1.0

data/app/components/list_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# List — ordered, unordered, and bulleted lists.
+#
+# Usage:
+#   List(bulleted: true) { text "items..." }
+#   List(divided: true, relaxed: true) { text "items..." }
+
+class ListComponent < Component
+  attribute :ordered,    :boolean, default: false
+  attribute :bulleted,   :boolean, default: false
+  attribute :divided,    :boolean, default: false
+  attribute :relaxed,    :boolean, default: false
+  attribute :animated,   :boolean, default: false
+  attribute :horizontal, :boolean, default: false
+  attribute :inverted,   :boolean, default: false
+  attribute :size,       :string,  default: nil
+  attribute :celled,     :boolean, default: false
+  attribute :selection,  :boolean, default: false
+  attribute :link,       :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      { "ordered" => ordered, "bulleted" => bulleted, "divided" => divided,
+        "relaxed" => relaxed, "animated" => animated, "horizontal" => horizontal,
+        "inverted" => inverted, "celled" => celled, "selection" => selection,
+        "link" => link },
+      "list"
+    )
+
+    if ordered
+      tag.ol(class: classes) { @content }
+    else
+      tag.div(class: classes) { @content }
+    end
+  end
+end

data/app/components/loader_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# Loader — loading spinners.
+#
+# Usage:
+#   Loader(active: true)
+#   Loader(active: true, size: :large) { text "Loading..." }
+#   Loader(inline: true, centered: true, active: true)
+
+class LoaderComponent < Component
+  attribute :active,        :boolean, default: false
+  attribute :inline,        :boolean, default: false
+  attribute :centered,      :boolean, default: false
+  attribute :size,          :string,  default: nil
+  attribute :inverted,      :boolean, default: false
+  attribute :indeterminate, :boolean, default: false
+  attribute :color,         :string,  default: nil
+  attribute :disabled,      :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      color,
+      { "active" => active, "disabled" => disabled, "inline" => inline,
+        "centered" => centered, "inverted" => inverted,
+        "indeterminate" => indeterminate, "text" => @content.present? },
+      "loader"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/menu_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+# Menu — navigation menus.
+#
+# Usage:
+#   Menu(pointing: true, secondary: true) {
+#     MenuItem(href: "#", active: true) { text "Home" }
+#     MenuItem(href: "#") { text "Messages" }
+#   }
+
+class MenuComponent < Component
+  include Positionable
+  include Attachable
+  include Sizeable
+
+  attribute :secondary,    :boolean, default: false
+  attribute :pointing,     :boolean, default: false
+  attribute :tabular,      :boolean, default: false
+  attribute :vertical,     :boolean, default: false
+  attribute :fixed,        :string,  default: nil
+  attribute :inverted,     :boolean, default: false
+  attribute :icon,         :boolean, default: false
+  attribute :labeled_icon, :boolean, default: false
+  attribute :compact,      :boolean, default: false
+  attribute :fluid,        :boolean, default: false
+  attribute :color,        :string,  default: nil
+  attribute :stackable,    :boolean, default: false
+  attribute :text,         :boolean, default: false
+  attribute :pagination,   :boolean, default: false
+  attribute :borderless,   :boolean, default: false
+  attribute :items,        :integer, default: nil
+
+  NUMBERS = %w[one two three four five six seven eight nine ten eleven twelve].freeze
+
+  def to_s
+    item_word = items && items.between?(1, 12) ? NUMBERS[items - 1] : nil
+
+    classes = class_names(
+      "ui",
+      position,
+      size,
+      color,
+      item_word && "#{item_word} item",
+      fixed && "#{fixed} fixed",
+      { "attached" => attached,
+        "secondary" => secondary,
+        "pointing" => pointing,
+        "tabular" => tabular,
+        "vertical" => vertical,
+        "inverted" => inverted,
+        "icon" => icon && !labeled_icon,
+        "labeled icon" => labeled_icon,
+        "compact" => compact,
+        "fluid" => fluid,
+        "stackable" => stackable,
+        "text" => text,
+        "pagination" => pagination,
+        "borderless" => borderless },
+      "menu"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/menu_item_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# MenuItem — individual item within a Menu or Sidebar.
+#
+# Usage:
+#   Menu {
+#     MenuItem(href: "/") { text "Home" }
+#     MenuItem(active: true) { text "Current" }
+#     MenuItem(header: true) { text "Section Header" }
+#     MenuItem(icon: "settings") { text "Settings" }
+#   }
+
+class MenuItemComponent < Component
+  include Positionable
+
+  attribute :href,     :string,  default: nil
+  attribute :active,   :boolean, default: false
+  attribute :disabled, :boolean, default: false
+  attribute :header,   :boolean, default: false
+  attribute :icon,     :string,  default: nil
+  attribute :fitted,   :string,  default: nil
+  attribute :link,     :boolean, default: false
+  attribute :color,    :string,  default: nil
+  attribute :dropdown, :boolean, default: false
+  attribute :value,    :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      color,
+      fitted && (fitted == "true" ? "fitted" : "#{fitted} fitted"),
+      position,
+      { "active" => active,
+        "disabled" => disabled,
+        "header" => header,
+        "link" => link,
+        "dropdown" => dropdown },
+      "item"
+    )
+
+    icon_el = icon ? tag.i(class: "#{icon} icon") : nil
+    inner = icon_el ? safe_join([ icon_el, @content ]) : @content
+
+    opts = { class: classes }
+    opts["data-value"] = value if value
+
+    if href
+      tag.a(**opts, href: href) { inner }
+    else
+      tag.div(**opts) { inner }
+    end
+  end
+end

data/app/components/message_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+# Message — alert/info messages.
+#
+# Usage:
+#   Message(type: :success) { text "It worked!" }
+#   Message(type: :error, icon: "exclamation triangle") { |c|
+#     c.header { text "Error" }
+#     text "Something went wrong."
+#   }
+#   Message(dismissible: true) { text "Notice" }
+
+class MessageComponent < Component
+  include Attachable
+
+  attribute :type,        :string,  default: nil
+  attribute :icon,        :string,  default: nil
+  attribute :dismissible, :boolean, default: false
+  attribute :floating,    :boolean, default: false
+  attribute :compact,     :boolean, default: false
+  attribute :color,       :string,  default: nil
+  attribute :size,        :string,  default: nil
+  attribute :hidden,      :boolean, default: false
+  attribute :visible,     :boolean, default: false
+
+  slot :header
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      color,
+      type,
+      { "attached" => attached,
+        "icon" => icon,
+        "floating" => floating,
+        "compact" => compact,
+        "hidden" => hidden,
+        "visible" => visible },
+      "message"
+    )
+
+    close_el = dismissible ? tag.i(class: "close icon") : nil
+    icon_el = icon ? tag.i(class: "#{icon} icon") : nil
+    header_el = @slots[:header] ? tag.div(class: "header") { @slots[:header] } : nil
+
+    content_parts = safe_join([ header_el, @content.presence ])
+    content_wrapper = icon ? tag.div(class: "content") { content_parts } : content_parts
+
+    tag.div(class: classes) {
+      safe_join([ close_el, icon_el, content_wrapper ])
+    }
+  end
+end

data/app/components/modal_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+# Modal — dialog windows with dimmer.
+#
+# Usage:
+#   Modal(size: :small) { |c|
+#     c.header { text "Confirm Action" }
+#     c.content { text "Are you sure?" }
+#     c.actions {
+#       Button(variant: :deny) { text "Cancel" }
+#       Button(variant: :approve, color: :green) { text "OK" }
+#     }
+#   }
+
+class ModalComponent < Component
+  attribute :size,     :string,  default: nil
+  attribute :basic,    :boolean, default: false
+  attribute :closable, :boolean, default: true
+  attribute :blurring, :boolean, default: false
+  attribute :longer,   :boolean, default: false
+  attribute :fullscreen, :boolean, default: false
+
+  slot :header
+  slot :content
+  slot :actions
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      { "basic" => basic,
+        "longer" => longer,
+        "fullscreen" => fullscreen },
+      "modal"
+    )
+
+    data = { controller: "fui-modal" }
+    data[:fui_modal_closable_value] = "false" unless closable
+    data[:fui_modal_blurring_value] = "true" if blurring
+
+    close_el = closable ? tag.i(class: "close icon") : nil
+    header_el = @slots[:header] ? tag.div(class: "header") { @slots[:header] } : nil
+    content_el = @slots[:content] ? tag.div(class: "content") { @slots[:content] } : nil
+    actions_el = @slots[:actions] ? tag.div(class: "actions") { @slots[:actions] } : nil
+
+    tag.div(class: classes, data: data) {
+      safe_join([ close_el, header_el, content_el, @content.presence, actions_el ])
+    }
+  end
+end

data/app/components/nag_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Nag — persistent notification/cookie nag bar.
+#
+# Usage:
+#   Nag { text "We use cookies." }
+#   Nag(fixed: true) { text "Update available!" }
+
+class NagComponent < Component
+  attribute :fixed, :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      { "fixed" => fixed },
+      "nag"
+    )
+
+    close_el = tag.i(class: "close icon")
+
+    tag.div(class: classes, data: { controller: "fui-nag" }) {
+      safe_join([ close_el, @content ])
+    }
+  end
+end

data/app/components/overlay_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# Overlay — floating overlay wrapper for positioned content.
+#
+# Usage:
+#   Overlay {
+#     Menu(vertical: true, labeled_icon: true) {
+#       MenuItem(href: "#", icon: "twitter") { text "Tweet" }
+#     }
+#   }
+
+class OverlayComponent < Component
+  def to_s
+    tag.div(class: "overlay") { @content }
+  end
+end

data/app/components/placeholder_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# Placeholder — skeleton/placeholder content while loading.
+#
+# Usage:
+#   Placeholder { |c|
+#     c.header_slot {
+#       text '<div class="line"></div><div class="line"></div>'.html_safe
+#     }
+#     c.paragraph {
+#       text '<div class="line"></div><div class="line"></div>'.html_safe
+#     }
+#   }
+
+class PlaceholderComponent < Component
+  attribute :fluid,    :boolean, default: false
+  attribute :inverted, :boolean, default: false
+
+  slot :header_slot
+  slot :paragraph
+  slot :image_slot
+
+  def to_s
+    classes = class_names(
+      "ui",
+      { "fluid" => fluid,
+        "inverted" => inverted },
+      "placeholder"
+    )
+
+    header_el = @slots[:header_slot] ? tag.div(class: "header") { @slots[:header_slot] } : nil
+    para_el = @slots[:paragraph] ? tag.div(class: "paragraph") { @slots[:paragraph] } : nil
+    image_el = @slots[:image_slot] ? tag.div(class: "image") { @slots[:image_slot] } : nil
+
+    tag.div(class: classes) {
+      safe_join([ header_el, para_el, image_el, @content.presence ])
+    }
+  end
+end

data/app/components/popup_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+# Popup — tooltips and popup content.
+#
+# Usage:
+#   Popup(content: "Tooltip text", position: "top center") {
+#     Button { text "Hover me" }
+#   }
+#   Popup(hoverable: true) { text "Hover for popup" }
+
+class PopupComponent < Component
+  include Positionable
+  default position: "top center"
+
+  attribute :content,   :string,  default: nil
+  attribute :title,     :string,  default: nil
+  attribute :variation, :string,  default: nil
+  attribute :hoverable, :boolean, default: false
+  attribute :on,        :string,  default: "hover"
+
+  def to_s
+    data = { controller: "fui-popup", fui_popup_position_value: position }
+    data[:fui_popup_content_value] = content if content
+    data[:fui_popup_title_value] = title if title
+    data[:fui_popup_hoverable_value] = "true" if hoverable
+    data[:fui_popup_variation_value] = variation if variation
+    data[:fui_popup_on_value] = on if on != "hover"
+
+    tag.span(data: data) { @content }
+  end
+end

data/app/components/progress_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+# Progress — progress bars.
+#
+# Usage:
+#   Progress(value: 65, total: 100, color: :green, active: true) { |c|
+#     c.bar { }
+#     c.label { text "65% Complete" }
+#   }
+#   Progress(value: 3, total: 10, indicating: true)
+
+class ProgressComponent < Component
+  attribute :value,      :integer, default: 0
+  attribute :total,      :integer, default: 100
+  attribute :indicating, :boolean, default: false
+  attribute :active,     :boolean, default: false
+  attribute :color,      :string,  default: nil
+  attribute :size,       :string,  default: nil
+  attribute :attached,   :string,  default: nil
+  attribute :inverted,   :boolean, default: false
+  attribute :disabled,   :boolean, default: false
+
+  slot :bar
+  slot :label
+
+  def to_s
+    percent = total > 0 ? ((value.to_f / total) * 100).round : 0
+
+    classes = class_names(
+      "ui",
+      color,
+      size,
+      attached && "#{attached} attached",
+      { "indicating" => indicating,
+        "active" => active,
+        "inverted" => inverted,
+        "disabled" => disabled },
+      "progress"
+    )
+
+    bar_el = tag.div(class: "bar", style: "width:#{percent}%") { @slots[:bar] }
+    label_el = @slots[:label] ? tag.div(class: "label") { @slots[:label] } : nil
+
+    tag.div(class: classes, data: { controller: "fui-progress", percent: percent }) {
+      safe_join([ bar_el, label_el, @content.presence ])
+    }
+  end
+end

data/app/components/pusher_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# Pusher — main content wrapper for Sidebar layouts.
+# The pusher wraps the page content that gets pushed when a sidebar opens.
+#
+# Usage:
+#   Sidebar(inverted: true) {
+#     MenuItem(href: "/") { text "Home" }
+#   }
+#   Pusher {
+#     text "Main content here"
+#   }
+
+class PusherComponent < Component
+  def to_s
+    tag.div(class: "pusher") { @content }
+  end
+end

data/app/components/rail_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+# Rail — content rails floating alongside main content.
+#
+# Usage:
+#   Rail(position: :left) { text "Side content" }
+#   Rail(position: :right, close: true) { text "Close rail" }
+
+class RailComponent < Component
+  include Positionable
+  default position: "left"
+
+  attribute :close,    :boolean, default: false
+  attribute :attached, :boolean, default: false
+  attribute :dividing, :boolean, default: false
+  attribute :internal, :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      position,
+      { "close" => close,
+        "attached" => attached,
+        "dividing" => dividing,
+        "internal" => internal },
+      "rail"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/rating_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# Rating — star/heart rating widget.
+#
+# Usage:
+#   Rating(max_rating: 5, rating: 3)
+#   Rating(max_rating: 5, rating: 4, icon: :heart, size: :large)
+#   Rating(max_rating: 10, disabled: true, rating: 7)
+
+class RatingComponent < Component
+  attribute :max_rating, :integer, default: 5
+  attribute :rating,     :integer, default: 0
+  attribute :icon,       :string,  default: "star"
+  attribute :size,       :string,  default: nil
+  attribute :disabled,   :boolean, default: false
+  attribute :clearable,  :boolean, default: false
+  attribute :name,       :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      icon,
+      size,
+      { "disabled" => disabled },
+      "rating"
+    )
+
+    data = {
+      controller: "fui-rating",
+      fui_rating_max_rating_value: max_rating,
+      fui_rating_initial_rating_value: rating
+    }
+    data[:fui_rating_clearable_value] = "true" if clearable
+
+    name_el = name ? tag.input(type: "hidden", name: name, value: rating) : nil
+
+    tag.div(class: classes, data: data) {
+      safe_join([ name_el, @content ])
+    }
+  end
+end

data/app/components/reset_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+# Reset — CSS reset/normalize.
+#
+# Fomantic-UI's reset is loaded via the asset pipeline (semantic.css).
+# This component is a no-op marker for inventory completeness.
+
+class ResetComponent < Component
+  def to_s
+    tag.comment("fomantic-ui reset loaded via asset pipeline")
+  end
+end

data/app/components/reveal_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# Reveal — hidden content revealed on hover/active.
+#
+# Usage:
+#   Reveal(type: :fade) { |c|
+#     c.visible { Image(src: "before.jpg") }
+#     c.hidden  { Image(src: "after.jpg") }
+#   }
+
+class RevealComponent < Component
+  attribute :type,     :string,  default: "fade"
+  attribute :active,   :boolean, default: false
+  attribute :instant,  :boolean, default: false
+  attribute :disabled, :boolean, default: false
+  attribute :move_direction, :string, default: nil
+
+  slot :visible
+  slot :hidden
+
+  def to_s
+    classes = class_names(
+      "ui",
+      type,
+      (type == "move") && move_direction,
+      { "active" => active,
+        "instant" => instant,
+        "disabled" => disabled },
+      "reveal"
+    )
+
+    visible_el = @slots[:visible] ? tag.div(class: "visible content") { @slots[:visible] } : nil
+    hidden_el  = @slots[:hidden]  ? tag.div(class: "hidden content") { @slots[:hidden] } : nil
+
+    tag.div(class: classes) {
+      safe_join([ visible_el, hidden_el, @content ])
+    }
+  end
+end

data/app/components/row_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# Row — grid row with optional column count.
+#
+# Usage:
+#   Grid {
+#     Row(columns: 3) {
+#       Column { text "A" }
+#       Column { text "B" }
+#       Column { text "C" }
+#     }
+#   }
+
+class RowComponent < Component
+  NUMBERS = %w[one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen].freeze
+
+  attribute :columns, :integer, default: nil
+  attribute :centered, :boolean, default: false
+  attribute :stretched, :boolean, default: false
+  attribute :equal_width, :boolean, default: false
+  attribute :only,     :string,  default: nil
+  attribute :aligned,  :string,  default: nil
+
+  def to_s
+    col_word = columns && columns.between?(1, 16) ? NUMBERS[columns - 1] : nil
+
+    classes = class_names(
+      col_word && "#{col_word} column",
+      only && "#{only} only",
+      aligned && "#{aligned} aligned",
+      { "centered" => centered,
+        "stretched" => stretched,
+        "equal width" => equal_width },
+      "row"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end