ruby_ui 1.0.0.beta1 → 1.0.0.pre.alpha.4

data/lib/{ruby_ui → rbui}/avatar/avatar_fallback.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class AvatarFallback < Base
     def view_template(&)
       span(**attrs, &)

data/lib/{ruby_ui → rbui}/avatar/avatar_image.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class AvatarImage < Base
     def initialize(src:, alt: "", **attrs)
       @src = src

data/lib/{ruby_ui → rbui}/badge/badge.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class Badge < Base
     SIZES = {
       sm: "px-1.5 py-0.5 text-xs",
@@ -53,7 +53,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: ["inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant]]
+        class: tokens("inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant])
       }
     end
   end

data/lib/{ruby_ui → rbui}/base.rb

@@ -2,7 +2,7 @@
 
 require "tailwind_merge"
 
-module RubyUI
+module RBUI
   class Base < Phlex::HTML
     TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
 
@@ -13,6 +13,13 @@ module RubyUI
       @attrs[:class] = TAILWIND_MERGER.merge(@attrs[:class]) if @attrs[:class]
     end
 
+    if defined?(Rails) && Rails.env.development?
+      def before_template
+        comment { "Before #{self.class.name}" }
+        super
+      end
+    end
+
     private
 
     def default_attrs

data/lib/{ruby_ui → rbui}/button/button.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class Button < Base
     def initialize(type: :button, variant: :primary, size: :md, icon: false, **attrs)
       @type = type
@@ -35,45 +35,45 @@ module RubyUI
     end
 
     def primary_classes
-      [
+      tokens(
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90",
         size_classes
-      ]
+      )
     end
 
     def link_classes
-      [
+      tokens(
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
         size_classes
-      ]
+      )
     end
 
     def secondary_classes
-      [
+      tokens(
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
         size_classes
-      ]
+      )
     end
 
     def destructive_classes
-      [
+      tokens(
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         size_classes
-      ]
+      )
     end
 
     def outline_classes
-      [
+      tokens(
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         size_classes
-      ]
+      )
     end
 
     def ghost_classes
-      [
+      tokens(
         "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
         size_classes
-      ]
+      )
     end
 
     def default_classes

data/lib/rbui/calendar/calendar.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Calendar < Base
+    def initialize(selected_date: nil, input_id: nil, date_format: "yyyy-MM-dd", **attrs)
+      @selected_date = selected_date
+      @input_id = input_id
+      @date_format = date_format
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        RBUI.CalendarHeader do
+          RBUI.CalendarTitle
+          RBUI.CalendarPrev
+          RBUI.CalendarNext
+        end
+        RBUI.CalendarBody # Where the calendar is rendered (Weekdays and Days)
+        RBUI.CalendarWeekdays # Template for the weekdays
+        RBUI.CalendarDays # Template for the days
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "p-3 space-y-4",
+        data: {
+          controller: "rbui--calendar",
+          rbui__calendar_selected_date_value: @selected_date&.to_s,
+          rbui__calendar_format_value: @date_format,
+          rbui__calendar_rbui__calendar_input_outlet: @input_id
+        }
+      }
+    end
+  end
+end

data/lib/{ruby_ui → rbui}/calendar/calendar_body.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CalendarBody < Base
     def view_template
       table(**attrs)
@@ -11,7 +11,7 @@ module RubyUI
     def default_attrs
       {
         data: {
-          ruby_ui__calendar_target: "calendar"
+          rbui__calendar_target: "calendar"
         }
       }
     end

data/lib/{ruby_ui → rbui}/calendar/calendar_days.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CalendarDays < Base
     BASE_CLASS = "inline-flex items-center justify-center 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 h-8 w-8 p-0 font-normal aria-selected:opacity-100"
 
@@ -17,13 +17,13 @@ module RubyUI
       date_template("selectedDateTemplate") do
         button(
           data_day: "{{day}}",
-          data_action: "click->ruby-ui--calendar#selectDay",
+          data_action: "click->rbui--calendar#selectDay",
           name: "day",
           class:
-                [
+                tokens(
                   BASE_CLASS,
                   "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
-                ],
+                ),
           role: "gridcell",
           tabindex: "0",
           type: "button",
@@ -36,13 +36,13 @@ module RubyUI
       date_template("todayDateTemplate") do
         button(
           data_day: "{{day}}",
-          data_action: "click->ruby-ui--calendar#selectDay",
+          data_action: "click->rbui--calendar#selectDay",
           name: "day",
           class:
-                [
+                tokens(
                   BASE_CLASS,
                   "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                ],
+                ),
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -54,13 +54,13 @@ module RubyUI
       date_template("currentMonthDateTemplate") do
         button(
           data_day: "{{day}}",
-          data_action: "click->ruby-ui--calendar#selectDay",
+          data_action: "click->rbui--calendar#selectDay",
           name: "day",
           class:
-                [
+                tokens(
                   BASE_CLASS,
                   "bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                ],
+                ),
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -72,13 +72,13 @@ module RubyUI
       date_template("otherMonthDateTemplate") do
         button(
           data_day: "{{day}}",
-          data_action: " click->ruby-ui--calendar#selectDay",
+          data_action: " click->rbui--calendar#selectDay",
           name: "day",
           class:
-                [
+                tokens(
                   BASE_CLASS,
                   "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                ],
+                ),
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -87,7 +87,7 @@ module RubyUI
     end
 
     def date_template(target, &block)
-      template(data: {ruby_ui__calendar_target: target}) do
+      template_tag(data: {rbui__calendar_target: target}) do
         td(
           class:
                 "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md",

data/lib/{ruby_ui → rbui}/calendar/calendar_header.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CalendarHeader < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{ruby_ui → rbui}/calendar/calendar_next.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CalendarNext < Base
     def view_template(&block)
       button(**attrs) do
@@ -36,7 +36,7 @@ module RubyUI
         class:
               "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 right-1",
         type: "button",
-        data_action: "click->ruby-ui--calendar#nextMonth"
+        data_action: "click->rbui--calendar#nextMonth"
       }
     end
   end

data/lib/{ruby_ui → rbui}/calendar/calendar_prev.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CalendarPrev < Base
     def view_template(&block)
       button(**attrs) do
@@ -36,7 +36,7 @@ module RubyUI
         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->ruby-ui--calendar#prevMonth"
+        data_action: "click->rbui--calendar#prevMonth"
       }
     end
   end

data/lib/{ruby_ui → rbui}/calendar/calendar_title.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CalendarTitle < Base
     def initialize(default: "Month Year", **attrs)
       @default = default
@@ -19,7 +19,7 @@ module RubyUI
         aria_live: "polite",
         role: "presentation",
         data: {
-          ruby_ui__calendar_target: "title"
+          rbui__calendar_target: "title"
         }
       }
     end

data/lib/{ruby_ui → rbui}/calendar/calendar_weekdays.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CalendarWeekdays < Base
     DAYS = %w[Monday Tuesday Wednesday Thursday Friday Saturday Sunday].freeze
 
     def view_template
-      template(data: {ruby_ui__calendar_target: "weekdaysTemplate"}) do
+      template_tag(data: {rbui__calendar_target: "weekdaysTemplate"}) do
         thead(**attrs) do
           tr(class: "flex") do
             DAYS.each do |day|

data/lib/{ruby_ui → rbui}/card/card.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class Card < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{ruby_ui → rbui}/card/card_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CardContent < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{ruby_ui → rbui}/card/card_description.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CardDescription < Base
     def view_template(&)
       p(**attrs, &)

data/lib/{ruby_ui → rbui}/card/card_footer.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CardFooter < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{ruby_ui → rbui}/card/card_header.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CardHeader < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{ruby_ui → rbui}/card/card_title.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CardTitle < Base
     def view_template(&)
       h3(**attrs, &)

data/lib/{ruby_ui → rbui}/chart/chart.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class Chart < Base
     def initialize(options: {}, **attrs)
       @options = options.to_json
@@ -15,8 +15,8 @@ module RubyUI
 
     def default_attrs
       {
-        data_controller: "ruby-ui--chart",
-        data_ruby_ui__chart_options_value: @options
+        data_controller: "rbui--chart",
+        data_rbui__chart_options_value: @options
       }
     end
   end

data/lib/{ruby_ui → rbui}/checkbox/checkbox.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class Checkbox < Base
     def view_template
       input(**attrs)
@@ -12,9 +12,9 @@ module RubyUI
       {
         type: "checkbox",
         data: {
-          ruby_ui__form_field_target: "input",
-          ruby_ui__checkbox_group_target: "checkbox",
-          action: "change->ruby-ui--checkbox-group#onChange change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
+          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"
       }

data/lib/{ruby_ui → rbui}/checkbox/checkbox_group.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CheckboxGroup < Base
     def view_template(&)
       div(**attrs, &)
@@ -12,7 +12,7 @@ module RubyUI
       {
         role: "group",
         data: {
-          controller: "ruby-ui--checkbox-group"
+          controller: "rbui--checkbox-group"
         }
       }
     end

data/lib/{ruby_ui → rbui}/clipboard/clipboard.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class Clipboard < Base
     def initialize(options: {}, success: "Copied!", error: "Copy Failed!", **attrs)
       @options = options
@@ -30,11 +30,11 @@ module RubyUI
     def default_attrs
       {
         data: {
-          controller: "ruby-ui--clipboard",
-          action: "click@window->ruby-ui--clipboard#onClickOutside",
-          ruby_ui__clipboard_success_value: @success,
-          ruby_ui__clipboard_error_value: @error,
-          ruby_ui__clipboard_options_value: @options.to_json
+          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

data/lib/{ruby_ui → rbui}/clipboard/clipboard_popover.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class ClipboardPopover < Base
     def initialize(type:, **attrs)
       @type = type
@@ -11,7 +11,7 @@ module RubyUI
       div(
         class: "hidden",
         style: "width: max-content; position: absolute; top: 0; left: 0;",
-        data: {ruby_ui__clipboard_target: clipboard_target}
+        data: {rbui__clipboard_target: clipboard_target}
       ) do
         div(**attrs, &block)
       end

data/lib/{ruby_ui → rbui}/clipboard/clipboard_source.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class ClipboardSource < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,7 +11,7 @@ module RubyUI
     def default_attrs
       {
         data: {
-          ruby_ui__clipboard_target: "source"
+          rbui__clipboard_target: "source"
         }
       }
     end

data/lib/{ruby_ui → rbui}/clipboard/clipboard_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class ClipboardTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,8 +11,8 @@ module RubyUI
     def default_attrs
       {
         data: {
-          ruby_ui__clipboard_target: "trigger",
-          action: "click->ruby-ui--clipboard#copy"
+          rbui__clipboard_target: "trigger",
+          action: "click->rbui--clipboard#copy"
         }
       }
     end

data/lib/{ruby_ui → rbui}/codeblock/codeblock.rb

@@ -2,7 +2,7 @@
 
 require "rouge"
 
-module RubyUI
+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
@@ -34,19 +34,18 @@ module RubyUI
 
     def default_attrs
       {
-        style: {tab_size: 2},
         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
-      RubyUI.Clipboard(success: @clipboard_success, error: @clipboard_error, class: "relative") do
-        RubyUI.ClipboardSource do
+      RBUI.Clipboard(success: @clipboard_success, error: @clipboard_error, class: "relative") do
+        RBUI.ClipboardSource do
           codeblock
         end
         div(class: "absolute top-2 right-2") do
-          RubyUI.ClipboardTrigger do
-            RubyUI.Button(variant: :ghost, size: :sm, icon: true, class: "text-white hover:text-white hover:bg-white/20") { clipboard_icon }
+          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
@@ -55,7 +54,11 @@ module RubyUI
     def codeblock
       div(**attrs) do
         div(class: "after:content-none") do
-          pre { raw(safe(FORMATTER.format(lexer.lex(@code)))) }
+          pre do
+            unsafe_raw FORMATTER.format(
+              lexer.lex(@code)
+            )
+          end
         end
       end
     end

data/lib/{ruby_ui → rbui}/collapsible/collapsible.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class Collapsible < Base
     def initialize(open: false, **attrs)
       @open = open
@@ -16,8 +16,8 @@ module RubyUI
     def default_attrs
       {
         data: {
-          controller: "ruby-ui--collapsible",
-          ruby_ui__collapsible_open_value: @open
+          controller: "rbui--collapsible",
+          rbui__collapsible_open_value: @open
         }
       }
     end

data/lib/{ruby_ui → rbui}/collapsible/collapsible_content.rb

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

data/lib/{ruby_ui → rbui}/collapsible/collapsible_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RubyUI
+module RBUI
   class CollapsibleTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,7 +11,7 @@ module RubyUI
     def default_attrs
       {
         data: {
-          action: "click->ruby-ui--collapsible#toggle"
+          action: "click->rbui--collapsible#toggle"
         }
       }
     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