proscenium-ui 0.1.0

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

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  class Combobox < Base
+    register_element :pui_combobox_field
+
+    def initialize(attribute, model, form, type: nil, error: nil, **attributes)
+      super
+
+      @options_from_attributes = @attributes.delete(:options)
+      @src = @attributes.delete(:src)
+      @multiple = @attributes.delete(:multiple) || false
+      @placeholder = @attributes.delete(:placeholder)
+      @min_chars = @attributes.delete(:min_chars) || 0
+      @debounce_ms = @attributes.delete(:debounce) || 300
+      @disabled = @attributes.delete(:disabled) || false
+      @selected_options = @attributes.delete(:selected_options) || []
+    end
+
+    def view_template
+      field :pui_combobox_field do
+        label { |content| content }
+        render Proscenium::UI::Combobox.new(
+          name: resolved_field_name,
+          options: resolved_options,
+          src: @src,
+          multiple: @multiple,
+          placeholder: @placeholder,
+          value: resolved_value,
+          min_chars: @min_chars,
+          debounce: @debounce_ms,
+          disabled: @disabled,
+          selected_options: @selected_options
+        )
+        render_hint
+      end
+    end
+
+    private
+
+      def render_hint
+        content = attributes.delete(:hint)
+        return if content == false
+
+        content ||= translate(:hints)
+        content.present? && div(part: :hint) { plain content }
+      end
+
+      def resolved_field_name
+        if @multiple
+          field_name(multiple: true)
+        else
+          field_name
+        end
+      end
+
+      def resolved_value
+        val = value
+        case val
+        when Array then val.map(&:to_s)
+        when nil then nil
+        else val.to_s
+        end
+      end
+
+      def resolved_options
+        if @options_from_attributes
+          @options_from_attributes
+        elsif enum_attribute?
+          fetch_enum_collection.map do |opt|
+            [model_class.human_attribute_name("#{attribute.last}.#{opt}"), opt]
+          end
+        elsif association_attribute?
+          fetch_association_collection.map do |opt|
+            [opt.to_s, opt.id.to_s]
+          end
+        else
+          []
+        end
+      end
+
+      def enum_attribute?
+        model_class.defined_enums.key?(attribute.last.to_s)
+      end
+
+      def association_attribute?
+        association_reflection.present?
+      end
+
+      def association_reflection
+        @association_reflection ||= model_class.try(:reflect_on_association, attribute.last)
+      end
+
+      def fetch_enum_collection
+        actual_model.defined_enums[attribute.last.to_s].keys
+      end
+
+      def fetch_association_collection
+        reflection = association_reflection
+        relation = reflection.klass.all
+
+        if reflection.respond_to?(:scope) && reflection.scope
+          relation = if reflection.scope.parameters.any?
+                       reflection.klass.instance_exec(actual_model, &reflection.scope)
+                     else
+                       reflection.klass.instance_exec(&reflection.scope)
+                     end
+        end
+
+        relation
+      end
+
+      def model_class
+        @model_class ||= actual_model.class
+      end
+  end
+end

data/lib/proscenium/ui/form/fields/date.module.css

@@ -0,0 +1,27 @@
+@layer pui {
+  .field_wrapper {
+    @mixin fieldWrapper from url('/hue/lib/hue/mixins/form.mixin.css');
+  }
+
+  .inputs {
+    display: flex;
+
+    & div {
+      padding-right: 10px;
+    }
+
+    & label > span {
+      color: var(--gray6);
+      font-size: var(--12px);
+      margin: 0 0 0.2em 0.2em;
+    }
+
+    > div {
+      width: 7em;
+    }
+  }
+
+  .hint {
+    @mixin fieldHint from url('/hue/lib/hue/mixins/field.mixin.css');
+  }
+}

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  class Datetime < Input
+    def field_type
+      'datetime-local'
+    end
+
+    private
+
+      def value
+        super&.strftime('%Y-%m-%dT%H:%M')
+      end
+  end
+end

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  class Hidden < Base
+    def view_template
+      input(name: field_name, type: :hidden, **build_attributes)
+    end
+  end
+end

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

@@ -0,0 +1,71 @@
+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 Input = ({
+  label,
+  hint,
+  className,
+  inputClassName,
+  errorAttrName,
+  inputRef,
+  children,
+  ...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>
+
+        {children || <input className={inputClassName || styles.input} {...props} ref={inputRef} />}
+      </label>
+
+      {hint ? <div className={styles.hint}>{hint}</div> : null}
+    </div>
+  )
+}
+Input.displayName = 'Hue.Form.Fields.Input'
+Input.propTypes = {
+  name: PropTypes.string.isRequired,
+
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]),
+
+  // Input `type` attribute. Default: 'text'.
+  type: PropTypes.string,
+
+  // Custom class name. This will be appended to the default class.
+  className: PropTypes.string,
+
+  // Custom class name for the actual input 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,
+
+  children: PropTypes.node,
+
+  inputRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+  ]),
+
+  id: PropTypes.string,
+  hint: PropTypes.string,
+  disabled: PropTypes.bool
+
+  // All remaining non-descript props will be forwarded to the <input> element.
+}
+Input.defaultProps = {
+  type: 'text'
+}
+
+export default Input

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

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

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

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

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  class Input < Base
+    def view_template
+      field do
+        label do
+          input(name: field_name, type: field_type, **build_attributes)
+        end
+        hint
+      end
+    end
+  end
+end

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

@@ -0,0 +1,175 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  # Render a group of <radio> inputs for the given model attribute. It supports ActiveRecord
+  # associations and enums.
+  #
+  # ## Supported options
+  #
+  # - options [Array] a list of options where each will render a radio input. 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.
+  class RadioGroup < Base
+    register_element :pui_radio_group
+
+    def before_template
+      @options_from_attributes = attributes.delete(:options)
+
+      super
+    end
+
+    def view_template
+      field :pui_radio_group do
+        label
+
+        div part: :radio_group_inputs do
+          options.each do |opt|
+            form.radio_input(*attribute, name: field_name, value: opt[:value], label: opt[:label],
+                                         checked: opt[:checked], **attributes)
+          end
+        end
+
+        hint
+      end
+    end
+
+    private
+
+      def field_name(*names, multiple: false)
+        names.prepend association_attribute? ? association_attribute : 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 options
+        if @options_from_attributes
+          @options_from_attributes.map do |x|
+            if x.is_a?(Array)
+              { value: x.first, label: x.last, checked: checked?(x.first) }
+            else
+              { value: x, label: x, checked: checked?(x) }
+            end
+          end
+        elsif enum_attribute?
+          fetch_enum_collection.map do |x|
+            {
+              value: x,
+              label: model_class.human_attribute_name("#{attribute.last}.#{x}"),
+              checked: checked?(x)
+            }
+          end
+        elsif association_attribute?
+          fetch_association_collection.map do |x|
+            {
+              value: x.id,
+              label: x.to_s,
+              checked: checked?(x)
+            }
+          end
+        end
+      end
+
+      def value
+        if actual_model.respond_to?(model_attribute)
+          actual_model.public_send(model_attribute)
+        else
+          ''
+        end
+      end
+
+      # Is the given `option` the current value (checked)?
+      def checked?(option)
+        if !option.is_a?(String) && !option.is_a?(Integer) && association_attribute?
+          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
+        else
+          option.to_s == value.to_s
+        end
+      end
+
+      def model_attribute
+        @model_attribute ||= association_attribute? ? association_attribute : attribute.last
+      end
+
+      def enum_attribute?
+        model_class.defined_enums.key?(attribute.last.to_s)
+      end
+
+      def association_attribute?
+        association_reflection.present?
+      end
+
+      def association_attribute
+        @association_attribute ||= begin
+          reflection = association_reflection
+
+          case reflection.macro
+          when :belongs_to
+            (reflection.respond_to?(:options) && reflection.options[:foreign_key]&.to_sym) ||
+              :"#{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 association_reflection
+        @association_reflection ||= model_class.try :reflect_on_association, attribute.last
+      end
+
+      def fetch_association_collection
+        relation = association_reflection.klass.all
+
+        # association_reflection.macro == :has_many
+
+        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 fetch_enum_collection
+        actual_model.defined_enums[attribute.last.to_s].keys
+      end
+
+      def model_class
+        @model_class ||= actual_model.class
+      end
+  end
+end

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

@@ -0,0 +1,44 @@
+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="radio" {...props} />
+
+        <span>{label}</span>
+      </label>
+
+      {hasError ? <div className={styles.error}>{error}</div> : null}
+      {hint ? <div className={styles.hint}>{hint}</div> : null}
+    </div>
+  )
+}
+
+Component.displayName = 'Hue.Form.Fields.RadioInput'
+Component.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]).isRequired,
+
+  // 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/radio_input/index.module.css

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

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

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

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  class RadioInput < Base
+    def view_template
+      checked = attributes[:value].to_s == value.to_s
+
+      default = model.class.human_attribute_name("#{attribute.join('.')}.#{attributes[:value]}")
+      label_contents = attributes.delete(:label) || translate_label(default:)
+
+      label do |_|
+        input(name: field_name, type: :radio, checked:, **build_attributes)
+        span { label_contents }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+@import 'trix/dist/trix.css';
+
+trix-editor {
+  @mixin textarea from url('/hue/lib/hue/mixins/textarea.mixin.css');
+}
+
+trix-toolbar {
+  .trix-button-group {
+    @mixin button-group from url('/hue/lib/hue/mixins/button_group.mixin.css');
+    @mixin button-group__nospace from url('/hue/lib/hue/mixins/button_group.mixin.css');
+    border-color: var(--gray5);
+  }
+
+  .trix-button {
+    @mixin button from url('/hue/lib/hue/mixins/button.mixin.css');
+    @mixin button__secondary from url('/hue/lib/hue/mixins/button.mixin.css');
+    box-shadow: none;
+  }
+
+  [data-trix-button-group='file-tools'] {
+    display: none;
+  }
+}

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

@@ -0,0 +1,6 @@
+import "trix"
+
+document.addEventListener("trix-file-accept", function (event) {
+  // Prevent attachment drag and drop
+  event.preventDefault()
+})

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Proscenium::UI::Form::Fields
+  class RichTextarea < Base
+    register_element :trix_editor
+
+    def view_template
+      value = attributes.delete(:value)
+
+      field do
+        label
+        trix_editor input: field_id
+        hint
+        form.hidden_field(*attribute, id: field_id, value: value&.to_trix_html)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react'
+import PropTypes from 'prop-types'
+import exact from 'prop-types-exact'
+
+import SmartSelect, {
+  propTypes as smartSelectPropTypes
+} from '/hue/app/components/lib/smart_select'
+
+const Component = ({ inputName, ...props }) => {
+  const [selected, setSelected] = useState(() => {
+    return Array.isArray(props.initialSelectedItem)
+      ? props.initialSelectedItem
+      : [props.initialSelectedItem]
+  })
+
+  const onChange = useCallback(values => {
+    if (Array.isArray(values)) {
+      setSelected(values)
+    } else {
+      setSelected([values?.value])
+    }
+  }, [])
+
+  return (
+    <>
+      <SmartSelect {...props} onChange={onChange} />
+
+      {selected.length === 0 && <input type="hidden" name={inputName} value="" />}
+      {selected.map((item, i) => (
+        <input
+          key={item?.value || i}
+          type="hidden"
+          name={inputName}
+          value={item?.value || item || ''}
+        />
+      ))}
+    </>
+  )
+}
+
+Component.displayName = 'Hue.Form.Fields.Select'
+Component.propTypes = exact({
+  inputName: PropTypes.string.isRequired,
+  ...smartSelectPropTypes
+})
+
+export default Component

data/lib/proscenium/ui/form/fields/select.module.css

@@ -0,0 +1,46 @@
+@layer pui {
+  .field {
+    @mixin fieldWrapper from url('/hue/lib/hue/mixins/form.mixin.css');
+
+    &[data-field-error] > div > span > span {
+      color: var(--input-error-color);
+      display: var(--fieldError-display);
+
+      &:first-child {
+        font-weight: 500;
+
+        &:after {
+          content: '\00a0';
+        }
+      }
+    }
+  }
+
+  .hint {
+    @mixin fieldHint from url('/hue/lib/hue/mixins/field.mixin.css');
+  }
+
+  .typeahead {
+    @mixin label from url('/hue/lib/hue/mixins/label.mixin.css');
+
+    > span:first-child {
+      margin: 0 0 0.2em 0.2em;
+    }
+
+    &:has(:not(> span)) {
+      margin: 0 0 0.2em 0.2em;
+    }
+  }
+
+  .typeahead_input {
+    &:empty {
+      @mixin select from url('/hue/lib/hue/mixins/select.mixin.css');
+      @mixin field__disabled from url('/hue/lib/hue/mixins/field.mixin.css');
+
+      &:after {
+        content: 'loading...';
+        color: var(--input-disabled-color);
+      }
+    }
+  }
+}