shadcn_phlexcomponents 0.1.5 → 0.1.11

data/lib/shadcn_phlexcomponents/components/command.rb

@@ -0,0 +1,351 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Command < Base
+    class_variants(base: "inline-block max-w-fit")
+
+    MODIFIER_KEYS = [
+      :ctrl,
+      :alt,
+      :shift,
+    ]
+
+    def initialize(modifier_key: nil, shortcut_key: nil, search_path: nil, open: false, **attributes)
+      if modifier_key && !MODIFIER_KEYS.include?(modifier_key)
+        raise ArgumentError, "Expected one of #{MODIFIER_KEYS} for \"modifier_key\", got #{modifier_key}"
+      end
+
+      @open = open
+      @modifier_key = modifier_key
+      @shortcut_key = shortcut_key
+      @search_path = search_path
+      @aria_id = "command-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      CommandTrigger(modifier_key: @modifier_key, shortcut_key: @shortcut_key, aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      CommandContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def item(**attributes, &)
+      CommandItem(aria_id: @aria_id, **attributes, &)
+    end
+
+    def label(**attributes, &)
+      CommandLabel(**attributes, &)
+    end
+
+    def group(**attributes, &)
+      CommandGroup(aria_id: @aria_id, **attributes, &)
+    end
+
+    def empty(**attributes, &)
+      CommandEmpty(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "command",
+          modifier_key: @modifier_key,
+          shortcut_key: @shortcut_key,
+          search_path: @search_path,
+          command_is_open_value: @open.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class CommandTrigger < Base
+    def initialize(modifier_key: nil, shortcut_key: nil, aria_id: nil, **attributes)
+      @modifier_key = modifier_key
+      @shortcut_key = shortcut_key
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def class_variants(**args)
+      Button.new.class_variants(
+        variant: :secondary,
+        class: <<~HEREDOC,
+          bg-surface text-surface-foreground/60 dark:bg-card relative h-8 w-full justify-start pl-2.5 font-normal
+          shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64 #{args[:class]}
+        HEREDOC
+      )
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        aria: {
+          haspopup: "dialog",
+          expanded: "false",
+          controls: "#{@aria_id}-content",
+        },
+        data: {
+          action: "click->command#open",
+          command_target: "trigger",
+          as_child: @as_child.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      button(**@attributes) do
+        yield
+
+        if @modifier_key || @shortcut_key
+          span(class: "absolute top-1.5 right-1.5 hidden gap-1 sm:flex") do
+            if @modifier_key
+              CommandKbd(class: "capitalize", data: { command_target: "modifierKey" }) { @modifier_key }
+            end
+
+            if @shortcut_key
+              CommandKbd(class: "capitalize") { @shortcut_key }
+            end
+          end
+        end
+      end
+    end
+  end
+
+  class CommandContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-background bg-clip-padding dark:bg-neutral-900 dark:ring-neutral-800 data-[state=closed]:animate-out#{" "}
+        data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0
+        data-[state=open]:zoom-in-95 duration-200 fixed gap-4 grid left-[50%] max-w-[calc(100%-2rem)] p-2 pb-11 ring-4 ring-neutral-200/80
+        rounded-xl shadow-2xl sm:max-w-lg top-[50%] translate-x-[-50%] translate-y-[-50%] w-full z-50 pointer-events-auto
+      HEREDOC
+    )
+
+    def initialize(search_placeholder: "Search...", aria_id: nil, **attributes)
+      @search_placeholder = search_placeholder
+      @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: {
+          command_target: "content",
+          state: "closed",
+          action: <<~HEREDOC,
+            command:click:outside->command#close
+            keydown.up->command#highlightItem:prevent
+            keydown.down->command#highlightItem:prevent
+            keydown.enter->command#select
+          HEREDOC
+
+        },
+      }
+    end
+
+    def view_template(&)
+      @class = @attributes.delete(:class)
+
+      div(class: "#{@class} hidden", **@attributes) do
+        div(class: "text-popover-foreground flex h-full w-full flex-col overflow-hidden bg-transparent") do
+          div(class: "sr-only") do
+            h2(id: "#{@aria_id}-title") { @search_placeholder }
+            p(id: "#{@aria_id}-description") { "Search for a command to run..." }
+          end
+
+          label(
+            class: "sr-only",
+            id: "#{@aria_id}-search-label",
+            for: "#{@aria_id}-search",
+          ) { @search_placeholder }
+
+          div(class: "flex h-9 items-center gap-2 border px-3 bg-input/50 border-input rounded-md") do
+            icon("search", class: "size-4 shrink-0 opacity-50")
+
+            input(
+              class: "placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 text-sm
+              outline-hidden disabled:cursor-not-allowed disabled:opacity-50 h-9",
+              id: "#{@aria_id}-search",
+              placeholder: @search_placeholder,
+              type: :text,
+              autocomplete: "off",
+              autocorrect: "off",
+              role: "combobox",
+              spellcheck: "false",
+              aria: {
+                autocomplete: "list",
+                expanded: "false",
+                controls: "#{@aria_id}-list",
+                labelledby: "#{@aria_id}-search-label",
+              },
+              data: {
+                command_target: "searchInput",
+                action: "input->command#search",
+              },
+            )
+          end
+
+          div(class: "p-1 max-h-80 min-h-80 overflow-y-auto", id: "#{@aria_id}-list", data: { command_target: "list" }) do
+            div(data: { command_target: "results" }, &)
+          end
+
+          CommandFooter()
+        end
+      end
+    end
+  end
+
+  class CommandItem < Base
+    class_variants(
+      base: <<~HEREDOC,
+        data-[highlighted=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex
+        cursor-default items-center gap-2 px-3 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none
+        data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+        data-[highlighted=true]:border-input data-[highlighted=true]:bg-input/50 h-9 rounded-md border border-transparent
+        font-medium
+      HEREDOC
+    )
+
+    def initialize(value: nil, aria_id: nil, **attributes)
+      @value = value
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        role: "option",
+        tabindex: -1,
+        aria: {
+          labelledby: @aria_labelledby,
+        },
+        data: {
+          highlighted: "false",
+          disabled: @disabled,
+          value: @value,
+          action: <<~HEREDOC,
+            click->command#select
+            mouseover->command#highlightItem
+          HEREDOC
+          command_target: "item",
+        },
+      }
+    end
+  end
+
+  class CommandLabel < Base
+    class_variants(base: "text-muted-foreground text-xs p-3 pb-1 text-xs font-medium")
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          command_target: "label",
+        },
+      }
+    end
+  end
+
+  class CommandGroup < Base
+    class_variants(base: "scroll-mt-16")
+
+    def initialize(aria_id:, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        role: "group",
+        aria: {
+          labelledby: "#{@aria_id}-group-#{SecureRandom.hex(5)}",
+        },
+        data: {
+          command_target: "group",
+        },
+      }
+    end
+  end
+
+  class CommandEmpty < Base
+    class_variants(base: "py-6 text-center text-sm hidden")
+
+    def default_attributes
+      {
+        role: "presentation",
+        data: { command_target: "empty" },
+      }
+    end
+
+    def view_template(&)
+      if block_given?
+        div(**@attributes, &)
+      else
+        div(**@attributes) { "No results found" }
+      end
+    end
+  end
+
+  class CommandKbd < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded
+        border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3
+      HEREDOC
+    )
+
+    def view_template(&)
+      kbd(**@attributes, &)
+    end
+  end
+
+  class CommandFooter < Base
+    class_variants(
+      base: <<~HEREDOC,
+        text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t#{" "}
+        border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800
+      HEREDOC
+    )
+
+    def view_template
+      div(**@attributes) do
+        div(class: "flex items-center gap-2") do
+          CommandKbd do
+            icon("corner-down-left")
+          end
+
+          plain("Go to Page")
+        end
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/date_picker.rb

@@ -0,0 +1,264 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DatePicker < Base
+    class_variants(base: "w-full")
+
+    class << self
+      button = Button.new
+
+      {
+        input_container: <<~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
+        input: <<~HEREDOC,
+          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#{" "}
+        HEREDOC
+        calendar: {
+          calendar: "relative flex flex-col outline-none",
+          controls: "absolute z-20 -left-1 -right-1 -top-1.5 flex justify-between items-center pt-1.5 px-1 pointer-events-none box-content",
+          grid: "grid gap-4 grid-cols-1 md:grid-cols-2",
+          column: "flex flex-col",
+          header: "relative flex items-center mb-4",
+          headerContent: "grid grid-flow-col gap-x-1 auto-cols-max items-center justify-center px-4 whitespace-pre-wrap grow",
+          month: button.class_variants(variant: :outline, size: :sm, class: "text-xs h-7 bg-transparent"),
+          year: button.class_variants(variant: :outline, size: :sm, class: "text-xs h-7 bg-transparent"),
+          arrowPrev: button.class_variants(variant: :outline, size: :icon, class: "pointer-events-auto size-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
+          arrowNext: button.class_variants(variant: :outline, size: :icon, class: "pointer-events-auto size-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
+          wrapper: "flex items-center content-center h-full",
+          content: "flex flex-col grow h-full",
+          months: "grid gap-2 grid-cols-4 items-center grow",
+          monthsMonth: button.class_variants(variant: :ghost, class: "aria-[selected=true]:text-primary-foreground aria-[selected=true]:bg-primary aria-[selected=true]:hover:text-primary-foreground aria-[selected=true]:hover:bg-primary"),
+          years: "grid gap-2 grid-cols-5 items-center grow",
+          yearsYear: button.class_variants(variant: :ghost, class: "aria-[selected=true]:text-primary-foreground aria-[selected=true]:bg-primary aria-[selected=true]:hover:text-primary-foreground aria-[selected=true]:hover:bg-primary"),
+          week: "grid mb-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center text-center",
+          weekDay: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+          weekNumbers: "vc-week-numbers",
+          weekNumbersTitle: "vc-week-numbers__title",
+          weekNumbersContent: "vc-week-numbers__content",
+          weekNumber: "vc-week-number",
+          dates: "grid gap-y-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center",
+          date: <<~HEREDOC,
+            vc-date data-[vc-date-selected]:[&_button]:bg-primary#{" "}
+            data-[vc-date-selected]:[&_button]:text-primary-foreground#{" "}
+            data-[vc-date-selected]:[&_button]:hover:bg-primary#{" "}
+            data-[vc-date-selected]:[&_button]:hover:text-primary-foreground#{" "}
+            data-[vc-date-selected]:[&_button]:focus:bg-primary#{" "}
+            data-[vc-date-selected]:[&_button]:focus:text-primary-foreground
+            data-[vc-date-today]:[&_button]:bg-accent
+            data-[vc-date-today]:[&_button]:text-accent-foreground
+            data-[vc-date-month=prev]:[&_button]:text-muted-foreground
+            data-[vc-date-month=next]:[&_button]:text-muted-foreground
+            data-[vc-date-selected='middle']:data-[vc-date-selected]:[&_button]:bg-accent
+            data-[vc-date-selected='middle']:data-[vc-date-selected]:[&_button]:text-accent-foreground
+            data-[vc-date-hover]:[&_button]:bg-accent data-[vc-date-hover]:[&_button]:text-accent-foreground
+          HEREDOC
+          dateBtn: button.class_variants(variant: :ghost, class: "size-8 p-0 font-normal aria-[disabled]:text-muted-foreground aria-[disabled]:opacity-50 aria-[disabled]:pointer-events-none"),
+          datePopup: "vc-date__popup",
+          dateRangeTooltip: "vc-date-range-tooltip",
+          time: "vc-time",
+          timeContent: "vc-time__content",
+          timeHour: "vc-time__hour",
+          timeMinute: "vc-time__minute",
+          timeKeeping: "vc-time__keeping",
+          timeRanges: "vc-time__ranges",
+          timeRange: "vc-time__range",
+        },
+      }
+    end
+
+    def initialize(
+      name: nil,
+      id: nil,
+      value: nil,
+      format: "DD/MM/YYYY",
+      select_only: false,
+      placeholder: nil,
+      disabled: false,
+      options: {},
+      mask: true,
+      **attributes
+    )
+      @name = name
+      @id = id
+      @value = value&.utc&.iso8601
+      @format = format
+      @select_only = select_only
+      @placeholder = placeholder
+      @disabled = disabled
+      @mask = mask
+      @aria_id = "date-picker-#{SecureRandom.hex(5)}"
+      @date_picker_styles = self.class.date_picker_styles
+      @options = options.merge(styles: @date_picker_styles[:calendar])
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "date-picker",
+          value: @value,
+          format: @format,
+          options: @options.to_json,
+          mask: @mask.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        input(
+          type: :hidden,
+          name: @name,
+          value: @value,
+          data: { date_picker_target: "hiddenInput" },
+        )
+
+        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
+          DatePickerTrigger(
+            disabled: @disabled,
+            aria_id: @aria_id,
+            select_only: @select_only,
+            id: @id,
+            placeholder: @placeholder,
+          )
+        else
+          div(class: @date_picker_styles[:input_container], data: { date_picker_target: "inputContainer", disabled: @disabled }) do
+            input(
+              id: @id,
+              placeholder: @placeholder || @format,
+              type: :text,
+              class: @date_picker_styles[:input],
+              disabled: @disabled,
+              data: {
+                date_picker_target: "input",
+                action: "input->date-picker#inputDate
+                          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
+
+  class DatePickerTrigger < Base
+    def initialize(
+      select_only: true,
+      placeholder: nil,
+      aria_id: nil,
+      **attributes
+    )
+      @select_only = select_only
+      @placeholder = placeholder
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def class_variants(**args)
+      if @select_only
+        Button.new.class_variants(variant: :outline, class: "justify-between w-full data-[placeholder]:data-[has-value=false]:text-muted-foreground #{args[:class]}")
+      else
+        Button.new.class_variants(variant: :ghost, size: :icon, class: "size-7 mr-1.5 disabled:!opacity-100 #{args[:class]}")
+      end
+    end
+
+    def view_template
+      if @select_only
+        button(type: :button, disabled: @disabled, **@attributes) do
+          span(class: "pointer-events-none", data: { "#{stimulus_controller_name}-target" => "triggerText" })
+
+          icon("calendar", class: "size-5")
+        end
+      else
+        button(type: :button, disabled: @disabled, **@attributes) do
+          icon("calendar", class: "size-5")
+        end
+      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
+
+  class DatePickerContent < Base
+    def initialize(side: :bottom, align: :start, aria_id: nil, **attributes)
+      @side = side
+      @align = align
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def class_variants(**args)
+      PopoverContent.new.class_variants(
+        class: <<~HEREDOC,
+          fixed left-1/2 top-1/2 shadow-lg -translate-x-1/2 -translate-y-1/2 pointer-events-auto w-max
+          md:relative md:left-[unset] md:top-[unset] md:shadow-md md:translate-x-[unset] md:translate-y-[unset] md:pointer-events-[unset]
+          #{args[:class]}
+        HEREDOC
+      )
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "dialog",
+        data: {
+          side: @side,
+          align: @align,
+          "#{stimulus_controller_name}-target" => "content",
+          action: "#{stimulus_controller_name}:click:outside->#{stimulus_controller_name}#clickOutside",
+        },
+      }
+    end
+
+    def stimulus_controller_name
+      "date-picker"
+    end
+
+    def view_template(&)
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { "#{stimulus_controller_name}-target" => "contentContainer" },
+      ) do
+        div(**@attributes) do
+          div(data: { "#{stimulus_controller_name}-target" => "calendar" })
+        end
+      end
+    end
+  end
+end