ruby_ui 1.0.2 → 1.1.0

data/lib/ruby_ui/docs/base.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Views
+  class Base < Phlex::HTML
+    def Heading(level:, &)
+      tag = :"h#{level}"
+      send(tag, &)
+    end
+
+    def component_files(component_name)
+      []
+    end
+
+    # Text helper for wrapping paragraphs
+    def Text(&)
+      p(&)
+    end
+
+    # InlineLink helper for documentation links
+    def InlineLink(href:, target: nil, class: nil, &)
+      a(href: href, target: target, class: binding.local_variable_get(:class), &)
+    end
+
+    # Alert component helpers
+    def Alert(&)
+      div(&)
+    end
+
+    def AlertTitle(&)
+      h4(&)
+    end
+
+    def AlertDescription(&)
+      p(&)
+    end
+
+    # Route helper stubs - return "#" as placeholder
+    def docs_sheet_path
+      "#"
+    end
+
+    def docs_separator_path
+      "#"
+    end
+
+    def docs_accordion_path
+      "#"
+    end
+
+    def docs_alert_path
+      "#"
+    end
+
+    def docs_alert_dialog_path
+      "#"
+    end
+
+    def docs_aspect_ratio_path
+      "#"
+    end
+
+    def docs_avatar_path
+      "#"
+    end
+
+    def docs_badge_path
+      "#"
+    end
+
+    def docs_installation_path
+      "#"
+    end
+
+    # InlineCode helper for typography examples
+    def InlineCode(&)
+      code(&)
+    end
+  end
+end
+
+# Module-level components stub
+module Components
+  def self.Heading(level:, &block)
+    # Stub for module-level Heading calls
+  end
+
+  def self.TypographyList(items:, numbered: false)
+    # Stub for TypographyList component
+  end
+end

data/lib/ruby_ui/docs/component_setup_tabs.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Components
+  module ComponentSetup
+    class Tabs < Phlex::HTML
+      def initialize(component_name:)
+        @component_name = component_name
+      end
+
+      def view_template
+        # Minimal stub - empty by default
+      end
+    end
+  end
+end

data/lib/ruby_ui/docs/components_table.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Docs
+  class ComponentsTable < Phlex::HTML
+    def initialize(files)
+      @files = files
+    end
+
+    def view_template
+      # Minimal stub - empty by default
+    end
+  end
+end

data/lib/ruby_ui/docs/header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Docs
+  class Header < Phlex::HTML
+    def initialize(title:, description: nil)
+      @title = title
+      @description = description
+    end
+
+    def view_template
+      div do
+        h1 { @title }
+        p { @description } if @description
+      end
+    end
+  end
+end

data/lib/ruby_ui/docs/sidebar_examples.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Stub constants for sidebar documentation examples
+# These are replaced with actual implementations in the web app
+
+module Views
+  module Docs
+    class Sidebar < Views::Base
+      class Example
+        CODE = <<~RUBY
+          # Sidebar example code placeholder
+        RUBY
+      end
+
+      class InsetExample
+        CODE = <<~RUBY
+          # Sidebar inset example code placeholder
+        RUBY
+      end
+    end
+  end
+end

data/lib/ruby_ui/docs/visual_code_example.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Docs
+  class VisualCodeExample < Phlex::HTML
+    def initialize(title:, context:, description: nil, src: nil)
+      @title = title
+      @context = context
+      @description = description
+      @src = src
+    end
+
+    def view_template(&block)
+      code = block.call
+      div do
+        h3 { @title }
+        p { @description } if @description
+        pre { code }
+        @context.instance_eval(code)
+      end
+    end
+  end
+end

data/lib/ruby_ui/dropdown_menu/dropdown_menu_docs.rb

@@ -0,0 +1,212 @@
+# frozen_string_literal: true
+
+class Views::Docs::DropdownMenu < Views::Base
+  def view_template
+    component = "DropdownMenu"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Dropdown Menu", description: "Displays a menu to the user — such as a set of actions or functions — triggered by a button.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          DropdownMenu do
+            DropdownMenuTrigger(class: 'w-full') do
+              Button(variant: :outline) { "Open" }
+            end
+            DropdownMenuContent do
+              DropdownMenuLabel { "My Account" }
+              DropdownMenuSeparator
+              DropdownMenuItem(href: '#') { "Profile" }
+              DropdownMenuItem(href: '#') { "Billing" }
+              DropdownMenuItem(href: '#') { "Team" }
+              DropdownMenuItem(href: '#') { "Subscription" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Placement", description: "If the DropdownMenu conflicts with edge, it will auto-adjust it's placement", context: self) do
+        <<~RUBY
+          div(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do
+            # -- TOP --
+            DropdownMenu(options: { placement: 'top' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'top-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top-start' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'top-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top-end' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            # -- BOTTOM --
+            DropdownMenu(options: { placement: 'bottom' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'bottom-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'bottom-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            # -- LEFT --
+            DropdownMenu(options: { placement: 'left' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'left-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left-start' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'left-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left-end' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            # -- RIGHT --
+            DropdownMenu(options: { placement: 'right' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'right-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right-start' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'right-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right-end' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              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/form/form_docs.rb

@@ -0,0 +1,178 @@
+# frozen_string_literal: true
+
+class Views::Docs::Form < Views::Base
+  def view_template
+    component = "Form"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Form", description: "Building forms with built-in client-side validations.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Default error" }
+              Input(placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" }
+              FormFieldHint()
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          FormField do
+            FormFieldLabel { "Disabled" }
+            Input(disabled: true, placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          FormField do
+            FormFieldLabel { "Aria Disabled" }
+            Input(aria: {disabled: "true"}, placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Custom error message", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Custom error message" }
+              Input(placeholder: "joel@drapper.me", required: true, data_value_missing: "Custom error message")
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Backend error", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Backend error" }
+              Input(placeholder: "Joel Drapper", required: true)
+              FormFieldError { "Error from backend" }
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Checkbox", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              Checkbox(required: true)
+                label(
+                  class:
+                    "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                ) { " Accept terms and conditions " }
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Select", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Select" }
+              Select do
+                SelectInput(required: true)
+                SelectTrigger do
+                  SelectValue(placeholder: "Select a fruit")
+                end
+                SelectContent() do
+                  SelectGroup do
+                    SelectLabel { "Fruits" }
+                    SelectItem(value: "apple") { "Apple" }
+                    SelectItem(value: "orange") { "Orange" }
+                    SelectItem(value: "banana") { "Banana" }
+                    SelectItem(value: "watermelon") { "Watermelon" }
+                  end
+                end
+              end
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Combobox", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Combobox" }
+
+              Combobox do
+                ComboboxTrigger placeholder: "Pick value"
+
+                ComboboxPopover do
+                  ComboboxSearchInput(placeholder: "Pick value or type anything")
+
+                  ComboboxList do
+                    ComboboxEmptyState { "No result" }
+
+                    ComboboxListGroup label: "Fruits" do
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "apple", required: true)
+                        span { "Apple" }
+                      end
+
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "banana", required: true)
+                        span { "Banana" }
+                      end
+                    end
+
+                    ComboboxListGroup label: "Vegetable" do
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "brocoli", required: true)
+                        span { "Broccoli" }
+                      end
+
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "carrot", required: true)
+                        span { "Carrot" }
+                      end
+                    end
+
+                    ComboboxListGroup label: "Others" do
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "chocolate", required: true)
+                        span { "Chocolate" }
+                      end
+
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "milk", required: true)
+                        span { "Milk" }
+                      end
+                    end
+                  end
+                end
+              end
+
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          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/form/form_field.rb

@@ -13,7 +13,7 @@ module RubyUI
         data: {
           controller: "ruby-ui--form-field"
         },
-        class: "space-y-2"
+        class: "flex flex-col gap-2"
       }
     end
   end

data/lib/ruby_ui/form/form_field_error.rb

@@ -13,7 +13,7 @@ module RubyUI
         data: {
           ruby_ui__form_field_target: "error"
         },
-        class: "text-sm font-medium text-destructive"
+        class: "empty:hidden text-sm font-medium text-destructive"
       }
     end
   end

data/lib/ruby_ui/form/form_field_hint.rb

@@ -9,7 +9,7 @@ module RubyUI
     private
 
     def default_attrs
-      {class: "text-sm text-muted-foreground"}
+      {class: "empty:hidden text-sm text-muted-foreground"}
     end
   end
 end

data/lib/ruby_ui/form/form_field_label.rb

@@ -11,7 +11,7 @@ module RubyUI
     def default_attrs
       {
         class: [
-          "text-sm font-medium leading-none",
+          "empty:hidden text-sm font-medium leading-none",
           "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
           "peer-aria-disabled:cursor-not-allowed peer-aria-disabled:opacity-70 peer-aria-disabled:pointer-events-none"
         ]