feat: build housekeeping command deck shell
This commit is contained in:
Simo committed
1 parent
cfeb0f19b8
commit
addc9c7b1a
9 files changed
+528
No files matched your search
@@ -0,0 +1,35 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface HousekeepingPageShellProps {
|
||||
title: string;
|
||||
description: string;
|
||||
primaryAction?: ReactNode;
|
||||
context?: ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function HousekeepingPageShell({
|
||||
title,
|
||||
description,
|
||||
primaryAction,
|
||||
context,
|
||||
children,
|
||||
}: HousekeepingPageShellProps) {
|
||||
return (
|
||||
<section className="space-y-6">
|
||||
<header className="flex flex-wrap items-start justify-between gap-4 border-b border-[var(--admin-border)] pb-4">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<h1 className="text-xl font-semibold text-[var(--admin-text)]">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-sm text-[var(--admin-text-muted)]">
|
||||
{description}
|
||||
</p>
|
||||
{context ? <div>{context}</div> : null}
|
||||
</div>
|
||||
{primaryAction ? <div>{primaryAction}</div> : null}
|
||||
</header>
|
||||
<div>{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { HousekeepingPageShell } from "./housekeeping-page-shell";
|
||||
import { HousekeepingPageState } from "./housekeeping-page-state";
|
||||
|
||||
describe("HousekeepingPageState", () => {
|
||||
it.each([
|
||||
["loading", "status"],
|
||||
["empty", "status"],
|
||||
["partial", "status"],
|
||||
["error", "alert"],
|
||||
] as const)("renders %s with the %s role", (state, role) => {
|
||||
const html = renderToStaticMarkup(
|
||||
<HousekeepingPageState
|
||||
state={state}
|
||||
title={`${state} title`}
|
||||
description={`${state} description`}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(html).toContain(`role="${role}"`);
|
||||
expect(html).toContain(`>${state} title<`);
|
||||
expect(html).toContain(`>${state} description<`);
|
||||
});
|
||||
|
||||
it("announces loading politely and makes the partial warning visible", () => {
|
||||
const loading = renderToStaticMarkup(
|
||||
<HousekeepingPageState
|
||||
state="loading"
|
||||
title="Loading title"
|
||||
description="Loading description"
|
||||
/>,
|
||||
);
|
||||
const partial = renderToStaticMarkup(
|
||||
<HousekeepingPageState
|
||||
state="partial"
|
||||
title="Partial title"
|
||||
description="Partial description"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(loading).toContain('aria-live="polite"');
|
||||
expect(partial).toContain('data-state-tone="warning"');
|
||||
expect(partial).toContain(">Partial title<");
|
||||
});
|
||||
|
||||
it("renders supplied retry content for an error without owning a callback", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<HousekeepingPageState
|
||||
state="error"
|
||||
title="Could not load"
|
||||
description="Try again later"
|
||||
retryAction={<a href="/admin-next/operations">Retry preview</a>}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(html).toContain('role="alert"');
|
||||
expect(html).toContain('href="/admin-next/operations"');
|
||||
expect(html).toContain(">Retry preview<");
|
||||
});
|
||||
});
|
||||
|
||||
describe("HousekeepingPageShell", () => {
|
||||
it("renders supplied header, context, action, and body content", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<HousekeepingPageShell
|
||||
title="People"
|
||||
description="Review operator-facing people data"
|
||||
context={<span>Preview context</span>}
|
||||
primaryAction={<a href="/admin-next/people/new">Create preview</a>}
|
||||
>
|
||||
<p>Page body</p>
|
||||
</HousekeepingPageShell>,
|
||||
);
|
||||
|
||||
expect(html).toContain("<header");
|
||||
expect(html).toContain(">People<");
|
||||
expect(html).toContain(">Review operator-facing people data<");
|
||||
expect(html).toContain(">Preview context<");
|
||||
expect(html).toContain('href="/admin-next/people/new"');
|
||||
expect(html).toContain(">Create preview<");
|
||||
expect(html).toContain(">Page body</p>");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface HousekeepingPageStateProps {
|
||||
state: "loading" | "empty" | "partial" | "error";
|
||||
title: string;
|
||||
description: string;
|
||||
retryAction?: ReactNode;
|
||||
}
|
||||
|
||||
export function HousekeepingPageState({
|
||||
state,
|
||||
title,
|
||||
description,
|
||||
retryAction,
|
||||
}: HousekeepingPageStateProps) {
|
||||
const isError = state === "error";
|
||||
const isPartial = state === "partial";
|
||||
|
||||
return (
|
||||
<section
|
||||
role={isError ? "alert" : "status"}
|
||||
aria-live={state === "loading" ? "polite" : undefined}
|
||||
className={`rounded-lg border p-4 ${
|
||||
isError
|
||||
? "border-[var(--admin-error)] bg-[var(--admin-surface)]"
|
||||
: isPartial
|
||||
? "border-[var(--admin-warning)] bg-[var(--admin-surface)]"
|
||||
: "border-[var(--admin-border)] bg-[var(--admin-surface)]"
|
||||
}`}
|
||||
>
|
||||
{isPartial ? (
|
||||
<p
|
||||
data-state-tone="warning"
|
||||
className="font-medium text-[var(--admin-warning)]"
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
) : (
|
||||
<h2 className="font-medium text-[var(--admin-text)]">{title}</h2>
|
||||
)}
|
||||
<p className="mt-1 text-sm text-[var(--admin-text-muted)]">
|
||||
{description}
|
||||
</p>
|
||||
{retryAction ? <div className="mt-3">{retryAction}</div> : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
interface CommandTriggerProps {
|
||||
label: string;
|
||||
}
|
||||
|
||||
export function CommandTrigger({ label }: CommandTriggerProps) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
className="rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm text-[var(--admin-text-muted)]"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import Link from "next/link";
|
||||
|
||||
interface ContextNavProps {
|
||||
items: readonly { id: string; href: string; label: string }[];
|
||||
ariaLabel: string;
|
||||
}
|
||||
|
||||
export function ContextNav({ items, ariaLabel }: ContextNavProps) {
|
||||
return (
|
||||
<nav aria-label={ariaLabel} className="min-w-0">
|
||||
<ul className="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible">
|
||||
{items.map((item) => (
|
||||
<li key={item.id} className="min-w-max">
|
||||
<Link
|
||||
href={item.href}
|
||||
className="block rounded-md px-3 py-2 text-sm text-[var(--admin-text-muted)] hover:bg-[var(--admin-canvas)] hover:text-[var(--admin-text)]"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { FileText, Gem, Hotel, Inbox, Settings, Users } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import type { HousekeepingNavigationDomain } from "../navigation";
|
||||
|
||||
interface DomainRailProps {
|
||||
domains: readonly HousekeepingNavigationDomain[];
|
||||
activeDomainId: HousekeepingNavigationDomain["id"];
|
||||
ariaLabel: string;
|
||||
}
|
||||
|
||||
function DomainIcon({ iconId }: Pick<HousekeepingNavigationDomain, "iconId">) {
|
||||
const Icon = {
|
||||
inbox: Inbox,
|
||||
users: Users,
|
||||
"file-text": FileText,
|
||||
gem: Gem,
|
||||
hotel: Hotel,
|
||||
settings: Settings,
|
||||
}[iconId];
|
||||
|
||||
return <Icon aria-hidden="true" size={18} />;
|
||||
}
|
||||
|
||||
export function DomainRail({
|
||||
domains,
|
||||
activeDomainId,
|
||||
ariaLabel,
|
||||
}: DomainRailProps) {
|
||||
return (
|
||||
<nav aria-label={ariaLabel} className="w-full lg:w-20">
|
||||
<ul className="flex gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
|
||||
{domains.map((domain) => (
|
||||
<li key={domain.id} className="min-w-max lg:min-w-0">
|
||||
<Link
|
||||
href={domain.href}
|
||||
aria-current={domain.id === activeDomainId ? "page" : undefined}
|
||||
className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-[var(--admin-text-muted)] hover:bg-[var(--admin-surface)] hover:text-[var(--admin-text)] lg:justify-center"
|
||||
>
|
||||
<span data-domain-icon={domain.iconId}>
|
||||
<DomainIcon iconId={domain.iconId} />
|
||||
</span>
|
||||
<span className="lg:sr-only">{domain.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import type { HousekeepingNavigationDomain } from "../navigation";
|
||||
import { HousekeepingShell } from "./housekeeping-shell";
|
||||
|
||||
const labels = {
|
||||
skipToContent: "Skip to housekeeping content",
|
||||
primaryNavigation: "Primary housekeeping navigation",
|
||||
contextualNavigation: "Operations navigation",
|
||||
command: "Commands are unavailable in preview",
|
||||
preview: "Preview",
|
||||
backToSite: "Back to site",
|
||||
};
|
||||
|
||||
const domains: readonly HousekeepingNavigationDomain[] = [
|
||||
{
|
||||
id: "operations",
|
||||
href: "/admin-next/operations",
|
||||
iconId: "inbox",
|
||||
label: "Operations",
|
||||
description: "Manage operations",
|
||||
items: [
|
||||
{ id: "queue", href: "/admin-next/operations/queue", label: "Queue" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "people",
|
||||
href: "/admin-next/people",
|
||||
iconId: "users",
|
||||
label: "People",
|
||||
description: "Manage people",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
id: "content",
|
||||
href: "/admin-next/content",
|
||||
iconId: "file-text",
|
||||
label: "Content",
|
||||
description: "Manage content",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
id: "economy",
|
||||
href: "/admin-next/economy",
|
||||
iconId: "gem",
|
||||
label: "Economy",
|
||||
description: "Manage economy",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
id: "hotel",
|
||||
href: "/admin-next/hotel",
|
||||
iconId: "hotel",
|
||||
label: "Hotel",
|
||||
description: "Manage hotel",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
id: "system",
|
||||
href: "/admin-next/system",
|
||||
iconId: "settings",
|
||||
label: "System",
|
||||
description: "Manage system",
|
||||
items: [],
|
||||
},
|
||||
];
|
||||
|
||||
function renderShell(
|
||||
activeDomainId: HousekeepingNavigationDomain["id"] = "operations",
|
||||
): string {
|
||||
return renderToStaticMarkup(
|
||||
<HousekeepingShell
|
||||
actor={{ id: 7, username: "Nora", rank: 6 }}
|
||||
activeDomainId={activeDomainId}
|
||||
domains={domains}
|
||||
labels={labels}
|
||||
>
|
||||
<p>Deck body</p>
|
||||
</HousekeepingShell>,
|
||||
);
|
||||
}
|
||||
|
||||
describe("HousekeepingShell", () => {
|
||||
it("renders the accessible command deck landmarks and supplied shell content", () => {
|
||||
const html = renderShell();
|
||||
|
||||
expect(html).toContain('href="#housekeeping-content"');
|
||||
expect(html).toContain(">Skip to housekeeping content<");
|
||||
expect(html).toContain("<aside");
|
||||
expect(html).toContain("<header");
|
||||
expect(html).toContain('<nav aria-label="Primary housekeeping navigation"');
|
||||
expect(html).toContain('<nav aria-label="Operations navigation"');
|
||||
expect(html).toContain('<main id="housekeeping-content"');
|
||||
expect(html).toContain(">Deck body</p>");
|
||||
expect(html).toMatch(
|
||||
/<a(?=[^>]*href="\/admin-next\/operations")(?=[^>]*aria-current="page")/,
|
||||
);
|
||||
expect(html).toContain('href="/admin-next/operations/queue"');
|
||||
expect(html).toContain(">Queue<");
|
||||
expect(html).toContain(">Nora<");
|
||||
expect(html).toContain(">6<");
|
||||
expect(html).toContain(">Preview<");
|
||||
expect(html).toContain('href="/"');
|
||||
expect(html).toContain(">Back to site<");
|
||||
expect(html).toMatch(
|
||||
/<button type="button" disabled=""[^>]*>Commands are unavailable in preview<\/button>/,
|
||||
);
|
||||
});
|
||||
|
||||
it("maps every authorized domain icon and only marks the active domain", () => {
|
||||
const html = renderShell("people");
|
||||
|
||||
for (const iconId of [
|
||||
"inbox",
|
||||
"users",
|
||||
"file-text",
|
||||
"gem",
|
||||
"hotel",
|
||||
"settings",
|
||||
]) {
|
||||
expect(html).toContain(`data-domain-icon="${iconId}"`);
|
||||
}
|
||||
expect(html).toMatch(
|
||||
/<a(?=[^>]*href="\/admin-next\/people")(?=[^>]*aria-current="page")/,
|
||||
);
|
||||
expect(html).not.toContain(
|
||||
'href="/admin-next/operations" aria-current="page"',
|
||||
);
|
||||
});
|
||||
|
||||
it("renders no contextual items when the active domain is absent", () => {
|
||||
const html = renderShell("system");
|
||||
|
||||
expect(html).not.toContain('href="/admin-next/operations/queue"');
|
||||
expect(html).not.toContain(">Queue<");
|
||||
});
|
||||
|
||||
it("keeps Task 10 modules within the server-rendered source boundary", () => {
|
||||
const taskFiles = [
|
||||
"src/features/housekeeping/foundation/shell/housekeeping-shell.tsx",
|
||||
"src/features/housekeeping/foundation/shell/domain-rail.tsx",
|
||||
"src/features/housekeeping/foundation/shell/context-nav.tsx",
|
||||
"src/features/housekeeping/foundation/shell/command-trigger.tsx",
|
||||
"src/features/housekeeping/foundation/shell/operator-summary.tsx",
|
||||
"src/features/housekeeping/foundation/page/housekeeping-page-shell.tsx",
|
||||
"src/features/housekeeping/foundation/page/housekeeping-page-state.tsx",
|
||||
"src/features/housekeeping/foundation/shell/housekeeping-shell.test.tsx",
|
||||
"src/features/housekeeping/foundation/page/housekeeping-page-state.test.tsx",
|
||||
];
|
||||
const prohibited = [
|
||||
new RegExp("use " + "client"),
|
||||
new RegExp("cmd" + "k", "i"),
|
||||
new RegExp("addEvent" + "Listener"),
|
||||
new RegExp(
|
||||
"from\\s+['\"][^'\"]*(?:@/lib/" +
|
||||
"db|drizzle|/" +
|
||||
"actions)[^'\"]*['\"]",
|
||||
),
|
||||
new RegExp("next" + "-intl"),
|
||||
/(?:bg|text|border|from|to)-(?:red|blue|green|yellow|orange|purple|pink|gray|slate|zinc|neutral)-\d{2,3}/,
|
||||
new RegExp("#" + "[0-9a-fA-F]{3,8}"),
|
||||
new RegExp("(?:r" + "gb|h" + "sl)\\("),
|
||||
];
|
||||
|
||||
for (const path of taskFiles) {
|
||||
const source = readFileSync(resolve(process.cwd(), path), "utf8");
|
||||
for (const pattern of prohibited) {
|
||||
expect(source).not.toMatch(pattern);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
import Link from "next/link";
|
||||
import type { ReactNode } from "react";
|
||||
import type { HousekeepingDomainId } from "../../migration/types";
|
||||
import type { HousekeepingActor } from "../contracts";
|
||||
import type { HousekeepingNavigationDomain } from "../navigation";
|
||||
import { CommandTrigger } from "./command-trigger";
|
||||
import { ContextNav } from "./context-nav";
|
||||
import { DomainRail } from "./domain-rail";
|
||||
import { OperatorSummary } from "./operator-summary";
|
||||
|
||||
interface HousekeepingShellProps {
|
||||
actor: HousekeepingActor;
|
||||
activeDomainId: HousekeepingDomainId;
|
||||
domains: readonly HousekeepingNavigationDomain[];
|
||||
labels: {
|
||||
skipToContent: string;
|
||||
primaryNavigation: string;
|
||||
contextualNavigation: string;
|
||||
command: string;
|
||||
preview: string;
|
||||
backToSite: string;
|
||||
};
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function HousekeepingShell({
|
||||
actor,
|
||||
activeDomainId,
|
||||
domains,
|
||||
labels,
|
||||
children,
|
||||
}: HousekeepingShellProps) {
|
||||
const activeDomain = domains.find((domain) => domain.id === activeDomainId);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--admin-canvas)] text-[var(--admin-text)]">
|
||||
<a
|
||||
href="#housekeeping-content"
|
||||
className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-10 rounded-md bg-[var(--admin-surface)] px-3 py-2 text-[var(--admin-text)]"
|
||||
>
|
||||
{labels.skipToContent}
|
||||
</a>
|
||||
<header className="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--admin-border)] bg-[var(--admin-surface)] px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="rounded-full border border-[var(--admin-border)] px-2 py-1 text-xs text-[var(--admin-accent)]">
|
||||
{labels.preview}
|
||||
</span>
|
||||
<OperatorSummary actor={actor} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CommandTrigger label={labels.command} />
|
||||
<Link
|
||||
href="/"
|
||||
className="rounded-md px-3 py-2 text-sm text-[var(--admin-text-muted)] hover:bg-[var(--admin-canvas)] hover:text-[var(--admin-text)]"
|
||||
>
|
||||
{labels.backToSite}
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
<div className="flex min-h-[calc(100vh-4rem)] flex-col lg:flex-row">
|
||||
<aside className="border-b border-[var(--admin-border)] bg-[var(--admin-surface)] p-3 lg:border-b-0 lg:border-r">
|
||||
<DomainRail
|
||||
domains={domains}
|
||||
activeDomainId={activeDomainId}
|
||||
ariaLabel={labels.primaryNavigation}
|
||||
/>
|
||||
</aside>
|
||||
<div className="border-b border-[var(--admin-border)] bg-[var(--admin-surface)] p-3 lg:w-56 lg:border-b-0 lg:border-r">
|
||||
<ContextNav
|
||||
items={activeDomain?.items ?? []}
|
||||
ariaLabel={labels.contextualNavigation}
|
||||
/>
|
||||
</div>
|
||||
<main id="housekeeping-content" className="min-w-0 flex-1 p-4 lg:p-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { HousekeepingActor } from "../contracts";
|
||||
|
||||
interface OperatorSummaryProps {
|
||||
actor: HousekeepingActor;
|
||||
}
|
||||
|
||||
export function OperatorSummary({ actor }: OperatorSummaryProps) {
|
||||
return (
|
||||
<div className="min-w-0 text-sm text-[var(--admin-text)]">
|
||||
<div className="truncate font-medium">{actor.username}</div>
|
||||
<div
|
||||
data-operator-rank={actor.rank}
|
||||
className="text-[var(--admin-text-muted)]"
|
||||
>
|
||||
{actor.rank}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user