From 66aee432d64eaa216dff400045187ae67780a189 Mon Sep 17 00:00:00 2001
From: Callum McIntyre <callum.mcintyre@procensus.com>
Date: Sun, 27 Jun 2021 16:58:43 +0100
Subject: [PATCH] Add support for a color input type

This renders as input type=color, and stores a 6 digit hex color with leading hash
---
 assets/css/components.css                     |  4 ++++
 lib/livebook/notebook/cell/input.ex           |  8 ++++++++
 lib/livebook/users/user.ex                    |  4 +---
 lib/livebook/utils.ex                         | 20 +++++++++++++++++++
 .../live/session_live/cell_component.ex       |  7 ++++++-
 .../input_cell_settings_component.ex          | 13 +++++++++++-
 6 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/assets/css/components.css b/assets/css/components.css
index ce5ba866be5..ce70db77c4a 100644
--- a/assets/css/components.css
+++ b/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;
   }
diff --git a/lib/livebook/notebook/cell/input.ex b/lib/livebook/notebook/cell/input.ex
index 86912a84c47..1161ab44854 100644
--- a/lib/livebook/notebook/cell/input.ex
+++ b/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.
   """
diff --git a/lib/livebook/users/user.ex b/lib/livebook/users/user.ex
index bb492b7d95b..0a206ddbb3d 100644
--- a/lib/livebook/users/user.ex
+++ b/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.
 
diff --git a/lib/livebook/utils.ex b/lib/livebook/utils.ex
index 00bc899660e..bafcce8f9f0 100644
--- a/lib/livebook/utils.ex
+++ b/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
diff --git a/lib/livebook_web/live/session_live/cell_component.ex b/lib/livebook_web/live/session_live/cell_component.ex
index 01aaf0fbd5f..cba276bdca1 100644
--- a/lib/livebook_web/live/session_live/cell_component.ex
+++ b/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
diff --git a/lib/livebook_web/live/session_live/input_cell_settings_component.ex b/lib/livebook_web/live/session_live/input_cell_settings_component.ex
index c629c2c2cce..d6327a9044f 100644
--- a/lib/livebook_web/live/session_live/input_cell_settings_component.ex
+++ b/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