proscenium 0.19.0.beta4 → 0.19.0.beta5

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

@@ -0,0 +1,188 @@
+# 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) # rubocop:disable Lint/MissingSuper,Metrics/ParameterLists
+        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(**kwargs) 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.count == 1 && 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.count > 1
+      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 hue-component {
+  .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

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

@@ -0,0 +1,27 @@
+@layer hue-component {
+  .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 hue-component {
+  .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,173 @@
+# 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.count == 1 && 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)
+
+        relation = relation.where(conditions) if relation.respond_to?(:where) && conditions.present?
+        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 hue-component {
+  .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