action_validator 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 532de573ba9a7413bdfc6ffa8740a6ee28226d95ade42b47855fc5ab269fb01c
+  data.tar.gz: db4a16bf7690207e95bcb04503ca38f13512cc04d0a7acca5252a135bc32de3a
+SHA512:
+  metadata.gz: b107cc5fdfef31a1b03cf762f4e18b3cf576de2c1bb060a5dbce9b3c577b8b1412e1c2329990b5e63ffd2d5e19bb658d146a249212213ef80c7617e646b4b183
+  data.tar.gz: 500aa58f0c13bde306b4bfe682cb285819e53ba3cfea8ea71e58210d527b8cab134c01e2fbecdcfde122c8b8778e821e90357ea2759ade1f89287f57176ce2e6

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2023 Darin Haener
+
+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,72 @@
+# ActionValidator
+
+ActionValidator is a Rails engine that provides a simple way to perform dynamic client and server side validations
+for your Rails forms.
+
+It leverages native HTML5 validations by default and will only perform server side validations if the HTML5 validation
+passes.
+
+Behind the scenes, ActionValidator uses ActionCable to perform the server side validations. Any validations that exist
+on your model will be automatically validated on the server side, and if there are any errors, they will be returned
+to the client and displayed in the appropriate form field.
+
+## Usage
+
+Usage of this gem is very straightforward. There are two helper methods that you can use to render your forms.
+
+### validator_form_for
+
+This is the same as the standard Rails `form_for` helper, but it ensures your form uses the `ActionValidator::FormBuilder`
+to build your forms and automatically adds all of the necessary attributes to the form.
+
+If you have your own custom form builder, make sure to inherit from `ActionValidator::FormBuilder` and set that as
+your default builder in your `application_controller.rb` file.
+
+Also be sure to call `super` in any form builder methods that you override, otherwise you will not get the necessary
+attributes added to your form.
+
+### validator_form_with
+
+This is the same as the standard Rails `form_with` helper and provides the same functionality as `validator_form_for`.
+
+### validator_error
+
+This helper method will render a div with the correct Stimulus data attributes on it so that errors can be displayed
+on your form.
+
+## Requirements
+
+All of the JavaScript for ActionValidator is shipped with the gem and currently only supports integration when using
+Importmaps.
+
+## Example
+
+Check the [dummy app](https://github.com/dphaener/action_validator/tree/main/test/dummy) for a working example of how the gem can be used.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "action_validator"
+```
+
+And then execute:
+
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+
+```bash
+$ gem install action_validator
+```
+
+## Contributing
+
+Contribution directions go here.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+require "bundler/setup"
+
+require "bundler/gem_tasks"

data/app/assets/config/action_validator_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../../javascript/action_validator .js
+//= link_directory ../../javascript/action_validator/controllers .js

data/app/channels/action_validator/form_channel.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module ActionValidator
+  class FormChannel < ApplicationCable::Channel
+    include ActiveSupport::Configurable
+    include ActionController::RequestForgeryProtection
+
+    def subscribed
+      stream_from "action_validator_form_channel"
+    end
+
+    def unsubscribed
+      stop_all_streams
+    end
+
+    def validate(data)
+      model_class, params = parse_params(data["formData"])
+      if model_class.nil?
+        Rails.logger.warn("No valid model class found, cannot perform remote validation.")
+        ActionCable.server.broadcast("action_validator_form_channel", { errors: {} })
+        return
+      end
+
+      instance = validated_instance(model_class, params)
+
+      ActionCable.server.broadcast("action_validator_form_channel", { errors: parse_model_errors(instance) })
+    end
+
+    private
+
+    def validated_instance(model_class, params)
+      instance = model_class.new(params)
+      instance.validate
+      instance
+    end
+
+    def parse_model_errors(instance)
+      # TODO: What about errors on :base? Or any other random shit people might add?
+      #       I think we can just tell people to add a div with the proper attribute?
+      #       Or just don't allow it?
+      #
+      instance.errors.each_with_object({}) { |error, hash| hash[error.attribute] = error.full_message }
+    end
+
+    def parse_params(data)
+      parsed_params = Rack::Utils.parse_nested_query(data).without("action", "authenticity_token")
+      params = ActionController::Parameters.new(parsed_params).to_unsafe_h
+      model_name = params.keys.first
+      model_class = model_name.classify.safe_constantize
+
+      [model_class, params[model_name]]
+    end
+  end
+end

data/app/helpers/action_validator/form_helper.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module ActionValidator
+  # Form helpers that will render a standard Rails `form_for` or `form_with` that has all of the necessary attributes
+  # added for the ActionValidator Stimulus controller to work.
+  #
+  module FormHelper
+    # A wrapper around the Rails form_for helper. This method can be used exactly the same as the standard Rails helper.
+    #
+    def validator_form_for(record, options = {}, &block) merge_form_options(options)
+
+      form_for(record, options, &block)
+    end
+
+    # A wrapper around the Rails form_with helper. This method can be used exactly the same as the standard Rails
+    # helper.
+    #
+    def validator_form_with(model: nil, scope: nil, url: nil, format: nil, **options, &block)
+      merge_form_options(options)
+
+      form_with(model: model, scope: scope, url: url, format: format, **options, &block)
+    end
+
+    # Renders an unstyled div with the correct Stimulus data attributes on it.
+    #
+    def validator_error(attribute, options = {})
+      options[:data] ||= {}
+      options[:data][ActionValidator::STIMULUS_SELECTORS[:target]] = :error
+      options[:data][:attribute] = attribute
+
+      tag.div({ **options, id: attribute }) { '' }
+    end
+
+    private
+
+    def merge_form_options(options)
+      default_builder = ActionView::Base.default_form_builder
+      options[:builder] ||= default_builder || ActionValidator::FormBuilder
+      options[:data] ||= {}
+      options[:data].merge!(
+        controller: ActionValidator::STIMULUS_SELECTORS[:controller],
+        form_error_selector_value: ActionValidator.form_error_selector,
+        input_error_selector_value: ActionValidator.input_error_selector
+      )
+    end
+  end
+end

data/app/javascript/action_validator/controllers/form_controller.js

@@ -0,0 +1,151 @@
+import { Controller } from "@hotwired/stimulus"
+import consumer from "channels/consumer";
+
+export default class extends Controller {
+  static targets = ['submit', 'input', 'error'];
+  static values = { modelName: String };
+
+  connect() {
+    // TODO: This might not JUST be inputs. It could be any DOM element. Maybe a better name is needed here.
+    //       `remoteValidatableElements` or something. The current set up doesn't really work well for this though
+    //       because the `remoteValidatableInputs` is directly tied to an actual input. Maybe the cableReceived method
+    //       should check for another `target` that matches the `errors` key in the return value if the error element
+    //       doesn't exist for that attribute...
+    //
+    this.remoteValidatableInputs = []
+    this.channel = consumer.subscriptions.create('ActionValidator::FormChannel', {
+      connected: this.#cableConnected.bind(this),
+      disconnected: this.#cableDisconnected.bind(this),
+      received: this.#cableReceived.bind(this),
+    });
+
+    this.inputTargets.forEach(input => {
+      if (input.dataset.remoteValidate === 'true') this.remoteValidatableInputs.push(input);
+    });
+
+    this.#disableSubmit();
+  }
+
+  validateForm() {
+    if (this.#formValid()) {
+      this.#enableSubmit();
+    } else {
+      this.#disableSubmit();
+    }
+  }
+
+  validate(ev) {
+    const inputElement = ev.target;
+    const { dataset: { remoteValidate } } = inputElement;
+    this.#checkAndSetDirty(inputElement);
+    if (inputElement.dataset.isDirty === 'false') return;
+
+    const htmlValid = this.validateInput(ev.target);
+
+    if (remoteValidate === 'true' && htmlValid) {
+     this.channel.perform('validate', { formData: this.#serializeForm() });
+    } else {
+      this.validateForm();
+    }
+  }
+
+  validateInput(input) {
+    input.setCustomValidity('');
+    const isValid = input.checkValidity();
+    const errorElement = this.errorTargets.find(target => input.dataset.attribute === target.dataset.attribute);
+
+    if (isValid) {
+      errorElement.innerHTML = '';
+      input.dataset.valid = true;
+
+      return true;
+    } else {
+      errorElement.innerHTML = input.validationMessage;
+      input.dataset.valid = false;
+
+      return false;
+    }
+  }
+
+  debouncedValidate(ev) {
+    clearTimeout(this.timeout);
+
+    this.timeout = setTimeout(this.validate.bind(this, ev), 500);
+  }
+
+  #checkAndSetDirty(element) {
+    const currentlyDirty = element.dataset.isDirty;
+    const value = element.value;
+
+    if (currentlyDirty === 'false' && value) element.dataset.isDirty = true;
+  }
+
+  #serializeForm() {
+    const formData = new FormData(this.element);
+    const queryString = new URLSearchParams(formData).toString()
+
+    return queryString;
+  }
+
+  #formValid() {
+    return this.inputTargets.every(element => element.dataset.valid === 'true');
+  }
+
+  // TODO: Add an option to just show errors globally somewhere and not next to each input. We should support arbitrary
+  //       error messages that map to some sort of error container with a `errorTarget` that maps to the attribute name.
+  //
+  #cableReceived(data) {
+    const { errors } = data;
+
+    this.remoteValidatableInputs.forEach(inputElement => {
+      if (inputElement.dataset.isDirty === 'false') return;
+
+      const attributeName = inputElement.dataset.attribute;
+      const error = errors[attributeName];
+      const errorElement = this.errorTargets.find(target => attributeName === target.dataset.attribute);
+      if (!errorElement) {
+        Stimulus.logDebugActivity(
+          `No error element found for input with attribute '${attributeName}'. Cannot add error.`,
+          'cableReceived'
+        );
+        return;
+      }
+
+      if (error) {
+        errorElement.innerHTML = errors[attributeName];
+        inputElement.setCustomValidity(errors[attributeName]);
+        inputElement.dataset.valid = false;
+      } else {
+        errorElement.innerHTML = '';
+        inputElement.setCustomValidity('');
+        inputElement.dataset.valid = true;
+      }
+    })
+
+    this.validateForm();
+  }
+
+  #disableSubmit() {
+    if (this.hasSubmitTarget) {
+      this.submitTarget.setAttribute('disabled', true);
+    } else {
+      Stimulus.logDebugActivity('No submit target found for form', 'disableSubmit');
+    }
+  }
+
+  #enableSubmit() {
+    if (this.hasSubmitTarget) {
+      this.submitTarget.removeAttribute('disabled');
+    } else {
+      Stimulus.logDebugActivity('No submit target found for form', 'enableSubmit');
+    }
+  }
+
+  #cableConnected() {
+    Stimulus.logDebugActivity('ActionValidator connected to cable', 'cableConnected');
+  }
+
+  #cableDisconnected() {
+    Stimulus.logDebugActivity('ActionValidator disconnected from cable', 'cableDisconnected');
+  }
+}

data/config/importmap.rb

@@ -0,0 +1,7 @@
+pin "application-action-validator", to: "action_validator/application.js", preload: true
+pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
+pin_all_from(
+  ActionValidator::Engine.root.join("app/javascript/action_validator/controllers"),
+  under: "controllers/action_validator",
+  to: "action_validator/controllers"
+)

data/lib/action_validator/engine.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module ActionValidator
+  # The Rails engine for ActionValidator
+  #
+  class Engine < ::Rails::Engine
+    isolate_namespace ActionValidator
+
+    initializer "action_validator.helpers", before: :load_config_initializers do
+      ActiveSupport.on_load(:action_controller_base) do
+        helper ActionValidator::Engine.helpers
+      end
+    end
+
+    initializer "action_validator.assets" do |app|
+      app.config.assets.paths << root.join("app/javascript")
+      app.config.assets.precompile += %w[action_validator_manifest]
+    end
+
+    initializer "action_validator.importmap", before: "importmap" do |app|
+      if app.config.respond_to?(:importmap)
+        app.config.importmap.paths << root.join("config/importmap.rb")
+        app.config.importmap.cache_sweepers << root.join("app/javascript")
+      end
+    end
+  end
+end

data/lib/action_validator/form_builder.rb

@@ -0,0 +1,142 @@
+# frozen_string_literal: true
+
+module ActionValidator
+  # A custom FormBuilder class that renders inputs with all the necessary attributes for the ActionValidator Stimulus
+  # controller to work.
+  #
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    def select(method, choices = nil, options = {}, html_options = {}, &block) # :nodoc:
+      options[:data] ||= {}
+      options[:data].merge!(input_data_options(attribute, options))
+
+      super
+    end
+
+    def error(attribute, options = {}) # :nodoc:
+      options[:data] ||= {}
+      options[:data][ActionValidator::STIMULUS_SELECTORS[:target]] = :error
+      options[:data][:attribute] = attribute
+
+      @template.tag(:div, { **options, id: attribute })
+    end
+
+    def submit(value = nil, options = {}, &block) # :nodoc:
+      if value.is_a?(Hash)
+        options = value
+        value = nil
+      end
+      options[:data] ||= {}
+      options[:data].merge!("action-validator--form-target" => :submit)
+
+      super
+    end
+
+    def text_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def number_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def date_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def text_area(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def email_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def phone_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def check_box(attribute, options = {}, checked_value = "1", unchecked_value = "0") # :nodoc:
+      options[:data] ||= {}
+      options[:data].merge!(input_data_options(attribute, options))
+
+      super(attribute, options, checked_value, unchecked_value)
+    end
+
+    def datetime_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def datetime_local_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def file_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def hidden_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def month_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def password_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def radio_button(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def range_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def rich_text_area(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def search_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def telephone_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def time_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def url_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    def week_field(attribute, options = {}) # :nodoc:
+      render_field(attribute, options) { super }
+    end
+
+    private
+
+    def render_field(attribute, options = {})
+      options[:data] ||= {}
+      options[:data].merge!(input_data_options(attribute, options))
+
+      yield
+    end
+
+    def input_data_options(attribute, options)
+      validate_event = options.delete(:validate_event) || ActionValidator.default_validate_event
+      {
+        ActionValidator::STIMULUS_SELECTORS[:target] => :input,
+        "is-dirty" => false,
+        "remote-validate" => options.delete(:remote_validate) || false,
+        "action" => "#{validate_event}->#{ActionValidator::STIMULUS_SELECTORS[:validate_action]}",
+        "attribute" => attribute,
+        "valid" => !options[:required]
+      }
+    end
+  end
+end

data/lib/action_validator/version.rb

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

data/lib/action_validator.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "action_validator/version"
+require "action_validator/engine"
+require "action_validator/form_builder"
+
+# The main module and configuration for ActionValidator.
+#
+module ActionValidator
+  mattr_accessor :form_error_selector, default: :form_errors
+  mattr_accessor :input_error_selector, default: :input_error
+  mattr_accessor :default_validate_event, default: :blur
+
+  STIMULUS_SELECTORS = {
+    target: "action-validator--form-target",
+    controller: "action-validator--form",
+    validate_action: "action-validator--form#validate"
+  }.freeze
+
+  def self.setup
+    yield self
+  end
+end

data/lib/tasks/action_validator_tasks.rake

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+# desc "Explaining what the task does"
+namespace :action_validator do
+  task :install do
+    # TODO: Create default initializer in config/initializers/action_validator.rb
+  end
+end

metadata

@@ -0,0 +1,159 @@
+--- !ruby/object:Gem::Specification
+name: action_validator
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Darin Haener
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2024-11-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.4
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.1.5
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.1.5
+- !ruby/object:Gem::Dependency
+  name: puma
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  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: sassc-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+- !ruby/object:Gem::Dependency
+  name: stimulus-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.1.1
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.1.1
+- !ruby/object:Gem::Dependency
+  name: turbo-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.3.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.3.2
+description: Validate your Rails forms remotely in real time using ActionCable. Also
+  validate client side using native HTML validations and present them in a much 'prettier'
+  format.
+email:
+- darin.haener@hey.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/action_validator_manifest.js
+- app/channels/action_validator/form_channel.rb
+- app/helpers/action_validator/form_helper.rb
+- app/javascript/action_validator/controllers/form_controller.js
+- config/importmap.rb
+- lib/action_validator.rb
+- lib/action_validator/engine.rb
+- lib/action_validator/form_builder.rb
+- lib/action_validator/version.rb
+- lib/tasks/action_validator_tasks.rake
+homepage: https://www.github.com/dphaener/action_validator
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://www.github.com/dphaener/action_validator
+  source_code_uri: https://www.github.com/dphaener/action_validator
+  changelog_uri: https://www.github.com/dphaener/action_validator/CHANGELOG.md
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.22
+signing_key:
+specification_version: 4
+summary: Simple client and server side form validation.
+test_files: []