funicular 0.0.1 → 0.2.0

data/mrblib/file_upload.rb

@@ -0,0 +1,192 @@
+# 'rng' is a PicoRuby gem available only in the wasm build. When the runtime
+# is loaded under CRuby for SSR it is absent; FileUpload is client-only and
+# its methods are never called on the server (see Funicular.server?).
+begin
+  require 'rng'
+rescue LoadError
+  # not available outside wasm environment
+end
+
+module Funicular
+  module FileUpload
+    JS_HELPER_CODE = <<~JAVASCRIPT
+      (function() {
+        'use strict';
+        // Avoid duplicate mounting
+        if (window.funicularFormDataUpload) {
+          return;
+        }
+        // FormData upload helper
+        window.funicularFormDataUpload = function(url, fieldsObj, fileFieldName, fileRefId) {
+          const formData = new FormData();
+          for (const [key, value] of Object.entries(fieldsObj)) {
+            formData.append(key, String(value));
+          }
+          if (fileFieldName && fileRefId !== null && fileRefId !== undefined) {
+            const file = window.picorubyRefs[fileRefId];
+            if (file) {
+              formData.append(fileFieldName, file);
+            }
+          }
+          return fetch(url, {
+            method: 'PATCH',
+            body: formData
+          }).then(response => response.json());
+        };
+        console.log('Funicular helpers mounted');
+      })();
+    JAVASCRIPT
+
+    def self.mount
+      return if Funicular.server?
+      script = JS.document.createElement("script")
+      script[:textContent] = JS_HELPER_CODE
+      JS.document.body.appendChild(script)
+      JS.document.body.removeChild(script)
+    end
+
+    # Select a file from input element and generate preview
+    # @param input_id [String] DOM element ID of the file input
+    # @param block [Proc] Callback with preview data URL (or nil if no file)
+    def self.select_file_with_preview(input_id, &block)
+      input = JS.document.getElementById(input_id)
+      return block.call(nil, nil) unless input
+
+      # @type var files: Array[JS::Object]
+      files = input[:files]
+      if !files || files.length.to_i == 0
+        return block.call(nil, nil)
+      end
+
+      file = files[0]
+
+      # Use URL.createObjectURL instead of FileReader for preview
+      # This is simpler and doesn't require async callbacks
+      if file.nil?
+        raise "Selected file is nil"
+      else
+        url = JS.global[:URL]
+        if url.is_a?(JS::Object)
+          preview_url = url.createObjectURL(file)
+        else
+          preview_url = nil
+        end
+      end
+
+      # Call the block with file and preview URL
+      # @type var preview_url: String
+      block.call(file, preview_url) if block
+    end
+
+    # Upload data with FormData (supports file upload)
+    # @param url [String] Upload URL
+    # @param fields [Hash] Form fields to include
+    # @param file_field [String] Name of the file field
+    # @param file [JS::Object] File object from input element
+    # @param block [Proc] Callback with response data
+    def self.upload_with_formdata(url, fields: {}, file_field: nil, file: nil, &block)
+      # Store file and callback ID
+      @callback_counters ||= [] # steep:ignore UnannotatedEmptyCollection
+      callback_id = _ = nil
+      while true
+        callback_id = RNG.random_int
+        break unless @callback_counters.include?(callback_id)
+      end
+      @callback_counters << callback_id
+
+      if file
+        JS.global[:_tempFileForUpload] = file
+      end
+
+      # Build fields object as JSON string
+      fields_json = JSON.generate(fields)
+
+      # Call JavaScript helper
+      # Note: The helper returns a Promise that resolves to JSON data (not Response)
+      script = JS.document.createElement("script")
+      script_code = <<~JS
+        (function() {
+          var fieldsObj = JSON.parse('#{fields_json.gsub("'", "\\\\'")}');
+          var fileRefId = null;
+          if (window._tempFileForUpload) {
+            fileRefId = window.picorubyRefs.indexOf(window._tempFileForUpload);
+          }
+          // Call helper and store result as JSON string when Promise resolves
+          window.funicularFormDataUpload(
+            '#{url}',
+            fieldsObj,
+            #{file_field ? "'#{file_field}'" : 'null'},
+            fileRefId
+          ).then(function(data) {
+            // Store as JSON string for easy Ruby parsing
+            window._funicularUploadResult_#{callback_id} = JSON.stringify(data);
+          }).catch(function(error) {
+            window._funicularUploadResult_#{callback_id} = JSON.stringify({error: error.toString()});
+          });
+        })();
+      JS
+      script[:textContent] = script_code
+      JS.document.body.appendChild(script)
+      JS.document.body.removeChild(script)
+
+      # Poll for result (simple polling approach)
+      counter = 0
+      json_str = nil
+      while true
+        counter += 1
+        sleep 0.1
+        json_str = JS.global[:"_funicularUploadResult_#{callback_id}"]
+        break if json_str && !json_str.to_s.empty?
+        if 100 < counter
+          puts "[WARN] Timeout waiting for upload result. Return without calling block."
+          return
+        end
+      end
+
+      # Get JSON string from global variable (already retrieved above)
+      result = JSON.parse(json_str.to_s)
+
+      block.call(result) if block
+      puts "[DEBUG] Block called"
+    ensure
+      # Always cleanup global references, even on timeout or error
+      if callback_id
+        @callback_counters.delete(callback_id) if @callback_counters
+        if JS.global[:"_funicularUploadResult_#{callback_id}"]
+          JS.global[:"_funicularUploadResult_#{callback_id}"] = nil
+        end
+      end
+      if JS.global[:_tempFileForUpload]
+        JS.global[:_tempFileForUpload] = nil
+      end
+    end
+
+    # Helper: Store file in global variable for later use
+    def self.store_file(input_id, storage_key = '_selectedFile')
+      input = JS.document.getElementById(input_id)
+      return nil unless input
+
+      # @type var files: Array[JS::Object]
+      files = input[:files]
+      if !files || files.length.to_i == 0
+        JS.global[storage_key] = nil
+        return nil
+      end
+
+      file = files[0]
+      JS.global[storage_key] = file
+      file
+    end
+
+    # Helper: Retrieve stored file
+    def self.retrieve_file(storage_key = '_selectedFile')
+      file = JS.global[storage_key]
+      JS.global[storage_key] = nil if file
+      if file.is_a?(JS::Object)
+        file
+      else
+        nil
+      end
+    end
+  end
+end

data/mrblib/form_builder.rb

@@ -0,0 +1,300 @@
+module Funicular
+  class FormBuilder
+    attr_reader :component, :model_key, :options
+
+    def initialize(component, model_key, options = {})
+      @component = component
+      @model_key = model_key
+      @options = options
+      # Per-form options win, then the global Funicular.configure_forms config,
+      # then the built-in defaults. The defaults are semantic class names whose
+      # CSS the gem ships and injects via picoruby_include_tag, so error styling
+      # works without depending on the host app's CSS pipeline (e.g. Tailwind,
+      # which never scans the gem and so would not generate utility classes
+      # emitted from here).
+      config = Funicular.form_builder_config || {}
+      @error_class = options[:error_class] || config[:error_class] || "funicular-error"
+      @field_error_class = options[:field_error_class] || config[:field_error_class] || "funicular-field-error"
+    end
+
+    # Generic field builder for input elements
+    def build_field(field_name, field_type, field_options = {})
+      field_key = field_name.to_s
+      full_key = "#{@model_key}.#{field_key}"
+
+      # Get current value from state
+      value = get_nested_value(@component.state, full_key) || ""
+
+      # Build input change handler
+      on_input = ->(event) do
+        new_value = event.target[:value]
+        set_nested_value(@model_key, field_key, new_value)
+      end
+
+      # Check for errors
+      error_message = @component.state.errors ? @component.state.errors[field_key.to_sym] : nil
+      # errors may be a single message (legacy) or an array of messages
+      # (Funicular::Model::Errors#messages). Show the first.
+      error_message = error_message.first if error_message.is_a?(Array)
+      has_error = !(error_message.nil? || error_message == "")
+
+      # Merge CSS classes (add error class if error exists)
+      css_class = field_options[:class]
+      css_class = css_class.to_s if css_class
+      css_class ||= ""
+
+      if has_error
+        if css_class.empty?
+          css_class = @field_error_class
+        else
+          css_class = "#{css_class} #{@field_error_class}"
+        end
+      end
+
+      # Build field attributes
+      attrs = {
+        type: field_type,
+        value: value,
+        oninput: on_input
+      }.merge(field_options.reject { |k, _| k == :class })
+
+      # Add class attribute if not empty
+      attrs[:class] = css_class unless css_class.empty?
+
+      # Render field + error message
+      @component.div do
+        @component.input(attrs)
+        if has_error
+          @component.div(class: @error_class) { error_message }
+        end
+      end
+    end
+
+    # Public field methods
+    def text_field(field_name, options = {})
+      build_field(field_name, "text", options)
+    end
+
+    def password_field(field_name, options = {})
+      build_field(field_name, "password", options)
+    end
+
+    def email_field(field_name, options = {})
+      build_field(field_name, "email", options)
+    end
+
+    def number_field(field_name, options = {})
+      build_field(field_name, "number", options)
+    end
+
+    def textarea(field_name, options = {})
+      field_key = field_name.to_s
+      full_key = "#{@model_key}.#{field_key}"
+
+      value = get_nested_value(@component.state, full_key) || ""
+
+      on_input = ->(event) do
+        new_value = event.target[:value]
+        set_nested_value(@model_key, field_key, new_value)
+      end
+
+      error_message = @component.state.errors ? @component.state.errors[field_key.to_sym] : nil
+      # errors may be a single message (legacy) or an array of messages
+      # (Funicular::Model::Errors#messages). Show the first.
+      error_message = error_message.first if error_message.is_a?(Array)
+      has_error = !(error_message.nil? || error_message == "")
+
+      css_class = options[:class]
+      css_class = css_class.to_s if css_class
+      css_class ||= ""
+
+      if has_error
+        if css_class.empty?
+          css_class = @field_error_class
+        else
+          css_class = "#{css_class} #{@field_error_class}"
+        end
+      end
+
+      attrs = {
+        oninput: on_input
+      }.merge(options.reject { |k, _| k == :class })
+
+      attrs[:class] = css_class unless css_class.empty?
+
+      @component.div do
+        @component.textarea(attrs) { value }
+        if has_error
+          @component.div(class: @error_class) { error_message }
+        end
+      end
+    end
+
+    def checkbox(field_name, options = {})
+      field_key = field_name.to_s
+      full_key = "#{@model_key}.#{field_key}"
+
+      value = get_nested_value(@component.state, full_key) || false
+
+      on_change = ->(event) do
+        new_value = event.target[:checked]
+        set_nested_value(@model_key, field_key, new_value)
+      end
+
+      attrs = {
+        type: "checkbox",
+        checked: value,
+        onchange: on_change
+      }.merge(options)
+
+      @component.input(attrs)
+    end
+
+    def select(field_name, choices, options = {})
+      field_key = field_name.to_s
+      full_key = "#{@model_key}.#{field_key}"
+
+      value = get_nested_value(@component.state, full_key) || ""
+
+      on_change = ->(event) do
+        new_value = event.target[:value]
+        set_nested_value(@model_key, field_key, new_value)
+      end
+
+      error_message = @component.state.errors ? @component.state.errors[field_key.to_sym] : nil
+      # errors may be a single message (legacy) or an array of messages
+      # (Funicular::Model::Errors#messages). Show the first.
+      error_message = error_message.first if error_message.is_a?(Array)
+      has_error = !(error_message.nil? || error_message == "")
+
+      css_class = options[:class]
+      css_class = css_class.to_s if css_class
+      css_class ||= ""
+
+      if has_error
+        if css_class.empty?
+          css_class = @field_error_class
+        else
+          css_class = "#{css_class} #{@field_error_class}"
+        end
+      end
+
+      attrs = {
+        onchange: on_change
+      }.merge(options.reject { |k, _| k == :class })
+
+      attrs[:class] = css_class unless css_class.empty?
+
+      @component.div do
+        @component.select(attrs) do
+          choices.each do |choice|
+            option_value, option_text = choice.is_a?(Array) ? choice : [choice, choice]
+            selected = value.to_s == option_value.to_s
+            @component.option(value: option_value, selected: selected) do
+              option_text
+            end
+          end
+        end
+        if has_error
+          @component.div(class: @error_class) { error_message }
+        end
+      end
+    end
+
+    def file_field(field_name, options = {})
+      field_key = field_name.to_s
+
+      # Check if custom onchange handler is provided
+      custom_handler = options.delete(:onchange)
+
+      # Default handler: store file name in state
+      default_handler = ->(event) do
+        file = event.target[:files] ? event.target[:files][0] : nil
+        file_name = if file.nil?
+                      nil
+                    else
+                      # @type var file: Hash[Symbol, String]
+                      file[:name]
+                    end
+        set_nested_value(@model_key, field_key, file_name)
+      end
+
+      on_change = custom_handler || default_handler
+
+      attrs = {
+        type: "file",
+        onchange: on_change
+      }.merge(options)
+
+      @component.input(attrs)
+    end
+
+    def submit(label = "Submit", options = {})
+      attrs = { type: "submit" }.merge(options)
+      @component.button(attrs) { label }
+    end
+
+    def label(field_name, text = nil, options = {})
+      text ||= field_name.to_s.split('_').map { |word| word.capitalize }.join(' ')
+      @component.label(options) { text }
+    end
+
+    private
+
+    # Get nested value from state (e.g., "user.username")
+    def get_nested_value(state, key_path)
+      keys = key_path.split('.')
+      value = state
+      keys.each do |key|
+        if value.respond_to?(key.to_sym)
+          value = value.send(key.to_sym)
+        elsif value.is_a?(Hash)
+          value = value[key.to_sym] || value[key]
+        else
+          value = nil
+        end
+        break if value.nil?
+      end
+      value
+    end
+
+    # Set nested value in state via patch
+    def set_nested_value(model_key, field_key, new_value)
+      # Handle nested keys like "address.city"
+      if field_key.include?('.')
+        # Complex nested update
+        keys = field_key.split('.')
+        current_model = @component.state.send(model_key.to_sym)
+        updated_model = deep_merge_value(current_model, keys, new_value)
+        @component.patch(model_key.to_sym => updated_model)
+      else
+        # Simple update
+        current_model = @component.state.send(model_key.to_sym)
+        if current_model.nil?
+          @component.patch(model_key.to_sym => { field_key.to_sym => new_value })
+        elsif current_model.is_a?(Hash)
+          updated_model = current_model.merge(field_key.to_sym => new_value)
+          @component.patch(model_key.to_sym => updated_model)
+        else
+          # Assume it's an object with instance variables
+          current_model.instance_variable_set("@#{field_key}", new_value)
+          @component.patch(model_key.to_sym => current_model)
+        end
+      end
+    end
+
+    # Deep merge helper for nested keys
+    def deep_merge_value(hash, keys, value)
+      return hash unless hash.is_a?(Hash)
+
+      hash = hash.dup
+      if keys.length == 1
+        hash[keys[0].to_sym] = value
+      else
+        key = keys[0].to_sym
+        hash[key] = deep_merge_value(hash[key] || {}, (keys[1..-1] || []), value)
+      end
+      hash
+    end
+  end
+end