ruby_ui 1.3.0 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 41271e83392afeb5499d950f64ea1e5513c3694fac4521c7599f3ac1c281c979
-  data.tar.gz: 5370ed6872556cf2848763b09d6edddecc2b5b822357c3af35e6bbfc1eb07ae0
+  metadata.gz: c8dd00d73934f8ff9e2ac4e92994de33c910192f92df634def1e1726bde86393
+  data.tar.gz: 50ba081c5c25aa85581620726935ca1469b402751eade75cdb8adbc2042160d5
 SHA512:
-  metadata.gz: e3694f2acd18f037160228f955f019c20696543b5047f87cb1a3108a272982b69c188bbbec174063add1881c29d3625f0fde34d7fe8d9dfebe9bb29621986831
-  data.tar.gz: f0853192ca6871211535ac8e60e1db1dfae5adcba4fe60e4284f147bfe6296ce0ded60436764ff3829db5d20c874f3efcd7f68a56f47f411900f8c95f8d6dac3
+  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/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_image.rb

@@ -16,7 +16,11 @@ 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"

data/lib/ruby_ui/data_table/data_table_docs.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Views::Docs::DataTable < Views::Base
-  Row = Struct.new(:id, :name, :email, :salary, :status, keyword_init: true)
+  Row = Struct.new(:id, :name, :email, :salary, :status)
 
   SAMPLE_ROWS = [
     Row.new(id: 1, name: "Alice", email: "alice@example.com", salary: 90_000, status: "Active"),

data/lib/ruby_ui/dialog/dialog_content.rb

@@ -17,14 +17,9 @@ module RubyUI
     end
 
     def view_template
-      template(data: {ruby_ui__dialog_target: "content"}) do
-        div(data_controller: "ruby-ui--dialog") do
-          backdrop
-          div(**attrs) do
-            yield
-            close_button
-          end
-        end
+      dialog(**attrs) do
+        yield
+        close_button
       end
     end
 
@@ -32,9 +27,10 @@ module RubyUI
 
     def default_attrs
       {
-        data_state: "open",
+        data_ruby_ui__dialog_target: "dialog",
+        data_action: "click->ruby-ui--dialog#backdropClick",
         class: [
-          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
+          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 backdrop:bg-background/80 backdrop:backdrop-blur-sm open:animate-in open:fade-in-0 open:zoom-in-95 sm:rounded-lg md:w-full",
           SIZES[@size]
         ]
       }
@@ -43,7 +39,7 @@ module RubyUI
     def close_button
       button(
         type: "button",
-        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
         data_action: "click->ruby-ui--dialog#dismiss"
       ) do
         svg(
@@ -65,13 +61,5 @@ module RubyUI
         span(class: "sr-only") { "Close" }
       end
     end
-
-    def backdrop
-      div(
-        data_state: "open",
-        data_action: "click->ruby-ui--dialog#dismiss esc->ruby-ui--dialog#dismiss",
-        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0"
-      )
-    end
   end
 end

data/lib/ruby_ui/dialog/dialog_controller.js

@@ -1,8 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Connects to data-controller="dialog"
+// Connects to data-controller="ruby-ui--dialog"
 export default class extends Controller {
-  static targets = ["content"]
+  static targets = ["dialog"]
   static values = {
     open: {
       type: Boolean,
@@ -11,22 +11,34 @@ export default class extends Controller {
   }
 
   connect() {
+    this.dialogTarget.addEventListener("close", this.handleClose)
     if (this.openValue) {
       this.open()
     }
   }
 
+  disconnect() {
+    this.dialogTarget.removeEventListener("close", this.handleClose)
+    document.body.classList.remove("overflow-hidden")
+  }
+
   open(e) {
-    e?.preventDefault();
-    document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
-    // prevent scroll on body
-    document.body.classList.add('overflow-hidden')
+    e?.preventDefault()
+    this.dialogTarget.showModal()
+    document.body.classList.add("overflow-hidden")
   }
 
   dismiss() {
-    // allow scroll on body
-    document.body.classList.remove('overflow-hidden')
-    // remove the element
-    this.element.remove()
+    this.dialogTarget.close()
+  }
+
+  backdropClick(e) {
+    if (e.target === this.dialogTarget) {
+      this.dismiss()
+    }
+  }
+
+  handleClose = () => {
+    document.body.classList.remove("overflow-hidden")
   }
 }

data/lib/ruby_ui/dropdown_menu/dropdown_menu_item.rb

@@ -2,20 +2,24 @@
 
 module RubyUI
   class DropdownMenuItem < Base
-    def initialize(href: "#", **attrs)
+    def initialize(as: :a, href: "#", **attrs)
+      @as = as
       @href = href
       super(**attrs)
     end
 
     def view_template(&)
-      a(**attrs, &)
+      if @as == :div
+        div(**attrs, &)
+      else
+        a(**attrs, &)
+      end
     end
 
     private
 
     def default_attrs
-      {
-        href: @href,
+      base = {
         role: "menuitem",
         class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         data_action: "click->ruby-ui--dropdown-menu#close",
@@ -23,6 +27,8 @@ module RubyUI
         tabindex: "-1",
         data_orientation: "vertical"
       }
+      base[:href] = @href unless @as == :div
+      base
     end
   end
 end

data/lib/ruby_ui/form/form_docs.rb

@@ -170,6 +170,95 @@ class Views::Docs::Form < Views::Base
         RUBY
       end
 
+      Heading(level: 2) { "Rails Integration" }
+
+      Text do
+        plain "RubyUI Form components are plain HTML — they work with any form submission strategy. "
+        plain "The recommended approach for Rails apps is to use "
+        InlineLink(href: "https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_with", target: "_blank") { "form_with" }
+        plain " to generate the "
+        code(class: "font-mono text-sm") { "action" }
+        plain " URL and CSRF token, then pass explicit "
+        code(class: "font-mono text-sm") { "name" }
+        plain " / "
+        code(class: "font-mono text-sm") { "id" }
+        plain " attributes to each RubyUI input so the browser serialises them correctly. "
+        plain "Server-side errors can be surfaced by rendering "
+        code(class: "font-mono text-sm") { "FormFieldError" }
+        plain " with content from "
+        code(class: "font-mono text-sm") { "model.errors.full_messages_for(:attr)" }
+        plain "."
+      end
+
+      Heading(level: 3) { "Minimal Rails form" }
+      Codeblock(<<~RUBY, syntax: :ruby)
+        # In your Phlex view, call form_with via helpers:
+        # form_with(url: users_path, method: :post) passes action + CSRF automatically.
+        #
+        # You can also set action and the CSRF token manually:
+        Form(action: helpers.users_path, method: "post", class: "w-2/3 space-y-6") do
+          input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token)
+
+          FormField do
+            FormFieldLabel(for: "user_email") { "Email" }
+            Input(
+              type: "email",
+              id: "user_email",
+              name: "user[email]",
+              placeholder: "you@example.com",
+              required: true
+            )
+            FormFieldError()
+          end
+
+          Button(type: "submit") { "Continue" }
+        end
+      RUBY
+
+      Heading(level: 3) { "Devise-style login form" }
+      Codeblock(<<~RUBY, syntax: :ruby)
+        # Full sign-in form mirroring Devise session[email] / session[password] params.
+        # Pass backend errors (e.g. "Invalid email or password") into FormFieldError.
+        Form(action: helpers.user_session_path, method: "post", class: "space-y-6") do
+          input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token)
+
+          FormField do
+            FormFieldLabel(for: "session_email") { "Email" }
+            Input(
+              type: "email",
+              id: "session_email",
+              name: "session[email]",
+              placeholder: "you@example.com",
+              autocomplete: "email",
+              required: true
+            )
+            FormFieldError { @error_message }
+          end
+
+          FormField do
+            FormFieldLabel(for: "session_password") { "Password" }
+            Input(
+              type: "password",
+              id: "session_password",
+              name: "session[password]",
+              autocomplete: "current-password",
+              required: true,
+              minlength: "8"
+            )
+            FormFieldError()
+          end
+
+          FormField do
+            div(class: "flex items-center gap-2") do
+              Checkbox(id: "session_remember_me", name: "session[remember_me]", value: "1")
+              FormFieldLabel(for: "session_remember_me") { "Remember me" }
+            end
+          end
+
+          Button(type: "submit", class: "w-full") { "Sign in" }
+        end
+      RUBY
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))

data/lib/ruby_ui/table/table_docs.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 class Views::Docs::Table < Views::Base
-  Invoice = Struct.new(:identifier, :status, :method, :amount, keyword_init: true)
-  User = Struct.new(:avatar_url, :name, :username, :commits, :github_url, keyword_init: true)
+  Invoice = Struct.new(:identifier, :status, :method, :amount)
+  User = Struct.new(:avatar_url, :name, :username, :commits, :github_url)
 
   def view_template
     component = "Table"

data/lib/ruby_ui/tabs/tabs_docs.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Views::Docs::Tabs < Views::Base
-  Repo = Struct.new(:github_url, :name, :stars, :version, keyword_init: true)
+  Repo = Struct.new(:github_url, :name, :stars, :version)
 
   def view_template
     component = "Tabs"

data/lib/ruby_ui/tabs/tabs_trigger.rb

@@ -2,20 +2,24 @@
 
 module RubyUI
   class TabsTrigger < Base
-    def initialize(value:, **attrs)
+    def initialize(value:, as: :button, **attrs)
       @value = value
+      @as = as
       super(**attrs)
     end
 
     def view_template(&)
-      button(**attrs, &)
+      if @as == :a
+        a(**attrs, &)
+      else
+        button(**attrs, &)
+      end
     end
 
     private
 
     def default_attrs
-      {
-        type: :button,
+      base = {
         data: {
           ruby_ui__tabs_target: "trigger",
           action: "click->ruby-ui--tabs#show",
@@ -29,6 +33,8 @@ module RubyUI
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ]
       }
+      base[:type] = :button unless @as == :a
+      base
     end
   end
 end

data/lib/ruby_ui.rb

@@ -3,5 +3,5 @@
 require "date"
 
 module RubyUI
-  VERSION = "1.3.0"
+  VERSION = "1.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ruby_ui
 version: !ruby/object:Gem::Version
-  version: 1.3.0
+  version: 1.4.0
 platform: ruby
 authors:
 - George Kettle
@@ -453,7 +453,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.10
+rubygems_version: 3.6.9
 specification_version: 4
 summary: RubyUI is a UI Component Library for Ruby developers.
 test_files: []