scarpe-components 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b7067a7b6f0e71d041289334dccf5c0edaae3db689a710450c1d8f585888f74d
-  data.tar.gz: c73105b84ae8468779ca93c216e7f618213a79086e2c0d7a7470bdece885c2b9
+  metadata.gz: 553966daf7d03ffd9c9b0262ea65c8ae0ac2de161b94eeb5d468c0ac5f38a51f
+  data.tar.gz: fa7b2161160b5e49bf2bf15f73b5e991ad463a5bbed129cc4efa16d95ced77f6
 SHA512:
-  metadata.gz: 8d0be001e64c94d3e82dcfc7dca65cbfe373edfd219905716075cfcb3655b0da9a9fec76cf2323cec7d151b83581b3762d7b7c81d51ba2b34dcc10451b33c4db
-  data.tar.gz: 78a734af216bf4c7275483258d20508a985782442a1b6700632905d26b6dfccf0a66ca3c752202b41f32893094450681fdfae7e0d832ee08ba43812b300b8427
+  metadata.gz: cfe8b66b552128271fea15b7df830b680b12ce833e79725198804bd224394b6fd00dcada10dcd03ecb4f6d9c67b6cb87d8ede6e71d6277b8d181f5d2b985e9ef
+  data.tar.gz: b531fe0af1d193f73a7e201afbde322152d659987bad14f51c8af65b65c823ebe330ffc1848f272dca169814dc10105672e3d0bfb617c723a9eb723ef556d44b

data/Gemfile.lock

@@ -0,0 +1,86 @@
+PATH
+  remote: ../lacci
+  specs:
+    lacci (0.3.0)
+      scarpe-components
+
+PATH
+  remote: .
+  specs:
+    scarpe-components (0.3.0)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    ansi (1.5.0)
+    ast (2.4.2)
+    base64 (0.1.1)
+    builder (3.2.4)
+    debug (1.8.0)
+      irb (>= 1.5.0)
+      reline (>= 0.3.1)
+    io-console (0.6.0)
+    irb (1.8.0)
+      rdoc (~> 6.5)
+      reline (>= 0.3.6)
+    json (2.6.3)
+    language_server-protocol (3.17.0.3)
+    minitest (5.19.0)
+    minitest-reporters (1.6.1)
+      ansi
+      builder
+      minitest (>= 5.0)
+      ruby-progressbar
+    nokogiri (1.15.4-x86_64-darwin)
+      racc (~> 1.4)
+    parallel (1.23.0)
+    parser (3.2.2.3)
+      ast (~> 2.4.1)
+      racc
+    psych (5.1.0)
+      stringio
+    racc (1.7.1)
+    rainbow (3.1.1)
+    rake (13.0.6)
+    rdoc (6.5.0)
+      psych (>= 4.0.0)
+    regexp_parser (2.8.1)
+    reline (0.3.8)
+      io-console (~> 0.5)
+    rexml (3.2.6)
+    rubocop (1.56.2)
+      base64 (~> 0.1.1)
+      json (~> 2.3)
+      language_server-protocol (>= 3.17.0)
+      parallel (~> 1.10)
+      parser (>= 3.2.2.3)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.8, < 3.0)
+      rexml (>= 3.2.5, < 4.0)
+      rubocop-ast (>= 1.28.1, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 2.4.0, < 3.0)
+    rubocop-ast (1.29.0)
+      parser (>= 3.2.1.0)
+    rubocop-shopify (2.14.0)
+      rubocop (~> 1.51)
+    ruby-progressbar (1.13.0)
+    stringio (3.0.8)
+    unicode-display_width (2.4.2)
+
+PLATFORMS
+  x86_64-darwin-22
+
+DEPENDENCIES
+  debug
+  lacci!
+  minitest (~> 5.0)
+  minitest-reporters
+  nokogiri
+  rake (~> 13.0)
+  rubocop (~> 1.21)
+  rubocop-shopify
+  scarpe-components!
+
+BUNDLED WITH
+   2.4.14

data/lib/scarpe/components/base64.rb

@@ -3,9 +3,9 @@
 require "base64"
 require "uri"
 
-class Scarpe; end
+module Scarpe; end
 module Scarpe::Components; end
-class Scarpe
+module Scarpe
   module Components::Base64
     def valid_url?(string)
       uri = URI.parse(string)
@@ -14,11 +14,7 @@ class Scarpe
       false
     end
 
-    def encode_file_to_base64(image_filename)
-      directory_path = File.dirname(__FILE__, 5)
-
-      image_path = File.join(directory_path, image_filename)
-
+    def encode_file_to_base64(image_path)
       image_data = File.binread(image_path)
 
       encoded_data = ::Base64.strict_encode64(image_data)

data/lib/scarpe/components/calzini/alert.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Scarpe::Components::Calzini
+  def alert_element(props)
+    event = props["event_name"] || "click"
+    onclick = handler_js_code(event)
+
+    HTML.render do |h|
+      h.div(id: html_id, style: alert_overlay_style(props)) do
+        h.div(style: alert_modal_style) do
+          h.div(style: {}) { props["text"] }
+          h.button(style: {}, onclick: onclick) { "OK" }
+        end
+      end
+    end
+  end
+
+  private
+
+  # If the whole drawable is hidden, the parent style adds display:none
+  def alert_overlay_style(props)
+    {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      overflow: "auto",
+      "z-index": "1",
+      background: "rgba(0,0,0,0.4)",
+      display: "flex",
+      "align-items": "center",
+      "justify-content": "center",
+    }.merge(drawable_style(props))
+  end
+
+  def alert_modal_style
+    {
+      "min-width": "200px",
+      "min-height": "50px",
+      padding: "10px",
+      display: "flex",
+      background: "#fefefe",
+      "flex-direction": "column",
+      "justify-content": "space-between",
+      "border-radius": "9px",
+    }
+  end
+end

data/lib/scarpe/components/calzini/art_widgets.rb

@@ -0,0 +1,203 @@
+# frozen_string_literal: true
+
+module Scarpe::Components::Calzini
+  def arc_element(props, &block)
+    dc = props["draw_context"] || {}
+    rotate = dc["rotate"]
+    HTML.render do |h|
+      h.div(id: html_id, style: arc_style(props)) do
+        h.svg(width: props["width"], height: props["height"]) do
+          h.path(d: arc_path(props), transform: "rotate(#{rotate}, #{props["width"] / 2}, #{props["height"] / 2})")
+        end
+        block.call(h) if block_given?
+      end
+    end
+  end
+
+  def rect_element(props)
+    dc = props["draw_context"] || {}
+    rotate = dc["rotate"]
+    HTML.render do |h|
+      h.div(id: html_id, style: drawable_style(props)) do
+        width = props["width"].to_i
+        height = props["height"].to_i
+        if props["curve"]
+          width += 2 * props["curve"].to_i
+          height += 2 * props["curve"].to_i
+        end
+        h.svg(width:, height:) do
+          attrs = { x: props["left"], y: props["top"], width: props["width"], height: props["height"], style: rect_svg_style(props) }
+          attrs[:rx] = props["curve"] if props["curve"]
+
+          h.rect(**attrs, transform: "rotate(#{rotate} #{width / 2} #{height / 2})")
+        end
+      end
+    end
+  end
+
+  def line_element(props)
+    HTML.render do |h|
+      h.div(id: html_id, style: line_div_style(props)) do
+        h.svg(width: props["x2"], height: props["y2"]) do
+          h.line(x1: props["left"], y1: props["top"], x2: props["x2"], y2: props["y2"], style: line_svg_style(props))
+        end
+      end
+    end
+  end
+
+  def star_element(props, &block)
+    dc = props["draw_context"] || {}
+    fill = dc["fill"]
+    stroke = dc["stroke"]
+    fill = "black" if !fill || fill == ""
+    stroke = "black" if !stroke || stroke == ""
+    HTML.render do |h|
+      h.div(id: html_id, style: star_style(props)) do
+        h.svg(width: props["outer"], height: props["outer"], style: "fill:#{fill}") do
+          h.polygon(points: star_points(props), style: "stroke:#{stroke};stroke-width:2")
+        end
+        block.call(h) if block_given?
+      end
+    end
+  end
+
+  private
+
+  def arc_style(props)
+    drawable_style(props).merge({
+      left: "#{props["left"]}px",
+      top: "#{props["top"]}px",
+      width: "#{props["width"]}px",
+      height: "#{props["height"]}px",
+    })
+  end
+
+  def arc_path(props)
+    center_x = props["width"] / 2
+    center_y = props["height"] / 2
+    radius_x = props["width"] / 2
+    radius_y = props["height"] / 2
+    start_angle_degrees = radians_to_degrees(props["angle1"]) % 360
+    end_angle_degrees = radians_to_degrees(props["angle2"]) % 360
+    large_arc_flag = (end_angle_degrees - start_angle_degrees) % 360 > 180 ? 1 : 0
+
+    "M#{center_x} #{center_y} L#{props["width"]} #{center_y} " \
+      "A#{radius_x} #{radius_y} 0 #{large_arc_flag} 0 " \
+      "#{center_x + radius_x * Math.cos(degrees_to_radians(end_angle_degrees))} " \
+      "#{center_y + radius_y * Math.sin(degrees_to_radians(end_angle_degrees))} Z"
+  end
+
+  def line_div_style(props)
+    drawable_style(props).merge({
+      left: "#{props["left"]}px",
+      top: "#{props["top"]}px",
+    })
+  end
+
+  def line_svg_style(props)
+    stroke = if props["draw_context"] && !props["draw_context"]["stroke"].to_s.empty?
+      (props["draw_context"]["stroke"]).to_s
+    else
+      "black"
+    end
+    {
+
+      "stroke": stroke,
+      "stroke-width": "4",
+    }.compact
+  end
+
+  def rect_svg_style(props)
+    {
+      stroke: (props["draw_context"] || {})["stroke"],
+      #"stroke-width": "1",
+    }.compact
+  end
+
+  def star_style(props)
+    drawable_style(props).merge({
+      width: dimensions_length(props["width"]),
+      height: dimensions_length(props["height"]),
+    }).compact
+  end
+
+  def star_points(props)
+    angle = 2 * Math::PI / props["points"]
+    coordinates = []
+
+    props["points"].times do |i|
+      outer_angle = i * angle
+      inner_angle = outer_angle + angle / 2
+
+      coordinates.concat(star_get_coordinates(outer_angle, inner_angle, props))
+    end
+
+    coordinates.join(",")
+  end
+
+  def star_get_coordinates(outer_angle, inner_angle, props)
+    outer_x = props["outer"] / 2 + Math.cos(outer_angle) * props["outer"] / 2
+    outer_y = props["outer"] / 2 + Math.sin(outer_angle) * props["outer"] / 2
+
+    inner_x = props["outer"] / 2 + Math.cos(inner_angle) * props["inner"] / 2
+    inner_y = props["outer"] / 2 + Math.sin(inner_angle) * props["inner"] / 2
+
+    [outer_x, outer_y, inner_x, inner_y]
+  end
+
+  def arrow_element(props)
+    left = props["left"]
+    top = props["top"]
+    width = props["width"]
+    end_x = left + width
+    end_y = top
+    stroke_width = width / 2
+    dc = props["draw_context"] || {}
+    fill = dc["fill"]
+    stroke = dc["stroke"]
+    rotate = dc["rotate"]
+    fill = "black" if !fill || fill == ""
+    stroke = "black" if !stroke || stroke == ""
+
+    stroke_width = width / 4
+
+    HTML.render do |h|
+      h.div(id: html_id, style: arrow_div_style(props)) do
+        h.svg do
+          h.defs do
+            h.marker(
+              id: "head",
+              viewBox: "0 0 70 70",
+              markerWidth: stroke_width.to_s,
+              markerHeight: stroke_width.to_s,
+              refX: "5",
+              refY: "5",
+              orient: "auto-start-reverse",
+            ) do
+              h.path(d: "M 0 0 L 10 5 L 0 10 z", fill: fill.to_s)
+            end
+          end
+
+          h.line(
+            x2: left.to_s,
+            y2: top.to_s,
+            x1: end_x.to_s,
+            y1: end_y.to_s,
+            fill: fill.to_s,
+            stroke: stroke.to_s,
+            "stroke-width" => stroke_width.to_s,
+            "marker-end" => "url(#head)",
+            transform: "rotate(#{rotate}, #{left + width / 2}, #{top})",
+          )
+        end
+      end
+    end
+  end
+  def arrow_div_style(props)
+    drawable_style(props).merge({
+      position: "absolute",
+      left: "#{props["left"]}px",
+      top: "#{props["top"]}px",
+    })
+  end
+end

data/lib/scarpe/components/calzini/button.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Scarpe::Components::Calzini
+  def button_element(props)
+    HTML.render do |h|
+      h.button(
+        id: html_id,
+        onclick: handler_js_code("click"),
+        onmouseover: handler_js_code("hover"),
+        style: button_style(props),
+        title: props["tooltip"],
+      ) do
+        props["text"]
+      end
+    end
+  end
+
+  private
+
+  def button_style(props)
+    styles = drawable_style(props)
+
+    styles[:"background-color"] = props["color"] if props["color"]
+    styles[:"padding-top"] = props["padding_top"] if props["padding_top"]
+    styles[:"padding-bottom"] = props["padding_bottom"] if props["padding_bottom"]
+    styles[:color] = props["text_color"] if props["text_color"]
+    styles[:width] = dimensions_length(props["width"]) if props["width"]
+    styles[:height] = dimensions_length(props["height"]) if props["height"]
+    styles[:"font-size"] = props["font_size"] if props["font_size"]
+
+    styles[:top] = dimensions_length(props["top"]) if props["top"]
+    styles[:left] = dimensions_length(props["left"]) if props["left"]
+    styles[:position] = "absolute" if props["top"] || props["left"]
+    styles[:"font-size"] = dimensions_length(text_size(props["size"])) if props["size"]
+    styles[:"font-family"] = props["font"] if props["font"]
+
+    styles
+  end
+end

data/lib/scarpe/components/calzini/misc.rb

@@ -0,0 +1,146 @@
+# frozen_string_literal: true
+
+module Scarpe::Components::Calzini
+  def check_element(props)
+    HTML.render do |h|
+      h.input type: :checkbox,
+        id: html_id,
+        onclick: handler_js_code("click"),
+        value: props["text"],
+        checked: props["checked"],
+        style: drawable_style(props)
+    end
+  end
+
+  def edit_box_element(props)
+    oninput = handler_js_code("change", "this.value")
+
+    HTML.render do |h|
+      h.textarea(id: html_id, oninput: oninput, style: edit_box_style(props)) { props["text"] }
+    end
+  end
+
+  def edit_line_element(props)
+    oninput = handler_js_code("change", "this.value")
+
+    HTML.render do |h|
+      h.input(id: html_id, oninput: oninput, value: props["text"], style: edit_line_style(props))
+    end
+  end
+
+  def image_element(props)
+    style = image_style(props)
+
+    if props["click"]
+      HTML.render do |h|
+        h.a(id: html_id, href: props["click"]) { h.img(id: html_id, src: props["url"], style:) }
+      end
+    else
+      HTML.render do |h|
+        h.img(id: html_id, src: props["url"], style:)
+      end
+    end
+  end
+
+  def list_box_element(props)
+    onchange = handler_js_code("change", "this.options[this.selectedIndex].value")
+
+    # Is this useful at all? Is it overridden below completely?
+    option_attrs = { value: nil, selected: false }
+
+    HTML.render do |h|
+      h.select(id: html_id, onchange:, style: list_box_style(props)) do
+        (props["items"] || []).each do |item|
+          option_attrs = {
+            value: item,
+          }
+          if item == props["choose"]
+            option_attrs[:selected] = "true"
+          end
+          h.option(**option_attrs) do
+            item
+          end
+        end
+      end
+    end
+  end
+
+  def radio_element(props)
+    # This is wrong - need to default to the parent slot -- maybe its linkable ID?
+    group_name = props["group"] || "no_group"
+
+    HTML.render do |h|
+      h.input(
+        type: :radio,
+        id: html_id,
+        onclick: handler_js_code("click"),
+        name: group_name,
+        value: props["text"],
+        checked: props["checked"],
+        style: drawable_style(props),
+      )
+    end
+  end
+
+  def video_element(props)
+    HTML.render do |h|
+      h.video(id: html_id, style: drawable_style(props), controls: true) do
+        h.source(src: @url, type: props["format"])
+      end
+    end
+  end
+
+  def progress_element(props)
+    HTML.render do |h|
+      h.progress(
+        id: html_id,
+        style: drawable_style(props),
+        role: "progressbar",
+        "aria-valuenow": props["fraction"],
+        "aria-valuemin": 0.0,
+        "aria-valuemax": 1.0,
+        max: 1,
+        value: props["fraction"],
+      )
+    end
+  end
+
+  private
+
+  def edit_box_style(props)
+    drawable_style(props).merge({
+      height: dimensions_length(props["height"]),
+      width: dimensions_length(props["width"]),
+    }.compact)
+  end
+
+  def edit_line_style(props)
+    styles = drawable_style(props)
+
+    styles[:width] = dimensions_length(props["width"]) if props["width"]
+
+    styles
+  end
+
+  def image_style(props)
+    styles = drawable_style(props)
+
+    styles[:width] = dimensions_length(props["width"]) if props["width"]
+    styles[:height] = dimensions_length(props["height"]) if props["height"]
+
+    styles[:top] = dimensions_length(props["top"]) if props["top"]
+    styles[:left] = dimensions_length(props["left"]) if props["left"]
+    styles[:position] = "absolute" if props["top"] || props["left"]
+
+    styles
+  end
+
+  def list_box_style(props)
+    styles = drawable_style(props)
+
+    styles[:height] = dimensions_length(props["height"]) if props["height"]
+    styles[:width] = dimensions_length(props["width"]) if props["width"]
+
+    styles
+  end
+end

data/lib/scarpe/components/calzini/para.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Scarpe::Components::Calzini
+  # para_element is a bit of a hard one, since it does not-entirely-trivial
+  # mapping between display objects and IDs. But we don't want Calzini
+  # messing with the display service or display objects.
+  def para_element(props, &block)
+    HTML.render do |h|
+      h.p(**para_options(props), &block)
+    end
+  end
+
+  private
+
+  def para_options(props)
+    (props["html_attributes"] || {}).merge(id: html_id, style: para_style(props))
+  end
+
+  def para_style(props)
+    drawable_style(props).merge({
+      color: rgb_to_hex(props["stroke"]),
+      "font-size": para_font_size(props),
+      "font-family": props["font"],
+    }.compact)
+  end
+
+  def para_font_size(props)
+    return nil unless props["size"]
+
+    sz = props["size"].to_s
+    font_size = SIZES[sz.to_sym] || sz.to_i
+
+    dimensions_length(font_size)
+  end
+end