Add a color picker

app/javascript/controllers/color_picker_controller.js

@@ -0,0 +1,17 @@
+import { TurboMountController } from "turbo-mount";
+
+export default class extends TurboMountController {
+  static targets = ["input", "mount"];
+
+  get componentProps() {
+    return {
+      ...this.propsValue,
+      onChange: this.onChange,
+    };
+  }
+
+  onChange = (color) => {
+    this.setComponentProps({...this.componentProps, color });
+    this.inputTarget.value = color;
+  };
+}

app/javascript/turbo-mount-initializer.js

@@ -1,11 +1,14 @@
 import { TurboMount } from "turbo-mount";
 import { registerComponent } from "turbo-mount/react";
 import { Workbook } from "@fortune-sheet/react";
+import { HexColorPicker } from "react-colorful";
+import ColorPickerController from "controllers/color_picker_controller";
 
 const turboMount = new TurboMount();
 
 // to register a component use:
 registerComponent(turboMount, "Workbook", Workbook);
+registerComponent(turboMount, "ColorPicker", HexColorPicker, ColorPickerController);
 
 // to override the default controller use:
 // registerComponent(turboMount, "Hello", Hello, HelloController); // where HelloController is a Stimulus controller extended from TurboMountController

app/models/palette.rb

@@ -5,4 +5,12 @@ class Palette < ApplicationRecord
 
   validates :name, presence: true, uniqueness: true
   validates :colors, presence: true, length: { is: 5 }, uniqueness: true
+
+  after_initialize :set_colors
+
+  private
+
+  def set_colors
+    self.colors = Array.new(5) { '#' + SecureRandom.hex(3) } unless self.colors.present?
+  end
 end

app/views/palettes/_form.html.erb

@@ -1,7 +1,8 @@
 <%= form_with(model: palette, class: "contents bg-gradient-to-br from-yellow-200 via-pink-500 to-purple-400 p-5 border-4 border-dotted border-black") do |form| %>
   <% if palette.errors.any? %>
     <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
-      <h2 style="font-family: 'Comic Sans MS', cursive, sans-serif; color: blue;"><%= pluralize(palette.errors.count, "error") %> prohibited this palette from being saved:</h2>
+      <h2 style="font-family: 'Comic Sans MS', cursive, sans-serif; color: blue;"><%= pluralize(palette.errors.count, "error") %>
+        prohibited this palette from being saved:</h2>
 
       <ul>
         <% palette.errors.each do |error| %>
@@ -18,9 +19,16 @@
 
   <div class="my-5">
     <%= form.label :colors, style: "font-family: 'Comic Sans MS', cursive, sans-serif; color: orange;" %>
-    <div class="rounded-md overflow-hidden relative border border-orange-500 w-48">
-      <% 5.times do |i| %>
-        <%= form.text_field :colors, name: "palette[colors][]", value: palette.colors[i] || '#ffffff', type: :color, class: "block border-b border-orange-300 outline-none w-full" %>
+
+    <div>
+    <% 5.times do |i| %>
+        <div class="relative w-48 mb-2">
+          <%= turbo_mount("ColorPicker", props: { color: palette.colors[i] }) do |controller_name| %>
+            <div data-<%= controller_name %>-target="mount"></div>
+            <span class="absolute top-0 left-0 bg-gray-700/75 text-white p-1 rounded-tl-lg" style="font-family: 'Comic Sans MS', cursive, sans-serif; color: yellow;">Color <%= i + 1 %></span>
+            <%= form.hidden_field :colors, name: "palette[colors][]", value: palette.colors[i], data: { "#{controller_name}-target": "input" } %>
+        <% end %>
+        </div>
       <% end %>
     </div>
   </div>

app/views/palettes/index.html.erb

@@ -4,8 +4,6 @@
   <% end %>
 
   <div id="palettes" class="my-8 min-w-full gap-8 flex flex-wrap">
-    <% @palettes.each do |palette| %>
-      <%= render palette %>
-    <% end %>
+    <%= render @palettes %>
   </div>
 </div>

config/importmap.rb

@@ -30,3 +30,4 @@
 pin "turbo-mount", to: "turbo-mount.min.js"
 pin "turbo-mount-initializer"
 pin "turbo-mount/react", to: "turbo-mount/react.min.js"
+pin "react-colorful" # @5.6.1