yattho_view_components 0.0.1

data/lib/yattho/forms/toggle_switch.html.erb

@@ -0,0 +1,22 @@
+<%= content_tag("toggle-switch-input", **@input.input_arguments) do %>
+  <span style="flex-grow: 1">
+    <%= builder.label(@input.name, **@input.label_arguments) do %>
+      <%= @input.label %>
+    <% end %>
+    
+    <%= content_tag(:div, data: { target: "toggle-switch-input.validationElement" }, **@input.validation_arguments) do %>
+      <%= content_tag(:span, @input.validation_messages.first, data: { target: "toggle-switch-input.validationMessageElement" }, **@input.validation_message_arguments) %>
+    <% end %>
+
+    <div><%= render(Caption.new(input: @input)) %></div>
+  </span>
+  <%
+    csrf = @input.csrf || @view_context.form_authenticity_token(
+      form_options: {
+        method: :post,
+        action: @input.src
+      }
+    )
+  %>
+  <%= render(Yattho::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf)) %>
+<% end %>

data/lib/yattho/forms/toggle_switch.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Forms
+    # :nodoc:
+    class ToggleSwitch < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+        @input.add_label_classes("FormControl-label")
+        @input.add_input_classes("FormControl-toggleSwitchInput")
+        @input.input_arguments[:hidden] = "hidden" if @input.hidden?
+      end
+    end
+  end
+end

data/lib/yattho/forms/toggle_switch_form.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Forms
+    # Toggle switches are designed to submit an on/off value to the server immediately
+    # upon click. For that reason they are not designed to be used in "regular" forms
+    # that have other fields, etc. Instead they should be used independently via this
+    # class.
+    #
+    # ToggleSwitchForm can be used directly or via inheritance.
+    #
+    # Via inheritance:
+    #
+    # # app/forms/my_toggle_form.rb
+    # class MyToggleForm < Yattho::Forms::ToggleSwitchForm
+    #   def initialize(**system_arguments)
+    #     super(name: :foo, label: "Foo", src: "/foo", **system_arguments)
+    #   end
+    # end
+    #
+    # # app/views/some_view.html.erb
+    # <%= render(MyToggleForm.new) %>
+    #
+    # Directly:
+    #
+    # # app/views/some_view.html.erb
+    # <%= render(
+    #   Yattho::Forms::ToggleSwitchForm.new(
+    #     name: :foo, label: "Foo", src: "/foo"
+    #   )
+    # ) %>
+    #
+    class ToggleSwitchForm < Yattho::Forms::Base
+      # Define the form on subclasses so render(Subclass.new) works as expected.
+      def self.inherited(base)
+        base.form do |toggle_switch_form|
+          input = Dsl::ToggleSwitchInput.new(
+            builder: toggle_switch_form.builder, form: self, **@system_arguments
+          )
+
+          toggle_switch_form.send(:add_input, input)
+        end
+      end
+
+      # Define the form on self so render(ToggleSwitchForm.new) works as expected.
+      inherited(self)
+
+      # Override to avoid accepting a builder argument. We create our own builder
+      # on render. See the implementation of render_in below.
+      def self.new(**options)
+        allocate.tap { |obj| obj.send(:initialize, **options) }
+      end
+
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+      end
+
+      # Unlike other instances of Base, ToggleSwitchForm defines its own form and
+      # is not given a Rails form builder on instantiation. We do this mostly for
+      # ergonomic reasons; it's much less verbose than if you were required to
+      # call form_with/form_for, etc. That said, the rest of the forms framework
+      # assumes the presence of a builder so we create our own here. A builder
+      # cannot be constructed without a corresponding view context, which is why
+      # we have to override render_in and can't create it in the initializer.
+      def render_in(view_context, &block)
+        @builder = Yattho::Forms::Builder.new(
+          nil, nil, view_context, {}
+        )
+
+        super
+      end
+    end
+  end
+end

data/lib/yattho/forms/toggle_switch_input.d.ts

@@ -0,0 +1,5 @@
+export declare class ToggleSwitchInputElement extends HTMLElement {
+    validationElement: HTMLElement;
+    validationMessageElement: HTMLElement;
+    connectedCallback(): void;
+}

data/lib/yattho/forms/toggle_switch_input.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller, target } from '@github/catalyst';
+let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
+    connectedCallback() {
+        this.addEventListener('toggleSwitchError', (event) => {
+            this.validationMessageElement.innerText = event.detail;
+            this.validationElement.removeAttribute('hidden');
+        });
+        this.addEventListener('toggleSwitchSuccess', () => {
+            this.validationMessageElement.innerText = '';
+            this.validationElement.setAttribute('hidden', 'hidden');
+        });
+    }
+};
+__decorate([
+    target
+], ToggleSwitchInputElement.prototype, "validationElement", void 0);
+__decorate([
+    target
+], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
+ToggleSwitchInputElement = __decorate([
+    controller
+], ToggleSwitchInputElement);
+export { ToggleSwitchInputElement };

data/lib/yattho/forms/toggle_switch_input.ts

@@ -0,0 +1,19 @@
+import {controller, target} from '@github/catalyst'
+
+@controller
+export class ToggleSwitchInputElement extends HTMLElement {
+  @target validationElement: HTMLElement
+  @target validationMessageElement: HTMLElement
+
+  connectedCallback() {
+    this.addEventListener('toggleSwitchError', (event: Event) => {
+      this.validationMessageElement.innerText = (event as CustomEvent).detail
+      this.validationElement.removeAttribute('hidden')
+    })
+
+    this.addEventListener('toggleSwitchSuccess', () => {
+      this.validationMessageElement.innerText = ''
+      this.validationElement.setAttribute('hidden', 'hidden')
+    })
+  }
+}

data/lib/yattho/forms/utils.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Yattho
+  # :nodoc:
+  module Forms
+    # :nodoc:
+    module Utils
+      # Unfortunately this bug (https://github.com/ruby/ruby/pull/5646) prevents us from using
+      # Ruby's native Module.const_source_location. Instead we have to fudge it by searching
+      # for the file in the configured autoload paths. Doing so relies on Rails' autoloading
+      # conventions, so it should work ok. Zeitwerk also has this information but lacks a
+      # public API to map constants to source files.
+      def const_source_location(class_name)
+        # NOTE: underscore respects namespacing, i.e. will convert Foo::Bar to foo/bar.
+        class_path = "#{class_name.underscore}.rb"
+
+        ActiveSupport::Dependencies.autoload_paths.each do |autoload_path|
+          absolute_path = File.join(autoload_path, class_path)
+          return absolute_path if File.exist?(absolute_path)
+        end
+
+        nil
+      end
+    end
+
+    Utils.extend(Utils)
+  end
+end

data/lib/yattho/forms/yattho_multi_input.d.ts

@@ -0,0 +1,10 @@
+export declare class YatthoMultiInputElement extends HTMLElement {
+    fields: HTMLInputElement[];
+    activateField(name: string): void;
+    private findField;
+}
+declare global {
+    interface Window {
+        YatthoMultiInputElement: typeof YatthoMultiInputElement;
+    }
+}

data/lib/yattho/forms/yattho_multi_input.js

@@ -0,0 +1,45 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable custom-elements/expose-class-on-global */
+import { controller, targets } from '@github/catalyst';
+let YatthoMultiInputElement = class YatthoMultiInputElement extends HTMLElement {
+    activateField(name) {
+        var _a, _b;
+        const fieldWithName = this.findField(name);
+        if (!fieldWithName)
+            return;
+        for (const field of this.fields) {
+            if (field === fieldWithName)
+                continue;
+            field.setAttribute('disabled', 'disabled');
+            field.setAttribute('hidden', 'hidden');
+            (_a = field.parentElement) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'hidden');
+        }
+        fieldWithName.removeAttribute('disabled');
+        fieldWithName.removeAttribute('hidden');
+        (_b = fieldWithName.parentElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
+    }
+    findField(name) {
+        for (const field of this.fields) {
+            if (field.getAttribute('data-name') === name) {
+                return field;
+            }
+        }
+        return null;
+    }
+};
+__decorate([
+    targets
+], YatthoMultiInputElement.prototype, "fields", void 0);
+YatthoMultiInputElement = __decorate([
+    controller
+], YatthoMultiInputElement);
+export { YatthoMultiInputElement };
+if (!window.customElements.get('yattho-multi-input')) {
+    Object.assign(window, { YatthoMultiInputElement });
+    window.customElements.define('yattho-multi-input', YatthoMultiInputElement);
+}

data/lib/yattho/forms/yattho_multi_input.ts

@@ -0,0 +1,46 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+import {controller, targets} from '@github/catalyst'
+
+@controller
+export class YatthoMultiInputElement extends HTMLElement {
+  @targets fields: HTMLInputElement[]
+
+  activateField(name: string) {
+    const fieldWithName = this.findField(name)
+    if (!fieldWithName) return
+
+    for (const field of this.fields) {
+      if (field === fieldWithName) continue
+
+      field.setAttribute('disabled', 'disabled')
+      field.setAttribute('hidden', 'hidden')
+
+      field.parentElement?.setAttribute('hidden', 'hidden')
+    }
+
+    fieldWithName.removeAttribute('disabled')
+    fieldWithName.removeAttribute('hidden')
+    fieldWithName.parentElement?.removeAttribute('hidden')
+  }
+
+  private findField(name: string): HTMLElement | null {
+    for (const field of this.fields) {
+      if (field.getAttribute('data-name') === name) {
+        return field
+      }
+    }
+
+    return null
+  }
+}
+
+declare global {
+  interface Window {
+    YatthoMultiInputElement: typeof YatthoMultiInputElement
+  }
+}
+
+if (!window.customElements.get('yattho-multi-input')) {
+  Object.assign(window, { YatthoMultiInputElement })
+  window.customElements.define('yattho-multi-input', YatthoMultiInputElement)
+}

data/lib/yattho/forms/yattho_text_field.d.ts

@@ -0,0 +1 @@
+import '@github/auto-check-element';

data/lib/yattho/forms/yattho_text_field.js

@@ -0,0 +1,62 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _YatthoTextFieldElement_abortController;
+import '@github/auto-check-element';
+import { controller, target } from '@github/catalyst';
+let YatthoTextFieldElement = class YatthoTextFieldElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _YatthoTextFieldElement_abortController.set(this, void 0);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _YatthoTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        const { signal } = (__classPrivateFieldSet(this, _YatthoTextFieldElement_abortController, new AbortController(), "f"));
+        this.inputElement.addEventListener('auto-check-success', () => { this.clearError(); }, { signal });
+        this.inputElement.addEventListener('auto-check-error', (event) => {
+            event.detail.response.text().then((error_message) => { this.setError(error_message); });
+        }, { signal });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _YatthoTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.validationElement.hidden = true;
+        this.validationMessageElement.innerText = '';
+    }
+    setError(message) {
+        this.validationMessageElement.innerText = message;
+        this.validationElement.hidden = false;
+        this.inputElement.setAttribute('invalid', 'true');
+    }
+};
+_YatthoTextFieldElement_abortController = new WeakMap();
+__decorate([
+    target
+], YatthoTextFieldElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], YatthoTextFieldElement.prototype, "validationElement", void 0);
+__decorate([
+    target
+], YatthoTextFieldElement.prototype, "validationMessageElement", void 0);
+YatthoTextFieldElement = __decorate([
+    controller
+], YatthoTextFieldElement);

data/lib/yattho/forms/yattho_text_field.ts

@@ -0,0 +1,48 @@
+import '@github/auto-check-element'
+import {controller, target} from '@github/catalyst'
+
+@controller
+class YatthoTextFieldElement extends HTMLElement {
+  @target inputElement: HTMLInputElement
+  @target validationElement: HTMLElement
+  @target validationMessageElement: HTMLElement
+
+  #abortController: AbortController | null
+
+  connectedCallback(): void {
+    this.#abortController?.abort()
+    const {signal} = (this.#abortController = new AbortController())
+
+    this.inputElement.addEventListener(
+      'auto-check-success',
+      () => { this.clearError() },
+      {signal}
+    )
+
+    this.inputElement.addEventListener(
+      'auto-check-error',
+      (event: any) => {
+        event.detail.response.text().then(
+          (error_message: string) => { this.setError(error_message) }
+        )
+      },
+      {signal}
+    )
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort()
+  }
+
+  clearError(): void {
+    this.inputElement.removeAttribute('invalid')
+    this.validationElement.hidden = true
+    this.validationMessageElement.innerText = ''
+  }
+
+  setError(message: string): void {
+    this.validationMessageElement.innerText = message
+    this.validationElement.hidden = false
+    this.inputElement.setAttribute('invalid', 'true')
+  }
+}

data/lib/yattho/view_components/audited.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "json"
+
+module Yattho
+  # :nodoc:
+  module ViewComponents
+    AUDITED = JSON.parse(
+      File.read(
+        File.join(File.dirname(__FILE__), "../../../static/audited_at.json")
+      )
+    ).freeze
+  end
+end

data/lib/yattho/view_components/constants.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+require "json"
+
+module Yattho
+  module ViewComponents
+    # A module for constants that are used in the view components.
+    class Constants
+      CONSTANTS = JSON.parse(
+        File.read(
+          File.join(File.dirname(__FILE__), "../../../static/constants.json")
+        )
+      ).freeze
+
+      class << self
+        def get(component:, constant:, invert: true, symbolize: false)
+          values = CONSTANTS.dig(component, constant)
+
+          case values
+          when Hash
+            format_hash(values, invert, symbolize)
+          when Array
+            format_array(values, symbolize)
+          else
+            values
+          end
+        end
+
+        private
+
+        def format_hash(values, invert, symbolize)
+          val = invert ? values.invert : values
+          # remove defaults
+          val = val.except("", nil)
+
+          return val.transform_values { |v| symbolize_value(v) } if symbolize
+
+          val
+        end
+
+        def format_array(values, symbolize)
+          val = values.select(&:present?)
+
+          return val.map { |v| symbolize_value(v) } if symbolize
+
+          val
+        end
+
+        def symbolize_value(value)
+          ":#{value}"
+        end
+      end
+    end
+  end
+end

data/lib/yattho/view_components/engine.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+require "rails/engine"
+require "yattho/classify/utilities"
+
+module Yattho
+  module ViewComponents
+    # :nodoc:
+    class Engine < ::Rails::Engine
+      isolate_namespace Yattho::ViewComponents
+
+      config.autoload_paths = %W[
+        #{root}/lib
+      ]
+
+      config.eager_load_paths = %W[
+        #{root}/app/components
+        #{root}/app/forms
+        #{root}/app/helpers
+        #{root}/app/lib
+      ]
+
+      config.yattho_view_components = ActiveSupport::OrderedOptions.new
+
+      config.yattho_view_components.raise_on_invalid_options = false
+      config.yattho_view_components.silence_deprecations = false
+      config.yattho_view_components.validate_class_names = !Rails.env.production?
+      config.yattho_view_components.raise_on_invalid_aria = false
+
+      initializer "yattho_view_components.assets" do |app|
+        app.config.assets.precompile += %w[yattho_view_components] if app.config.respond_to?(:assets)
+      end
+
+      initializer "yattho.eager_load_actions" do
+        ActiveSupport.on_load(:after_initialize) do
+          if Rails.application.config.eager_load
+            Yattho::Forms::Base.compile!
+            Yattho::Forms::Base.descendants.each(&:compile!)
+            Yattho::Forms::BaseComponent.descendants.each(&:compile!)
+            Yattho::Octicon::Cache.preload!
+          end
+        end
+      end
+
+      initializer "yattho.forms.helpers" do
+        ActiveSupport.on_load :action_controller do
+          require "yattho/form_helper"
+          helper Yattho::FormHelper
+
+          # make yattho_form_with available to view components also
+          ViewComponent::Base.prepend(Yattho::FormHelper)
+        end
+      end
+
+      initializer "yattho_view_components.zeitwerk_ignore" do
+        Rails.autoloaders.each do |autoloader|
+          autoloader.ignore(Engine.root.join("lib", "yattho", "view_components", "linters.rb"))
+          autoloader.ignore(Engine.root.join("lib", "yattho", "view_components", "linters", "**", "*.rb"))
+          autoloader.ignore(Engine.root.join("lib", "yattho", "view_components", "statuses.rb"))
+          autoloader.ignore(Engine.root.join("lib", "yattho", "view_components", "audited.rb"))
+        end
+      end
+
+      config.after_initialize do |app|
+        ::Yattho::Classify::Utilities.validate_class_names = app.config.yattho_view_components.delete(:validate_class_names)
+      end
+    end
+  end
+end

data/lib/yattho/view_components/linters/argument_mappers/base.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+require "yattho/view_components/constants"
+require "yattho/classify/utilities"
+require "yattho/classify/validation"
+require_relative "conversion_error"
+require_relative "system_arguments"
+require_relative "helpers/erb_block"
+
+module ERBLint
+  module Linters
+    module ArgumentMappers
+      # Provides the base interface to implement an `ArgumentMapper`.
+      # Override attribute_to_args in a child class to customize its mapping behavior.
+      class Base
+        DEFAULT_TAG = nil
+        ATTRIBUTES = [].freeze
+
+        def initialize(tag)
+          @tag = tag
+        end
+
+        def to_s
+          to_args.map { |k, v| "#{k}: #{v}" }.join(", ")
+        end
+
+        def to_args
+          args = {}
+
+          args[:tag] = ":#{@tag.name}" unless self.class::DEFAULT_TAG.nil? || @tag.name == self.class::DEFAULT_TAG
+
+          @tag.attributes.each do |attribute|
+            attr_name = attribute.name
+
+            if self.class::ATTRIBUTES.include?(attr_name)
+              args.merge!(attribute_to_args(attribute))
+            elsif attr_name == "class"
+              args.merge!(map_classes(attribute))
+            else
+              # Assume the attribute is a system argument.
+              args.merge!(SystemArguments.new(attribute).to_args)
+            end
+          end
+
+          args
+        end
+
+        def attribute_to_args(attribute); end
+
+        def map_classes(classes_node)
+          erb_helper.raise_if_erb_block(classes_node)
+
+          system_arguments = system_arguments_to_args(classes_node.value)
+          args = classes_to_args(system_arguments[:classes]&.split || [])
+
+          invalid_classes = args[:classes].select { |class_name| Yattho::Classify::Validation.invalid?(class_name) }
+
+          if invalid_classes.present?
+            raise ConversionError,
+                  "Cannot convert #{'class'.pluralize(invalid_classes.size)} #{invalid_classes.join(',')}"
+          end
+
+          # Using splat to order the arguments in Component's args -> System Args -> custom classes
+          res = {
+            **args.except(:classes),
+            **system_arguments.except(:classes)
+          }
+
+          if args[:classes].present?
+            res = {
+              **res,
+              classes: args[:classes].join(" ").to_json
+            }
+          end
+
+          res
+        end
+
+        # Override this with your component's mappings, it should return a hash with the component's arguments,
+        # including a `classes` key that will contain all classes that the mapper couldn't handle.
+        # @return { classes: Array, ... }
+        def classes_to_args(classes)
+          { classes: classes }
+        end
+
+        def system_arguments_to_args(classes)
+          system_arguments = Yattho::Classify::Utilities.classes_to_hash(classes)
+
+          # need to transform symbols to strings with leading `:`
+          system_arguments.transform_values do |v|
+            v.is_a?(Symbol) ? ":#{v}" : v
+          end
+        end
+
+        private
+
+        def erb_helper
+          @erb_helper ||= Helpers::ErbBlock.new
+        end
+      end
+    end
+  end
+end