ruby_ui 1.2.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 488fdc5b97a189ce4916f776af376a06760255437f681b3e3ef7e9aa0998e2b3
-  data.tar.gz: ff44a35b46e45d1cf1b510716fdc174fc50e229ef7a82d81c8318d51911beb3d
+  metadata.gz: 41271e83392afeb5499d950f64ea1e5513c3694fac4521c7599f3ac1c281c979
+  data.tar.gz: 5370ed6872556cf2848763b09d6edddecc2b5b822357c3af35e6bbfc1eb07ae0
 SHA512:
-  metadata.gz: 7f7fe5941b4a9e4375d280efd31ab1e35dca88b699cf4580f6722294c4b8fe161240bbe7bce09bf5f75d5a41a9c2d62e6c24ab9a3b4d4f32ef8062fa4e81d5b3
-  data.tar.gz: 0b3e785f7380c7ba5abc0e721d5d17c3a5708a554b13bb2cd946e8019241642ebd7dfb1b3cfc46b759d14e18e37d82cbf0f874824a0489ddf8d09003bda1d9d1
+  metadata.gz: e3694f2acd18f037160228f955f019c20696543b5047f87cb1a3108a272982b69c188bbbec174063add1881c29d3625f0fde34d7fe8d9dfebe9bb29621986831
+  data.tar.gz: f0853192ca6871211535ac8e60e1db1dfae5adcba4fe60e4284f147bfe6296ce0ded60436764ff3829db5d20c874f3efcd7f68a56f47f411900f8c95f8d6dac3

data/lib/generators/ruby_ui/dependencies.yml

@@ -2,16 +2,6 @@ accordion:
   js_packages:
     - "motion"
 
-data_table:
-  components:
-    - "Table"
-    - "Checkbox"
-    - "NativeSelect"
-    - "Pagination"
-    - "DropdownMenu"
-    - "Input"
-    - "Button"
-
 alert_dialog:
   components:
     - "Button"
@@ -52,6 +42,22 @@ context_menu:
   js_packages:
     - "tippy.js"
 
+date_picker:
+  components:
+    - "Input"
+    - "Popover"
+    - "Calendar"
+
+data_table:
+  components:
+    - "Button"
+    - "Checkbox"
+    - "DropdownMenu"
+    - "Input"
+    - "NativeSelect"
+    - "Pagination"
+    - "Table"
+
 dropdown_menu:
   js_packages:
     - "@floating-ui/dom"
@@ -79,6 +85,22 @@ select:
   js_packages:
     - "@floating-ui/dom"
 
+toast:
+  js_packages: []
+
 tooltip:
+  components:
+    - "Typography"
+
   js_packages:
     - "@floating-ui/dom"
+
+toggle: {}
+
+toggle_group:
+  components:
+    - "Toggle"
+
+theme_toggle:
+  components:
+    - "Toggle"

data/lib/generators/ruby_ui/install/templates/tailwind.css.erb

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 
 <% if using_importmap? %>
-@import "../../../vendor/javascript/tw-animate-css.js";
+@import "../../../vendor/javascript/tw-animate-css.css";
 <% else %>
 @import "tw-animate-css";
 <% end %>

data/lib/generators/ruby_ui/javascript_utils.rb

@@ -1,6 +1,8 @@
 module RubyUI
   module Generators
     module JavascriptUtils
+      TW_ANIMATE_CSS_VERSION = "1.4.0"
+
       def install_js_package(package)
         if using_importmap?
           pin_with_importmap(package)
@@ -21,6 +23,8 @@ module RubyUI
         case package
         when "motion"
           pin_motion
+        when "tw-animate-css"
+          pin_tw_animate_css
         when "tippy.js"
           pin_tippy_js
         else
@@ -29,23 +33,34 @@ module RubyUI
       end
 
       def using_importmap?
-        File.exist?(Rails.root.join("config/importmap.rb")) && File.exist?(Rails.root.join("bin/importmap"))
+        File.exist?(rails_root.join("config/importmap.rb")) && File.exist?(rails_root.join("bin/importmap"))
       end
 
-      def using_bun? = File.exist?(Rails.root.join("bun.lock"))
+      def using_bun? = File.exist?(rails_root.join("bun.lock"))
+
+      def using_npm? = File.exist?(rails_root.join("package-lock.json"))
 
-      def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
+      def using_pnpm? = File.exist?(rails_root.join("pnpm-lock.yaml"))
 
-      def using_pnpm? = File.exist?(Rails.root.join("pnpm-lock.yaml"))
+      def using_yarn? = File.exist?(rails_root.join("yarn.lock"))
 
-      def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
+      def pin_tw_animate_css
+        say <<~TEXT
+          WARNING: Installing tw-animate-css as a CSS asset because Importmap cannot pin CSS-only package exports.
+        TEXT
+
+        empty_directory rails_root.join("vendor/javascript")
+        # CDN serves "tw-animate.css"; we save as "tw-animate-css.css" to match package name. Do not "correct" the URL.
+        get "https://cdn.jsdelivr.net/npm/tw-animate-css@#{TW_ANIMATE_CSS_VERSION}/dist/tw-animate.css",
+          rails_root.join("vendor/javascript/tw-animate-css.css")
+      end
 
       def pin_motion
         say <<~TEXT
           WARNING: Installing motion from CDN because `bin/importmap pin motion` doesn't download the correct file.
         TEXT
 
-        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+        inject_into_file rails_root.join("config/importmap.rb"), <<~RUBY
           pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm"\n
         RUBY
       end
@@ -55,11 +70,13 @@ module RubyUI
           WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
         TEXT
 
-        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+        inject_into_file rails_root.join("config/importmap.rb"), <<~RUBY
           pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
           pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
         RUBY
       end
+
+      def rails_root = Rails.root
     end
   end
 end

data/lib/ruby_ui/avatar/avatar.rb

@@ -24,6 +24,9 @@ module RubyUI
 
     def default_attrs
       {
+        data: {
+          controller: "ruby-ui--avatar"
+        },
         class: ["relative flex shrink-0 overflow-hidden rounded-full", @size_classes]
       }
     end

data/lib/ruby_ui/avatar/avatar_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["image", "fallback"];
+
+  connect() {
+    if (!this.hasImageTarget) {
+      return;
+    }
+
+    if (this.imageTarget.complete && this.imageTarget.naturalWidth > 0) {
+      this.showImage();
+    } else {
+      // Image not yet loaded (or failed): hide it so the fallback shows.
+      // Image visibility is restored by the load/error handlers.
+      this.showFallback();
+    }
+  }
+
+  showImage() {
+    this.imageTargets.forEach((image) => image.classList.remove("hidden"));
+    this.fallbackTargets.forEach((fallback) =>
+      fallback.classList.add("hidden"),
+    );
+  }
+
+  showFallback() {
+    this.imageTargets.forEach((image) => image.classList.add("hidden"));
+    this.fallbackTargets.forEach((fallback) =>
+      fallback.classList.remove("hidden"),
+    );
+  }
+}

data/lib/ruby_ui/avatar/avatar_fallback.rb

@@ -10,6 +10,9 @@ module RubyUI
 
     def default_attrs
       {
+        data: {
+          ruby_ui__avatar_target: "fallback"
+        },
         class: "flex h-full w-full items-center justify-center rounded-full bg-muted"
       }
     end

data/lib/ruby_ui/avatar/avatar_image.rb

@@ -17,6 +17,10 @@ module RubyUI
     def default_attrs
       {
         loading: "lazy",
+        data: {
+          ruby_ui__avatar_target: "image",
+          action: "load->ruby-ui--avatar#showImage error->ruby-ui--avatar#showFallback"
+        },
         class: "aspect-square h-full w-full",
         alt: @alt,
         src: @src

data/lib/ruby_ui/base.rb

@@ -18,5 +18,11 @@ module RubyUI
     def default_attrs
       {}
     end
+
+    if defined?(Rails) && Rails.env.development?
+      def before_template
+        comment { "Before #{self.class.name}" }
+      end
+    end
   end
 end

data/lib/ruby_ui/calendar/calendar.rb

@@ -2,8 +2,9 @@
 
 module RubyUI
   class Calendar < Base
-    def initialize(selected_date: nil, input_id: nil, date_format: "yyyy-MM-dd", **attrs)
+    def initialize(selected_date: nil, min_date: nil, input_id: nil, date_format: "yyyy-MM-dd", **attrs)
       @selected_date = selected_date
+      @min_date = min_date
       @input_id = input_id
       @date_format = date_format
       super(**attrs)
@@ -30,6 +31,7 @@ module RubyUI
         data: {
           controller: "ruby-ui--calendar",
           ruby_ui__calendar_selected_date_value: @selected_date&.to_s,
+          ruby_ui__calendar_min_date_value: @min_date&.to_s,
           ruby_ui__calendar_format_value: @date_format,
           ruby_ui__calendar_ruby_ui__calendar_input_outlet: @input_id
         }

data/lib/ruby_ui/calendar/calendar_controller.js

@@ -6,6 +6,7 @@ export default class extends Controller {
     "calendar",
     "title",
     "weekdaysTemplate",
+    "disabledDateTemplate",
     "selectedDateTemplate",
     "todayDateTemplate",
     "currentMonthDateTemplate",
@@ -16,6 +17,10 @@ export default class extends Controller {
       type: String,
       default: null,
     },
+    minDate: {
+      type: String,
+      default: null,
+    },
     viewDate: {
       type: String,
       default: new Date().toISOString().slice(0, 10),
@@ -43,13 +48,21 @@ export default class extends Controller {
 
   selectDay(e) {
     e.preventDefault();
+    if (this.isDateDisabled(e.currentTarget.dataset.day)) return;
+
     // Set the selected date value
     this.selectedDateValue = e.currentTarget.dataset.day;
   }
 
   selectedDateValueChanged(value, prevValue) {
+    const selectedDate = this.selectedDate();
+    if (!selectedDate) {
+      this.updateCalendar();
+      return;
+    }
+
     // update the viewDateValue to the first day of month of the selected date (This will trigger updateCalendar() function)
-    const newViewDate = new Date(this.selectedDateValue);
+    const newViewDate = new Date(selectedDate);
     newViewDate.setDate(2); // set the day to the 2nd (to avoid issues with months with different number of days and timezones)
     this.viewDateValue = newViewDate.toISOString().slice(0, 10);
 
@@ -58,7 +71,7 @@ export default class extends Controller {
 
     // update the input value
     this.rubyUiCalendarInputOutlets.forEach((outlet) => {
-      const formattedDate = this.formatDate(this.selectedDate());
+      const formattedDate = this.formatDate(selectedDate);
       outlet.setValue(formattedDate);
     });
   }
@@ -101,10 +114,20 @@ export default class extends Controller {
 
   renderDay(day) {
     const today = new Date();
+    const selectedDate = this.selectedDate();
     let dateHTML = "";
     const data = { day: day, dayDate: day.getDate() };
 
-    if (day.toDateString() === this.selectedDate().toDateString()) {
+    if (this.isDateDisabled(day)) {
+      // disabledDate
+      dateHTML = Mustache.render(
+        this.disabledDateTemplateTarget.innerHTML,
+        data,
+      );
+    } else if (
+      selectedDate &&
+      day.toDateString() === selectedDate.toDateString()
+    ) {
       // selectedDate
       // Render the selected date template target innerHTML with Mustache
       dateHTML = Mustache.render(
@@ -137,13 +160,13 @@ export default class extends Controller {
   }
 
   selectedDate() {
-    return new Date(this.selectedDateValue);
+    return this.parseDate(this.selectedDateValue);
   }
 
   viewDate() {
-    return this.viewDateValue
-      ? new Date(this.viewDateValue)
-      : this.selectedDate();
+    return (
+      this.parseDate(this.viewDateValue) || this.selectedDate() || new Date()
+    );
   }
 
   getFullWeeksStartAndEndInMonth() {
@@ -246,4 +269,40 @@ export default class extends Controller {
         return "th";
     }
   }
+
+  minDate() {
+    return this.parseDate(this.minDateValue);
+  }
+
+  isDateDisabled(date) {
+    const minDate = this.minDate();
+    const candidate = this.parseDate(date);
+
+    if (!minDate || !candidate) return false;
+
+    return this.startOfDay(candidate) < this.startOfDay(minDate);
+  }
+
+  parseDate(value) {
+    if (!value) return null;
+    if (value instanceof Date) return new Date(value);
+
+    const isoDate = value.toString().match(/^(\d{4})-(\d{2})-(\d{2})/);
+    if (isoDate) {
+      return new Date(
+        Number(isoDate[1]),
+        Number(isoDate[2]) - 1,
+        Number(isoDate[3]),
+      );
+    }
+
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  startOfDay(date) {
+    const normalizedDate = new Date(date);
+    normalizedDate.setHours(0, 0, 0, 0);
+    return normalizedDate;
+  }
 }

data/lib/ruby_ui/calendar/calendar_days.rb

@@ -5,6 +5,7 @@ module RubyUI
     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"
 
     def view_template
+      render_disabled_date_template
       render_selected_date_template
       render_today_date_template
       render_current_month_date_template
@@ -13,6 +14,25 @@ module RubyUI
 
     private
 
+    def render_disabled_date_template
+      date_template("disabledDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          name: "day",
+          class:
+                [
+                  BASE_CLASS,
+                  "cursor-not-allowed bg-background text-muted-foreground hover:bg-background hover:text-muted-foreground"
+                ],
+          disabled: true,
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button",
+          aria_disabled: "true"
+        ) { "{{dayDate}}" }
+      end
+    end
+
     def render_selected_date_template
       date_template("selectedDateTemplate") do
         button(

data/lib/ruby_ui/calendar/calendar_docs.rb

@@ -26,6 +26,15 @@ class Views::Docs::Calendar < Views::Base
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Minimum date", description: "Disable dates before a given date", context: self) do
+        <<~RUBY
+          div(class: 'space-y-4') do
+            Input(type: 'string', placeholder: "Select a date", class: 'rounded-md border shadow', id: 'minimum-date', data_controller: 'ruby-ui--calendar-input')
+            Calendar(input_id: '#minimum-date', min_date: Date.current, class: 'rounded-md border shadow')
+          end
+        RUBY
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))

data/lib/ruby_ui/combobox/combobox.rb

@@ -19,13 +19,7 @@ module RubyUI
         data: {
           controller: "ruby-ui--combobox",
           ruby_ui__combobox_term_value: @term,
-          action: %w[
-            turbo:morph@window->ruby-ui--combobox#updateTriggerContent
-            keydown.down->ruby-ui--combobox#keyDownPressed
-            keydown.up->ruby-ui--combobox#keyUpPressed
-            keydown.enter->ruby-ui--combobox#keyEnterPressed
-            keydown.esc->ruby-ui--combobox#closePopover:prevent
-          ]
+          action: "turbo:morph@window->ruby-ui--combobox#updateTriggerContent"
         }
       }
     end

data/lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -10,7 +10,13 @@ module RubyUI
 
     def default_attrs
       {
-        class: "peer sr-only",
+        class: [
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ],
         data: {
           ruby_ui__combobox_target: "input",
           action: "ruby-ui--combobox#inputChanged"