arara 0.2.0

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

@@ -0,0 +1,3 @@
+<%= content_tag(html_tag, html_options) do %>
+  <%= content %>
+<% end %>

data/app/components/arara/fab_icon_component.rb

@@ -0,0 +1,15 @@
+module Arara
+  class FabIconComponent < ActionView::Component::Base
+    include Arara::BaseComponent
+    validates :content, presence: true
+
+    def initialize(icon:, **kw)
+      super(tag: "i", **kw)
+      @icon = icon
+    end
+
+    def default_html_class
+      "material-icons"
+    end
+  end
+end

data/app/components/arara/form_builder.rb

@@ -0,0 +1,142 @@
+module Arara
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    attr_reader :template
+
+    include ActionView::Helpers::FormTagHelper
+
+    def label(method, options = {})
+      options.deep_stringify_keys!
+      super(method, options)
+    end
+
+    def chipset_choice(method, options = {}, &block)
+      options.deep_stringify_keys!
+      options["variant"] = :choice
+      options[:data] ||= {}
+      options[:data][:controller] = "rails-chip-set-choice"
+
+      Tags::Chipset.new(object_name, method, self, objectify_options(options), &block).render
+    end
+
+    def chip_choice(method, options = {}, &block)
+      options.deep_stringify_keys!
+      options["variant"] = :choice
+
+      checked_value = options[:value].to_s
+      unchecked_value = 0
+      options[:include_hidden] = false
+
+      Tags::ChipChoice.new(object_name, method, self, checked_value, unchecked_value, objectify_options(options), &block).render
+    end
+
+    def chipset_filter(method, options = {}, &block)
+      options.deep_stringify_keys!
+      options["variant"] = :filter
+      options[:data] ||= {}
+      options[:data][:controller] = "rails-chip-set-filter"
+
+      Tags::Chipset.new(object_name, method, self, objectify_options(options), &block).render
+    end
+
+    def chip_filter(method, options = {}, &block)
+      options.deep_stringify_keys!
+      options["variant"] = :filter
+
+      checked_value = options[:value].to_s
+      unchecked_value = 0
+      options[:include_hidden] = true
+      options[:multiple] = true
+
+      Tags::ChipChoice.new(object_name, method, self, checked_value, unchecked_value, objectify_options(options), &block).render
+    end
+
+    def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+      options.deep_stringify_keys!  
+      options["label"] = options.fetch("label") { build_label(method, options) }
+      # options["has_error"] = has_errors_for?(method)
+      # options["helper_text"] = errors_for(method).join(", ")
+
+      Tags::CheckBox.new(object_name, method, self, checked_value, unchecked_value, objectify_options(options)).render
+    end
+
+    def text_field(method, options = {})
+      options.deep_stringify_keys!
+      options["label"] = options.fetch("label") { build_label(method, options) }
+      options["has_error"] = has_errors_for?(method)
+      options["helper_text"] ||= errors_for(method).join(", ")
+
+      Tags::TextField.new(object_name, method, self, objectify_options(options)).render
+    end
+
+    def password_field(method, options = {})
+      options.deep_stringify_keys!
+      options["label"] = options.fetch("label") { build_label(method, options) }
+      options["has_error"] = has_errors_for?(method)
+      options["helper_text"] = errors_for(method).join(", ")
+      options["type"] = "password"
+
+      Tags::PasswordField.new(object_name, method, self, objectify_options(options)).render
+    end
+
+    def text_area(method, options = {})
+      options.deep_stringify_keys!
+      options["label"] = options.fetch("label") { build_label(method, options) }
+      options["has_error"] = has_errors_for?(method)
+      options["helper_text"] = errors_for(method).join(", ")
+
+      Tags::TextArea.new(object_name, method, self, objectify_options(options)).render
+    end
+
+    def select(method, choices = nil, options = {}, html_options = {}, &block)
+      options.deep_stringify_keys!
+      options["label"] = options.fetch("label") { build_label(method, options) }
+
+      Tags::Select.new(object_name, method, self, choices, objectify_options(options), objectify_options(html_options), &block).render
+    end
+
+    def radio_button(method, tag_value, options = {})
+      options.deep_stringify_keys!
+      Tags::RadioButton.new(object_name, method, self, tag_value, objectify_options(options)).render
+    end
+
+    def country_select(method, priority_or_options = {}, options = {}, html_options = {})
+      options.deep_stringify_keys!
+      if Hash === priority_or_options
+        html_options = options
+        options = priority_or_options
+      else
+        options[:priority_countries] = priority_or_options
+      end
+
+      options["label"] = options.fetch("label") { build_label(method, options) }
+      Tags::CountrySelect.new(object_name, method, self, objectify_options(options), @default_options.merge(html_options)).render
+    end
+
+    def submit(value = nil, options = {})
+      options.deep_stringify_keys!
+      value, options = nil, value if value.is_a?(Hash)
+      value ||= submit_default_value
+      
+      options = options.deep_stringify_keys
+      tag_options = { "type" => "submit", "name" => "commit", "value" => value }.update(options)
+      set_default_disable_with value, tag_options
+
+      @template.render(ButtonComponent, tag_options.symbolize_keys)
+    end
+
+    private
+      def build_label(method, options = {})
+        tag_value = options.delete("value")
+        builder = ActionView::Helpers::Tags::Label::LabelBuilder.new(self, object_name.to_s, method.to_s, nil, tag_value)
+        builder.translation
+      end
+
+      def has_errors_for?(method)
+        object.errors.has_key?(method)
+      end
+
+      def errors_for(method)
+        object.errors[method]
+      end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= content_tag(html_tag, html_options) do %>
+  <%= content %>
+<% end %>

data/app/components/arara/form_field_component.rb

@@ -0,0 +1,15 @@
+module Arara
+  class FormFieldComponent < ActionView::Component::Base
+    include Arara::BaseComponent
+
+    validates :content, presence: true
+
+    def initialize(**kw)
+      super(tag: "div", **kw)
+    end
+
+    def default_html_class
+      "mdc-form-field"
+    end
+  end
+end

data/app/components/arara/google_calendar/menu_item_component.html.erb

@@ -0,0 +1,11 @@
+<div class="<%= html_class %>" style="width: 260px; height: 40px; background-color: <%= background_color %>; border-radius: 0 25px 25px 0;">
+  <div class="flex" style="padding: 10px 26px; flex: 1 1 0; overflow: hidden; text-overflow: elipsis; color: <%= text_color %>;">
+    <span class="" style="">
+      <i class="material-icons-outlined" style="margin-right: 20px; font-size: 20px; color: <%= icon_color %>"><%= icon %></i>
+    </span>
+    <span class="flex-grow" style="font-size: .875rem; letter-spacing: .01785714em;">
+      <%= title %>
+    </span>
+    <span dir="ltr" style="font-size: .875rem;"><%= count %></span>
+  </div>
+</div>

data/app/components/arara/google_calendar/menu_item_component.rb

@@ -0,0 +1,34 @@
+class Arara::GoogleCalendar::MenuItemComponent < ActionView::Component::Base
+
+  def initialize(icon:, title:, count: nil, active: false)
+    @icon = icon
+    @title = title
+    @count = count
+    @active = active
+  end
+
+  private
+    attr_reader :icon, :title, :count, :active
+
+    def background_color
+      return "#e8f0fe" if active
+      "inherit"
+    end
+
+    def icon_color
+      return "#1a73e8" if active
+      "#616161"
+    end
+
+    def text_color
+      return "#1a73e8" if active
+      "#202124"
+    end
+
+    def html_class
+      klass = "nav_bar__menu_item"
+      klass << " nav_bar__menu_item--active" if active
+      klass
+    end
+
+end

data/app/components/arara/google_calendar/nav_bar_component.html.erb

@@ -0,0 +1,176 @@
+<style>
+.nav_bar__top {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 0;
+}
+
+.nav_bar__settings {
+  margin-left: 0px;
+}
+
+.nav_bar__utils_avatar {
+
+}
+
+.nav_bar__menu {
+  background-color: white;
+  padding-top: 15px;
+  position: absolute;
+  height: calc(100vh);
+  overflow-y: auto;
+  width: 280px;
+}
+
+.nav_bar__menu_item:not(.nav_bar__menu_item--active):hover {
+  background-color: #f1f3f4 !important;
+}
+
+/* closed on mobile */
+body.menu--toggler #nav_bar .nav_bar__menu {
+  visibility: hidden;
+  -webkit-transform: translateX(-280px);
+  transform: translateX(-280px);
+  -webkit-transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear .25s;
+  transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear .25s;
+}
+
+/* open on mobile */
+body:not(.menu--toggler) #nav_bar .nav_bar__menu {
+  visibility: visible;
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
+  -webkit-transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear 0s;
+  transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear 0s;
+}
+
+.nav_bar__logo {
+  min-width: 150px;
+  width: 150px;
+  padding-right: 14px;
+}
+
+@media (max-width: 768px) {
+  body #nav_bar .nav_bar__menu {
+    box-shadow: 0 0 16px rgba(0,0,0,.28);
+    top: 0;
+    position: absolute;
+  }
+}
+@media (min-width: 640px) {
+  .nav_bar__logo {
+    min-width: 200px;
+    width: 200px;
+    padding-right: 14px;
+  }
+}
+
+@media (min-width: 768px) {
+  .nav_bar__logo {
+    min-width: 268px;
+    padding-right: 30px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .nav_bar__settings {
+    margin-left: 50px;
+  }
+
+  .nav_bar__utils {
+    padding-left: 30px;
+  }
+
+  .nav_bar__menu {
+    padding-top: 15px;
+    position: absolute;
+    height: calc(100vh - 64px);
+    overflow-y: auto;
+    width: 280px;
+  }
+
+  body.menu--toggler #nav_bar .nav_bar__menu {
+    visibility: visible;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    -webkit-transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear 0s;
+    transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear 0s;
+  }
+
+  body:not(.menu--toggler) #nav_bar .nav_bar__menu {
+    visibility: hidden;
+    -webkit-transform: translateX(-280px);
+    transform: translateX(-280px);
+    -webkit-transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear .25s;
+    transition: transform .25s cubic-bezier(0.4,0.0,0.2,1),visibility 0s linear .25s;
+  }
+}
+
+@media (min-width: 1280px) {
+}
+</style>
+<div id="nav_bar">
+  <div class="nav_bar__top flex items-center h-16" style="padding: 8px;">
+    <div class="nav_bar__logo flex" style="">
+      <div class="ml-1" style="color: #5f6368;" data-controller="body-class-toggler" data-action="click->body-class-toggler#toggle" data-body-class-toggler-class="menu--toggler">
+        <%= render(IconButtonComponent, title: "menu") %>
+      </div>
+      <div class="flex items-center">
+        <%= image_tag "arara_logo.png", class: "ml-1 mr-2 hidden md:block", alt: "", 'aria-hidden': "true", style: "width:40px;height:40px", 'data-iml': "11962.05000000191", 'data-atf': "true" %>
+        <span style="font-size: 22px; color: #5f6368;">Arara</span>
+      </div>
+    </div>
+    <div class="nav_bar__search flex flex-grow justify-end" style="height: 46px;">
+      <%# search desk %>
+      <div class="flex-grow hidden md:block" style="padding-left: 10px; padding-right: 30px; width: 100%; max-width: 100%;">
+        <div class="flex flex-grow items-center rounded-lg" style="height: 46px; max-width: 720px; background: #f1f3f4; color: #5f6368;">
+          <%= render(IconButtonComponent, title: "search") %>
+          <div>
+            Search
+          </div>
+        </div>
+      </div>
+      <div class="nav_bar__settings flex" style="">
+        <%# search mobile %>
+        <div class="flex-grow flex items-center block md:hidden" style="color: #5f6368;">
+          <%= render(IconButtonComponent, title: "search") %>
+        </div>
+        <div class="flex items-center justify-center" style="height: 48px; min-width: 48px; vertical-align: middle;">
+          <svg width="20" height="20" viewBox="0 0 24 24" style="color: #5f6368; fill: currentColor;"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path></svg>
+        </div>
+        <div class="flex items-center justify-center" style="height: 48px; min-width: 48px; vertical-align: middle;">
+          <svg width="20" height="20" viewBox="0 0 24 24" style="color: #5f6368; fill: currentColor;"><path d="M13.85 22.25h-3.7c-.74 0-1.36-.54-1.45-1.27l-.27-1.89c-.27-.14-.53-.29-.79-.46l-1.8.72c-.7.26-1.47-.03-1.81-.65L2.2 15.53c-.35-.66-.2-1.44.36-1.88l1.53-1.19c-.01-.15-.02-.3-.02-.46 0-.15.01-.31.02-.46l-1.52-1.19c-.59-.45-.74-1.26-.37-1.88l1.85-3.19c.34-.62 1.11-.9 1.79-.63l1.81.73c.26-.17.52-.32.78-.46l.27-1.91c.09-.7.71-1.25 1.44-1.25h3.7c.74 0 1.36.54 1.45 1.27l.27 1.89c.27.14.53.29.79.46l1.8-.72c.71-.26 1.48.03 1.82.65l1.84 3.18c.36.66.2 1.44-.36 1.88l-1.52 1.19c.01.15.02.3.02.46s-.01.31-.02.46l1.52 1.19c.56.45.72 1.23.37 1.86l-1.86 3.22c-.34.62-1.11.9-1.8.63l-1.8-.72c-.26.17-.52.32-.78.46l-.27 1.91c-.1.68-.72 1.22-1.46 1.22zm-3.23-2h2.76l.37-2.55.53-.22c.44-.18.88-.44 1.34-.78l.45-.34 2.38.96 1.38-2.4-2.03-1.58.07-.56c.03-.26.06-.51.06-.78s-.03-.53-.06-.78l-.07-.56 2.03-1.58-1.39-2.4-2.39.96-.45-.35c-.42-.32-.87-.58-1.33-.77l-.52-.22-.37-2.55h-2.76l-.37 2.55-.53.21c-.44.19-.88.44-1.34.79l-.45.33-2.38-.95-1.39 2.39 2.03 1.58-.07.56a7 7 0 0 0-.06.79c0 .26.02.53.06.78l.07.56-2.03 1.58 1.38 2.4 2.39-.96.45.35c.43.33.86.58 1.33.77l.53.22.38 2.55z"></path><circle cx="12" cy="12" r="3.5"></circle></svg>
+        </div>
+      </div>
+    </div>
+    <div class="nav_bar__utils flex" style="padding-right: 4px;">
+      <div class="flex items-center">
+        <div class="flex items-center justify-center hidden lg:flex" style="height: 48px; min-width: 48px; vertical-align: middle;">
+          <svg width="24" height="24" focusable="false" viewBox="0 0 24 24" style="color: #5f6368; fill: currentColor;"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg>
+        </div>
+        <div class="flex items-center justify-center" style="height: 40px; min-width: 40px; vertical-align: middle; padding: 4px;">
+          <img class="rounded-full overflow-hidden" style="height: 32px; width: 32px; vertical-align: middle;" src="https://www.gravatar.com/avatar/2df88e06bc946068934732ea24e3113e.jpg?s=32" alt="lovely avatar" class="object-cover object-center w-full h-full visible group-hover:hidden" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="nav_bar__menu">
+    <div style="width: 260px;">
+      <%= render(MenuItemComponent, icon: "perm_identity", title: "Contacts", count: 203, active: true) %>
+      <%= render(MenuItemComponent, icon: "restore", title: "Frequently contacted") %>
+      <%= render(MenuItemComponent, icon: "filter_none", title: "Duplicates") %>
+      <%= render(MenuDividerComponent) %>
+      <%= render(MenuItemComponent, icon: "expand_less", title: "Labels") %>
+      <%= render(MenuItemComponent, icon: "label", title: "Foo") %>
+      <%= render(MenuItemComponent, icon: "label", title: "Bar") %>
+      <%= render(MenuItemComponent, icon: "label", title: "Baz") %>
+      <%= render(MenuItemComponent, icon: "add", title: "Create Label") %>
+      <%= render(MenuDividerComponent) %>
+      <%= render(MenuItemComponent, icon: "publish", title: "Import") %>
+      <%= render(MenuItemComponent, icon: "cloud_download", title: "Export") %>
+      <%= render(MenuItemComponent, icon: "print", title: "Print") %>
+      <%= render(MenuDividerComponent) %>
+      <%= render(MenuItemComponent, icon: "archive", title: "Other Contacts") %>
+    </div>
+  </div>
+</div>

data/app/components/arara/google_calendar/nav_bar_component.rb

@@ -0,0 +1,6 @@
+class Arara::GoogleCalendar::NavBarComponent < ActionView::Component::Base
+
+  def initialize(*)
+    
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= content_tag(html_tag, html_options) do %>
+  <%= content %>
+<% end %>

data/app/components/arara/icon_button_component.rb

@@ -0,0 +1,42 @@
+module Arara
+  class IconButtonComponent < ActionView::Component::Base
+    include Arara::BaseComponent
+
+    validates :content, presence: true
+    attr_reader :title, :pressed
+
+    def initialize(title: nil, pressed: nil, **kw)
+      super(tag: "button", **kw)
+      @title = title
+      @pressed = pressed
+    end
+
+    def default_html_class
+      'mdc-icon-button'
+    end
+
+    def aria_data
+      data = {}
+      data[:label] = title if title
+      data[:pressed] = pressed unless pressed.nil?
+      data
+    end
+
+    def html_options
+      opts = super
+      opts.merge!(title: title) if title
+      opts.merge!(aria: aria_data)
+      opts
+    end
+
+    def html_data
+      data = super
+      data.merge!('mdc-ripple-is-unbounded' => "")
+      data
+    end
+
+    def default_data_controller
+      "mdc-ripple"
+    end
+  end
+end