arara 0.2.0

data/app/components/arara/text_field_component.html.erb

@@ -0,0 +1,47 @@
+<div data-controller="<%= data_controller %>">
+  <%= content_tag(html_tag, html_options) do %>
+    <%= leading_icon %>
+    <% if textarea %>
+      <% if max_length && textarea %>
+        <div class="mdc-text-field-character-counter">0 / <%= max_length %></div>
+      <% end %>
+      <%= content_tag(html_input_tag, value, html_input_options) %>
+    <% else %>
+      <%= tag(html_input_tag, html_input_options) %>
+    <% end %>
+
+    <% if user_variant == "outlined" %>
+      <div class="mdc-notched-outline">
+        <div class="mdc-notched-outline__leading"></div>
+        <div class="mdc-notched-outline__notch">
+          <% if label %>
+            <label class="mdc-floating-label" for="<%= id %>"><%= label %></label>
+          <% end %>
+        </div>
+        <div class="mdc-notched-outline__trailing"></div>
+      </div>
+    <% else %>
+      <div class="mdc-line-ripple"></div>
+      <% if label && !full_width %>
+        <label class="mdc-floating-label" for="<%= id %>"><%= label %></label>
+      <% end %>
+    <% end %>
+    <%= trailing_icon %>
+  <% end %>
+  <% if !helper_text.blank? || (max_length && !textarea) %>
+  <div class="<%= helper_line_class %>" data-target="<%= data_controller %>.helperLine">
+    <% if helper_text %>
+      <p
+        class="<%= helper_text_class %>"
+        id="<%= id %>-helper"
+        aria-hidden="true"
+      >
+      <%= helper_text %>
+    </p>
+    <% end %>
+    <% if max_length && !textarea %>
+      <div class="mdc-text-field-character-counter">0 / <%= max_length %></div>
+    <% end %>
+  </div>
+  <% end %>
+</div>

data/app/components/arara/text_field_component.rb

@@ -0,0 +1,101 @@
+module Arara
+  class TextFieldComponent < ActionView::Component::Base
+    include Arara::BaseComponent
+    
+    attr_reader :label, :id, :name, :value, :textarea, :full_width, :helper_text, :type
+
+    with_content_areas :leading_icon, :trailing_icon, :max_length
+
+    def initialize(variant: "default", label: nil, helper_text: nil, max_length: nil, textarea: false, id:, name: nil, value: nil, full_width: false, has_error: false, type: "text", **kw)
+      super(tag: "div", variant: variant, **kw)
+
+      @label = label
+      @helper_text = helper_text
+      @max_length = max_length
+      @textarea = textarea
+      @id = id
+      @name = name
+      @value = value
+      @full_width = full_width
+      @has_error = has_error
+      @user_variant = "outlined" if textarea
+      @type = type
+    end
+
+    def has_error?
+      @has_error
+    end
+
+    def default_html_class
+      classes = ["mdc-text-field"]
+      classes << "mdc-text-field--fullwidth" if full_width
+      classes << "mdc-text-field--textarea" if is_textarea?
+      classes << "mdc-text-field--error" if has_error?
+      classes << "mdc-text-field--outlined" if user_variant == "outlined"
+      classes.join(" ")
+    end
+
+    def html_options
+      opts = super
+      opts.deep_symbolize_keys!
+      opts[:data] = opts.has_key?(:data) ? opts[:data] : {}
+      opts[:data][:target] = opts[:data].has_key?(:target) ? opts[:data][:target] : ""
+      opts[:data][:target].concat(" #{data_controller}.element")
+      opts
+    end
+
+    def html_input_tag
+      return "textarea" if textarea
+      "input"
+    end
+    
+    def html_input_options
+      opts = {
+        class: "mdc-text-field__input",
+        id: id,
+        type: type,
+        aria: {
+          labelledby: "#{id}-label",
+          controls: "#{id}-helper",
+          describedby: "#{id}-helper"
+        }
+      }
+      opts.merge!(name: name) if name
+      opts.merge!(value: value) if value
+      opts[:data] = opts.has_key?(:data) ? opts[:data] : {}
+      opts[:data][:action] = "focusin->#{data_controller}#handleFocus"
+      opts.merge!(placeholder: label) if full_width && !is_textarea?
+      # opts.merge!(rows: 4, cols: 40) if textarea
+      opts.merge!(maxlength: max_length) if max_length
+      opts
+    end
+
+    def helper_line_class
+      classes = ["mdc-text-field-helper-line"]
+      classes << "mdc-text-field-helper-line--error" if has_error?
+      classes.join(" ")
+    end
+
+    def helper_text_class
+      classes = ["mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"]
+      classes.join(" ")
+    end
+
+    def default_data_controller
+      "mdc-text-field"
+      nil
+    end
+
+    def data_controller
+      "mdc-text-field"
+    end
+
+    def is_outlined?
+      user_variant == "outlined" && is_textarea?
+    end
+
+    def is_textarea?
+      textarea
+    end
+  end
+end

data/app/components/arara/typography_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag(html_tag, class: html_class) do %><%= html_content %><% end %>

data/app/components/arara/typography_component.rb

@@ -0,0 +1,51 @@
+module Arara
+  class TypographyComponent < ActionView::Component::Base
+    VALID_VARIANTS = %w(h1 h2 h3 h4 h5 h6 sub1 sub2 body1 body2 button caption overline)
+    class InvalidVariant < StandardError; end
+
+    include Arara::BaseComponent
+
+    def initialize(variant: "body1", **kw)
+      raise InvalidVariant.new("`#{variant}' is not a valid variant") unless VALID_VARIANTS.include?(variant.to_s)
+      super(variant: variant, **kw)
+    end
+
+    private
+      def default_html_class
+        return "mdc-typography mdc-typography--headline1" if user_variant == "h1"
+        return "mdc-typography mdc-typography--headline2" if user_variant == "h2"
+        return "mdc-typography mdc-typography--headline3" if user_variant == "h3"
+        return "mdc-typography mdc-typography--headline4" if user_variant == "h4"
+        return "mdc-typography mdc-typography--headline5" if user_variant == "h5"
+        return "mdc-typography mdc-typography--headline6" if user_variant == "h6"
+        return "mdc-typography mdc-typography--subtitle1" if user_variant == "sub1"
+        return "mdc-typography mdc-typography--subtitle2" if user_variant == "sub2"
+        return "mdc-typography mdc-typography--body1" if user_variant == "body1"
+        return "mdc-typography mdc-typography--body2" if user_variant == "body2"
+        return "mdc-typography mdc-typography--button" if user_variant == "button"
+        return "mdc-typography mdc-typography--caption" if user_variant == "caption"
+        return "mdc-typography mdc-typography--overline" if user_variant == "overline"
+      end
+
+      def html_tag
+        return user_tag if user_tag
+        return "h1" if user_variant == "h1"
+        return "h2" if user_variant == "h2"
+        return "h3" if user_variant == "h3"
+        return "h4" if user_variant == "h4"
+        return "h5" if user_variant == "h5"
+        return "h6" if user_variant == "h6"
+        return "h6" if user_variant == "sub1"
+        return "h6" if user_variant == "sub2"
+        return "p" if user_variant == "body1"
+        return "p" if user_variant == "body2"
+        return "span" if user_variant == "button"
+        return "span" if user_variant == "caption"
+        return "span" if user_variant == "overline"
+      end
+
+      def default_html_tag
+        html_tag
+      end
+  end
+end

data/app/controllers/arara/application_controller.rb

@@ -0,0 +1,5 @@
+module Arara
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+  end
+end

data/app/helpers/arara/application_helper.rb

@@ -0,0 +1,4 @@
+module Arara
+  module ApplicationHelper
+  end
+end

data/app/javascript/arara/controllers/body_class_toggler_controller.js

@@ -0,0 +1,20 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  connect() {
+  }
+
+  toggle() {
+    const toggleClass = this.data.get("class")
+    document.body.classList.toggle(toggleClass)
+  }
+}

data/app/javascript/arara/controllers/counter_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = ["display"]
+
+  initialize() {
+    this.setCounter(0)
+  }
+
+  increase() {
+    this.setCounter(this.counter + 1)
+  }
+
+  decrease() {
+    this.setCounter(this.counter - 1)
+  }
+
+  setCounter(counter) {
+    this.counter = counter
+    this.displayTarget.textContent = counter
+  }
+}

data/app/javascript/arara/controllers/demo_dialog_controller.js

@@ -0,0 +1,24 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCDialog } from "@material/dialog"
+
+export default class extends Controller {
+  static targets = ["button", "dialog"]
+
+  connect() {
+    const dialog = new MDCDialog(this.dialogTarget)
+    this.dialog = dialog
+  }
+
+  openDialog() {
+    this.dialog.open()
+  }
+}

data/app/javascript/arara/controllers/mdc_chip_set_controller.js

@@ -0,0 +1,18 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCChipSet } from "@material/chips"
+
+export default class extends Controller {
+  connect() {
+    const el = new MDCChipSet(this.element)
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/mdc_data_table_controller.js

@@ -0,0 +1,18 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCDataTable } from "@material/data-table"
+
+export default class extends Controller {
+  connect() {
+    const el = new MDCDataTable(this.element)
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/mdc_form_field_controller.js

@@ -0,0 +1,40 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCFormField } from "@material/form-field"
+import { MDCCheckbox } from "@material/checkbox"
+import { MDCRadio } from "@material/radio"
+
+export default class extends Controller {
+  connect() {
+    const formField = new MDCFormField(this.element)
+
+    this.checkboxes = [].map.call(this.element.querySelectorAll(".mdc-checkbox"), function (el) {
+      const checkbox = new MDCCheckbox(el)
+      if (el.dataset.indeterminate == "true") {
+        checkbox.indeterminate = true
+      }
+
+      if (el.dataset.checked == "true") {
+        checkbox.checked = true
+      }
+      formField.input = checkbox
+      return checkbox
+    })
+
+    this.radios = [].map.call(this.element.querySelectorAll(".mdc-radio"), function (el) {
+      const radio = new MDCRadio(el)
+      formField.input = radio
+      return radio
+    })
+
+    this.el = formField
+  }
+}

data/app/javascript/arara/controllers/mdc_icon_toggle_controller.js

@@ -0,0 +1,18 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCIconButtonToggle } from "@material/icon-button"
+
+export default class extends Controller {
+  connect() {
+    const el = new MDCIconButtonToggle(this.element)
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/mdc_linear_progress_controller.js

@@ -0,0 +1,18 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCLinearProgress } from "@material/linear-progress"
+
+export default class extends Controller {
+  connect() {
+    const el = new MDCLinearProgress(this.element)
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/mdc_list_controller.js

@@ -0,0 +1,23 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCRipple } from "@material/ripple"
+import { MDCList } from "@material/list"
+
+export default class extends Controller {
+  connect() {
+    const list = new MDCList(this.element)
+
+    const listItemRipples = list.listElements.map((listItemEl) => new MDCRipple(listItemEl))
+
+    this.listItemRipples = listItemRipples
+    this.el = list
+  }
+}

data/app/javascript/arara/controllers/mdc_menu_controller.js

@@ -0,0 +1,25 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCMenu } from "@material/menu"
+
+export default class extends Controller {
+  static targets = ["button", "menu"]
+
+  connect() {
+    const menu = new MDCMenu(this.menuTarget)
+    this.menu = menu
+  }
+
+  openMenu() {
+    const isOpen = this.menuTarget.classList.contains("mdc-menu-surface--open")
+    this.menu.open = !isOpen
+  }
+}