shadcn_phlexcomponents 0.1.5 → 0.1.9

data/lib/shadcn_phlexcomponents/components/form/form_checkbox.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormCheckbox < Base
+    include FormHelpers
+
+    def initialize(
+      method = nil,
+      model: false,
+      object_name: nil,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      checked: nil,
+      **attributes
+    )
+      @method = method
+      @model = model
+      @object_name = object_name
+      @value = value
+      @model_value = model&.public_send(method)
+      @name = name
+      @id = id
+      @label = label
+      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @hint = hint
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      @checked = checked
+      super(**attributes)
+    end
+
+    def label_attributes(use_label_styles: false, **attributes)
+      attributes[:class] = [
+        use_label_styles ? Label::STYLES : nil,
+        "ml-6",
+        attributes[:class],
+      ].compact.join(" ")
+      attributes[:for] ||= @id
+      attributes
+    end
+
+    def hint_attributes(**attributes)
+      attributes[:class] = [
+        "ml-6",
+        attributes[:class],
+      ].compact.join(" ")
+      attributes
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+      @name ||= field_name(@object_name, @method)
+
+      div(class: "space-y-2") do
+        div(class: "flex items-top space-x-2") do
+          div(class: "grid gap-1.5 relative", data: label_and_hint_container_attributes) do
+            @attributes[:class] = "#{@attributes[:class]} -mt-[1.5px] absolute top-0 left-0"
+
+            Checkbox(
+              id: @id,
+              name: @name,
+              value: @value || "1",
+              checked: @checked || !!@model_value,
+              aria: aria_attributes,
+              disabled: @disabled,
+              **@attributes,
+            )
+
+            render_label(&)
+            render_hint(&)
+          end
+        end
+
+        render_error
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/form/form_checkbox_group.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormCheckboxGroup < Base
+    include FormHelpers
+
+    def initialize(
+      method = nil,
+      model: false,
+      object_name: nil,
+      collection: [],
+      value_method: nil,
+      text_method: nil,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      disabled_items: nil,
+      **attributes
+    )
+      @method = method
+      @model = model
+      @object_name = object_name
+
+      @collection = if collection.first&.is_a?(Hash)
+        convert_collection_hash_to_struct(collection, value_method: value_method, text_method: text_method)
+      else
+        collection
+      end
+
+      @value_method = value_method
+      @text_method = text_method
+
+      @value = value
+
+      @model_value = if model
+        model_collection = model.public_send(method)
+
+        if model_collection.respond_to?(:map)
+          model_collection.map { |item| item.public_send(value_method) }
+        end
+      end
+
+      @name = name
+      @id = id
+      @label = label
+      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @hint = hint
+      @disabled_items = disabled_items
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def aria_attributes
+      attrs = super
+      attrs[:labelledby] = "#{@aria_id}-label"
+      attrs
+    end
+
+    def label_attributes(use_label_styles: false, **attributes)
+      attrs = super(use_label_styles: use_label_styles, **attributes)
+      attrs[:id] = "#{@aria_id}-label"
+      attrs
+    end
+
+    def checkbox(**attributes)
+      @checkbox_attributes = attributes
+      nil
+    end
+
+    def checkbox_label(**attributes)
+      @checkbox_label_attributes = attributes
+      nil
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+      @name ||= field_name(@object_name, @method)
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        render_label(&)
+
+        CheckboxGroup(
+          id: @id,
+          name: @name,
+          value: @value || @model_value || [],
+          aria: aria_attributes,
+          item_id_prefix: @id,
+          **@attributes,
+        ) do |c|
+          c.items(
+            @collection,
+            value_method: @value_method,
+            text_method: @text_method,
+            disabled_items: @disabled_items,
+          ) do
+            if @checkbox_attributes
+              c.checkbox(**@checkbox_attributes)
+            end
+
+            if @checkbox_label_attributes
+              c.label(**@checkbox_label_attributes)
+            end
+          end
+        end
+
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/form/form_date_picker.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormDatePicker < Base
+    include FormHelpers
+
+    def initialize(
+      method = nil,
+      model: false,
+      object_name: nil,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      **attributes
+    )
+      @method = method
+      @model = model
+      @object_name = object_name
+      @value = value
+      @model_value = model&.public_send(method)
+      @name = name
+      @id = id
+      @label = label
+      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @hint = hint
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+      @name ||= field_name(@object_name, @method)
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        render_label(&)
+        DatePicker(id: @id, name: @name, value: @value || @model_value, aria: aria_attributes, **@attributes)
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/form/form_date_range_picker.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormDateRangePicker < Base
+    include FormHelpers
+
+    def initialize(
+      start_date_method,
+      end_date_method,
+      model: false,
+      object_name: nil,
+      start_date: nil,
+      end_date: nil,
+      start_date_name: nil,
+      end_date_name: nil,
+      id: nil,
+      label: nil,
+      start_date_error: nil,
+      end_date_error: nil,
+      hint: nil,
+      **attributes
+    )
+      @start_date_method = start_date_method
+      @end_date_method = end_date_method
+      @model = model
+      @object_name = object_name
+      @start_date = start_date
+      @end_date = start_date
+      @start_date_model_value = model&.public_send(start_date_method)
+      @end_date_model_value = model&.public_send(end_date_method)
+      @start_date_name = start_date_name
+      @end_date_name = end_date_name
+      @id = id
+      @label = label
+      @start_date_error = start_date_error || (model ? model.errors.full_messages_for(start_date_method).first : nil)
+      @end_date_error = end_date_error || (model ? model.errors.full_messages_for(end_date_method).first : nil)
+      @error = (@start_date_error || @end_date_error).present?
+      @hint = hint
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def render_label(&)
+      # It's currently not possible to separate the content of the yield in Phlex.
+      # So we use Javascript to remove the duplicated hint or label.
+      if @yield_label && @yield_hint
+        div(data: { remove_hint: true }, &)
+      elsif @yield_label
+        yield
+      elsif @label
+        attrs = label_attributes(use_label_styles: false)
+        Label(**attrs) { @label }
+      elsif @label != false
+        attrs = label_attributes(use_label_styles: true)
+        rails_label(@object_name, [@start_date_method, @end_date_method].to_sentence, nil, **attrs)
+      end
+    end
+
+    def render_error
+      if @start_date_error && @end_date_error
+        FormError(nil, aria_id: @aria_id) do
+          span { @start_date_error }
+          br
+          span { @end_date_error }
+        end
+      elsif @start_date_error
+        FormError(@start_date_error, aria_id: @aria_id)
+      elsif @end_date_error
+        FormError(@end_date_error, aria_id: @aria_id)
+      end
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @start_date_method)
+      @start_date_name ||= field_name(@object_name, @start_date_method)
+      @end_date_name ||= field_name(@object_name, @end_date_method)
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        render_label(&)
+        DateRangePicker(
+          id: @id,
+          start_date_name: @start_date_name,
+          end_date_name: @end_date_name,
+          start_date: @start_date || @start_date_model_value,
+          end_date: @end_date || @end_date_model_value,
+          aria: aria_attributes,
+          **@attributes,
+        )
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

data/lib/{components → shadcn_phlexcomponents/components/form}/form_error.rb

@@ -4,14 +4,18 @@ module ShadcnPhlexcomponents
   class FormError < Base
     STYLES = "text-[0.8rem] font-medium text-destructive"
 
-    def initialize(message: nil, aria_id: nil, **attributes)
+    def initialize(message, aria_id: nil, **attributes)
       @message = message
       @id = aria_id ? "#{aria_id}-message" : nil
       super(**attributes)
     end
 
     def view_template(&)
-      p(id: @id, **@attributes) { @message }
+      if @message
+        p(id: @id, **@attributes) { @message }
+      else
+        p(id: @id, **@attributes, &)
+      end
     end
   end
 end

data/lib/shadcn_phlexcomponents/components/form/form_helpers.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  module FormHelpers
+    module AliasedLabel
+      include Phlex::Rails::Helpers::Label
+
+      alias_method :rails_label, :label
+    end
+
+    include AliasedLabel
+    include Phlex::Rails::Helpers::FieldID
+    include Phlex::Rails::Helpers::FieldName
+
+    def label(text = nil, **attributes, &)
+      @yield_label = true
+      attrs = label_attributes(use_label_styles: false, **attributes)
+
+      if text
+        Label(**attrs) { text }
+      else
+        Label(**attrs, &)
+      end
+    end
+
+    def hint(text = nil, **attributes, &)
+      @yield_hint = true
+      attrs = hint_attributes(**attributes)
+
+      if text
+        FormHint(text, **attrs)
+      else
+        FormHint(**attrs, &)
+      end
+    end
+
+    def render_label(&)
+      # It's currently not possible to separate the content of the yield in Phlex.
+      # So we use Javascript to remove the duplicated hint or label.
+      if @yield_label && @yield_hint
+        div(data: { remove_hint: true }, &)
+      elsif @yield_label
+        yield
+      elsif @label
+        attrs = label_attributes(use_label_styles: false)
+        Label(**attrs) { @label }
+      elsif @label != false
+        attrs = label_attributes(use_label_styles: true)
+        rails_label(@object_name, @method, nil, **attrs)
+      end
+    end
+
+    def render_hint(&)
+      # It's currently not possible to separate the content of the yield in Phlex.
+      # So we use Javascript to remove the duplicated hint or label.
+      if @yield_label && @yield_hint
+        div(data: { remove_label: true }, &)
+      elsif @yield_hint
+        yield
+      elsif @hint
+        attrs = hint_attributes
+        FormHint(@hint, aria_id: @aria_id, **attrs)
+      end
+    end
+
+    def render_error
+      if @error
+        FormError(@error, aria_id: @aria_id)
+      end
+    end
+
+    def label_attributes(use_label_styles: false, **attributes)
+      attributes[:class] = [
+        use_label_styles ? Label::STYLES : nil,
+        @error ? "text-destructive" : nil,
+        attributes[:class],
+      ].compact.join(" ")
+      attributes[:for] ||= @id
+      attributes
+    end
+
+    def hint_attributes(**attributes)
+      attributes
+    end
+
+    def label_and_hint_container_attributes
+      {
+        controller: @yield_label && @yield_hint ? "form-field" : nil,
+      }.compact
+    end
+
+    def aria_attributes
+      {
+        describedby: describedby,
+        invalid: @error.present?,
+      }.compact
+    end
+
+    def describedby
+      return if !@hint && !@error
+
+      [
+        @hint ? "#{@aria_id}-description" : nil,
+        @error ? "#{@aria_id}-message" : nil,
+      ].compact.join(" ")
+    end
+  end
+end

data/lib/{components → shadcn_phlexcomponents/components/form}/form_hint.rb

@@ -4,14 +4,18 @@ module ShadcnPhlexcomponents
   class FormHint < Base
     STYLES = "text-[0.8rem] text-muted-foreground"
 
-    def initialize(message: nil, aria_id: nil, **attributes)
+    def initialize(message = nil, aria_id: nil, **attributes)
       @message = message
       @id = aria_id ? "#{aria_id}-description" : nil
       super(**attributes)
     end
 
     def view_template(&)
-      p(id: @id, **@attributes) { @message }
+      if @message
+        p(id: @id, **@attributes) { @message }
+      else
+        p(id: @id, **@attributes, &)
+      end
     end
   end
 end

data/lib/shadcn_phlexcomponents/components/form/form_radio_group.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormRadioGroup < Base
+    include FormHelpers
+
+    def initialize(
+      method = nil,
+      model: false,
+      object_name: nil,
+      collection: [],
+      value_method: nil,
+      text_method: nil,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      disabled_items: nil,
+      **attributes
+    )
+      @method = method
+      @model = model
+      @object_name = object_name
+
+      @collection = if collection.first&.is_a?(Hash)
+        convert_collection_hash_to_struct(collection, value_method: value_method, text_method: text_method)
+      else
+        collection
+      end
+
+      @value_method = value_method
+      @text_method = text_method
+      @value = value
+      @model_value = model&.public_send(method)
+      @name = name
+      @id = id
+      @label = label
+      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @hint = hint
+      @disabled_items = disabled_items
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def aria_attributes
+      attrs = super
+      attrs[:labelledby] = "#{@aria_id}-label"
+      attrs
+    end
+
+    def label_attributes(use_label_styles: false, **attributes)
+      attrs = super(use_label_styles: use_label_styles, **attributes)
+      attrs[:id] = "#{@aria_id}-label"
+      attrs
+    end
+
+    def radio(**attributes)
+      @radio_attributes = attributes
+      nil
+    end
+
+    def radio_label(**attributes)
+      @radio_label_attributes = attributes
+      nil
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+      @name ||= field_name(@object_name, @method)
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        render_label(&)
+
+        RadioGroup(
+          name: @name,
+          id: @id,
+          value: @value || @model_value,
+          aria: aria_attributes,
+          item_id_prefix: @id,
+          **@attributes,
+        ) do |c|
+          c.items(
+            @collection,
+            value_method: @value_method,
+            text_method: @text_method,
+            disabled_items: @disabled_items,
+          ) do
+            if @radio_attributes
+              c.radio(**@radio_attributes)
+            end
+
+            if @radio_label_attributes
+              c.label(**@radio_label_attributes)
+            end
+          end
+        end
+
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/form/form_select.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormSelect < Base
+    include FormHelpers
+
+    def initialize(
+      method = nil,
+      model: false,
+      object_name: nil,
+      collection: [],
+      value_method: nil,
+      text_method: nil,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      disabled_items: nil,
+      **attributes
+    )
+      @method = method
+      @model = model
+      @object_name = object_name
+
+      @collection = if collection.first&.is_a?(Hash)
+        convert_collection_hash_to_struct(collection, value_method: value_method, text_method: text_method)
+      else
+        collection
+      end
+
+      @value_method = value_method
+      @text_method = text_method
+      @value = value
+      @model_value = model&.public_send(method)
+      @name = name
+      @id = id
+      @label = label
+      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @hint = hint
+      @disabled_items = disabled_items
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+      @name ||= field_name(@object_name, @method)
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        render_label(&)
+
+        Select(id: @id, name: @name, value: @value || @model_value, aria: aria_attributes, **@attributes) do |s|
+          s.items(@collection, value_method: @value_method, text_method: @text_method, disabled_items: @disabled_items)
+        end
+
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end