Add support for a color input type (#410)

This renders as input type=color, and stores a 6 digit hex color with leading hash

assets/css/components.css

@@ -75,6 +75,10 @@
     @apply w-full px-3 py-2 bg-gray-50 text-sm border border-gray-200 rounded-lg placeholder-gray-400 text-gray-600;
   }
 
+  .input[type="color"] {
+    @apply py-0 w-16;
+  }
+
   .input--error {
     @apply bg-red-50 border-red-600 text-red-600;
   }

lib/livebook/notebook/cell/input.ex

@@ -67,6 +67,14 @@ defmodule Livebook.Notebook.Cell.Input do
     end
   end
 
+  defp validate_value(value, :color) do
+    if Utils.valid_hex_color?(value) do
+      :ok
+    else
+      {:error, "not a valid hex color"}
+    end
+  end
+
   @doc """
   Checks if the input changed in terms of content.
   """

lib/livebook/users/user.ex

@@ -63,7 +63,7 @@ defmodule Livebook.Users.User do
   defp change_name({user, errors}, _attrs), do: {user, errors}
 
   defp change_hex_color({user, errors}, %{"hex_color" => hex_color}) do
-    if hex_color_valid?(hex_color) do
+    if Utils.valid_hex_color?(hex_color) do
       {%{user | hex_color: hex_color}, errors}
     else
       {user, [{:hex_color, "not a valid color"} | errors]}
@@ -72,8 +72,6 @@ defmodule Livebook.Users.User do
 
   defp change_hex_color({user, errors}, _attrs), do: {user, errors}
 
-  defp hex_color_valid?(hex_color), do: hex_color =~ ~r/^#[0-9a-fA-F]{6}$/
-
   @doc """
   Returns a random hex color for a user.
 

lib/livebook/utils.ex

@@ -115,4 +115,24 @@ defmodule Livebook.Utils do
     uri = URI.parse(url)
     uri.scheme != nil and uri.host != nil and uri.host =~ "."
   end
+
+  @doc """
+  Validates if the given hex color is the correct format
+
+  ## Examples
+
+    iex> Livebook.Utils.valid_hex_color?("#111111")
+    true
+
+    iex> Livebook.Utils.valid_hex_color?("#ABC123")
+    true
+
+    iex> Livebook.Utils.valid_hex_color?("ABCDEF")
+    false
+
+    iex> Livebook.Utils.valid_hex_color?("#111")
+    false
+  """
+  @spec valid_hex_color?(String.t()) :: boolean()
+  def valid_hex_color?(hex_color), do: hex_color =~ ~r/^#[0-9a-fA-F]{6}$/
 end

lib/livebook_web/live/session_live/cell_component.ex

@@ -200,7 +200,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
               spellcheck="false"
               tabindex="-1"><%= [?\n, @cell_view.value] %></textarea>
           <% else %>
-            <input type="<%= if(@cell_view.input_type == :password, do: "password", else: "text") %>"
+            <input type="<%= html_input_type(@cell_view.input_type) %>"
               data-element="input"
               class="input <%= if(@cell_view.error, do: "input--error") %>"
               name="value"
@@ -440,4 +440,9 @@ defmodule LivebookWeb.SessionLive.CellComponent do
   end
 
   defp evaluated_label(_time_ms), do: nil
+
+  defp html_input_type(:password), do: "password"
+  defp html_input_type(:number), do: "number"
+  defp html_input_type(:color), do: "color"
+  defp html_input_type(_), do: "text"
 end

lib/livebook_web/live/session_live/input_cell_settings_component.ex

@@ -28,7 +28,7 @@ defmodule LivebookWeb.SessionLive.InputCellSettingsComponent do
         <div class="flex flex-col space-y-6">
           <div>
             <div class="input-label">Type</div>
-            <%= render_select("type", [number: "Number", password: "Password", text: "Text", textarea: "Textarea", url: "URL"], @type) %>
+            <%= render_select("type", input_types(), @type) %>
           </div>
           <div>
             <div class="input-label">Name</div>
@@ -69,4 +69,15 @@ defmodule LivebookWeb.SessionLive.InputCellSettingsComponent do
 
     %{name: name, type: type, reactive: reactive}
   end
+
+  defp input_types do
+    [
+      color: "Color",
+      number: "Number",
+      password: "Password",
+      text: "Text",
+      textarea: "Textarea",
+      url: "URL"
+    ]
+  end
 end