emjay 0.1.0

data/lib/emjay/components/body/mj_social_element.rb

@@ -0,0 +1,272 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+
+module Emjay
+  module Components
+    class MjSocialElement < BodyComponent
+      IMG_BASE_URL = "https://www.mailjet.com/images/theme/v1/icons/ico-social/"
+
+      DEFAULT_SOCIAL_NETWORKS = {
+        "facebook" => {"share-url" => "https://www.facebook.com/sharer/sharer.php?u=[[URL]]", "background-color" => "#3b5998", "src" => "#{IMG_BASE_URL}facebook.png"},
+        "twitter" => {"share-url" => "https://twitter.com/intent/tweet?url=[[URL]]", "background-color" => "#55acee", "src" => "#{IMG_BASE_URL}twitter.png"},
+        "x" => {"share-url" => "https://twitter.com/intent/tweet?url=[[URL]]", "background-color" => "#000000", "src" => "#{IMG_BASE_URL}twitter-x.png"},
+        "google" => {"share-url" => "https://plus.google.com/share?url=[[URL]]", "background-color" => "#dc4e41", "src" => "#{IMG_BASE_URL}google-plus.png"},
+        "pinterest" => {"share-url" => "https://pinterest.com/pin/create/button/?url=[[URL]]&media=&description=", "background-color" => "#bd081c", "src" => "#{IMG_BASE_URL}pinterest.png"},
+        "linkedin" => {"share-url" => "https://www.linkedin.com/shareArticle?mini=true&url=[[URL]]&title=&summary=&source=", "background-color" => "#0077b5", "src" => "#{IMG_BASE_URL}linkedin.png"},
+        "instagram" => {"background-color" => "#3f729b", "src" => "#{IMG_BASE_URL}instagram.png"},
+        "web" => {"src" => "#{IMG_BASE_URL}web.png", "background-color" => "#4BADE9"},
+        "snapchat" => {"src" => "#{IMG_BASE_URL}snapchat.png", "background-color" => "#FFFA54"},
+        "youtube" => {"src" => "#{IMG_BASE_URL}youtube.png", "background-color" => "#EB3323"},
+        "tumblr" => {"src" => "#{IMG_BASE_URL}tumblr.png", "share-url" => "https://www.tumblr.com/widgets/share/tool?canonicalUrl=[[URL]]", "background-color" => "#344356"},
+        "github" => {"src" => "#{IMG_BASE_URL}github.png", "background-color" => "#000000"},
+        "xing" => {"src" => "#{IMG_BASE_URL}xing.png", "share-url" => "https://www.xing.com/app/user?op=share&url=[[URL]]", "background-color" => "#296366"},
+        "vimeo" => {"src" => "#{IMG_BASE_URL}vimeo.png", "background-color" => "#53B4E7"},
+        "medium" => {"src" => "#{IMG_BASE_URL}medium.png", "background-color" => "#000000"},
+        "soundcloud" => {"src" => "#{IMG_BASE_URL}soundcloud.png", "background-color" => "#EF7F31"},
+        "dribbble" => {"src" => "#{IMG_BASE_URL}dribbble.png", "background-color" => "#D95988"}
+      }.freeze
+
+      # Build noshare variants
+      SOCIAL_NETWORKS = DEFAULT_SOCIAL_NETWORKS.each_with_object({}) { |(key, val), hash|
+        hash[key] = val
+        hash["#{key}-noshare"] = val.merge("share-url" => "[[URL]]")
+      }.freeze
+
+      def self.component_name
+        "mj-social-element"
+      end
+
+      def self.ending_tag?
+        true
+      end
+
+      def self.default_attributes
+        {
+          "alt" => "",
+          "align" => "left",
+          "icon-position" => "left",
+          "color" => "#000",
+          "border-radius" => "3px",
+          "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
+          "font-size" => "13px",
+          "line-height" => "1",
+          "padding" => "4px",
+          "text-padding" => "4px 4px 4px 0",
+          "target" => "_blank",
+          "text-decoration" => "none",
+          "vertical-align" => "middle"
+        }
+      end
+
+      def self.allowed_attributes
+        {
+          "align" => "enum(left,center,right)",
+          "icon-position" => "enum(left,right)",
+          "background-color" => "color",
+          "color" => "color",
+          "border-radius" => "string",
+          "font-family" => "string",
+          "font-size" => "unit(px)",
+          "font-style" => "string",
+          "font-weight" => "string",
+          "href" => "string",
+          "icon-size" => "unit(px,%)",
+          "icon-height" => "unit(px,%)",
+          "icon-padding" => "unit(px,%){1,4}",
+          "line-height" => "unit(px,%,)",
+          "name" => "string",
+          "padding-bottom" => "unit(px,%)",
+          "padding-left" => "unit(px,%)",
+          "padding-right" => "unit(px,%)",
+          "padding-top" => "unit(px,%)",
+          "padding" => "unit(px,%){1,4}",
+          "text-padding" => "unit(px,%){1,4}",
+          "rel" => "string",
+          "src" => "string",
+          "srcset" => "string",
+          "sizes" => "string",
+          "alt" => "string",
+          "title" => "string",
+          "target" => "string",
+          "text-decoration" => "string",
+          "vertical-align" => "enum(top,middle,bottom)"
+        }
+      end
+
+      def get_styles
+        social = get_social_attributes
+        icon_size = social["icon-size"]
+        icon_height = social["icon-height"]
+        bg_color = social["background-color"]
+
+        {
+          td: {
+            "padding" => get_attribute("padding"),
+            "padding-top" => get_attribute("padding-top"),
+            "padding-right" => get_attribute("padding-right"),
+            "padding-bottom" => get_attribute("padding-bottom"),
+            "padding-left" => get_attribute("padding-left"),
+            "vertical-align" => get_attribute("vertical-align")
+          },
+          table: {
+            "background" => bg_color,
+            "border-radius" => get_attribute("border-radius"),
+            "width" => icon_size
+          },
+          icon: {
+            "padding" => get_attribute("icon-padding"),
+            "font-size" => "0",
+            "height" => icon_height || icon_size,
+            "vertical-align" => "middle",
+            "width" => icon_size
+          },
+          img: {
+            "border-radius" => get_attribute("border-radius"),
+            "display" => "block"
+          },
+          tdText: {
+            "vertical-align" => "middle",
+            "padding" => get_attribute("text-padding"),
+            "text-align" => get_attribute("align")
+          },
+          text: {
+            "color" => get_attribute("color"),
+            "font-size" => get_attribute("font-size"),
+            "font-weight" => get_attribute("font-weight"),
+            "font-style" => get_attribute("font-style"),
+            "font-family" => get_attribute("font-family"),
+            "line-height" => get_attribute("line-height"),
+            "text-decoration" => get_attribute("text-decoration")
+          }
+        }
+      end
+
+      def render
+        social = get_social_attributes
+        src = social["src"]
+        srcset = social["srcset"]
+        sizes = social["sizes"]
+        href = social["href"]
+        icon_size = social["icon-size"]
+
+        has_link = !!get_attribute("href")
+        icon_position = get_attribute("icon-position")
+
+        icon_html = render_icon(src, srcset, sizes, href, icon_size, has_link)
+        content_html = render_text_content(href, has_link)
+
+        tr_attrs = html_attributes(class: get_attribute("css-class"))
+
+        parts = if icon_position == "left"
+          "#{icon_html} #{content_html}"
+        else
+          "#{content_html} #{icon_html}"
+        end
+
+        <<~HTML
+          <tr
+            #{tr_attrs}
+          >
+            #{parts}
+          </tr>
+        HTML
+      end
+
+      private
+
+      def get_social_attributes
+        network = SOCIAL_NETWORKS[get_attribute("name")] || {}
+        href = get_attribute("href")
+
+        if href && network["share-url"]
+          href = network["share-url"].gsub("[[URL]]", href)
+        end
+
+        attrs = %w[icon-size icon-height srcset sizes src background-color].each_with_object({}) do |attr, result|
+          result[attr] = get_attribute(attr) || network[attr]
+        end
+
+        attrs.merge("href" => href)
+      end
+
+      def render_icon(src, srcset, sizes, href, icon_size, has_link)
+        td_attrs = html_attributes(style: :td)
+        table_attrs = html_attributes(
+          border: "0",
+          cellpadding: "0",
+          cellspacing: "0",
+          role: "presentation",
+          style: :table
+        )
+        icon_td_attrs = html_attributes(style: :icon)
+
+        a_open = has_link ? "<a#{html_attributes(href: href, rel: get_attribute("rel"), target: get_attribute("target"))}>" : ""
+        a_close = has_link ? "</a>" : ""
+
+        img_attrs = html_attributes(
+          alt: get_attribute("alt"),
+          title: get_attribute("title"),
+          src: src,
+          style: :img,
+          width: icon_size.to_i,
+          sizes: sizes,
+          srcset: srcset
+        )
+
+        <<~HTML
+          <td#{td_attrs}>
+            <table
+              #{table_attrs}
+            >
+              <tbody>
+                <tr>
+                  <td#{icon_td_attrs}>
+                    #{a_open}
+                      <img
+                        #{img_attrs}
+                      />
+                    #{a_close}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        HTML
+      end
+
+      def render_text_content(href, has_link)
+        content = get_content
+        return "" if content.nil? || content.empty?
+
+        td_text_attrs = html_attributes(style: :tdText)
+
+        if has_link
+          a_attrs = html_attributes(
+            href: href,
+            style: :text,
+            rel: get_attribute("rel"),
+            target: get_attribute("target")
+          )
+          <<~HTML
+            <td#{td_text_attrs}>
+              <a#{a_attrs}>
+                #{content}
+              </a>
+            </td>
+          HTML
+        else
+          span_attrs = html_attributes(style: :text)
+          <<~HTML
+            <td#{td_text_attrs}>
+              <span#{span_attrs}>#{content}</span>
+            </td>
+          HTML
+        end
+      end
+    end
+  end
+
+  Registry.register(Components::MjSocialElement)
+end

data/lib/emjay/components/body/mj_spacer.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+
+module Emjay
+  module Components
+    class MjSpacer < BodyComponent
+      def self.component_name
+        "mj-spacer"
+      end
+
+      def self.default_attributes
+        {
+          "height" => "20px"
+        }
+      end
+
+      def self.allowed_attributes
+        {
+          "border" => "string",
+          "border-bottom" => "string",
+          "border-left" => "string",
+          "border-right" => "string",
+          "border-top" => "string",
+          "container-background-color" => "color",
+          "padding-bottom" => "unit(px,%)",
+          "padding-left" => "unit(px,%)",
+          "padding-right" => "unit(px,%)",
+          "padding-top" => "unit(px,%)",
+          "padding" => "unit(px,%){1,4}",
+          "height" => "unit(px,%)"
+        }
+      end
+
+      def get_styles
+        {
+          div: {
+            "height" => get_attribute("height"),
+            "line-height" => get_attribute("height")
+          }
+        }
+      end
+
+      def render
+        div_attrs = html_attributes(style: :div)
+        <<~HTML
+          <div
+            #{div_attrs}
+          >&#8202;</div>
+        HTML
+      end
+    end
+  end
+
+  Registry.register(Components::MjSpacer)
+end

data/lib/emjay/components/body/mj_table.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+require_relative "../../helpers/width_parser"
+
+module Emjay
+  module Components
+    class MjTable < BodyComponent
+      def self.component_name
+        "mj-table"
+      end
+
+      def self.ending_tag?
+        true
+      end
+
+      def self.default_attributes
+        {
+          "align" => "left",
+          "border" => "none",
+          "cellpadding" => "0",
+          "cellspacing" => "0",
+          "color" => "#000000",
+          "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
+          "font-size" => "13px",
+          "line-height" => "22px",
+          "padding" => "10px 25px",
+          "table-layout" => "auto",
+          "width" => "100%"
+        }
+      end
+
+      def self.allowed_attributes
+        {
+          "align" => "enum(left,right,center)",
+          "border" => "string",
+          "cellpadding" => "integer",
+          "cellspacing" => "integer",
+          "container-background-color" => "color",
+          "color" => "color",
+          "font-family" => "string",
+          "font-size" => "unit(px)",
+          "font-weight" => "string",
+          "line-height" => "unit(px,%,)",
+          "padding-bottom" => "unit(px,%)",
+          "padding-left" => "unit(px,%)",
+          "padding-right" => "unit(px,%)",
+          "padding-top" => "unit(px,%)",
+          "padding" => "unit(px,%){1,4}",
+          "role" => "enum(none,presentation)",
+          "table-layout" => "enum(auto,fixed,initial,inherit)",
+          "vertical-align" => "enum(top,bottom,middle)",
+          "width" => "unit(px,%,auto)"
+        }
+      end
+
+      def get_styles
+        table_styles = {
+          "color" => get_attribute("color"),
+          "font-family" => get_attribute("font-family"),
+          "font-size" => get_attribute("font-size"),
+          "line-height" => get_attribute("line-height"),
+          "table-layout" => get_attribute("table-layout"),
+          "width" => get_attribute("width"),
+          "border" => get_attribute("border")
+        }
+
+        table_styles["border-collapse"] = "separate" if has_cellspacing?
+
+        {table: table_styles}
+      end
+
+      def render
+        table_attrs = html_attributes(
+          cellpadding: get_attribute("cellpadding"),
+          cellspacing: get_attribute("cellspacing"),
+          role: get_attribute("role"),
+          width: get_width,
+          border: "0",
+          style: :table
+        )
+        <<~HTML
+          <table
+            #{table_attrs}
+          >
+            #{get_content}
+          </table>
+        HTML
+      end
+
+      private
+
+      def get_width
+        width = get_attribute("width")
+        return width if width == "auto"
+
+        parsed = WidthParser.call(width)
+        (parsed[:unit] == "%") ? width : parsed[:parsed_width]
+      end
+
+      def has_cellspacing?
+        cellspacing = get_attribute("cellspacing")
+        numeric_value = cellspacing.to_s.gsub(/[^\d.]/, "").to_f
+        !numeric_value.nan? && numeric_value > 0
+      rescue
+        false
+      end
+    end
+  end
+
+  Registry.register(Components::MjTable)
+end

data/lib/emjay/components/body/mj_text.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+require_relative "../../body_component"
+require_relative "../../registry"
+require_relative "../../helpers/conditional_tag"
+
+module Emjay
+  module Components
+    class MjText < BodyComponent
+      def self.component_name
+        "mj-text"
+      end
+
+      def self.ending_tag?
+        true
+      end
+
+      def self.default_attributes
+        {
+          "align" => "left",
+          "color" => "#000000",
+          "font-family" => "Ubuntu, Helvetica, Arial, sans-serif",
+          "font-size" => "13px",
+          "line-height" => "1",
+          "padding" => "10px 25px"
+        }
+      end
+
+      def self.allowed_attributes
+        {
+          "align" => "enum(left,right,center,justify)",
+          "background-color" => "color",
+          "color" => "color",
+          "container-background-color" => "color",
+          "font-family" => "string",
+          "font-size" => "unit(px)",
+          "font-style" => "string",
+          "font-weight" => "string",
+          "height" => "unit(px,%)",
+          "letter-spacing" => "unitWithNegative(px,em)",
+          "line-height" => "unit(px,%,)",
+          "padding-bottom" => "unit(px,%)",
+          "padding-left" => "unit(px,%)",
+          "padding-right" => "unit(px,%)",
+          "padding-top" => "unit(px,%)",
+          "padding" => "unit(px,%){1,4}",
+          "text-decoration" => "string",
+          "text-transform" => "string",
+          "vertical-align" => "enum(top,bottom,middle)"
+        }
+      end
+
+      def get_styles
+        {
+          text: {
+            "font-family" => get_attribute("font-family"),
+            "font-size" => get_attribute("font-size"),
+            "font-style" => get_attribute("font-style"),
+            "font-weight" => get_attribute("font-weight"),
+            "letter-spacing" => get_attribute("letter-spacing"),
+            "line-height" => get_attribute("line-height"),
+            "text-align" => get_attribute("align"),
+            "text-decoration" => get_attribute("text-decoration"),
+            "text-transform" => get_attribute("text-transform"),
+            "color" => get_attribute("color"),
+            "height" => get_attribute("height")
+          }
+        }
+      end
+
+      def render
+        height = get_attribute("height")
+
+        if height
+          <<~HTML
+            #{ConditionalTag.conditional_tag(
+              "<table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td height=\"#{height}\" style=\"vertical-align:top;height:#{height};\">"
+            )}
+            #{render_content}
+            #{ConditionalTag.conditional_tag(
+              "</td></tr></table>"
+            )}
+          HTML
+        else
+          render_content
+        end
+      end
+
+      private
+
+      def render_content
+        <<~HTML
+          <div#{html_attributes(style: :text)}>#{get_content}</div>
+        HTML
+      end
+    end
+  end
+
+  Registry.register(Components::MjText)
+end

data/lib/emjay/components/body/mj_wrapper.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+require_relative "mj_section"
+
+module Emjay
+  module Components
+    class MjWrapper < MjSection
+      def self.component_name
+        "mj-wrapper"
+      end
+
+      def self.allowed_attributes
+        MjSection.allowed_attributes.merge("gap" => "unit(px)")
+      end
+
+      def get_child_context
+        widths = get_box_widths
+        @context.merge(
+          container_width: "#{widths[:box]}px",
+          gap: get_attribute("gap")
+        )
+      end
+
+      private
+
+      def render_wrapped_children
+        children = @props[:children] || []
+        container_width = @context[:container_width]
+
+        render_children(children, renderer: ->(component) {
+          if component.class.raw_element?
+            component.render
+          else
+            <<~HTML
+              <!--[if mso | IE]>
+                <tr>
+                  <td#{component.html_attributes(
+                    align: component.get_attribute("align"),
+                    class: SuffixCssClasses.call(component.get_attribute("css-class"), "outlook"),
+                    width: container_width
+                  )}>
+              <![endif]-->
+                #{component.render}
+              <!--[if mso | IE]>
+                  </td>
+                </tr>
+              <![endif]-->
+            HTML
+          end
+        })
+      end
+    end
+  end
+
+  Registry.register(Components::MjWrapper)
+end

data/lib/emjay/components/head/mj_attributes.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require_relative "../../head_component"
+require_relative "../../registry"
+
+module Emjay
+  module Components
+    class MjAttributes < HeadComponent
+      def self.component_name
+        "mj-attributes"
+      end
+
+      def handler
+        add = @context[:add]
+        children = @props[:children] || []
+
+        children.each do |child|
+          tag_name = child[:tag_name]
+          attributes = child[:attributes] || {}
+          child_children = child[:children] || []
+
+          if tag_name == "mj-class"
+            name = attributes["name"]
+            add.call(:classes, name, attributes.except("name"))
+            add.call(:classes_default, name,
+              child_children.each_with_object({}) { |cc, acc|
+                acc[cc[:tag_name]] = cc[:attributes] || {}
+              })
+          else
+            add.call(:default_attributes, tag_name, attributes)
+          end
+        end
+      end
+    end
+  end
+
+  Registry.register(Components::MjAttributes)
+end

data/lib/emjay/components/head/mj_breakpoint.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require_relative "../../head_component"
+require_relative "../../registry"
+
+module Emjay
+  module Components
+    class MjBreakpoint < HeadComponent
+      def self.component_name
+        "mj-breakpoint"
+      end
+
+      def self.ending_tag?
+        true
+      end
+
+      def self.allowed_attributes
+        {"width" => "unit(px)"}
+      end
+
+      def handler
+        @context[:add].call(:breakpoint, get_attribute("width"))
+      end
+    end
+  end
+
+  Registry.register(Components::MjBreakpoint)
+end

data/lib/emjay/components/head/mj_font.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require_relative "../../head_component"
+require_relative "../../registry"
+
+module Emjay
+  module Components
+    class MjFont < HeadComponent
+      def self.component_name
+        "mj-font"
+      end
+
+      def self.allowed_attributes
+        {"name" => "string", "href" => "string"}
+      end
+
+      def handler
+        @context[:add].call(:fonts, get_attribute("name"), get_attribute("href"))
+      end
+    end
+  end
+
+  Registry.register(Components::MjFont)
+end