jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

replace DaisyUI components with admin CSS, remove DaisyUI plugin (Phase 6)

Browse Source 
Add admin/components.css with custom admin-* component classes replacing
all DaisyUI component usage across admin LiveViews, auth pages, layout,
and core_components. Delete daisyui.js vendor file (246KB). Theme plugin
stays for color variables until Phase 7.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-17 23:05:01 +00:00
parent b25e04d1b2
commit af0b0c217f
15 changed files with 751 additions and 1189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
lib/simpleshop_theme_web/components/core_components.ex
View File

@@ -8,16 +8,7 @@ defmodule SimpleshopThemeWeb.CoreComponents do
with doc strings and declarative assigns. You may customize and style
them in any way you want, based on your application growth and needs.
The foundation for styling is Tailwind CSS, a utility-first CSS framework,
augmented with daisyUI, a Tailwind CSS plugin that provides UI components
and themes. Here are useful references:
* [daisyUI](https://daisyui.com/docs/intro/) - a good place to get
started and see the available components.
* [Tailwind CSS](https://tailwindcss.com) - the foundational framework
we build on. You will use it for layout, sizing, flexbox, grid, and
spacing.
Styled with custom admin CSS (`assets/css/admin/components.css`).
* [Heroicons](https://heroicons.com) - see `icon/1` for usage.
@@ -56,13 +47,13 @@ defmodule SimpleshopThemeWeb.CoreComponents do
id={@id}
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
role="alert"
class="toast toast-top toast-end z-50"
class="admin-toast"
{@rest}
>
<div class={[
"alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",
@kind == :info && "alert-info",
@kind == :error && "alert-error"
"admin-alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",
@kind == :info && "admin-alert-info",
@kind == :error && "admin-alert-error"
]}>
<.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
<.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
@@ -94,11 +85,11 @@ defmodule SimpleshopThemeWeb.CoreComponents do
slot :inner_block, required: true
def button(%{rest: rest} = assigns) do
variants = %{"primary" => "btn-primary", nil => "btn-primary btn-soft"}
variants = %{"primary" => "admin-btn-primary", nil => "admin-btn-primary admin-btn-soft"}
assigns =
assign_new(assigns, :class, fn ->
["btn", Map.fetch!(variants, assigns[:variant])]
["admin-btn", Map.fetch!(variants, assigns[:variant])]
end)
if rest[:href] || rest[:navigate] || rest[:patch] do
@@ -185,17 +176,17 @@ defmodule SimpleshopThemeWeb.CoreComponents do
end)
~H"""
<div class="fieldset mb-2">
<div class="admin-fieldset">
<label>
<input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
<span class="label">
<span class="admin-label">
<input
type="checkbox"
id={@id}
name={@name}
value="true"
checked={@checked}
class={@class || "checkbox checkbox-sm"}
class={@class || "admin-checkbox admin-checkbox-sm"}
{@rest}
/>{@label}
</span>
@@ -207,13 +198,13 @@ defmodule SimpleshopThemeWeb.CoreComponents do
def input(%{type: "select"} = assigns) do
~H"""
<div class="fieldset mb-2">
<div class="admin-fieldset">
<label>
<span :if={@label} class="label mb-1">{@label}</span>
<span :if={@label} class="admin-label">{@label}</span>
<select
id={@id}
name={@name}
class={[@class || "w-full select", @errors != [] && (@error_class || "select-error")]}
class={[@class || "admin-select", @errors != [] && (@error_class || "admin-input-error")]}
multiple={@multiple}
{@rest}
>
@@ -228,15 +219,15 @@ defmodule SimpleshopThemeWeb.CoreComponents do
def input(%{type: "textarea"} = assigns) do
~H"""
<div class="fieldset mb-2">
<div class="admin-fieldset">
<label>
<span :if={@label} class="label mb-1">{@label}</span>
<span :if={@label} class="admin-label">{@label}</span>
<textarea
id={@id}
name={@name}
class={[
@class || "w-full textarea",
@errors != [] && (@error_class || "textarea-error")
@class || "admin-textarea",
@errors != [] && (@error_class || "admin-input-error")
]}
{@rest}
>{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
@@ -249,17 +240,17 @@ defmodule SimpleshopThemeWeb.CoreComponents do
# All other inputs text, datetime-local, url, password, etc. are handled here...
def input(assigns) do
~H"""
<div class="fieldset mb-2">
<div class="admin-fieldset">
<label>
<span :if={@label} class="label mb-1">{@label}</span>
<span :if={@label} class="admin-label">{@label}</span>
<input
type={@type}
name={@name}
id={@id}
value={Phoenix.HTML.Form.normalize_value(@type, @value)}
class={[
@class || "w-full input",
@errors != [] && (@error_class || "input-error")
@class || "admin-input",
@errors != [] && (@error_class || "admin-input-error")
]}
{@rest}
/>
@@ -272,7 +263,7 @@ defmodule SimpleshopThemeWeb.CoreComponents do
# Helper used by inputs to generate form errors
defp error(assigns) do
~H"""
<p class="mt-1.5 flex gap-2 items-center text-sm text-error">
<p class="admin-error mt-1.5 flex gap-2 items-center text-sm">
<.icon name="hero-exclamation-circle" class="size-5" />
{render_slot(@inner_block)}
</p>
@@ -334,7 +325,7 @@ defmodule SimpleshopThemeWeb.CoreComponents do
end
~H"""
<table class="table table-zebra">
<table class="admin-table admin-table-zebra">
<thead>
<tr>
<th :for={col <- @col}>{col[:label]}</th>
@@ -381,9 +372,9 @@ defmodule SimpleshopThemeWeb.CoreComponents do
def list(assigns) do
~H"""
<ul class="list">
<li :for={item <- @item} class="list-row">
<div class="list-col-grow">
<ul class="admin-list">
<li :for={item <- @item} class="admin-list-row">
<div class="admin-list-grow">
<div class="font-bold">{item.title}</div>
<div>{render_slot(item)}</div>
</div>
@@ -497,14 +488,14 @@ defmodule SimpleshopThemeWeb.CoreComponents do
~H"""
<dialog
id={@id}
class="modal"
class="admin-modal"
phx-mounted={@show && show_modal(@id)}
phx-remove={hide_modal(@id)}
>
<div class="modal-box max-w-lg">
<form method="dialog">
<div class="admin-modal-box">
<form method="dialog" class="admin-modal-close">
<button
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
class="admin-btn admin-btn-ghost admin-btn-icon-round admin-btn-sm"
phx-click={@on_cancel}
aria-label={gettext("close")}
>
@@ -512,13 +503,10 @@ defmodule SimpleshopThemeWeb.CoreComponents do
</button>
</form>
{render_slot(@inner_block)}
<div :if={@actions != []} class="modal-action">
<div :if={@actions != []} class="admin-modal-actions">
{render_slot(@actions)}
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button phx-click={@on_cancel}>close</button>
</form>
</dialog>
"""
end

42
lib/simpleshop_theme_web/components/layouts/admin.html.heex
View File

@@ -1,23 +1,21 @@
<div class="drawer lg:drawer-open h-full">
<input id="admin-drawer" type="checkbox" class="drawer-toggle" />
<div class="admin-layout h-full">
<input id="admin-drawer" type="checkbox" class="admin-layout-toggle" />
<%!-- main content area --%>
<div class="drawer-content flex flex-col min-h-screen">
<div class="admin-layout-content">
<%!-- mobile header --%>
<header class="navbar bg-base-100 border-b border-base-200 lg:hidden">
<div class="flex-none">
<label for="admin-drawer" class="btn btn-square btn-ghost" aria-label="Open navigation">
<.icon name="hero-bars-3" class="size-5" />
</label>
</div>
<div class="flex-1">
<span class="text-lg font-semibold">SimpleShop</span>
</div>
<div class="flex-none">
<.link href={~p"/"} class="btn btn-ghost btn-sm">
<.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> Shop
</.link>
</div>
<header class="admin-topbar">
<label
for="admin-drawer"
class="admin-btn admin-btn-ghost admin-btn-icon"
aria-label="Open navigation"
>
<.icon name="hero-bars-3" class="size-5" />
</label>
<span class="admin-topbar-title">SimpleShop</span>
<.link href={~p"/"} class="admin-btn admin-btn-ghost admin-btn-sm">
<.icon name="hero-arrow-top-right-on-square-mini" class="size-4" /> Shop
</.link>
</header>
<%!-- page content --%>
@@ -29,9 +27,9 @@
</div>
<%!-- sidebar --%>
<div class="drawer-side z-40">
<label for="admin-drawer" class="drawer-overlay" aria-label="Close navigation"></label>
<aside class="bg-base-200 w-64 min-h-full flex flex-col">
<div class="admin-sidebar-wrapper">
<label for="admin-drawer" class="admin-sidebar-overlay" aria-label="Close navigation"></label>
<aside class="admin-sidebar">
<%!-- sidebar header --%>
<div class="p-4 border-b border-base-300">
<.link navigate={~p"/admin"} class="text-lg font-bold tracking-tight">
@@ -44,7 +42,7 @@
<%!-- nav links --%>
<nav class="flex-1 p-2" aria-label="Admin navigation">
<ul class="menu gap-0.5">
<ul class="admin-nav">
<li>
<.link
navigate={~p"/admin"}
@@ -90,7 +88,7 @@
<%!-- sidebar footer --%>
<div class="p-2 border-t border-base-300">
<ul class="menu gap-0.5">
<ul class="admin-nav">
<li>
<.link href={~p"/"}>
<.icon name="hero-arrow-top-right-on-square" class="size-5" /> View shop