quicksilver_ui 0.1.0

data/app/javascript/mixins/use_floating_ui.js

@@ -0,0 +1,104 @@
+/**
+ * useFloatingUI stimulus mixin
+ *
+ * Adds FloatingUI positioning capabilities to a Stimulus controller
+ * Requires the controller to have:
+ * - referenceElement (element to position relative to)
+ * - floatingElement (element to be positioned)
+ * - positioningOptions (FloatingUI options object)
+ */
+
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate
+} from "@floating-ui/dom"
+
+export const useFloatingUI = (controller, referenceElement, floatingElement, positioningOptions = {}, options = {}) => {
+  if (!referenceElement) {
+    throw new Error('useFloatingUI requires a referenceElement parameter')
+  }
+  if (!floatingElement) {
+    throw new Error('useFloatingUI requires a floatingElement parameter')
+  }
+
+  const {
+    autoUpdateOnShow = true
+  } = options
+
+  let finalPositioningOptions
+  if (Object.keys(positioningOptions).length === 0) {
+    finalPositioningOptions = {
+      placement: 'bottom-start',
+      middleware: [
+        offset(4),
+        flip(),
+        shift({ padding: 8 })
+      ]
+    }
+  } else {
+    finalPositioningOptions = positioningOptions
+  }
+
+  const originalDisconnect = controller.disconnect?.bind(controller) || (() => { })
+
+  const updatePosition = () => {
+    computePosition(
+      referenceElement,
+      floatingElement,
+      finalPositioningOptions
+    ).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(floatingElement.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      if (controller.onPositionUpdate) {
+        controller.onPositionUpdate({ x, y, placement, middlewareData })
+      }
+    })
+  }
+
+  const setupAutoUpdate = () => {
+    if (!autoUpdateOnShow) return
+
+    if (!controller.floatingUICleanup) {
+      controller.floatingUICleanup = autoUpdate(
+        referenceElement,
+        floatingElement,
+        updatePosition
+      )
+    }
+  }
+
+  const cleanupAutoUpdate = () => {
+    if (controller.floatingUICleanup) {
+      controller.floatingUICleanup()
+      controller.floatingUICleanup = null
+    }
+  }
+
+  const methodsToAdd = {
+    updatePosition,
+    setupAutoUpdate,
+    cleanupAutoUpdate,
+
+    disconnect() {
+      cleanupAutoUpdate()
+      originalDisconnect()
+    },
+
+    showWithPositioning() {
+      setupAutoUpdate()
+      updatePosition()
+    },
+
+    hideWithPositioning() {
+      cleanupAutoUpdate()
+    }
+  }
+
+  Object.assign(controller, methodsToAdd)
+}

data/app/views/form/base_tag.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class Form::BaseTag < UI::Base
+  ALLOWED_OPTIONS = [:readonly, :disabled, :name, :autofocus, :data].freeze
+
+  class << self
+    def allowed_options
+      ALLOWED_OPTIONS
+    end
+  end
+
+  prop :form, AppFormBuilder, reader: :private
+  prop :method, _Union(Symbol, String), reader: :private
+  prop :value, _Any?, reader: :private
+  prop :options, Hash, :**, reader: :private
+
+  def id
+    form.field_id(method)
+  end
+
+  def name
+    form.field_name(method)
+  end
+
+  def value
+    return @value if @value
+    return if form.object.blank?
+    return unless form.object.respond_to?(method)
+
+    form.object.public_send(method)
+  end
+
+  private
+
+  def options_with_defaults
+    options.with_defaults(default_options)
+  end
+
+  def default_options
+    {id:, name:, value:, data:}
+  end
+end

data/app/views/form/checkbox.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+class Form::Checkbox < Form::BaseTag
+  ALLOWED_OPTIONS = [:multiple, :checked, :include_hidden].freeze
+
+  class << self
+    def allowed_options
+      super + ALLOWED_OPTIONS
+    end
+  end
+
+  prop :multiple, _Boolean?, default: false, reader: :private
+  prop :include_hidden, _Union(_Boolean, String), default: true, reader: :private
+
+  def view_template
+    div do
+      input(type: :hidden, name:, value: hidden_value) if include_hidden
+
+      input(type: :checkbox, class: classes, **options_with_defaults, data:)
+    end
+  end
+
+  private
+
+  def type = :checkbox
+
+  def name
+    return "#{super}[]" if multiple?
+
+    super
+  end
+
+  def default_classes
+    "ui-form-checkbox"
+  end
+
+  def multiple?
+    multiple
+  end
+
+  def default_options
+    checked_value = if form.object&.respond_to?(method)
+      value == form.object.public_send(method)
+    else
+      false
+    end
+
+    super.merge(checked: checked_value)
+  end
+
+  def value
+    options[:value]
+  end
+
+  def include_hidden?
+    include_hidden.present?
+  end
+
+  def hidden_value
+    include_hidden || value
+  end
+end

data/app/views/form/date_field.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Form::DateField < Form::Input
+  def value
+    super&.to_date&.iso8601
+  end
+
+  private
+
+  def type = :date
+end

data/app/views/form/email_field.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Form::EmailField < Form::Input
+  private
+
+  def type = :email
+end

data/app/views/form/error.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Form::Error < Form::BaseTag
+  prop :text, _Nilable(String), reader: :private
+
+  def view_template
+    p(class: classes) { text }
+  end
+
+  private
+
+  def default_classes
+    "ui-form-error"
+  end
+end

data/app/views/form/file_field.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Form::FileField < Form::Input
+  private
+
+  def type = :file
+
+  def default_classes
+    "text-sm text-gray-900
+    file:mr-4 file:max-w-fit file:px-2 file:py-1 file:no-underline file:text-sm file:font-medium file:text-gray-950 file:border file:border-gray-900 file:hover:bg-gray-900 file:hover:text-white file:focus-visible:outline-2 file:focus-visible:outline-offset-2 file:focus-visible:outline-gray-900"
+  end
+end

data/app/views/form/group.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+class Form::Group < UI::Base
+  prop :form, AppFormBuilder, reader: :private
+  prop :method, _Union(Symbol, String), reader: :private
+  prop :type, _Union(:text), reader: :private
+  prop :options, Hash, :**, reader: :private
+
+  def view_template
+    div(class: classes, **data_attributes) do
+      render_field
+
+      div(class: "space-y-0.5") do
+        errors.each do |error|
+          render Form::Error.new(form:, method:, text: error, **error_options)
+        end
+
+        render Form::Hint.new(form:, method:, text: hint_text, **hint_options) if hint?
+      end
+    end
+  end
+
+  private
+
+  def label_text
+    options[:label]
+  end
+
+  def label_options
+    options[:label_options] || {}
+  end
+
+  def label?
+    label_text.present?
+  end
+
+  def input_options
+    options.slice(*input_class.allowed_options)
+  end
+
+  def error?
+    return false if form.object.blank?
+
+    form.object.errors.where(method).any?
+  end
+
+  def errors
+    return [] unless error?
+
+    form.object.errors.where(method).map(&:full_message)
+  end
+
+  def error_options
+    options[:error_options] || {}
+  end
+
+  def data_attributes
+    return {} unless error?
+
+    {data: {invalid: true}}
+  end
+
+  def hint_text
+    options[:hint]
+  end
+
+  def hint_options
+    options[:hint_options] || {}
+  end
+
+  def hint?
+    hint_text.present?
+  end
+
+  def default_classes
+    "space-y-1"
+  end
+
+  def input_class
+    case type
+    when :text then Form::TextField
+    else
+      raise "Type #{type} has no input_class. Add one."
+    end
+  end
+
+  def render_field
+    send("render_#{type}")
+  end
+
+  def render_text
+    div(class: "flex flex-col gap-1") do
+      render Form::Label.new(form:, method:, text: label_text, **label_options)
+      render Form::TextField.new(form:, method:, data:, **input_options)
+    end
+  end
+end

data/app/views/form/hint.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Form::Hint < Form::BaseTag
+  prop :text, _Nilable(String), reader: :private
+
+  def view_template
+    p(class: classes) { text || method }
+  end
+
+  private
+
+  def default_classes
+    "ui-form-hint"
+  end
+end

data/app/views/form/input.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Form::Input < Form::BaseTag
+  def view_template
+    input(type:, class: classes, **options_with_defaults)
+  end
+
+  private
+
+  def default_classes = "ui-form-control"
+end

data/app/views/form/label.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Form::Label < Form::BaseTag
+  prop :text, _Nilable(String), reader: :private
+
+  def view_template
+    label(class: classes, **options_with_defaults) { text || method }
+  end
+
+  private
+
+  def default_classes
+    "ui-form-label"
+  end
+
+  def default_options
+    {for: id}
+  end
+end

data/app/views/form/password_field.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Form::PasswordField < Form::Input
+  private
+
+  def type = :password
+end

data/app/views/form/phone_field.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Form::PhoneField < Form::Input
+  private
+
+  def type = :tel
+end

data/app/views/form/radio_button.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class Form::RadioButton < Form::BaseTag
+  ALLOWED_OPTIONS = [:checked, :tag_value].freeze
+
+  class << self
+    def allowed_options
+      super + ALLOWED_OPTIONS
+    end
+  end
+
+  prop :tag_value, _Any, reader: :private
+
+  def view_template
+    input(type: :radio, class: classes, data:, **options_with_defaults)
+  end
+
+  private
+
+  def default_classes
+    "ui-form-radio"
+  end
+
+  def default_options
+    checked_value = if form.object&.respond_to?(method)
+      value == form.object.public_send(method)
+    else
+      false
+    end
+
+    super.merge(checked: checked_value)
+  end
+
+  def value
+    options[:value]
+  end
+end

data/app/views/form/search_field.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Form::SearchField < Form::Input
+  private
+
+  def type = :search
+end

data/app/views/form/select.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+class Form::Select < Form::BaseTag
+  prop :choices, Array, reader: :private
+  prop :selected, _Any?, predicate: :private, reader: :private
+  prop :include_blank, _Union(_Boolean, String), default: true, predicate: :private, reader: :private
+  prop :prompt, _String?, reader: :private
+  prop :disabled, _Any?, reader: :private
+  prop :include_hidden, _Boolean, default: true, predicate: :private, reader: :private
+  prop :html_options, Hash, default: {}.freeze, reader: :private
+
+  def view_template
+    input(type: :hidden, name:, value: "", autocomplete: "off") if include_hidden?
+    select(id:, name:, class: classes, **html_options) do
+      if prompt
+        option(value: "") { prompt }
+      elsif include_blank?
+        blank_text = include_blank.is_a?(String) ? include_blank : nil
+        option(value: "") { blank_text }
+      end
+      choices.each do |choice|
+        option(value: value_for(choice), selected: selected_for?(choice), disabled: disabled_for?(choice)) { text_for(choice) }
+      end
+    end
+  end
+
+  private
+
+  def default_classes = "ui-form-select"
+
+  def value_for(choice) = choice.last
+
+  def text_for(choice) = choice.first
+
+  def selected_for?(choice) = value_for(choice) == selected
+
+  def disabled_for?(choice)
+    return false unless disabled
+
+    if disabled.is_a?(Array)
+      disabled.include?(value_for(choice))
+    else
+      value_for(choice) == disabled
+    end
+  end
+end

data/app/views/form/text_field.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Form::TextField < Form::Input
+  private
+
+  def type = :text
+end

data/app/views/form/textarea.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class Form::Textarea < Form::Input
+  prop :rows, _Integer?, reader: :private
+  prop :autogrow, _Boolean, default: false, predicate: :private, reader: :private
+
+  def view_template
+    textarea(class: classes, **options_with_defaults) do
+      value
+    end
+  end
+
+  private
+
+  def default_classes = "ui-form-control"
+
+  def default_options
+    super.merge(rows:).tap do |opts|
+      if autogrow?
+        opts[:data] = (opts[:data] || {}).merge(
+          controller: "autogrow",
+          action: "input->autogrow#input"
+        )
+      end
+    end
+  end
+end

data/app/views/form/toggle.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Form::Toggle < Form::Checkbox
+  def view_template
+    label for: options[:id] || id, class: classes do
+      input(type: :hidden, name:, value: hidden_value) if include_hidden
+      input(type: :checkbox, class: "hidden", data:, **options_with_defaults)
+
+      div class: toggle_classes do
+        render UI::Icon.new(name: :x_mark, size: :xs, class: "group-has-checked:hidden")
+        render UI::Icon.new(name: :check, size: :xs, class: "hidden group-has-checked:block")
+      end
+    end
+  end
+
+  private
+
+  def default_classes
+    "group relative shrink-0 h-4 w-8 block ring ring-gray-800 bg-gray-300
+    transition-colors has-disabled:bg-gray-100 has-disabled:ring-gray-300
+    hover:bg-gray-400 has-checked:bg-gray-900 has-checked:ring-gray-900
+    has-checked:hover:bg-gray-700 has-checked:hover:ring-gray-700
+    has-checked:has-disabled:hover:bg-gray-100
+    has-checked:has-disabled:hover:ring-gray-300"
+  end
+
+  def toggle_classes
+    "absolute inline-flex items-center justify-center size-4 ring ring-gray-800
+    bg-white transition-all group-has-checked:ring-gray-900
+    group-has-checked:translate-x-full group-has-disabled:ring-gray-300
+    group-has-disabled:bg-gray-200 group-has-checked:group-hover:ring-gray-700
+    group-has-disabled:text-gray-600
+    group-has-checked:group-has-disabled:group-hover:ring-gray-400"
+  end
+end

data/app/views/ui/accordion.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+class UI::Accordion < UI::Base
+  prop :content_class, _Nilable(String), reader: :private
+  prop :size, _Union("sm", "md", "lg"), default: :md, reader: :private do |value|
+    value.to_s.inquiry
+  end
+
+  def initialize(**props)
+    super
+    @items = []
+  end
+
+  def item(heading:, open: false, icon: nil, &block)
+    @items << {heading:, open:, icon:, block:}
+    nil
+  end
+
+  def view_template(&block)
+    vanish(&block) if block_given?
+
+    div(class: classes) do
+      @items.each do |item|
+        details(class: "group", open: item[:open]) do
+          summary(class: summary_classes) do
+            span(class: "inline-flex items-center gap-2") do
+              plain item[:heading]
+            end
+
+            div(class: "text-gray-900") do
+              render Icon(name: :chevron_down, variant: "outline", class: "size-3 block transition-all duration-300 group-open:rotate-180")
+            end
+          end
+          div(class: content_classes) do
+            item[:block].call
+          end
+        end
+      end
+    end
+  end
+
+  private
+
+  def default_classes
+    "max-w-lg divide-y divide-gray-200 bg-white rounded-lg"
+  end
+
+  def summary_classes
+    class_names(
+      "flex cursor-pointer list-none items-center justify-between text-primary-900",
+      "py-2 px-3 text-lg font-medium": size.lg?,
+      "py-1 px-2 text-sm": size.md?,
+      "py-1 px-1.5 text-sm": size.sm?
+    )
+  end
+
+  def content_classes
+    TAILWIND_MERGER.merge(
+      [class_names(
+        "text-gray-900",
+        "pb-4 px-3": size.lg?,
+        "pb-2 px-2 text-sm": size.md?,
+        "pb-1 px-1.5 text-xs": size.sm?
+      ), content_class].join(" ")
+    )
+  end
+end