proscenium 0.19.0.beta15-arm64-darwin → 0.19.0.test1-arm64-darwin

data/lib/proscenium/ui/form.rb

@@ -0,0 +1,211 @@
+# frozen_string_literal: true
+
+module Proscenium::UI
+  # Helpers to aid in building forms and associated inputs with built-in styling, and inspired by
+  # Rails form helpers and SimpleForm.
+  #
+  # Start by creating the form with `Proscenium::UI::Form`, which expects a model
+  # instance, and a block in which you define one or more fields. It automatically includes a hidden
+  # authenticity token field for you.
+  #
+  # Example:
+  #
+  #   render Proscenium::UI::Form.new(User.new) do |f|
+  #     f.text_field :name
+  #     f.radio_group :role, %i[admin manager]
+  #     f.submit 'Save'
+  #   end
+  #
+  # The following fields (inputs) are available:
+  #
+  #   - `url_field` - <input> with 'url' type.
+  #   - `text_field` - <input> with 'text' type.
+  #   - `textarea_field` - <textarea>.
+  #   - `rich_textarea_field` - A rich <textarea> using ActionText and Trix.
+  #   - `email_field` - <input> with 'email' type.
+  #   - `number_field` - <input> with 'number' type.
+  #   - `color_field` - <input> with 'color' type.
+  #   - `hidden_field` - <input> with 'hidden' type.
+  #   - `search_field` - <input> with 'search' type.
+  #   - `password_field` - <input> with 'password' type.
+  #   - `tel_field` - <input> with 'tel' type.
+  #   - `range_field` - <input> with 'range' type.
+  #   - `time_field` - <input> with 'time' type.
+  #   - `date_field` - <input> with 'date' type.
+  #   - `week_field` - <input> with 'week' type.
+  #   - `month_field` - <input> with 'month' type.
+  #   - `datetime_local_field` - <input> with 'datetime-local' type.
+  #   - `checkbox_field` - <input> with 'checkbox' type.
+  #   - `radio_field` - <input> with 'radio' type.
+  #   - `radio_group` - group of <input>'s with 'radio' type.
+  #   - `select_field` - <select> input.
+  #
+  class Form < Proscenium::UI::Component
+    extend ActiveSupport::Autoload
+    extend Literal::Properties
+
+    autoload :FieldMethods
+    autoload :Translation
+
+    module Fields
+      extend ActiveSupport::Autoload
+
+      autoload :Base
+      autoload :Input
+      autoload :Hidden
+      autoload :RadioInput
+      autoload :Checkbox
+      autoload :Textarea
+      autoload :RichTextarea
+      autoload :RadioGroup
+      autoload :Select
+      autoload :Tel
+    end
+
+    include FieldMethods
+    include Translation
+
+    STANDARD_METHOD_VERBS = %w[get post].freeze
+
+    def self.input_field(method_name, type:)
+      define_method method_name do |*args, **attributes|
+        merge_bang_attributes! args, attributes
+        render Fields::Input.new(args, @model, self, type:, **attributes)
+      end
+    end
+
+    prop :model, _Interface(:to_model), :positional, reader: :public
+
+    prop :method, _Union?(:get, :post, :put, :patch, :delete,
+                          'get', 'post', 'put', 'patch', 'delete') do |value|
+      value ||= 'patch' if @model.respond_to?(:persisted?) && @model.persisted?
+      value&.to_s&.downcase || 'post'
+    end
+
+    # The form action, which can be any value that can be passed to Rails `url_for` helper.
+    prop :action, _Union?(String, Symbol, Array, Hash)
+
+    prop :attributes, Hash, :**
+
+    # Use the given `field_class` to render a custom field. This allows you to create a custom
+    # form field on an as-needed basis. The `field_class` must be a subclass of
+    # `Proscenium::UI::Form::Fields::Base`.
+    #
+    # Example:
+    #
+    #   render Proscenium::UI::Form.new @resource do |f|
+    #     f.use_field Administrator::EmailField, :email, :required!
+    #   end
+    #
+    # @param field_class [Class<Proscenium::UI::Form::Fields::Base>]
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def use_field(field_class, *args, **attributes)
+      merge_bang_attributes! args, attributes
+      render field_class.new(args, model, self, **attributes)
+    end
+
+    # Returns a button with type of 'submit', using the `value` given.
+    #
+    # @param value [String] Value of the `value` attribute.
+    def submit(value = 'Save', **)
+      input(name: 'commit', type: :submit, value:, **)
+    end
+
+    # Returns a <div> with the given `message` as its content. If `message` is not given, and
+    # `attribute` is, then first error message for the given model `attribute`.
+    #
+    # @param message [String] error message to display.
+    # @param attribute [Symbol] name of the model attribute.
+    def error(message: nil, attribute: nil, &content)
+      if message.nil? && attribute.nil? && !content
+        raise ArgumentError, 'One of `message:`, `attribute:` or a block is required'
+      end
+
+      if content
+        div class: :@error, &content
+      else
+        div class: :@error do
+          message || @model.errors[attribute]&.first
+        end
+      end
+    end
+
+    def view_template(&block)
+      form action:, method:, **@attributes do
+        method_field
+        authenticity_token_field
+        error_for_base
+        yield_content(&block)
+      end
+    end
+
+    def error_for_base
+      return unless @model.errors.key?(:base)
+
+      callout :danger do |x|
+        x.title { 'Unable to save...' }
+        div { @model.errors.full_messages_for(:base).first }
+      end
+    end
+
+    def field_name(*names, multiple: false)
+      # Delete the `?` suffix if present.
+      lname = names.pop.to_s
+      names.append lname.delete_suffix('?').to_sym
+
+      @_view_context.field_name(ActiveModel::Naming.param_key(@model.class), *names,
+                                multiple:)
+    end
+
+    def field_id(*)
+      @_view_context.field_id(ActiveModel::Naming.param_key(@model.class), *)
+    end
+
+    def authenticity_token_field
+      return if method == 'get'
+
+      input(
+        name: 'authenticity_token',
+        type: 'hidden',
+        value: @_view_context.form_authenticity_token(form_options: { action:,
+                                                                      method: @method })
+      )
+    end
+
+    def action
+      @_view_context.url_for(@action || @model)
+    end
+
+    def method_field
+      return if STANDARD_METHOD_VERBS.include?(@method)
+
+      input type: 'hidden', name: '_method', value: @method, autocomplete: 'off'
+    end
+
+    def method
+      STANDARD_METHOD_VERBS.include?(@method) ? @method : 'post'
+    end
+
+    input_field :file_field, type: 'file'
+    input_field :url_field, type: 'url'
+    input_field :text_field, type: 'text'
+    input_field :time_field, type: 'time'
+    input_field :date_field, type: 'date'
+    input_field :number_field, type: 'number'
+    input_field :week_field, type: 'week'
+    input_field :month_field, type: 'month'
+    input_field :email_field, type: 'email'
+    input_field :color_field, type: 'color'
+    input_field :search_field, type: 'search'
+    input_field :password_field, type: 'password'
+    input_field :range_field, type: 'range'
+
+    private
+
+    def merge_bang_attributes!(attrs, kw_attributes, additional_bang_attrs: [])
+      Proscenium::Utils.merge_bang_attributes! attrs, kw_attributes,
+                                               %i[required disabled].concat(additional_bang_attrs)
+    end
+  end
+end

data/lib/proscenium/ui/props.css

@@ -0,0 +1,7 @@
+:where(html) {
+  --pui-input-border: 1px solid gray;
+  --pui-input-color: FieldText;
+  --pui-input-accent-color: lightgray;
+  --pui-input-border-radius: 2px;
+  --pui-input-background-color: Field;
+}

data/lib/proscenium/ui/stimulus-loading.js

@@ -0,0 +1,65 @@
+export function lazyLoadControllersFrom(under, app, element = document) {
+  const { controllerAttribute } = app.schema;
+
+  lazyLoadExistingControllers(element);
+
+  // Lazy load new controllers.
+  new MutationObserver((mutationsList) => {
+    for (const { attributeName, target, type } of mutationsList) {
+      switch (type) {
+        case "attributes": {
+          if (
+            attributeName == controllerAttribute &&
+            target.getAttribute(controllerAttribute)
+          ) {
+            extractControllerNamesFrom(target).forEach((controllerName) =>
+              loadController(controllerName)
+            );
+          }
+        }
+
+        case "childList": {
+          lazyLoadExistingControllers(target);
+        }
+      }
+    }
+  }).observe(element, {
+    attributeFilter: [controllerAttribute],
+    subtree: true,
+    childList: true,
+  });
+
+  function lazyLoadExistingControllers(element) {
+    Array.from(element.querySelectorAll(`[${controllerAttribute}]`))
+      .map(extractControllerNamesFrom)
+      .flat()
+      .forEach(loadController);
+  }
+
+  function extractControllerNamesFrom(element) {
+    return element
+      .getAttribute(controllerAttribute)
+      .split(/\s+/)
+      .filter((content) => content.length);
+  }
+
+  function loadController(name) {
+    if (canRegisterController(name)) {
+      const fileToImport = `${under}/${name
+        .replace(/--/g, "/")
+        .replace(/-/g, "_")}_controller.js`;
+
+      import(fileToImport)
+        .then((module) => {
+          canRegisterController(name) && app.register(name, module.default);
+        })
+        .catch((error) =>
+          console.error(`Failed to autoload controller: ${name}`, error)
+        );
+    }
+  }
+
+  function canRegisterController(name) {
+    return !app.router.modulesByIdentifier.has(name);
+  }
+}

data/lib/proscenium/ui/test.js

@@ -0,0 +1 @@
+console.log("proscenium/test.js");

data/lib/proscenium/ui/ujs/class.js

@@ -0,0 +1,15 @@
+import DataConfirm from "./data_confirm";
+import DataDisableWith from "./data_disable_with";
+
+export default class UJS {
+  constructor() {
+    this.dc = new DataConfirm();
+    this.ddw = new DataDisableWith();
+
+    document.addEventListener("submit", this, { capture: true });
+  }
+
+  handleEvent(event) {
+    this.dc.onSubmit(event) && this.ddw.onSubmit(event);
+  }
+}

data/lib/proscenium/ui/ujs/data_confirm.js

@@ -0,0 +1,23 @@
+export default class DataConfirm {
+  onSubmit = (event) => {
+    if (
+      !event.target.matches("[data-turbo=true]") &&
+      event.submitter &&
+      "confirm" in event.submitter.dataset
+    ) {
+      const v = event.submitter.dataset.confirm;
+
+      if (
+        v !== "false" &&
+        !confirm(v === "true" || v === "" ? "Are you sure?" : v)
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        return false;
+      }
+    }
+
+    return true;
+  };
+}

data/lib/proscenium/ui/ujs/data_disable_with.js

@@ -0,0 +1,68 @@
+export default class DataDisableWith {
+  onSubmit = event => {
+    const target = event.target
+    const formId = target.id
+
+    if (target.matches('[data-turbo=true]')) return
+
+    const submitElements = Array.from(
+      target.querySelectorAll(
+        ['input[type=submit][data-disable-with]', 'button[type=submit][data-disable-with]'].join(
+          ', '
+        )
+      )
+    )
+
+    submitElements.push(
+      ...Array.from(
+        document.querySelectorAll(
+          [
+            `input[type=submit][data-disable-with][form='${formId}']`,
+            `button[type=submit][data-disable-with][form='${formId}']`
+          ].join(', ')
+        )
+      )
+    )
+
+    for (const ele of submitElements) {
+      if (ele.hasAttribute('form') && ele.getAttribute('form') !== target.id) continue
+
+      this.#disableButton(ele)
+    }
+  }
+
+  #disableButton(ele) {
+    const defaultTextValue = 'Please wait...'
+    let textValue = ele.dataset.disableWith || defaultTextValue
+    if (textValue === 'false') return
+    if (textValue === 'true') {
+      textValue = defaultTextValue
+    }
+
+    ele.disabled = true
+
+    if (ele.matches('button')) {
+      ele.dataset.valueBeforeDisabled = ele.innerHTML
+      ele.innerHTML = textValue
+    } else {
+      ele.dataset.valueBeforeDisabled = ele.value
+      ele.value = textValue
+    }
+
+    if (ele.resetDisableWith === undefined) {
+      // This function can be called on the element to reset the disabled state. Useful for when
+      // form submission fails, and the button should be re-enabled.
+      ele.resetDisableWith = function () {
+        this.disabled = false
+
+        if (this.matches('button')) {
+          this.innerHTML = this.dataset.valueBeforeDisabled
+        } else {
+          this.value = this.dataset.valueBeforeDisabled
+        }
+
+        delete this.dataset.valueBeforeDisabled
+      }
+    }
+  }
+}

data/lib/proscenium/ui/ujs/index.js

@@ -0,0 +1,9 @@
+export default async () => {
+  window.Proscenium = window.Proscenium || {};
+
+  if (!window.Proscenium.UJS) {
+    const classPath = "/node_modules/@rubygems/proscenium/ujs/class.js";
+    const module = await import(classPath);
+    window.Proscenium.UJS = new module.default();
+  }
+};

data/lib/proscenium/ui.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Proscenium::UI
+  extend ActiveSupport::Autoload
+  extend Phlex::Kit
+
+  autoload :Component
+  autoload :Breadcrumbs
+  autoload :Form
+  autoload :Flash
+end

data/lib/proscenium/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Proscenium
-  VERSION = '0.19.0.beta15'
+  VERSION = '0.19.0.test1'
 end

data/lib/proscenium/view_component/css_modules.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Proscenium
+  module ViewComponent::CssModules
+    include Proscenium::CssModule
+
+    def self.included(base)
+      base.extend CssModule::Path
+    end
+  end
+end

data/lib/proscenium/view_component/react_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Proscenium
+  # Renders a <div> for use with React components, with data attributes specifying the component
+  # path and props.
+  #
+  # If a content block is given, that content will be rendered inside the component, allowing for a
+  # "loading" UI. If no block is given, then a "loading..." text will be rendered. It is intended
+  # that the component is mounted to this div, and the loading UI will then be replaced with the
+  # component's rendered output.
+  class ViewComponent::ReactComponent < ViewComponent
+    self.abstract_class = true
+
+    include ReactComponentable
+
+    def call
+      tag.send root_tag, data: data_attributes do
+        tag.div content || 'loading...'
+      end
+    end
+  end
+end

data/lib/proscenium/view_component/sideload.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+module Proscenium::ViewComponent::Sideload
+end

data/lib/proscenium/view_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class Proscenium::ViewComponent < ViewComponent::Base
+  extend ActiveSupport::Autoload
+
+  autoload :Sideload
+  autoload :ReactComponent
+  autoload :CssModules
+
+  include Proscenium::SourcePath
+  include CssModules
+
+  module Sideload
+    def before_render
+      Proscenium::SideLoad.sideload_inheritance_chain self, controller.sideload_assets_options
+
+      super
+    end
+  end
+
+  class_attribute :sideload_assets_options
+
+  class << self
+    attr_accessor :abstract_class
+
+    def inherited(child)
+      child.prepend Sideload
+
+      super
+    end
+
+    def sideload_assets(value)
+      self.sideload_assets_options = value
+    end
+  end
+end

data/lib/proscenium.rb

@@ -1,13 +1,12 @@
 # frozen_string_literal: true
 
-require 'zeitwerk'
-require 'proscenium/railtie'
-
-loader = Zeitwerk::Loader.for_gem
-loader.ignore "#{__dir__}/proscenium/core_ext/object/css_module_ivars.rb"
-loader.setup
+require 'active_support'
+require 'active_record/type' # needed by Literal, even though we're not using ActiveRecord
+require 'literal'
 
 module Proscenium
+  extend ActiveSupport::Autoload
+
   FILE_EXTENSIONS = ['js', 'mjs', 'ts', 'jsx', 'tsx', 'css', 'js.map', 'mjs.map', 'jsx.map',
                      'ts.map', 'tsx.map', 'css.map'].freeze
 
@@ -23,6 +22,25 @@ module Proscenium
   # Environment variables that should always be passed to the builder.
   DEFAULT_ENV_VARS = Set['RAILS_ENV', 'NODE_ENV'].freeze
 
+  autoload :SourcePath
+  autoload :Utils
+  autoload :Monkey
+  autoload :Middleware
+  autoload :EnsureLoaded
+  autoload :SideLoad
+  autoload :CssModule
+  autoload :ReactComponentable
+  autoload :ViewComponent
+  autoload :Phlex
+  autoload :Helper
+  autoload :Builder
+  autoload :Importer
+  autoload :Resolver
+  autoload :BundledGems
+  autoload :RubyGems
+  autoload :Registry
+  autoload :UI
+
   class Deprecator
     def deprecation_warning(name, message, _caller_backtrace = nil)
       msg = "`#{name}` is deprecated and will be removed in a near future release of Proscenium"
@@ -47,8 +65,18 @@ module Proscenium
       @config ||= Railtie.config.proscenium
     end
 
+    def ui_path
+      @ui_path ||= Railtie.root.join('lib', 'proscenium', 'ui')
+    end
+
+    def ui_path_regex
+      @ui_path_regex ||= Regexp.new("^#{Proscenium.ui_path}/")
+    end
+
     def root
       Railtie.root
     end
   end
 end
+
+require 'proscenium/railtie'