Merge pull request #50 from sgobotta/feature/migrate-to-phoenix-livev…

…iew-0.18.11

feature/migrate to phoenix liveview 0.18.11

.credo.exs

@@ -93,7 +93,7 @@
         # set this value to 0 (zero).
         #
         {Credo.Check.Design.TagTODO, [exit_status: 0]},
-        {Credo.Check.Design.TagFIXME, []},
+        {Credo.Check.Design.TagFIXME, [exit_status: 0]},
 
         #
         ## Readability Checks

.github/workflows/ci.yml

@@ -14,8 +14,8 @@ env:
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
   # General env
   MIX_ENV: test
-  ELIXIR_VERSION: 1.12.3
-  OTP_VERSION: 23.3
+  ELIXIR_VERSION: 1.14
+  OTP_VERSION: 25.2
   # Cloudinary env
   CLOUDEX_API_KEY: ${{ secrets.CLOUDEX_API_KEY }}
   CLOUDEX_CLOUD_NAME: ${{ secrets.CLOUDEX_CLOUD_NAME }}

.tool-versions

@@ -1,3 +1,3 @@
-erlang 23.3.4
-elixir 1.12.3-otp-23
+erlang 25.2.1
+elixir 1.14.3-otp-25
 nodejs 16.13.1

.vscode/css_custom_data.json

@@ -50,6 +50,16 @@
           "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
         }
       ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use @apply to inline any existing utility classes into your own custom CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
     }
   ]
 }

assets/css/base/base.css

@@ -15,6 +15,18 @@
     @apply focus:outline-gray-700 !important;
   }
 
+  .with-ring {
+    @apply focus:ring-inset focus:ring-4 focus:ring-sky-500 !important;
+  }
+
+  .with-ring-sm {
+    @apply focus:ring-inset focus:ring-2 focus:ring-sky-500 !important;
+  }
+
+  .with-ring.gray, .with-ring-sm.gray {
+    @apply focus:ring-gray-700 !important;
+  }
+
   .icon {
     @apply h-6 w-6;
   }

assets/css/components/buttons.css

@@ -7,12 +7,16 @@
     @apply shadow-button-sm translate-x-0 translate-y-0 transition duration-300 hover:shadow-button-sm hover:translate-x-0 hover:translate-y-0 active:translate-x-1 active:translate-y-1 active:shadow-button-xs;
   }
 
+  .pressable.action {
+    @apply rounded-lg bg-gray-100 p-1 !important;
+  }
+
   .close-modal-button {
-    @apply float-right w-8 h-8 rounded-full bg-gray-800 border-gray-800 hover:bg-gray-600 hover:border-gray-600 hover:shadow-button focus:bg-gray-400 focus:border-gray-400 text-2xl text-gray-100 text-center;
+    @apply float-right w-8 h-8 rounded-lg text-center text-2xl text-gray-700 bg-gray-100 hover:bg-gray-300 focus:bg-gray-300 active:bg-gray-200 transition duration-300;
   }
 
   .mini-cancel-button {
-    @apply float-right w-8 h-8 rounded-full bg-gray-800 border-gray-800 hover:bg-gray-600 hover:border-gray-600 hover:shadow-button focus:bg-gray-400 focus:border-gray-400 text-2xl text-gray-100 text-center;
+    @apply float-right w-8 h-8 rounded-lg text-2xl text-gray-700 text-center bg-gray-100 hover:bg-rose-300 focus:bg-rose-400 focus:text-gray-100 transition duration-300;
   }
 
   .pill-button {

assets/css/components/layout.css

@@ -1,6 +1,6 @@
 @layer components {
   .dashboard-container {
-    @apply p-4 mb-16;
+    @apply p-4 mb-28;
   }
 
   .l-centered {

assets/css/components/progress.css

@@ -1,23 +1,29 @@
-progress {
-  border-radius: 7px;
-  width: 100%;
-  height: 8px;
-  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
-}
-
-progress::-webkit-progress-bar {
-  background-color: lightgrey;
-  border-radius: 7px;
-}
-
-progress::-webkit-progress-value {
-  background-color: black;
-  border-radius: 12px;
-  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-::-moz-progress-bar {
-  background-color: black;
-  border-radius: 7px;
-  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
+@layer components {
+  progress {
+    @apply rounded-lg w-full h-2 shadow-lg;
+  }
+  progress {
+    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
+  }
+
+  progress::-webkit-progress-bar {
+    @apply bg-gray-300 rounded-lg;
+  }
+  progress::-webkit-progress-bar {
+    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
+  }
+
+  progress::-webkit-progress-value {
+    @apply bg-sky-500 rounded-lg shadow-lg;
+  }
+  progress::-webkit-progress-value {
+    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
+  }
+
+  ::-moz-progress-bar {
+    @apply bg-sky-500 rounded-lg shadow-lg;
+  }
+  ::-moz-progress-bar {
+    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
+  }
 }

config/dev.exs

@@ -62,8 +62,7 @@ config :ex_commerce, ExCommerceWeb.Endpoint,
 config :ex_commerce, ExCommerceWeb.Endpoint,
   live_reload: [
     patterns: [
-      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
-      ~r"priv/static/[^uploads].*(png|jpeg|jpg|gif|svg)$",
+      ~r"priv/static/.*(js|css)$",
       ~r"priv/gettext/.*(po)$",
       ~r"lib/ex_commerce_web/(live|views)/.*(ex)$",
       ~r"lib/ex_commerce_web/templates/.*(eex)$"

lib/ex_commerce/accounts.ex

@@ -225,7 +225,7 @@ defmodule ExCommerce.Accounts do
     |> Repo.transaction()
     |> case do
       {:ok, %{user: user}} -> {:ok, user}
-      {:error, :user, changeset, _} -> {:error, changeset}
+      {:error, :user, changeset, _changes} -> {:error, changeset}
     end
   end
 
@@ -392,7 +392,7 @@ defmodule ExCommerce.Accounts do
     |> Repo.transaction()
     |> case do
       {:ok, %{user: user}} -> {:ok, user}
-      {:error, :user, changeset, _} -> {:error, changeset}
+      {:error, :user, changeset, _changes} -> {:error, changeset}
     end
   end
 

lib/ex_commerce/marketplaces.ex

@@ -83,7 +83,7 @@ defmodule ExCommerce.Marketplaces do
       nil
 
   """
-  @spec get_shop_by_brand_slug(binary(), binary()) :: %Shop{} | nil
+  @spec get_shop_by_brand_slug(binary(), binary()) :: Shop.t() | nil
   def get_shop_by_brand_slug(brand_slug, shop_slug) do
     query =
       from shop in Shop,
@@ -206,7 +206,7 @@ defmodule ExCommerce.Marketplaces do
       nil
 
   """
-  @spec get_brand_by(atom(), any()) :: %Brand{} | nil
+  @spec get_brand_by(atom(), any()) :: Brand.t() | nil
   def get_brand_by(key, value) do
     Repo.get_by(Brand, [{key, value}])
   end

lib/ex_commerce/marketplaces/brand.ex

@@ -7,6 +7,8 @@ defmodule ExCommerce.Marketplaces.Brand do
 
   alias ExCommerce.{Accounts, Marketplaces, Offerings, Uploads}
 
+  @type t :: %__MODULE__{}
+
   @fields [:name, :slug]
 
   @primary_key {:id, :binary_id, autogenerate: true}

lib/ex_commerce/marketplaces/shop.ex

@@ -9,6 +9,8 @@ defmodule ExCommerce.Marketplaces.Shop do
   alias ExCommerce.Offerings.{Catalogue, Relations}
   alias ExCommerce.Uploads
 
+  @type t :: %__MODULE__{}
+
   @fields [
     :name,
     :slug,

lib/ex_commerce/release.ex

@@ -66,7 +66,18 @@ defmodule ExCommerce.Release do
 
   defp repos, do: Application.fetch_env!(@app, :ecto_repos)
 
-  defp load_app, do: Application.load(@app)
+  defp load_app do
+    case Application.load(@app) do
+      :ok ->
+        :ok
+
+      {:error, error} ->
+        :ok =
+          Logger.warn(
+            "Error while loading application error=#{inspect(error, pretty: true)}"
+          )
+    end
+  end
 
   defp eval_seed(repo, filename, app) do
     seeds_file = get_path(repo, filename, app)

lib/ex_commerce_numeric.ex

@@ -41,7 +41,7 @@ defmodule ExCommerceNumeric do
   @spec format_price(binary() | integer() | float() | Decimal.t(),
           round_places: integer()
         ) ::
-          %Decimal{}
+          Decimal.t()
   def format_price(value, opts \\ []) do
     [round_places: round_places] =
       _opts =

lib/ex_commerce_web.ex

@@ -40,6 +40,8 @@ defmodule ExCommerceWeb do
       # Include shared imports and aliases for views
       import PhoenixInlineSvg.Helpers
 
+      import Phoenix.Component
+
       unquote(view_helpers())
     end
   end
@@ -48,7 +50,7 @@ defmodule ExCommerceWeb do
     quote do
       @opts Keyword.merge(
               [
-                layout: {ExCommerceWeb.LayoutView, "live.html"},
+                layout: {ExCommerceWeb.LayoutView, :live},
                 container:
                   {:div,
                    class: "relative h-screen flex overflow-hidden bg-white"}

lib/ex_commerce_web/components/icon_component.ex

@@ -0,0 +1,19 @@
+defmodule ExCommerceWeb.Components.IconComponent do
+  @moduledoc """
+  Wrapper for the Heroicons library
+  """
+  use Phoenix.Component
+
+  attr :rest, :global,
+    doc: "the arbitrary HTML attributes for the svg container",
+    include: ~w(fill stroke stroke-width)
+
+  attr :name, :atom, required: true
+  attr :outline, :boolean, default: true
+  attr :solid, :boolean, default: false
+  attr :mini, :boolean, default: false
+
+  def render_icon(assigns) do
+    apply(Heroicons, assigns.name, [assigns])
+  end
+end

lib/ex_commerce_web/controllers/user_auth.ex

@@ -3,8 +3,9 @@ defmodule ExCommerceWeb.UserAuth do
   Controller for user authentication.
   """
   import ExCommerceWeb.Gettext
-  import Plug.Conn
+  import Phoenix.Component, only: [assign: 3, assign_new: 3]
   import Phoenix.Controller
+  import Plug.Conn, except: [assign: 3]
 
   alias ExCommerce.Accounts
   alias ExCommerceWeb.Router.Helpers, as: Routes
@@ -207,8 +208,8 @@ defmodule ExCommerceWeb.UserAuth do
       end
 
     conn
-    |> assign(:current_user, user)
-    |> assign(:visitor, visitor)
+    |> Plug.Conn.assign(:current_user, user)
+    |> Plug.Conn.assign(:visitor, visitor)
   end
 
   defp ensure_user_token(conn) do
@@ -276,20 +277,20 @@ defmodule ExCommerceWeb.UserAuth do
   @spec get_recaptcha_response_field :: String.t()
   def get_recaptcha_response_field, do: @recaptcha_response_field
 
-  defp assign_current_user(socket, nil) do
-    LiveView.assign_new(socket, :current_user, fn -> nil end)
-    |> LiveView.assign(:visitor, true)
+  defp assign_current_user(%LiveView.Socket{} = socket, nil) do
+    assign_new(socket, :current_user, fn -> nil end)
+    |> assign(:visitor, true)
   end
 
-  defp assign_current_user(socket, user_token) do
-    LiveView.assign_new(
+  defp assign_current_user(%LiveView.Socket{} = socket, user_token) do
+    assign_new(
       socket,
       :current_user,
       fn ->
         Accounts.get_user_by_session_token!(user_token)
       end
     )
-    |> LiveView.assign(:visitor, false)
+    |> assign(:visitor, false)
   end
 
   defp redirect_require_login(socket) do

lib/ex_commerce_web/live/admin_nav.ex

@@ -2,6 +2,7 @@ defmodule ExCommerceWeb.AdminNav do
   @moduledoc false
 
   import Phoenix.LiveView
+  import Phoenix.Component
 
   alias ExCommerceWeb.{
     BrandLive,

lib/ex_commerce_web/live/brand_live/index.ex

@@ -3,8 +3,7 @@ defmodule ExCommerceWeb.BrandLive.Index do
   Lists available brands
   """
   use ExCommerceWeb,
-      {:live_view,
-       layout: {ExCommerceWeb.LayoutView, "live_brands_dashboard.html"}}
+      {:live_view, layout: {ExCommerceWeb.LayoutView, :live_brands_dashboard}}
 
   alias ExCommerce.Accounts.User
   alias ExCommerce.Marketplaces

lib/ex_commerce_web/live/brand_live/show.ex

@@ -4,7 +4,7 @@ defmodule ExCommerceWeb.BrandLive.Show do
   """
   use ExCommerceWeb, {
     :live_view,
-    layout: {ExCommerceWeb.LayoutView, "live_main_dashboard.html"}
+    layout: {ExCommerceWeb.LayoutView, :live_main_dashboard}
   }
 
   @impl true

lib/ex_commerce_web/live/catalogue_category_live/index.ex

@@ -5,7 +5,7 @@ defmodule ExCommerceWeb.CatalogueCategoryLive.Index do
 
   use ExCommerceWeb, {
     :live_view,
-    layout: {ExCommerceWeb.LayoutView, "live_main_dashboard.html"}
+    layout: {ExCommerceWeb.LayoutView, :live_main_dashboard}
   }
 
   alias ExCommerce.Marketplaces.Brand