rbui 0.0.0 → 1.0.0.pre.alpha.2

data/lib/rbui/command/command_dialog_trigger.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandDialogTrigger < Base
+    DEFAULT_KEYBINDINGS = [
+      "keydown.ctrl+k@window",
+      "keydown.meta+k@window"
+    ].freeze
+
+    def initialize(keybindings: DEFAULT_KEYBINDINGS, **attrs)
+      @keybindings = keybindings.map { |kb| "#{kb}->rbui--command#open" }
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          action: tokens("click->rbui--command#open", @keybindings.join(" "))
+        }
+      }
+    end
+  end
+end

data/lib/rbui/command/command_empty.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandEmpty < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "py-6 text-center text-sm",
+        role: "presentation",
+        data: {rbui__command_target: "empty"}
+      }
+    end
+  end
+end

data/lib/rbui/command/command_group.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandGroup < Base
+    def initialize(title: nil, **attrs)
+      @title = title
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        render_header if @title
+        render_items(&block)
+      end
+    end
+
+    private
+
+    def render_header
+      div(group_heading: @title) do
+        @title
+      end
+    end
+
+    def render_items(&)
+      div(group_items: "", role: "group", &)
+    end
+
+    def default_attrs
+      {
+        class: "overflow-hidden p-1 text-foreground [&_[group-heading]]:px-2 [&_[group-heading]]:py-1.5 [&_[group-heading]]:text-xs [&_[group-heading]]:font-medium [&_[group-heading]]:text-muted-foreground",
+        role: "presentation",
+        data: {
+          value: @title,
+          rbui__command_target: "group"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/command/command_input.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandInput < Base
+    def initialize(placeholder: "Type a command or search...", **attrs)
+      @placeholder = placeholder
+      super(**attrs)
+    end
+
+    def view_template
+      input_container do
+        search_icon
+        input(**attrs)
+      end
+    end
+
+    private
+
+    def search_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        class: "w-4 h-4 mr-1.5"
+      ) do |s|
+        s.path(
+          fill_rule: "evenodd",
+          d:
+            "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def input_container(&)
+      div(class: "flex items-center border-b px-3", &)
+    end
+
+    def default_attrs
+      {
+        class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        placeholder: @placeholder,
+        data_action: "input->rbui--command#filter keydown.down->rbui--command#handleKeydown keydown.up->rbui--command#handleKeydown keydown.enter->rbui--command#handleKeydown keydown.esc->rbui--command#dismiss",
+        data_rbui__command_target: "input",
+        autocomplete: "off",
+        autocorrect: "off",
+        spellcheck: false,
+        autofocus: true,
+        aria_autocomplete: "list",
+        role: "combobox",
+        aria_expanded: true,
+        value: ""
+      }
+    end
+  end
+end

data/lib/rbui/command/command_item.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandItem < Base
+    def initialize(value:, text: "", href: "#", **attrs)
+      @value = value
+      @text = text
+      @href = href
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        href: @href,
+        role: "option",
+        data: {
+          rbui__command_target: "item",
+          value: @value,
+          text: @text
+        }
+        # aria_selected: "true", # Toggles aria-selected="true" on keydown
+      }
+    end
+  end
+end

data/lib/rbui/command/command_list.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandList < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "divide-y divide-border"
+      }
+    end
+  end
+end

data/lib/rbui/context_menu/context_menu.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ContextMenu < Base
+    def initialize(options: {}, **attrs)
+      @options = options
+      @options[:trigger] ||= "manual"
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--context-menu",
+          popover_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/rbui/context_menu/context_menu_content.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ContextMenuContent < Base
+    def view_template(&block)
+      template_tag(data: {rbui__context_menu_target: "content"}) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "menu",
+        aria_orientation: "vertical",
+        data_state: "open",
+        class:
+              "z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        tabindex: "-1",
+        data_orientation: "vertical"
+      }
+    end
+  end
+end

data/lib/rbui/context_menu/context_menu_item.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ContextMenuItem < Base
+    def initialize(href: "#", checked: false, shortcut: nil, disabled: false, **attrs)
+      @href = href
+      @checked = checked
+      @shortcut = shortcut
+      @disabled = disabled
+
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      a(**attrs) do
+        render_checkmark if @checked
+        yield
+        render_shortcut if @shortcut
+      end
+    end
+
+    private
+
+    def render_checkmark
+      span(class: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center") do
+        span(data_state: "checked") do
+          svg(
+            width: "15",
+            height: "15",
+            viewbox: "0 0 15 15",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            class: "h-4 w-4"
+          ) do |s|
+            s.path(
+              d:
+                    "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+              fill: "currentColor",
+              fill_rule: "evenodd",
+              clip_rule: "evenodd"
+            )
+          end
+        end
+      end
+    end
+
+    def render_shortcut
+      span(class: "ml-auto text-xs tracking-widest text-muted-foreground") { @shortcut }
+    end
+
+    def default_attrs
+      {
+        href: @href,
+        role: "menuitem",
+        class:
+              "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pl-8",
+        tabindex: "-1",
+        data_orientation: "vertical",
+        data_action: "click->rbui--context-menu#close",
+        data_rbui__context_menu_target: "menuItem",
+        data_disabled: @disabled,
+        disabled: @disabled
+      }
+    end
+  end
+end

data/lib/rbui/context_menu/context_menu_label.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ContextMenuLabel < Base
+    def initialize(inset: false, **attrs)
+      @inset = inset
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def inset? = @inset
+
+    def default_attrs
+      {
+        class: tokens("px-2 py-1.5 text-sm font-semibold text-foreground", inset?: "pl-8")
+      }
+    end
+  end
+end

data/lib/rbui/context_menu/context_menu_separator.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ContextMenuSeparator < Base
+    def view_template
+      div(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "separator",
+        aria_orientation: "horizontal",
+        class: "-mx-1 my-1 h-px bg-border"
+      }
+    end
+  end
+end

data/lib/rbui/context_menu/context_menu_trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ContextMenuTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__context_menu_target: "trigger",
+          action: "contextmenu->rbui--context-menu#handleContextMenu"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/dialog/dialog.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Dialog < Base
+    def initialize(open: false, **attrs)
+      @open = open
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--dialog",
+          rbui__dialog_open_value: @open
+        }
+      }
+    end
+  end
+end

data/lib/rbui/dialog/dialog_content.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DialogContent < Base
+    SIZES = {
+      xs: "max-w-sm",
+      sm: "max-w-md",
+      md: "max-w-lg",
+      lg: "max-w-2xl",
+      xl: "max-w-4xl",
+      full: "max-w-full"
+    }
+
+    def initialize(size: :md, **attrs)
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template
+      template_tag(data: {rbui__dialog_target: "content"}) do
+        div(data_controller: "rbui--dialog") do
+          backdrop
+          div(**attrs) do
+            yield
+            close_button
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data_state: "open",
+        class: tokens(
+          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+          SIZES[@size]
+        )
+      }
+    end
+
+    def close_button
+      button(
+        type: "button",
+        class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        data_action: "click->rbui--dialog#dismiss"
+      ) do
+        svg(
+          width: "15",
+          height: "15",
+          viewbox: "0 0 15 15",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          class: "h-4 w-4"
+        ) do |s|
+          s.path(
+            d:
+                  "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+            fill: "currentColor",
+            fill_rule: "evenodd",
+            clip_rule: "evenodd"
+          )
+        end
+        span(class: "sr-only") { "Close" }
+      end
+    end
+
+    def backdrop
+      div(
+        data_state: "open",
+        data_action: "click->rbui--dialog#dismiss esc->rbui--dialog#dismiss",
+        class:
+              "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      )
+    end
+  end
+end

data/lib/rbui/dialog/dialog_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DialogDescription < Base
+    def view_template(&)
+      p(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/rbui/dialog/dialog_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DialogFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0"
+      }
+    end
+  end
+end

data/lib/rbui/dialog/dialog_header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DialogHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col space-y-1.5 text-center sm:text-left"
+      }
+    end
+  end
+end

data/lib/rbui/dialog/dialog_middle.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DialogMiddle < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "py-4"
+      }
+    end
+  end
+end

data/lib/rbui/dialog/dialog_title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DialogTitle < Base
+    def view_template(&)
+      h3(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-lg font-semibold leading-none tracking-tight"
+      }
+    end
+  end
+end

data/lib/rbui/dialog/dialog_trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DialogTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          action: "click->rbui--dialog#open"
+        },
+        class: "inline-block"
+      }
+    end
+  end
+end

data/lib/rbui/dropdown_menu/dropdown_menu.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DropdownMenu < Base
+    def initialize(options: {}, **attrs)
+      @options = options
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--dropdown-menu",
+          action: "click@window->rbui--dropdown-menu#onClickOutside",
+          rbui__dropdown_menu_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/rbui/dropdown_menu/dropdown_menu_content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DropdownMenuContent < Base
+    def view_template(&block)
+      div(data: {rbui__dropdown_menu_target: "content"}, class: "hidden", style: "width: max-content; position: absolute; top: 0; left: 0;") do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          state: :open
+        },
+        class: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-56"
+      }
+    end
+  end
+end

data/lib/rbui/dropdown_menu/dropdown_menu_item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RBUI
+  class DropdownMenuItem < Base
+    def initialize(href: "#", **attrs)
+      @href = href
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        href: @href,
+        role: "menuitem",
+        class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        data_action: "click->rbui--dropdown-menu#close",
+        data_rbui__dropdown_menu_target: "menuItem",
+        tabindex: "-1",
+        data_orientation: "vertical"
+      }
+    end
+  end
+end