shadcn_phlexcomponents 0.1.5 → 0.1.11

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

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormRadioGroup < 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 = default_value(value, method)
+      @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 radio(**attributes)
+      @radio_attributes = attributes
+      nil
+    end
+
+    def radio_label(**attributes)
+      @radio_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(&)
+
+        RadioGroup(
+          name: @name,
+          id: @id,
+          value: @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 @radio_attributes
+              c.radio(**@radio_attributes)
+            end
+
+            if @radio_label_attributes
+              c.label(**@radio_label_attributes)
+            end
+          end
+        end
+
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

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

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormSelect < 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 = default_value(value, method)
+      @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 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(&)
+
+        Select(id: @id, name: @name, value: @value, aria: aria_attributes, **@attributes) do |s|
+          s.items(@collection, value_method: @value_method, text_method: @text_method, disabled_items: @disabled_items)
+        end
+
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

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

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormSlider < Base
+    include FormHelpers
+
+    def initialize(
+      method,
+      end_method = nil,
+      model: false,
+      object_name: nil,
+      range: false,
+      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
+      @range = range
+
+      if @range
+        @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
+      else
+        @value = default_value(value, method)
+        @error = default_error(error, method)
+      end
+
+      @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)
+        label_text = @range ? [@method, @end_method].to_sentence : @method
+        rails_label(@object_name, label_text, nil, **attrs)
+      end
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      @id ||= field_id(@object_name, @method)
+
+      if @name.blank?
+        @name =
+          if @range
+            [
+              field_name(@object_name, @method),
+              field_name(@object_name, @end_method),
+            ]
+          else
+            field_name(@object_name, @method)
+          end
+      end
+
+      div(class: "space-y-2", data: label_and_hint_container_attributes) do
+        render_label(&)
+        Slider(id: @id, name: @name, value: @value, aria: aria_attributes, range: @range, **@attributes)
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

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

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormSwitch < 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,
+        attributes[:class],
+      ].compact.join(" ")
+      attributes[:for] ||= @id
+      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
+        div(class: "flex items-center gap-2") do
+          Switch(
+            id: @id,
+            name: @name,
+            value: @value,
+            checked: @checked,
+            aria: aria_attributes,
+            disabled: @disabled,
+            **@attributes,
+          )
+          render_label(&)
+        end
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

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

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class FormTextarea < 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(&)
+
+        # Wrap textarea in div to ensure spacing is correct as there were instances where certain browser extensions
+        # injecting html before/after the textarea causing the spacing to go weird.
+        div do
+          Textarea(
+            type: @type,
+            id: @id,
+            name: @name,
+            value: @value,
+            aria: aria_attributes,
+            **@attributes,
+          )
+        end
+
+        render_hint(&)
+        render_error
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/form.rb

@@ -0,0 +1,157 @@
+# frozen_string_literal: true
+
+require_relative "form/form_helpers"
+require_relative "form/form_input"
+require_relative "form/form_hint"
+require_relative "form/form_error"
+require_relative "form/form_textarea"
+require_relative "form/form_checkbox"
+require_relative "form/form_switch"
+require_relative "form/form_checkbox_group"
+require_relative "form/form_date_picker"
+require_relative "form/form_date_range_picker"
+require_relative "form/form_select"
+require_relative "form/form_radio_group"
+require_relative "form/form_slider"
+
+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(method = nil, end_method = nil, **attributes, &)
+      FormDateRangePicker(method, end_method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def slider(method = nil, end_method = nil, **attributes, &)
+      FormSlider(method, end_method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def submit(value = nil, variant: :default, **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.respond_to?(:to_model) ? @model.to_model : nil
+      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

data/lib/shadcn_phlexcomponents/components/hover_card.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class HoverCard < Base
+    class_variants(base: "inline-block max-w-fit")
+
+    def initialize(open: false, **attributes)
+      @open = open
+      super(**attributes)
+    end
+
+    def content(**attributes, &)
+      HoverCardContent(**attributes, &)
+    end
+
+    def trigger(**attributes, &)
+      HoverCardTrigger(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "hover-card",
+          hover_card_is_open_value: @open.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class HoverCardTrigger < Base
+    def initialize(as_child: false, **attributes)
+      @as_child = as_child
+      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: @id,
+        role: "button",
+        data: {
+          as_child: @as_child.to_s,
+          hover_card_target: "trigger",
+          action: <<~HEREDOC,
+            focus->hover-card#open
+            blur->hover-card#close
+            click->hover-card#open
+          HEREDOC
+        },
+      }
+    end
+  end
+
+  class HoverCardContent < 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 w-64
+        origin-(--radix-popper-transform-origin) rounded-md border p-4 shadow-md outline-hidden
+      HEREDOC
+    )
+
+    def initialize(side: :bottom, align: :center, **attributes)
+      @side = side
+      @align = align
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { hover_card_target: "contentContainer" },
+      ) do
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        tabindex: -1,
+        data: {
+          side: @side,
+          align: @align,
+          hover_card_target: "content",
+          action: "mouseover->hover-card#open mouseout->hover-card#close",
+        },
+      }
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/input.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Input < Base
+    class_variants(
+      base: <<~HEREDOC,
+        file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
+        dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base
+        shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent
+        file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
+        focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
+      HEREDOC
+    )
+
+    def initialize(type: :text, **attributes)
+      @type = type
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        type: @type,
+      }
+    end
+
+    def view_template(&)
+      input(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/label.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Label < Base
+    class_variants(
+      base: <<~HEREDOC,
+        flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none
+        group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50
+      HEREDOC
+    )
+
+    def view_template(&)
+      label(**@attributes, &)
+    end
+  end
+end