rails-active-ui 0.3.3 → 0.3.5

data/app/views/ui/examples/_views_components.html.ruby

@@ -0,0 +1,301 @@
+# ------------------------------------------------------------------
+# Ad
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Ad" }
+text "An advertisement placeholder with standard ad unit sizes."
+
+Segment {
+  Ad(unit: "banner", test: "Banner Ad")
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Ad(unit: "banner", test: "Banner Ad")'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Card
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Card" }
+text "A card displays content with image, header, description, and extra sections."
+
+Segment {
+  HStack(spacing: 16) {
+    Card { |c|
+      c.image {
+        Image(src: "https://fomantic-ui.com/images/avatar/large/elliot.jpg", fluid: true)
+      }
+      c.header { text "Elliot Fu" }
+      c.meta { text "Friend" }
+      c.description { text "Elliot is a sound engineer living in Nashville who enjoys playing guitar." }
+      c.extra {
+        Icon(name: "user")
+        text "22 Friends"
+      }
+    }
+
+    Card(raised: true, color: :blue) { |c|
+      c.header { text "Project Alpha" }
+      c.meta { text "Started Jan 2025" }
+      c.description { text "A revolutionary new approach to distributed computing." }
+      c.extra {
+        HStack(spacing: 8) {
+          Label(color: :blue, size: :mini) { text "Active" }
+          Label(basic: true, size: :mini) { text "v2.1" }
+        }
+      }
+    }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Card { |c|
+  c.image {
+    Image(src: "https://fomantic-ui.com/images/avatar/large/elliot.jpg", fluid: true)
+  }
+  c.header { text "Elliot Fu" }
+  c.meta { text "Friend" }
+  c.description { text "Elliot is a sound engineer living in Nashville." }
+  c.extra {
+    Icon(name: "user")
+    text "22 Friends"
+  }
+}
+
+Card(raised: true, color: :blue) { |c|
+  c.header { text "Project Alpha" }
+  c.meta { text "Started Jan 2025" }
+  c.description { text "A revolutionary new approach to distributed computing." }
+  c.extra {
+    Label(color: :blue, size: :mini) { text "Active" }
+  }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Comment
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Comment" }
+text "A comment displays user-generated content with avatar, author, and actions."
+
+Segment {
+  concat tag.div(class: "ui comments") {
+    capture {
+      Comment { |c|
+        c.avatar {
+          Image(src: "https://fomantic-ui.com/images/avatar/small/matt.jpg")
+        }
+        c.author { text "Matt" }
+        c.metadata { text "Today at 5:42PM" }
+        c.text_slot { text "How artistic!" }
+        c.actions {
+          concat tag.a(class: "reply", href: "#") { "Reply" }
+        }
+      }
+
+      Comment { |c|
+        c.avatar {
+          Image(src: "https://fomantic-ui.com/images/avatar/small/elliot.jpg")
+        }
+        c.author { text "Elliot Fu" }
+        c.metadata { text "Yesterday at 12:30AM" }
+        c.text_slot { text "This has been very useful for my research. Thanks!" }
+        c.actions {
+          concat tag.a(class: "reply", href: "#") { "Reply" }
+        }
+      }
+    }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Comment { |c|
+  c.avatar {
+    Image(src: "https://fomantic-ui.com/images/avatar/small/matt.jpg")
+  }
+  c.author { text "Matt" }
+  c.metadata { text "Today at 5:42PM" }
+  c.text_slot { text "How artistic!" }
+  c.actions {
+    concat tag.a(class: "reply", href: "#") { "Reply" }
+  }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Feed
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Feed" }
+text "A feed displays a timeline of user activity events."
+
+Segment {
+  Feed(size: :large) {
+    concat tag.div(class: "event") {
+      safe_join([
+        tag.div(class: "label") {
+          tag.img(src: "https://fomantic-ui.com/images/avatar/small/elliot.jpg")
+        },
+        tag.div(class: "content") {
+          safe_join([
+            tag.div(class: "summary") {
+              safe_join([
+                tag.a("Elliot Fu", href: "#"),
+                " added you as a friend",
+                tag.div(class: "date") { "1 Hour Ago" }
+              ])
+            }
+          ])
+        }
+      ])
+    }
+    concat tag.div(class: "event") {
+      safe_join([
+        tag.div(class: "label") {
+          tag.i(class: "pencil icon")
+        },
+        tag.div(class: "content") {
+          safe_join([
+            tag.div(class: "summary") { "You submitted a new post" },
+            tag.div(class: "extra text") { "My first blog post about components!" }
+          ])
+        }
+      ])
+    }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Feed(size: :large) {
+  concat tag.div(class: "event") {
+    safe_join([
+      tag.div(class: "label") {
+        tag.img(src: ".../avatar/small/elliot.jpg")
+      },
+      tag.div(class: "content") {
+        tag.div(class: "summary") {
+          safe_join([tag.a("Elliot Fu", href: "#"), " added you as a friend"])
+        }
+      }
+    ])
+  }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Item / ItemGroup
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Item / ItemGroup" }
+text "Items present related content with image, header, description, and metadata."
+
+Segment {
+  ItemGroup(divided: true, relaxed: true) {
+    Item { |c|
+      c.image {
+        Image(src: "https://fomantic-ui.com/images/wireframe/image.png", size: :tiny)
+      }
+      c.header { text "Project Report" }
+      c.meta { text "Last updated 3 days ago" }
+      c.description { text "A detailed quarterly report for the engineering team." }
+      c.extra {
+        Label(color: :green, size: :mini) { text "Published" }
+      }
+    }
+
+    Item { |c|
+      c.image {
+        Image(src: "https://fomantic-ui.com/images/wireframe/image.png", size: :tiny)
+      }
+      c.header { text "Design System" }
+      c.meta { text "Created 1 week ago" }
+      c.description { text "Component library documentation and usage guidelines." }
+      c.extra {
+        Label(color: :blue, size: :mini) { text "Draft" }
+      }
+    }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'ItemGroup(divided: true, relaxed: true) {
+  Item { |c|
+    c.image {
+      Image(src: ".../wireframe/image.png", size: :tiny)
+    }
+    c.header { text "Project Report" }
+    c.meta { text "Last updated 3 days ago" }
+    c.description { text "A detailed quarterly report." }
+    c.extra {
+      Label(color: :green, size: :mini) { text "Published" }
+    }
+  }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Statistic
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Statistic" }
+text "A statistic displays a value with a label."
+
+Segment {
+  HStack(spacing: 24) {
+    Statistic { |c|
+      c.value { text "5,550" }
+      c.label { text "Downloads" }
+    }
+
+    Statistic(color: :blue) { |c|
+      c.value {
+        Icon(name: "world")
+        text "22"
+      }
+      c.label { text "Countries" }
+    }
+
+    Statistic(horizontal: true, color: :green) { |c|
+      c.value { text "89%" }
+      c.label { text "Uptime" }
+    }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Statistic { |c|
+  c.value { text "5,550" }
+  c.label { text "Downloads" }
+}
+
+Statistic(color: :blue) { |c|
+  c.value {
+    Icon(name: "world")
+    text "22"
+  }
+  c.label { text "Countries" }
+}
+
+Statistic(horizontal: true, color: :green) { |c|
+  c.value { text "89%" }
+  c.label { text "Uptime" }
+}'
+  )}
+}

data/app/views/ui/examples/index.html.ruby

@@ -0,0 +1,61 @@
+Header(size: :h1, icon: "puzzle piece") { text "Component Examples" }
+
+text "A comprehensive showcase of every rails-active-ui component with live examples and code snippets."
+
+Divider(section: true)
+
+# Table of contents
+Segment(raised: true) {
+  Header(size: :h3, icon: "list") { text "Categories" }
+  List(bulleted: true, size: "large") {
+    concat tag.div(class: "item") { tag.a("Layout Primitives", href: "#layout-primitives") }
+    concat tag.div(class: "item") { tag.a("Globals", href: "#globals") }
+    concat tag.div(class: "item") { tag.a("Elements", href: "#elements") }
+    concat tag.div(class: "item") { tag.a("Collections", href: "#collections") }
+    concat tag.div(class: "item") { tag.a("Views", href: "#views") }
+    concat tag.div(class: "item") { tag.a("Modules", href: "#modules") }
+    concat tag.div(class: "item") { tag.a("Behaviors", href: "#behaviors") }
+  }
+}
+
+Divider(section: true)
+
+concat tag.div(id: "layout-primitives") { "" }
+Header(size: :h2, dividing: true, icon: "columns") { text "Layout Primitives" }
+output_buffer << render("ui/examples/layout_primitives")
+
+Divider(section: true)
+
+concat tag.div(id: "globals") { "" }
+Header(size: :h2, dividing: true, icon: "globe") { text "Globals" }
+output_buffer << render("ui/examples/globals")
+
+Divider(section: true)
+
+concat tag.div(id: "elements") { "" }
+Header(size: :h2, dividing: true, icon: "cube") { text "Elements" }
+output_buffer << render("ui/examples/elements")
+
+Divider(section: true)
+
+concat tag.div(id: "collections") { "" }
+Header(size: :h2, dividing: true, icon: "th") { text "Collections" }
+output_buffer << render("ui/examples/collections")
+
+Divider(section: true)
+
+concat tag.div(id: "views") { "" }
+Header(size: :h2, dividing: true, icon: "eye") { text "Views" }
+output_buffer << render("ui/examples/views_components")
+
+Divider(section: true)
+
+concat tag.div(id: "modules") { "" }
+Header(size: :h2, dividing: true, icon: "plug") { text "Modules" }
+output_buffer << render("ui/examples/modules_components")
+
+Divider(section: true)
+
+concat tag.div(id: "behaviors") { "" }
+Header(size: :h2, dividing: true, icon: "cogs") { text "Behaviors" }
+output_buffer << render("ui/examples/behaviors")

data/config/routes.rb

@@ -1,2 +1,3 @@
-Rails.application.routes.draw do
+Ui::Engine.routes.draw do
+  resources :examples, only: [:index]
 end

data/lib/ui/version.rb

@@ -1,3 +1,3 @@
 module Ui
-  VERSION = "0.3.3"
+  VERSION = "0.3.5"
 end

data/lib/ui/version.rb.erb

@@ -0,0 +1,3 @@
+module Ui
+  VERSION = "<%= version %>"
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-active-ui
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.3.5
 platform: ruby
 authors:
 - nathan
@@ -122,6 +122,7 @@ files:
 - app/components/v_stack_component.rb
 - app/components/visibility_component.rb
 - app/components/wrapper_component.rb
+- app/controllers/ui/examples_controller.rb
 - app/helpers/component_helper.rb
 - app/helpers/fui_helper.rb
 - app/javascript/accordion.js
@@ -209,6 +210,14 @@ files:
 - app/javascript/visibility.js
 - app/javascript/visibility.min.js
 - app/lib/component.rb
+- app/views/ui/examples/_behaviors.html.ruby
+- app/views/ui/examples/_collections.html.ruby
+- app/views/ui/examples/_elements.html.ruby
+- app/views/ui/examples/_globals.html.ruby
+- app/views/ui/examples/_layout_primitives.html.ruby
+- app/views/ui/examples/_modules_components.html.ruby
+- app/views/ui/examples/_views_components.html.ruby
+- app/views/ui/examples/index.html.ruby
 - config/importmap.rb
 - config/initializers/ruby_template_handler.rb
 - config/routes.rb
@@ -410,6 +419,7 @@ files:
 - lib/ui.rb
 - lib/ui/engine.rb
 - lib/ui/version.rb
+- lib/ui/version.rb.erb
 homepage: https://github.com/n-at-han-k/rails-active-ui
 licenses:
 - MIT