Update to Phoenix v1.7

config/config.exs

@@ -74,9 +74,6 @@ config :tailwind,
     cd: Path.expand("../assets", __DIR__)
   ]
 
-config :icons,
-  collection: [Heroicons]
-
 config :atomic, Atomic.Scheduler,
   jobs: [
     # Runs every midnight:

lib/atomic_web.ex

@@ -45,7 +45,7 @@ defmodule AtomicWeb do
   def live_view do
     quote do
       use Phoenix.LiveView,
-        layout: {AtomicWeb.LayoutView, "live.html"}
+        layout: {AtomicWeb.LayoutView, :live}
 
       unquote(view_helpers())
     end
@@ -91,6 +91,7 @@ defmodule AtomicWeb do
 
       # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
       import Phoenix.LiveView.Helpers
+      import Phoenix.Component
       import AtomicWeb.LiveHelpers
 
       # Import basic rendering functionality (render, render_layout, etc)
@@ -102,7 +103,7 @@ defmodule AtomicWeb do
 
       alias Atomic.Uploaders
       alias AtomicWeb.Router.Helpers, as: Routes
-      alias Icons.Heroicons
+      alias Heroicons
     end
   end
 

lib/atomic_web/components/announcement.ex

@@ -2,46 +2,41 @@ defmodule AtomicWeb.Components.Announcement do
   @moduledoc false
   use AtomicWeb, :component
 
-  def render_announcement(
-        %{
-          announcement: announcement,
-          url: url
-        } = assigns
-      ) do
-    organization = announcement.organization
+  def render_announcement(assigns) do
+    assigns = assign(assigns, :organization, assigns.announcement.organization)
 
     ~H"""
-    <%= live_redirect to: url, class: "group" do %>
-      <li id={"announcement-#{announcement.id}"} class="relative border-b border-zinc-200 py-5 pr-6 pl-4 hover:bg-zinc-50 sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6">
+    <%= live_redirect to: @url, class: "group" do %>
+      <li id={"announcement-#{@announcement.id}"} class="relative border-b border-zinc-200 py-5 pr-6 pl-4 hover:bg-zinc-50 sm:py-6 sm:pl-6 lg:pl-8 xl:pl-6">
         <div>
           <h3 class="text-sm font-semibold text-zinc-800 hover:underline focus:outline-none">
-            <%= announcement.title %>
+            <%= @announcement.title %>
           </h3>
           <article class="line-clamp-3 mt-1 text-sm text-zinc-600">
-            <dd class="text-sm text-zinc-500"><%= maybe_slice_string(announcement.description, 250) %></dd>
+            <dd class="text-sm text-zinc-500"><%= maybe_slice_string(@announcement.description, 250) %></dd>
           </article>
         </div>
         <div class="mt-1 flex flex-shrink-0 justify-between">
           <div class="flex items-center">
-            <%= if organization.logo do %>
+            <%= if @organization.logo do %>
               <div class="relative mr-2 h-6 w-6 flex-shrink-0 rounded-full bg-white">
-                <img src={Uploaders.Logo.url({organization.logo, organization}, :original)} class="h-6 w-6 rounded-full object-center" />
+                <img src={Uploaders.Logo.url({@organization.logo, @organization}, :original)} class="h-6 w-6 rounded-full object-center" />
               </div>
             <% else %>
               <span class="mr-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-zinc-500">
                 <span class="text-xs font-medium leading-none text-white">
-                  <%= extract_initials(organization.name) %>
+                  <%= extract_initials(@organization.name) %>
                 </span>
               </span>
             <% end %>
             <p class="text-sm text-zinc-500">
-              <%= organization.name %>
+              <%= @organization.name %>
             </p>
           </div>
           <div class="flex">
-            <Heroicons.Solid.calendar class="h-5 w-5 text-zinc-500" />
+            <Heroicons.calendar solid class="h-5 w-5 text-zinc-500" />
             <p class="block pl-1.5 text-sm text-zinc-600">
-              <%= relative_datetime(announcement.publish_at) %>
+              <%= relative_datetime(@announcement.publish_at) %>
             </p>
           </div>
         </div>

lib/atomic_web/components/badges.ex

@@ -22,10 +22,12 @@ defmodule AtomicWeb.Components.Badges do
           "bg-purple-600"
       end
 
+    assigns = assign(assigns, :background, background)
+
     ~H"""
     <%= live_redirect to: @url, class: "relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5" do %>
       <div class="absolute flex flex-shrink-0 items-center justify-center">
-        <span class={"#{background} h-1.5 w-1.5 rounded-full"} aria-hidden="true"></span>
+        <span class={"#{@background} h-1.5 w-1.5 rounded-full"} aria-hidden="true"></span>
       </div>
       <div class="ml-3.5 text-sm font-medium text-gray-900">
         <%= render_slot(@inner_block) %>
@@ -35,7 +37,7 @@ defmodule AtomicWeb.Components.Badges do
   end
 
   def badge(assigns) do
-    assigns = assign_new(assigns, :color, fn -> :gray end)
+    assigns = assign(assigns, :color, fn -> :gray end)
 
     ~H"""
     <span class={"#{get_color_classes(@color)} inline-flex items-center rounded-full px-3 py-0.5 text-sm font-semibold"}>

lib/atomic_web/components/button.ex

@@ -6,7 +6,7 @@ defmodule AtomicWeb.Components.Button do
     ~H"""
     <div class="flex w-0 flex-1">
       <%= live_patch to: @url, class: "relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-medium hover:bg-zinc-50" do %>
-        <Heroicons.Solid.pencil class="h-5 w-5 text-zinc-400 1.5xl:mr-3" />
+        <Heroicons.pencil solid class="h-5 w-5 text-zinc-400 1.5xl:mr-3" />
         <p class="hidden lg:inline">Edit</p>
       <% end %>
     </div>
@@ -24,7 +24,7 @@ defmodule AtomicWeb.Components.Button do
           phx_value_id: @id,
           data: [confirm: "Are you sure?"]
         ) do %>
-          <Heroicons.Solid.trash class="h-5 w-5 text-zinc-400 1.5xl:mr-3" />
+          <Heroicons.trash solid class="h-5 w-5 text-zinc-400 1.5xl:mr-3" />
           <p class="hidden lg:inline">Delete</p>
         <% end %>
       </div>

lib/atomic_web/components/calendar.ex

@@ -61,7 +61,7 @@ defmodule AtomicWeb.Components.Calendar do
                 <%= live_patch to: "#{if @mode == "month" do @previous_month_path else @previous_week_path end}" do %>
                   <button type="button" class="flex items-center justify-center py-2 pr-4 pl-3 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
                     <span class="sr-only">Previous month</span>
-                    <Heroicons.Solid.chevron_left class="h-3 w-3 sm:h-5 sm:w-5" />
+                    <Heroicons.chevron_left solid class="h-3 w-3 sm:h-5 sm:w-5" />
                   </button>
                 <% end %>
                 <%= live_patch to: "#{if @mode == "month" do @present_month_path else @present_week_path end}" do %>
@@ -72,7 +72,7 @@ defmodule AtomicWeb.Components.Calendar do
                 <%= live_patch to: "#{if @mode == "month" do @next_month_path else @next_week_path end}" do %>
                   <button type="button" class="flex items-center justify-center py-2 pr-3 pl-4 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-500 focus:relative md:w-9 md:px-2">
                     <span class="sr-only">Next month</span>
-                    <Heroicons.Solid.chevron_right class="h-3 w-3 sm:h-5 sm:w-5" />
+                    <Heroicons.chevron_right solid class="h-3 w-3 sm:h-5 sm:w-5" />
                   </button>
                 <% end %>
               </div>
@@ -84,10 +84,10 @@ defmodule AtomicWeb.Components.Calendar do
                     else
                       gettext("Week view")
                     end %>
-                    <Heroicons.Solid.chevron_down class="ml-2 h-5 w-5 text-zinc-400" />
+                    <Heroicons.chevron_down solid class="ml-2 h-5 w-5 text-zinc-400" />
                   </a>
 
-                  <div :class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+                  <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
                     <div class="py-1" role="none">
                       <%= live_patch to: @current_week_path do %>
                         <button
@@ -132,10 +132,9 @@ defmodule AtomicWeb.Components.Calendar do
               <div class="relative ml-6 md:hidden">
                 <button type="button" @click="mode_view = !mode_view" class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
                   <span class="sr-only">Open menu</span>
-                  <Heroicons.Solid.dots_horizontal class="h-3 w-3 sm:h-5 sm:w-5" />
+                  <Heroicons.ellipsis_horizontal solid class="h-3 w-3 sm:h-5 sm:w-5" />
                 </button>
-
-                <div :class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                   <div class="py-1" role="none">
                     <%= live_patch to: "#{if @mode == "month" do @present_month_path else @present_week_path end}" do %>
                       <button type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">

lib/atomic_web/components/calendar/month.ex

@@ -53,7 +53,7 @@ defmodule AtomicWeb.Components.CalendarMonth do
                     Activity
                   </.badge_dot>
                   <time datetime={activity.start} class="flex items-center text-zinc-700">
-                    <Heroicons.Solid.clock class="mr-2 h-5 w-5 text-zinc-400" />
+                    <Heroicons.clock solid class="mr-2 h-5 w-5 text-zinc-400" />
                     <%= Calendar.strftime(activity.start, "%Hh%M") %>
                   </time>
                 </div>
@@ -85,17 +85,15 @@ defmodule AtomicWeb.Components.CalendarMonth do
       |> assign(:class, class)
       |> assign(:date, date)
       |> assign(:today?, today?)
+      |> assign(:weekday, weekday)
 
     ~H"""
     <div class={@class}>
-      <time
-        date-time={@date}
-        class={
-          "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if today? == 0 do
+      <time date-time={@date} class={
+          "ml-auto lg:ml-0 pr-2 lg:pr-0 #{if @today? == 0 do
             "flex h-6 w-6 items-center justify-center rounded-full bg-orange-400 font-semibold text-white shrink-0"
           end}"
-        }
-      >
+        }>
         <%= @text %>
       </time>
       <ol class="mt-3 w-full">
@@ -111,18 +109,18 @@ defmodule AtomicWeb.Components.CalendarMonth do
         <% end %>
       </ol>
     </div>
-    <%= live_patch to: build_path(@current_path, %{mode: "month", day: date_to_day(@date), month: date_to_month(@date), year: date_to_year(@date)}), class: "#{if @index == 0 do col_start(weekday) end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden" do %>
+    <%= live_patch to: build_path(@current_path, %{mode: "month", day: date_to_day(@date), month: date_to_month(@date), year: date_to_year(@date)}), class: "#{if @index == 0 do col_start(@weekday) end} min-h-[56px] flex w-full flex-col bg-white px-3 py-2 text-zinc-900 hover:bg-zinc-100 focus:z-10 lg:hidden" do %>
       <time
         date-time={@date}
         class={
           "ml-auto lg:ml-0 #{if current_from_params(@timezone, @params) == @date do
-            "ml-auto flex h-6 w-6 items-center justify-center rounded-full #{if today? == 0 do
+            "ml-auto flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
               "bg-orange-700"
             else
               "bg-zinc-900"
             end} text-white shirk-0"
           else
-            if today? == 0 do
+            if @today? == 0 do
               "text-orange-700"
             end
           end}"

lib/atomic_web/components/empty.ex

@@ -6,23 +6,18 @@ defmodule AtomicWeb.Components.Empty do
 
   alias Inflex
 
-  def empty_state(
-        %{
-          url: url,
-          placeholder: placeholder
-        } = assigns
-      ) do
+  def empty_state(assigns) do
     ~H"""
     <div class="text-center">
-      <Heroicons.Outline.plus_circle class="mx-auto h-12 w-12 text-zinc-400" />
-      <h3 class="mt-2 text-sm font-semibold text-zinc-900">No <%= plural(placeholder) %></h3>
-      <p class="mt-1 text-sm text-zinc-500">Get started by creating a new <%= placeholder %>.</p>
+      <Heroicons.plus_circle class="mx-auto h-12 w-12 text-zinc-400" />
+      <h3 class="mt-2 text-sm font-semibold text-zinc-900">No <%= plural(@placeholder) %></h3>
+      <p class="mt-1 text-sm text-zinc-500">Get started by creating a new <%= @placeholder %>.</p>
       <div class="mt-6">
-        <%= live_redirect to: url, class: "inline-flex items-center rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600" do %>
+        <%= live_redirect to: @url, class: "inline-flex items-center rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600" do %>
           <svg class="mr-1.5 -ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
           </svg>
-          New <%= placeholder %>
+          New <%= @placeholder %>
         <% end %>
       </div>
     </div>

lib/atomic_web/components/icon.ex

@@ -0,0 +1,19 @@
+defmodule AtomicWeb.Components.Icon do
+  @moduledoc """
+  A component for rendering an icon from the Heroicons package.
+  """
+  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(assigns) do
+    apply(Heroicons, assigns.name, [assigns])
+  end
+end

lib/atomic_web/components/notification.ex

@@ -6,10 +6,10 @@ defmodule AtomicWeb.Components.Notification do
 
   @impl true
   def render(assigns) do
-    notification_id = UUID.generate()
+    assigns = assign(assigns, :notification_id, UUID.generate())
 
     ~H"""
-    <div id={notification_id} x-init={"setTimeout(function() { document.getElementById('" <> notification_id <> "').remove(); }, 5000);"} class="flex w-full flex-col items-center space-y-4 sm:items-end">
+    <div id={@notification_id} x-init={"setTimeout(function() { document.getElementById('" <> @notification_id <> "').remove(); }, 5000);"} class="flex w-full flex-col items-center space-y-4 sm:items-end">
       <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
         <!-- Notification progress bar -->
         <.notification_progress type={@type} />
@@ -37,7 +37,7 @@ defmodule AtomicWeb.Components.Notification do
             <div class="ml-4 flex flex-shrink-0">
               <button phx-click="lv:clear-flash" phx-value-key={@type} class="inline-flex rounded-md bg-white text-zinc-400 hover:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2">
                 <span class="sr-only">Close</span>
-                <Heroicons.Solid.x class="h-5 w-5" />
+                <Heroicons.x_mark solid class="h-5 w-5" />
               </button>
             </div>
           </div>
@@ -53,22 +53,22 @@ defmodule AtomicWeb.Components.Notification do
     case type do
       "info" ->
         ~H"""
-        <Heroicons.Solid.information_circle class="h-6 w-6 text-blue-400" />
+        <Heroicons.information_circle solid class="h-6 w-6 text-blue-400" />
         """
 
       "success" ->
         ~H"""
-        <Heroicons.Solid.check_circle class="h-6 w-6 text-green-400" />
+        <Heroicons.check_circle solid class="h-6 w-6 text-green-400" />
         """
 
       "warning" ->
         ~H"""
-        <Heroicons.Solid.exclamation class="h-6 w-6 text-yellow-400" />
+        <Heroicons.exclamation_circle solid class="h-6 w-6 text-yellow-400" />
         """
 
       "error" ->
         ~H"""
-        <Heroicons.Solid.x_circle class="h-6 w-6 text-red-400" />
+        <Heroicons.x_circle solid class="h-6 w-6 text-red-400" />
         """
     end
   end
@@ -84,8 +84,10 @@ defmodule AtomicWeb.Components.Notification do
         "error" -> "bg-red-400"
       end
 
+    assigns = assign(assigns, :background_color, background_color)
+
     ~H"""
-    <div class={background_color <> " opacity-100 h-[0.30rem] animate-progress"}></div>
+    <div class={@background_color <> " opacity-100 h-[0.30rem] animate-progress"}></div>
     """
   end
 end

lib/atomic_web/components/pagination.ex

@@ -14,7 +14,7 @@ defmodule AtomicWeb.Components.Pagination do
           <div class="-mt-px flex w-0 flex-1">
             <%= if @meta.has_previous_page? do %>
               <%= live_patch to: build_query(@meta.previous_page, @meta, @params), class: "inline-flex items-center pt-4 pr-1 text-sm font-medium text-zinc-500 hover:text-zinc-700" do %>
-                <Heroicons.Solid.arrow_narrow_left class="mr-3 h-5 w-5 text-zinc-400" />
+                <Heroicons.arrow_long_left solid class="mr-3 h-5 w-5 text-zinc-400" />
               <% end %>
             <% end %>
           </div>
@@ -46,7 +46,7 @@ defmodule AtomicWeb.Components.Pagination do
           <div class="-mt-px flex w-0 flex-1 justify-end">
             <%= if @meta.has_next_page? do %>
               <%= live_patch to: build_query(@meta.next_page, @meta, @params), class: "inline-flex items-center pt-4 pl-1 text-sm font-medium text-zinc-500 hover:text-zinc-700" do %>
-                <Heroicons.Solid.arrow_narrow_right class="ml-3 h-5 w-5 text-zinc-400" />
+                <Heroicons.arrow_long_right solid class="ml-3 h-5 w-5 text-zinc-400" />
               <% end %>
             <% end %>
           </div>