form_components 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8263e5728d9eb7435fc73aaaca11069d712a916f81dd78274ae6f64d962856da
+  data.tar.gz: 532ef72e4ae348a6c4e9efc0df796175a68a01b5daaa0757253ba83a1207a918
+SHA512:
+  metadata.gz: ba582fffbc42304b5e9f3b67ad99aad8ffaf0c0c1f7fa1a3a3e651fd2ae846b8812e55bbe9bf3e98684f945914072e0b6b2809672d27f3e9213a3a2556d9d8c5
+  data.tar.gz: 4ec8d95dcde0c417e7d8197b80461d60d97657fd7120a629d289223b02f5b7af661b057a46948cd3b789555afdc671e782f8fd13c996d66c67dab6d37db1bc5e

data/CHANGELOG.md

@@ -0,0 +1,29 @@
+# Changelog
+
+## Unreleased
+
+- Every helper takes Rails' arguments and renders Rails' own input, so
+  names, ids, values and options are Rails' (with `index:`, `namespace:`,
+  `fields_for`, a form without a record, …). Their extras (`label:`,
+  `description:`, …) aren't passed to Rails any more.
+- `label` is Rails' label: its block, its options and a hash as options, and
+  its text from `helpers.label`.
+- Collections show each item's text (`text_method`), not its value; they are a
+  fieldset with the label as its legend, and show the description and errors
+  once, not with every item.
+- `check_box` names an array attribute's field `[]` only with `multiple: true`,
+  as Rails; `password_field` leaves out the value, as Rails.
+- `telephone_field` and `phone_field`.
+- `select`, `collection_select`, `grouped_collection_select`,
+  `time_zone_select` and `weekday_select`, with a label, description and
+  errors; until now they were Rails' plain selects.
+- `combobox` (hotwire_combobox's) with a label, description and errors.
+- `rating_field` (stars) and `scale_field` (a row of numbers).
+- Check boxes have a size of their own, also in a collection, and a
+  collection's description is below its legend.
+- A dummy app (`test/dummy`), and tests comparing each helper with Rails'.
+
+## 0.1.0
+
+- A form builder whose fields are view components, with Stimulus controllers
+  for nested forms and the color field, and a Tailwind entry point.

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2026 Tom de Grunt
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,194 @@
+# Form components
+
+A form builder for Rails whose fields are view components (ViewComponent,
+Slim, Stimulus, Tailwind CSS v4), as a Rails engine: labels, text fields of
+every type, text areas, check boxes, radio buttons and their collections,
+color and file fields, a submit button and nested forms. Each field has its
+label (marked when the attribute is required), a description, and its errors.
+
+The fields are Rails' own: every helper takes the arguments Rails' form
+builder takes, and renders its input with Rails' helper, so names, ids,
+values, options, hidden fields and nested forms are exactly as with Rails.
+The components add their look and their extras around it. Helpers without a
+component (`select`, `hidden_field`, `range_field`, …) are Rails' as they are.
+
+## Installation
+
+In the Gemfile:
+
+```ruby
+gem "form_components", github: "entdec/form_components"
+```
+
+The engine adds its pins to the importmap. Register the controllers with the
+host's Stimulus application:
+
+```js
+import { registerFormComponents } from "form_components"
+registerFormComponents(window.Stimulus)
+```
+
+And include the styles in the host's Tailwind CSS (tailwindcss-rails v4), in
+`app/assets/tailwind/application.css`:
+
+```css
+@import "../builds/tailwind/form_components";
+```
+
+### What the host provides
+
+- A `primary` color in its Tailwind theme (`--color-primary-50` to `-950`).
+- The `@tailwindcss/forms` plugin (`@plugin "@tailwindcss/forms";`), which
+  draws a select's arrow and a checked check box's checkmark.
+- An `auto-dark` variant, for the components' dark mode, so the host decides
+  which pages have one. Follow the OS everywhere with:
+
+  ```css
+  @custom-variant auto-dark (@media (prefers-color-scheme: dark));
+  ```
+
+  or keep it off with `@custom-variant auto-dark (&:where(.never-dark, .never-dark *));`
+- [Font Awesome](https://fontawesome.com), for the icons (`fas`, `fal`).
+
+### Bundling with esbuild
+
+Instead of the importmap, a bundler resolves these imports to the gem:
+
+- `form_components` to `app/javascript/form_components/application.js`
+- `form_components/components/<name>/component_controller` to
+  `app/components/form_components/<name>/component_controller.js`
+- `form_components/jscolorpicker` to
+  `vendor/javascript/form_components/jscolorpicker/colorpicker.js`
+
+## Usage
+
+```slim
+= form_with model: @post, builder: FormComponents::FormBuilder do |f|
+  = f.text_field :title, placeholder: "A title", description: "Shown on top", leading_icon: "fas fa-heading"
+  = f.email_field :email, corner_hint: "Optional"
+  = f.text_area :body, label: false
+  = f.check_box :published
+  = f.collection_radio_buttons :kind, Kind.all, :id, :name, {description_method: :hint}, {class: "mine"}
+  = f.color_field :color, swatches: ["#e6007e", "#1e40af"], default: "#e6007e"
+  = f.file_field :logo, accept: "image/*", preview: @post.logo
+  = f.submit
+```
+
+### As the default form builder
+
+To use it without `builder:`, for the whole app, in `config/application.rb`:
+
+```ruby
+config.action_view.default_form_builder = "FormComponents::FormBuilder"
+```
+
+Or for a controller and its subclasses:
+
+```ruby
+class ApplicationController < ActionController::Base
+  default_form_builder FormComponents::FormBuilder
+end
+```
+
+App-wide, it's also the builder for engines' views that don't name one, so
+those forms change too; per controller, for engines' controllers that inherit
+from it. `builder:` still picks another builder for a form, like
+`ActionView::Helpers::FormBuilder` for Rails' own fields.
+
+### Fields
+
+Each helper takes Rails' arguments, and these extras in its options, which
+Rails doesn't get:
+
+- **Every field**: `label:` (a text, or false for none) and `description:`,
+  shown below it. A label is Rails' `label`, so its text comes from
+  `helpers.label.<model>.<attribute>` too.
+- **Text fields**: `text_field`, `password_field`, `search_field`,
+  `telephone_field` (`phone_field`), `date_field`, `time_field`,
+  `datetime_field`, `datetime_local_field`, `month_field`, `week_field`,
+  `url_field`, `email_field` and `number_field`, with `leading_icon:` and
+  `corner_hint:`. `text_area` (`textarea`) with `corner_hint:`.
+- **Check boxes and radio buttons**: `check_box` (`checkbox`), with its hidden
+  unchecked value, `multiple:` and the rest as Rails; `radio_button`.
+- **Collections**: `collection_check_boxes` and `collection_radio_buttons` in a
+  fieldset, with the label as its legend and the description and errors once;
+  `description_method:` (a method name or a proc, as `value_method`) gives each
+  item a description of its own. With a block, the block renders the items, as
+  with Rails.
+- **Selects**: `select`, `collection_select`, `grouped_collection_select`,
+  `time_zone_select` and `weekday_select`, as Rails'; the extras go in either
+  hash, `options` or `html_options`. The arrow is `@tailwindcss/forms`'.
+- **Combobox**: `combobox`, [hotwire_combobox](https://hotwirecombobox.com)'s,
+  when the host has that gem, with its arguments; our label replaces its own.
+- **Rating**: `rating_field` gives stars from 1 to `max:` (5), and
+  **scale**: `scale_field` a row of numbers, `in:` (1..5), with `min_label:`
+  and `max_label:` at its ends. Both are Rails' `collection_radio_buttons` of
+  their numbers, so they send a number, or an empty value when none is
+  picked, and need no JS.
+- **Color field**: a color as `#rrggbb`, picked with JS Color Picker by
+  Zygomatic (vendored, MIT), with `swatches:` to pick with one click and
+  `default:` shown while it's empty. Unlike Rails' `color_field` it is a text
+  field (Rails' `text_field`, so its name, id and options are Rails'), and it
+  can be cleared: empty stays empty, where Rails sends `#000000`, so it can
+  mean the default color.
+- **File field**: Rails' (which makes the form multipart), with `preview:`, an
+  Active Storage attachment to show above it.
+- **Submit**: Rails' `submit`, named after the record as Rails names it.
+
+A field with errors is wrapped as Rails wraps it
+(`ActionView::Base.field_error_proc`); in a component the wrapper takes no
+place (`.form-component .field_with_errors { display: contents }`).
+
+### Required fields
+
+A field's label is marked when its attribute has a presence validator. Pass
+the validation context to the form to count those `on:` it:
+
+```slim
+= form_with model: @post, builder: FormComponents::FormBuilder, validation_context: :publish do |f|
+```
+
+### Nested forms
+
+For a has_many association with `accepts_nested_attributes_for`:
+
+```slim
+= f.nested_form :sections do |nf|
+  - nf.with_item do |sf|
+    .section-wrapper data-new-record=sf.object.new_record?.to_s
+      = sf.hidden_field :_destroy
+      = sf.text_field :title
+      button type="button" data-action="form-components--nested-form#remove" Remove
+  - nf.with_add_button
+    button type="button" Add section
+```
+
+The add button adds a new item from a template, the remove button removes a
+new item, or hides a saved one and marks it to be destroyed. Options:
+`placeholder:` (the token replaced in the template, `NEW_SECTION`),
+`wrapper_selector:` (an item's wrapper, `.section-wrapper`), `new_record:`
+(the template's record, the association's `new`) and `add_label:` (for the
+default add button).
+
+## Development
+
+```sh
+bundle install
+bundle exec rake test
+bundle exec standardrb
+```
+
+The tests run in the dummy app (`test/dummy`), which shows every component on
+one page, and what its form sends:
+
+```sh
+cd test/dummy && bin/rails server
+```
+
+`test/form_builders/rails_parity_test.rb` renders each helper with Rails' own
+form builder and with this one, and compares their form controls.
+
+## License
+
+MIT, see MIT-LICENSE. JS Color Picker is MIT too, see
+`vendor/javascript/form_components/jscolorpicker/LICENSE`.

data/app/assets/stylesheets/form_components/application.css

@@ -0,0 +1,9 @@
+/* The components' styles (see app/assets/tailwind/form_components/engine.css) */
+@import "../../../components/form_components/color_field/component.css";
+
+/* Rails wraps a field with errors (ActionView::Base.field_error_proc, by
+   default a div.field_with_errors); in a component the wrapper takes no
+   place, so the field stays where the component's layout puts it */
+.form-component .field_with_errors {
+  display: contents;
+}

data/app/assets/tailwind/form_components/engine.css

@@ -0,0 +1,6 @@
+/* Entry point for tailwindcss-rails v4 (Tailwind CSS v4).
+   The host app includes it with: @import "../builds/tailwind/form_components";
+   In the components layer, so utility classes override the components' styles */
+@import "../../stylesheets/form_components/application.css" layer(components);
+
+@source "../../..";

data/app/components/form_components/base/component.rb

@@ -0,0 +1,76 @@
+module FormComponents
+  module Base
+    # A form builder's field as a component. The input itself is Rails': each
+    # component renders it with ActionView::Helpers::FormBuilder's own helper
+    # (rails), so names, ids, values and options are exactly Rails', and adds
+    # its extras around it. Its own options (extras) are taken out first.
+    class Component < ViewComponent::Base
+      include FormComponents::Validation
+
+      # Options of ours, not passed on to Rails
+      class_attribute :extras, default: []
+
+      attr_reader :form, :object, :method, :options
+
+      def initialize(form, object, method, options = {})
+        @form = form
+        @object = object
+        @method = method
+        @options = (options || {}).symbolize_keys
+      end
+
+      def self.option_reader(name, default = nil)
+        define_method(name) do
+          options.fetch(name, default)
+        end
+      end
+
+      # The options Rails gets
+      def html_options
+        options.except(*extras)
+      end
+
+      # The options Rails takes the id, index: and name from: the options,
+      # or html_options for helpers that have both, such as select
+      def id_options
+        html_options
+      end
+
+      # Renders a helper of Rails' own form builder, for this form
+      def rails(helper, *, **, &)
+        ActionView::Helpers::FormBuilder.instance_method(helper).bind_call(form, *, **, &)
+      end
+
+      # As Rails' label: helpers.label.<model>.<attribute>, else the
+      # attribute's human name, else the method humanized
+      def human_attribute_name
+        ActionView::Helpers::Tags::Translator.new(object, object_name.to_s, method.to_s, scope: "helpers.label").translate ||
+          method.to_s.humanize
+      end
+
+      def object_name
+        form.object_name
+      end
+
+      # The id Rails gives the input, also with index:, namespace: or a value
+      # (a radio button's, a check box's with multiple: true)
+      def tag_id(value = nil)
+        return id_options[:id] if id_options.key?(:id)
+
+        suffix = sanitized_value(value) unless value.nil?
+        form.field_id(method, *suffix, index: id_options.fetch(:index, form.options[:index]))
+      end
+
+      def name
+        form.field_name(method, index: id_options.fetch(:index, form.options[:index]))
+      end
+
+      private
+
+      # As Rails makes a value part of an id
+      def sanitized_value(value)
+        value.to_s.gsub(/[\s.]/, "_").gsub(/[^-[[:word:]]]/, "").downcase
+      end
+    end
+  end
+end

data/app/components/form_components/check_box/component.html.slim

@@ -0,0 +1,13 @@
+.form-component.flex.gap-3
+  .flex.h-6.shrink-0.items-center
+    .group.grid.size-4.grid-cols-1
+      = input
+  .text-sm/6
+    - if label != false
+      div.flex.justify-between
+        = field_label(input_id, value: (checked_value if html_options[:multiple]))
+    - if description.present?
+      label for=input_id class="text-gray-500 auto-dark:text-gray-400" id=input_id+"_description"
+        = description
+    - if has_error?
+      p id=input_id+"_error" class="mt-2 text-sm text-red-600 auto-dark:text-red-400" = all_errors.join(", ")

data/app/components/form_components/check_box/component.rb

@@ -0,0 +1,26 @@
+module FormComponents
+  module CheckBox
+    # Rails' check box, with its hidden unchecked value
+    class Component < FormComponents::Field::Component
+      CLASSES = "col-start-1 row-start-1 size-4 appearance-none rounded border border-gray-300 bg-white auto-dark:border-white/10 auto-dark:bg-white/5 checked:border-primary-600 checked:hover:bg-primary-600 checked:bg-primary-600 indeterminate:border-primary-600 indeterminate:bg-primary-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto hover:ring-primary-600 focus:ring-primary-600 checked:focus:bg-primary-600"
+
+      attr_reader :checked_value, :unchecked_value
+
+      # As Rails' check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+      def initialize(form, object, method, options = {}, checked_value = "1", unchecked_value = "0")
+        super(form, object, method, options)
+        @checked_value = checked_value
+        @unchecked_value = unchecked_value
+      end
+
+      def input
+        rails(:check_box, method, input_options(CLASSES, id: input_id), checked_value, unchecked_value)
+      end
+
+      # With multiple: true the value is part of the id, as Rails has it
+      def input_id
+        tag_id(html_options[:multiple] ? checked_value : nil)
+      end
+    end
+  end
+end

data/app/components/form_components/collection/component.html.slim

@@ -0,0 +1,10 @@
+fieldset.form-component aria-describedby=aria_described_by
+  - if label != false
+    legend class=legend_classes = legend
+  - if description.present?
+    p id=tag_id+"_description" class=class_names("text-sm/6 text-gray-500 auto-dark:text-gray-400", "mt-1" => label != false) = description
+  div class=class_names(items_classes, "mt-2" => label != false || description.present?)
+    = items
+  = after_items
+  - if has_error?
+    p id=tag_id+"_error" class="mt-2 text-sm text-red-600 auto-dark:text-red-400" = all_errors.join(", ")

data/app/components/form_components/collection/component.rb

@@ -0,0 +1,76 @@
+module FormComponents
+  module Collection
+    # Rails' collection_check_boxes or collection_radio_buttons in a fieldset,
+    # its label as the legend, with the description and errors once. Each
+    # item is Rails' check box or radio button and label, with the item's own
+    # description (description_method), unless a block renders the items, as
+    # with Rails.
+    class Component < FormComponents::Field::Component
+      self.extras = superclass.extras + %i[description_method]
+
+      # Of an item, as value_method and text_method: a method name or a proc
+      option_reader :description_method
+
+      attr_reader :collection, :value_method, :text_method, :item_html_options, :block
+
+      # As Rails' collection helpers: (method, collection, value_method, text_method, options = {}, html_options = {}, &block)
+      def initialize(form, object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)
+        super(form, object, method, options)
+        @collection = collection
+        @value_method = value_method
+        @text_method = text_method
+        @item_html_options = (html_options || {}).symbolize_keys
+        @block = block
+      end
+
+      def items
+        each_item = block || ->(builder) { item(builder) }
+        rails(helper, method, collection, value_method, text_method, html_options, item_html_options, &each_item)
+      end
+
+      def legend
+        safe_join([label.presence || human_attribute_name, (tag.span(class: "fas fa-asterisk fa-xs text-red-500 ml-1", aria: {hidden: true}) if required?)])
+      end
+
+      def legend_classes
+        FormComponents::Label::Component::CLASSES
+      end
+
+      def items_classes
+        "space-y-2"
+      end
+
+      # Shown below the items
+      def after_items
+      end
+
+      private
+
+      def item(builder)
+        id = tag_id(builder.value)
+        description = item_description(builder.object)
+        aria = {"aria-invalid" => aria_invalid}
+        aria["aria-describedby"] = "#{id}_description" if description.present?
+        input = builder.public_send(input_helper, aria.merge(class: helpers.class_names(input_classes, item_html_options[:class])))
+
+        tag.div(class: "relative flex items-start") do
+          safe_join([
+            tag.div(input, class: "flex h-6 items-center"),
+            tag.div(class: "ml-3 text-sm/6") do
+              safe_join([
+                builder.label(class: FormComponents::Label::Component::CLASSES),
+                (tag.label(description, for: id, id: "#{id}_description", class: "text-gray-500 auto-dark:text-gray-400") if description.present?)
+              ])
+            end
+          ])
+        end
+      end
+
+      def item_description(item)
+        return if description_method.blank?
+
+        description_method.respond_to?(:call) ? description_method.call(item) : item.public_send(description_method)
+      end
+    end
+  end
+end

data/app/components/form_components/collection_check_boxes/component.rb

@@ -0,0 +1,12 @@
+module FormComponents
+  module CollectionCheckBoxes
+    # Rails' collection_check_boxes, see Collection
+    class Component < FormComponents::Collection::Component
+      def helper = :collection_check_boxes
+
+      def input_helper = :check_box
+
+      def input_classes = FormComponents::CheckBox::Component::CLASSES
+    end
+  end
+end

data/app/components/form_components/collection_radio_buttons/component.rb

@@ -0,0 +1,12 @@
+module FormComponents
+  module CollectionRadioButtons
+    # Rails' collection_radio_buttons, see Collection
+    class Component < FormComponents::Collection::Component
+      def helper = :collection_radio_buttons
+
+      def input_helper = :radio_button
+
+      def input_classes = FormComponents::RadioButton::Component::CLASSES
+    end
+  end
+end

data/app/components/form_components/color_field/component.css

@@ -0,0 +1,69 @@
+@import "../../../../vendor/javascript/form_components/jscolorpicker/colorpicker.css";
+
+/* JS Color Picker's toggle, looking like the other form fields */
+.form-color-field {
+  --cp-size: 2.25rem;
+  --cp-border-color: var(--color-gray-300);
+  --cp-hover-color: var(--color-gray-400);
+
+  @variant auto-dark {
+    --cp-border-color: rgb(255 255 255 / 0.1);
+    --cp-hover-color: var(--color-gray-500);
+  }
+}
+
+.form-color-field .color-picker.cp_wide {
+  display: flex;
+  width: 100%;
+  border: 0;
+  border-radius: var(--radius-md);
+  outline: 1px solid var(--color-gray-300);
+  outline-offset: -1px;
+  background-color: white !important;
+
+  @variant auto-dark {
+    outline-color: rgb(255 255 255 / 0.1);
+    background-color: rgb(255 255 255 / 0.05) !important;
+  }
+}
+
+.form-color-field .color-picker.cp_wide:focus-visible {
+  outline: 2px solid var(--color-primary-600);
+}
+
+.form-color-field--error .color-picker.cp_wide {
+  outline-color: var(--color-red-300);
+}
+
+.form-color-field .cp_input {
+  font-size: var(--text-sm);
+  color: var(--color-gray-900);
+  background: transparent;
+  cursor: pointer;
+
+  @variant auto-dark {
+    color: white;
+  }
+}
+
+.form-color-field .cp_input::placeholder {
+  color: var(--color-gray-400);
+
+  @variant auto-dark {
+    color: var(--color-gray-500);
+  }
+}
+
+.form-color-field .cp_wide .cp_input + .cp_button {
+  border-left: 0;
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+}
+
+.form-color-field .cp_caret {
+  display: none;
+}
+
+/* Empty, with a default color: show that rather than a cross */
+.form-color-field--default .cp_button.cp_unset {
+  background: var(--color-field-default);
+}

data/app/components/form_components/color_field/component.html.slim

@@ -0,0 +1,8 @@
+.form-component
+  = field_label
+  .form-color-field.mt-2 class=class_names("form-color-field--error" => has_error?, "form-color-field--default" => default_color) style=(default_color && "--color-field-default: #{default_color}") data-controller="form-components--color-field" data-form-components--color-field-swatches-value=swatches.to_json
+    = input
+  - if description.present?
+    p id=tag_id+"_description" class="mt-2 text-sm text-gray-500 auto-dark:text-gray-400" = description
+  - if has_error?
+    p id=tag_id+"_error" class="mt-2 text-sm text-red-600 auto-dark:text-red-400" = all_errors.join(", ")

data/app/components/form_components/color_field/component.rb

@@ -0,0 +1,26 @@
+module FormComponents
+  module ColorField
+    # A color as "#rrggbb", picked with JS Color Picker (vendor/javascript/form_components/jscolorpicker).
+    #
+    # Unlike Rails' color_field, the input is a text field (Rails' text_field,
+    # so its name, id and options are Rails'), for the picker, and it can be
+    # cleared: an empty value stays empty, where Rails would send #000000, so
+    # leaving it empty can mean "the default color".
+    class Component < FormComponents::Field::Component
+      self.extras = superclass.extras + %i[swatches default]
+
+      # Colors to pick from with one click, like those of a logo
+      option_reader :swatches, []
+      # The color used while the field is empty, shown in it then
+      option_reader :default
+
+      def default_color
+        default if default.to_s.match?(/\A#\h{6}\z/)
+      end
+
+      def input
+        rails(:text_field, method, input_options(nil).merge(placeholder: default_color || html_options[:placeholder], data: (html_options[:data] || {}).merge("form-components--color-field-target": "input")).compact)
+      end
+    end
+  end
+end

data/app/components/form_components/color_field/component_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+import ColorPicker from "form_components/jscolorpicker"
+
+// Turns the text input into a JS Color Picker that fills in "#rrggbb", or nothing when cleared
+export default class extends Controller {
+  static targets = ["input"]
+  static values = { swatches: Array }
+
+  connect() {
+    this.picker = new ColorPicker(this.inputTarget, {
+      toggleStyle: "input",
+      enableAlpha: false,
+      formats: false,
+      defaultFormat: "hex",
+      swatches: this.swatchesValue.length > 0 ? this.swatchesValue : null,
+      showClearButton: true,
+      dialogPlacement: "bottom-start"
+    })
+  }
+
+  disconnect() {
+    this.picker?.destroy()
+    this.picker = null
+  }
+}

data/app/components/form_components/combobox/component.html.slim

@@ -0,0 +1,8 @@
+.form-component
+  = field_label
+  div.mt-2
+    = input
+  - if description.present?
+    p id=tag_id+"_description" class="mt-2 text-sm text-gray-500 auto-dark:text-gray-400" = description
+  - if has_error?
+    p id=tag_id+"_error" class="mt-2 text-sm text-red-600 auto-dark:text-red-400" = all_errors.join(", ")