proscenium-ui 0.1.0

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)
+      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 pui {
+  .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/index.css

@@ -0,0 +1,52 @@
+@import "@rubygems/proscenium-ui/config/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;
+  }
+}

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)
+    if !default
+      model = @model.class
+
+      if @model.class.respond_to?(:reflect_on_association) && attribute.many?
+        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.rb

@@ -0,0 +1,197 @@
+# 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 < Component
+    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
+
+    # @param model [#to_model] The model instance for the form.
+    prop :model, _Interface(:to_model), :positional, reader: :public
+
+    # @param method [Symbol, String, nil] The HTTP method for the form. Defaults to 'patch' for
+    #   persisted models, 'post' otherwise. (:get, :post, :put, :patch, :delete)
+    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
+
+    # @param action [String, Symbol, Array, Hash, nil] The form action URL. Accepts any value
+    #   that can be passed to Rails `url_for` helper.
+    prop :action, _Union?(String, Symbol, Array, Hash)
+
+    # @param attributes [Hash] Additional HTML attributes passed to the <form> element.
+    prop :attributes, Hash, :**
+
+    def self.source_path = super / '../form/index.rb'
+
+    # 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(&)
+      form action:, method:, **@attributes do
+        method_field
+        authenticity_token_field
+        error_for_base
+        yield if block_given?
+      end
+    end
+
+    def error_for_base
+      return if !@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/railtie.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Proscenium
+  module UI
+    class Railtie < ::Rails::Railtie
+      initializer 'proscenium-ui.reloader' do |app|
+        next if !Proscenium::UI::LOADER.reloading_enabled?
+
+        lib_path = File.expand_path('../..', __dir__)
+
+        checker = app.config.file_watcher.new([], { lib_path => [:rb] }) do
+          Proscenium::UI::LOADER.reload
+        end
+
+        app.reloaders << checker
+
+        app.reloader.to_run do
+          checker.execute_if_updated
+        end
+      end
+    end
+  end
+end

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,10 @@
+export default async () => {
+  window.Proscenium = window.Proscenium || {};
+
+  if (!window.Proscenium.UJS) {
+    const classPath =
+      "/node_modules/@rubygems/proscenium-ui/lib/proscenium/ui/ujs/class.js";
+    const module = await import(classPath);
+    window.Proscenium.UJS = new module.default();
+  }
+};

data/lib/proscenium/ui/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Proscenium
+  module UI
+    VERSION = '0.1.0'
+  end
+end

data/lib/proscenium/ui.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require 'proscenium/ui/railtie'
+require 'proscenium/phlex'
+require 'literal'
+
+require 'zeitwerk'
+
+module Proscenium
+  module UI
+    LOADER = Zeitwerk::Loader.for_gem_extension(Proscenium)
+    LOADER.inflector.inflect('ui' => 'UI', 'ujs' => 'UJS')
+    LOADER.enable_reloading if defined?(Rails.root) && Rails.env.development? &&
+                               __dir__.start_with?(Rails.root.to_s)
+    LOADER.setup
+
+    class << self
+      def method_missing(name, ...)
+        if methods.exclude?(name) && name[0] == name[0].upcase && const_defined?(name) &&
+           const_get(name) < Component
+          define_singleton_method(name) do |*args, **kwargs, &block|
+            const_get(name).new(*args, **kwargs, &block)
+          end
+          public_send(name, ...)
+        else
+          super
+        end
+      end
+
+      def respond_to_missing?(name, include_private = false)
+        (methods.exclude?(name) && name[0] == name[0].upcase &&
+         const_defined?(name) && const_get(name) < Component) || super
+      end
+    end
+  end
+end