proscenium 0.19.0.beta4-x86_64-darwin → 0.19.0.beta6-x86_64-darwin

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

@@ -0,0 +1,297 @@
+@layer proscenium-ui {
+  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);

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+require 'phonelib'
+require 'countries/iso3166'
+
+module Proscenium::UI::Form::Fields
+  class Tel < Base
+    DEFAULT_COUNTRY = 'US'
+
+    sideload_assets js: { type: 'module' }
+
+    register_element :pui_tel_field
+
+    def initialize(attribute, model, form, type: nil, error: nil, **attributes) # rubocop:disable Metrics/ParameterLists
+      super
+
+      @default_country = @attributes.delete(:default_country)&.to_s&.upcase || DEFAULT_COUNTRY
+    end
+
+    def view_template
+      field :pui_tel_field do
+        label for: field_id
+
+        div part: :inputs do
+          div part: :country do
+            select do
+              countries.each do |name, code|
+                option(value: code, selected: code == country) { name }
+              end
+            end
+          end
+
+          input(name: field_name, type: 'text', part: :number, id: field_id, **build_attributes)
+        end
+
+        hint
+      end
+    end
+
+    private
+
+    def country
+      @country ||= if value.blank?
+                     @default_country
+                   else
+                     Phonelib.parse(value, @default_country).country || @default_country
+                   end
+    end
+
+    def countries
+      ISO3166::Country.all_names_with_codes.to_h
+    end
+  end
+end

data/lib/proscenium/ui/form/fields/textarea/index.jsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx'
+import PropTypes from 'prop-types'
+
+import dsx from '/hue/lib/hue/utils/dsx'
+import { useFormError } from '../../hooks'
+
+import styles from './index.module.css'
+
+const Textarea = ({ label, hint, className, inputClassName, errorAttrName, ...props }) => {
+  const [error, hasError] = useFormError(errorAttrName || props.name)
+
+  return (
+    <div className={clsx(styles.fieldWrapper, className)} {...dsx({ fieldError: hasError })}>
+      <label>
+        <span>
+          {label ? <span>{label}</span> : null}
+          {hasError ? <span>{error}</span> : null}
+        </span>
+
+        <textarea className={inputClassName || styles.input} {...props} />
+      </label>
+
+      {hint ? <div className={styles.hint}>{hint}</div> : null}
+    </div>
+  )
+}
+
+Textarea.displayName = 'Hue.Form.Fields.Textarea'
+Textarea.propTypes = {
+  name: PropTypes.string.isRequired,
+
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]),
+
+  // Custom class name. This will be appended to the default class.
+  className: PropTypes.string,
+
+  // Custom class name for the actual textarea element. This will replace the default class.
+  inputClassName: PropTypes.string,
+
+  // The name of the attribute to use for the error message. Default: 'props.name'.
+  errorAttrName: PropTypes.string,
+
+  id: PropTypes.string,
+  hint: PropTypes.string,
+  disabled: PropTypes.bool
+
+  // All remaining non-descript props will be forwarded to the <input> element.
+}
+
+export default Textarea

data/lib/proscenium/ui/form/fields/textarea/index.module.css

@@ -0,0 +1,13 @@
+@layer hue-component {
+  .fieldWrapper {
+    @mixin fieldWrapper from url('/hue/lib/hue/mixins/form.mixin.css');
+  }
+
+  .input {
+    @mixin textarea from url('/hue/lib/hue/mixins/textarea.mixin.css');
+  }
+
+  .hint {
+    @mixin fieldHint from url('/hue/lib/hue/mixins/field.mixin.css');
+  }
+}

data/lib/proscenium/ui/form/fields/textarea/previews/basic.jsx

@@ -0,0 +1,8 @@
+import Textarea from '../'
+
+const Component = () => {
+  return <Textarea name="name" label="Name" hint="Some hint about the input" />
+}
+Component.displayName = 'Hue.Form.Fields.Textarea.Previews.Basic'
+
+export default Component

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  class Textarea < Base
+    register_element :pui_textarea
+
+    def view_template
+      field :pui_textarea do
+        label do
+          attrs = build_attributes
+          value = attrs.delete(:value)
+          textarea(name: field_name, **attrs) { value }
+        end
+        hint
+      end
+    end
+  end
+end

data/lib/proscenium/ui/form/translation.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Translation
+  # Lookup translations for the given namespace using I18n, based on model name, and attribute name.
+  #
+  # Lookup priority with nested attributes:
+  #
+  #   form.{namespace}.{model}/{attribute.first}.{attribute.last}
+  #   form.{namespace}.{attribute.first}.{attribute.last}
+  #   form.{namespace}.{model}.{attribute.last}
+  #   form.{namespace}.defaults.{attribute.last}
+  #   {default}
+  #
+  # Lookup priority without nested attributes:
+  #
+  #   form.{namespace}.{model}.{attribute}
+  #   form.{namespace}.defaults.{attribute}
+  #   {default}
+  #
+  # Namespace is used for :labels and :hints.
+  #
+  # Model is the actual object name, for a @user object you'll have :user.
+  # Attribute is the attribute itself, :name for example, or [:user, :name] if nested.
+  #
+  # If :postfix is given, it will be appended to the end of each lookup entry. So with a :postfix of
+  # 'stuff', '_stuff' will be appended:
+  #
+  #   form.{namespace}.{model}.{attribute}_{postfix}
+  #
+  def translate(namespace, attribute, postfix: nil, default: '')
+    lookups = []
+    postfix = "_#{postfix}" if postfix
+    model_key = model.model_name.i18n_key
+
+    if attribute.is_a?(Array) && attribute.length > 1
+      joined_attrs = attribute.join('.')
+      lookups << :"#{model_key}/#{joined_attrs}#{postfix}"
+      lookups << :"#{joined_attrs}#{postfix}"
+      lookups << :"defaults.#{attribute.last}#{postfix}"
+    else
+      attribute = attribute.first if attribute.is_a?(Array)
+      lookups << :"#{model_key}.#{attribute}#{postfix}"
+      lookups << :"defaults.#{attribute}#{postfix}"
+    end
+
+    lookups << default
+
+    I18n.t(lookups.shift, scope: :"#{i18n_scope}.#{namespace}",
+                          default: lookups).presence
+  end
+
+  def translate_label(attribute, default: nil, postfix: nil)
+    unless default
+      model = @model.class
+
+      if @model.class.respond_to?(:reflect_on_association) && attribute.count > 1
+        model = @model.class.reflect_on_association(attribute.first).klass
+      end
+
+      default = model.human_attribute_name(attribute.last)
+    end
+
+    translate :labels, attribute, default:, postfix:
+  end
+
+  private
+
+  def i18n_scope
+    'form'
+  end
+end

data/lib/proscenium/ui/form.css

@@ -0,0 +1,52 @@
+@import "/proscenium/props.css";
+
+pui-field {
+  display: block;
+
+  [part="error"] {
+    &::before {
+      content: " ";
+    }
+
+    color: red;
+  }
+
+  [part="hint"] {
+    font-size: 0.9em;
+    margin-top: 0.2em;
+  }
+
+  input {
+    border: var(--pui-input-border);
+    border-radius: var(--pui-input-border-radius);
+    background-color: var(--pui-input-background-color);
+  }
+}
+
+pui-checkbox {
+  display: block;
+
+  label {
+    display: flex;
+    gap: 0.3rem;
+  }
+}
+
+pui-radio-group {
+  [part="radio_group_inputs"] {
+    display: flex;
+    gap: 1em;
+
+    > label > input {
+      margin-right: 0.3em;
+    }
+  }
+}
+
+pui-textarea {
+  display: block;
+
+  textarea {
+    display: block;
+  }
+}