ruby_ui 1.0.2 → 1.1.0

data/lib/ruby_ui/progress/progress_docs.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class Views::Docs::Progress < Views::Base
+  def view_template
+    component = "Progress"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Progress", description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.")
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Progress(value: 50, class: "w-[60%]")
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With custom indicator color", context: self) do
+        <<~RUBY
+          Progress(value: 35, class: "w-[60%] [&>*]:bg-success")
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/radio_button/radio_button.rb

@@ -18,7 +18,7 @@ module RubyUI
         class: [
           "h-4 w-4 p-0 border-primary rounded-full flex-none",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          "checked:bg-primary checked:text-primary-foreground",
+          "checked:bg-primary checked:text-primary-foreground dark:checked:bg-secondary checked:text-primary checked:border-primary",
           "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
         ]
       }

data/lib/ruby_ui/radio_button/radio_button_docs.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class Views::Docs::RadioButton < Views::Base
+  def view_template
+    component = "RadioButton"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Radio Button", description: "A control that allows users to make a single selection from a list of options.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div(class: "flex items-center space-x-2") do
+            RadioButton(id: "default")
+            FormFieldLabel(for: "default") { "Default" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Checked", context: self) do
+        <<~RUBY
+          div(class: "flex items-center space-x-2") do
+            RadioButton(id: "checked", checked: true)
+            FormFieldLabel(for: "checked") { "Checked" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          div(class: "flex flex-row items-center gap-2") do
+            RadioButton(class: "peer",id: "disabled", disabled: true)
+            FormFieldLabel(for: "disabled") { "Disabled" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          div(class: "flex flex-row items-center gap-2") do
+            RadioButton(class: "peer", id: "aria-disabled", aria: {disabled: "true"})
+            FormFieldLabel(for: "aria-disabled") { "Aria Disabled" }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/select/select_docs.rb

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+class Views::Docs::Select < Views::Base
+  def view_template
+    component = "Select"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Select", description: "Displays a list of options for the user to pick from—triggered by a button.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Select (Deconstructed)", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+
+            SelectContent(outlet_id: "select-a-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: "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
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger(disabled: true) do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Data Disabled", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+
+            SelectContent(outlet_id: "select-a-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(data: {disabled: true}, value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(data: {disabled: true}, value: "watermelon") { "Watermelon" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled Trigger", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger(aria: {disabled: "true"}) do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled Item", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+
+            SelectContent(outlet_id: "select-a-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(aria: {disabled: "true"}, value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(aria: {disabled: "true"}, value: "watermelon") { "Watermelon" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/separator/separator_docs.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class Views::Docs::Separator < Views::Base
+  def view_template
+    component = "Separator"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Separator", description: "Visually or semantically separates content.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div do
+            div(class: "space-y-1") do
+              h4(class: "text-sm font-medium leading-none") { "RubyUI" }
+              p(class: "text-sm text-muted-foreground") { "An open-source UI component library." }
+            end
+            Separator(class: "my-4")
+            div(class: "flex h-5 items-center space-x-4 text-sm") do
+              div { "Blog" }
+              Separator(as: :hr, orientation: :vertical)
+              div { "Docs" }
+              Separator(orientation: :vertical)
+              div { "Source" }
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_content.rb

@@ -33,7 +33,7 @@ module RubyUI
       {
         data_state: "open", # For animate in
         class: [
-          "fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll",
           @side_classes
         ]
       }

data/lib/ruby_ui/sheet/sheet_docs.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+class Views::Docs::Sheet < Views::Base
+  def view_template
+    component = "Sheet"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Sheet", description: "Extends the Sheet component to display content that complements the main content of the screen.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Sheet do
+            SheetTrigger do
+              Button(variant: :outline) { "Open Sheet" }
+            end
+            SheetContent(class: 'sm:max-w-sm') do
+              SheetHeader do
+                SheetTitle { "Edit profile" }
+                SheetDescription { "Make changes to your profile here. Click save when you're done." }
+              end
+
+              SheetMiddle do
+                label { "Name" }
+                Input(placeholder: "Joel Drapper") { "Joel Drapper" }
+                label { "Email" }
+                Input(placeholder: "joel@drapper.me")
+              end
+              SheetFooter do
+                Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
+                Button(type: "submit") { "Save" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Side", description: "Use the side property to indicate the edge of the screen where the component will appear.", context: self) do
+        <<~RUBY
+          div(class: 'grid grid-cols-2 gap-4') do
+            # -- TOP --
+            Sheet do
+              SheetTrigger do
+                Button(variant: :outline, class: 'w-full justify-center') { :top }
+              end
+              SheetContent(side: :top, class: ("sm:max-w-sm" if [:left, :right].include?(:top))) do
+                SheetHeader do
+                  SheetTitle { "Edit profile" }
+                  SheetDescription { "Make changes to your profile here. Click save when you're done." }
+                end
+                Form do
+                  SheetMiddle do
+                    label { "Name" }
+                    Input(placeholder: "Joel Drapper") { "Joel Drapper" }
+
+                    label { "Email" }
+                    Input(placeholder: "joel@drapper.me")
+                  end
+                  SheetFooter do
+                    Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
+                    Button(type: "submit") { "Save" }
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/shortcut_key/shortcut_key_docs.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Views::Docs::ShortcutKey < Views::Base
+  def view_template
+    component = "ShortcutKey"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Shortcut Key", description: "A component for displaying keyboard shortcuts.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col items-center gap-y-4") do
+            ShortcutKey do
+              span(class: "text-xs") { "⌘" }
+              plain "K"
+            end
+            p(class: "text-muted-foreground text-sm text-center") { "Note this does not trigger anything, it is purely a visual prompt" }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_docs.rb

@@ -0,0 +1,176 @@
+# 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" }
+
+      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
+
+      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: "Dialog variant", context: self) do
+        <<~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
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      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
+
+  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

data/lib/ruby_ui/skeleton/skeleton_docs.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Views::Docs::Skeleton < Views::Base
+  def view_template
+    component = "Skeleton"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Skeleton", description: "Use to show a placeholder while content is loading.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div(class: "flex items-center space-x-4") do
+            Skeleton(class: "h-12 w-12 rounded-full")
+            div(class: "space-y-2") do
+              Skeleton(class: "h-4 w-[250px]")
+              Skeleton(class: "h-4 w-[200px]")
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/switch/switch_docs.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+class Views::Docs::Switch < Views::Base
+  def view_template
+    component = "Switch"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Switch", description: "A control that allows the user to toggle between checked and not checked.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          Switch(name: "switch")
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Checked", context: self) do
+        <<~RUBY
+          Switch(name: "switch", checked: true)
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          Switch(name: "switch", disabled: true)
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          Switch(name: "switch", aria: {disabled: "true"})
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With flag include_hidden false", context: self) do
+        <<~RUBY
+          # Supports the creation of a hidden input to be used in forms inspired by the Ruby on Rails implementation of check_box. Default is true.
+          Switch(name: "switch", include_hidden: false)
+        RUBY
+      end
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end