shadcn_phlexcomponents 0.1.9 → 0.1.14

data/lib/shadcn_phlexcomponents/components/date_range_picker.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DateRangePicker < Base
+    class_variants(base: "w-full")
+
+    def initialize(
+      name: nil,
+      value: nil,
+      id: nil,
+      format: "DD/MM/YYYY",
+      select_only: false,
+      placeholder: nil,
+      disabled: false,
+      options: {},
+      mask: true,
+      **attributes
+    )
+      if name && !name.is_a?(Array)
+        raise ArgumentError, "Expected an array for \"name\", got #{name.class}"
+      end
+
+      if value && !value.is_a?(Array)
+        raise ArgumentError, "Expected an array for \"value\", got #{value.class}"
+      end
+
+      if value
+        value = value.map do |v|
+          if v.is_a?(String)
+            DateTime.parse(v) rescue nil
+          else
+            v
+          end
+        end 
+      end
+
+      @name = name ? name[0] : nil
+      @end_name = name ? name[1] : nil
+      @value = (value ? value[0] : nil)&.utc&.iso8601
+      @end_value = (value ? value[1] : nil)&.utc&.iso8601
+      @id = id
+      @format = format
+      @select_only = select_only
+      @placeholder = placeholder
+      @disabled = disabled
+      @mask = mask
+      @aria_id = "date-range-picker-#{SecureRandom.hex(5)}"
+      @options = options
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "date-range-picker",
+          value: @value,
+          end_value: @end_value,
+          format: @format,
+          options: @options.to_json,
+          mask: @mask.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        overlay('date-range-picker')
+
+        input(
+          type: :hidden,
+          name: @name,
+          value: @value,
+          data: { date_range_picker_target: "hiddenInput" },
+        )
+
+        input(
+          type: :hidden,
+          name: @end_name,
+          value: @end_value,
+          data: { date_range_picker_target: "endHiddenInput" },
+        )
+
+        if @select_only
+          # For select_only date picker, id is passed to button so that clicking on its
+          # label will trigger the popover to appear
+          DateRangePickerTrigger(
+            disabled: @disabled,
+            aria_id: @aria_id,
+            select_only: @select_only,
+            id: @id,
+            placeholder: @placeholder,
+          )
+        else
+          div(
+            class: <<~HEREDOC,
+              focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+              data-[focus=true]:border-ring data-[focus=true]:ring-ring/50 data-[focus=true]:ring-[3px]
+              data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 flex shadow-xs transition-[color,box-shadow]
+              rounded-md border bg-transparent dark:bg-input/30 border-input outline-none h-9 flex items-center
+              aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
+            HEREDOC
+            data: { date_range_picker_target: "inputContainer", disabled: @disabled },
+          ) do
+            input(
+              id: @id,
+              placeholder: @placeholder || "#{@format} - #{@format}",
+              type: :text,
+              class: "md:text-sm placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 text-base outline-none px-3 py-1",
+              disabled: @disabled,
+              data: {
+                date_range_picker_target: "input",
+                action: "input->date-range-picker#inputDate
+                          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
+
+  class DateRangePickerTrigger < DatePickerTrigger
+    def stimulus_controller_name
+      "date-range-picker"
+    end
+  end
+
+  class DateRangePickerContent < DatePickerContent
+    def stimulus_controller_name
+      "date-range-picker"
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/dialog.rb

@@ -0,0 +1,236 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Dialog < Base
+    class_variants(base: "inline-flex max-w-fit")
+
+    def initialize(open: false, **attributes)
+      @open = open
+      @aria_id = "dialog-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      DialogTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      DialogContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def header(**attributes, &)
+      DialogHeader(**attributes, &)
+    end
+
+    def title(**attributes, &)
+      DialogTitle(aria_id: @aria_id, **attributes, &)
+    end
+
+    def description(**attributes, &)
+      DialogDescription(aria_id: @aria_id, **attributes, &)
+    end
+
+    def footer(**attributes, &)
+      DialogFooter(**attributes, &)
+    end
+
+    def close(**attributes, &)
+      DialogClose(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "dialog",
+          dialog_is_open_value: @open.to_s
+        }
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        overlay("dialog")
+        
+        yield
+      end
+    end
+  end
+
+  class DialogTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        aria: {
+          haspopup: "dialog",
+          expanded: "false",
+          controls: "#{@aria_id}-content",
+        },
+        data: { 
+          as_child: @as_child.to_s,
+          dialog_target: "trigger",
+          action: "click->dialog#open"
+        },
+      }
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+        vanish(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+  end
+
+  class DialogContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)]
+        translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg
+        pointer-events-auto outline-none
+      HEREDOC
+    )
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "dialog",
+        aria: {
+          describedby: "#{@aria_id}-description",
+          labelledby: "#{@aria_id}-title",
+        },
+        data: {
+          state: "closed",
+          dialog_target: "content"
+        },
+      }
+    end
+
+    def view_template(&)
+      div(style: { display: "none" }, **@attributes) do
+        yield
+
+        button(
+          class: <<~HEREDOC,
+            ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground
+            absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2
+            focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none
+            [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+          HEREDOC
+          data: {
+            action: "click->dialog#close",
+          },
+        ) do
+          icon("x", class: "size-4")
+          span(class: "sr-only") { "close" }
+        end
+      end
+    end
+  end
+
+  class DialogHeader < Base
+    class_variants(base: "flex flex-col gap-2 text-center sm:text-left")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class DialogTitle < Base
+    class_variants(base: "text-lg leading-none font-semibold")
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-title",
+      }
+    end
+
+    def view_template(&)
+      h2(**@attributes, &)
+    end
+  end
+
+  class DialogDescription < Base
+    class_variants(base: "text-muted-foreground text-sm")
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-description",
+      }
+    end
+
+    def view_template(&)
+      p(**@attributes, &)
+    end
+  end
+
+  class DialogFooter < Base
+    class_variants(base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class DialogClose < Base
+    def initialize(as_child: false, **attributes)
+      @as_child = as_child
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        data: {
+          action: "click->dialog#close",
+        },
+      }
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+        vanish(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/dropdown_menu.rb

@@ -0,0 +1,283 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DropdownMenu < Base
+    class_variants(base: "inline-flex max-w-fit")
+
+    def initialize(open: false, **attributes)
+      @aria_id = "dropdown-menu-#{SecureRandom.hex(5)}"
+      @open = open
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      DropdownMenuTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      DropdownMenuContent(aria_id: @aria_id, side: @side, **attributes, &)
+    end
+
+    def label(**attributes, &)
+      DropdownMenuLabel(**attributes, &)
+    end
+
+    def item(**attributes, &)
+      DropdownMenuItem(**attributes, &)
+    end
+
+    def item_to(name = nil, options = nil, html_options = nil, &)
+      DropdownMenuItemTo(name, options, html_options, &)
+    end
+
+    def separator(**attributes, &)
+      DropdownMenuSeparator(**attributes, &)
+    end
+
+    def sub(**attributes, &)
+      DropdownMenuSub(aria_id: "#{@aria_id}-sub-#{SecureRandom.hex(5)}", **attributes, &)
+    end
+
+    def group(**attributes, &)
+      DropdownMenuGroup(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "dropdown-menu",
+          dropdown_menu_is_open_value: @open.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class DropdownMenuTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+        vanish(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-trigger",
+        role: "button",
+        aria: {
+          haspopup: "menu",
+          expanded: false,
+          controls: "#{@aria_id}-content",
+        },
+        data: {
+          state: "closed",
+          as_child: @as_child.to_s,
+          dropdown_menu_target: "trigger",
+          action: <<~HEREDOC,
+            click->dropdown-menu#toggle
+            keydown.down->dropdown-menu#open:prevent
+            keydown.space->dropdown-menu#open:prevent
+            keydown.enter->dropdown-menu#open:prevent
+          HEREDOC
+        },
+      }
+    end
+  end
+
+  class DropdownMenuContent < 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
+        max-h-(--radix-popper-available-height) min-w-[8rem] origin-(--radix-popper-transform-origin)
+        overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md pointer-events-auto outline-none
+      HEREDOC
+    )
+
+    def initialize(side: :bottom, align: :center, aria_id: nil, **attributes)
+      @side = side
+      @align = align
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
+        data: { dropdown_menu_target: "contentContainer" },
+      ) do
+        div(**@attributes, &)
+      end
+    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_target: "content",
+          action: <<~HEREDOC,
+            dropdown-menu:click:outside->dropdown-menu#clickOutside
+            keydown.up->dropdown-menu#focusItemByIndex:prevent:self
+            keydown.down->dropdown-menu#focusItemByIndex:prevent:self
+          HEREDOC
+        },
+      }
+    end
+  end
+
+  class DropdownMenuLabel < Base
+    class_variants(base: "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class DropdownMenuItem < Base
+    class_variants(
+      base: <<~HEREDOC,
+        focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive
+        data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20
+        data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive
+        [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2
+        rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none
+        data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0
+        [&_svg:not([class*='size-'])]:size-4
+      HEREDOC
+    )
+
+    def initialize(as_child: false, variant: :default, disabled: false, **attributes)
+      @variant = variant
+      @as_child = as_child
+      @disabled = disabled
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+        vanish(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        role: "menuitem",
+        tabindex: -1,
+        data: {
+          variant: @variant,
+          disabled: @disabled,
+          dropdown_menu_target: "item",
+          action: <<~HEREDOC,
+            click->dropdown-menu#select
+            mouseover->dropdown-menu#focusItem
+            keydown.up->dropdown-menu#focusItem:prevent
+            keydown.down->dropdown-menu#focusItem:prevent
+            focus->dropdown-menu#onItemFocus
+            blur->dropdown-menu#onItemBlur
+            keydown.enter->dropdown-menu#select:prevent
+            keydown.space->dropdown-menu#select:prevent
+            mouseout->dropdown-menu#focusContent
+          HEREDOC
+
+        },
+      }
+    end
+  end
+
+  class DropdownMenuItemTo < DropdownMenuItem
+    def initialize(name = nil, options = nil, html_options = nil)
+      @name = name
+      @options = options
+      @html_options = html_options
+    end
+
+    def class_variants(**args)
+      DropdownMenuItem.new.class_variants(class: "w-full #{args[:class]}")
+    end
+
+    def view_template(&)
+      if block_given?
+        @html_options = @options
+        @options = @name
+      end
+
+      @html_options ||= {}
+      @variant = @html_options.delete(:variant) || :default
+      @disabled = @html_options[:disabled]
+      merge_default_attributes({})
+      @html_options = mix(@attributes, @html_options)
+
+      if block_given?
+        button_to(@options, @html_options, &)
+      else
+        button_to(@name, @options, @html_options)
+      end
+    end
+  end
+
+  class DropdownMenuSeparator < Base
+    class_variants(base: "bg-border -mx-1 my-1 h-px")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        role: "separator",
+        aria: {
+          orientation: "horizontal",
+        },
+      }
+    end
+  end
+
+  class DropdownMenuGroup < Base
+    def default_attributes
+      { role: "group" }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end