proscenium-ui 0.1.0

data/lib/proscenium/ui/combobox.rb

@@ -0,0 +1,186 @@
+# frozen_string_literal: true
+
+module Proscenium::UI
+  class Combobox < Component
+    register_element :pui_combobox
+
+    # @param options [Array] List of options. Each element can be a String, a [label, value]
+    #   Array, or a Hash with :label and :value keys.
+    prop :options, _Array(_Any), default: -> { [] }
+
+    # @param src [String, nil] URL for async option fetching. When set, options are loaded
+    #   remotely as the user types.
+    prop :src, _String?
+
+    # @param multiple [Boolean] Whether multiple values can be selected.
+    prop :multiple, _Boolean, default: -> { false }
+
+    # @param placeholder [String, nil] Placeholder text for the input.
+    prop :placeholder, _String?
+
+    # @param name [String, nil] The form field name for the hidden input(s).
+    prop :name, _String?
+
+    # @param value [String, Array<String>, nil] The currently selected value(s).
+    prop :value, _Union(String, _Array(String), NilClass), default: -> {}
+
+    # @param min_chars [Integer] Minimum characters before filtering or fetching begins.
+    prop :min_chars, Integer, default: -> { 0 }
+
+    # @param debounce [Integer] Debounce delay in milliseconds for async search.
+    prop :debounce, Integer, default: -> { 300 }
+
+    # @param disabled [Boolean] Whether the combobox is disabled.
+    prop :disabled, _Boolean, default: -> { false }
+
+    # @param selected_options [Array] Pre-resolved selected options for multi-select, useful when
+    #   the selected values are not present in the initial options list.
+    prop :selected_options, _Array(_Any), default: -> { [] }
+
+    def self.source_path
+      super.sub_ext('').join('index.rb')
+    end
+
+    def view_template
+      @uid = "pui-cb-#{object_id}"
+
+      data = {}
+      data[:multiple] = '' if @multiple
+      data[:src] = @src if @src
+      data[:min_chars] = @min_chars if @min_chars.positive?
+      data[:debounce] = @debounce if @debounce != 300
+
+      pui_combobox(data:, **(@disabled ? { disabled: '' } : {})) do
+        hidden_inputs
+        tags_container if @multiple
+        combobox_input
+        listbox
+      end
+    end
+
+    private
+
+      def hidden_inputs
+        if @multiple
+          input(type: :hidden, name: @name, value: '')
+          current_values.each do |val|
+            input(type: :hidden, name: "#{@name}[]", value: val)
+          end
+        else
+          input(type: :hidden, name: @name, value: current_single_value)
+        end
+      end
+
+      def tags_container
+        div(part: :tags) do
+          selected_items.each do |item|
+            span(part: :tag, data: { value: item[:value] }) do
+              plain item[:label]
+              whitespace
+              button(part: 'tag-remove', type: :button,
+                     aria_label: "Remove #{item[:label]}") { plain "\u00D7" }
+            end
+          end
+        end
+      end
+
+      def combobox_input
+        input(
+          type: :text,
+          role: :combobox,
+          part: :input,
+          autocomplete: :off,
+          aria_autocomplete: :list,
+          aria_expanded: 'false',
+          aria_controls: "#{@uid}-listbox",
+          placeholder: @placeholder,
+          value: initial_input_value,
+          **(@disabled ? { disabled: true } : {})
+        )
+
+        return if @multiple
+
+        button(
+          part: :clear,
+          type: :button,
+          tabindex: -1,
+          aria_label: 'Clear selection',
+          hidden: initial_input_value.nil?,
+          **(@disabled ? { disabled: true } : {})
+        ) { plain "\u00D7" }
+
+        button(
+          part: :toggle,
+          type: :button,
+          tabindex: -1,
+          aria_label: 'Toggle options',
+          hidden: !!@src,
+          **(@disabled ? { disabled: true } : {})
+        ) { plain "\u25BE" }
+      end
+
+      def listbox
+        ul(role: :listbox, part: :listbox, id: "#{@uid}-listbox", hidden: true) do
+          normalized_options.each_with_index do |opt, i|
+            li(
+              role: :option,
+              id: "#{@uid}-option-#{i}",
+              data: { value: opt[:value] },
+              aria_selected: option_selected?(opt[:value]) ? 'true' : nil
+            ) { opt[:label] }
+          end
+        end
+      end
+
+      def initial_input_value
+        return if @multiple
+
+        selected = normalized_options.find { |opt| option_selected?(opt[:value]) }
+        selected&.fetch(:label)
+      end
+
+      def normalized_options
+        @normalized_options ||= @options.map do |opt|
+          case opt
+          when String
+            { label: opt, value: opt }
+          when Array
+            { label: opt[0], value: opt[1].to_s }
+          when Hash
+            { label: opt[:label], value: opt[:value].to_s }
+          end
+        end
+      end
+
+      def current_values
+        case @value
+        when Array then @value
+        when String then [@value]
+        else []
+        end
+      end
+
+      def current_single_value
+        case @value
+        when String then @value
+        else ''
+        end
+      end
+
+      def option_selected?(val)
+        current_values.include?(val.to_s)
+      end
+
+      def selected_items
+        if @selected_options.any?
+          @selected_options.filter_map do |opt|
+            case opt
+            when Hash then { label: opt[:label], value: opt[:value].to_s }
+            end
+          end
+        else
+          normalized_options.select { |opt| option_selected?(opt[:value]) }
+        end
+      end
+  end
+end

data/lib/proscenium/ui/component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require 'proscenium/phlex'
+require 'literal'
+
+module Proscenium::UI
+  extend Phlex::Kit
+
+  class Component < Phlex::HTML
+    extend Literal::Properties
+    include Proscenium::Phlex::Sideload
+    include Proscenium::Phlex::CssModules
+
+    self.abstract_class = true
+    sideload_assets js: { type: 'module' }
+
+    delegate :controller, to: :view_context
+
+    # Support Phlex v1 and 2
+    alias view_context helpers if Gem::Version.new(Phlex::VERSION) < Gem::Version.new('2')
+  end
+end

data/lib/proscenium/ui/flash/index.css

@@ -0,0 +1 @@
+@import "sourdough-toast/src/sourdough-toast.css";

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

@@ -0,0 +1,77 @@
+import domMutations from "dom-mutations";
+import { Sourdough, toast } from "sourdough-toast";
+
+export function foo() {
+  console.log("foo");
+}
+
+class HueFlash extends HTMLElement {
+  static observedAttributes = ["data-flash-alert", "data-flash-notice"];
+
+  connectedCallback() {
+    this.#initSourdough();
+  }
+
+  async #initSourdough() {
+    if ("sourdoughBooted" in window) return;
+
+    const sourdough = new Sourdough({
+      richColors: true,
+      yPosition: "bottom",
+      xPosition: "center",
+    });
+    sourdough.boot();
+    window.sourdoughBooted = true;
+
+    // Watch for changes to htl:flashes meta tag
+    const flashesSelector = "meta[name='rails:flashes']";
+    for await (const mutation of domMutations(document.head, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    })) {
+      let $ele = null;
+
+      if (
+        mutation.type === "attributes" &&
+        mutation.target.nodeName == "META" &&
+        mutation.attributeName == "content"
+      ) {
+        $ele = mutation.target;
+      } else if (mutation.type === "childList") {
+        for (const node of mutation.addedNodes) {
+          if (node.matches(flashesSelector)) {
+            $ele = node;
+            break;
+          }
+        }
+      }
+
+      if ($ele) {
+        const flashes = JSON.parse($ele.getAttribute("content"));
+        for (const [type, message] of Object.entries(flashes)) {
+          if (type === "alert") {
+            toast.error(message);
+          } else if (type === "notice") {
+            toast.success(message);
+          }
+        }
+      }
+    }
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    this.#initSourdough();
+
+    if (newValue === null) return;
+
+    if (name === "data-flash-alert") {
+      toast.warning(newValue);
+    } else if (name === "data-flash-notice") {
+      toast.success(newValue);
+    }
+  }
+}
+
+!customElements.get("pui-flash") &&
+  customElements.define("pui-flash", HueFlash);

data/lib/proscenium/ui/flash.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Proscenium::UI
+  class Flash < Component
+    register_element :pui_flash
+
+    def self.source_path
+      super / '../flash/index.rb'
+    end
+
+    def view_template
+      pui_flash data: { flash: view_context.flash.to_hash }
+    end
+  end
+end

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

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+class Proscenium::UI::Form
+  module FieldMethods
+    # Renders a hidden input field.
+    #
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def hidden_field(*args, **)
+      render Fields::Hidden.new(args, @model, self, **)
+    end
+
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def rich_textarea_field(*args, **attributes)
+      merge_bang_attributes! args, attributes
+      render Fields::RichTextarea.new(args, @model, self, **attributes)
+    end
+
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def datetime_local_field(*args, **attributes)
+      merge_bang_attributes! args, attributes
+      render Fields::Datetime.new(args, @model, self, **attributes)
+    end
+
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def checkbox_field(*args, **attributes)
+      merge_bang_attributes! args, attributes
+      render Fields::Checkbox.new(args, @model, self, **attributes)
+    end
+
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def tel_field(*args, **attributes)
+      merge_bang_attributes! args, attributes
+      render Fields::Tel.new(args, @model, self, **attributes)
+    end
+
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def select_field(*args, **attributes, &)
+      merge_bang_attributes! args, attributes, additional_bang_attrs: [:typeahead]
+      render Fields::Select.new(args, @model, self, **attributes, &)
+    end
+
+    # @see #select_field
+    def select_country_field(*args, **attributes)
+      merge_bang_attributes! args, attributes
+      attributes[:typeahead] = true
+      attributes[:options] = '/countries'
+      attributes[:component_props] = {
+        items_on_search: true,
+        input_props: { required: attributes.delete(:required) }
+      }
+
+      select_field(*args, **attributes)
+    end
+
+    # Renders a <textarea> field for the given `attribute`.
+    #
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def textarea_field(*args, **attributes)
+      merge_bang_attributes! args, attributes
+      render Fields::Textarea.new(args, @model, self, **attributes)
+    end
+
+    # Renders a group of radio inputs for each option of the given `field`.
+    #
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def radio_group(*args, **attributes)
+      attributes[:options] = args.pop if args.last.is_a?(Array)
+
+      render Fields::RadioGroup.new(args, @model, self, **attributes)
+    end
+
+    def radio_field(...)
+      div { radio_input(...) }
+    end
+
+    def radio_input(*args, **)
+      render Fields::RadioInput.new(args, @model, self, **)
+    end
+
+    # @param args [Array<Symbol>] name or nested names of model attribute
+    # @param attributes [Hash] passed through to each input
+    def combobox_field(*args, **attributes)
+      merge_bang_attributes! args, attributes
+      render Fields::Combobox.new(args, @model, self, **attributes)
+    end
+  end
+end

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

@@ -0,0 +1,189 @@
+# frozen_string_literal: true
+
+require 'securerandom'
+
+module Proscenium::UI
+  module Form::Fields
+    #
+    # Abstract class to provide basic rendering of an <input>. All field classes inherit this.
+    #
+    class Base < Component
+      attr_reader :attribute, :model, :form, :attributes
+
+      register_element :pui_field
+
+      # In most cases we want to use the main form component stylesheet. Override this method if
+      # you want to use a different stylesheet.
+      # def self.css_module_path
+      #   source_path.join('../index.module.css')
+      # end
+
+      # @param attribute [Array]
+      # @param model [*]
+      # @param form [Proscenium::UI::Form]
+      # @param type [Symbol] input type, eg. 'text', 'select'
+      # @param error [ActiveModel::Error, String] error message for the attribute.
+      # @param attributes [Hash] HTML attributes to pass to the input.
+      def initialize(attribute, model, form, type: nil, error: nil, **attributes)
+        if attribute.count > 2
+          raise ArgumentError, 'attribute cannot be nested more than 2 levels deep'
+        end
+
+        @attribute = attribute
+        @model = model
+        @form = form
+        @field_type = type
+        @error = error
+        @attributes = attributes
+      end
+
+      private
+
+        # @return [String] The error message for the attribute.
+        def error_message
+          @error_message ||= case @error
+                             when ActiveModel::Error
+                               @error.message
+                             when String
+                               @error
+                             else
+                               if model.errors.include?(attribute.join('.'))
+                                 model.errors.where(attribute.join('.')).first&.message
+                               elsif model.errors.include?(attribute.first)
+                                 model.errors.where(attribute.first).first&.message
+                               end
+                             end
+        end
+
+        def error?
+          error_message.present?
+        end
+
+        # The main wrapper for the field. This is where the label, input, and error message are
+        # rendered.
+        #
+        # @param tag_name: [Symbol] HTML tag name to use for the wrapper.
+        # @param ** [Hash] Additional HTML attributes to pass to the wrapper.
+        # @param [Proc] The block to render the field.
+        def field(tag_name = :pui_field, **rest, &)
+          classes = []
+          classes << rest.delete(:class) if rest.key?(:class)
+          classes << attributes.delete(:class) if attributes.key?(:class)
+
+          send(tag_name, class: classes, data: { field_error: error? }, **rest, &)
+        end
+
+        # Builds the template for the label, along with any error message for the attribute.
+        #
+        # By default, the translated attribute name will be used as the content for the label. You
+        # can
+        # overide this by providing the `:label` keyword argument in `@arguments`. Passing false as
+        # the value to `:label` will omit the label.
+        #
+        # If a block is given, it will be yielded with the label content, and after the label and
+        # error message.
+        def label(**kwargs, &block)
+          content = attributes.delete(:label)
+
+          super do
+            captured = capture do
+              div do
+                span { content || translate_label } if content != false
+                error? && span(part: :error) { error_message }
+              end
+            end
+
+            if !block
+              yield_content_with_no_args { captured }
+            elsif block.arity == 1
+              yield captured
+            else
+              yield_content_with_no_args { captured }
+              yield
+            end
+          end
+        end
+
+        def hint(content = nil)
+          content ||= attributes.delete(:hint)
+
+          return if content == false
+
+          content ||= translate(:hints)
+          content.present? && div(part: :hint) { unsafe_raw content }
+        end
+
+        def field_type
+          @field_type ||= self.class.name.demodulize.underscore
+        end
+
+        def field_name(*names, multiple: false)
+          names.prepend attribute.last
+
+          if nested?
+            if nested_attributes_association?
+              names.prepend "#{attribute.first}_attributes"
+            else
+              names.prepend attribute.first
+            end
+          elsif names.one? && names.first.is_a?(String)
+            return names.first
+          end
+
+          form.field_name(*names, multiple:)
+        end
+
+        def field_id(*)
+          @field_uid ||= SecureRandom.alphanumeric(10)
+          form.field_id(*attribute, @field_uid, *)
+        end
+
+        def translate(namespace, postfix: nil, default: '')
+          form.translate namespace, attribute, postfix:, default:
+        end
+
+        def translate_label(default: nil)
+          form.translate_label attribute, default:
+        end
+
+        def build_attributes(**attrs)
+          attributes.merge(attrs).tap do |x|
+            x[:value] ||= value.to_s
+          end
+        end
+
+        def value
+          attr = attribute.last
+          if actual_model.respond_to?(attr)
+            actual_model.public_send(attribute.last)
+          else
+            ''
+          end
+        end
+
+        # @return [Boolean] true if the attribute is nested, otherwise false.
+        def nested?
+          attribute.many?
+        end
+
+        def nested_attributes_association?
+          parent_model.respond_to?(:"#{attribute.first}_attributes=")
+        end
+
+        # @return the nested model if nested, otherwise nil.
+        def nested_model
+          @nested_model ||= nested? ? model.public_send(attribute.first) : nil
+        end
+
+        def actual_model
+          @actual_model ||= nested_model || model
+        end
+
+        alias parent_model model
+
+        def virtual_path
+          @virtual_path ||= Proscenium::Resolver.resolve self.class.source_path.sub_ext('.jsx').to_s
+        end
+    end
+  end
+end

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

@@ -0,0 +1,48 @@
+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 Component = ({ label, hint, className, errorAttrName, ...props }) => {
+  const [error, hasError] = useFormError(errorAttrName || props.name)
+
+  return (
+    <div className={clsx(styles.fieldWrapper, className)} {...dsx({ fieldError: hasError })}>
+      <label>
+        <input type="hidden" value="0" name={props.name} />
+        <input type="checkbox" value="1" {...props} />
+
+        <span>
+          {label ? <span>{label}</span> : null}
+          {hasError ? <span>{error}</span> : null}
+        </span>
+      </label>
+
+      {hint ? <div className={styles.hint}>{hint}</div> : null}
+    </div>
+  )
+}
+
+Component.displayName = 'Hue.Form.Fields.Checkbox'
+Component.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,
+
+  // 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 Component

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

@@ -0,0 +1,9 @@
+@layer pui {
+  .fieldWrapper {
+    @mixin checkbox from url('/hue/lib/hue/mixins/checkbox.mixin.css');
+  }
+
+  .hint {
+    @mixin fieldHint from url('/hue/lib/hue/mixins/field.mixin.css');
+  }
+}

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

@@ -0,0 +1,8 @@
+import Checkbox from '../'
+
+const Component = () => {
+  return <Checkbox name="awesome" label="I am awesome?" />
+}
+Component.displayName = 'Hue.Form.Fields.Checkbox.Previews.Basic'
+
+export default Component

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  # Renders a checkbox field similar to how Rails handles it.
+  #
+  # A predicate attribute name can be given:
+  #
+  #   checkbox_field :active?
+  #
+  class Checkbox < Base
+    register_element :pui_checkbox
+
+    def view_template
+      checked = ActiveModel::Type::Boolean.new.cast(value.nil? ? false : value)
+
+      checked_value = attributes.delete(:checked_value) || '1'
+      unchecked_value = attributes.delete(:unchecked_value) || '0'
+
+      # TODO: use component
+      # render Proscenium::UI::Fields::Checkbox::Component.new field_name, checked:
+
+      field :pui_checkbox do
+        label do |content|
+          input(name: field_name, type: :hidden, value: unchecked_value, **attributes)
+          input(name: field_name, type: :checkbox, value: checked_value, checked:, **attributes)
+          yield_content_with_no_args { content }
+        end
+        hint
+      end
+    end
+  end
+end