proscenium 0.19.0.beta9 → 0.19.0.beta11

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

@@ -1,297 +0,0 @@
-@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

@@ -1,83 +0,0 @@
-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

@@ -1,54 +0,0 @@
-# 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

@@ -1,50 +0,0 @@
-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

@@ -1,13 +0,0 @@
-@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

@@ -1,8 +0,0 @@
-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

@@ -1,18 +0,0 @@
-# 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

@@ -1,71 +0,0 @@
-# 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

@@ -1,52 +0,0 @@
-@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;
-  }
-}