ruby_ui 1.0.2 → 1.2.0

data/lib/ruby_ui/data_table/data_table_sort_head.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+require "cgi"
+
+module RubyUI
+  class DataTableSortHead < Base
+    def initialize(column_key:, label:, sort: nil, direction: nil, sort_param: "sort", direction_param: "direction", page_param: "page", path: "", query: {}, **attrs)
+      @column_key = column_key
+      @label = label
+      @sort = sort
+      @direction = direction
+      @sort_param = sort_param
+      @direction_param = direction_param
+      @page_param = page_param
+      @path = path
+      @query = query.to_h.transform_keys(&:to_s)
+      super(**attrs)
+    end
+
+    def view_template
+      render RubyUI::TableHead.new(class: "text-foreground whitespace-nowrap", **attrs) do
+        a(href: sort_href, class: "inline-flex items-center gap-1 text-inherit no-underline hover:text-foreground transition-colors") do
+          plain @label
+          sort_icon
+        end
+      end
+    end
+
+    private
+
+    def current_direction
+      (@sort.to_s == @column_key.to_s) ? @direction : nil
+    end
+
+    def next_params
+      next_dir = {nil => "asc", "asc" => "desc", "desc" => nil}[current_direction]
+      base = @query.except(@sort_param, @direction_param, @page_param)
+      next_dir ? base.merge(@sort_param => @column_key.to_s, @direction_param => next_dir) : base
+    end
+
+    def sort_href
+      qs = build_query(next_params)
+      qs.empty? ? @path : "#{@path}?#{qs}"
+    end
+
+    def build_query(hash)
+      hash.flat_map { |k, v|
+        Array(v).map { |val| "#{CGI.escape(k.to_s)}=#{CGI.escape(val.to_s)}" }
+      }.join("&")
+    end
+
+    def sort_icon
+      icon_name = case current_direction
+      when "asc" then :chevron_up
+      when "desc" then :chevron_down
+      else :chevrons_up_down
+      end
+      icon_class = current_direction ? "inline-block w-3 h-3" : "inline-block w-3 h-3 opacity-30"
+      render_sort_svg(icon_name, icon_class)
+    end
+
+    def render_sort_svg(icon_name, icon_class)
+      case icon_name
+      when :chevron_up
+        # chevron-up: polyline pointing up
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: icon_class
+        ) { |s| s.polyline(points: "18 15 12 9 6 15") }
+      when :chevron_down
+        # chevron-down: polyline pointing down
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: icon_class
+        ) { |s| s.polyline(points: "6 9 12 15 18 9") }
+      else
+        # chevrons-up-down
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: icon_class
+        ) do |s|
+          s.polyline(points: "8 15 12 19 16 15")
+          s.polyline(points: "8 9 12 5 16 9")
+        end
+      end
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_toolbar.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableToolbar < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {class: "flex items-center justify-between gap-2"}
+    end
+  end
+end

data/lib/ruby_ui/dialog/dialog_docs.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+class Views::Docs::Dialog < Views::Base
+  def view_template
+    component = "Dialog"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Dialog", description: "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Dialog do
+            DialogTrigger do
+              Button { "Open Dialog" }
+            end
+            DialogContent do
+              DialogHeader do
+                DialogTitle { "RubyUI to the rescue" }
+                DialogDescription { "RubyUI helps you build accessible standard compliant web apps with ease" }
+              end
+              DialogMiddle do
+                AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
+                  img(
+                    alt: "Placeholder",
+                    loading: "lazy",
+                    src: image_path("pattern.jpg")
+                  )
+                end
+              end
+              DialogFooter do
+                Button(variant: :outline, data: { action: 'click->ruby-ui--dialog#dismiss' }) { "Cancel" }
+                Button { "Save" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Size", description: "Applicable for wider screens", context: self) do
+        <<~RUBY
+          div(class: 'flex flex-wrap justify-center gap-2') do
+            Dialog do
+              DialogTrigger do
+                Button { "Small Dialog" }
+              end
+              DialogContent(size: :sm) do
+                DialogHeader do
+                  DialogTitle { "RubyUI to the rescue" }
+                  DialogDescription { "RubyUI helps you build accessible standard compliant web apps with ease" }
+                end
+                DialogMiddle do
+                  AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
+                    img(
+                      alt: "Placeholder",
+                      loading: "lazy",
+                      src: image_path("pattern.jpg")
+                    )
+                  end
+                end
+                DialogFooter do
+                  Button(variant: :outline, data: { action: 'click->ruby-ui--dialog#dismiss' }) { "Cancel" }
+                  Button { "Save" }
+                end
+              end
+            end
+
+            Dialog do
+              DialogTrigger do
+                Button { "Large Dialog" }
+              end
+              DialogContent(size: :lg) do
+                DialogHeader do
+                  DialogTitle { "RubyUI to the rescue" }
+                  DialogDescription { "RubyUI helps you build accessible standard compliant web apps with ease" }
+                end
+                DialogMiddle do
+                  AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
+                    img(
+                      alt: "Placeholder",
+                      loading: "lazy",
+                      src: image_path("pattern.jpg")
+                    )
+                  end
+                end
+                DialogFooter do
+                  Button(variant: :outline, data: { action: 'click->ruby-ui--dialog#dismiss' }) { "Cancel" }
+                  Button { "Save" }
+                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/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