ruby_ui 1.2.0 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 488fdc5b97a189ce4916f776af376a06760255437f681b3e3ef7e9aa0998e2b3
-  data.tar.gz: ff44a35b46e45d1cf1b510716fdc174fc50e229ef7a82d81c8318d51911beb3d
+  metadata.gz: c8dd00d73934f8ff9e2ac4e92994de33c910192f92df634def1e1726bde86393
+  data.tar.gz: 50ba081c5c25aa85581620726935ca1469b402751eade75cdb8adbc2042160d5
 SHA512:
-  metadata.gz: 7f7fe5941b4a9e4375d280efd31ab1e35dca88b699cf4580f6722294c4b8fe161240bbe7bce09bf5f75d5a41a9c2d62e6c24ab9a3b4d4f32ef8062fa4e81d5b3
-  data.tar.gz: 0b3e785f7380c7ba5abc0e721d5d17c3a5708a554b13bb2cd946e8019241642ebd7dfb1b3cfc46b759d14e18e37d82cbf0f874824a0489ddf8d09003bda1d9d1
+  metadata.gz: 44150fd27560c0b3a7d5193501abfd755e36a15ae74dc555088b9a30a1b228adc521dd8a82fc705e3c2396a45bb0baf48aed1351840d96aaa87eae6a9c2d545d
+  data.tar.gz: fc536b32afeabc805ad4815ce9be98090caf2402e6c5cc920011d9166b721690eb35938195b5079bf44b7400c4ec5454642f00ea844df22062ef326e32316bc4

data/README.md

@@ -55,6 +55,12 @@ You can generate your components using `ruby_ui:component` generator.
 bin/rails g ruby_ui:component Accordion
 ```
 
+You can also generate multiple components at once.
+
+```bash
+bin/rails g ruby_ui:component Button Link Input Textarea
+```
+
 You also can generate all components using `ruby_ui:component:all` generator
 
 ## Documentation 📖

data/lib/generators/ruby_ui/component/all_generator.rb

@@ -10,11 +10,13 @@ module RubyUI
         def generate_components
           say "Generating all components..."
 
-          Dir.children(self.class.source_root).each do |folder_name|
-            next if folder_name.ends_with?(".rb")
-
-            run "bin/rails generate ruby_ui:component #{folder_name} --force #{options["force"]}"
+          # Each component lives in its own directory; select directories only so stray
+          # files (e.g. base.rb or a macOS .DS_Store) are never passed as component names.
+          folder_names = Dir.children(self.class.source_root).select do |entry|
+            File.directory?(File.join(self.class.source_root, entry))
           end
+
+          run "bin/rails generate ruby_ui:component #{folder_names.join(" ")} --force #{options["force"]}"
         end
       end
     end

data/lib/generators/ruby_ui/component_generator.rb

@@ -7,69 +7,89 @@ module RubyUI
       namespace "ruby_ui:component"
 
       source_root File.expand_path("../../ruby_ui", __dir__)
-      argument :component_name, type: :string, required: true
+      argument :component_names, type: :array, required: true, banner: "Button Link Input"
       class_option :force, type: :boolean, default: false
       class_option :with_docs, type: :boolean, default: false
 
-      def generate_component
-        if component_not_found?
-          say "Component not found: #{component_name}", :red
-          exit
+      def generate_components
+        validate_components!
+
+        component_names.each do |component_name|
+          say "Generating #{component_name} files..."
+          copy_related_component_files(component_name)
+          copy_js_files(component_name)
+          install_dependencies(component_name)
         end
 
-        say "Generating #{component_name} files..."
+        update_stimulus_manifest
       end
 
-      def copy_related_component_files
+      private
+
+      def validate_components!
+        missing = component_names.reject { |name| component_exists?(name) }
+        return if missing.empty?
+
+        say "Component(s) not found: #{missing.join(", ")}", :red
+        exit 1
+      end
+
+      def copy_related_component_files(component_name)
         say "Generating components"
 
-        components_file_paths.each do |file_path|
+        components_file_paths(component_name).each do |file_path|
           component_file_name = file_path.split("/").last
-          copy_file file_path, Rails.root.join("app/components/ruby_ui", component_folder_name, component_file_name), force: options["force"]
+          copy_file file_path, Rails.root.join("app/components/ruby_ui", component_folder_name(component_name), component_file_name), force: options["force"]
         end
       end
 
-      def copy_js_files
-        return if js_controller_file_paths.empty?
+      def copy_js_files(component_name)
+        paths = js_controller_file_paths(component_name)
+        return if paths.empty?
 
         say "Generating Stimulus controllers"
 
-        js_controller_file_paths.each do |file_path|
+        paths.each do |file_path|
           controller_file_name = file_path.split("/").last
           copy_file file_path, Rails.root.join("app/javascript/controllers/ruby_ui", controller_file_name), force: options["force"]
         end
 
+        @stimulus_controllers_added = true
+      end
+
+      def update_stimulus_manifest
+        return unless @stimulus_controllers_added
+
         # Importmap doesn't have controller manifest, instead it uses `eagerLoadControllersFrom("controllers", application)`
-        if !using_importmap?
-          say "Updating Stimulus controllers manifest"
-          run "rake stimulus:manifest:update"
-        end
+        return if using_importmap?
+
+        say "Updating Stimulus controllers manifest"
+        run "rake stimulus:manifest:update"
       end
 
-      def install_dependencies
-        return if dependencies.blank?
+      def install_dependencies(component_name)
+        deps = dependencies(component_name)
+        return if deps.blank?
 
         say "Installing dependencies"
 
-        install_components_dependencies(dependencies["components"])
-        install_gems_dependencies(dependencies["gems"])
-        install_js_packages(dependencies["js_packages"])
+        install_components_dependencies(deps["components"])
+        install_gems_dependencies(deps["gems"])
+        install_js_packages(deps["js_packages"])
       end
 
-      private
-
-      def component_not_found? = !Dir.exist?(component_folder_path)
+      def component_exists?(component_name) = Dir.exist?(component_folder_path(component_name))
 
-      def component_folder_name = component_name.underscore
+      def component_folder_name(component_name) = component_name.underscore
 
-      def component_folder_path = File.join(self.class.source_root, component_folder_name)
+      def component_folder_path(component_name) = File.join(self.class.source_root, component_folder_name(component_name))
 
-      def components_file_paths
-        files = Dir.glob(File.join(component_folder_path, "*.rb"))
+      def components_file_paths(component_name)
+        files = Dir.glob(File.join(component_folder_path(component_name), "*.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"))
+      def js_controller_file_paths(component_name) = Dir.glob(File.join(component_folder_path(component_name), "*.js"))
 
       def install_components_dependencies(components)
         components&.each do |component|
@@ -89,10 +109,10 @@ module RubyUI
         end
       end
 
-      def dependencies
+      def dependencies(component_name)
         @dependencies ||= YAML.load_file(File.join(__dir__, "dependencies.yml")).freeze
 
-        @dependencies[component_folder_name]
+        @dependencies[component_folder_name(component_name)]
       end
     end
   end

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/accordion/accordion_content.rb

@@ -11,10 +11,12 @@ module RubyUI
     def default_attrs
       {
         data: {
-          ruby_ui__accordion_target: "content"
+          ruby_ui__accordion_target: "content",
+          state: "closed"
         },
         class: "overflow-y-hidden",
-        style: "height: 0px;"
+        style: "height: 0px;",
+        hidden: true
       }
     end
   end

data/lib/ruby_ui/accordion/accordion_controller.js

@@ -65,9 +65,15 @@ export default class extends Controller {
 
   // Reveal the accordion content with animation
   revealContent() {
-    const contentHeight = this.contentTarget.scrollHeight;
+    const content = this.contentTarget;
+
+    // Remove hidden so the element participates in layout before measuring
+    content.removeAttribute("hidden");
+    content.dataset.state = "open";
+
+    const contentHeight = content.scrollHeight;
     animate(
-      this.contentTarget,
+      content,
       { height: `${contentHeight}px` },
       {
         duration: this.animationDurationValue,
@@ -78,14 +84,23 @@ export default class extends Controller {
 
   // Hide the accordion content with animation
   hideContent() {
+    const content = this.contentTarget;
+    content.dataset.state = "closed";
+
     animate(
-      this.contentTarget,
+      content,
       { height: 0 },
       {
         duration: this.animationDurationValue,
         easing: this.animationEasingValue,
       },
-    );
+    ).finished.then(() => {
+      // After animation completes, truly hide the element so it is removed
+      // from layout and form focus — prevents trapped validation errors
+      if (content.dataset.state === "closed") {
+        content.setAttribute("hidden", "");
+      }
+    });
   }
 
   // Rotate the accordion icon 180deg using animate function

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

@@ -16,7 +16,15 @@ module RubyUI
 
     def default_attrs
       {
-        loading: "lazy",
+        # NB: do not set loading: "lazy" here. avatar_controller hides a not-yet-loaded
+        # image with `display:none` (the `hidden` class) so the fallback shows. The
+        # browser never fetches a `loading="lazy"` image that generates no box, so its
+        # `load` event never fires and the image stays hidden forever (#415). shadcn/radix
+        # do not lazy-load the avatar image either.
+        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))