shadcn_phlexcomponents 0.1.0 → 0.1.2

data/lib/components/combobox_item.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class ComboboxItem < Base
+    def view_template(&)
+      option(**@attributes, &)
+    end
+  end
+end

data/lib/components/date_picker.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DatePicker < Base
+    STYLES = "relative"
+
+    INPUT_STYLES = <<~HEREDOC
+      flex h-9 w-full rounded-md border border-input bg-transparent px-3 pr-10 py-1
+      text-base shadow-sm transition-colors placeholder:text-muted-foreground
+      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+      disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
+    HEREDOC
+
+    CLEAR_BUTTON_STYLES = TAILWIND_MERGER.merge("#{Button.default_styles(
+      variant: :ghost,
+      size: :icon,
+    )} text-muted-foreground h-6 w-6")
+
+    def initialize(name: nil, id: nil, value: nil, format: "DD/MM/YYYY", disabled: false, settings: {}, **attributes)
+      @name = name
+      @id = id || @name
+      @value = value&.utc&.iso8601
+      @settings = settings
+      @format = format
+      @disabled = disabled
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          value: @value,
+          format: @format,
+          controller: "shadcn-phlexcomponents--date-picker",
+          settings: @settings.to_json,
+          has_value: @value.present?.to_s,
+          disabled: @disabled,
+          action: <<~HEREDOC,
+            mouseover->shadcn-phlexcomponents--date-picker#showClearButton
+            mouseout->shadcn-phlexcomponents--date-picker#hideClearButton
+          HEREDOC
+        },
+      }
+    end
+
+    def view_template
+      div(**@attributes) do
+        input(type: :text, id: @id, class: INPUT_STYLES, data: {
+          "shadcn-phlexcomponents--date-picker-target": "dateInput",
+          action: <<~HEREDOC,
+            input->shadcn-phlexcomponents--date-picker#changeDate
+            blur->shadcn-phlexcomponents--date-picker#inputBlur
+            keydown->shadcn-phlexcomponents--date-picker#closeCalendar
+          HEREDOC
+        })
+        input(
+          type: :hidden,
+          name: @name,
+          value: @value,
+          data: { "shadcn-phlexcomponents--date-picker-target": "hiddenInput" },
+        )
+
+        div(
+          class: "absolute right-3 inset-y-0 flex items-center -z-1",
+          data: {
+            action: "",
+          },
+        ) do
+          span(class: "pointer-events-none size-6 inline-flex items-center justify-center") do
+            icon(
+              "calendar",
+              class: "size-4 text-muted-foreground",
+              data: { "shadcn-phlexcomponents--date-picker-target": "calendarIcon" },
+            )
+          end
+        end
+
+        div(class: "absolute right-3 inset-y-0 flex items-center") do
+          button(
+            type: :button,
+            class: "#{CLEAR_BUTTON_STYLES} !hidden",
+            tabindex: -1,
+            data: {
+              action: "shadcn-phlexcomponents--date-picker#clear:stop",
+              "shadcn-phlexcomponents--date-picker-target": "clearButton",
+            },
+          ) do
+            icon("x")
+          end
+        end
+      end
+    end
+  end
+end

data/lib/components/date_range_picker.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DateRangePicker < Base
+    STYLES = <<~HEREDOC
+      flex w-full rounded-md border border-input bg-transparent px-3 pr-10 h-9
+      text-base shadow-sm transition-colors placeholder:text-muted-foreground
+      outline-none data-[focus=true]:ring-1 data-[focus=true]:ring-ring
+      data-disabled:cursor-not-allowed data-disabled:opacity-50 md:text-sm relative
+      items-center
+    HEREDOC
+
+    INPUT_STYLES = <<~HEREDOC
+      h-9 py-1
+      text-base md:text-sm outline-none w-[45%]
+    HEREDOC
+
+    CLEAR_BUTTON_STYLES = TAILWIND_MERGER.merge("#{Button.default_styles(
+      variant: :ghost,
+      size: :icon,
+    )} text-muted-foreground h-6 w-6")
+
+    def initialize(start_date: nil, end_date: nil, start_date_name: nil, end_date_name: nil, format: "DD/MM/YYYY",
+      disabled: false, settings: {}, **attributes)
+      @start_date = start_date&.utc&.iso8601
+      @end_date = end_date&.utc&.iso8601
+      @start_date_name = start_date_name
+      @end_date_name = end_date_name
+      @settings = settings
+      @format = format
+      @disabled = disabled
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          start_date: @start_date,
+          end_date: @end_date,
+          format: @format,
+          controller: "shadcn-phlexcomponents--date-range-picker",
+          settings: @settings.to_json,
+          has_value: (@start_date.present? && @end_date.present?).to_s,
+          disabled: @disabled,
+          action: <<~HEREDOC,
+            mouseover->shadcn-phlexcomponents--date-range-picker#showClearButton
+            mouseout->shadcn-phlexcomponents--date-range-picker#hideClearButton
+          HEREDOC
+        },
+      }
+    end
+
+    def view_template
+      div(**@attributes) do
+        input(type: :text, class: INPUT_STYLES, data: {
+          "shadcn-phlexcomponents--date-range-picker-target": "startDateInput",
+          action: <<~HEREDOC,
+            focus->shadcn-phlexcomponents--date-range-picker#openCalendar
+            input->shadcn-phlexcomponents--date-range-picker#changeDate
+            keydown->shadcn-phlexcomponents--date-range-picker#closeCalendar
+          HEREDOC
+        })
+        input(
+          type: :hidden,
+          name: @start_date_name,
+          value: @start_date,
+          data: { "shadcn-phlexcomponents--date-range-picker-target": "startDateHiddenInput" },
+        )
+
+        icon("minus", class: "size-4 text-muted-foreground px-3 w-[10%]")
+
+        input(type: :text, class: INPUT_STYLES, data: {
+          "shadcn-phlexcomponents--date-range-picker-target": "endDateInput",
+          action: <<~HEREDOC,
+            focus->shadcn-phlexcomponents--date-range-picker#openCalendar
+            input->shadcn-phlexcomponents--date-range-picker#changeDate
+            keydown->shadcn-phlexcomponents--date-range-picker#closeCalendar
+          HEREDOC
+        })
+        input(
+          type: :hidden,
+          name: @end_date_name,
+          value: @end_date,
+          data: { "shadcn-phlexcomponents--date-range-picker-target": "endDateHiddenInput" },
+        )
+
+        div(class: "absolute right-3 inset-y-0 flex items-center -z-1") do
+          span(class: "pointer-events-none size-6 inline-flex items-center justify-center") do
+            icon(
+              "calendar",
+              class: "size-4 text-muted-foreground",
+              data: { "shadcn-phlexcomponents--date-range-picker-target": "calendarIcon" },
+            )
+          end
+        end
+
+        div(class: "absolute right-3 inset-y-0 flex items-center") do
+          button(
+            type: :button,
+            class: "#{CLEAR_BUTTON_STYLES} !hidden",
+            tabindex: -1,
+            data: {
+              action: "shadcn-phlexcomponents--date-range-picker#clear:stop",
+              "shadcn-phlexcomponents--date-range-picker-target": "clearButton",
+            },
+          ) do
+            icon("x")
+          end
+        end
+      end
+    end
+  end
+end

data/lib/components/dialog.rb

@@ -49,4 +49,4 @@ module ShadcnPhlexcomponents
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_close.rb

@@ -39,4 +39,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/dialog_content.rb

@@ -34,7 +34,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           "shadcn-phlexcomponents--dialog-target": "content",
-          state: "closed"
+          state: "closed",
         },
       }
     end
@@ -51,4 +51,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/dialog_description.rb

@@ -19,4 +19,4 @@ module ShadcnPhlexcomponents
       p(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_footer.rb

@@ -8,4 +8,4 @@ module ShadcnPhlexcomponents
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_header.rb

@@ -8,4 +8,4 @@ module ShadcnPhlexcomponents
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_title.rb

@@ -19,4 +19,4 @@ module ShadcnPhlexcomponents
       h2(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_trigger.rb

@@ -19,7 +19,7 @@ module ShadcnPhlexcomponents
         data: {
           action: "click->shadcn-phlexcomponents--dialog#open",
           "shadcn-phlexcomponents--dialog-target": "trigger",
-          as_child: @as_child.to_s
+          as_child: @as_child.to_s,
         },
       }
     end
@@ -47,4 +47,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/dropdown_menu.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class DropdownMenu < Base
-    STYLES = "inline-block".freeze
+    STYLES = "inline-block"
 
     def initialize(side: :bottom, aria_id: "dropdown-menu-#{SecureRandom.hex(5)}", **attributes)
       @side = side
@@ -16,7 +16,7 @@ module ShadcnPhlexcomponents
 
     def content(**attributes, &)
       DropdownMenuContent(aria_id: @aria_id, side: @side, **attributes, &)
-    end 
+    end
 
     def label(**attributes, &)
       DropdownMenuLabel(**attributes, &)
@@ -38,8 +38,8 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "shadcn-phlexcomponents--dropdown-menu",
-          side: @side
-        }
+          side: @side,
+        },
       }
     end
 
@@ -47,4 +47,4 @@ module ShadcnPhlexcomponents
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dropdown_menu_content.rb

@@ -2,14 +2,14 @@
 
 module ShadcnPhlexcomponents
   class DropdownMenuContent < Base
-    STYLES = <<~HEREDOC.freeze
+    STYLES = <<~HEREDOC
       z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1
       text-popover-foreground shadow-md outline-none
       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-[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
     HEREDOC
 
@@ -20,7 +20,10 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(class: "hidden fixed top-0 left-0 w-max z-50", data: { "shadcn-phlexcomponents--dropdown-menu-target": "contentWrapper" }) do
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { "shadcn-phlexcomponents--dropdown-menu-target": "contentWrapper" },
+      ) do
         div(**@attributes, &)
       end
     end
@@ -32,7 +35,7 @@ module ShadcnPhlexcomponents
         role: "menu",
         aria: {
           labelledby: "#{@aria_id}-trigger",
-          orientation: "vertical"
+          orientation: "vertical",
         },
         data: {
           state: "closed",
@@ -42,8 +45,8 @@ module ShadcnPhlexcomponents
             keydown.up->shadcn-phlexcomponents--dropdown-menu#focusLastItem:prevent
             keydown.down->shadcn-phlexcomponents--dropdown-menu#focusFirstItem:prevent
           HEREDOC
-        }
+        },
       }
     end
   end
-end
+end

data/lib/components/dropdown_menu_item.rb

@@ -1,9 +1,8 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class DropdownMenuItem < Base
-    STYLES = <<~HEREDOC.freeze
+    STYLES = <<~HEREDOC
       relative flex cursor-default select-none items-center gap-2 rounded-sm px-2
       py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground
       data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0
@@ -26,7 +25,7 @@ module ShadcnPhlexcomponents
         merged_attributes = mix(@attributes, element_attributes)
         merged_attributes[:class] = styles
 
-        send(element.name, **merged_attributes) do        
+        send(element.name, **merged_attributes) do
           sanitize_as_child(element.children.to_s)
         end
       else
@@ -49,9 +48,9 @@ module ShadcnPhlexcomponents
             mouseover->shadcn-phlexcomponents--dropdown-menu#focusItem
             mouseout->shadcn-phlexcomponents--dropdown-menu#focusContent
           HEREDOC
-          "shadcn-phlexcomponents--dropdown-menu-target": "item"
-        }
+          "shadcn-phlexcomponents--dropdown-menu-target": "item",
+        },
       }
     end
   end
-end
+end

data/lib/components/dropdown_menu_item_to.rb

@@ -9,12 +9,15 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      @html_options, @options = @options, @name if block_given?
+      if block_given?
+        @html_options = @options
+        @options = @name
+      end
       @html_options ||= {}
       @disabled = @html_options[:disabled]
       @html_options = mix(default_attributes, @html_options)
       @html_options[:class] = TAILWIND_MERGER.merge("w-full #{default_styles} #{@html_options[:class]}")
-      
+
       if block_given?
         button_to(@options, @html_options, &)
       else
@@ -22,4 +25,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/dropdown_menu_label.rb

@@ -1,12 +1,11 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class DropdownMenuLabel < Base
-    STYLES = "px-2 py-1.5 text-sm font-semibold".freeze
+    STYLES = "px-2 py-1.5 text-sm font-semibold"
 
     def view_template(&)
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dropdown_menu_separator.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
-module ShadcnPhlexcomponents
 
+module ShadcnPhlexcomponents
   class DropdownMenuSeparator < Base
-    STYLES = "-mx-1 my-1 h-px bg-muted".freeze
+    STYLES = "-mx-1 my-1 h-px bg-muted"
 
     def view_template(&)
       div(**@attributes, &)
@@ -12,9 +12,9 @@ module ShadcnPhlexcomponents
       {
         role: "separator",
         aria: {
-          orientation: "horizontal"
-        }
+          orientation: "horizontal",
+        },
       }
     end
   end
-end
+end

data/lib/components/dropdown_menu_trigger.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class DropdownMenuTrigger < Base
     def initialize(as_child: false, aria_id: nil, **attributes)
       @as_child = as_child
@@ -24,7 +23,7 @@ module ShadcnPhlexcomponents
           merged_attributes.delete(:role)
         end
 
-        send(element.name, **merged_attributes) do        
+        send(element.name, **merged_attributes) do
           sanitize_as_child(element.children.to_s)
         end
       else
@@ -39,20 +38,20 @@ module ShadcnPhlexcomponents
         aria: {
           haspopup: "menu",
           expanded: false,
-          controls: "#{@aria_id}-content"
+          controls: "#{@aria_id}-content",
         },
         data: {
           state: "closed",
           as_child: @as_child.to_s,
           action: <<~HEREDOC,
-          click->shadcn-phlexcomponents--dropdown-menu#toggle
-          keydown.space->shadcn-phlexcomponents--dropdown-menu#toggle
-          keydown.enter->shadcn-phlexcomponents--dropdown-menu#toggle
-          keydown.down->shadcn-phlexcomponents--dropdown-menu#toggle:prevent
+            click->shadcn-phlexcomponents--dropdown-menu#toggle
+            keydown.space->shadcn-phlexcomponents--dropdown-menu#toggle
+            keydown.enter->shadcn-phlexcomponents--dropdown-menu#toggle
+            keydown.down->shadcn-phlexcomponents--dropdown-menu#toggle:prevent
           HEREDOC
-          "shadcn-phlexcomponents--dropdown-menu-target": "trigger"
-        }
+          "shadcn-phlexcomponents--dropdown-menu-target": "trigger",
+        },
       }
     end
   end
-end
+end

data/lib/components/form.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Form < Base
+    include Phlex::Rails::Helpers::FormWith
+
+    def initialize(model: false, scope: nil, url: nil, format: nil, **options)
+      @model = model
+      @scope = scope
+      @url = url
+      @format = format
+      @options = options
+      @object_name = model ? model.to_model.model_name.param_key : nil
+    end
+
+    def field(method = nil, **attributes, &)
+      FormField(method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def submit(variant: :primary, **attributes, &) 
+      Button(variant: variant, type: :submit, **attributes) do
+        if block_given?
+          yield
+        else
+          submit_default_value
+        end
+      end
+    end
+
+    def view_template(&)
+      form_with(model: @model, scope: @scope, url: @url, format: @format, **@options) do
+        yield
+      end
+    end
+
+    def submit_default_value
+      object = @model ? @model.to_model : nil
+      key    = object ? (object.persisted? ? :update : :create) : :submit
+
+      model = if object.respond_to?(:model_name)
+        object.model_name.human
+      else
+        @object_name.to_s.humanize
+      end
+
+      defaults = []
+      # Object is a model and it is not overwritten by as and scope option.
+      if object.respond_to?(:model_name) && @object_name.to_s == model.downcase
+        defaults << :"helpers.submit.#{object.model_name.i18n_key}.#{key}"
+      else
+        defaults << :"helpers.submit.#{@object_name}.#{key}"
+      end
+      defaults << :"helpers.submit.#{key}"
+      defaults << "#{key.to_s.humanize} #{model}"
+
+      I18n.t(defaults.shift, model: model, default: defaults)
+    end
+  end
+end

data/lib/components/form_error.rb

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

data/lib/components/form_hint.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormHint < Base
+    STYLES = "text-[0.8rem] text-muted-foreground"
+
+    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 }
+    end
+  end
+end

data/lib/components/form_input.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormInput < Base
+    include FormHelpers
+
+    def initialize(
+      method = nil,
+      model: false,
+      object_name: nil,
+      type: :text,
+      value: nil,
+      name: nil,
+      id: nil,
+      label: nil,
+      error: nil,
+      hint: nil,
+      **attributes
+    )
+      @method = method
+      @model = model
+      @object_name = object_name
+      @type = type.to_sym
+      @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(&)
+        Input(type: @type, id: @id, name: @name, value: @value || @model_value, aria: aria_attributes, **@attributes)
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end