Add blocks

app/components/docs/visual_code_example.rb

@@ -13,14 +13,19 @@ def self.reset_collected_code
         @@collected_code = []
       end
 
-      def initialize(title: nil, description: nil, src: nil, context: nil)
+      def initialize(ruby_code: nil, title: nil, description: nil, src: nil, context: nil, type: :component, content: nil, content_attributes: nil)
+        @ruby_code = ruby_code
         @title = title
         @description = description
         @src = src
         @context = context
+        @type = type
+        @content = content
+        @content_attributes = content_attributes
       end
 
       def view_template(&)
+        # @display_code = @ruby_code || CGI.unescapeHTML(capture(&))
         @display_code = CGI.unescapeHTML(capture(&))
         @@collected_code << @display_code
 
@@ -55,7 +60,7 @@ def render_header
       def render_tab_triggers
         TabsList do
           render_tab_trigger("preview", "Preview", method(:eye_icon))
-          render_tab_trigger("code", "Code", method(:code_icon))
+          render_tab_trigger("code", "Code", method(:code_icon)) if @type == :component
         end
       end
 
@@ -72,15 +77,25 @@ def render_tab_contents(&)
       end
 
       def render_preview_tab(&block)
-        return iframe_preview if @src
+        block_class_name = @content.to_s
+
+        return iframe_preview(block_class_name) if @type == :block
 
         raw_preview
       end
 
-      def iframe_preview
-        div(class: "relative aspect-[4/2.5] w-full overflow-hidden rounded-md border", data: {controller: "iframe-theme"}) do
+      def iframe_preview(block_name)
+        div(class: "relative aspect-[4/2.5] w-full overflow-hidden rounded-md border") do
           div(class: "absolute inset-0 hidden w-[1600px] bg-background md:block") do
-            iframe(src: @src, class: "size-full", data: {iframe_theme_target: "iframe"})
+            if @content
+              iframe(src: render_block_path(id: block_name, attributes: @content_attributes), class: "size-full")
+            else
+              iframe(srcdoc: safe("<div>You cannot render a ruby block for a block preview</div>"), class: "size-full")
+              # TODO
+              # decoded_code = CGI.unescapeHTML(@display_code)
+              # html_content = render_block_to_html(decoded_code)
+              # iframe(srcdoc: safe(html_content), class: "size-full")
+            end
           end
         end
       end
@@ -100,6 +115,14 @@ def render_code_tab
         end
       end
 
+      def render_block_to_html(code)
+        # Extract the component from "render ComponentName.new" pattern
+        # and evaluate it to generate standalone HTML
+        component_code = code.strip.sub(/^render\s+/, '')
+        component = eval(component_code)
+        component.call
+      end
+
       def eye_icon
         svg(
           xmlns: "http://www.w3.org/2000/svg",

app/controllers/pages_controller.rb

@@ -6,4 +6,16 @@ class PagesController < ApplicationController
   def home
     render Views::Pages::Home.new
   end
+
+  def blocks
+    render Views::Pages::Blocks.new
+  end
+
+  def render_block
+    self.class.layout -> { Views::Layouts::ExamplesLayout }
+    block_class_name = params[:id]
+    attributes = params[:attributes]&.permit!&.to_h&.symbolize_keys || {}
+    block_class = block_class_name.constantize
+    render block_class.new(**attributes)
+  end
 end

app/views/docs/button.rb

@@ -45,11 +45,9 @@ def view_template
         RUBY
       end
 
-      render Docs::VisualCodeExample.new(title: "Link", context: self) do
-        <<~RUBY
-          Button(variant: :link) { "Link" }
-        RUBY
-      end
+      render Docs::VisualCodeExample.new(ruby_code: <<~RUBY, title: "Link", context: self)
+        Button(variant: :link) { "Link" }
+      RUBY
 
       render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
         <<~RUBY

app/views/docs/sidebar.rb

@@ -29,13 +29,21 @@ def view_template
         end
       end
 
-      render Docs::VisualCodeExample.new(title: "Example", src: "/docs/sidebar/example", context: self) do
-        Views::Docs::Sidebar::Example::CODE
-      end
+      render Docs::VisualCodeExample.new(
+        title: "Example",
+        context: self,
+        type: :block,
+        content: Views::Docs::Sidebar::Example,
+        content_attributes: {sidebar_state: "open"}
+      )
 
-      render Docs::VisualCodeExample.new(title: "Inset variant", src: "/docs/sidebar/inset", context: self) do
-        Views::Docs::Sidebar::InsetExample::CODE
-      end
+      render Docs::VisualCodeExample.new(
+        title: "Inset variant",
+        context: self,
+        type: :block,
+        content: Views::Docs::Sidebar::InsetExample,
+        content_attributes: {sidebar_state: "open"}
+      )
 
       render Docs::VisualCodeExample.new(title: "Dialog variant", context: self) do
         <<~RUBY

config/routes.rb

@@ -51,8 +51,6 @@
     get "sheet", to: "docs#sheet", as: :docs_sheet
     get "shortcut_key", to: "docs#shortcut_key", as: :docs_shortcut_key
     get "sidebar", to: "docs#sidebar", as: :docs_sidebar
-    get "sidebar/example", to: "docs/sidebar#example", as: :docs_sidebar_example
-    get "sidebar/inset", to: "docs/sidebar#inset_example", as: :docs_sidebar_inset
     get "skeleton", to: "docs#skeleton", as: :docs_skeleton
     get "switch", to: "docs#switch", as: :docs_switch
     get "table", to: "docs#table", as: :docs_table
@@ -63,6 +61,9 @@
     get "typography", to: "docs#typography", as: :docs_typography
   end
 
+  get "blocks", to: "pages#blocks", as: :blocks
+  get "blocks/:id", to: "pages#render_block", as: :render_block
+
   match "/404", to: "errors#not_found", via: :all
   match "/500", to: "errors#internal_server_error", via: :all