Skip to content

Commit

Permalink
Update to Phoenix v1.7
Browse files Browse the repository at this point in the history
  • Loading branch information
joaodiaslobo committed Sep 22, 2023
1 parent dfd1184 commit 2eb71d1
Show file tree
Hide file tree
Showing 45 changed files with 171 additions and 164 deletions.
3 changes: 0 additions & 3 deletions config/config.exs
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,6 @@ config :tailwind,
cd: Path.expand("../assets", __DIR__)
]

config :icons,
collection: [Heroicons]

config :atomic, Atomic.Scheduler,
jobs: [
# Runs every midnight:
Expand Down
5 changes: 3 additions & 2 deletions lib/atomic_web.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand All @@ -102,7 +103,7 @@ defmodule AtomicWeb do

alias Atomic.Uploaders
alias AtomicWeb.Router.Helpers, as: Routes
alias Icons.Heroicons
alias Heroicons
end
end

Expand Down
29 changes: 12 additions & 17 deletions lib/atomic_web/components/announcement.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions lib/atomic_web/components/badges.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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) %>
Expand All @@ -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"}>
Expand Down
4 changes: 2 additions & 2 deletions lib/atomic_web/components/button.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
13 changes: 6 additions & 7 deletions lib/atomic_web/components/calendar.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
Expand All @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -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">
Expand Down
18 changes: 8 additions & 10 deletions lib/atomic_web/components/calendar/month.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -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}"
Expand Down
17 changes: 6 additions & 11 deletions lib/atomic_web/components/empty.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
19 changes: 19 additions & 0 deletions lib/atomic_web/components/icon.ex
Original file line number Diff line number Diff line change
@@ -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
18 changes: 10 additions & 8 deletions lib/atomic_web/components/notification.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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
4 changes: 2 additions & 2 deletions lib/atomic_web/components/pagination.ex
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 2eb71d1

Please sign in to comment.