ruby_ui 1.0.0.pre.alpha.4

data/lib/rbui/calendar/calendar_prev.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CalendarPrev < Base
+    def view_template(&block)
+      button(**attrs) do
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      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:
+                "M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z",
+          fill: "currentColor",
+          fill_rule: "evenodd",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        name: "previous-month",
+        aria_label: "Go to previous month",
+        class:
+              "rdp-button_reset rdp-button inline-flex items-center justify-center rounded-md text-sm font-medium 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 hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1",
+        type: "button",
+        data_action: "click->rbui--calendar#prevMonth"
+      }
+    end
+  end
+end

data/lib/rbui/calendar/calendar_title.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CalendarTitle < Base
+    def initialize(default: "Month Year", **attrs)
+      @default = default
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) { @default }
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm font-medium",
+        aria_live: "polite",
+        role: "presentation",
+        data: {
+          rbui__calendar_target: "title"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/calendar/calendar_weekdays.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CalendarWeekdays < Base
+    DAYS = %w[Monday Tuesday Wednesday Thursday Friday Saturday Sunday].freeze
+
+    def view_template
+      template_tag(data: {rbui__calendar_target: "weekdaysTemplate"}) do
+        thead(**attrs) do
+          tr(class: "flex") do
+            DAYS.each do |day|
+              render_day(day)
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def render_day(day)
+      th(
+        scope: "col",
+        class: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        aria_label: day
+      ) { day[0..1] }
+    end
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/rbui/card/card.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Card < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "rounded-xl border bg-background shadow"
+      }
+    end
+  end
+end

data/lib/rbui/card/card_content.rb

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

data/lib/rbui/card/card_description.rb

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

data/lib/rbui/card/card_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CardFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "items-center p-6 pt-0"
+      }
+    end
+  end
+end

data/lib/rbui/card/card_header.rb

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

data/lib/rbui/card/card_title.rb

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

data/lib/rbui/chart/chart.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Chart < Base
+    def initialize(options: {}, **attrs)
+      @options = options.to_json
+      super(**attrs)
+    end
+
+    def view_template(&)
+      canvas(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data_controller: "rbui--chart",
+        data_rbui__chart_options_value: @options
+      }
+    end
+  end
+end

data/lib/rbui/checkbox/checkbox.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Checkbox < Base
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "checkbox",
+        data: {
+          rbui__form_field_target: "input",
+          rbui__checkbox_group_target: "checkbox",
+          action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid change->rbui--checkbox-group#onChange"
+        },
+        class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary"
+      }
+    end
+  end
+end

data/lib/rbui/checkbox/checkbox_group.rb

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

data/lib/rbui/clipboard/clipboard.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Clipboard < Base
+    def initialize(options: {}, success: "Copied!", error: "Copy Failed!", **attrs)
+      @options = options
+      @success = success
+      @error = error
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        div(&block)
+        success_popover
+        error_popover
+      end
+    end
+
+    private
+
+    def success_popover
+      ClipboardPopover(type: :success) { @success }
+    end
+
+    def error_popover
+      ClipboardPopover(type: :error) { @error }
+    end
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--clipboard",
+          action: "click@window->rbui--clipboard#onClickOutside",
+          rbui__clipboard_success_value: @success,
+          rbui__clipboard_error_value: @error,
+          rbui__clipboard_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/rbui/clipboard/clipboard_popover.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ClipboardPopover < Base
+    def initialize(type:, **attrs)
+      @type = type
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        class: "hidden",
+        style: "width: max-content; position: absolute; top: 0; left: 0;",
+        data: {rbui__clipboard_target: clipboard_target}
+      ) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def clipboard_target
+      case @type
+      when :success
+        "successPopover"
+      when :error
+        "errorPopover"
+      end
+    end
+
+    def default_attrs
+      {
+        data: {
+          state: :open
+        },
+        class: "z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none 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"
+      }
+    end
+  end
+end

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