From 1ebb5b150b544ba47f6735de027d37c12e88d8d2 Mon Sep 17 00:00:00 2001 From: Lucas Sousa <30642647+lsouoliveira@users.noreply.github.com> Date: Tue, 9 Sep 2025 20:44:37 -0300 Subject: [PATCH 1/5] Update the visual code component to support iframes --- app/components/docs/visual_code_example.rb | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/app/components/docs/visual_code_example.rb b/app/components/docs/visual_code_example.rb index 7d559cfc..c9347051 100644 --- a/app/components/docs/visual_code_example.rb +++ b/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") do + div(class: "absolute inset-0 hidden w-[1600px] bg-background md:block") do + iframe(src: @src, class: "size-full") + 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) From ed2cf40eaea835c48dfbb04ddba0c4fc3944f747 Mon Sep 17 00:00:00 2001 From: Lucas Sousa <30642647+lsouoliveira@users.noreply.github.com> Date: Tue, 9 Sep 2025 20:44:37 -0300 Subject: [PATCH 2/5] Add the sidebar examples --- app/components/shared/menu.rb | 1 + app/controllers/docs/sidebar_controller.rb | 23 ++ app/controllers/docs_controller.rb | 4 + app/views/docs/sidebar.rb | 52 ++++ app/views/docs/sidebar/dialog_example.rb | 198 ++++++++++++++ app/views/docs/sidebar/example.rb | 286 +++++++++++++++++++++ app/views/docs/sidebar/inset_example.rb | 286 +++++++++++++++++++++ app/views/layouts/examples_layout.rb | 22 ++ config/routes.rb | 4 + 9 files changed, 876 insertions(+) create mode 100644 app/controllers/docs/sidebar_controller.rb create mode 100644 app/views/docs/sidebar.rb create mode 100644 app/views/docs/sidebar/dialog_example.rb create mode 100644 app/views/docs/sidebar/example.rb create mode 100644 app/views/docs/sidebar/inset_example.rb create mode 100644 app/views/layouts/examples_layout.rb diff --git a/app/components/shared/menu.rb b/app/components/shared/menu.rb index 3b49fe2f..3cb1150b 100644 --- a/app/components/shared/menu.rb +++ b/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}, diff --git a/app/controllers/docs/sidebar_controller.rb b/app/controllers/docs/sidebar_controller.rb new file mode 100644 index 00000000..c09c912f --- /dev/null +++ b/app/controllers/docs/sidebar_controller.rb @@ -0,0 +1,23 @@ +# 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 + + def dialog_example + sidebar_state = cookies.fetch(:sidebar_state, "true") == "true" + + render Views::Docs::Sidebar::DialogExample.new(sidebar_state:) + end +end diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index c670c4f8..92382c69 100644 --- a/app/controllers/docs_controller.rb +++ b/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 diff --git a/app/views/docs/sidebar.rb b/app/views/docs/sidebar.rb new file mode 100644 index 00000000..93d34f7e --- /dev/null +++ b/app/views/docs/sidebar.rb @@ -0,0 +1,52 @@ +# frozen_string_literal: true + +class Views::Docs::Sidebar < Views::Base + def view_template + component = "Sidebar" + + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "Sidebar", description: "A composable, themeable and customizable sidebar component.") + + Heading(level: 2) { "Usage" } + + render Docs::VisualCodeExample.new(title: "Example", src: "/docs/sidebar/example", context: self) do + Views::Docs::Sidebar::Example::CODE + end + + render Docs::VisualCodeExample.new(title: "Inset variant", src: "/docs/sidebar/inset", context: self) do + Views::Docs::Sidebar::InsetExample::CODE + end + + render div do + div do + Components.Heading(level: 4) { "Dialog variant" } + + Tabs(default_value: "preview") do + TabsList do + TabsTrigger(value: "preview") do + span { "Preview" } + end + TabsTrigger(value: "code") do + span { "Code" } + end + end + + TabsContent(value: "preview") do + Link(href: "/docs/sidebar/dialog", target: :_blank, variant: :primary) { "Open in another tab" } + end + + TabsContent(value: "code") do + 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 + Codeblock(Views::Docs::Sidebar::DialogExample::CODE, syntax: :ruby, class: "-m-px") + end + end + end + end + end + + render Components::ComponentSetup::Tabs.new(component_name: component) + + render Docs::ComponentsTable.new(component_files(component)) + end + end +end diff --git a/app/views/docs/sidebar/dialog_example.rb b/app/views/docs/sidebar/dialog_example.rb new file mode 100644 index 00000000..3b2aa21d --- /dev/null +++ b/app/views/docs/sidebar/dialog_example.rb @@ -0,0 +1,198 @@ +# frozen_string_literal: true + +class Views::Docs::Sidebar::DialogExample < Views::Base + def initialize(sidebar_state:) + @sidebar_state = sidebar_state + end + + CODE = <<~RUBY + Dialog(data: {action: "ruby-ui--dialog:connect->ruby-ui--dialog#open"}) do + DialogTrigger do + Button { "Open Dialog" } + end + DialogContent(class: "grid overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]") do + SidebarWrapper(class: "items-start") do + Sidebar(collapsible: :none, class: "hidden md:flex") do + SidebarContent do + SidebarGroup do + SidebarGroupContent do + SidebarMenu do + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + search_icon() + span { "Search" } + end + end + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#", active: true) do + home_icon() + span { "Home" } + end + end + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + inbox_icon() + span { "Inbox" } + end + end + end + end + end + end + end + main(class: "flex h-[480px] flex-1 flex-col overflow-hidden") do + end + end + end + end + RUBY + + def view_template + decoded_code = CGI.unescapeHTML(CODE) + instance_eval(decoded_code) + end + + private + + def nav_secondary + [ + {label: "Settings", icon: -> { settings_icon }}, + {label: "Help & Support", icon: -> { message_circle_question }} + ] + end + + def home_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-house" + ) do |s| + s.path(d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8") + s.path(d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z") + end + end + + def inbox_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-inbox" + ) do |s| + s.polyline(points: "22 12 16 12 14 15 10 15 8 12 2 12") + s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z") + end + end + + def calendar_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-calendar" + ) do |s| + s.path(d: "M8 2v4") + s.path(d: "M16 2v4") + s.rect(width: "18", height: "18", x: "3", y: "4", rx: "2") + s.path(d: "M3 10h18") + end + end + + def search_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-search" + ) do |s| + s.circle(cx: "11", cy: "11", r: "8") + s.path(d: "M21 21L16.7 16.7") + end + end + + def settings_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-settings" + ) do |s| + s.path(d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73 + l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z") + s.circle(cx: "12", cy: "12", r: "3") + end + end + + def plus_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-plus" + ) do |s| + s.path(d: "M5 12h14") + s.path(d: "M12 5v14") + end + end + + def gallery_vertical_end + svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", view_box: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "lucide lucide-gallery-vertical-end size-4") do |s| + s.path d: "M7 2h10" + s.path d: "M5 6h14" + s.rect width: "18", height: "12", x: "3", y: "10", rx: "2" + end + end + + def ellipsis_icon + svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-ellipsis-icon lucide-ellipsis") do |s| + s.circle cx: "12", cy: "12", r: "1" + s.circle cx: "19", cy: "12", r: "1" + s.circle cx: "5", cy: "12", r: "1" + end + end + + def message_circle_question + svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-message-circle-question-icon lucide-message-circle-question") do |s| + s.path d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" + s.path d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" + s.path d: "M12 17h.01" + end + end +end diff --git a/app/views/docs/sidebar/example.rb b/app/views/docs/sidebar/example.rb new file mode 100644 index 00000000..10927d2f --- /dev/null +++ b/app/views/docs/sidebar/example.rb @@ -0,0 +1,286 @@ +# frozen_string_literal: true + +class Views::Docs::Sidebar::Example < Views::Base + FAVORITES = [ + {name: "Project Management & Task Tracking", emoji: "📊"}, + {name: "Movies & TV Shows", emoji: "🎬"}, + {name: "Books & Articles", emoji: "📚"}, + {name: "Recipes & Meal Planning", emoji: "🍽️"}, + {name: "Travel & Places", emoji: "🌍"}, + {name: "Health & Fitness", emoji: "🏋️"} + ].freeze + + WORKSPACES = [ + {name: "Personal Life Management", emoji: "🏡"}, + {name: "Work & Projects", emoji: "💼"}, + {name: "Side Projects", emoji: "🚀"}, + {name: "Learning & Courses", emoji: "📚"}, + {name: "Writing & Blogging", emoji: "📝"}, + {name: "Design & Development", emoji: "🎨"} + ].freeze + + def initialize(sidebar_state:) + @sidebar_state = sidebar_state + end + + CODE = <<~RUBY + SidebarWrapper do + Sidebar(collapsible: :icon) do + SidebarHeader do + SidebarMenu do + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + search_icon() + span { "Search" } + end + end + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#", active: true) do + home_icon() + span { "Home" } + end + end + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + inbox_icon() + span { "Inbox" } + SidebarMenuBadge { 4 } + end + end + end + end + SidebarContent do + SidebarGroup do + SidebarGroupLabel { "Favorites" } + SidebarMenu do + FAVORITES.each do |item| + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + span { item[:emoji] } + span { item[:name] } + end + DropdownMenu() do + SidebarMenuAction( + data: { + ruby_ui__dropdown_menu_target: "trigger", + action: "click->ruby-ui--dropdown-menu#toggle" + } + ) do + ellipsis_icon() + span(class: "sr-only") { "More" } + end + DropdownMenuContent(class: "z-40") do + DropdownMenuItem(href: '#') { "Profile" } + DropdownMenuItem(href: '#') { "Billing" } + DropdownMenuItem(href: '#') { "Team" } + DropdownMenuItem(href: '#') { "Subscription" } + end + end + end + end + end + end + SidebarGroup do + SidebarGroupLabel { "Workspaces" } + SidebarMenu do + WORKSPACES.each do |item| + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + span { item[:emoji] } + span { item[:name] } + end + DropdownMenu() do + SidebarMenuAction( + data: { + ruby_ui__dropdown_menu_target: "trigger", + action: "click->ruby-ui--dropdown-menu#toggle" + } + ) do + ellipsis_icon() + span(class: "sr-only") { "More" } + end + DropdownMenuContent(class: "z-40") do + DropdownMenuItem(href: '#') { "Profile" } + DropdownMenuItem(href: '#') { "Billing" } + DropdownMenuItem(href: '#') { "Team" } + DropdownMenuItem(href: '#') { "Subscription" } + end + end + end + end + end + end + SidebarGroup(class: "mt-auto") do + SidebarGroupContent do + SidebarMenu do + nav_secondary.each do |item| + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + item[:icon].call + span { item[:label] } + end + end + end + end + end + end + end + SidebarRail() + end + SidebarInset do + header(class: "flex h-16 shrink-0 items-center gap-2 border-b px-4") do + SidebarTrigger(class: "-ml-1") + end + end + end + RUBY + + def view_template + decoded_code = CGI.unescapeHTML(CODE) + instance_eval(decoded_code) + end + + private + + def nav_secondary + [ + {label: "Settings", icon: -> { settings_icon }}, + {label: "Help & Support", icon: -> { message_circle_question }} + ] + end + + def home_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-house" + ) do |s| + s.path(d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8") + s.path(d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z") + end + end + + def inbox_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-inbox" + ) do |s| + s.polyline(points: "22 12 16 12 14 15 10 15 8 12 2 12") + s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z") + end + end + + def calendar_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-calendar" + ) do |s| + s.path(d: "M8 2v4") + s.path(d: "M16 2v4") + s.rect(width: "18", height: "18", x: "3", y: "4", rx: "2") + s.path(d: "M3 10h18") + end + end + + def search_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-search" + ) do |s| + s.circle(cx: "11", cy: "11", r: "8") + s.path(d: "M21 21L16.7 16.7") + end + end + + def settings_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-settings" + ) do |s| + s.path(d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73 + l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z") + s.circle(cx: "12", cy: "12", r: "3") + end + end + + def plus_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-plus" + ) do |s| + s.path(d: "M5 12h14") + s.path(d: "M12 5v14") + end + end + + def gallery_vertical_end + svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", view_box: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "lucide lucide-gallery-vertical-end size-4") do |s| + s.path d: "M7 2h10" + s.path d: "M5 6h14" + s.rect width: "18", height: "12", x: "3", y: "10", rx: "2" + end + end + + def ellipsis_icon + svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-ellipsis-icon lucide-ellipsis") do |s| + s.circle cx: "12", cy: "12", r: "1" + s.circle cx: "19", cy: "12", r: "1" + s.circle cx: "5", cy: "12", r: "1" + end + end + + def message_circle_question + svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-message-circle-question-icon lucide-message-circle-question") do |s| + s.path d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" + s.path d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" + s.path d: "M12 17h.01" + end + end +end diff --git a/app/views/docs/sidebar/inset_example.rb b/app/views/docs/sidebar/inset_example.rb new file mode 100644 index 00000000..4f0e91a0 --- /dev/null +++ b/app/views/docs/sidebar/inset_example.rb @@ -0,0 +1,286 @@ +# frozen_string_literal: true + +class Views::Docs::Sidebar::InsetExample < Views::Base + FAVORITES = [ + {name: "Project Management & Task Tracking", emoji: "📊"}, + {name: "Movies & TV Shows", emoji: "🎬"}, + {name: "Books & Articles", emoji: "📚"}, + {name: "Recipes & Meal Planning", emoji: "🍽️"}, + {name: "Travel & Places", emoji: "🌍"}, + {name: "Health & Fitness", emoji: "🏋️"} + ].freeze + + WORKSPACES = [ + {name: "Personal Life Management", emoji: "🏡"}, + {name: "Work & Projects", emoji: "💼"}, + {name: "Side Projects", emoji: "🚀"}, + {name: "Learning & Courses", emoji: "📚"}, + {name: "Writing & Blogging", emoji: "📝"}, + {name: "Design & Development", emoji: "🎨"} + ].freeze + + def initialize(sidebar_state:) + @sidebar_state = sidebar_state + end + + CODE = <<~RUBY + SidebarWrapper do + Sidebar(variant: :inset) do + SidebarHeader do + SidebarMenu do + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + search_icon() + span { "Search" } + end + end + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#", active: true) do + home_icon() + span { "Home" } + end + end + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + inbox_icon() + span { "Inbox" } + SidebarMenuBadge { 4 } + end + end + end + end + SidebarContent do + SidebarGroup do + SidebarGroupLabel { "Favorites" } + SidebarMenu do + FAVORITES.each do |item| + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + span { item[:emoji] } + span { item[:name] } + end + DropdownMenu() do + SidebarMenuAction( + data: { + ruby_ui__dropdown_menu_target: "trigger", + action: "click->ruby-ui--dropdown-menu#toggle" + } + ) do + ellipsis_icon() + span(class: "sr-only") { "More" } + end + DropdownMenuContent(class: "z-40") do + DropdownMenuItem(href: '#') { "Profile" } + DropdownMenuItem(href: '#') { "Billing" } + DropdownMenuItem(href: '#') { "Team" } + DropdownMenuItem(href: '#') { "Subscription" } + end + end + end + end + end + end + SidebarGroup do + SidebarGroupLabel { "Workspaces" } + SidebarMenu do + WORKSPACES.each do |item| + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + span { item[:emoji] } + span { item[:name] } + end + DropdownMenu() do + SidebarMenuAction( + data: { + ruby_ui__dropdown_menu_target: "trigger", + action: "click->ruby-ui--dropdown-menu#toggle" + } + ) do + ellipsis_icon() + span(class: "sr-only") { "More" } + end + DropdownMenuContent(class: "z-40") do + DropdownMenuItem(href: '#') { "Profile" } + DropdownMenuItem(href: '#') { "Billing" } + DropdownMenuItem(href: '#') { "Team" } + DropdownMenuItem(href: '#') { "Subscription" } + end + end + end + end + end + end + SidebarGroup(class: "mt-auto") do + SidebarGroupContent do + SidebarMenu do + nav_secondary.each do |item| + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + item[:icon].call + span { item[:label] } + end + end + end + end + end + end + end + SidebarRail() + end + SidebarInset do + header(class: "flex h-16 shrink-0 items-center gap-2 border-b px-4") do + SidebarTrigger(class: "-ml-1") + end + end + end + RUBY + + def view_template + decoded_code = CGI.unescapeHTML(CODE) + instance_eval(decoded_code) + end + + private + + def nav_secondary + [ + {label: "Settings", icon: -> { settings_icon }}, + {label: "Help & Support", icon: -> { message_circle_question }} + ] + end + + def home_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-house" + ) do |s| + s.path(d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8") + s.path(d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z") + end + end + + def inbox_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-inbox" + ) do |s| + s.polyline(points: "22 12 16 12 14 15 10 15 8 12 2 12") + s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z") + end + end + + def calendar_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-calendar" + ) do |s| + s.path(d: "M8 2v4") + s.path(d: "M16 2v4") + s.rect(width: "18", height: "18", x: "3", y: "4", rx: "2") + s.path(d: "M3 10h18") + end + end + + def search_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-search" + ) do |s| + s.circle(cx: "11", cy: "11", r: "8") + s.path(d: "M21 21L16.7 16.7") + end + end + + def settings_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-settings" + ) do |s| + s.path(d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73 + l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z") + s.circle(cx: "12", cy: "12", r: "3") + end + end + + def plus_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-plus" + ) do |s| + s.path(d: "M5 12h14") + s.path(d: "M12 5v14") + end + end + + def gallery_vertical_end + svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", view_box: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "lucide lucide-gallery-vertical-end size-4") do |s| + s.path d: "M7 2h10" + s.path d: "M5 6h14" + s.rect width: "18", height: "12", x: "3", y: "10", rx: "2" + end + end + + def ellipsis_icon + svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-ellipsis-icon lucide-ellipsis") do |s| + s.circle cx: "12", cy: "12", r: "1" + s.circle cx: "19", cy: "12", r: "1" + s.circle cx: "5", cy: "12", r: "1" + end + end + + def message_circle_question + svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-message-circle-question-icon lucide-message-circle-question") do |s| + s.path d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" + s.path d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" + s.path d: "M12 17h.01" + end + end +end diff --git a/app/views/layouts/examples_layout.rb b/app/views/layouts/examples_layout.rb new file mode 100644 index 00000000..e79a2dd9 --- /dev/null +++ b/app/views/layouts/examples_layout.rb @@ -0,0 +1,22 @@ +# frozen_string_literal: true + +module Views + module Layouts + class ExamplesLayout < Views::Base + include Phlex::Rails::Layout + + def view_template(&block) + doctype + + html do + render Shared::Head.new + + body do + block.call + render Shared::Flashes.new(notice: flash[:notice], alert: flash[:alert]) + end + end + end + end + end +end diff --git a/config/routes.rb b/config/routes.rb index ecfc518e..fea4d64c 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -50,6 +50,10 @@ get "separator", to: "docs#separator", as: :docs_separator 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 "sidebar/dialog", to: "docs/sidebar#dialog_example", as: :docs_sidebar_dialog get "skeleton", to: "docs#skeleton", as: :docs_skeleton get "switch", to: "docs#switch", as: :docs_switch get "table", to: "docs#table", as: :docs_table From db191472d597231e55ba35c9c97102c9364f9c9a Mon Sep 17 00:00:00 2001 From: Lucas Sousa <30642647+lsouoliveira@users.noreply.github.com> Date: Tue, 9 Sep 2025 20:44:37 -0300 Subject: [PATCH 3/5] Use the default visual code example for the dialog --- app/controllers/docs/sidebar_controller.rb | 6 - app/views/docs/sidebar.rb | 113 +++++++++--- app/views/docs/sidebar/dialog_example.rb | 198 --------------------- app/views/docs/sidebar/example.rb | 4 +- app/views/docs/sidebar/inset_example.rb | 4 +- config/routes.rb | 1 - 6 files changed, 96 insertions(+), 230 deletions(-) delete mode 100644 app/views/docs/sidebar/dialog_example.rb diff --git a/app/controllers/docs/sidebar_controller.rb b/app/controllers/docs/sidebar_controller.rb index c09c912f..d6ffc469 100644 --- a/app/controllers/docs/sidebar_controller.rb +++ b/app/controllers/docs/sidebar_controller.rb @@ -14,10 +14,4 @@ def inset_example render Views::Docs::Sidebar::InsetExample.new(sidebar_state:) end - - def dialog_example - sidebar_state = cookies.fetch(:sidebar_state, "true") == "true" - - render Views::Docs::Sidebar::DialogExample.new(sidebar_state:) - end end diff --git a/app/views/docs/sidebar.rb b/app/views/docs/sidebar.rb index 93d34f7e..d75438d9 100644 --- a/app/views/docs/sidebar.rb +++ b/app/views/docs/sidebar.rb @@ -17,31 +17,48 @@ def view_template Views::Docs::Sidebar::InsetExample::CODE end - render div do - div do - Components.Heading(level: 4) { "Dialog variant" } - - Tabs(default_value: "preview") do - TabsList do - TabsTrigger(value: "preview") do - span { "Preview" } - end - TabsTrigger(value: "code") do - span { "Code" } - end - end - - TabsContent(value: "preview") do - Link(href: "/docs/sidebar/dialog", target: :_blank, variant: :primary) { "Open in another tab" } + render Docs::VisualCodeExample.new(title: "Dialog variant", context: self) do + <<~RUBY + Dialog(data: {action: "ruby-ui--dialog:connect->ruby-ui--dialog#open"}) do + DialogTrigger do + Button { "Open Dialog" } end - - TabsContent(value: "code") do - 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 - Codeblock(Views::Docs::Sidebar::DialogExample::CODE, syntax: :ruby, class: "-m-px") + DialogContent(class: "grid overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]") do + SidebarWrapper(class: "items-start") do + Sidebar(collapsible: :none, class: "hidden md:flex") do + SidebarContent do + SidebarGroup do + SidebarGroupContent do + SidebarMenu do + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + search_icon() + span { "Search" } + end + end + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#", active: true) do + home_icon() + span { "Home" } + end + end + SidebarMenuItem do + SidebarMenuButton(as: :a, href: "#") do + inbox_icon() + span { "Inbox" } + end + end + end + end + end + end + end + main(class: "flex h-[480px] flex-1 flex-col overflow-hidden") do + end end end end - end + RUBY end render Components::ComponentSetup::Tabs.new(component_name: component) @@ -49,4 +66,58 @@ def view_template render Docs::ComponentsTable.new(component_files(component)) end end + + def search_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-search" + ) do |s| + s.circle(cx: "11", cy: "11", r: "8") + s.path(d: "M21 21L16.7 16.7") + end + end + + def home_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-house" + ) do |s| + s.path(d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8") + s.path(d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z") + end + end + + def inbox_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + width: "24", + height: "24", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-inbox" + ) do |s| + s.polyline(points: "22 12 16 12 14 15 10 15 8 12 2 12") + s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z") + end + end end diff --git a/app/views/docs/sidebar/dialog_example.rb b/app/views/docs/sidebar/dialog_example.rb deleted file mode 100644 index 3b2aa21d..00000000 --- a/app/views/docs/sidebar/dialog_example.rb +++ /dev/null @@ -1,198 +0,0 @@ -# frozen_string_literal: true - -class Views::Docs::Sidebar::DialogExample < Views::Base - def initialize(sidebar_state:) - @sidebar_state = sidebar_state - end - - CODE = <<~RUBY - Dialog(data: {action: "ruby-ui--dialog:connect->ruby-ui--dialog#open"}) do - DialogTrigger do - Button { "Open Dialog" } - end - DialogContent(class: "grid overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]") do - SidebarWrapper(class: "items-start") do - Sidebar(collapsible: :none, class: "hidden md:flex") do - SidebarContent do - SidebarGroup do - SidebarGroupContent do - SidebarMenu do - SidebarMenuItem do - SidebarMenuButton(as: :a, href: "#") do - search_icon() - span { "Search" } - end - end - SidebarMenuItem do - SidebarMenuButton(as: :a, href: "#", active: true) do - home_icon() - span { "Home" } - end - end - SidebarMenuItem do - SidebarMenuButton(as: :a, href: "#") do - inbox_icon() - span { "Inbox" } - end - end - end - end - end - end - end - main(class: "flex h-[480px] flex-1 flex-col overflow-hidden") do - end - end - end - end - RUBY - - def view_template - decoded_code = CGI.unescapeHTML(CODE) - instance_eval(decoded_code) - end - - private - - def nav_secondary - [ - {label: "Settings", icon: -> { settings_icon }}, - {label: "Help & Support", icon: -> { message_circle_question }} - ] - end - - def home_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewBox: "0 0 24 24", - fill: "none", - stroke: "currentColor", - stroke_width: "2", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "lucide lucide-house" - ) do |s| - s.path(d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8") - s.path(d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z") - end - end - - def inbox_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewBox: "0 0 24 24", - fill: "none", - stroke: "currentColor", - stroke_width: "2", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "lucide lucide-inbox" - ) do |s| - s.polyline(points: "22 12 16 12 14 15 10 15 8 12 2 12") - s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z") - end - end - - def calendar_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewBox: "0 0 24 24", - fill: "none", - stroke: "currentColor", - stroke_width: "2", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "lucide lucide-calendar" - ) do |s| - s.path(d: "M8 2v4") - s.path(d: "M16 2v4") - s.rect(width: "18", height: "18", x: "3", y: "4", rx: "2") - s.path(d: "M3 10h18") - end - end - - def search_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewBox: "0 0 24 24", - fill: "none", - stroke: "currentColor", - stroke_width: "2", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "lucide lucide-search" - ) do |s| - s.circle(cx: "11", cy: "11", r: "8") - s.path(d: "M21 21L16.7 16.7") - end - end - - def settings_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewBox: "0 0 24 24", - fill: "none", - stroke: "currentColor", - stroke_width: "2", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "lucide lucide-settings" - ) do |s| - s.path(d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73 - l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z") - s.circle(cx: "12", cy: "12", r: "3") - end - end - - def plus_icon - svg( - xmlns: "http://www.w3.org/2000/svg", - width: "24", - height: "24", - viewBox: "0 0 24 24", - fill: "none", - stroke: "currentColor", - stroke_width: "2", - stroke_linecap: "round", - stroke_linejoin: "round", - class: "lucide lucide-plus" - ) do |s| - s.path(d: "M5 12h14") - s.path(d: "M12 5v14") - end - end - - def gallery_vertical_end - svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", view_box: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "lucide lucide-gallery-vertical-end size-4") do |s| - s.path d: "M7 2h10" - s.path d: "M5 6h14" - s.rect width: "18", height: "12", x: "3", y: "10", rx: "2" - end - end - - def ellipsis_icon - svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-ellipsis-icon lucide-ellipsis") do |s| - s.circle cx: "12", cy: "12", r: "1" - s.circle cx: "19", cy: "12", r: "1" - s.circle cx: "5", cy: "12", r: "1" - end - end - - def message_circle_question - svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-message-circle-question-icon lucide-message-circle-question") do |s| - s.path d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" - s.path d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" - s.path d: "M12 17h.01" - end - end -end diff --git a/app/views/docs/sidebar/example.rb b/app/views/docs/sidebar/example.rb index 10927d2f..315c0cad 100644 --- a/app/views/docs/sidebar/example.rb +++ b/app/views/docs/sidebar/example.rb @@ -69,7 +69,7 @@ def initialize(sidebar_state:) ellipsis_icon() span(class: "sr-only") { "More" } end - DropdownMenuContent(class: "z-40") do + DropdownMenuContent do DropdownMenuItem(href: '#') { "Profile" } DropdownMenuItem(href: '#') { "Billing" } DropdownMenuItem(href: '#') { "Team" } @@ -99,7 +99,7 @@ def initialize(sidebar_state:) ellipsis_icon() span(class: "sr-only") { "More" } end - DropdownMenuContent(class: "z-40") do + DropdownMenuContent do DropdownMenuItem(href: '#') { "Profile" } DropdownMenuItem(href: '#') { "Billing" } DropdownMenuItem(href: '#') { "Team" } diff --git a/app/views/docs/sidebar/inset_example.rb b/app/views/docs/sidebar/inset_example.rb index 4f0e91a0..37470975 100644 --- a/app/views/docs/sidebar/inset_example.rb +++ b/app/views/docs/sidebar/inset_example.rb @@ -69,7 +69,7 @@ def initialize(sidebar_state:) ellipsis_icon() span(class: "sr-only") { "More" } end - DropdownMenuContent(class: "z-40") do + DropdownMenuContent do DropdownMenuItem(href: '#') { "Profile" } DropdownMenuItem(href: '#') { "Billing" } DropdownMenuItem(href: '#') { "Team" } @@ -99,7 +99,7 @@ def initialize(sidebar_state:) ellipsis_icon() span(class: "sr-only") { "More" } end - DropdownMenuContent(class: "z-40") do + DropdownMenuContent do DropdownMenuItem(href: '#') { "Profile" } DropdownMenuItem(href: '#') { "Billing" } DropdownMenuItem(href: '#') { "Team" } diff --git a/config/routes.rb b/config/routes.rb index fea4d64c..a6da0ff2 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -53,7 +53,6 @@ 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 "sidebar/dialog", to: "docs/sidebar#dialog_example", as: :docs_sidebar_dialog get "skeleton", to: "docs#skeleton", as: :docs_skeleton get "switch", to: "docs#switch", as: :docs_switch get "table", to: "docs#table", as: :docs_table From 1892c17259b78d2bd525298a2cc23bce1ea8bf9c Mon Sep 17 00:00:00 2001 From: Lucas Sousa <30642647+lsouoliveira@users.noreply.github.com> Date: Tue, 9 Sep 2025 20:44:37 -0300 Subject: [PATCH 4/5] Add a alert to list the sidebar requirements --- app/views/docs/sidebar.rb | 53 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/app/views/docs/sidebar.rb b/app/views/docs/sidebar.rb index d75438d9..165872fa 100644 --- a/app/views/docs/sidebar.rb +++ b/app/views/docs/sidebar.rb @@ -9,6 +9,26 @@ def view_template Heading(level: 2) { "Usage" } + Alert do + info_icon + AlertTitle { "Requirements" } + AlertDescription { "The sidebar component depends on the following components:" } + ul(class: "list-disc list-inside") do + li do + InlineLink(href: docs_sheet_path, target: "_blank", class: "inline-flex items-center gap-2") do + span { "Sheet" } + external_icon_link + end + end + li do + div(class: "inline-flex items-center gap-2") do + InlineLink(href: docs_separator_path, target: "_blank") { "Separator" } + external_icon_link + end + end + end + end + render Docs::VisualCodeExample.new(title: "Example", src: "/docs/sidebar/example", context: self) do Views::Docs::Sidebar::Example::CODE end @@ -120,4 +140,37 @@ def inbox_icon s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z") end end + + def external_icon_link + svg( + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + stroke_width: "2", + stroke_linecap: "round", + stroke_linejoin: "round", + class: "lucide lucide-external-link-icon lucide-external-link size-3" + ) do |s| + s.path(d: "M15 3h6v6") + s.path(d: "M10 14 21 3") + s.path(d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6") + end + end + + def info_icon + svg( + xmlns: "http://www.w3.org/2000/svg", + viewbox: "0 0 24 24", + fill: "currentColor", + class: "w-5 h-5" + ) do |s| + s.path( + fill_rule: "evenodd", + d: + "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z", + clip_rule: "evenodd" + ) + end + end end From e43c22d1792b33abdbdf10d5c8ffc68a26eebbc3 Mon Sep 17 00:00:00 2001 From: Lucas Sousa <30642647+lsouoliveira@users.noreply.github.com> Date: Tue, 9 Sep 2025 20:54:06 -0300 Subject: [PATCH 5/5] Change sidebar examples dropdown menu placement --- app/views/docs/sidebar/example.rb | 2 +- app/views/docs/sidebar/inset_example.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/docs/sidebar/example.rb b/app/views/docs/sidebar/example.rb index 315c0cad..ac5f2ec8 100644 --- a/app/views/docs/sidebar/example.rb +++ b/app/views/docs/sidebar/example.rb @@ -59,7 +59,7 @@ def initialize(sidebar_state:) span { item[:emoji] } span { item[:name] } end - DropdownMenu() do + DropdownMenu(options: { strategy: "fixed", placement: "right-start" }) do SidebarMenuAction( data: { ruby_ui__dropdown_menu_target: "trigger", diff --git a/app/views/docs/sidebar/inset_example.rb b/app/views/docs/sidebar/inset_example.rb index 37470975..08c9fbed 100644 --- a/app/views/docs/sidebar/inset_example.rb +++ b/app/views/docs/sidebar/inset_example.rb @@ -59,7 +59,7 @@ def initialize(sidebar_state:) span { item[:emoji] } span { item[:name] } end - DropdownMenu() do + DropdownMenu(options: { strategy: "fixed", placement: "right-start" }) do SidebarMenuAction( data: { ruby_ui__dropdown_menu_target: "trigger",