refactor: add attributes to components (#440)

lib/atomic_web/components/announcement.ex

@@ -2,7 +2,10 @@ defmodule AtomicWeb.Components.Announcement do
   @moduledoc false
   use AtomicWeb, :component
 
-  def render_announcement(assigns) do
+  attr :announcement, :map, required: true
+  attr :url, :string, required: true
+
+  def announcement_slot(assigns) do
     assigns = assign(assigns, :organization, assigns.announcement.organization)
 
     ~H"""

lib/atomic_web/components/badges.ex

@@ -4,6 +4,11 @@ defmodule AtomicWeb.Components.Badges do
 
   @colors ~w(gray red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose)
 
+  attr :url, :string, required: true
+  attr :color, :string, required: true
+
+  slot :inner_block
+
   def badge_dot(assigns) do
     assigns =
       assigns

lib/atomic_web/components/board.ex

@@ -2,6 +2,8 @@ defmodule AtomicWeb.Components.Board do
   @moduledoc false
   use AtomicWeb, :component
 
+  attr :user_organization, :map, required: true
+
   def member_bubble(assigns) do
     ~H"""
     <div class="mx-auto mt-12 mb-12 w-full px-4 sm:w-6/12 md:w-1/3 lg:1/4 lg:mb-0 xl:w-2/12">

lib/atomic_web/components/button.ex

@@ -2,6 +2,8 @@ defmodule AtomicWeb.Components.Button do
   @moduledoc false
   use AtomicWeb, :component
 
+  attr :url, :string, required: true
+
   def edit_button(assigns) do
     ~H"""
     <div class="flex w-0 flex-1">
@@ -13,6 +15,8 @@ defmodule AtomicWeb.Components.Button do
     """
   end
 
+  attr :id, :string, required: true
+
   def delete_button(assigns) do
     ~H"""
     <div class="-ml-px flex w-0 flex-1">

lib/atomic_web/components/calendar.ex

@@ -8,6 +8,13 @@ defmodule AtomicWeb.Components.Calendar do
   import AtomicWeb.Components.CalendarMonth
   import AtomicWeb.Components.CalendarWeek
 
+  attr :id, :string, default: "calendar", required: false
+  attr :current_path, :string, required: true
+  attr :activities, :list, required: true
+  attr :mode, :string, required: true
+  attr :timezone, :string, required: true
+  attr :params, :map, required: true
+
   def calendar(
         %{
           current_path: current_path,
@@ -36,7 +43,7 @@ defmodule AtomicWeb.Components.Calendar do
       end
 
     ~H"""
-    <div x-data="{ mode_view: false }" class="flex-col lg:flex lg:h-full">
+    <div id={@id} x-data="{ mode_view: false }" class="flex-col lg:flex lg:h-full">
       <header class="my-4 flex flex-col sm:flex-row">
         <div class="flex-1">
           <div class="relative z-20 flex w-full items-end justify-between lg:flex-none">
@@ -186,9 +193,9 @@ defmodule AtomicWeb.Components.Calendar do
         </div>
       </header>
       <%= if @mode == "month" do %>
-        <.calendar_month id="calendar_month" current_path={@current_path} params={@params} activities={@activities} beginning_of_month={@beginning_of_month} end_of_month={@end_of_month} timezone={@timezone} />
+        <.calendar_month current_path={@current_path} params={@params} activities={@activities} beginning_of_month={@beginning_of_month} end_of_month={@end_of_month} timezone={@timezone} />
       <% else %>
-        <.calendar_week id="calendar_week" current_path={@current_path} current={@current} params={@params} activities={@activities} beginning_of_week={@beginning_of_week} end_of_week={@end_of_week} timezone={@timezone} />
+        <.calendar_week current_path={@current_path} current={@current} params={@params} activities={@activities} beginning_of_week={@beginning_of_week} end_of_week={@end_of_week} timezone={@timezone} />
       <% end %>
     </div>
     """

lib/atomic_web/components/calendar/month.ex

@@ -5,9 +5,17 @@ defmodule AtomicWeb.Components.CalendarMonth do
   import AtomicWeb.CalendarUtils
   import AtomicWeb.Components.Badges
 
+  attr :id, :string, default: "calendar-month", required: false
+  attr :current_path, :string, required: true
+  attr :activities, :list, required: true
+  attr :timezone, :string, required: true
+  attr :beginning_of_month, :string, required: true
+  attr :end_of_month, :string, required: true
+  attr :params, :map, required: true
+
   def calendar_month(assigns) do
     ~H"""
-    <div class="rounded-lg shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
+    <div id={@id} class="rounded-lg shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
       <div class="grid grid-cols-7 gap-px rounded-t-lg border-b border-zinc-300 bg-zinc-200 text-center text-xs font-semibold leading-6 text-zinc-700 lg:flex-none">
         <div class="rounded-tl-lg bg-white py-2">
           M<span class="sr-only sm:not-sr-only">on</span>

lib/atomic_web/components/calendar/week.ex

@@ -6,6 +6,15 @@ defmodule AtomicWeb.Components.CalendarWeek do
 
   import AtomicWeb.CalendarUtils
 
+  attr :id, :string, default: "calendar-week", required: false
+  attr :current_path, :string, required: true
+  attr :activities, :list, required: true
+  attr :timezone, :string, required: true
+  attr :current, :string, required: true
+  attr :beginning_of_week, :string, required: true
+  attr :end_of_week, :string, required: true
+  attr :params, :map, required: true
+
   def calendar_week(%{timezone: timezone} = assigns) do
     assigns =
       assigns
@@ -14,7 +23,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
       |> assign(today: Timex.today(timezone))
 
     ~H"""
-    <div class="flex flex-auto flex-col overflow-auto rounded-lg bg-white">
+    <div id={@id} class="flex flex-auto flex-col overflow-auto rounded-lg bg-white">
       <div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
         <div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5">
           <div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">

lib/atomic_web/components/empty.ex

@@ -6,9 +6,13 @@ defmodule AtomicWeb.Components.Empty do
 
   alias Inflex
 
+  attr :id, :string, default: "empty-state", required: false
+  attr :placeholder, :string, required: true
+  attr :url, :string, required: true
+
   def empty_state(assigns) do
     ~H"""
-    <div class="text-center">
+    <div id={@id} class="text-center">
       <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>

lib/atomic_web/components/pagination.ex

@@ -6,9 +6,15 @@ defmodule AtomicWeb.Components.Pagination do
 
   import AtomicWeb.Components.Helpers
 
+  attr :id, :string, default: "pagination", required: false
+  attr :items, :list, required: true
+  attr :meta, :map, required: true
+  attr :params, :map, required: true
+  attr :class, :string, default: "", required: false
+
   def pagination(assigns) do
     ~H"""
-    <div class={@class}>
+    <div id={@id} class={@class}>
       <nav class="mb-5 flex w-full items-center justify-between px-4">
         <%= if @meta.total_pages > 1 do %>
           <div class="-mt-px flex w-0 flex-1">

lib/atomic_web/components/table.ex

@@ -6,9 +6,19 @@ defmodule AtomicWeb.Components.Table do
 
   import AtomicWeb.Components.Helpers
 
+  attr :id, :string, default: "table", required: false
+  attr :items, :list, required: true
+  attr :meta, :map, required: true
+  attr :filter, :list, required: true
+
+  slot :col do
+    attr :label, :string, required: false
+    attr :field, :atom, required: false
+  end
+
   def table(assigns) do
     ~H"""
-    <table class="min-w-full border-collapse divide-y divide-zinc-300 overflow-auto">
+    <table id={@id} class="min-w-full border-collapse divide-y divide-zinc-300 overflow-auto">
       <thead>
         <tr class="select-none bg-zinc-50">
           <%= for col <- @col do %>

lib/atomic_web/live/activity_live/index.html.heex

@@ -46,7 +46,7 @@
     <!-- When there aren't any activities -->
     <%= if @empty? and @has_permissions? do %>
       <div class="mt-32">
-        <.empty_state id="empty_state" url={Routes.activity_new_path(@socket, :new, @current_organization)} plural_placeholder="activities" placeholder="activity" />
+        <.empty_state url={Routes.activity_new_path(@socket, :new, @current_organization)} placeholder="activity" />
       </div>
     <% else %>
       <!-- Activities listing -->

lib/atomic_web/live/announcement_live/index.html.heex

@@ -35,12 +35,12 @@
 
 <%= if @empty? and @has_permissions? do %>
   <div class="mt-32">
-    <.empty_state id="empty_state" url={Routes.announcement_new_path(@socket, :new, @current_organization)} placeholder="announcement" />
+    <.empty_state url={Routes.announcement_new_path(@socket, :new, @current_organization)} placeholder="announcement" />
   </div>
 <% else %>
   <ul role="list" class="relative z-0 divide-y divide-zinc-200">
     <%= for announcement <- @announcements do %>
-      <.render_announcement announcement={announcement} url={Routes.announcement_show_path(@socket, :show, announcement)} />
+      <.announcement_slot announcement={announcement} url={Routes.announcement_show_path(@socket, :show, announcement)} />
     <% end %>
   </ul>
   <.pagination items={@announcements} meta={@meta} params={@params} class="mt-2 flex w-full items-center justify-between" />

lib/atomic_web/live/board_live/index.html.heex

@@ -18,7 +18,7 @@
     </div>
     <%= if @empty? and @has_permissions? do %>
       <div class="mt-32">
-        <.empty_state id="empty_state" url={Routes.board_new_path(@socket, :new, @organization)} placeholder="board member" />
+        <.empty_state url={Routes.board_new_path(@socket, :new, @organization)} placeholder="board member" />
       </div>
     <% else %>
       <%= for board_department <- @board_departments do %>

lib/atomic_web/live/calendar_live/show.html.heex

@@ -1,4 +1,4 @@
 <h2 class="text-3xl font-bold leading-7 text-zinc-900 sm:truncate sm:text-4xl">
   <%= gettext("Calendar") %>
 </h2>
-<.calendar id="calendar" current_path={Routes.calendar_show_path(@socket, :show)} activities={@activities} params={@params} mode={@mode} timezone={@timezone} />
+<.calendar current_path={Routes.calendar_show_path(@socket, :show)} activities={@activities} params={@params} mode={@mode} timezone={@timezone} />

lib/atomic_web/live/department_live/index.html.heex

@@ -28,7 +28,7 @@
 
 <%= if @empty? and @has_permissions? do %>
   <div class="mt-32">
-    <.empty_state id="empty_state" url={Routes.department_new_path(@socket, :new, @organization)} placeholder="department" />
+    <.empty_state url={Routes.department_new_path(@socket, :new, @organization)} placeholder="department" />
   </div>
 <% else %>
   <ul role="list" class="mt-5 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">

lib/atomic_web/live/organization_live/index.html.heex

@@ -13,7 +13,7 @@
   </div>
   <%= if @empty? and @has_permissions? do %>
     <div class="mt-32">
-      <.empty_state id="empty_state" url={Routes.organization_index_path(@socket, :new)} placeholder="organization" />
+      <.empty_state url={Routes.organization_index_path(@socket, :new)} placeholder="organization" />
     </div>
   <% else %>
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4">

lib/atomic_web/live/partner_live/index.html.heex

@@ -28,7 +28,7 @@
 
 <%= if @empty? and @has_permissions? do %>
   <div class="mt-32">
-    <.empty_state id="empty_state" url={Routes.partner_new_path(@socket, :new, @organization)} placeholder="partnership" />
+    <.empty_state url={Routes.partner_new_path(@socket, :new, @organization)} placeholder="partnership" />
   </div>
 <% else %>
   <ul role="list" class="overflow-auto">