polaris_view_components 0.1.0

data/app/components/polaris/choice_component.html.erb

@@ -0,0 +1,35 @@
+<div>
+  <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+    <span class="Polaris-Choice__Control">
+      <%= content %>
+    </span>
+
+    <% if @label %>
+      <span class="Polaris-Choice__Label">
+        <%= @label %>
+      </span>
+     <% end %>
+  <% end %>
+
+  <% if @children_content.present? %>
+    <div class="Polaris-ChoiceList__ChoiceChildren">
+      <%= @children_content %>
+    </div>
+  <% end %>
+
+  <% if @help_text.present? || @error.present? %>
+    <div class="Polaris-Choice__Descriptions">
+      <% if @help_text.present? %>
+        <div class="Polaris-Choice__HelpText">
+          <%= @help_text %>
+        </div>
+      <% end %>
+
+      <% if @error.present? %>
+        <div class="Polaris-Choice__Error">
+          <%= polaris_inline_error { @error } %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/polaris/choice_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ChoiceComponent < Polaris::NewComponent
+    def initialize(
+      label:,
+      label_hidden:,
+      help_text:,
+      disabled:,
+      error: nil,
+      children_content: nil,
+      **system_arguments
+    )
+      @label = label
+      @help_text = help_text
+      @error = error
+      @children_content = children_content
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "label"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Choice",
+        "Polaris-Choice--labelHidden": label_hidden,
+        "Polaris-Choice--disabled": disabled,
+      )
+    end
+  end
+end

data/app/components/polaris/choice_list/component.html.erb

@@ -0,0 +1,34 @@
+<%= field_set_tag(nil, content_tag_options) do %>
+  <% if @title.present? %>
+    <%= content_tag("legend", class: "Polaris-ChoiceList__Title") do %>
+      <%= @title %>
+    <% end %>
+  <% end %>
+
+  <ul class="Polaris-ChoiceList__Choices">
+    <% choice_component = @allow_multiple ? Polaris::CheckboxComponent : Polaris::RadioButtonComponent %>
+
+    <% @choices.each do |choice| %>
+      <li>
+        <%= render choice_component.new(
+          form: @form,
+          attribute: @attribute,
+          name: final_name,
+          value: choice[:value],
+          label: choice[:label],
+          disabled: choice[:disabled] || @disabled,
+          checked: choice_is_selected?(choice),
+          help_text: choice[:help_text],
+          children_content: choice[:children_content],
+          input_attrs: @input_attrs,
+        ) %>
+      </li>
+    <% end %>
+  </ul>
+
+  <% if @error.present? %>
+    <div class="Polaris-ChoiceList__ChoiceError">
+      <%= polaris_inline_error { @error } %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/polaris/choice_list/component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Polaris
+  module ChoiceList
+    class Component < Polaris::Component
+      def initialize(
+        choices:,
+        form: nil,
+        attribute: nil,
+        name: nil,
+        title: '',
+        title_hidden: false,
+        selected: [],
+        allow_multiple: false,
+        error: '',
+        disabled: false,
+        input_attrs: {},
+        **args
+      )
+        super
+
+        @choices = choices
+        @form = form
+        @attribute = attribute
+
+        @name = name
+        @title = title
+        @title_hidden = title_hidden
+        @selected = selected
+        @allow_multiple = allow_multiple
+        @error = error
+        @disabled = disabled
+        @input_attrs = input_attrs
+      end
+
+      def final_name
+        return nil if @name.nil?
+
+        @allow_multiple ? "#{@name}[]" : @name
+      end
+
+      def choice_is_selected?(choice)
+        @selected.include? choice[:value]
+      end
+
+      private
+
+        def classes
+          classes = ['Polaris-ChoiceList']
+
+          classes << 'Polaris-ChoiceList--titleHidden' if @title_hidden
+
+          classes
+        end
+
+        def additional_aria
+          super
+
+          {
+            invalid: @error.present?
+          }
+        end
+    end
+  end
+end

data/app/components/polaris/choice_list_component.html.erb

@@ -0,0 +1,19 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <legend class="Polaris-ChoiceList__Title">
+    <%= @title %>
+  </legend>
+
+  <ul class="Polaris-ChoiceList__Choices">
+    <% items.each do |item| %>
+      <li>
+        <%= item %>
+      </li>
+    <% end %>
+  </ul>
+
+  <% if @error.present? %>
+    <div class="Polaris-ChoiceList__ChoiceError">
+      <%= polaris_inline_error { @error } %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/polaris/choice_list_component.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ChoiceListComponent < Polaris::NewComponent
+    renders_many :checkboxes, -> (value:, disabled: false, **system_arguments) do
+      Polaris::CheckboxComponent.new(
+        form: @form,
+        attribute: @attribute,
+        name: @name && "#{@name}[]",
+        value: value,
+        checked: @selected.include?(value),
+        disabled: disabled || @disabled,
+        **system_arguments
+      )
+    end
+    renders_many :radio_buttons, -> (value:, disabled: false, **system_arguments) do
+      Polaris::RadioButtonComponent.new(
+        form: @form,
+        attribute: @attribute,
+        name: @name,
+        value: value,
+        checked: @selected.include?(value),
+        disabled: disabled || @disabled,
+        **system_arguments,
+      )
+    end
+
+    def initialize(
+      title:,
+      title_hidden: false,
+      form: nil,
+      attribute: nil,
+      name: nil,
+      selected: [],
+      disabled: false,
+      error: nil,
+      **system_arguments
+    )
+      @title = title
+      @error = error
+      @form = form
+      @attribute = attribute
+      @name = name
+      @selected = selected
+      @disabled = disabled
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "fieldset"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-ChoiceList",
+        "Polaris-ChoiceList--titleHidden": title_hidden,
+      )
+    end
+
+    def items
+      checkboxes.presence || radio_buttons
+    end
+
+    def renders?
+      items.any?
+    end
+
+    def multiple_choice_allowed?
+      checkboxes.any?
+    end
+  end
+end

data/app/components/polaris/component.rb

@@ -0,0 +1,5 @@
+module Polaris
+  class Component < ApplicationComponent
+    include ViewHelper
+  end
+end

data/app/components/polaris/description_list_component.html.erb

@@ -0,0 +1,5 @@
+<%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/polaris/description_list_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Polaris
+  class DescriptionListComponent < Polaris::NewComponent
+    SPACING_DEFAULT = :loose
+    SPACING_MAPPINGS = {
+      SPACING_DEFAULT => "",
+      :tight => "Polaris-DescriptionList--spacingTight",
+    }
+    SPACING_OPTIONS = SPACING_MAPPINGS.keys
+
+    renders_many :items, "DescriptionListItemComponent"
+
+    def initialize(spacing: SPACING_DEFAULT, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "dl"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-DescriptionList",
+        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
+      )
+    end
+
+    def renders?
+      items.any?
+    end
+
+    class DescriptionListItemComponent < Polaris::NewComponent
+      def initialize(term:)
+        @term = term
+      end
+
+      def call
+        safe_join [
+          tag.dt(class: "Polaris-DescriptionList__Term") { @term },
+          tag.dd(class: "Polaris-DescriptionList__Description") { content },
+        ]
+      end
+    end
+  end
+end

data/app/components/polaris/display_text_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Polaris
+  class DisplayTextComponent < Polaris::NewComponent
+    ELEMENT_DEFAULT = :p
+    ELEMENT_OPTIONS = %i[p h1 h2 h3 h4 h5 h6]
+
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      small: "Polaris-DisplayText--sizeSmall",
+      medium: "Polaris-DisplayText--sizeMedium",
+      large: "Polaris-DisplayText--sizeLarge",
+      extra_large: "Polaris-DisplayText--sizeExtraLarge",
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(
+      element: ELEMENT_DEFAULT,
+      size: SIZE_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = element
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-DisplayText",
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/polaris/dropzone/component.html.erb

@@ -0,0 +1,72 @@
+<%= render Polaris::Labelled::Component.new(**labelled_attrs) do %>
+  <%= content_tag('div', content_tag_options) do %>
+    <div
+      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
+      data-polaris--dropzone-target="overlay"
+    >
+      <%= polaris_stack(vertical: true, spacing: :tight) do |stack| %>
+        <% stack.item do %>
+          <%= polaris_icon(color: :primary) do %>
+            <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
+              <path d="M2 2h1V0H1.5A1.5 1.5 0 000 1.5V3h2V2zM5 2h3V0H5v2zM13 2h-3V0h3v2zM0 5v3h2V5H0zM0 10v3h2v-3H0zM18 5h-2v3h2V5zM5 18h3v-2H5v2zM0 17a1 1 0 001 1h2v-2H2v-1H0v2zM16 3V2h-1V0h1.5A1.5 1.5 0 0118 1.5V3h-2z" />
+
+              <path d="M10.814 14H5.5A1.5 1.5 0 014 12.5v-7A1.5 1.5 0 015.5 4h7A1.5 1.5 0 0114 5.5v5.314l5.512 2.506a.832.832 0 01.028 1.501l-2.898 1.45a.832.832 0 00-.372.371l-1.449 2.898a.832.832 0 01-1.501-.028L10.814 14zm-.909-2l-.828-1.821c-.318-.7.402-1.42 1.102-1.102L12 9.905V6H6v6h3.905z" />
+            </svg>
+          <% end %>
+        <% end %>
+
+        <% stack.item do %>
+          <%= polaris_display_text(size: :small) do %>
+            <%= @overlay_text %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="Polaris-DropZone__Container" data-polaris--dropzone-target="container">
+      <div class="Polaris-DropZone-FileUpload" data-polaris--dropzone-target="fileUpload">
+        <%= polaris_stack(vertical: true) do |stack| %>
+          <% stack.item do %>
+            <img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt="">
+          <% end %>
+
+          <% stack.item do %>
+            <div class="Polaris-DropZone-FileUpload__Button">Add file</div>
+          <% end %>
+
+          <% stack.item do %>
+            <%= polaris_text_style(variation: :subdued) do %>
+              or drop files to upload
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <%= polaris_visually_hidden do %>
+      <%= @form.file_field(@attribute, input_attrs) %>
+    <% end %>
+
+    <template data-polaris--dropzone-target="itemsTemplate">
+      <%= polaris_stack(vertical: true, data: { rendered: '' }) do %>
+        <span class="target"></span>
+      <% end %>
+    </template>
+
+    <template data-polaris--dropzone-target="itemTemplate">
+      <div class="Polaris-Stack__Item">
+        <%= polaris_stack(alignment: :center) do |stack| %>
+          <% stack.item do %>
+            <%# polaris_thumnail(source: "TODO", size: :small) %>
+          <% end %>
+
+          <% stack.item do %>
+            <div class="content">
+              <%= polaris_caption_component { "TODO" } %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    </template>
+  <% end %>
+<% end %>

data/app/components/polaris/dropzone/component.rb

@@ -0,0 +1,130 @@
+# frozen_string_literal: true
+
+module Polaris
+  module Dropzone
+    class Component < Polaris::Component
+      include Polaris::ActionHelper
+
+      ALLOWED_TYPES = %w[file image]
+
+      validates :type, inclusion: { in: ALLOWED_TYPES, message: "%{value} is not a valid type" }
+      validates :label_action, type: Action, allow_nil: true
+
+      # TODO
+      # Options missing:
+      # - open_file_dialog
+      # - overlay
+      # - overlay_text
+      # - Size CSS Class
+      # - Doesn't take into account an initial load with files
+
+      attr_reader :label_action, :type
+
+      def initialize(
+        form:,
+        attribute:,
+        accept: "",
+        active: false,
+        allow_multiple: true,
+        disabled: false,
+        drop_on_page: false,
+        error: false,
+        error_overlay_text: "",
+        id: "",
+        label: "",
+        label_action: nil,
+        label_hidden: false,
+        overlay_text: "Drop file to upload",
+        outline: true,
+        type: "file",
+        **args
+      )
+        super
+
+        @form = form
+        @attribute = attribute
+        @accept = accept
+        @active = active
+        @allow_multiple = allow_multiple
+        @disabled = disabled
+        @drop_on_page = drop_on_page
+        @error = error
+        @error_overlay_text = error_overlay_text
+        @id = id
+        @label = label
+        @label_action = label_action
+        @label_hidden = label_hidden
+        @overlay_text = overlay_text
+        @outline = outline
+        @type = type
+      end
+
+      def labelled_attrs
+        {
+          form: @form,
+          attribute: @attribute,
+          error: @error,
+          label: @label,
+          label_hidden: @label_hidden,
+          index: @index,
+          action: @label_action
+        }
+      end
+
+      def input_attrs
+        {
+          accept: @accept,
+          disabled: @disabled,
+          type: "file",
+          multiple: @allow_multiple,
+          data: {
+            action: "focus->polaris--dropzone#onFocus blur->polaris--dropzone#onBlur change->polaris--dropzone#onChange",
+            'polaris--dropzone-target': 'input',
+          }
+        }
+      end
+
+      private
+
+        def additional_aria
+          {
+            disabled: @disabled.to_s,
+          }
+        end
+
+        def additional_data
+          {
+            controller: "polaris--dropzone",
+            action: "click->polaris--dropzone#onClick #{drop_actions}",
+            'polaris--dropzone-accept-value': @accept,
+            'polaris--dropzone-allowMultiple-value': @allow_multiple.to_s,
+            'polaris--dropzone-disabled-value': @disabled.to_s,
+            'polaris--dropzone-focused-value': 'false',
+            'polaris--dropzone-drop-on-page-value': 'false',
+          }
+        end
+
+        def drop_actions
+          event_scope = @drop_on_page ? "@document" : ""
+
+          [
+            "drop#{event_scope}->polaris--dropzone#onDrop",
+            "dragover#{event_scope}->polaris--dropzone#onDragOver",
+            "dragenter#{event_scope}->polaris--dropzone#onDragEnter",
+            "dragleave#{event_scope}->polaris--dropzone#onDragLeave"
+          ].join(" ")
+        end
+
+        def classes
+          classes = %w[Polaris-DropZone Polaris-DropZone--sizeExtraLarge]
+
+          classes << "Polaris-DropZone--isDisabled" if @disabled
+          classes << "Polaris-DropZone--isDisabled" if @disabled
+          classes << "Polaris-DropZone--hasError" if @error.present?
+          classes << "Polaris-DropZone--hasOutline" if @outline
+
+          classes
+        end
+    end
+  end
+end