openproject-primer_view_components 0.6.3

data/lib/primer/forms/primer_text_field.js

@@ -0,0 +1,73 @@
+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 _PrimerTextFieldElement_abortController;
+import '@github/auto-check-element';
+import { controller, target } from '@github/catalyst';
+// eslint-disable-next-line custom-elements/expose-class-on-global
+let PrimerTextFieldElement = 
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+class PrimerTextFieldElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _PrimerTextFieldElement_abortController.set(this, void 0);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
+        this.inputElement.addEventListener('auto-check-success', () => {
+            this.clearError();
+        }, { signal });
+        this.inputElement.addEventListener('auto-check-error', async (event) => {
+            const errorMessage = await event.detail.response.text();
+            this.setError(errorMessage);
+        }, { signal });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    clearContents() {
+        this.inputElement.value = '';
+        this.inputElement.focus();
+    }
+    clearError() {
+        this.inputElement.removeAttribute('invalid');
+        this.validationElement.hidden = true;
+        this.validationMessageElement.textContent = '';
+    }
+    setError(message) {
+        this.validationMessageElement.textContent = message;
+        this.validationElement.hidden = false;
+        this.inputElement.setAttribute('invalid', 'true');
+    }
+};
+_PrimerTextFieldElement_abortController = new WeakMap();
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "inputElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
+PrimerTextFieldElement = __decorate([
+    controller
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+], PrimerTextFieldElement);

data/lib/primer/forms/primer_text_field.ts

@@ -0,0 +1,56 @@
+import '@github/auto-check-element'
+import {controller, target} from '@github/catalyst'
+
+// eslint-disable-next-line custom-elements/expose-class-on-global
+@controller
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+class PrimerTextFieldElement 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',
+      async (event: any) => {
+        const errorMessage = await event.detail.response.text()
+        this.setError(errorMessage)
+      },
+      {signal}
+    )
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort()
+  }
+
+  clearContents() {
+    this.inputElement.value = ''
+    this.inputElement.focus()
+  }
+
+  clearError(): void {
+    this.inputElement.removeAttribute('invalid')
+    this.validationElement.hidden = true
+    this.validationMessageElement.textContent = ''
+  }
+
+  setError(message: string): void {
+    this.validationMessageElement.textContent = message
+    this.validationElement.hidden = false
+    this.inputElement.setAttribute('invalid', 'true')
+  }
+}

data/lib/primer/forms/radio_button.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:div, class: "FormControl-radio-wrap", hidden: @input.hidden?) do %>
+  <%= builder.radio_button(@input.name, @input.value, **@input.input_arguments) %>
+  <span class="FormControl-radio-labelWrap">
+    <%= builder.label(@input.name, value: @input.value, **@input.label_arguments) do %>
+      <%= @input.label %>
+    <% end %>
+    <% if @input.form_control? %>
+      <%= render(Caption.new(input: @input)) %>
+    <% end %>
+  </span>
+<% end %>
+<% if @input.nested_form_block %>
+  <%= content_tag(:div, nested_form_arguments) do %>
+    <%= render(@input.nested_form_block.call(builder)) %>
+  <% end %>
+<% end %>

data/lib/primer/forms/radio_button.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class RadioButton < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+        @input.add_label_classes("FormControl-label")
+        @input.add_input_classes("FormControl-radio")
+      end
+
+      def nested_form_arguments
+        return @nested_form_arguments if defined?(@nested_form_arguments)
+
+        @nested_form_arguments = { hidden: @input.hidden?, **@input.nested_form_arguments }
+        @nested_form_arguments[:class] = class_names(
+          @nested_form_arguments[:class],
+          @nested_form_arguments.delete(:classes),
+          "ml-4"
+        )
+
+        @nested_form_arguments
+      end
+    end
+  end
+end

data/lib/primer/forms/radio_button_group.html.erb

@@ -0,0 +1,17 @@
+<%= content_tag(:div, **@input.input_arguments) do %>
+  <fieldset>
+    <% if @input.label %>
+      <%= content_tag(:legend, **@input.label_arguments) do %>
+        <%= @input.label %>
+      <% end %>
+    <% end %>
+    <%= render(SpacingWrapper.new) do %>
+      <% @input.radio_buttons.each do |radio_button| %>
+        <%= render(radio_button.to_component) %>
+      <% end %>
+    <% end %>
+  </fieldset>
+  <div class="mt-2">
+    <%= render(Caption.new(input: @input)) %>
+  </div>
+<% end %>

data/lib/primer/forms/radio_button_group.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class RadioButtonGroup < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+
+        @input.add_label_classes("FormControl-label", "mb-2")
+        @input.add_input_classes("FormControl-radio-group-wrap")
+
+        Primer::Forms::Utils.classify(@input.input_arguments)
+      end
+    end
+  end
+end

data/lib/primer/forms/select.html.erb

@@ -0,0 +1,5 @@
+<%= render(FormControl.new(input: @input)) do %>
+  <%= content_tag(:div, **@field_wrap_arguments) do %>
+    <%= builder.select(@input.name, options, @input.select_arguments, **@input.input_arguments) %>
+  <% end %>
+<% end %>

data/lib/primer/forms/select.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class Select < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+        @input.add_input_classes(
+          "FormControl-select",
+          Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
+        )
+
+        @field_wrap_arguments = {
+          class: "FormControl-select-wrap",
+          hidden: @input.hidden?
+        }
+      end
+
+      def options
+        @options ||= @input.options.map do |option|
+          [option.label, option.value, option.system_arguments]
+        end
+      end
+    end
+  end
+end

data/lib/primer/forms/separator.html.erb

@@ -0,0 +1 @@
+<div class="border-top color-border-muted"></div>

data/lib/primer/forms/separator.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    class Separator < BaseComponent
+    end
+  end
+end

data/lib/primer/forms/spacing_wrapper.html.erb

@@ -0,0 +1,3 @@
+<div class="FormControl-spacingWrapper">
+  <%= content %>
+</div>

data/lib/primer/forms/spacing_wrapper.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    class SpacingWrapper < BaseComponent
+    end
+  end
+end

data/lib/primer/forms/submit_button.html.erb

@@ -0,0 +1 @@
+<%= render(@button) %>

data/lib/primer/forms/submit_button.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class SubmitButton < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @button = Button.new(input: input, type: :submit)
+      end
+    end
+  end
+end

data/lib/primer/forms/text_area.html.erb

@@ -0,0 +1,5 @@
+<%= render(FormControl.new(input: @input)) do %>
+  <%= content_tag(:div, **@field_wrap_arguments) do %>
+    <%= builder.text_area(@input.name, **@input.input_arguments) %>
+  <% end %>
+<% end %>

data/lib/primer/forms/text_area.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class TextArea < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+        @input.add_input_classes("FormControl-input", "FormControl-textarea")
+
+        @field_wrap_arguments = {
+          class: class_names("FormControl-input-wrap"),
+          hidden: @input.hidden?
+        }
+      end
+    end
+  end
+end

data/lib/primer/forms/text_field.html.erb

@@ -0,0 +1,17 @@
+<%= render(FormControl.new(input: @input, tag: :"primer-text-field")) do %>
+  <%= content_tag(:div, **@field_wrap_arguments) do %>
+    <% if @input.leading_visual %>
+      <span class="FormControl-input-leadingVisualWrap">
+        <%= render(Primer::Beta::Octicon.new(**@input.leading_visual)) %>
+      </span>
+    <% end %>
+    <%= render Primer::ConditionalWrapper.new(condition: @input.auto_check_src, tag: "auto-check", csrf: auto_check_authenticity_token, src: @input.auto_check_src) do %>
+      <%= builder.text_field(@input.name, **@input.input_arguments) %>
+    <% end %>
+    <% if @input.show_clear_button? %>
+      <button type="button" id="<%= @input.clear_button_id %>" class="FormControl-input-trailingAction" aria-label="Clear" data-action="click:primer-text-field#clearContents">
+        <%= render(Primer::Beta::Octicon.new(icon: :"x-circle-fill")) %>
+      </button>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/primer/forms/text_field.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class TextField < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      INPUT_WRAP_SIZE = {
+        small: "FormControl-input-wrap--small",
+        large: "FormControl-input-wrap--large"
+      }.freeze
+
+      def initialize(input:)
+        @input = input
+
+        @input.add_input_classes(
+          "FormControl-input",
+          Primer::Forms::Dsl::Input::SIZE_MAPPINGS[@input.size]
+        )
+
+        @field_wrap_arguments = {
+          class: class_names(
+            "FormControl-input-wrap",
+            INPUT_WRAP_SIZE[input.size],
+            "FormControl-input-wrap--trailingAction": @input.show_clear_button?,
+            "FormControl-input-wrap--leadingVisual": @input.leading_visual?
+          ),
+
+          hidden: @input.hidden?
+        }
+      end
+
+      def auto_check_authenticity_token
+        return @auto_check_authenticity_token if defined?(@auto_check_authenticity_token)
+
+        @auto_check_authenticity_token =
+          if @input.auto_check_src
+            @view_context.form_authenticity_token(
+              form_options: { method: :post, action: @input.auto_check_src }
+            )
+          end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+<%= content_tag("toggle-switch-input", class: "FormControl-toggleSwitchInput", hidden: @input.hidden?) do %>
+  <span style="flex-grow: 1">
+    <%= render(Primer::Forms::PrimerBaseComponentWrapper.new(tag: :span, **@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(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf, **@input.input_arguments)) %>
+<% end %>

data/lib/primer/forms/toggle_switch.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class ToggleSwitch < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+        @input.add_label_classes("FormControl-label")
+        @input.label_arguments[:id] = label_id
+        @input.add_input_aria(:labelledby, label_id)
+      end
+
+      def label_id
+        @label_id ||= "label-#{@input.base_id}"
+      end
+    end
+  end
+end

data/lib/primer/forms/toggle_switch_form.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Primer
+  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 < Primer::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(
+    #   Primer::Forms::ToggleSwitchForm.new(
+    #     name: :foo, label: "Foo", src: "/foo"
+    #   )
+    # ) %>
+    #
+    class ToggleSwitchForm < Primer::Forms::Base
+      # Define the form on subclasses so render(Subclass.new) works as expected.
+      # (this is called directly on this class, but also on classes
+      # that inherit from this class)
+      def self.define_form_on(klass)
+        klass.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
+
+      def self.inherited(base)
+        super
+        define_form_on(base)
+      end
+
+      # Define the form on self so render(ToggleSwitchForm.new) works as expected.
+      define_form_on(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 = Primer::Forms::Builder.new(
+          nil, nil, view_context, {}
+        )
+
+        super
+      end
+    end
+  end
+end

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

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

data/lib/primer/forms/toggle_switch_input.js

@@ -0,0 +1,34 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+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.textContent = event.detail;
+            this.validationElement.removeAttribute('hidden');
+        });
+        this.addEventListener('toggleSwitchSuccess', () => {
+            this.validationMessageElement.textContent = '';
+            this.validationElement.setAttribute('hidden', 'hidden');
+        });
+        this.addEventListener('toggleSwitchLoading', () => {
+            this.validationMessageElement.textContent = '';
+            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/primer/forms/toggle_switch_input.ts

@@ -0,0 +1,26 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+
+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.textContent = (event as CustomEvent).detail
+      this.validationElement.removeAttribute('hidden')
+    })
+
+    this.addEventListener('toggleSwitchSuccess', () => {
+      this.validationMessageElement.textContent = ''
+      this.validationElement.setAttribute('hidden', 'hidden')
+    })
+
+    this.addEventListener('toggleSwitchLoading', () => {
+      this.validationMessageElement.textContent = ''
+      this.validationElement.setAttribute('hidden', 'hidden')
+    })
+  }
+}

data/lib/primer/forms/utils.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module Forms
+    # :nodoc:
+    module Utils
+      include Primer::ClassNameHelper
+
+      PRIMER_UTILITY_KEYS = Primer::Classify::Utilities::UTILITIES.keys.freeze
+
+      # 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
+
+      # This method does the following:
+      #
+      # 1. Runs Primer's classify routine to convert entries like mb: 1 to mb-1.
+      # 2. Runs classify on both options[:class] and options[:classes]. The first
+      #    is expected by Rails/HTML while the second is specific to Primer.
+      # 3. Combines options[:class] and options[:classes] into options[:class]
+      #    so the options hash can be easily passed to Rails form builder methods.
+      #
+      def classify(options)
+        options[:classes] = class_names(options.delete(:class), options[:classes])
+        options.merge!(Primer::Classify.call(options))
+        options.except!(*PRIMER_UTILITY_KEYS)
+        options[:class] = class_names(options[:class], options.delete(:classes))
+        options
+      end
+    end
+
+    Utils.extend(Utils)
+  end
+end