Merge branch 'main' into dependabot/bundler/standard-1.51.1

Author: djalmaaraujo

Gemfile

@@ -8,9 +8,9 @@ gem "rails", "8.0.2.1"
 # The modern asset pipeline for Rails [https://github.com/rails/propshaft]
 gem "propshaft", "1.2.1"
 # Use sqlite3 as the database for Active Record
-gem "sqlite3", "2.7.3"
+gem "sqlite3", "2.7.4"
 # Use the Puma web server [https://github.com/puma/puma]
-gem "puma", "7.0.1"
+gem "puma", "7.1.0"
 # Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
 gem "jsbundling-rails", "1.3.1"
 # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]

Gemfile.lock

@@ -100,7 +100,7 @@ GEM
     benchmark (0.4.1)
     bigdecimal (3.2.2)
     bindex (0.8.1)
-    bootsnap (1.18.6)
+    bootsnap (1.19.0)
       msgpack (~> 1.2)
     builder (3.3.0)
     capybara (3.40.0)
@@ -138,7 +138,7 @@ GEM
       reline (>= 0.4.2)
     jsbundling-rails (1.3.1)
       railties (>= 6.0.0)
-    json (2.13.2)
+    json (2.15.1)
     language_server-protocol (3.17.0.5)
     lint_roller (1.1.0)
     logger (1.7.0)
@@ -181,7 +181,7 @@ GEM
     pp (0.6.2)
       prettyprint
     prettyprint (0.2.0)
-    prism (1.5.1)
+    prism (1.6.0)
     propshaft (1.2.1)
       actionpack (>= 7.0.0)
       activesupport (>= 7.0.0)
@@ -193,7 +193,7 @@ GEM
       date
       stringio
     public_suffix (6.0.1)
-    puma (7.0.1)
+    puma (7.1.0)
       nio4r (~> 2.0)
     racc (1.8.1)
     rack (3.2.0)
@@ -241,7 +241,7 @@ GEM
     regexp_parser (2.11.2)
     reline (0.6.2)
       io-console (~> 0.5)
-    rexml (3.4.1)
+    rexml (3.4.4)
     rouge (4.6.0)
     rubocop (1.80.2)
       json (~> 2.3)
@@ -262,19 +262,19 @@ GEM
       rubocop (>= 1.75.0, < 2.0)
       rubocop-ast (>= 1.38.0, < 2.0)
     ruby-progressbar (1.13.0)
-    rubyzip (3.0.1)
+    rubyzip (3.2.0)
     securerandom (0.4.1)
-    selenium-webdriver (4.35.0)
+    selenium-webdriver (4.37.0)
       base64 (~> 0.2)
       logger (~> 1.4)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 4.0)
       websocket (~> 1.0)
     sin_lru_redux (2.5.2)
-    sqlite3 (2.7.3)
+    sqlite3 (2.7.4)
       mini_portile2 (~> 2.8.0)
-    sqlite3 (2.7.3-x86_64-linux-gnu)
-    standard (1.51.1)
+    sqlite3 (2.7.4-x86_64-linux-gnu)
+    standard (1.50.0)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.0)
       rubocop (~> 1.80.2)
@@ -333,12 +333,12 @@ DEPENDENCIES
   phlex-rails!
   propshaft (= 1.2.1)
   pry (= 0.15.2)
-  puma (= 7.0.1)
+  puma (= 7.1.0)
   rails (= 8.0.2.1)
   rouge (~> 4.6)
   ruby_ui!
   selenium-webdriver
-  sqlite3 (= 2.7.3)
+  sqlite3 (= 2.7.4)
   standard
   stimulus-rails (= 1.3.4)
   tailwind_merge (~> 1.3.1)

app/components/docs/visual_code_example.rb

@@ -13,9 +13,10 @@ def self.reset_collected_code
         @@collected_code = []
       end
 
-      def initialize(title: nil, description: nil, context: nil)
+      def initialize(title: nil, description: nil, src: nil, context: nil)
         @title = title
         @description = description
+        @src = src
         @context = context
       end
 
@@ -43,7 +44,7 @@ def view_template(&)
       def render_header
         div do
           if @title
-            div(class: "flex items-center gap-x-2 mb-1") do
+            div do
               Components.Heading(level: 4) { @title.capitalize }
             end
           end
@@ -71,6 +72,20 @@ def render_tab_contents(&)
       end
 
       def render_preview_tab(&block)
+        return iframe_preview if @src
+
+        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
+          div(class: "absolute inset-0 hidden w-[1600px] bg-background md:block") do
+            iframe(src: @src, class: "size-full", data: {iframe_theme_target: "iframe"})
+          end
+        end
+      end
+
+      def raw_preview
         div(class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do
           div(class: "preview flex min-h-[350px] w-full justify-center p-10 items-center") do
             decoded_code = CGI.unescapeHTML(@display_code)

app/components/shared/head.rb

@@ -12,6 +12,12 @@ def view_template
           meta name: "turbo-refresh-method", content: "morph"
           meta name: "turbo-refresh-scroll", content: "preserve"
           meta name: "view-transition", content: "same-origin"
+
+          link rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png"
+          link rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png"
+          link rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png"
+          link rel: "manifest", href: "/site.webmanifest"
+
           csp_meta_tag
           csrf_meta_tags
           stylesheet_link_tag "https://api.fontshare.com/v2/css?f[]=general-sans@1&display=swap", data_turbo_track: "reload"

app/components/shared/menu.rb

@@ -99,6 +99,7 @@ def components
           {name: "Separator", path: docs_separator_path, badge: "New"},
           {name: "Sheet", path: docs_sheet_path},
           {name: "Shortcut Key", path: docs_shortcut_key_path},
+          {name: "Sidebar", path: docs_sidebar_path, badge: "New"},
           {name: "Skeleton", path: docs_skeleton_path, badge: "New"},
           {name: "Switch", path: docs_switch_path},
           {name: "Table", path: docs_table_path},

app/controllers/docs/sidebar_controller.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Docs::SidebarController < ApplicationController
+  layout -> { Views::Layouts::ExamplesLayout }
+
+  def example
+    sidebar_state = cookies.fetch(:sidebar_state, "true") == "true"
+
+    render Views::Docs::Sidebar::Example.new(sidebar_state:)
+  end
+
+  def inset_example
+    sidebar_state = cookies.fetch(:sidebar_state, "true") == "true"
+
+    render Views::Docs::Sidebar::InsetExample.new(sidebar_state:)
+  end
+end

app/controllers/docs_controller.rb

@@ -178,6 +178,10 @@ def shortcut_key
     render Views::Docs::ShortcutKey.new
   end
 
+  def sidebar
+    render Views::Docs::Sidebar.new
+  end
+
   def skeleton
     render Views::Docs::Skeleton.new
   end

app/javascript/controllers/iframe_theme_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["iframe"]
+
+  connect() {
+    this.setupThemeObserver()
+    this.setupIframeListeners()
+    this.syncAllIframes()
+  }
+
+  disconnect() {
+    this.observer?.disconnect()
+  }
+
+  iframeTargetConnected(iframe) {
+    this.setupIframeListener(iframe)
+    this.syncThemeToIframe(iframe)
+  }
+
+  setupThemeObserver() {
+    this.observer = new MutationObserver(() => this.syncAllIframes())
+    this.observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+  }
+
+  setupIframeListeners() {
+    this.iframeTargets.forEach(iframe => this.setupIframeListener(iframe))
+  }
+
+  setupIframeListener(iframe) {
+    if (!iframe.src) return
+
+    iframe.addEventListener('load', () => this.syncThemeToIframe(iframe))
+    
+    if (this.isIframeLoaded(iframe)) {
+      this.syncThemeToIframe(iframe)
+    }
+  }
+
+  syncAllIframes() {
+    this.iframeTargets.forEach(iframe => this.syncThemeToIframe(iframe))
+  }
+
+  syncThemeToIframe(iframe) {
+    if (!iframe.src) return
+
+    const iframeDoc = this.getIframeDocument(iframe)
+    if (!iframeDoc?.documentElement) return
+
+    iframeDoc.documentElement.classList.toggle('dark', this.isDarkMode)
+  }
+
+  getIframeDocument(iframe) {
+    try {
+      return iframe.contentDocument || iframe.contentWindow?.document
+    } catch (e) {
+      return null
+    }
+  }
+
+  isIframeLoaded(iframe) {
+    const doc = this.getIframeDocument(iframe)
+    return doc && doc.readyState === 'complete'
+  }
+
+  get isDarkMode() {
+    return document.documentElement.classList.contains('dark')
+  }
+}
+

app/javascript/controllers/index.js

@@ -82,5 +82,8 @@ application.register("ruby-ui--theme-toggle", RubyUi__ThemeToggleController)
 import RubyUi__TooltipController from "./ruby_ui/tooltip_controller"
 application.register("ruby-ui--tooltip", RubyUi__TooltipController)
 
+import IframeThemeController from "./iframe_theme_controller"
+application.register("iframe-theme", IframeThemeController)
+
 import SidebarMenuController from "./sidebar_menu_controller"
 application.register("sidebar-menu", SidebarMenuController)

app/views/docs/select.rb

@@ -31,6 +31,28 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Pre-selected Item", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "banana", id: "select-preselected-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-preselected-fruit") { "Banana" }
+            end
+
+            SelectContent(outlet_id: "select-preselected-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(value: "watermelon") { "Watermelon" }
+              end
+            end
+          end
+        RUBY
+      end
+
       render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
         <<~RUBY
           Select(class: "w-56") do