rails-active-ui 0.1.0

data/app/components/embed_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+# Embed — embedded video/iframe content.
+#
+# Usage:
+#   Embed(source: :youtube, embed_id: "dQw4w9WgXcQ")
+#   Embed(source: :vimeo, embed_id: "123456", placeholder: "thumb.jpg")
+#   Embed(url: "https://example.com/widget")
+
+class EmbedComponent < Component
+  attribute :source,      :string, default: nil
+  attribute :embed_id,    :string, default: nil
+  attribute :url,         :string, default: nil
+  attribute :placeholder, :string, default: nil
+  attribute :icon,        :string, default: "video play"
+  attribute :autoplay,    :boolean, default: true
+
+  def to_s
+    data = { controller: "fui-embed" }
+    data[:source] = source if source
+    data[:id] = embed_id if embed_id
+    data[:url] = url if url
+    data[:placeholder] = placeholder if placeholder
+
+    icon_el = tag.i(class: "#{icon} icon")
+    placeholder_el = placeholder ? tag.img(class: "placeholder", src: placeholder) : nil
+
+    tag.div(class: "ui embed", data: data) {
+      safe_join([ icon_el, placeholder_el, @content ])
+    }
+  end
+end

data/app/components/emoji_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# Emoji — renders a Fomantic-UI emoji by name.
+#
+# Usage:
+#   Emoji(name: "smile")
+#   Emoji(name: "thumbsup")
+
+class EmojiComponent < Component
+  attribute :name, :string, default: nil
+
+  def to_s
+    tag.em(class: "small", data: { emoji: ":#{name}:" })
+  end
+end

data/app/components/feed_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Feed — activity/event feed.
+#
+# Usage:
+#   Feed(size: :small) {
+#     text '<div class="event">...</div>'.html_safe
+#   }
+
+class FeedComponent < Component
+  attribute :size, :string, default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      "feed"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/flag_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# Flag — country flag icon.
+#
+# Usage:
+#   Flag(country: "us")
+#   Flag(country: "fr")
+
+class FlagComponent < Component
+  attribute :country, :string, default: nil
+
+  def to_s
+    tag.i(class: "#{country} flag")
+  end
+end

data/app/components/flyout_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# Flyout — slide-out panel from screen edge.
+#
+# Usage:
+#   Flyout(direction: :right) { |c|
+#     c.header { text "Settings" }
+#     c.content { text "Flyout body" }
+#     c.actions {
+#       Button(variant: :primary) { text "Save" }
+#     }
+#   }
+
+class FlyoutComponent < Component
+  attribute :direction, :string,  default: "right"
+  attribute :closable,  :boolean, default: true
+
+  slot :header
+  slot :content
+  slot :actions
+
+  def to_s
+    classes = class_names(
+      "ui",
+      direction,
+      "flyout"
+    )
+
+    data = { controller: "fui-flyout" }
+    data[:fui_flyout_closable_value] = "false" unless closable
+
+    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/form_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# Form — form layout and validation with Stimulus controller.
+#
+# Usage:
+#   Form(action: "/submit", method: :post) {
+#     text '<div class="field"><label>Name</label><input type="text"></div>'.html_safe
+#   }
+#   Form(loading: true, size: :large) { ... }
+
+class FormComponent < Component
+  attribute :size,        :string,  default: nil
+  attribute :loading,     :boolean, default: false
+  attribute :success,     :boolean, default: false
+  attribute :error,       :boolean, default: false
+  attribute :warning,     :boolean, default: false
+  attribute :inverted,    :boolean, default: false
+  attribute :equal_width, :boolean, default: false
+  attribute :action,      :string,  default: nil
+  attribute :method_type, :string,  default: "post"
+  attribute :reply,       :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      { "loading" => loading, "success" => success, "error" => error,
+        "warning" => warning, "inverted" => inverted,
+        "equal width" => equal_width, "reply" => reply },
+      "form"
+    )
+
+    opts = { class: classes, data: { controller: "fui-form" } }
+    opts[:action] = action if action
+    opts[:method] = method_type if action
+
+    tag.form(**opts) { @content }
+  end
+end

data/app/components/grid_component.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+# Grid — responsive grid system.
+#
+# Usage:
+#   Grid(columns: 3, stackable: true) {
+#     Column { text "A" }
+#     Column { text "B" }
+#     Column { text "C" }
+#   }
+
+class GridComponent < 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 :stackable,   :boolean, default: false
+  attribute :doubling,    :boolean, default: false
+  attribute :centered,    :boolean, default: false
+  attribute :divided,     :string,  default: nil
+  attribute :celled,      :string,  default: nil
+  attribute :padded,      :string,  default: nil
+  attribute :relaxed,     :string,  default: nil
+  attribute :equal_width, :boolean, default: false
+  attribute :reversed,    :string,  default: nil
+  attribute :container,   :boolean, default: false
+  attribute :internal,    :boolean, default: false
+  attribute :inverted,   :boolean, default: false
+  attribute :aligned,    :string,  default: nil
+
+  def to_s
+    col_word = columns && columns.between?(1, 16) ? NUMBERS[columns - 1] : nil
+
+    classes = class_names(
+      "ui",
+      col_word && "#{col_word} column",
+      aligned && "#{aligned} aligned",
+      divided_class,
+      celled_class,
+      padded_class,
+      relaxed_class,
+      reversed && "#{reversed} reversed",
+      { "stackable" => stackable, "doubling" => doubling, "centered" => centered,
+        "equal width" => equal_width, "container" => container,
+        "internally" => internal, "inverted" => inverted },
+      "grid"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+
+  private
+
+  def divided_class
+    case divided
+    when "vertically" then "vertically divided"
+    when "true", true then "divided"
+    when String then "#{divided} divided"
+    end
+  end
+
+  def celled_class
+    case celled
+    when "internally" then "internally celled"
+    when "true", true then "celled"
+    when String then "#{celled} celled"
+    end
+  end
+
+  def padded_class
+    case padded
+    when "vertically" then "vertically padded"
+    when "horizontally" then "horizontally padded"
+    when "true", true then "padded"
+    when String then "#{padded} padded"
+    end
+  end
+
+  def relaxed_class
+    case relaxed
+    when "very" then "very relaxed"
+    when "true", true then "relaxed"
+    when String then "#{relaxed} relaxed"
+    end
+  end
+end

data/app/components/h_stack_component.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+class HStackComponent < Component
+  attribute :spacing, :integer, default: 0
+  attribute :justify, :string,  default: "start"
+  attribute :align,   :string,  default: "start"
+  attribute :padding, :integer, default: nil
+  attribute :rounded, :string,  default: nil
+  attribute :shadow,  :string,  default: nil
+  attribute :bg,      :string,  default: nil
+
+  def to_s
+    style_parts = [
+      "display:flex",
+      ("gap:#{spacing}px" if spacing > 0),
+      ("justify-content:#{justify_value}" if justify != "start"),
+      ("align-items:#{align_value}" if align != "start"),
+      ("padding:#{padding}px" if padding),
+      ("border-radius:#{rounded_value}" if rounded),
+      ("background:#{bg}" if bg)
+    ].compact.join(";")
+
+    classes = [
+      ("shadow-border-#{shadow}" if shadow)
+    ].compact
+
+    opts = {}
+    opts[:class] = classes.join(" ") unless classes.empty?
+    opts[:style] = style_parts unless style_parts.empty?
+
+    tag.div(**opts) { @content }
+  end
+
+  private
+
+  def justify_value
+    case justify
+    when "center"  then "center"
+    when "end"     then "flex-end"
+    when "between" then "space-between"
+    when "around"  then "space-around"
+    when "evenly"  then "space-evenly"
+    else "flex-start"
+    end
+  end
+
+  def align_value
+    case align
+    when "center"  then "center"
+    when "end"     then "flex-end"
+    when "stretch" then "stretch"
+    when "baseline" then "baseline"
+    else "flex-start"
+    end
+  end
+
+  def rounded_value
+    case rounded
+    when "sm" then "0.125rem"
+    when "md" then "0.375rem"
+    when "lg" then "0.5rem"
+    when "xl" then "0.75rem"
+    when "full" then "9999px"
+    else "0.25rem"
+    end
+  end
+end

data/app/components/header_component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+# Header — page and content headers.
+#
+# Usage:
+#   Header(size: :h2) { text "Page Title" }
+#   Header(size: :h3, sub: true) { text "Subtitle" }
+#   Header(icon: "settings", dividing: true) { text "Settings" }
+#   Header(size: :h4, image: true) { |c|
+#     c.header_image { Image(src: "avatar.png", size: "mini", rounded: true) }
+#     text "Lena"
+#     SubHeader { text "Human Resources" }
+#   }
+
+class HeaderComponent < Component
+  attribute :size,         :string,  default: "h2"
+  attribute :sub,          :boolean, default: false
+  attribute :icon,         :string,  default: nil
+  attribute :image,        :boolean, default: false
+  attribute :dividing,     :boolean, default: false
+  attribute :block_header, :boolean, default: false
+  attribute :inverted,     :boolean, default: false
+  attribute :color,        :string,  default: nil
+  attribute :aligned,      :string,  default: nil
+  attribute :attached,     :string,  default: nil
+  attribute :disabled,     :boolean, default: false
+  attribute :floating,     :boolean, default: false
+
+  slot :header_image
+
+  def to_s
+    classes = class_names(
+      "ui",
+      color,
+      aligned && "#{aligned} aligned",
+      attached && "#{attached} attached",
+      { "sub" => sub, "dividing" => dividing, "block" => block_header,
+        "inverted" => inverted, "disabled" => disabled, "floating" => floating,
+        "icon" => icon && !@content, "image" => image },
+      "header"
+    )
+
+    tag_name = size.to_s.start_with?("h") ? size.to_s.to_sym : :h2
+    icon_el = icon ? tag.i(class: "#{icon} icon") : nil
+
+    if image && @slots[:header_image]
+      # Image header: image outside content div, text + sub header inside content div
+      tag.public_send(tag_name, class: classes) {
+        safe_join([
+          @slots[:header_image],
+          tag.div(class: "content") { @content }
+        ])
+      }
+    else
+      tag.public_send(tag_name, class: classes) {
+        safe_join([ icon_el, @content ])
+      }
+    end
+  end
+end

data/app/components/icon_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# Icon — icon element using Fomantic-UI icon font.
+#
+# Usage:
+#   Icon(name: "home")
+#   Icon(name: "heart", color: :red, size: :large)
+#   Icon(name: "spinner", loading: true)
+
+class IconComponent < Component
+  attribute :name,     :string,  default: nil
+  attribute :size,     :string,  default: nil
+  attribute :color,    :string,  default: nil
+  attribute :disabled, :boolean, default: false
+  attribute :loading,  :boolean, default: false
+  attribute :fitted,   :boolean, default: false
+  attribute :link,     :boolean, default: false
+  attribute :circular, :boolean, default: false
+  attribute :bordered, :boolean, default: false
+  attribute :inverted, :boolean, default: false
+  attribute :flipped,  :string,  default: nil
+  attribute :rotated,  :string,  default: nil
+  attribute :corner,   :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      name,
+      size,
+      color,
+      flipped && "#{flipped} flipped",
+      rotated && "#{rotated} rotated",
+      corner && "#{corner} corner",
+      { "disabled" => disabled, "loading" => loading, "fitted" => fitted,
+        "link" => link, "circular" => circular, "bordered" => bordered,
+        "inverted" => inverted },
+      "icon"
+    )
+
+    tag.i(class: classes)
+  end
+end

data/app/components/image_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+# Image — image element. Merges the holy spec primitive with Fomantic-UI image.
+#
+# Usage:
+#   Image(src: "photo.jpg")
+#   Image(src: "avatar.png", avatar: true, size: :mini)
+#   Image(src: "logo.svg", circular: true, centered: true)
+
+class ImageComponent < Component
+  attribute :src,      :string,  default: nil
+  attribute :alt,      :string,  default: ""
+  attribute :size,     :string,  default: nil
+  attribute :width,    :integer, default: nil
+  attribute :height,   :integer, default: nil
+  attribute :shrink,   :boolean, default: true
+  attribute :rounded,  :boolean, default: false
+  attribute :circular, :boolean, default: false
+  attribute :bordered, :boolean, default: false
+  attribute :fluid,    :boolean, default: false
+  attribute :avatar,   :boolean, default: false
+  attribute :centered, :boolean, default: false
+  attribute :spaced,   :string,  default: nil
+  attribute :hidden,   :boolean, default: false
+  attribute :disabled, :boolean, default: false
+  attribute :inline,   :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      spaced && "#{spaced} spaced",
+      { "rounded" => rounded, "circular" => circular, "bordered" => bordered,
+        "fluid" => fluid, "avatar" => avatar, "centered" => centered,
+        "hidden" => hidden, "disabled" => disabled, "inline" => inline },
+      "image"
+    )
+
+    opts = { class: classes, src: src, alt: alt }
+    opts[:width] = width if width
+    opts[:height] = height if height
+    opts[:style] = "flex-shrink:0" unless shrink
+
+    tag.img(**opts)
+  end
+end

data/app/components/input_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# Input — text input fields with icon, labeled, and action variants.
+#
+# Usage:
+#   Input(placeholder: "Search...", icon: "search")
+#   Input(icon: "users", icon_position: "left", placeholder: "Find users...")
+#   Input(labeled: true) { text "$" }
+
+class InputComponent < Component
+  attribute :icon,          :string,  default: nil
+  attribute :icon_position, :string,  default: "right"
+  attribute :labeled,       :boolean, default: false
+  attribute :action,        :boolean, default: false
+  attribute :transparent,   :boolean, default: false
+  attribute :fluid,         :boolean, default: false
+  attribute :size,          :string,  default: nil
+  attribute :loading,       :boolean, default: false
+  attribute :disabled,      :boolean, default: false
+  attribute :error,         :boolean, default: false
+  attribute :inverted,      :boolean, default: false
+  attribute :placeholder,   :string,  default: nil
+  attribute :input_type,    :string,  default: "text"
+  attribute :name,          :string,  default: nil
+  attribute :value,         :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      { "left icon" => icon && icon_position == "left",
+        "icon" => icon && icon_position != "left",
+        "labeled" => labeled, "action" => action, "transparent" => transparent,
+        "fluid" => fluid, "loading" => loading, "disabled" => disabled,
+        "error" => error, "inverted" => inverted },
+      "input"
+    )
+
+    input_opts = { type: input_type }
+    input_opts[:placeholder] = placeholder if placeholder
+    input_opts[:name] = name if name
+    input_opts[:value] = value if value
+    input_opts[:disabled] = "disabled" if disabled
+
+    icon_el = icon ? tag.i(class: "#{icon} icon") : nil
+    input_el = tag.input(**input_opts)
+
+    tag.div(class: classes) {
+      safe_join([ @content, input_el, icon_el ])
+    }
+  end
+end

data/app/components/item_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# Item — individual content item within an ItemGroup.
+#
+# Usage:
+#   ItemGroup(divided: true) {
+#     Item { |c|
+#       c.image { Image(src: "product.jpg", size: "small") }
+#       c.header { text "Product Name" }
+#       c.meta { text "$19.99" }
+#       c.description { text "A great product." }
+#       c.extra { text "In stock" }
+#     }
+#   }
+
+class ItemComponent < Component
+  slot :image
+  slot :header
+  slot :meta
+  slot :description
+  slot :extra
+
+  def to_s
+    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),
+      (@slots[:extra] ? tag.div(class: "extra") { @slots[:extra] } : nil)
+    ].compact
+
+    content_el = content_parts.any? ? tag.div(class: "content") { safe_join(content_parts) } : nil
+
+    tag.div(class: "item") {
+      safe_join([ image_el, content_el, @content.presence ])
+    }
+  end
+end

data/app/components/item_group_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+# ItemGroup — container for grouped content items.
+#
+# Usage:
+#   ItemGroup(divided: true, relaxed: true) {
+#     Item { |c|
+#       c.image { Image(src: "photo.jpg", size: "small") }
+#       c.header { text "Title" }
+#       c.description { text "Description" }
+#     }
+#   }
+
+class ItemGroupComponent < Component
+  attribute :divided,     :boolean, default: false
+  attribute :relaxed,     :boolean, default: false
+  attribute :link,        :boolean, default: false
+  attribute :unstackable, :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      { "divided" => divided, "relaxed" => relaxed,
+        "link" => link, "unstackable" => unstackable },
+      "items"
+    )
+
+    tag.div(class: classes) { @content }
+  end
+end

data/app/components/label_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+# Label — labels and tags.
+#
+# Usage:
+#   Label(color: :blue) { text "New" }
+#   Label(tag_style: true, color: :teal) { text "Featured" }
+#   Label(ribbon: true, color: :red) { text "Sale" }
+#   Label(icon: "mail", detail: "23") { text "Mail" }
+
+class LabelComponent < Component
+  include Attachable
+
+  attribute :color,    :string,  default: nil
+  attribute :size,     :string,  default: nil
+  attribute :pointing, :string,  default: nil
+  attribute :corner,   :string,  default: nil
+  attribute :ribbon,   :boolean, default: false
+  attribute :circular, :boolean, default: false
+  attribute :floating, :boolean, default: false
+  attribute :tag_style, :boolean, default: false
+  attribute :detail,   :string,  default: nil
+  attribute :icon,     :string,  default: nil
+  attribute :image,    :boolean, default: false
+  attribute :basic,    :boolean, default: false
+  attribute :horizontal, :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      color,
+      size,
+      pointing && "#{pointing} pointing",
+      corner && "#{corner} corner",
+      { "attached" => attached,
+        "ribbon" => ribbon, "circular" => circular, "floating" => floating,
+        "tag" => tag_style, "image" => image, "basic" => basic,
+        "horizontal" => horizontal },
+      "label"
+    )
+
+    icon_el = icon ? tag.i(class: "#{icon} icon") : nil
+    detail_el = detail ? tag.div(class: "detail") { detail } : nil
+
+    tag.div(class: classes) {
+      safe_join([ icon_el, @content, detail_el ])
+    }
+  end
+end

data/app/components/link_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# Link — anchor element.
+#
+# Usage:
+#   Link(href: "/about") { text "About Us" }
+#   Link(href: "/help", target: "_blank") { text "Help" }
+
+class LinkComponent < Component
+  attribute :href,     :string,  default: "#"
+  attribute :target,   :string,  default: nil
+  attribute :rel,      :string,  default: nil
+  attribute :css_class, :string, default: nil
+
+  def to_s
+    opts = { href: href }
+    opts[:class] = css_class if css_class
+    opts[:target] = target if target
+    opts[:rel] = rel if rel
+
+    tag.a(**opts) { @content }
+  end
+end