shadcn_phlexcomponents 0.1.5 → 0.1.9

data/lib/shadcn_phlexcomponents/components/date_picker/date_picker.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DatePicker < Base
+    STYLES = "w-full"
+    CONTAINER_STYLES = <<~HEREDOC
+      flex rounded-md border border-input items-center shadow-sm outline-none
+      data-[focus=true]:ring-1 data-[focus=true]:ring-ring focus:ring-1 focus:ring-ring
+      data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50
+    HEREDOC
+    INPUT_STYLES = <<~HEREDOC
+      flex h-9 w-full bg-transparent px-3 py-1 text-base transition-colors placeholder:text-muted-foreground
+      focus-visible:outline-none grow md:text-sm
+    HEREDOC
+
+    def initialize(name: nil, id: nil, value: nil, format: "DD/MM/YYYY", select_only: false, placeholder: nil,
+      disabled: false, settings: {}, aria_id: "date-picker-#{SecureRandom.hex(5)}", **attributes)
+      @name = name
+      @id = id || @name
+      @value = value&.utc&.iso8601
+      @format = format
+      @select_only = select_only
+      @placeholder = placeholder
+      @disabled = disabled
+      @settings = settings
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "date-picker",
+          value: @value,
+          format: @format,
+          settings: @settings.to_json,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        input(
+          type: :hidden,
+          name: @name,
+          value: @value,
+          data: { "date-picker-target": "hiddenInput" },
+        )
+
+        if @select_only
+          DatePickerTrigger(
+            disabled: @disabled,
+            aria_id: @aria_id,
+            select_only: @select_only,
+            select_only_id: @id,
+            placeholder: @placeholder,
+          )
+        else
+          div(class: CONTAINER_STYLES, data: { "date-picker-target": "inputContainer", disabled: @disabled }) do
+            input(
+              id: @id,
+              placeholder: @placeholder || @format,
+              type: :text,
+              class: INPUT_STYLES,
+              disabled: @disabled,
+              data: {
+                "date-picker-target": "input",
+                action: "input->date-picker#changeDate
+                          blur->date-picker#inputBlur
+                          focus->date-picker#setContainerFocus",
+              },
+            )
+
+            DatePickerTrigger(
+              disabled: @disabled,
+              aria_id: @aria_id,
+              select_only: @select_only,
+              placeholder: @placeholder,
+            )
+          end
+        end
+
+        DatePickerContent(aria_id: @aria_id)
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/date_picker/date_picker_content.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DatePickerContent < Base
+    STYLES = <<~HEREDOC
+      z-51 bg-popover text-popover-foreground outline-none rounded-md min-w-[300px]
+      fixed left-[50%] top-[50%] shadow-lg grid translate-x-[-50%] translate-y-[-50%]#{" "}
+      md:relative md:left-[unset] md:top-[unset] md:shadow-md md:block md:translate-x-[unset] md:translate-y-[unset] md:min-w-auto
+      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
+      slide-in-from-top-2
+    HEREDOC
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-51",
+        data: { "#{stimulus_controller_name}-target" => "contentWrapper" },
+      ) do
+        div(**@attributes) do
+          div(data: { "#{stimulus_controller_name}-target" => "calendar" })
+        end
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "dialog",
+        data: {
+          "#{stimulus_controller_name}-target" => "content",
+        },
+      }
+    end
+
+    def stimulus_controller_name
+      "date-picker"
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/date_picker/date_picker_trigger.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DatePickerTrigger < Base
+    SELECT_ONLY_BUTTON_STYLES = <<~HEREDOC
+      flex h-9 items-center justify-between whitespace-nowrap rounded-md border
+      border-input bg-transparent px-3 py-2 gap-1.5 text-base md:text-sm shadow-sm ring-offset-background
+      data-[placeholder]:data-[has-value=false]:text-muted-foreground focus:outline-none focus:ring-1
+      focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
+      w-full cursor-pointer hover:bg-accent hover:text-accent-foreground disabled:hover:bg-transparent
+    HEREDOC
+
+    def initialize(disabled: false, select_only: true, placeholder: nil, select_only_id: nil, aria_id: nil,
+      **attributes)
+      @disabled = disabled
+      @select_only = select_only
+      @placeholder = placeholder
+      @select_only_id = select_only_id
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template
+      if @select_only
+        button(type: :button, disabled: @disabled, id: @select_only_id, **@attributes) do
+          span(class: "pointer-events-none", data: { "#{stimulus_controller_name}-target" => "triggerText" })
+
+          icon("calendar", class: "size-4 text-foreground")
+        end
+      else
+        button(type: :button, disabled: @disabled, **@attributes) do
+          icon("calendar")
+        end
+      end
+    end
+
+    def default_styles
+      if @select_only
+        SELECT_ONLY_BUTTON_STYLES
+      else
+        "#{Button.default_styles(variant: :ghost, size: :icon)} mr-1.25 h-7 w-8 disabled:!opacity-100"
+      end
+    end
+
+    def default_attributes
+      {
+        aria: {
+          haspopup: "dialog",
+          expanded: false,
+          controls: "#{@aria_id}-content",
+        },
+        data: {
+          placeholder: @placeholder,
+          action: "click->#{stimulus_controller_name}#toggle",
+          "#{stimulus_controller_name}-target" => "trigger",
+        },
+      }
+    end
+
+    def stimulus_controller_name
+      "date-picker"
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/date_range_picker/date_range_picker.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DateRangePicker < Base
+    def initialize(
+      start_date_name: nil,
+      end_date_name: nil,
+      id: nil,
+      start_date: nil,
+      end_date: nil,
+      format: "DD/MM/YYYY",
+      select_only: false,
+      placeholder: nil,
+      disabled: false,
+      settings: {},
+      aria_id: "date-range-picker-#{SecureRandom.hex(5)}",
+      **attributes
+    )
+      @start_date_name = start_date_name
+      @end_date_name = end_date_name
+      @id = id || start_date_name
+      @start_date = start_date&.utc&.iso8601
+      @end_date = end_date&.utc&.iso8601
+      @format = format
+      @select_only = select_only
+      @placeholder = placeholder
+      @disabled = disabled
+      @settings = settings
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_styles
+      DatePicker::STYLES
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "date-range-picker",
+          start_date: @start_date,
+          end_date: @end_date,
+          format: @format,
+          settings: @settings.to_json,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        input(
+          type: :hidden,
+          name: @start_date_name,
+          value: @start_date,
+          data: { "date-range-picker-target": "startDateHiddenInput" },
+        )
+
+        input(
+          type: :hidden,
+          name: @end_date_name,
+          value: @end_date,
+          data: { "date-range-picker-target": "endDateHiddenInput" },
+        )
+
+        if @select_only
+          DateRangePickerTrigger(
+            disabled: @disabled,
+            aria_id: @aria_id,
+            select_only: @select_only,
+            select_only_id: @id,
+            placeholder: @placeholder,
+          )
+        else
+          div(
+            class: DatePicker::CONTAINER_STYLES,
+            data: { "date-range-picker-target": "inputContainer", disabled: @disabled },
+          ) do
+            input(
+              id: @id,
+              placeholder: @placeholder || "#{@format} - #{@format}",
+              type: :text,
+              class: DatePicker::INPUT_STYLES,
+              disabled: @disabled,
+              data: {
+                "date-range-picker-target": "input",
+                action: "input->date-range-picker#changeDate
+                          blur->date-range-picker#inputBlur
+                          focus->date-range-picker#setContainerFocus",
+              },
+            )
+
+            DateRangePickerTrigger(
+              disabled: @disabled,
+              aria_id: @aria_id,
+              select_only: @select_only,
+              placeholder: @placeholder,
+            )
+          end
+        end
+
+        DateRangePickerContent(aria_id: @aria_id)
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/date_range_picker/date_range_picker_content.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DateRangePickerContent < DatePickerContent
+    def stimulus_controller_name
+      "date-range-picker"
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/date_range_picker/date_range_picker_trigger.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DateRangePickerTrigger < DatePickerTrigger
+    def stimulus_controller_name
+      "date-range-picker"
+    end
+  end
+end

data/lib/{components → shadcn_phlexcomponents/components/dialog}/dialog.rb

@@ -10,37 +10,37 @@ module ShadcnPhlexcomponents
     end
 
     def trigger(**attributes, &)
-      render(DialogTrigger.new(aria_id: @aria_id, **attributes, &))
+      DialogTrigger(aria_id: @aria_id, **attributes, &)
     end
 
     def content(**attributes, &)
-      render(DialogContent.new(aria_id: @aria_id, **attributes, &))
+      DialogContent(aria_id: @aria_id, **attributes, &)
     end
 
     def header(**attributes, &)
-      render(DialogHeader.new(**attributes, &))
+      DialogHeader(**attributes, &)
     end
 
     def title(**attributes, &)
-      render(DialogTitle.new(aria_id: @aria_id, **attributes, &))
+      DialogTitle(aria_id: @aria_id, **attributes, &)
     end
 
     def description(**attributes, &)
-      render(DialogDescription.new(aria_id: @aria_id, **attributes, &))
+      DialogDescription(aria_id: @aria_id, **attributes, &)
     end
 
     def footer(**attributes, &)
-      render(DialogFooter.new(**attributes, &))
+      DialogFooter(**attributes, &)
     end
 
     def close(**attributes, &)
-      render(DialogClose.new(**attributes, &))
+      DialogClose(**attributes, &)
     end
 
     def default_attributes
       {
         data: {
-          controller: "shadcn-phlexcomponents--dialog",
+          controller: "dialog",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/dialog}/dialog_close.rb

@@ -11,7 +11,7 @@ module ShadcnPhlexcomponents
       {
         role: "button",
         data: {
-          action: "click->shadcn-phlexcomponents--dialog#close",
+          action: "click->dialog#close",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/dialog}/dialog_content.rb

@@ -3,7 +3,7 @@
 module ShadcnPhlexcomponents
   class DialogContent < Base
     STYLES = <<~HEREDOC
-      fixed left-[50%] top-[50%] z-51 grid w-full max-w-lg translate-x-[-50%]
+      fixed left-[50%] top-[50%] z-51 grid w-full max-w-lg translate-x-[-50%] pointer-events-auto
       translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200
       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
@@ -33,7 +33,7 @@ module ShadcnPhlexcomponents
           labelledby: "#{@aria_id}-title",
         },
         data: {
-          "shadcn-phlexcomponents--dialog-target": "content",
+          "dialog-target": "content",
           state: "closed",
         },
       }
@@ -44,7 +44,7 @@ module ShadcnPhlexcomponents
       div(class: "#{@class} hidden", **@attributes) do
         yield
 
-        button(class: CLOSE_BUTTON_STYLES, data: { action: "click->shadcn-phlexcomponents--dialog#close" }) do
+        button(class: CLOSE_BUTTON_STYLES, data: { action: "click->dialog#close" }) do
           icon("x", class: "size-4")
           span(class: "sr-only") { "close" }
         end

data/lib/{components → shadcn_phlexcomponents/components/dialog}/dialog_trigger.rb

@@ -17,8 +17,8 @@ module ShadcnPhlexcomponents
           controls: "#{@aria_id}-content",
         },
         data: {
-          action: "click->shadcn-phlexcomponents--dialog#open",
-          "shadcn-phlexcomponents--dialog-target": "trigger",
+          action: "click->dialog#open",
+          "dialog-target": "trigger",
           as_child: @as_child.to_s,
         },
       }

data/lib/{components → shadcn_phlexcomponents/components/dropdown_menu}/dropdown_menu.rb

@@ -37,7 +37,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "shadcn-phlexcomponents--dropdown-menu",
+          controller: "dropdown-menu",
           side: @side,
         },
       }

data/lib/{components → shadcn_phlexcomponents/components/dropdown_menu}/dropdown_menu_content.rb

@@ -5,11 +5,11 @@ module ShadcnPhlexcomponents
     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=open]:animate-in pointer-events-auto
+      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
 
@@ -22,7 +22,7 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(
         class: "hidden fixed top-0 left-0 w-max z-50",
-        data: { "shadcn-phlexcomponents--dropdown-menu-target": "contentWrapper" },
+        data: { "dropdown-menu-target": "contentWrapper" },
       ) do
         div(**@attributes, &)
       end
@@ -40,10 +40,10 @@ module ShadcnPhlexcomponents
         data: {
           state: "closed",
           side: @side,
-          "shadcn-phlexcomponents--dropdown-menu-target": "content",
+          "dropdown-menu-target": "content",
           action: <<~HEREDOC,
-            keydown.up->shadcn-phlexcomponents--dropdown-menu#focusLastItem:prevent
-            keydown.down->shadcn-phlexcomponents--dropdown-menu#focusFirstItem:prevent
+            keydown.up->dropdown-menu#focusLastItem:prevent
+            keydown.down->dropdown-menu#focusFirstItem:prevent
           HEREDOC
         },
       }

data/lib/{components → shadcn_phlexcomponents/components/dropdown_menu}/dropdown_menu_item.rb

@@ -40,15 +40,15 @@ module ShadcnPhlexcomponents
         data: {
           disabled: @disabled,
           action: <<~HEREDOC,
-            click->shadcn-phlexcomponents--dropdown-menu#selectItem
-            keydown.up->shadcn-phlexcomponents--dropdown-menu#focusPrevItem:stop
-            keydown.down->shadcn-phlexcomponents--dropdown-menu#focusNextItem:stop
-            keydown.enter->shadcn-phlexcomponents--dropdown-menu#selectItem:prevent
-            keydown.space->shadcn-phlexcomponents--dropdown-menu#selectItem:prevent
-            mouseover->shadcn-phlexcomponents--dropdown-menu#focusItem
-            mouseout->shadcn-phlexcomponents--dropdown-menu#focusContent
+            click->dropdown-menu#selectItem
+            keydown.up->dropdown-menu#focusPrevItem:stop
+            keydown.down->dropdown-menu#focusNextItem:stop
+            keydown.enter->dropdown-menu#selectItem:prevent
+            keydown.space->dropdown-menu#selectItem:prevent
+            mouseover->dropdown-menu#focusItem
+            mouseout->dropdown-menu#focusContent
           HEREDOC
-          "shadcn-phlexcomponents--dropdown-menu-target": "item",
+          "dropdown-menu-target": "item",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/dropdown_menu}/dropdown_menu_trigger.rb

@@ -44,12 +44,12 @@ module ShadcnPhlexcomponents
           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->dropdown-menu#toggle
+            keydown.space->dropdown-menu#toggle
+            keydown.enter->dropdown-menu#toggle
+            keydown.down->dropdown-menu#toggle:prevent
           HEREDOC
-          "shadcn-phlexcomponents--dropdown-menu-target": "trigger",
+          "dropdown-menu-target": "trigger",
         },
       }
     end

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

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Form < Base
+    include Phlex::Rails::Helpers::FormWith
+
+    def initialize(model: false, scope: nil, url: nil, format: nil, loading: false, **options)
+      @model = model
+      @scope = scope
+      @url = url
+      @format = format
+      @options = options
+      @loading = loading
+      @object_name = model ? model.to_model.model_name.param_key : nil
+    end
+
+    def input(method = nil, **attributes, &)
+      FormInput(method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def textarea(method = nil, **attributes, &)
+      FormTextarea(method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def checkbox(method = nil, **attributes, &)
+      FormCheckbox(method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def switch(method = nil, **attributes, &)
+      FormSwitch(method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def checkbox_group(method = nil, collection = [], value_method:, text_method:, **attributes, &)
+      FormCheckboxGroup(
+        method,
+        model: @model,
+        object_name: @object_name,
+        collection: collection,
+        value_method: value_method,
+        text_method: text_method,
+        **attributes,
+        &
+      )
+    end
+
+    def radio_group(method = nil, collection = [], value_method:, text_method:, **attributes, &)
+      FormRadioGroup(
+        method,
+        model: @model,
+        object_name: @object_name,
+        collection: collection,
+        value_method: value_method,
+        text_method: text_method,
+        **attributes,
+        &
+      )
+    end
+
+    def select(method = nil, collection = [], value_method:, text_method:, **attributes, &)
+      FormSelect(
+        method,
+        model: @model,
+        object_name: @object_name,
+        collection: collection,
+        value_method: value_method,
+        text_method: text_method,
+        **attributes,
+        &
+      )
+    end
+
+    def date_picker(method = nil, **attributes, &)
+      FormDatePicker(method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def date_range_picker(start_date_method = nil, end_date_method = nil, **attributes, &)
+      FormDateRangePicker(start_date_method, end_date_method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def submit(value = nil, variant: :primary, **attributes, &)
+      if @loading
+        LoadingButton(variant: variant, type: :submit, **attributes) do
+          if block_given?
+            yield
+          else
+            value || submit_default_value
+          end
+        end
+      else
+        Button(variant: variant, type: :submit, **attributes) do
+          if block_given?
+            yield
+          else
+            value || submit_default_value
+          end
+        end
+      end
+    end
+
+    def view_template(&)
+      @form_class = @options[:class]
+      @options[:class] = "#{@options[:class]} #{"group" if @loading}"
+      # rubocop:disable Style/ExplicitBlockArgument
+      form_with(model: @model, scope: @scope, url: @url, format: @format, **@options) do
+        yield
+      end
+      # rubocop:enable Style/ExplicitBlockArgument
+    end
+
+    # Follows rails f.submit
+    # https://github.com/rails/rails/blob/3235827585d87661942c91bc81f64f56d710f0b2/actionview/lib/action_view/helpers/form_helper.rb#L2681-L2706
+    def submit_default_value
+      object = @model&.to_model
+      key    = if object
+        object.persisted? ? :update : :create
+      else
+        :submit
+      end
+
+      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.
+      defaults << if object.respond_to?(:model_name) && @object_name.to_s == model.downcase
+        :"helpers.submit.#{object.model_name.i18n_key}.#{key}"
+      else
+        :"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