moderntw_confirms 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 699d66807d16cb4cc6fefb0cc5ce9e0fc9b2cebeb1f4675d0199fac4ce7d63b6
+  data.tar.gz: dc52fe74b4c4af10f0615a559c3b24ccdb03570f14bc5e486f83c02de65924e3
+SHA512:
+  metadata.gz: ea3e7d14c539f7e6bad0dad77228dc856c5d93ce1174129b3707eb0d7afe2324f6ca122737185345cecaed96f9dcd5599de4452f77eb9efe57d7c83552613f38
+  data.tar.gz: 5726f6f98b8962720b67b13a81a26dc8c04f77b362dbc75768b959c0fa85a9d4f65de960fb468eec45106c9556f3197a3f063ec7c3ec2f60873896edc764dad8

data/.rspec

@@ -0,0 +1,3 @@
+--format documentation
+--color
+--require spec_helper

data/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2025-10-21
+
+### Added
+- Initial release
+- Automatic interception of Rails `data-confirm` attributes
+- Support for Turbo `data-turbo-confirm` attributes
+- Beautiful Tailwind CSS modal design
+- Smooth fade and scale animations
+- Keyboard navigation support (ESC to cancel, Enter to confirm)
+- Rails generator for easy installation
+- Support for importmap, Webpacker, and Asset Pipeline
+- Optional Stimulus controller for advanced customization
+- Configurable Tailwind classes via initializer
+- Dynamic content support (works with AJAX/Turbo loaded content)
+- Focus management for accessibility

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Robin Ciubotaru
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,173 @@
+# ModernTW Confirms
+
+Beautiful Tailwind CSS confirmation modals for Rails applications. Drop-in replacement for browser confirmation dialogs.
+
+[![Gem Version](https://badge.fury.io/rb/moderntw_confirms.svg)](https://badge.fury.io/rb/moderntw_confirms)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- **Zero Configuration** - Works with your existing Rails code immediately
+- **Beautiful Design** - Tailwind CSS powered modals with smooth animations
+- **Smart Detection** - Automatically styles destructive actions in red
+- **Fully Responsive** - Works perfectly on mobile, tablet, and desktop
+- **Turbo Ready** - Full support for Rails 7+ Turbo and Turbo Streams
+- **Accessible** - Keyboard navigation, focus management, and ARIA labels
+- **Production Ready** - Error boundaries with automatic fallback to native confirms
+- **Customizable** - Easy to modify styles to match your design system
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'moderntw_confirms'
+```
+
+And then execute:
+
+```bash
+bundle install
+```
+
+Run the installation generator:
+
+```bash
+rails generate moderntw_confirms:install
+```
+
+This will:
+- Add the modal partial to your layouts
+- Configure JavaScript based on your setup (Importmap, Webpacker, or Asset Pipeline)
+- Create an optional configuration initializer
+
+## Usage
+
+After installation, all your existing confirmation dialogs will automatically use the new modals. No code changes required!
+
+### Existing code that just works:
+
+```erb
+<!-- Links with confirmations -->
+<%= link_to "Delete", item_path(@item),
+    method: :delete,
+    data: { confirm: "Are you sure?" } %>
+
+<!-- Buttons with confirmations -->
+<%= button_to "Remove", item_path(@item),
+    method: :delete,
+    data: { turbo_confirm: "Delete this item?" } %>
+
+<!-- Forms with confirmations -->
+<%= form_with model: @user,
+    data: { turbo_confirm: "Save changes?" } do |form| %>
+  <!-- form fields -->
+<% end %>
+```
+
+### Smart Styling
+
+The gem automatically detects destructive actions and styles them appropriately:
+
+- **Red modals** for: delete, remove, destroy, reset, clear, cancel
+- **Blue modals** for: save, update, submit, confirm, proceed
+
+## Customization
+
+### Quick Styling Changes
+
+After installation, the modal HTML lives in `app/views/shared/_moderntw_confirms_modal.html.erb`. You can directly edit:
+
+```erb
+<!-- Change colors, sizes, spacing as needed -->
+<div class="rounded-2xl bg-white p-6">
+  <!-- Your customizations here -->
+</div>
+```
+
+### Configuration Options
+
+Create an initializer to configure the gem:
+
+```ruby
+# config/initializers/moderntw_confirms.rb
+ModerntwConfirms.configure do |config|
+  config[:backdrop_class] = "bg-black/50"
+  config[:modal_class] = "rounded-3xl shadow-2xl"
+  config[:confirm_button_class] = "bg-indigo-600 hover:bg-indigo-700"
+  config[:cancel_button_class] = "bg-gray-200 hover:bg-gray-300"
+end
+```
+
+### Animation Customization
+
+The animations use CSS transitions and can be modified in the modal partial:
+
+```css
+/* Smooth fade in/out */
+#moderntw-confirm-modal {
+  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Bounce effect on modal */
+#moderntw-confirm-modal [data-modal-panel] {
+  transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+```
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 78+
+- Safari 14+
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+The modal includes automatic fallback to native browser confirms for older browsers or if JavaScript fails.
+
+## Rails Compatibility
+
+- Rails 6.1+ with Webpacker or Asset Pipeline
+- Rails 7.0+ with Importmap, Webpacker, or Asset Pipeline
+- Full Turbo and Turbo Streams support
+- Works with both `data-confirm` (Rails UJS) and `data-turbo-confirm` (Turbo)
+
+## Development
+
+After checking out the repo, set up the test app:
+
+```bash
+cd test_confirms_app
+bundle install
+rails server
+```
+
+Visit http://localhost:3000 to see the examples.
+
+### Running Tests
+
+```bash
+bundle exec rspec
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/rcbt17/moderntw_confirms. This project is intended to be a safe, welcoming space for collaboration.
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Author
+
+**Robin Ciubotaru**
+[GitHub](https://github.com/rcbt17)
+
+## Acknowledgments
+
+Built with Rails and Tailwind CSS. Special thanks to the Rails and Hotwire communities for their excellent frameworks.

data/Rakefile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+require "rubocop/rake_task"
+
+RuboCop::RakeTask.new
+
+task default: %i[spec rubocop]

data/lib/generators/moderntw_confirms/install/install_generator.rb

@@ -0,0 +1,125 @@
+require "rails/generators"
+
+module ModerntwConfirms
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      desc "Install ModerntwConfirms and configure your application"
+
+      def install_javascript
+        if using_importmap?
+          install_with_importmap
+        elsif using_webpacker?
+          install_with_webpacker
+        else
+          install_with_asset_pipeline
+        end
+      end
+
+      def copy_modal_partial
+        say "Copying modal partial", :green
+        copy_file "_moderntw_confirms_modal.html.erb", "app/views/shared/_moderntw_confirms_modal.html.erb"
+      end
+
+      def add_modal_to_layout
+        say "Adding modal to application layout", :green
+
+        layout_file = "app/views/layouts/application.html.erb"
+        if File.exist?(Rails.root.join(layout_file))
+          insert_into_file layout_file, before: "</body>" do
+            "\n    <%= render 'shared/moderntw_confirms_modal' %>\n  "
+          end
+        else
+          say "Please add <%= render 'shared/moderntw_confirms_modal' %> before </body> in your layout", :yellow
+        end
+      end
+
+      def add_stimulus_controller
+        if using_stimulus?
+          say "Adding Stimulus controller for ModerntwConfirms", :green
+          append_to_file "app/javascript/controllers/index.js" do
+            <<~JS
+
+              import ConfirmModalController from "moderntw_confirms/confirm_modal_controller"
+              application.register("moderntw-confirms", ConfirmModalController)
+            JS
+          end
+        end
+      end
+
+      def create_initializer
+        template "moderntw_confirms.rb", "config/initializers/moderntw_confirms.rb"
+      end
+
+      def display_post_install_message
+        say "\n  ModerntwConfirms has been installed successfully! 🎉", :green
+        say "\n  Next steps:", :yellow
+        say "  1. Make sure Tailwind CSS is installed and configured in your app"
+        say "  2. Restart your Rails server"
+        say "  3. All your data-confirm attributes will now use beautiful modals!"
+        say "\n  Configuration:", :yellow
+        say "  Edit config/initializers/moderntw_confirms.rb to customize modal styles"
+        say "\n  Usage:", :yellow
+        say "  Just use data-confirm as usual:"
+        say '  <%= link_to "Delete", item_path(@item), method: :delete, data: { confirm: "Are you sure?" } %>'
+        say "\n"
+      end
+
+      private
+
+      def using_importmap?
+        Rails.root.join("config", "importmap.rb").exist?
+      end
+
+      def using_webpacker?
+        defined?(Webpacker)
+      end
+
+      def using_stimulus?
+        Rails.root.join("app", "javascript", "controllers").exist?
+      end
+
+      def install_with_importmap
+        say "Installing ModerntwConfirms with importmap", :green
+        append_to_file "config/importmap.rb" do
+          <<~RUBY
+
+            # ModerntwConfirms
+            pin "moderntw_confirms", to: "moderntw_confirms.js"
+            pin "moderntw_confirms/confirm_modal_controller", to: "moderntw_confirms/confirm_modal_controller.js"
+          RUBY
+        end
+
+        append_to_file "app/javascript/application.js" do
+          <<~JS
+
+            // ModerntwConfirms - Replace browser confirms with Tailwind modals
+            import "moderntw_confirms"
+          JS
+        end
+      end
+
+      def install_with_webpacker
+        say "Installing ModerntwConfirms with Webpacker", :green
+        append_to_file "app/javascript/packs/application.js" do
+          <<~JS
+
+            // ModerntwConfirms - Replace browser confirms with Tailwind modals
+            require("moderntw_confirms")
+          JS
+        end
+      end
+
+      def install_with_asset_pipeline
+        say "Installing ModerntwConfirms with Asset Pipeline", :green
+        append_to_file "app/assets/javascripts/application.js" do
+          <<~JS
+
+            //= require moderntw_confirms
+          JS
+        end
+      end
+    end
+  end
+end

data/lib/generators/moderntw_confirms/install/templates/_moderntw_confirms_modal.html.erb

@@ -0,0 +1,104 @@
+<div id="moderntw-confirm-modal"
+     class="hidden fixed inset-0 z-[99999] overflow-y-auto"
+     aria-labelledby="moderntw-modal-title"
+     aria-modal="true"
+     role="dialog"
+     data-turbo-permanent>
+
+  <div class="fixed inset-0" data-modal-backdrop>
+    <div class="absolute inset-0 bg-gray-900/40 backdrop-blur-sm"></div>
+  </div>
+
+  <div class="fixed inset-0 overflow-y-auto">
+    <div class="flex min-h-full items-center justify-center p-4">
+
+      <div class="relative w-full max-w-md transform rounded-2xl bg-white p-0 text-left shadow-2xl transition-all"
+           data-modal-panel>
+
+        <div class="p-6">
+          <div class="flex items-start space-x-4">
+            <div class="flex-shrink-0">
+              <div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-50" data-modal-icon-wrapper>
+                <svg data-modal-icon="info" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <svg data-modal-icon="danger" class="hidden h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+            </div>
+
+            <div class="flex-1 pt-1">
+              <h3 class="text-lg font-semibold leading-6 text-gray-900" id="moderntw-modal-title" data-modal-title>
+                Confirmation Required
+              </h3>
+              <div class="mt-2">
+                <p class="text-sm text-gray-600" data-modal-message>
+                  Are you sure you want to continue with this action?
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+            <button type="button"
+                    data-modal-cancel
+                    class="inline-flex w-full justify-center rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 sm:w-auto">
+              Cancel
+            </button>
+            <button type="button"
+                    data-modal-confirm
+                    class="inline-flex w-full justify-center rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 sm:w-auto"
+                    data-confirm-default-class="inline-flex w-full justify-center rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 sm:w-auto"
+                    data-confirm-danger-class="inline-flex w-full justify-center rounded-xl bg-red-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 sm:w-auto">
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  #moderntw-confirm-modal {
+    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    will-change: opacity;
+  }
+
+  #moderntw-confirm-modal.modal-showing {
+    opacity: 1;
+  }
+
+  #moderntw-confirm-modal:not(.modal-showing) {
+    opacity: 0;
+  }
+
+  #moderntw-confirm-modal [data-modal-panel] {
+    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    will-change: transform, opacity;
+  }
+
+  #moderntw-confirm-modal.modal-showing [data-modal-panel] {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+
+  #moderntw-confirm-modal:not(.modal-showing) [data-modal-panel] {
+    transform: scale(0.9) translateY(20px);
+    opacity: 0;
+  }
+
+  @supports (backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px)) {
+    #moderntw-confirm-modal [data-modal-backdrop] > div {
+      -webkit-backdrop-filter: blur(12px);
+      backdrop-filter: blur(12px);
+    }
+  }
+
+  @supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
+    #moderntw-confirm-modal [data-modal-backdrop] > div {
+      background-color: rgba(17, 24, 39, 0.75);
+    }
+  }
+</style>

data/lib/generators/moderntw_confirms/install/templates/moderntw_confirms.rb

@@ -0,0 +1,20 @@
+ModerntwConfirms.configure do |config|
+  # Customize the Tailwind classes for the modal components
+  # These are the default values - modify them to match your design system
+
+  # Background overlay classes
+  config[:backdrop_class] = "bg-black bg-opacity-50"
+
+  # Modal container classes
+  config[:modal_class] = "bg-white rounded-lg shadow-xl"
+
+  # Confirm button classes
+  config[:confirm_button_class] = "bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
+
+  # Cancel button classes
+  config[:cancel_button_class] = "bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded"
+
+  # You can also add custom classes for specific use cases:
+  # For delete confirmations, you might want red buttons:
+  # config[:delete_confirm_button_class] = "bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded"
+end

data/lib/moderntw_confirms/engine.rb

@@ -0,0 +1,16 @@
+module ModerntwConfirms
+  class Engine < ::Rails::Engine
+    isolate_namespace ModerntwConfirms
+
+    initializer "moderntw_confirms.assets" do |app|
+      app.config.assets.paths << root.join("vendor", "assets", "javascripts")
+      app.config.assets.precompile += %w( moderntw_confirms.js )
+    end
+
+    initializer "moderntw_confirms.importmap", before: "importmap" do |app|
+      if defined?(Importmap)
+        app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+      end
+    end
+  end
+end

data/lib/moderntw_confirms/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module ModerntwConfirms
+  VERSION = "1.0.0"
+end

data/lib/moderntw_confirms.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require_relative "moderntw_confirms/version"
+require_relative "moderntw_confirms/engine" if defined?(Rails)
+
+module ModerntwConfirms
+  class Error < StandardError; end
+
+  mattr_accessor :config
+  self.config = {
+    backdrop_class: "bg-black bg-opacity-50",
+    modal_class: "bg-white rounded-lg shadow-xl",
+    confirm_button_class: "bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded",
+    cancel_button_class: "bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded"
+  }
+
+  def self.configure
+    yield config
+  end
+end

data/vendor/assets/javascripts/moderntw_confirms.js

@@ -0,0 +1,404 @@
+(function() {
+  'use strict';
+
+  class ModerntwConfirms {
+    constructor() {
+      this.modal = null;
+      this.currentCallback = null;
+      this.focusedElementBeforeModal = null;
+      this.initialized = false;
+      this.initializationAttempts = 0;
+      this.maxInitAttempts = 3;
+
+      try {
+        this.init();
+      } catch (error) {
+        console.error('ModerntwConfirms: Initialization failed', error);
+        this.fallbackToNative();
+      }
+    }
+
+    init() {
+      if (this.initialized || this.initializationAttempts >= this.maxInitAttempts) {
+        return;
+      }
+
+      this.initializationAttempts++;
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => this.setup());
+      } else {
+        this.setup();
+      }
+    }
+
+    setup() {
+      try {
+        this.modal = document.getElementById('moderntw-confirm-modal');
+
+        if (!this.modal) {
+          if (this.initializationAttempts < this.maxInitAttempts) {
+            setTimeout(() => this.init(), 500);
+            return;
+          } else {
+            console.warn('ModerntwConfirms: Modal not found after multiple attempts. Falling back to native confirms.');
+            this.fallbackToNative();
+            return;
+          }
+        }
+
+        this.setupModalElements();
+        this.interceptTurboConfirms();
+        this.setupModalHandlers();
+        this.initialized = true;
+
+      } catch (error) {
+        console.error('ModerntwConfirms: Setup failed', error);
+        this.fallbackToNative();
+      }
+    }
+
+    fallbackToNative() {
+      if (window.Turbo && window.Turbo.config && window.Turbo.config.forms) {
+        Turbo.config.forms.confirm = (message) => {
+          return Promise.resolve(window.confirm(message));
+        };
+      }
+    }
+
+    setupModalElements() {
+      this.backdrop = this.modal.querySelector('[data-modal-backdrop]');
+      this.panel = this.modal.querySelector('[data-modal-panel]');
+      this.messageEl = this.modal.querySelector('[data-modal-message]');
+      this.titleEl = this.modal.querySelector('[data-modal-title]');
+      this.confirmBtn = this.modal.querySelector('[data-modal-confirm]');
+      this.cancelBtn = this.modal.querySelector('[data-modal-cancel]');
+      this.iconWrapper = this.modal.querySelector('[data-modal-icon-wrapper]');
+      this.infoIcon = this.modal.querySelector('[data-modal-icon="info"]');
+      this.dangerIcon = this.modal.querySelector('[data-modal-icon="danger"]');
+
+      if (!this.messageEl || !this.confirmBtn || !this.cancelBtn) {
+        throw new Error('Critical modal elements not found');
+      }
+    }
+
+    interceptTurboConfirms() {
+      const self = this;
+
+      if (window.Turbo && window.Turbo.config && window.Turbo.config.forms) {
+        Turbo.config.forms.confirm = (message) => {
+          return new Promise((resolve) => {
+            try {
+              self.showModal(message, resolve);
+            } catch (error) {
+              console.error('ModerntwConfirms: Error showing modal', error);
+              resolve(window.confirm(message));
+            }
+          });
+        };
+      }
+
+      this.formSubmitHandler = (event) => {
+        try {
+          const element = event.target;
+          const message = element.getAttribute('data-turbo-confirm') || element.getAttribute('data-confirm');
+
+          if (message && !element.hasAttribute('data-moderntw-confirmed')) {
+            event.preventDefault();
+
+            if (event.detail && event.detail.formSubmission) {
+              event.detail.formSubmission.stop();
+            }
+
+            this.showModal(message, (confirmed) => {
+              if (confirmed) {
+                element.setAttribute('data-moderntw-confirmed', 'true');
+                element.requestSubmit();
+                setTimeout(() => element.removeAttribute('data-moderntw-confirmed'), 100);
+              }
+            });
+          }
+        } catch (error) {
+          console.error('ModerntwConfirms: Error in form submit handler', error);
+        }
+      };
+
+      document.addEventListener('turbo:submit-start', this.formSubmitHandler);
+
+      this.clickHandler = (event) => {
+        try {
+          let element = event.target;
+
+          while (element && element !== document.body) {
+            if (element.hasAttribute('data-turbo-confirm') || element.hasAttribute('data-confirm')) {
+              break;
+            }
+            element = element.parentElement;
+          }
+
+          if (!element || element === document.body) return;
+
+          const message = element.getAttribute('data-turbo-confirm') || element.getAttribute('data-confirm');
+
+          if (message && !element.hasAttribute('data-moderntw-confirmed')) {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+
+            this.showModal(message, (confirmed) => {
+              if (confirmed) {
+                element.setAttribute('data-moderntw-confirmed', 'true');
+
+                const turboConfirm = element.getAttribute('data-turbo-confirm');
+                const dataConfirm = element.getAttribute('data-confirm');
+                element.removeAttribute('data-turbo-confirm');
+                element.removeAttribute('data-confirm');
+
+                if (element.tagName === 'FORM') {
+                  element.requestSubmit();
+                } else if (element.tagName === 'BUTTON' && element.form) {
+                  element.form.requestSubmit(element);
+                } else {
+                  element.click();
+                }
+
+                setTimeout(() => {
+                  if (turboConfirm) element.setAttribute('data-turbo-confirm', turboConfirm);
+                  if (dataConfirm) element.setAttribute('data-confirm', dataConfirm);
+                  element.removeAttribute('data-moderntw-confirmed');
+                }, 100);
+              }
+            });
+
+            return false;
+          }
+        } catch (error) {
+          console.error('ModerntwConfirms: Error in click handler', error);
+        }
+      };
+
+      document.addEventListener('click', this.clickHandler, true);
+    }
+
+    setupModalHandlers() {
+      if (this.cancelBtn) {
+        this.cancelBtnHandler = () => this.handleAction(false);
+        this.cancelBtn.addEventListener('click', this.cancelBtnHandler);
+      }
+
+      if (this.backdrop) {
+        this.backdropHandler = () => this.handleAction(false);
+        this.backdrop.addEventListener('click', this.backdropHandler);
+      }
+
+      if (this.confirmBtn) {
+        this.confirmBtnHandler = () => this.handleAction(true);
+        this.confirmBtn.addEventListener('click', this.confirmBtnHandler);
+      }
+
+      this.escHandler = (e) => {
+        if (e.key === 'Escape' && this.isModalOpen()) {
+          e.preventDefault();
+          this.handleAction(false);
+        }
+      };
+      document.addEventListener('keydown', this.escHandler);
+
+      this.tabHandler = (e) => {
+        if (e.key === 'Tab' && this.isModalOpen()) {
+          this.trapFocus(e);
+        }
+      };
+      this.modal.addEventListener('keydown', this.tabHandler);
+    }
+
+    showModal(message, callback) {
+      if (!this.modal || !this.initialized) {
+        const result = window.confirm(message);
+        if (callback) callback(result);
+        return;
+      }
+
+      try {
+        this.currentCallback = callback;
+        this.focusedElementBeforeModal = document.activeElement;
+
+        if (this.messageEl) {
+          this.messageEl.textContent = String(message || 'Are you sure?');
+        }
+
+        const isDanger = /delete|remove|destroy|reset|clear|drop|erase|cancel/i.test(message);
+        this.setModalType(isDanger ? 'danger' : 'info');
+
+        this.modal.classList.remove('hidden');
+        this.modal.offsetHeight;
+
+        requestAnimationFrame(() => {
+          this.modal.classList.add('modal-showing');
+        });
+
+        setTimeout(() => {
+          if (this.confirmBtn) {
+            this.confirmBtn.focus();
+          }
+        }, 100);
+
+        document.body.style.overflow = 'hidden';
+
+      } catch (error) {
+        console.error('ModerntwConfirms: Error showing modal', error);
+        const result = window.confirm(message);
+        if (callback) callback(result);
+      }
+    }
+
+    setModalType(type) {
+      try {
+        const defaultBtnClass = this.confirmBtn?.getAttribute('data-confirm-default-class');
+        const dangerBtnClass = this.confirmBtn?.getAttribute('data-confirm-danger-class');
+
+        if (type === 'danger') {
+          if (this.infoIcon) this.infoIcon.classList.add('hidden');
+          if (this.dangerIcon) this.dangerIcon.classList.remove('hidden');
+          if (this.iconWrapper) {
+            this.iconWrapper.className = 'flex h-12 w-12 items-center justify-center rounded-full bg-red-50';
+          }
+
+          if (this.confirmBtn && dangerBtnClass) {
+            this.confirmBtn.className = dangerBtnClass;
+          }
+
+          if (this.titleEl) {
+            this.titleEl.textContent = 'Are you absolutely sure?';
+          }
+        } else {
+          if (this.infoIcon) this.infoIcon.classList.remove('hidden');
+          if (this.dangerIcon) this.dangerIcon.classList.add('hidden');
+          if (this.iconWrapper) {
+            this.iconWrapper.className = 'flex h-12 w-12 items-center justify-center rounded-full bg-blue-50';
+          }
+
+          if (this.confirmBtn && defaultBtnClass) {
+            this.confirmBtn.className = defaultBtnClass;
+          }
+
+          if (this.titleEl) {
+            this.titleEl.textContent = 'Confirmation Required';
+          }
+        }
+      } catch (error) {
+        console.error('ModerntwConfirms: Error setting modal type', error);
+      }
+    }
+
+    handleAction(confirmed) {
+      if (!this.modal) return;
+
+      try {
+        this.modal.classList.remove('modal-showing');
+
+        setTimeout(() => {
+          this.modal.classList.add('hidden');
+
+          document.body.style.overflow = '';
+
+          if (this.focusedElementBeforeModal && this.focusedElementBeforeModal.focus) {
+            try {
+              this.focusedElementBeforeModal.focus();
+            } catch (e) {
+            }
+          }
+
+          if (this.currentCallback) {
+            const callback = this.currentCallback;
+            this.currentCallback = null;
+            callback(confirmed);
+          }
+        }, 300);
+      } catch (error) {
+        console.error('ModerntwConfirms: Error handling action', error);
+        if (this.currentCallback) {
+          this.currentCallback(confirmed);
+        }
+      }
+    }
+
+    isModalOpen() {
+      return this.modal && !this.modal.classList.contains('hidden');
+    }
+
+    trapFocus(e) {
+      try {
+        const focusableElements = this.modal.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+
+        if (focusableElements.length === 0) return;
+
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+
+        if (e.shiftKey && document.activeElement === firstFocusable) {
+          e.preventDefault();
+          lastFocusable.focus();
+        } else if (!e.shiftKey && document.activeElement === lastFocusable) {
+          e.preventDefault();
+          firstFocusable.focus();
+        }
+      } catch (error) {
+        console.error('ModerntwConfirms: Error trapping focus', error);
+      }
+    }
+
+    destroy() {
+      if (this.formSubmitHandler) {
+        document.removeEventListener('turbo:submit-start', this.formSubmitHandler);
+      }
+      if (this.clickHandler) {
+        document.removeEventListener('click', this.clickHandler, true);
+      }
+      if (this.escHandler) {
+        document.removeEventListener('keydown', this.escHandler);
+      }
+      if (this.cancelBtn && this.cancelBtnHandler) {
+        this.cancelBtn.removeEventListener('click', this.cancelBtnHandler);
+      }
+      if (this.backdrop && this.backdropHandler) {
+        this.backdrop.removeEventListener('click', this.backdropHandler);
+      }
+      if (this.confirmBtn && this.confirmBtnHandler) {
+        this.confirmBtn.removeEventListener('click', this.confirmBtnHandler);
+      }
+      if (this.modal && this.tabHandler) {
+        this.modal.removeEventListener('keydown', this.tabHandler);
+      }
+    }
+  }
+
+  if (typeof window !== 'undefined') {
+    window.ModerntwConfirms = ModerntwConfirms;
+
+    const initializeOnce = () => {
+      try {
+        if (window.moderntwConfirmsInstance && window.moderntwConfirmsInstance.destroy) {
+          window.moderntwConfirmsInstance.destroy();
+        }
+
+        window.moderntwConfirmsInstance = new ModerntwConfirms();
+      } catch (error) {
+        console.error('ModerntwConfirms: Failed to initialize', error);
+      }
+    };
+
+    if (window.Turbo) {
+      initializeOnce();
+    }
+
+    document.addEventListener('turbo:load', initializeOnce);
+    document.addEventListener('DOMContentLoaded', initializeOnce);
+
+    if (document.readyState !== 'loading') {
+      setTimeout(initializeOnce, 100);
+    }
+  }
+})();

metadata

@@ -0,0 +1,101 @@
+--- !ruby/object:Gem::Specification
+name: moderntw_confirms
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Robin Ciubotaru
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2025-10-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: puma
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Automatically intercepts Rails data-confirm and data-turbo-confirm attributes,
+  replacing native browser dialogs with customizable Tailwind CSS modals
+email:
+- robinciubotaru17@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rspec"
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/generators/moderntw_confirms/install/install_generator.rb
+- lib/generators/moderntw_confirms/install/templates/_moderntw_confirms_modal.html.erb
+- lib/generators/moderntw_confirms/install/templates/moderntw_confirms.rb
+- lib/moderntw_confirms.rb
+- lib/moderntw_confirms/engine.rb
+- lib/moderntw_confirms/version.rb
+- vendor/assets/javascripts/moderntw_confirms.js
+homepage: https://github.com/rcbt17/moderntw_confirms
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/rcbt17/moderntw_confirms
+  source_code_uri: https://github.com/rcbt17/moderntw_confirms
+  changelog_uri: https://github.com/rcbt17/moderntw_confirms/blob/main/CHANGELOG.md
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.9
+signing_key:
+specification_version: 4
+summary: Replace browser confirm dialogs with modern Tailwind CSS modals in Rails
+test_files: []