openproject-primer_view_components 0.6.3

data/lib/primer/forms/dsl/radio_button_input.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class RadioButtonInput < Input
+        attr_reader :name, :value, :label, :nested_form_block, :nested_form_arguments
+
+        def initialize(name:, value:, label:, **system_arguments)
+          @name = name
+          @value = value
+          @label = label
+
+          super(**system_arguments)
+
+          yield(self) if block_given?
+        end
+
+        def to_component
+          RadioButton.new(input: self)
+        end
+
+        def nested_form(**system_arguments, &block)
+          @nested_form_arguments = system_arguments
+          @nested_form_block = block
+        end
+
+        # :nocov:
+        def type
+          :radio_button
+        end
+        # :nocov:
+      end
+    end
+  end
+end

data/lib/primer/forms/dsl/select_input.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class SelectInput < Input
+        SELECT_ARGUMENTS = %i[multiple include_blank prompt].freeze
+
+        # :nodoc:
+        class Option
+          attr_reader :label, :value, :system_arguments
+
+          def initialize(label:, value:, **system_arguments)
+            @label = label
+            @value = value
+            @system_arguments = system_arguments
+          end
+        end
+
+        attr_reader :name, :label, :options, :select_arguments
+
+        def initialize(name:, label:, **system_arguments)
+          @name = name
+          @label = label
+          @options = []
+
+          @select_arguments = {}.tap do |select_args|
+            SELECT_ARGUMENTS.each do |select_arg|
+              select_args[select_arg] = system_arguments.delete(select_arg)
+            end
+          end
+
+          super(**system_arguments)
+
+          yield(self) if block_given?
+        end
+
+        def option(**system_arguments)
+          @options << Option.new(**system_arguments)
+        end
+
+        def to_component
+          Select.new(input: self)
+        end
+
+        # :nocov:
+        def type
+          :select_list
+        end
+        # :nocov:
+
+        # :nocov:
+        def focusable?
+          true
+        end
+        # :nocov:
+      end
+    end
+  end
+end

data/lib/primer/forms/dsl/submit_button_input.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class SubmitButtonInput < Input
+        attr_reader :name, :label, :block
+
+        def initialize(name:, label:, **system_arguments, &block)
+          @name = name
+          @label = label
+          @block = block
+
+          super(**system_arguments)
+        end
+
+        def to_component
+          SubmitButton.new(input: self)
+        end
+
+        # :nocov:
+        def type
+          :submit_button
+        end
+      end
+    end
+  end
+end

data/lib/primer/forms/dsl/text_area_input.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class TextAreaInput < Input
+        attr_reader :name, :label
+
+        def initialize(name:, label:, **system_arguments)
+          @name = name
+          @label = label
+
+          super(**system_arguments)
+        end
+
+        def to_component
+          TextArea.new(input: self)
+        end
+
+        def type
+          :text_area
+        end
+
+        # :nocov:
+        def focusable?
+          true
+        end
+        # :nocov:
+      end
+    end
+  end
+end

data/lib/primer/forms/dsl/text_field_input.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class TextFieldInput < Input
+        attr_reader(
+          *%i[
+            name label show_clear_button leading_visual clear_button_id
+            visually_hide_label inset monospace field_wrap_classes auto_check_src
+          ]
+        )
+
+        def initialize(name:, label:, **system_arguments)
+          @name = name
+          @label = label
+
+          @show_clear_button = system_arguments.delete(:show_clear_button)
+          @leading_visual = system_arguments.delete(:leading_visual)
+          @clear_button_id = system_arguments.delete(:clear_button_id)
+          @inset = system_arguments.delete(:inset)
+          @monospace = system_arguments.delete(:monospace)
+          @auto_check_src = system_arguments.delete(:auto_check_src)
+
+          if @leading_visual
+            @leading_visual[:classes] = class_names(
+              "FormControl-input-leadingVisual",
+              @leading_visual[:classes]
+            )
+          end
+
+          super(**system_arguments)
+
+          add_input_data(:target, "primer-text-field.inputElement #{system_arguments.dig(:data, :target) || ''}")
+          add_input_classes("FormControl-inset") if inset?
+          add_input_classes("FormControl-monospace") if monospace?
+        end
+
+        alias show_clear_button? show_clear_button
+        alias inset? inset
+        alias monospace? monospace
+
+        def to_component
+          TextField.new(input: self)
+        end
+
+        def type
+          :text_field
+        end
+
+        def focusable?
+          true
+        end
+
+        def leading_visual?
+          !!@leading_visual
+        end
+
+        def validation_arguments
+          if auto_check_src.present?
+            super.merge(
+              data: {
+                target: "primer-text-field.validationElement"
+              }
+            )
+          else
+            super
+          end
+        end
+
+        def validation_message_arguments
+          if auto_check_src.present?
+            super.merge(
+              data: {
+                target: "primer-text-field.validationMessageElement"
+              }
+            )
+          else
+            super
+          end
+        end
+      end
+    end
+  end
+end

data/lib/primer/forms/dsl/toggle_switch_input.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class ToggleSwitchInput < Input
+        attr_reader :name, :label, :src, :csrf
+
+        def initialize(
+          name:,
+          label:,
+          src:,
+          csrf: nil,
+          **system_arguments
+        )
+          @name = name
+          @label = label
+          @src = src
+          @csrf = csrf
+
+          super(**system_arguments)
+        end
+
+        def to_component
+          ToggleSwitch.new(input: self)
+        end
+
+        def type
+          :toggle_switch
+        end
+
+        def validation_arguments
+          super.merge(role: "alert")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<% if @input.form_control? %>
+  <%= content_tag(@tag, **@form_group_arguments) do %>
+    <% if @input.label %>
+      <%= builder.label(@input.name, **@input.label_arguments) do %>
+        <%= @input.label %>
+        <% if @input.required? %>
+          <span aria-hidden="true">*</span>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= content %>
+    <%= content_tag(:div, **@input.validation_arguments) do %>
+      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+      <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
+    <% end %>
+    <%= render(Caption.new(input: @input)) %>
+  <% end %>
+<% else %>
+  <%= content %>
+<% end %>

data/lib/primer/forms/form_control.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class FormControl < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:, tag: :div, **system_arguments)
+        @input = input
+        @tag = tag
+        @input.add_label_classes("FormControl-label")
+        @form_group_arguments = {
+          **system_arguments,
+          class: class_names(
+            system_arguments[:class],
+            system_arguments[:classes],
+            "FormControl",
+            "width-full",
+            "FormControl--fullWidth" => @input.full_width?
+          )
+        }
+
+        @form_group_arguments[:hidden] = "hidden" if @input.hidden?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= render(SpacingWrapper.new) do %>
+  <% @forms.each do |form| %>
+    <%= render(form) %>
+  <% end %>
+<% end %>

data/lib/primer/forms/form_list.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class FormList
+      extend ActsAsComponent
+
+      renders_template File.join(__dir__, "form_list.html.erb")
+
+      def initialize(*forms)
+        @forms = forms
+      end
+
+      def perform_render(&_block)
+        self.class.compile!
+        render_form_list
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= builder_or_view.primer_fields_for(*@input.fields_for_args, **@input.fields_for_kwargs) do |fields| %>
+  <%= render(@input.ref_block.call(fields)) %>
+<% end %>

data/lib/primer/forms/form_reference.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class FormReference < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+      end
+
+      def builder_or_view
+        @input.nested? ? builder : @view_context
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= content_tag_if(horizontal?, :div, class: "FormControl-horizontalGroup") do %>
+  <% @inputs.each do |input| %>
+    <%= render(input.to_component) %>
+  <% end %>
+<% end %>

data/lib/primer/forms/group.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "primer/classify"
+
+module Primer
+  module Forms
+    # :nodoc:
+    class Group < BaseComponent
+      VERTICAL = :vertical
+      HORIZONTAL = :horizontal
+      DEFAULT_LAYOUT = VERTICAL
+      LAYOUTS = [VERTICAL, HORIZONTAL].freeze
+
+      def initialize(inputs:, builder:, form:, layout: DEFAULT_LAYOUT, **system_arguments)
+        @inputs = inputs
+        @builder = builder
+        @form = form
+        @layout = layout
+        @system_arguments = system_arguments
+      end
+
+      def horizontal?
+        @layout == HORIZONTAL
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= builder.hidden_field(@input.name, **@input.input_arguments) %>

data/lib/primer/forms/hidden_field.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class HiddenField < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+        @input.add_input_classes("FormField-input")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= render(FormControl.new(input: @input, **@input.input_arguments)) do %>
+  <primer-multi-input data-name="<%= @input.name %>">
+    <% @input.inputs.each do |child_input| %>
+      <%= render(child_input.to_component) %>
+    <% end %>
+  </primer-multi-input>
+<% end %>

data/lib/primer/forms/multi.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class Multi < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+
+        Primer::Forms::Utils.classify(@input.input_arguments)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= render(Primer::BaseComponent.new(classes: @classes, **@system_arguments)) do %>
+  <%= content %>
+<% end %>

data/lib/primer/forms/primer_base_component_wrapper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require "primer/class_name_helper"
+
+module Primer
+  module Forms
+    # Wraps Primer::BaseComponent.
+    class PrimerBaseComponentWrapper < BaseComponent
+      include Primer::ClassNameHelper
+
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+
+        # Extract class and classes so they can be passed to Primer::BaseComponent
+        # as classes:. The class: argument is expected by Rails, but Primer expects
+        # classes:, reminiscent of HashWithIndifferentAccess shenanigans.
+        @classes = class_names(
+          system_arguments.delete(:classes),
+          system_arguments.delete(:class)
+        )
+      end
+    end
+  end
+end

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

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

data/lib/primer/forms/primer_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 PrimerMultiInputElement = class PrimerMultiInputElement 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
+], PrimerMultiInputElement.prototype, "fields", void 0);
+PrimerMultiInputElement = __decorate([
+    controller
+], PrimerMultiInputElement);
+export { PrimerMultiInputElement };
+if (!window.customElements.get('primer-multi-input')) {
+    Object.assign(window, { PrimerMultiInputElement });
+    window.customElements.define('primer-multi-input', PrimerMultiInputElement);
+}

data/lib/primer/forms/primer_multi_input.ts

@@ -0,0 +1,46 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+import {controller, targets} from '@github/catalyst'
+
+@controller
+export class PrimerMultiInputElement 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 {
+    PrimerMultiInputElement: typeof PrimerMultiInputElement
+  }
+}
+
+if (!window.customElements.get('primer-multi-input')) {
+  Object.assign(window, {PrimerMultiInputElement})
+  window.customElements.define('primer-multi-input', PrimerMultiInputElement)
+}

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

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