shadcn_phlexcomponents 0.1.5 → 0.1.11

data/lib/shadcn_phlexcomponents/components/dropdown_menu_sub.rb

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DropdownMenuSub < Base
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      DropdownMenuSubTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      DropdownMenuSubContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "dropdown-menu-sub",
+          action: "keydown.left->dropdown-menu-sub#closeOnLeftKeydown:prevent",
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class DropdownMenuSubTrigger < Base
+    class_variants(
+      base: <<~HEREDOC,
+        focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground
+        flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8
+      HEREDOC
+    )
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        yield
+
+        icon("chevron-right", class: "ml-auto size-4")
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-trigger",
+        role: "menuitem",
+        aria: {
+          haspopup: "menu",
+          expanded: false,
+          controls: "#{@aria_id}-content",
+        },
+        tabindex: -1,
+        data: {
+          state: "closed",
+          dropdown_menu_sub_target: "trigger",
+          dropdown_menu_target: "item",
+          action: <<~HEREDOC,
+            focus->dropdown-menu#onItemFocus
+            blur->dropdown-menu#onItemBlur
+            keydown.up->dropdown-menu#focusItem:prevent
+            keydown.down->dropdown-menu#focusItem:prevent
+            mouseover->dropdown-menu#focusItem
+            mouseover->dropdown-menu-sub#open
+            click->dropdown-menu-sub#open
+            keydown.right->dropdown-menu-sub#open:prevent
+            keydown.space->dropdown-menu-sub#open:prevent
+            keydown.enter->dropdown-menu-sub#open:prevent
+            keydown.left->dropdown-menu-sub#closeParentSubMenu
+          HEREDOC
+        },
+      }
+    end
+  end
+
+  class DropdownMenuSubContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out
+        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
+        data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
+        data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem]
+        origin-(--radix-popper-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg outline-none
+      HEREDOC
+    )
+
+    def initialize(aria_id: nil, side: :right, align: :start, **attributes)
+      @side = side
+      @align = align
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "menu",
+        aria: {
+          labelledby: "#{@aria_id}-trigger",
+          orientation: "vertical",
+        },
+        data: {
+          state: "closed",
+          side: @side,
+          align: @align,
+          dropdown_menu_sub_target: "content",
+          action: <<~HEREDOC,
+            mouseover->dropdown-menu-sub#open#{" "}
+            keydown.up->dropdown-menu-sub#focusItemByIndex:prevent:self
+            keydown.down->dropdown-menu-sub#focusItemByIndex:prevent:self
+          HEREDOC
+        },
+      }
+    end
+
+    def view_template(&)
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { dropdown_menu_sub_target: "contentContainer" },
+      ) do
+        div(**@attributes, &)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,82 @@
+# 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 || "1"
+      @name = name
+      @id = id
+      @label = label
+      @error = default_error(error, method)
+      @hint = hint
+      @aria_id = "form-field-#{SecureRandom.hex(5)}"
+      @checked = default_checked(checked, method)
+      super(**attributes)
+    end
+
+    def label_attributes(use_label_styles: false, **attributes)
+      attributes[:class] = [
+        use_label_styles ? Label.new.class_variants : 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,
+              checked: @checked,
+              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 = default_error(error, method)
+      @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,
+          **@attributes,
+        ) do |c|
+          c.items(
+            @collection,
+            value_method: @value_method,
+            text_method: @text_method,
+            disabled_items: @disabled_items,
+            id_prefix: @id,
+          ) 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,46 @@
+# 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 = default_value(value, method)
+      @name = name
+      @id = id
+      @label = label
+      @error = default_error(error, method)
+      @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, 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,82 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormDateRangePicker < Base
+    include FormHelpers
+
+    def initialize(
+      method,
+      end_method,
+      model: false,
+      object_name: nil,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      **attributes
+    )
+      @method = method
+      @end_method = end_method
+      @model = model
+      @object_name = object_name
+
+      @value = [
+        default_value(value ? value[0] : nil, method),
+        default_value(value ? value[1] : nil, end_method),
+      ]
+      @error = [
+        default_error(error ? error[0] : nil, method),
+        default_error(error ? error[1] : nil, end_method),
+      ].compact
+
+      @name = name
+      @id = id
+      @label = label
+      @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, [@method, @end_method].to_sentence, nil, **attrs)
+      end
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+      @name ||=
+        [
+          field_name(@object_name, @method),
+          field_name(@object_name, @end_method),
+        ]
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        render_label(&)
+        DateRangePicker(
+          id: @id,
+          name: @name,
+          value: @value,
+          aria: aria_attributes,
+          **@attributes,
+        )
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

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

@@ -2,16 +2,20 @@
 
 module ShadcnPhlexcomponents
   class FormError < Base
-    STYLES = "text-[0.8rem] font-medium text-destructive"
+    class_variants(base: "text-destructive text-sm")
 
-    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,143 @@
+# 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.present?
+        if @error.is_a?(Array)
+          FormError(nil, aria_id: @aria_id, class: "space-y-0.5") do
+            @error.each do |error|
+              span(class: "block") { error }
+            end
+          end
+        else
+          FormError(@error, aria_id: @aria_id)
+        end
+      end
+    end
+
+    def label_attributes(use_label_styles: false, **attributes)
+      attributes[:class] = [
+        use_label_styles ? Label.new.class_variants : nil,
+        @error.present? ? "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?.to_s,
+      }
+    end
+
+    def describedby
+      return if !@hint && !@error.present?
+
+      [
+        @hint ? "#{@aria_id}-description" : nil,
+        @error.present? ? "#{@aria_id}-message" : nil,
+      ].compact.join(" ")
+    end
+
+    def default_value(value, method)
+      return value unless value.nil?
+      return unless @model
+
+      if @model.respond_to?(method)
+        @model.public_send(method)
+      end
+    end
+
+    def default_checked(checked, method)
+      return checked if [true, false].include?(checked)
+      return unless @model
+
+      if @model.respond_to?(method)
+        !!@model.public_send(method)
+      end
+    end
+
+    def default_error(error, method)
+      return error unless error.nil?
+      return unless @model
+
+      if @model.respond_to?(:errors)
+        @model.errors.full_messages_for(method).first
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormHint < Base
+    class_variants(base: "text-muted-foreground text-sm")
+
+    def initialize(message = nil, aria_id: nil, **attributes)
+      @message = message
+      @id = aria_id ? "#{aria_id}-description" : nil
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @message
+        p(id: @id, **@attributes) { @message }
+      else
+        p(id: @id, **@attributes, &)
+      end
+    end
+  end
+end

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

@@ -21,12 +21,11 @@ module ShadcnPhlexcomponents
       @model = model
       @object_name = object_name
       @type = type.to_sym
-      @value = value
-      @model_value = model&.public_send(method)
+      @value = default_value(value, method)
       @name = name
       @id = id
       @label = label
-      @error = error || (model ? model.errors.full_messages_for(method).first : nil)
+      @error = default_error(error, method)
       @hint = hint
       @aria_id = "form-field-#{SecureRandom.hex(5)}"
       super(**attributes)
@@ -40,7 +39,7 @@ module ShadcnPhlexcomponents
 
       div(class: "space-y-2", data: label_and_hint_container_attributes) do
         render_label(&)
-        Input(type: @type, id: @id, name: @name, value: @value || @model_value, aria: aria_attributes, **@attributes)
+        Input(type: @type, id: @id, name: @name, value: @value, aria: aria_attributes, **@attributes)
         render_hint(&)
         render_error
       end