proscenium-ui 0.1.0

data/lib/proscenium/ui/form/fields/select.rb

@@ -0,0 +1,302 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  #
+  # Render a <select> input for the given model attribute. It will attempt to automatically build an
+  # appropriate set of <option>'s, and supports ActiveRecord associations and enums. It will also
+  # detect if multiple options should be enabled or not.
+  #
+  # ## Supported options
+  #
+  # - options [Array] a list of options to use for the <select>. If this is given, the automatic
+  #     detection of options will be disabled. A flat array of strings will be used for both the
+  #     label and value. While an Array of nested two-level arrays will be used.
+  # - include_blank [Boolean, String] if true, will add an empty <option> to the <select>. If a
+  #     String is given, it will be used as the label for the empty <option>.
+  # - label [String] the label to use for the field (default: humanized attribute name).
+  # - hint [String] the hint to use for the field (optional).
+  # - required [Boolean] if true, will add the `required` attribute to the <select> tag (default:
+  #     false). Also supported as a bang attribute (e.g. `:required!`). See
+  #     `Hue::Utils.merge_bang_attributes!`.
+  # - typeahead [Boolean] if true, will enable typeahead support by replacing with a SmartSelect
+  #     React component (default: false). Also supported as a bang attribute (e.g. `:typeahead!`).
+  #     See `Hue::Utils.merge_bang_attributes!`.
+  #
+  class Select < Base
+    def self.sideload(_options)
+      # Proscenium::Importer.import Hue::Phlex::ReactComponent.manager
+      Proscenium::Importer.sideload source_path, lazy: true
+    end
+
+    # Ensure both the form and select field are side loaded.
+    def self.css_module_path
+      source_path.sub_ext('.module.css')
+    end
+
+    def before_template
+      # Defined here to ensure they are deleted from `attributes` before `final_attributes` is
+      # called.
+      @options_from_attributes = attributes.delete(:options)
+      @include_blank = attributes.delete(:include_blank)
+
+      super
+    end
+
+    def view_template(&options_block)
+      field class: :@field do
+        if !options_block && typeahead?
+          @component_props = attributes.delete(:component_props) || {}
+
+          # SmartSelect - or most likely React - does not like being wrapped in a label.
+          div class: :@typeahead do
+            label
+            div(**final_attributes)
+            hint
+          end
+        else
+          label do
+            multiple? && input(name: field_name, type: :hidden, value: '')
+            select(name: field_name, **final_attributes) do
+              options_block ? yield_content(&options_block) : options_template
+            end
+            hint
+          end
+        end
+      end
+    end
+
+    def options_template
+      options.each do |value, opts|
+        option(value:, selected: opts[:selected]) { opts[:label] }
+      end
+    end
+
+    private
+
+      def final_attributes
+        attributes.tap do |attrs|
+          if typeahead?
+            attrs[:class] = :@typeahead_input
+            attrs[:data] ||= {}
+            attrs[:data][:proscenium_component_path] = virtual_path
+            attrs[:data][:proscenium_component_props] = {
+              **@component_props,
+              input_name: field_name,
+              multi: multiple?,
+              items: options.is_a?(String) ? options : options.values,
+              initial_selected_item: values_for_typeahead
+            }.deep_transform_keys { |k| k.to_s.camelize :lower }.to_json
+          else
+            attrs[:multiple] = multiple?
+          end
+        end
+      end
+
+      def field_name
+        names = '' if multiple?
+
+        return super(*names) if !association_attribute?
+
+        form.field_name association_attribute, *names
+      end
+
+      def enum_attribute?
+        model_class.defined_enums.key?(attribute.last.to_s)
+      end
+
+      def association_attribute?
+        association_reflection.present?
+      end
+
+      def values_for_typeahead
+        if !value ||
+           (value.is_a?(String) && !value.uuid?) ||
+           (options.is_a?(String) && !options.uuid?)
+          return value
+        end
+
+        options.slice(*value).values
+      end
+
+      def options
+        @options ||= begin
+          data = {}
+          data[''] = empty_option if empty_option?
+
+          if @options_from_attributes
+            if @options_from_attributes.is_a?(String)
+              data = @options_from_attributes
+            else
+              data.merge! build_options_from_attributes
+            end
+          elsif enum_attribute?
+            fetch_enum_collection.each do |opt|
+              data[opt] = {
+                value: opt,
+                label: model_class.human_attribute_name("#{attribute.last}.#{opt}"),
+                selected: selected?(opt)
+              }
+            end
+          elsif association_attribute?
+            fetch_association_collection.each do |opt|
+              data[opt.id] = {
+                value: opt.id,
+                label: opt.to_s,
+                selected: selected?(opt)
+              }
+            end
+          end
+
+          data
+        end
+      end
+
+      def build_options_from_attributes
+        @options_from_attributes.to_h do |opt|
+          label, value = option_text_and_value(opt)
+          [value,  label:, value:, selected: selected?(value)]
+        end
+      end
+
+      def option_text_and_value(option)
+        # Options are [text, value] pairs or strings used for both.
+        if !option.is_a?(String) && option.respond_to?(:first) && option.respond_to?(:last)
+          option = option.reject { |e| e.is_a?(Hash) } if option.is_a?(Array)
+          [option.first, option.last]
+        else
+          [option, option]
+        end
+      end
+
+      # Should we show the empty <option>?
+      #
+      # @return [Boolean]
+      #   true if include_blank option is given and is true or a string.
+      #   false if include_blank is given and is false.
+      #   true if not required, AND attribute has no default value.
+      #   true if required, AND attribute has no value.
+      def empty_option
+        { label: @include_blank.is_a?(String) ? @include_blank : nil }
+      end
+
+      def empty_option?
+        if [true, false].include?(@include_blank)
+          return @include_blank
+        elsif @include_blank.is_a?(String)
+          return true
+        end
+
+        return false if typeahead? || multiple?
+
+        attributes[:required] == true ? !value? : !default_value?
+      end
+
+      def default_value?
+        default_value.present?
+      end
+
+      def default_value
+        model_class.new.attributes[model_attribute.to_s]
+      end
+
+      def multiple?
+        association_attribute? && association_reflection.macro == :has_many
+      end
+
+      def typeahead?
+        @typeahead ||= attributes.delete(:typeahead)
+      end
+
+      def value?
+        value.present?
+      end
+
+      def value
+        if association_attribute? && association_reflection.macro == :has_many &&
+           actual_model.respond_to?(attribute.last)
+          actual_model.send(model_attribute)
+        else
+          actual_model.attributes[model_attribute.to_s]
+        end
+      end
+
+      # Is the given `option` the current value (selected)?
+      def selected?(option)
+        if !option.is_a?(String) && !option.is_a?(Integer) && association_attribute?
+          if association_reflection.macro == :has_many && actual_model.respond_to?(attribute.last)
+            actual_model.send(attribute.last).include?(option)
+          else
+            reflection = association_reflection
+            key = if reflection.respond_to?(:options) && reflection.options[:primary_key]
+                    reflection.options[:primary_key]
+                  else
+                    option.class.primary_key.to_s
+                  end
+            option.attributes[key] == value
+          end
+        else
+          option == value
+        end
+      end
+
+      def model_attribute
+        association_attribute? ? association_attribute : attribute.last
+      end
+
+      def fetch_enum_collection
+        actual_model.defined_enums[attribute.last.to_s].keys
+      end
+
+      def association_reflection
+        @association_reflection ||= model_class.try :reflect_on_association, attribute.last
+      end
+
+      def fetch_association_collection
+        relation = association_reflection.klass.all
+
+        if association_reflection.respond_to?(:scope) && association_reflection.scope
+          relation = if association_reflection.scope.parameters.any?
+                       association_reflection.klass.instance_exec(actual_model,
+                                                                  &association_reflection.scope)
+                     else
+                       association_reflection.klass.instance_exec(&association_reflection.scope)
+                     end
+        else
+          order = association_reflection.options[:order]
+          conditions = association_reflection.options[:conditions]
+          conditions = actual_model.instance_exec(&conditions) if conditions.respond_to?(:call)
+
+          if relation.respond_to?(:where) && conditions.present?
+            relation = relation.where(conditions)
+          end
+          relation = relation.order(order) if relation.respond_to?(:order)
+        end
+
+        relation
+      end
+
+      def association_attribute
+        @association_attribute ||= begin
+          reflection = association_reflection
+
+          case reflection.macro
+          when :belongs_to
+            (reflection.respond_to?(:options) && reflection.options[:foreign_key]) ||
+              :"#{reflection.name}_id"
+          else
+            # Force the association to be preloaded for performance.
+            if actual_model.respond_to?(attribute.last)
+              target = actual_model.send(attribute.last)
+              target.to_a if target.respond_to?(:to_a)
+            end
+
+            :"#{reflection.name.to_s.singularize}_ids"
+          end
+        end
+      end
+
+      def model_class
+        @model_class ||= actual_model.class
+      end
+  end
+end

data/lib/proscenium/ui/form/fields/tel.css

@@ -0,0 +1,297 @@
+@layer pui {
+  pui-tel-field {
+    --flag-ad: -24px 0;
+    --flag-ae: -48px 0;
+    --flag-af: -72px 0;
+    --flag-ag: -96px 0;
+    --flag-ai: -120px 0;
+    --flag-al: -144px 0;
+    --flag-am: -168px 0;
+    --flag-an: -192px 0;
+    --flag-ao: -216px 0;
+    --flag-ar: -240px 0;
+    --flag-as: -264px 0;
+    --flag-at: -288px 0;
+    --flag-au: -312px 0;
+    --flag-aw: -336px 0;
+    --flag-ax: -360px 0;
+    --flag-az: 0 -24px;
+    --flag-ba: -24px -24px;
+    --flag-bb: -48px -24px;
+    --flag-bd: -72px -24px;
+    --flag-be: -96px -24px;
+    --flag-bf: -120px -24px;
+    --flag-bg: -144px -24px;
+    --flag-bh: -168px -24px;
+    --flag-bi: -192px -24px;
+    --flag-bj: -216px -24px;
+    --flag-bl: -240px -24px;
+    --flag-bm: -264px -24px;
+    --flag-bn: -288px -24px;
+    --flag-bo: -312px -24px;
+    --flag-br: -336px -24px;
+    --flag-bs: -360px -24px;
+    --flag-bt: 0 -48px;
+    --flag-bw: -24px -48px;
+    --flag-by: -48px -48px;
+    --flag-bz: -72px -48px;
+    --flag-ca: -96px -48px;
+    --flag-cd: -120px -48px;
+    --flag-cf: -144px -48px;
+    --flag-cg: -168px -48px;
+    --flag-ch: -192px -48px;
+    --flag-ci: -216px -48px;
+    --flag-ck: -240px -48px;
+    --flag-cl: -264px -48px;
+    --flag-cm: -288px -48px;
+    --flag-cn: -312px -48px;
+    --flag-co: -336px -48px;
+    --flag-cr: -360px -48px;
+    --flag-cu: 0 -72px;
+    --flag-cv: -24px -72px;
+    --flag-cw: -48px -72px;
+    --flag-cy: -72px -72px;
+    --flag-cz: -96px -72px;
+    --flag-de: -120px -72px;
+    --flag-dj: -144px -72px;
+    --flag-dk: -168px -72px;
+    --flag-dm: -192px -72px;
+    --flag-do: -216px -72px;
+    --flag-dz: -240px -72px;
+    --flag-ec: -264px -72px;
+    --flag-ee: -288px -72px;
+    --flag-eg: -312px -72px;
+    --flag-eh: -336px -72px;
+    --flag-er: -360px -72px;
+    --flag-es: 0 -96px;
+    --flag-et: -24px -96px;
+    --flag-fi: -48px -96px;
+    --flag-fj: -72px -96px;
+    --flag-fk: -96px -96px;
+    --flag-fm: -120px -96px;
+    --flag-fo: -144px -96px;
+    --flag-fr: -168px -96px;
+    --flag-ga: -192px -96px;
+    --flag-gb: -216px -96px;
+    --flag-gd: -240px -96px;
+    --flag-ge: -264px -96px;
+    --flag-gg: -288px -96px;
+    --flag-gh: -312px -96px;
+    --flag-gi: -336px -96px;
+    --flag-gl: -360px -96px;
+    --flag-gm: 0 -120px;
+    --flag-gn: -24px -120px;
+    --flag-gq: -48px -120px;
+    --flag-gr: -72px -120px;
+    --flag-gt: -96px -120px;
+    --flag-gu: -120px -120px;
+    --flag-gw: -144px -120px;
+    --flag-gy: -168px -120px;
+    --flag-hk: -192px -120px;
+    --flag-hn: -216px -120px;
+    --flag-hr: -240px -120px;
+    --flag-ht: -264px -120px;
+    --flag-hu: -288px -120px;
+    --flag-id: -312px -120px;
+    --flag-ie: -336px -120px;
+    --flag-il: -360px -120px;
+    --flag-im: 0 -144px;
+    --flag-in: -24px -144px;
+    --flag-iq: -48px -144px;
+    --flag-ir: -72px -144px;
+    --flag-is: -96px -144px;
+    --flag-it: -120px -144px;
+    --flag-je: -144px -144px;
+    --flag-jm: -168px -144px;
+    --flag-jo: -192px -144px;
+    --flag-jp: -216px -144px;
+    --flag-ke: -240px -144px;
+    --flag-kg: -264px -144px;
+    --flag-kh: -288px -144px;
+    --flag-ki: -312px -144px;
+    --flag-km: -336px -144px;
+    --flag-kn: -360px -144px;
+    --flag-kp: 0 -168px;
+    --flag-kr: -24px -168px;
+    --flag-kw: -48px -168px;
+    --flag-ky: -72px -168px;
+    --flag-kz: -96px -168px;
+    --flag-la: -120px -168px;
+    --flag-lb: -144px -168px;
+    --flag-lc: -168px -168px;
+    --flag-li: -192px -168px;
+    --flag-lk: -216px -168px;
+    --flag-lr: -240px -168px;
+    --flag-ls: -264px -168px;
+    --flag-lt: -288px -168px;
+    --flag-lu: -312px -168px;
+    --flag-lv: -336px -168px;
+    --flag-ly: -360px -168px;
+    --flag-ma: 0 -192px;
+    --flag-mc: -24px -192px;
+    --flag-md: -48px -192px;
+    --flag-me: -72px -192px;
+    --flag-mf: -96px -192px;
+    --flag-mg: -120px -192px;
+    --flag-mh: -144px -192px;
+    --flag-mk: -168px -192px;
+    --flag-ml: -192px -192px;
+    --flag-mm: -216px -192px;
+    --flag-mn: -240px -192px;
+    --flag-mo: -264px -192px;
+    --flag-mp: -288px -192px;
+    --flag-mq: -312px -192px;
+    --flag-mr: -336px -192px;
+    --flag-ms: -360px -192px;
+    --flag-mt: 0 -216px;
+    --flag-mu: -24px -216px;
+    --flag-mv: -48px -216px;
+    --flag-mw: -72px -216px;
+    --flag-mx: -96px -216px;
+    --flag-my: -120px -216px;
+    --flag-mz: -144px -216px;
+    --flag-na: -168px -216px;
+    --flag-nc: -192px -216px;
+    --flag-ne: -216px -216px;
+    --flag-nf: -240px -216px;
+    --flag-ng: -264px -216px;
+    --flag-ni: -288px -216px;
+    --flag-nl: -312px -216px;
+    --flag-no: -336px -216px;
+    --flag-np: -360px -216px;
+    --flag-nr: 0 -240px;
+    --flag-nu: -24px -240px;
+    --flag-nz: -48px -240px;
+    --flag-om: -72px -240px;
+    --flag-pa: -96px -240px;
+    --flag-pe: -120px -240px;
+    --flag-pf: -144px -240px;
+    --flag-pg: -168px -240px;
+    --flag-ph: -192px -240px;
+    --flag-pk: -216px -240px;
+    --flag-pl: -240px -240px;
+    --flag-pn: -264px -240px;
+    --flag-pr: -288px -240px;
+    --flag-ps: -312px -240px;
+    --flag-pt: -336px -240px;
+    --flag-pw: -360px -240px;
+    --flag-py: 0 -264px;
+    --flag-qa: -24px -264px;
+    --flag-ro: -48px -264px;
+    --flag-rs: -72px -264px;
+    --flag-ru: -96px -264px;
+    --flag-rw: -120px -264px;
+    --flag-sa: -144px -264px;
+    --flag-sb: -168px -264px;
+    --flag-sc: -192px -264px;
+    --flag-sd: -216px -264px;
+    --flag-se: -240px -264px;
+    --flag-sg: -264px -264px;
+    --flag-sh: -288px -264px;
+    --flag-si: -312px -264px;
+    --flag-sk: -336px -264px;
+    --flag-sl: -360px -264px;
+    --flag-sm: 0 -288px;
+    --flag-sn: -24px -288px;
+    --flag-so: -48px -288px;
+    --flag-sr: -72px -288px;
+    --flag-ss: -96px -288px;
+    --flag-st: -120px -288px;
+    --flag-sv: -144px -288px;
+    --flag-sy: -168px -288px;
+    --flag-sz: -192px -288px;
+    --flag-tc: -216px -288px;
+    --flag-td: -240px -288px;
+    --flag-tg: -264px -288px;
+    --flag-th: -288px -288px;
+    --flag-tj: -312px -288px;
+    --flag-tk: -336px -288px;
+    --flag-tl: -360px -288px;
+    --flag-tm: 0 -312px;
+    --flag-tn: -24px -312px;
+    --flag-to: -48px -312px;
+    --flag-tr: -72px -312px;
+    --flag-tt: -96px -312px;
+    --flag-tv: -120px -312px;
+    --flag-tw: -144px -312px;
+    --flag-tz: -168px -312px;
+    --flag-ua: -192px -312px;
+    --flag-ug: -216px -312px;
+    --flag-us: -240px -312px;
+    --flag-uy: -264px -312px;
+    --flag-uz: -288px -312px;
+    --flag-va: -312px -312px;
+    --flag-vc: -336px -312px;
+    --flag-ve: -360px -312px;
+    --flag-vg: 0 -336px;
+    --flag-vi: -24px -336px;
+    --flag-vn: -48px -336px;
+    --flag-vu: -72px -336px;
+    --flag-wf: -96px -336px;
+    --flag-ws: -120px -336px;
+    --flag-ye: -144px -336px;
+    --flag-yt: -168px -336px;
+    --flag-za: -192px -336px;
+    --flag-zm: -216px -336px;
+    --flag-zw: -240px -336px;
+
+    input {
+      border: none;
+      background-color: var(--pui-input-background-color);
+      color: var(--pui-input-color);
+    }
+
+    [part='inputs'] {
+      border: var(--pui-input-border);
+      border-radius: var(--pui-input-border-radius);
+      display: inline-flex;
+    }
+
+    [part='country'] {
+      background-color: var(--pui-input-background-color);
+      display: flex;
+      align-items: center;
+      position: relative;
+      vertical-align: sub;
+      padding-left: 4px;
+      padding-right: 6px;
+
+      &::before {
+        content: '';
+        background: url('/proscenium/images/flags.png') no-repeat center;
+        background-position: var(--flag-position, 0 0);
+        width: 24px;
+        height: 24px;
+      }
+
+      &::after {
+        content: '\005E';
+        width: 1em;
+        height: 1em;
+        border-left: 1px solid var(--pui-input-accent-color);
+        transform: rotate(180deg);
+        text-align: center;
+      }
+
+      select {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        border: none;
+        color: transparent;
+        box-shadow: none;
+        cursor: pointer;
+        appearance: none;
+        white-space: nowrap;
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: default;
+        }
+      }
+    }
+  }
+}

data/lib/proscenium/ui/form/fields/tel.js

@@ -0,0 +1,83 @@
+import { Maskito } from "https://esm.sh/@maskito/core@2.2.0";
+import { maskitoPhoneOptionsGenerator } from "https://esm.sh/@maskito/phone@2.2.0";
+import parsePhoneNumber from "https://esm.sh/libphonenumber-js@1.10.60/min";
+import metadata from "https://esm.sh/libphonenumber-js@1.10.60/min/metadata";
+
+class TelField extends HTMLElement {
+  connectedCallback() {
+    this.$country = this.querySelector("[part='country']");
+    this.$select = this.querySelector("select");
+    this.$input = this.querySelector("input");
+
+    this.#initMask();
+    this.#setFlag(this.$select.querySelector("option:checked").value);
+
+    this.$select.addEventListener("change", this);
+  }
+
+  handleEvent(event) {
+    event.type === "change" && this.#onSelectChange(event);
+  }
+
+  #onSelectChange = ({ target }) => {
+    this.#setFlag(target.value);
+    this.#resetMask();
+  };
+
+  #setFlag(country) {
+    this.$country.style.setProperty(
+      "--flag-position",
+      `var(--flag-${country.toLowerCase()})`
+    );
+  }
+
+  #initMask() {
+    this.mask = new Maskito(
+      this.$input,
+      maskitoPhoneOptionsGenerator({
+        countryIsoCode: this.$select.value,
+        metadata,
+      })
+    );
+
+    if (this.$input.value !== "") {
+      const phone = parsePhoneNumber(this.$input.value, this.$select.value, {
+        extract: false,
+      });
+      this.$input.value = phone.format("INTERNATIONAL");
+
+      if (phone.country) {
+        this.$select.value = phone.country;
+        this.#setFlag(phone.country);
+      }
+    }
+  }
+
+  #resetMask() {
+    this.mask.destroy();
+    this.mask = new Maskito(
+      this.$input,
+      maskitoPhoneOptionsGenerator({
+        countryIsoCode: this.$select.value,
+        strict: true,
+        metadata,
+      })
+    );
+
+    // Update country prefix
+    if (this.$input.value !== "") {
+      let phone = parsePhoneNumber(this.$input.value, this.$select.value, {
+        extract: false,
+      });
+      phone = parsePhoneNumber(phone.nationalNumber, this.$select.value);
+      this.$input.value = phone.format("INTERNATIONAL");
+    }
+  }
+
+  disconnectedCallback() {
+    this.mask.destroy();
+    this.$select.removeEventListener("change", this);
+  }
+}
+
+customElements.define("pui-tel-field", TelField);