ruby_ui 1.1.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae8ccd52ccc249a9a1a409facc1883da7f87170bc5f70a0df32755e2fc5e5577
-  data.tar.gz: df99edbcb78e881e98a114c58b1e0e771180d40acc0677ab182c50e29487d33d
+  metadata.gz: 41271e83392afeb5499d950f64ea1e5513c3694fac4521c7599f3ac1c281c979
+  data.tar.gz: 5370ed6872556cf2848763b09d6edddecc2b5b822357c3af35e6bbfc1eb07ae0
 SHA512:
-  metadata.gz: 9509f7c13c94b9f1b4767cc194e7eaeecda6ffd8eeb872c97693e7cf9ac875dbefa1457edc882df7e2ac093facf77ff856f1af3191549a7f37be8d901cb00ec6
-  data.tar.gz: 44f479fb9b95d79318e358dc4b2864a5b13cc51d1ddd958a199cd6c184ed190de8d93a07e07d416ca2d5c89e23094f1b158c187048b3030d17eadca9b23eb065
+  metadata.gz: e3694f2acd18f037160228f955f019c20696543b5047f87cb1a3108a272982b69c188bbbec174063add1881c29d3625f0fde34d7fe8d9dfebe9bb29621986831
+  data.tar.gz: f0853192ca6871211535ac8e60e1db1dfae5adcba4fe60e4284f147bfe6296ce0ded60436764ff3829db5d20c874f3efcd7f68a56f47f411900f8c95f8d6dac3

data/lib/generators/ruby_ui/component_generator.rb

@@ -9,6 +9,7 @@ module RubyUI
       source_root File.expand_path("../../ruby_ui", __dir__)
       argument :component_name, type: :string, required: true
       class_option :force, type: :boolean, default: false
+      class_option :with_docs, type: :boolean, default: false
 
       def generate_component
         if component_not_found?
@@ -63,7 +64,10 @@ module RubyUI
 
       def component_folder_path = File.join(self.class.source_root, component_folder_name)
 
-      def components_file_paths = Dir.glob(File.join(component_folder_path, "*.rb"))
+      def components_file_paths
+        files = Dir.glob(File.join(component_folder_path, "*.rb"))
+        options["with_docs"] ? files : files.reject { |f| f.end_with?("_docs.rb") }
+      end
 
       def js_controller_file_paths = Dir.glob(File.join(component_folder_path, "*.js"))
 

data/lib/generators/ruby_ui/dependencies.yml

@@ -42,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"
@@ -69,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/install_generator.rb

@@ -30,7 +30,7 @@ module RubyUI
         if gem_installed?("tailwind_merge")
           say "tailwind_merge is already installed", :green
         else
-          say "Adding phlex-rails to Gemfile"
+          say "Adding tailwind_merge to Gemfile"
           run %(bundle add tailwind_merge)
         end
       end

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,9 +1,13 @@
 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)
+        elsif using_bun?
+          run "bun add #{package}"
         elsif using_yarn?
           run "yarn add #{package}"
         elsif using_npm?
@@ -19,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
@@ -27,21 +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_npm? = File.exist?(Rails.root.join("package-lock.json"))
+      def using_bun? = File.exist?(rails_root.join("bun.lock"))
+
+      def using_npm? = File.exist?(rails_root.join("package-lock.json"))
+
+      def using_pnpm? = File.exist?(rails_root.join("pnpm-lock.yaml"))
+
+      def using_yarn? = File.exist?(rails_root.join("yarn.lock"))
 
-      def using_pnpm? = File.exist?(Rails.root.join("pnpm-lock.yaml"))
+      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
 
-      def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
+        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
@@ -51,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_badge.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxBadge < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs font-medium text-secondary-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_badge_trigger.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxBadgeTrigger < Base
+    def initialize(placeholder: "", clear_button: false, **)
+      @placeholder = placeholder
+      @clear_button = clear_button
+      super(**)
+    end
+
+    def view_template(&)
+      div(**attrs) do
+        div(data: {ruby_ui__combobox_target: "badgeContainer"}, class: "hidden")
+        input(
+          type: "text",
+          class: "flex-1 min-w-8 bg-transparent border-0 px-0 outline-none focus:ring-0 placeholder:text-muted-foreground text-sm",
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          placeholder: @placeholder,
+          data: {
+            ruby_ui__combobox_target: "badgeInput",
+            action: "keyup->ruby-ui--combobox#filterItems input->ruby-ui--combobox#filterItems keydown.backspace->ruby-ui--combobox#handleBadgeInputBackspace"
+          }
+        )
+        render ComboboxClearButton.new if @clear_button
+      end
+    end
+
+    private
+
+    # JS-toggled classes (referenced here so Tailwind compiles them): h-auto min-h-9 pt-1.5
+    def default_attrs
+      {
+        class: "flex h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 cursor-text",
+        data: {
+          ruby_ui__combobox_target: "trigger",
+          action: "click->ruby-ui--combobox#openPopover focusin->ruby-ui--combobox#openPopover"
+        },
+        aria: {
+          haspopup: "listbox",
+          expanded: "false"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_clear_button.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxClearButton < Base
+    def view_template
+      button(**attrs) do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "size-3.5"
+        ) do |s|
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        class: "ml-auto shrink-0 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hidden",
+        aria: {label: "Clear selection"},
+        data: {
+          ruby_ui__combobox_target: "clearButton",
+          # JS implementation in combobox_controller.js
+          action: "ruby-ui--combobox#clearAll"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_controller.js

@@ -4,7 +4,8 @@ import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
 // Connects to data-controller="ruby-ui--combobox"
 export default class extends Controller {
   static values = {
-    term: String
+    term: String,
+    minPopoverWidth: { type: Number, default: 240 }
   }
 
   static targets = [
@@ -186,6 +187,7 @@ export default class extends Controller {
   }
 
   updatePopoverWidth() {
-    this.popoverTarget.style.width = `${this.triggerTarget.offsetWidth}px`
+    const width = Math.max(this.triggerTarget.offsetWidth, this.minPopoverWidthValue)
+    this.popoverTarget.style.width = `${width}px`
   }
 }