ruflet_rails 0.0.13 → 0.0.14

data/lib/ruflet/rails/native_app/actions.rb

@@ -0,0 +1,167 @@
+# frozen_string_literal: true
+
+module Ruflet
+  module Rails
+    class NativeApp
+      private
+
+      # --- Declared actions --------------------------------------------------
+
+      # Route a `data-ruflet-action` element to native.
+      def dispatch_action(spec)
+        component = (spec["component"] || spec["type"]).to_s
+        action = spec["action"].to_s
+
+        case component
+        when "navigation", "navigate"
+          navigate_screen(spec["url"], action, spec)
+        when "request", "form"
+          submit_webview_request(spec["url"], spec["method"] || action || "post")
+        when "dialog"
+          show_native_dialog(spec)
+        when "toast"
+          show_toast(spec)
+        when "sheet"
+          present_sheet(spec)
+        when "menu"
+          show_native_menu(spec)
+        when "drawer"
+          show_drawer
+        when "share"
+          share_content(spec)
+        when "clipboard", "copy"
+          copy_to_clipboard(spec)
+        when "launcher", "url", "url_launcher"
+          launch_external_url(spec)
+        when "haptic", "haptic_feedback"
+          haptic_feedback(spec)
+        else
+          case action
+          when "dialog" then show_native_dialog(spec)
+          when "toast"  then show_toast(spec)
+          when "sheet"  then present_sheet(spec)
+          when "menu"   then show_native_menu(spec)
+          when "drawer" then show_drawer
+          when "end_drawer" then show_end_drawer
+          when "share" then share_content(spec)
+          when "copy", "clipboard" then copy_to_clipboard(spec)
+          when "launch", "url", "url_launcher" then launch_external_url(spec)
+          when "haptic", "haptic_feedback" then haptic_feedback(spec)
+          when "back"   then pop
+          when "delete", "post", "patch", "put" then submit_webview_request(spec["url"], action)
+          when "navigate" then navigate_screen(spec["url"], spec["mode"] || "push", spec)
+          when "push", "replace", "root" then navigate_screen(spec["url"], action, spec)
+          end
+        end
+      end
+
+      # --- Native services ---------------------------------------------------
+
+      def share_content(spec)
+        clear_transient_overlays
+        files = spec["files"]
+        uri = share_uri_for(spec)
+        text = spec["text"] || spec["message"] || spec["content"]
+
+        if files
+          @page.share_files(files, text: text, title: spec["title"], subject: spec["subject"])
+        elsif uri && text.to_s.empty?
+          @page.share_uri(uri)
+        else
+          @page.share_text(text.to_s, title: spec["title"], subject: spec["subject"])
+        end
+        haptic_feedback({ "style" => "selection" }) if spec["haptic"]
+      rescue StandardError
+        nil
+      end
+
+      def copy_to_clipboard(spec)
+        clear_transient_overlays
+        value = spec["text"] || spec["value"] || spec["content"] || spec["message"] || spec["url"]
+        return if value.to_s.empty?
+
+        @page.set_clipboard(value)
+        show_toast(
+          "message" => spec["toast"].to_s,
+          "duration" => (spec["toast_duration"] || spec["duration"] || 900).to_s
+        ) unless spec["toast"].to_s.empty?
+        haptic_feedback({ "style" => "selection" }) if spec.fetch("haptic", true)
+      rescue StandardError
+        nil
+      end
+
+      def share_uri_for(spec)
+        uri = spec["uri"] || spec["url"]
+        return current_url if uri.to_s.empty? || uri.to_s == "#"
+
+        uri
+      end
+
+      def same_url?(left, right)
+        absolute_url(left).to_s == absolute_url(right).to_s
+      end
+
+      def clear_transient_overlays
+        @page.snackbar = nil if @page.respond_to?(:snackbar=)
+      rescue StandardError
+        nil
+      end
+
+      def launch_external_url(spec)
+        url = spec["url"] || spec["href"] || spec["uri"]
+        return if url.to_s.empty?
+
+        @page.launch_url(url.to_s, mode: spec["mode"])
+      rescue StandardError
+        nil
+      end
+
+      def submit_webview_request(url, method = "post")
+        target = absolute_url(url)
+        return if target.empty?
+
+        verb = method.to_s.downcase
+        verb = "post" if verb.empty?
+        js = <<~JS
+          (function () {
+            var token = document.querySelector("meta[name='csrf-token']");
+            var form = document.createElement("form");
+            form.method = "post";
+            form.action = #{target.to_json};
+            form.style.display = "none";
+            var methodInput = document.createElement("input");
+            methodInput.type = "hidden";
+            methodInput.name = "_method";
+            methodInput.value = #{verb.to_json};
+            form.appendChild(methodInput);
+            if (token && token.content) {
+              var csrf = document.createElement("input");
+              csrf.type = "hidden";
+              csrf.name = "authenticity_token";
+              csrf.value = token.content;
+              form.appendChild(csrf);
+            }
+            document.body.appendChild(form);
+            form.submit();
+          })();
+        JS
+        @screens.last&.webview&.run_javascript(js)
+      rescue StandardError
+        nil
+      end
+
+      def haptic_feedback(spec)
+        style = (spec["style"] || spec["kind"] || spec["impact"] || "selection").to_s
+        case style
+        when "heavy" then @page.heavy_impact
+        when "medium" then @page.medium_impact
+        when "light" then @page.light_impact
+        when "vibrate" then @page.vibrate
+        else @page.selection_click
+        end
+      rescue StandardError
+        nil
+      end
+    end
+  end
+end

data/lib/ruflet/rails/native_app/customization.rb

@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+
+module Ruflet
+  module Rails
+    class NativeApp
+      CONTROL_PROP_KEYS = {
+        appbar: %w[
+          actions_padding adaptive automatically_imply_leading bgcolor center_title clip_behavior color data elevation
+          elevation_on_scroll exclude_header_semantics force_material_transparency leading_width opacity secondary
+          shadow_color shape title_spacing title_text_style toolbar_height toolbar_opacity toolbar_text_style tooltip visible
+        ],
+        navigation_bar: %w[
+          adaptive bgcolor border elevation height indicator_color indicator_shape label_behavior label_padding margin
+          overlay_color shadow_color surface_tint_color tooltip visible width
+        ],
+        navigation_bar_destination: %w[
+          adaptive bgcolor data disabled selected_icon tooltip visible
+        ],
+        navigation_drawer: %w[
+          adaptive bgcolor elevation indicator_color indicator_shape opacity shadow_color surface_tint_color tile_padding
+          tooltip visible width
+        ],
+        list_tile: %w[
+          adaptive autofocus bgcolor content_padding dense disabled enable_feedback height horizontal_spacing hover_color
+          icon_color is_three_line min_height min_leading_width min_vertical_padding selected_color selected_tile_color
+          shape splash_color style subtitle_text_style text_color title_alignment title_text_style tooltip visible
+          visual_density
+        ],
+        navigation_rail: %w[
+          bgcolor elevation extended group_alignment height indicator_color indicator_shape label_type min_extended_width
+          min_width opacity selected_label_text_style tooltip trailing unselected_label_text_style use_indicator visible width
+        ],
+        navigation_rail_destination: %w[
+          indicator_color indicator_shape padding selected_icon tooltip visible
+        ],
+        icon_button: %w[
+          adaptive alignment autofocus bgcolor disabled disabled_color enable_feedback focus_color height highlight_color
+          hover_color icon_color icon_size padding selected selected_icon selected_icon_color size_constraints splash_color
+          splash_radius style tooltip visible visual_density width
+        ],
+        icon: %w[color size opacity tooltip visible],
+        text: %w[
+          color font_family italic max_lines no_wrap opacity selectable semantics_label size style text_align
+          theme_style tooltip visible weight
+        ],
+        alert_dialog: %w[
+          action_button_padding actions_alignment actions_overflow_button_spacing actions_padding adaptive alignment
+          barrier_color bgcolor clip_behavior content_padding content_text_style elevation icon_color icon_padding
+          inset_padding modal opacity open scrollable semantics_label shadow_color shape title_padding title_text_style
+          tooltip visible
+        ],
+        snack_bar: %w[
+          action_overflow_threshold adaptive behavior bgcolor clip_behavior close_icon_color dismiss_direction duration
+          elevation margin opacity open padding persist shape show_close_icon tooltip visible width
+        ],
+        bottom_sheet: %w[
+          adaptive animation_style barrier_color bgcolor clip_behavior dismissible draggable elevation fullscreen
+          maintain_bottom_view_insets_padding opacity open scrollable shape show_drag_handle size_constraints tooltip
+          use_safe_area visible
+        ],
+        container: %w[
+          alignment bgcolor border border_radius bottom clip_behavior color expand height left margin opacity padding
+          right shadow tooltip top visible width
+        ],
+        shimmer: %w[base_color direction duration highlight_color loop period visible]
+      }.freeze
+
+      INTERNAL_PROP_KEYS = %w[
+        action actions component confirm content files haptic href icon items label leading loading message mode nav
+        payload selected subject text title toast toast_duration type uri url value
+      ].freeze
+
+      private
+
+      def ruflet_props_for(control, source, except: [])
+        return {} unless source.is_a?(Hash)
+
+        raw = {}
+        raw.merge!(stringify_hash(source["props"])) if source["props"].is_a?(Hash)
+        raw.merge!(stringify_hash(source))
+        rejected = INTERNAL_PROP_KEYS + Array(except).map(&:to_s)
+        allowed = CONTROL_PROP_KEYS.fetch(control).map(&:to_s)
+        raw.each_with_object({}) do |(key, value), props|
+          next if value.nil?
+          next if rejected.include?(key.to_s)
+          next unless allowed.include?(key.to_s)
+
+          props[key.to_sym] = ruflet_stringify_nested(value)
+        end
+      end
+
+      def nested_ruflet_props(source, *keys, control:)
+        return {} unless source.is_a?(Hash)
+
+        keys.each do |key|
+          value = source[key.to_s]
+          return ruflet_props_for(control, value) if value.is_a?(Hash)
+        end
+        {}
+      end
+
+      def stringify_hash(value)
+        value.each_with_object({}) { |(key, nested), out| out[key.to_s] = nested }
+      end
+
+      def ruflet_stringify_nested(value)
+        case value
+        when Hash
+          value.each_with_object({}) { |(key, nested), out| out[key.to_s] = ruflet_stringify_nested(nested) }
+        when Array
+          value.map { |nested| ruflet_stringify_nested(nested) }
+        else
+          value
+        end
+      end
+    end
+  end
+end

data/lib/ruflet/rails/native_app/html_adapter.rb

@@ -0,0 +1,248 @@
+# frozen_string_literal: true
+
+module Ruflet
+  module Rails
+    class NativeApp
+      # Tiny WebView-side adapter: read ERB-rendered `data-ruflet-*`
+      # declarations and report them so Ruby can build normal Ruflet controls.
+      HTML_ADAPTER_JS = <<~JS
+        (function () {
+          var rufletInsideSheet = __RUFLET_INSIDE_SHEET__;
+
+          function report(kind, value) { console.log("ruflet:" + kind + ":" + value); }
+          function attr(el, name) {
+            var v = el.getAttribute(name);
+            if (v != null) return v;
+            v = el.getAttribute("data-" + name);
+            if (v != null) return v;
+            return el.getAttribute("data-ruflet-" + name);
+          }
+          function has(el, name) {
+            return el.hasAttribute(name) || el.hasAttribute("data-" + name) || el.hasAttribute("data-ruflet-" + name);
+          }
+          function readJSON(raw) {
+            if (!raw) return {};
+            try { return JSON.parse(raw); } catch (_) { return {}; }
+          }
+
+          function syncChrome() {
+            var bar = document.querySelector("[ruflet-appbar],[data-ruflet-appbar]");
+            if (bar) {
+              bar.style.display = "none";
+              var appbar = readJSON(attr(bar, "ruflet-appbar"));
+              var heading = bar.querySelector("h1,h2,.title");
+              var title = appbar.title || attr(bar, "ruflet-title") || (heading ? heading.textContent : "") || document.title || "";
+              var leading = appbar.leading || null;
+              var leadingEl = bar.querySelector("[ruflet-leading],[data-ruflet-leading]");
+              if (leadingEl) leading = readJSON(attr(leadingEl, "ruflet-leading"));
+              var actions = [];
+              bar.querySelectorAll("[ruflet-icon],[data-ruflet-icon]").forEach(function (el) {
+                var icon = readJSON(attr(el, "ruflet-icon"));
+                // Carry the whole payload through (e.g. the title/leading the
+                // action declares for the screen it pushes), then normalize the
+                // icon/url/action the AppBar button itself needs.
+                var entry = Object.assign({}, icon);
+                entry.icon = icon.icon || attr(el, "ruflet-icon");
+                entry.url = el.getAttribute("href") || icon.url || attr(el, "ruflet-url") || "";
+                entry.action = icon.action || attr(el, "ruflet-action") || "push";
+                actions.push(entry);
+              });
+              if (appbar.actions && appbar.actions.length) actions = appbar.actions.concat(actions);
+              report("appbar", JSON.stringify({ title: (title || "").trim(), leading: leading, actions: actions }));
+            } else {
+              report("appbar", JSON.stringify({ absent: true }));
+            }
+            var nav = document.querySelector("[ruflet-tabs],[data-ruflet-tabs]");
+            if (nav) {
+              nav.style.display = "none";
+              var navSpec = readJSON(attr(nav, "ruflet-tabs"));
+              var items = [];
+              nav.querySelectorAll("a[href]").forEach(function (a) {
+                var icon = readJSON(attr(a, "ruflet-icon"));
+                var entry = Object.assign({}, icon);
+                entry.label = icon.label || attr(a, "ruflet-label") || a.textContent.trim();
+                entry.icon = icon.icon || attr(a, "ruflet-icon") || "circle";
+                entry.url = a.getAttribute("href");
+                entry.selected = has(a, "ruflet-selected");
+                items.push(entry);
+              });
+              if (items.length >= 2) report("bottomnav", JSON.stringify(Object.assign({}, navSpec, { items: items })));
+            } else {
+              report("bottomnav", JSON.stringify({ absent: true }));
+            }
+            var drawer = document.querySelector("[ruflet-drawer],[data-ruflet-drawer]");
+            if (drawer) {
+              drawer.style.display = "none";
+              var drawerSpec = readJSON(attr(drawer, "ruflet-drawer"));
+              var drawerItems = [];
+              drawer.querySelectorAll("a[href]").forEach(function (a) {
+                var icon = readJSON(attr(a, "ruflet-icon"));
+                var entry = Object.assign({}, icon);
+                entry.label = icon.label || attr(a, "ruflet-label") || a.textContent.trim();
+                entry.icon = icon.icon || attr(a, "ruflet-icon") || "circle";
+                entry.url = a.getAttribute("href");
+                entry.action = icon.action || attr(a, "ruflet-action") || drawerSpec.action || "root";
+                entry.selected = has(a, "ruflet-selected");
+                drawerItems.push(entry);
+              });
+              if (drawerItems.length) report("drawer", JSON.stringify(Object.assign({}, drawerSpec, { items: drawerItems })));
+            } else {
+              report("drawer", JSON.stringify({ absent: true }));
+            }
+            var rail = document.querySelector("[ruflet-rail],[data-ruflet-rail]");
+            if (rail) {
+              rail.style.display = "none";
+              var railSpec = readJSON(attr(rail, "ruflet-rail"));
+              if (railSpec.breakpoint && window.innerWidth < Number(railSpec.breakpoint)) {
+                report("rail", JSON.stringify({ absent: true }));
+                return;
+              }
+              var railItems = [];
+              rail.querySelectorAll("a[href]").forEach(function (a) {
+                var icon = readJSON(attr(a, "ruflet-icon"));
+                var entry = Object.assign({}, icon);
+                entry.label = icon.label || attr(a, "ruflet-label") || a.textContent.trim();
+                entry.icon = icon.icon || attr(a, "ruflet-icon") || "circle";
+                entry.url = a.getAttribute("href");
+                entry.action = icon.action || attr(a, "ruflet-action") || railSpec.action || "root";
+                entry.selected = has(a, "ruflet-selected");
+                railItems.push(entry);
+              });
+              if (railItems.length >= 2) report("rail", JSON.stringify(Object.assign({}, railSpec, { items: railItems })));
+            } else {
+              report("rail", JSON.stringify({ absent: true }));
+            }
+          }
+          syncChrome();
+
+          if (window.__rufletHtmlAdapterBound) return;
+          window.__rufletHtmlAdapterBound = true;
+
+          document.addEventListener("click", function (e) {
+            var t = e.target;
+            var nav = t && t.closest ? t.closest("[ruflet-screen],[data-ruflet-screen]") : null;
+            if (nav) {
+              e.preventDefault();
+              var spec = readJSON(attr(nav, "ruflet-screen"));
+              spec.component = spec.component || "navigation";
+              spec.url = nav.getAttribute("href") || spec.url || attr(nav, "ruflet-url") || "";
+              report("action", JSON.stringify(spec));
+              return;
+            }
+
+            var el = t && t.closest ? t.closest("[ruflet-action],[data-ruflet-action]") : null;
+            if (el) {
+              e.preventDefault();
+              var payload = readJSON(attr(el, "ruflet-action"));
+              payload.url = el.getAttribute("href") || payload.url || attr(el, "ruflet-url") || "";
+              report("action", JSON.stringify(payload));
+              return;
+            }
+
+            if (rufletInsideSheet) {
+              var link = t && t.closest ? t.closest("a[href]") : null;
+              if (link) {
+                var href = link.getAttribute("href") || "";
+                var target = link.getAttribute("target") || "";
+                if (href && href !== "#" && target !== "_blank" && !/^(mailto:|tel:|sms:|javascript:)/i.test(href)) {
+                  e.preventDefault();
+                  var linkSpec = readJSON(attr(link, "ruflet-link"));
+                  linkSpec.component = linkSpec.component || "navigation";
+                  linkSpec.action = linkSpec.action || attr(link, "ruflet-mode") || attr(link, "ruflet-nav") || "root";
+                  linkSpec.url = href;
+                  linkSpec.label = linkSpec.label || link.textContent.trim();
+                  if (attr(link, "ruflet-close") != null) linkSpec.close = attr(link, "ruflet-close");
+                  report("action", JSON.stringify(linkSpec));
+                  return;
+                }
+              }
+            }
+          }, true);
+        })();
+      JS
+
+      ACTION_PREFIX    = "ruflet:action:"
+      APPBAR_PREFIX    = "ruflet:appbar:"
+      BOTTOMNAV_PREFIX = "ruflet:bottomnav:"
+      DRAWER_PREFIX    = "ruflet:drawer:"
+      RAIL_PREFIX      = "ruflet:rail:"
+
+      def self.html_adapter_js(sheet: false)
+        HTML_ADAPTER_JS.sub("__RUFLET_INSIDE_SHEET__", sheet ? "true" : "false")
+      end
+
+      private
+
+      # --- HTML adapter ------------------------------------------------------
+
+      def inject_html_adapter(screen)
+        inject_html_adapter_for(screen.webview)
+      rescue StandardError
+        nil
+      end
+
+      def inject_html_adapter_for(webview, sheet: false)
+        webview.run_javascript(self.class.html_adapter_js(sheet: sheet)) if webview.respond_to?(:run_javascript)
+      rescue StandardError
+        nil
+      end
+
+      # Force JavaScript on for a (mounted) webview. The mobile client only
+      # enables JS through this invoke method — the enable_javascript prop is a
+      # no-op there — so we call it on every page start.
+      def enable_js(webview)
+        webview.set_javascript_mode("unrestricted") if webview.respond_to?(:set_javascript_mode)
+      rescue StandardError
+        nil
+      end
+
+      def handle_message(screen, message)
+        return if message.nil?
+
+        if message.start_with?(ACTION_PREFIX)
+          spec = parse_json(message[ACTION_PREFIX.length..])
+          dispatch_action(spec) if spec
+        elsif message.start_with?(APPBAR_PREFIX)
+          spec = parse_json(message[APPBAR_PREFIX.length..])
+          apply_appbar(screen, spec) if spec
+        elsif message.start_with?(BOTTOMNAV_PREFIX)
+          spec = parse_json(message[BOTTOMNAV_PREFIX.length..])
+          apply_bottomnav(spec) if spec
+        elsif message.start_with?(DRAWER_PREFIX)
+          spec = parse_json(message[DRAWER_PREFIX.length..])
+          apply_drawer(screen, spec) if spec
+        elsif message.start_with?(RAIL_PREFIX)
+          spec = parse_json(message[RAIL_PREFIX.length..])
+          apply_rail(screen, spec) if spec
+        end
+      end
+
+      def handle_sheet_message(message)
+        return if message.nil?
+
+        if message.start_with?(ACTION_PREFIX)
+          spec = parse_json(message[ACTION_PREFIX.length..])
+          if spec
+            if close_sheet_for?(spec)
+              close_sheet { dispatch_action(spec) }
+            else
+              dispatch_action(spec)
+            end
+          end
+        elsif message.start_with?(APPBAR_PREFIX) || message.start_with?(BOTTOMNAV_PREFIX) ||
+              message.start_with?(DRAWER_PREFIX) || message.start_with?(RAIL_PREFIX)
+          # Chrome declarations inside a modal sheet describe the sheet body,
+          # not the app shell. Ignore them; the host screen owns native chrome.
+          nil
+        end
+      end
+
+      def parse_json(raw)
+        value = JSON.parse(raw.to_s)
+        value.is_a?(Hash) ? value : nil
+      rescue JSON::ParserError
+        nil
+      end
+    end
+  end
+end