@heyramzi/ui 1.54.1 → 2.0.0

package/src/tasks/record/record-demo.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { DotsThree, NotePencil } from "phosphor-svelte";
+import { SegmentedFilter } from "../../components/segmented/index.js";
+import { Button } from "../../shadcn/button/index.js";
+import { Input } from "../../shadcn/input/index.js";
+import * as Tabs from "../../shadcn/tabs/index.js";
+import RecordShell from "./record-shell.svelte";
+import RecordHeader from "./record-header.svelte";
+import WhereWeAre from "./where-we-are.svelte";
+import NextUp from "./next-up.svelte";
+import RecordStats from "./record-stats.svelte";
+import StepsRail from "./steps-rail.svelte";
+import RecordTimeline from "./record-timeline.svelte";
+import ProjectList from "./project-list.svelte";
+import FieldSection from "./field-section.svelte";
+import InfoList from "./info-list.svelte";
+import { formatAge, formatMoney, formatRange } from "./format.js";
+import {
+	latestWhereWeAre,
+	mergeClientEvents,
+	nextAcrossProjects,
+	rollupProjects,
+	stepProgress,
+} from "./logic.js";
+import type { FieldValue, RecordEvent, StepDef } from "./types.js";
+import {
+	DEMO_NOW,
+	DEMO_TODAY,
+	clientFields,
+	clientOnlyEvents,
+	clientProjects,
+	clientSections,
+	clientValues,
+	projectFields,
+	projectSections,
+	stages,
+	stepGroups,
+	website,
+	websiteEvents,
+	websiteSteps,
+	websiteValues,
+} from "./demo-data.js";
+
+// =========================
+// STATE
+// =========================
+type Fixture = "project" | "client";
+let fixture = $state<Fixture>("project");
+let narrow = $state(false);
+let tab = $state<"activity" | "notes">("activity");
+let filter = $state("all");
+let steps = $state<StepDef[]>(structuredClone(websiteSteps));
+let activeStep = $state<string | null>("s2");
+let projectValues = $state<Record<string, FieldValue | undefined>>({ ...websiteValues });
+let personValues = $state<Record<string, FieldValue | undefined>>({ ...clientValues });
+let extra = $state<RecordEvent[]>([]);
+let draftNote = $state("");
+let railOpen = $state(false);
+
+// =========================
+// DERIVED
+// =========================
+const locale = "en-GB";
+let projectEvents = $derived([...extra, ...websiteEvents]);
+let clientEvents = $derived(
+	mergeClientEvents(
+		clientOnlyEvents,
+		clientProjects.map((p) => ({
+			id: p.summary.id,
+			name: p.summary.name,
+			href: p.summary.href,
+			events: p.events,
+		})),
+	),
+);
+let summaries = $derived(clientProjects.map((p) => p.summary));
+let rollup = $derived(rollupProjects(summaries, stages));
+let latest = $derived(latestWhereWeAre(summaries));
+let next = $derived(nextAcrossProjects(summaries, stages));
+let progress = $derived(stepProgress(steps));
+let notes = $derived(projectEvents.filter((e) => e.kind === "note"));
+let stage = $derived(stages.find((s) => s.key === website.stageKey));
+
+let clientStats = $derived.by(() => {
+	const eur = rollup.totals.EUR;
+	return [
+		{ label: "Projects", value: String(rollup.count), sub: `${rollup.activeCount} active` },
+		{ label: "Pipeline", value: formatMoney(eur?.pipeline ?? 0, "EUR", locale, true) },
+		{ label: "Won", value: formatMoney(eur?.won ?? 0, "EUR", locale, true) },
+		{ label: "Paid", value: formatMoney(eur?.paid ?? 0, "EUR", locale, true), tone: "good" as const },
+		{ label: "Last call", value: rollup.lastCallAt ? formatAge(rollup.lastCallAt, DEMO_NOW, locale) : "None yet" },
+	];
+});
+
+// =========================
+// FUNCTIONS
+// =========================
+function addNote() {
+	const title = draftNote.trim();
+	if (!title) return;
+	extra = [
+		{ id: `n${extra.length}`, kind: "note", occurredAt: DEMO_NOW.toISOString(), title, actor: "Ramzi" },
+		...extra,
+	];
+	draftNote = "";
+}
+
+// A real host would round-trip here. The pause lets the rail show its optimistic order.
+async function pause() {
+	await new Promise((resolve) => setTimeout(resolve, 250));
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#snippet composer()}
+	<form
+		class="flex items-center gap-2"
+		onsubmit={(e) => {
+			e.preventDefault();
+			addNote();
+		}}
+	>
+		<Input bind:value={draftNote} placeholder="Write a note" aria-label="Write a note" class="flex-1" />
+		<Button type="submit" variant="outline" disabled={!draftNote.trim()}>
+			<NotePencil data-icon="inline-start" />
+			Add
+		</Button>
+	</form>
+{/snippet}
+
+{#snippet payment(event: RecordEvent)}
+	<p class="text-sm leading-snug font-medium">{event.title}</p>
+	<p class="text-lg font-semibold tabular-nums text-success">
+		{formatMoney(event.amount ?? 0, event.currency ?? "EUR", locale)}
+	</p>
+{/snippet}
+
+<div class="flex flex-col gap-3">
+	<div class="flex flex-wrap items-center gap-3">
+		<SegmentedFilter
+			ariaLabel="Record"
+			block={false}
+			value={fixture}
+			onValueChange={(v) => (fixture = v)}
+			options={[
+				{ value: "project", label: "One project" },
+				{ value: "client", label: "Client with 3 projects" },
+			]}
+		/>
+		<SegmentedFilter
+			ariaLabel="Width"
+			block={false}
+			value={narrow ? "narrow" : "full"}
+			onValueChange={(v) => (narrow = v === "narrow")}
+			options={[
+				{ value: "full", label: "Full width" },
+				{ value: "narrow", label: "390px" },
+			]}
+		/>
+	</div>
+
+	<div class={narrow ? "mx-auto w-full max-w-[390px]" : "w-full"}>
+		<div class="overflow-hidden rounded-xl border border-border">
+			{#if fixture === "project"}
+				<RecordShell
+					bind:tab
+					bind:railOpen
+					tabs={[
+						{ value: "activity", label: "Activity", count: projectEvents.length },
+						{ value: "notes", label: "Notes", count: notes.length },
+					]}
+					tabsLabel="Project views"
+					railProgress={progress}
+				>
+					{#snippet header()}
+						<RecordHeader
+							title={website.name}
+							parent={{ label: "Marlow & Finch", href: "#client" }}
+							stage={stage ? { label: stage.label, tone: stage.tone } : null}
+							facts={[
+								formatMoney(website.value ?? 0, "EUR", locale),
+								formatRange(website.startDate ?? "", website.endDate, locale),
+							]}
+						>
+							{#snippet actions()}
+								<Button variant="ghost" size="sm" icon aria-label="More actions"><DotsThree weight="bold" /></Button>
+							{/snippet}
+						</RecordHeader>
+					{/snippet}
+					{#snippet banner()}
+						<WhereWeAre
+							note={website.whereWeAre?.text}
+							at={website.whereWeAre?.at}
+							actor={website.whereWeAre?.actor}
+							health={website.whereWeAre?.health}
+							now={DEMO_NOW}
+							{locale}
+						/>
+						<NextUp next={website.next} today={DEMO_TODAY} {locale} />
+					{/snippet}
+					<Tabs.Content value="activity" class="mt-0">
+						<RecordTimeline
+							events={projectEvents}
+							bind:filter
+							{composer}
+							entry={{ payment }}
+							today={DEMO_TODAY}
+							timeZone="UTC"
+							{locale}
+						/>
+					</Tabs.Content>
+					<Tabs.Content value="notes" class="mt-0">
+						<RecordTimeline events={notes} {composer} today={DEMO_TODAY} timeZone="UTC" {locale} />
+					</Tabs.Content>
+					{#snippet rail()}
+						<div class="flex flex-col gap-6">
+							<StepsRail
+								{steps}
+								groups={stepGroups}
+								activeId={activeStep}
+								today={DEMO_TODAY}
+								{locale}
+								onSelect={(id) => (activeStep = id)}
+								onToggle={(id, visible) => {
+									steps = steps.map((s) => (s.id === id ? { ...s, hidden: !visible } : s));
+								}}
+								onReorder={async (ids) => {
+									await pause();
+									const byId = new Map(steps.map((s) => [s.id, s]));
+									steps = ids.flatMap((id) => byId.get(id) ?? []);
+								}}
+								onRename={(id, label) => {
+									const original = websiteSteps.find((s) => s.id === id)?.label ?? "";
+									steps = steps.map((s) =>
+										s.id === id ? { ...s, label: label || original, renamed: label !== "" } : s,
+									);
+								}}
+							/>
+							<InfoList
+								title="People"
+								rows={[
+									{ id: "contact", label: "Contact", value: "Jane Roe, CFO" },
+									{ id: "owner", label: "Owner", value: "Ramzi" },
+								]}
+							/>
+							<FieldSection
+								fields={projectFields}
+								sections={projectSections}
+								values={projectValues}
+								currency="EUR"
+								{locale}
+								onSave={async (key, value) => {
+									await pause();
+									projectValues = { ...projectValues, [key]: value };
+								}}
+							/>
+						</div>
+					{/snippet}
+				</RecordShell>
+			{:else}
+				<RecordShell bind:railOpen railTitle="Projects">
+					{#snippet header()}
+						<RecordHeader
+							title="Marlow & Finch"
+							parent={{ label: "Clients", href: "#clients" }}
+							facts={[
+								`Pipeline ${formatMoney(rollup.totals.EUR?.pipeline ?? 0, "EUR", locale, true)}`,
+								`Won ${formatMoney(rollup.totals.EUR?.won ?? 0, "EUR", locale, true)}`,
+							]}
+						>
+							<RecordStats stats={clientStats} gutter={false} />
+						</RecordHeader>
+					{/snippet}
+					{#snippet banner()}
+						<WhereWeAre
+							note={latest?.text}
+							at={latest?.at}
+							actor={latest?.actor}
+							health={latest?.health}
+							project={latest ? { name: latest.projectName } : null}
+							now={DEMO_NOW}
+							{locale}
+						/>
+						<NextUp {next} showProject today={DEMO_TODAY} {locale} />
+					{/snippet}
+					<RecordTimeline
+						events={clientEvents}
+						bind:filter
+						showProject
+						entry={{ payment }}
+						today={DEMO_TODAY}
+						timeZone="UTC"
+						{locale}
+					/>
+					{#snippet rail()}
+						<div class="flex flex-col gap-6">
+							<section class="flex flex-col gap-2">
+								<h2 class="px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
+									Projects
+								</h2>
+								<ProjectList projects={summaries} {stages} today={DEMO_TODAY} {locale} />
+							</section>
+							<FieldSection
+								fields={clientFields}
+								sections={clientSections}
+								values={personValues}
+								{locale}
+								onSave={async (key, value) => {
+									await pause();
+									personValues = { ...personValues, [key]: value };
+								}}
+							/>
+						</div>
+					{/snippet}
+				</RecordShell>
+			{/if}
+		</div>
+	</div>
+</div>

package/src/tasks/record/record-header.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { CaretLeft } from "phosphor-svelte";
+import { cn } from "../../lib/utils.js";
+import type { Tone } from "../../lib/tone.js";
+import StatusBadge from "../status-badge.svelte";
+import { gutterClass } from "./gutter.js";
+
+// =========================
+// PROPS
+// =========================
+interface Props {
+	title: string;
+	/** A mark drawn before the title: a logo, an avatar. */
+	logo?: Snippet;
+	/** The stage, in the agency's own word and the tone of its category. */
+	stage?: { label: string; tone: Tone; detail?: string | null } | null;
+	/** What this record sits under, such as the client of a project. */
+	parent?: { label: string; href: string } | null;
+	/** Quiet facts after the stage: a value, dates. */
+	facts?: string[];
+	actions?: Snippet;
+	/** Under the title row, for a stat strip. */
+	children?: Snippet;
+	class?: string;
+}
+let { title, logo, stage, parent, facts = [], actions, children, class: className }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<header class={cn("flex flex-col gap-2 border-b border-border py-3", gutterClass, className)}>
+	{#if parent}
+		<a
+			href={parent.href}
+			class="-ml-1 inline-flex min-h-6 w-fit max-w-full items-center gap-0.5 rounded-sm text-sm text-muted-foreground transition-colors hover:text-foreground any-pointer-coarse:min-h-11"
+		>
+			<CaretLeft class="size-3.5 shrink-0" aria-hidden="true" />
+			<span class="truncate">{parent.label}</span>
+		</a>
+	{/if}
+	<div class="flex items-start justify-between gap-3">
+		<div class="flex min-w-0 items-center gap-3">
+			{#if logo}<span class="shrink-0">{@render logo()}</span>{/if}
+			<div class="min-w-0">
+				<h1 class="truncate text-lg leading-tight font-semibold tracking-tight">{title}</h1>
+				{#if stage || facts.length > 0}
+					<p class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground">
+						{#if stage}
+							<StatusBadge tone={stage.tone} dot capitalize={false}
+								>{stage.detail ? `${stage.label} · ${stage.detail}` : stage.label}</StatusBadge
+							>
+						{/if}
+						{#each facts as fact, i (i)}
+							<span class="tabular-nums">{fact}</span>
+						{/each}
+					</p>
+				{/if}
+			</div>
+		</div>
+		{#if actions}
+			<div class="flex shrink-0 items-center gap-1">{@render actions()}</div>
+		{/if}
+	</div>
+	{@render children?.()}
+</header>

package/src/tasks/record/record-shell.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" generics="T extends string = string">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { CaretRight } from "phosphor-svelte";
+import { cn } from "../../lib/utils.js";
+import { AnimatedTabs, type TabDef } from "../../components/segmented/index.js";
+import * as Sheet from "../../shadcn/sheet/index.js";
+import { Progress } from "../../shadcn/progress/index.js";
+import { gutterClass } from "./gutter.js";
+import { resolveLabels, type RecordLabels } from "./types.js";
+
+// =========================
+// PROPS
+// =========================
+interface Props {
+	header: Snippet;
+	/** Where we are, next up, stats: whatever sits between the header and the body. */
+	banner?: Snippet;
+	/** The tab row. Put each panel in a `Tabs.Content` from `@heyramzi/ui/shadcn/tabs`. */
+	tabs?: readonly TabDef<T>[];
+	tab?: T;
+	tabsLabel?: string;
+	/** The side rail. Docked at 48rem and wider, a sheet behind one row under that. */
+	rail?: Snippet;
+	/** The sheet's title, read out by screen readers. Defaults to the steps label. */
+	railTitle?: string;
+	/** Fills the narrow row's bar. Leave it out for a row with no progress. */
+	railProgress?: { done: number; total: number } | null;
+	railOpen?: boolean;
+	children: Snippet;
+	labels?: Partial<RecordLabels>;
+	class?: string;
+}
+let {
+	header,
+	banner,
+	tabs,
+	tab = $bindable(),
+	tabsLabel,
+	rail,
+	railTitle,
+	railProgress = null,
+	railOpen = $bindable(false),
+	children,
+	labels,
+	class: className,
+}: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let t = $derived(resolveLabels(labels));
+let percent = $derived(
+	railProgress && railProgress.total > 0 ? (railProgress.done / railProgress.total) * 100 : 0,
+);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<!-- WHY a container query: the record sits in a page with its own sidebar, so the
+     viewport says nothing about how much room it has. -->
+<div class={cn("@container flex min-w-0 flex-col bg-background", className)}>
+	{@render header()}
+	{@render banner?.()}
+
+	{#if rail}
+		<button
+			type="button"
+			class={cn(
+				"t-press flex min-h-11 w-full items-center gap-3 border-b border-border py-2 text-left @3xl:hidden",
+				gutterClass,
+			)}
+			aria-haspopup="dialog"
+			aria-expanded={railOpen}
+			onclick={() => (railOpen = true)}
+		>
+			<span class="text-sm font-medium">{railTitle ?? t.steps}</span>
+			{#if railProgress}
+				<span class="text-xs tabular-nums text-muted-foreground">
+					{t.stepsCount(railProgress.done, railProgress.total)}
+				</span>
+				<Progress
+					value={percent}
+					max={100}
+					class="h-1 flex-1"
+					aria-label={t.stepsCount(railProgress.done, railProgress.total)}
+				/>
+			{:else}
+				<span class="flex-1"></span>
+			{/if}
+			<CaretRight class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+		</button>
+	{/if}
+
+	<div class="flex min-w-0 flex-col @3xl:flex-row">
+		<div class="min-w-0 flex-1">
+			{#if tabs}
+				<AnimatedTabs
+					{tabs}
+					bind:value={tab}
+					variant="underline"
+					placement="section"
+					ariaLabel={tabsLabel}
+					listWrapperClass={gutterClass}
+					class="gap-0"
+				>
+					<div class={cn("py-4 @3xl:py-5", gutterClass)}>{@render children()}</div>
+				</AnimatedTabs>
+			{:else}
+				<div class={cn("py-4 @3xl:py-5", gutterClass)}>{@render children()}</div>
+			{/if}
+		</div>
+
+		{#if rail}
+			<aside
+				class="hidden w-72 shrink-0 self-start border-l border-border @3xl:sticky @3xl:top-0 @3xl:block @5xl:w-80"
+			>
+				<div class="p-4">{@render rail()}</div>
+			</aside>
+		{/if}
+	</div>
+</div>
+
+<!-- The rail is drawn twice, once docked and once here. Only one is ever on screen,
+     and the sheet mounts its copy on open. -->
+{#if rail}
+	<Sheet.Root bind:open={railOpen}>
+		<Sheet.Content side="bottom" class="gap-0 p-0">
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>{railTitle ?? t.steps}</Sheet.Title>
+			</Sheet.Header>
+			<div class="overflow-y-auto p-4 pt-6">{@render rail()}</div>
+		</Sheet.Content>
+	</Sheet.Root>
+{/if}

package/src/tasks/record/record-stats.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { cn } from "../../lib/utils.js";
+import type { PanelStat } from "../side-panel-types.js";
+import { gutterClass } from "./gutter.js";
+
+// =========================
+// PROPS
+// =========================
+interface Props {
+	stats: PanelStat[];
+	/** Sits flush with the record's gutter. Off inside a card. */
+	gutter?: boolean;
+	class?: string;
+}
+let { stats, gutter = true, class: className }: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+const TONE = {
+	default: "",
+	muted: "text-muted-foreground",
+	good: "text-success",
+	bad: "text-destructive",
+} as const;
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if stats.length > 0}
+	<dl class={cn("flex flex-wrap gap-x-6 gap-y-2", gutter && gutterClass, className)}>
+		{#each stats as stat (stat.label)}
+			<div class="min-w-0">
+				<dt class="text-xs text-muted-foreground">{stat.label}</dt>
+				<dd class={cn("text-sm font-medium tabular-nums", TONE[stat.tone ?? "default"])}>
+					{stat.value}
+					{#if stat.sub}
+						<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
+					{/if}
+				</dd>
+			</div>
+		{/each}
+	</dl>
+{/if}