diff --git a/lib/memex_web.ex b/lib/memex_web.ex
index 130239d..9b5a8c1 100644
--- a/lib/memex_web.ex
+++ b/lib/memex_web.ex
@@ -45,8 +45,7 @@ defmodule MemexWeb do
def live_view do
quote do
- use Phoenix.LiveView,
- layout: {MemexWeb.LayoutView, "live.html"}
+ use Phoenix.LiveView, layout: {MemexWeb.LayoutView, :live}
on_mount MemexWeb.InitAssigns
unquote(view_helpers())
@@ -96,7 +95,7 @@ defmodule MemexWeb do
# Import LiveView and .heex helpers (live_render, link, <.form>, etc)
# Import basic rendering functionality (render, render_layout, etc)
import Phoenix.{Component, View}
- import MemexWeb.{ErrorHelpers, Gettext, LiveHelpers, ViewHelpers}
+ import MemexWeb.{ErrorHelpers, Gettext, CoreComponents, ViewHelpers}
# credo:disable-for-next-line Credo.Check.Consistency.MultiAliasImportRequireUse
alias MemexWeb.Endpoint
diff --git a/lib/memex_web/components/context_content.ex b/lib/memex_web/components/context_content.ex
deleted file mode 100644
index 86052e0..0000000
--- a/lib/memex_web/components/context_content.ex
+++ /dev/null
@@ -1,44 +0,0 @@
-defmodule MemexWeb.Components.ContextContent do
- @moduledoc """
- Display the content for a context
- """
- use MemexWeb, :component
- alias Memex.Contexts.Context
- alias Phoenix.HTML
-
- attr :context, Context, required: true
-
- def context_content(assigns) do
- ~H"""
- <%= add_links_to_content(@context.content) %>
"
- end
- )
- |> HTML.raw()
- end
-end
diff --git a/lib/memex_web/components/core_components.ex b/lib/memex_web/components/core_components.ex
new file mode 100644
index 0000000..1f9e36b
--- /dev/null
+++ b/lib/memex_web/components/core_components.ex
@@ -0,0 +1,204 @@
+defmodule MemexWeb.CoreComponents do
+ @moduledoc """
+ Provides core UI components.
+ """
+ use Phoenix.Component
+ import MemexWeb.{Gettext, ViewHelpers}
+ alias Memex.{Accounts, Accounts.Invite, Accounts.Invites, Accounts.User}
+ alias Memex.Contexts.Context
+ alias Memex.Notes.Note
+ alias Memex.Pipelines.Steps.Step
+ alias MemexWeb.{Endpoint, HomeLive}
+ alias MemexWeb.Router.Helpers, as: Routes
+ alias Phoenix.HTML
+ alias Phoenix.LiveView.JS
+
+ embed_templates("core_components/*")
+
+ attr :title_content, :string, default: nil
+ attr :current_user, User, default: nil
+
+ def topbar(assigns)
+
+ attr :return_to, :string, required: true
+ slot(:inner_block)
+
+ @doc """
+ Renders a live component inside a modal.
+
+ The rendered modal receives a `:return_to` option to properly update
+ the URL when the modal is closed.
+
+ ## Examples
+
+ <.modal return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}>
+ <.live_component
+ module={<%= inspect context.web_module %>.<%= inspect Module.concat(schema.web_namespace, schema.alias) %>Live.FormComponent}
+ id={@<%= schema.singular %>.id || :new}
+ title={@page_title}
+ action={@live_action}
+ return_to={Routes.<%= schema.singular %>_index_path(Endpoint, :index)}
+ <%= schema.singular %>: @<%= schema.singular %>
+ />
+
+ """
+ def modal(assigns)
+
+ defp hide_modal(js \\ %JS{}) do
+ js
+ |> JS.hide(to: "#modal", transition: "fade-out")
+ |> JS.hide(to: "#modal-bg", transition: "fade-out")
+ |> JS.hide(to: "#modal-content", transition: "fade-out-scale")
+ end
+
+ attr :action, :string, required: true
+ attr :value, :boolean, required: true
+ attr :id, :string, default: nil
+ slot(:inner_block)
+
+ @doc """
+ A toggle button element that can be directed to a liveview or a
+ live_component's `handle_event/3`.
+
+ ## Examples
+
+ <.toggle_button action="my_liveview_action" value={@some_value}>
+ Toggle me!
+
+ <.toggle_button action="my_live_component_action" target={@myself} value={@some_value}>
+ Whatever you want
+
+ """
+ def toggle_button(assigns)
+
+ attr :user, User, required: true
+ slot(:inner_block, required: true)
+
+ def user_card(assigns)
+
+ attr :invite, Invite, required: true
+ attr :current_user, User, required: true
+ slot(:inner_block)
+ slot(:code_actions)
+
+ def invite_card(%{invite: invite, current_user: current_user} = assigns) do
+ assigns = assigns |> assign(:use_count, Invites.get_use_count(invite, current_user))
+
+ ~H"""
+
+
+ <%= @invite.name %>
+
+
+ <%= if @invite.disabled_at |> is_nil() do %>
+
+ <%= if @invite.uses_left do %>
+ <%= gettext(
+ "uses left: %{uses_left_count}",
+ uses_left_count: @invite.uses_left
+ ) %>
+ <% else %>
+ <%= gettext("uses left: unlimited") %>
+ <% end %>
+
+ <% else %>
+
+ <%= gettext("invite disabled") %>
+
+ <% end %>
+
+ <.qr_code
+ content={Routes.user_registration_url(Endpoint, :new, invite: @invite.token)}
+ filename={@invite.name}
+ />
+
+
+ <%= gettext("uses: %{uses_count}", uses_count: @use_count) %>
+
+
+
+ <%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
+ <%= if @code_actions, do: render_slot(@code_actions) %>
+
+
+
+ <%= render_slot(@inner_block) %>
+
+
<%= add_links_to_content(@note.content, "note-link") %>
<%= add_links_to_content(@context.content, "context-note") %>
<%= add_links_to_content(@step.content, "step-context") %>
"
+ end
+ )
+ |> HTML.raw()
+ end
+end
diff --git a/lib/memex_web/components/core_components/modal.html.heex b/lib/memex_web/components/core_components/modal.html.heex
new file mode 100644
index 0000000..13376d0
--- /dev/null
+++ b/lib/memex_web/components/core_components/modal.html.heex
@@ -0,0 +1,41 @@
+<.link
+ id="modal-bg"
+ patch={@return_to}
+ class="fade-in fixed z-10 left-0 top-0
+ w-full h-full overflow-hidden
+ p-8 flex flex-col justify-center items-center cursor-auto"
+ style="background-color: rgba(0,0,0,0.4);"
+ phx-remove={hide_modal()}
+>
+
+
+
+
+
+ <.link
+ patch={@return_to}
+ id="close"
+ class="absolute top-8 right-10
+ text-gray-500 hover:text-gray-800
+ transition-all duration-500 ease-in-out"
+ phx-remove={hide_modal()}
+ >
+
+
+
+
+ <%= render_slot(@inner_block) %>
+
+
+
+
+ <%= @user.email %>
+
+
+
+
+ <%= if @user.confirmed_at do %>
+ <%= gettext(
+ "user confirmed on%{confirmed_datetime}",
+ confirmed_datetime: ""
+ ) %>
+ <.datetime datetime={@user.confirmed_at} />
+ <% else %>
+ <%= gettext("email unconfirmed") %>
+ <% end %>
+
+
+
+ <%= gettext(
+ "user registered on%{registered_datetime}",
+ registered_datetime: ""
+ ) %>
+ <.datetime datetime={@user.inserted_at} />
+
+
+
+
+ <%= render_slot(@inner_block) %>
+
+
-
- <%= @invite.name %>
-
-
- <%= if @invite.disabled_at |> is_nil() do %>
-
- <%= if @invite.uses_left do %>
- <%= gettext(
- "uses left: %{uses_left_count}",
- uses_left_count: @invite.uses_left
- ) %>
- <% else %>
- <%= gettext("uses left: unlimited") %>
- <% end %>
-
- <% else %>
-
- <%= gettext("invite disabled") %>
-
- <% end %>
-
- <.qr_code
- content={Routes.user_registration_url(Endpoint, :new, invite: @invite.token)}
- filename={@invite.name}
- />
-
-
- <%= gettext("uses: %{uses_count}", uses_count: @use_count) %>
-
-
-
- <%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %>
- <%= render_slot(@code_actions) %>
-
-
-
- <%= render_slot(@inner_block) %>
-
-
<%= add_links_to_content(@note.content) %>
"
- end
- )
- |> HTML.raw()
- end
-end
diff --git a/lib/memex_web/components/step_content.ex b/lib/memex_web/components/step_content.ex
deleted file mode 100644
index f1c240f..0000000
--- a/lib/memex_web/components/step_content.ex
+++ /dev/null
@@ -1,44 +0,0 @@
-defmodule MemexWeb.Components.StepContent do
- @moduledoc """
- Display the content for a step
- """
- use MemexWeb, :component
- alias Memex.Pipelines.Steps.Step
- alias Phoenix.HTML
-
- attr :step, Step, required: true
-
- def step_content(assigns) do
- ~H"""
-
<%= add_links_to_content(@step.content) %>
"
- end
- )
- |> HTML.raw()
- end
-end
diff --git a/lib/memex_web/components/topbar.ex b/lib/memex_web/components/topbar.ex
deleted file mode 100644
index 93e9be9..0000000
--- a/lib/memex_web/components/topbar.ex
+++ /dev/null
@@ -1,131 +0,0 @@
-defmodule MemexWeb.Components.Topbar do
- @moduledoc """
- Component that renders a topbar with user functions/links
- """
-
- use MemexWeb, :component
-
- alias Memex.Accounts
- alias MemexWeb.HomeLive
-
- def topbar(assigns) do
- assigns =
- %{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns)
-
- ~H"""
-
- """
- end
-end
diff --git a/lib/memex_web/components/user_card.ex b/lib/memex_web/components/user_card.ex
deleted file mode 100644
index 3eebeba..0000000
--- a/lib/memex_web/components/user_card.ex
+++ /dev/null
@@ -1,53 +0,0 @@
-defmodule MemexWeb.Components.UserCard do
- @moduledoc """
- Display card for a user
- """
-
- use MemexWeb, :component
- alias Memex.Accounts.User
-
- attr :user, User, required: true
- slot(:inner_block, required: true)
-
- def user_card(assigns) do
- ~H"""
-
-
- <%= @user.email %>
-
-
-
-
- <%= if @user.confirmed_at do %>
- <%= gettext(
- "user confirmed on%{confirmed_datetime}",
- confirmed_datetime: ""
- ) %>
- <.datetime datetime={@user.confirmed_at} />
- <% else %>
- <%= gettext("email unconfirmed") %>
- <% end %>
-
-
-
- <%= gettext(
- "user registered on%{registered_datetime}",
- registered_datetime: ""
- ) %>
- <.datetime datetime={@user.inserted_at} />
-
-
-
-
- <%= render_slot(@inner_block) %>
-
-
-
- <.link
- patch={@return_to}
- id="close"
- class="absolute top-8 right-10
- text-gray-500 hover:text-gray-800
- transition-all duration-500 ease-in-out"
- phx-remove={hide_modal()}
- >
-
-
-
-
- <%= render_slot(@inner_block) %>
-
-
-