rbui 0.0.0 → 1.0.0.pre.alpha.2

data/lib/rbui/clipboard/clipboard_source.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ClipboardSource < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__clipboard_target: "source"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/clipboard/clipboard_trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ClipboardTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__clipboard_target: "trigger",
+          action: "click->rbui--clipboard#copy"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/codeblock/codeblock.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+require "rouge"
+
+module RBUI
+  class Codeblock < Base
+    FORMATTER = ::Rouge::Formatters::HTML.new
+    ROUGE_CSS = Rouge::Themes::Github.mode(:dark).render(scope: ".highlight") # See themes here: https://rouge-ruby.github.io/docs/Rouge/CSSTheme.html
+
+    def initialize(code, syntax:, clipboard: true, clipboard_success: "Copied!", clipboard_error: "Copy failed!", **attrs)
+      @code = code
+      @syntax = syntax.to_sym
+      @clipboard = clipboard
+      @clipboard_success = clipboard_success
+      @clipboard_error = clipboard_error
+
+      if @syntax == :ruby || @syntax == :html
+        @code = @code.gsub(/(?:^|\G) {2}/m, "	")
+      end
+
+      super(**attrs)
+    end
+
+    def view_template
+      style { ROUGE_CSS } # For faster load times, move this to the head of your document. (Also move ROUGE_CSS value to head of document)
+      if @clipboard
+        with_clipboard
+      else
+        codeblock
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"
+      }
+    end
+
+    def with_clipboard
+      RBUI.Clipboard(success: @clipboard_success, error: @clipboard_error, class: "relative") do
+        RBUI.ClipboardSource do
+          codeblock
+        end
+        div(class: "absolute top-2 right-2") do
+          RBUI.ClipboardTrigger do
+            RBUI.Button(variant: :ghost, size: :sm, icon: true, class: "text-white hover:text-white hover:bg-white/20") { clipboard_icon }
+          end
+        end
+      end
+    end
+
+    def codeblock
+      div(**attrs) do
+        div(class: "after:content-none") do
+          pre do
+            unsafe_raw FORMATTER.format(
+              lexer.lex(@code)
+            )
+          end
+        end
+      end
+    end
+
+    def lexer
+      Rouge::Lexer.find(@syntax)
+    end
+
+    def clipboard_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewbox: "0 0 24 24",
+        stroke_width: "1.5",
+        stroke: "currentColor",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          d:
+            "M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"
+        )
+      end
+    end
+
+    def check_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewbox: "0 0 24 24",
+        stroke_width: "1.5",
+        stroke: "currentColor",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        )
+      end
+    end
+  end
+end

data/lib/rbui/collapsible/collapsible.rb

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

data/lib/rbui/collapsible/collapsible_content.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CollapsibleContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {rbui__collapsible_target: "content"},
+        class: "overflow-y-hidden"
+      }
+    end
+  end
+end

data/lib/rbui/collapsible/collapsible_trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CollapsibleTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          action: "click->rbui--collapsible#toggle"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Combobox < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--combobox",
+          rbui__combobox_open_value: "false",
+          action: "click@window->rbui--combobox#onClickOutside",
+          rbui__combobox_rbui__combobox_content_outlet: ".combobox-content",
+          rbui__combobox_rbui__combobox_item_outlet: ".combobox-item"
+        },
+        class: "group/combobox w-full relative"
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_content.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxContent < Base
+    def initialize(**attrs)
+      @id = "content#{SecureRandom.hex(4)}"
+      super
+    end
+
+    def view_template(&)
+      div(**attrs) do
+        div(class: "min-w-max max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-out group-data-[rbui--combobox-open-value=true]/combobox:animate-in fade-out-0 group-data-[rbui--combobox-open-value=true]/combobox:fade-in-0 zoom-out-95 group-data-[rbui--combobox-open-value=true]/combobox:zoom-in-95 slide-in-from-top-2", &)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        id: @id,
+        role: "listbox",
+        data: {
+          controller: "rbui--combobox-content",
+          rbui__combobox_target: "content",
+          action: "keydown.enter->rbui--combobox#onKeyEnter keydown.esc->rbui--combobox#onEscKey keydown.down->rbui--combobox#onKeyDown keydown.up->rbui--combobox#onKeyUp"
+        },
+        class: "combobox-content hidden w-full absolute top-0 left-0 z-50"
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_empty.rb

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

data/lib/rbui/combobox/combobox_group.rb

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

data/lib/rbui/combobox/combobox_input.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxInput < Base
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden",
+        data: {
+          rbui__combobox_target: "input",
+          rbui__form_field_target: "input",
+          action: "change->rbui--form-field#onChange invalid->rbui--form-field#onInvalid"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_item.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxItem < Base
+    def initialize(value: nil, **attrs)
+      @value = value
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        div(class: "invisible group-aria-selected:visible") { icon }
+        block.call
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "mr-2 h-4 w-4",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(
+          d: "M20 6 9 17l-5-5"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        role: "option",
+        tabindex: "0",
+        class:
+          "combobox-item group 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-[current]:bg-accent aria-[current]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        data: {
+          value: @value,
+          rbui__combobox_target: "item",
+          rbui__combobox_content_target: "item",
+          controller: "rbui--combobox-item",
+          action: "click->rbui--combobox#onItemSelected"
+        },
+        aria_selected: "false"
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_list.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+module RBUI
+  class ComboboxList < Base
+    def initialize(**attrs)
+      @id = "list#{SecureRandom.hex(4)}"
+      super
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        id: @id,
+        data: {
+          rbui__combobox_target: "list"
+        },
+        role: "listbox",
+        tabindex: "-1"
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_search_input.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxSearchInput < Base
+    def initialize(placeholder:, **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 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "mr-2 h-4 w-4 shrink-0 opacity-50",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.circle(cx: "11", cy: "11", r: "8")
+        s.path(
+          d: "m21 21-4.3-4.3"
+        )
+      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--combobox#onSearchInput",
+          rbui__combobox_target: "search"
+        },
+        autocomplete: "off",
+        autocorrect: "off",
+        spellcheck: false
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_separator.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxSeparator < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {class: "-mx-1 h-px bg-border"}
+    end
+  end
+end

data/lib/rbui/combobox/combobox_trigger.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxTrigger < Base
+    def view_template(&block)
+      button(**attrs) do
+        block&.call
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "ml-2 h-4 w-4 shrink-0 opacity-50",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(
+          d: "m7 15 5 5 5-5"
+        )
+        s.path(
+          d: "m7 9 5-5 5 5"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        data: {
+          action: "rbui--combobox#onTriggerClick",
+          rbui__combobox_target: "trigger"
+        },
+        type: "button",
+        role: "combobox",
+        aria: {
+          expanded: "false",
+          haspopup: "listbox",
+          autocomplete: "none",
+          activedescendant: true
+        },
+        class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[200px] justify-between"
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_value.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxValue < Base
+    def initialize(placeholder: nil, **attrs)
+      @placeholder = placeholder
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      span(**attrs) do
+        block ? block.call : @placeholder
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__combobox_target: "value"
+        },
+        class: "pointer-events-none"
+      }
+    end
+  end
+end

data/lib/rbui/command/command.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Command < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+  end
+end

data/lib/rbui/command/command_dialog.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandDialog < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {controller: "rbui--command"}
+      }
+    end
+  end
+end

data/lib/rbui/command/command_dialog_content.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandDialogContent < 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(&block)
+      template_tag(data: {rbui__command_target: "content"}) do
+        div(data: {controller: "rbui--command"}) do
+          backdrop
+          div(**attrs, &block)
+        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 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 backdrop
+      div(
+        data_state: "open",
+        data_action: "click->rbui--command#dismiss esc->rbui--command#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