@heyramzi/ui 1.54.1 → 2.0.0

package/src/tasks/status-dot.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+	import { cn } from "../lib/utils.js";
+	import { TONE_COLOR } from "../lib/tone.js";
+	import type { StatusDotVariant, Statuses } from "./status-types.js";
+
+	interface Props {
+		/** A registry from `defineStatuses`. Resolves color, variant and progress. */
+		statuses?: Statuses;
+		status?: string;
+		/** Explicit color, overrides the registry and tone. */
+		color?: string;
+		variant?: StatusDotVariant;
+		progress?: number;
+		size?: number;
+		animate?: boolean;
+		class?: string;
+	}
+
+	let {
+		statuses,
+		status,
+		color,
+		variant,
+		progress,
+		size = 14,
+		animate = true,
+		class: className,
+	}: Props = $props();
+
+	const INNER_R = 2;
+	const INNER_CIRC = 2 * Math.PI * INNER_R;
+
+	function clamp01(n: number): number {
+		return Math.max(0, Math.min(1, n));
+	}
+
+	let resolvedColor = $derived(
+		color ??
+			(statuses && status ? statuses.color(status) : undefined) ??
+			(statuses && status ? TONE_COLOR[statuses.tone(status)] : undefined) ??
+			TONE_COLOR.neutral,
+	);
+	let resolvedVariant = $derived(
+		variant ?? (statuses && status ? statuses.variant(status) : "open"),
+	);
+	let resolvedProgress = $derived(
+		progress ?? (statuses && status ? statuses.progress(status) : undefined),
+	);
+	let fraction = $derived(
+		resolvedVariant === "progress" && typeof resolvedProgress === "number"
+			? clamp01(resolvedProgress)
+			: undefined,
+	);
+	let dasharray = $derived(
+		fraction != null
+			? `${INNER_CIRC * fraction} ${INNER_CIRC * (1 - fraction)}`
+			: undefined,
+	);
+	let dashoffset = $derived(fraction != null ? INNER_CIRC * 0.25 : undefined);
+</script>
+
+{#if resolvedVariant === "completed"}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 14 14"
+		fill="none"
+		aria-hidden="true"
+		class={cn("sd", className)}
+	>
+		<circle cx="7" cy="7" r="6" fill={resolvedColor} class={animate ? "sd-pop" : ""}></circle>
+		<polyline
+			points="4.5,7 6.5,9 9.5,5"
+			fill="none"
+			class={cn("sd-mark", animate && "sd-check")}
+			stroke-width="1.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		></polyline>
+	</svg>
+{:else if resolvedVariant === "lost"}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 14 14"
+		fill="none"
+		aria-hidden="true"
+		class={cn("sd", className)}
+	>
+		<circle cx="7" cy="7" r="6" fill={resolvedColor} class={animate ? "sd-pop" : ""}></circle>
+		<g class="sd-mark" stroke-width="1.5" stroke-linecap="round">
+			<line x1="5" y1="5" x2="9" y2="9" class={animate ? "sd-cross" : ""}></line>
+			<line x1="9" y1="5" x2="5" y2="9" class={animate ? "sd-cross sd-cross-second" : ""}></line>
+		</g>
+	</svg>
+{:else if resolvedVariant === "filled"}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 14 14"
+		fill="none"
+		aria-hidden="true"
+		class={cn("sd", className)}
+	>
+		<circle cx="7" cy="7" r="6" fill={resolvedColor} class={animate ? "sd-pop" : ""}></circle>
+	</svg>
+{:else}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 14 14"
+		fill="none"
+		aria-hidden="true"
+		class={cn("sd", className)}
+	>
+		<circle
+			cx="7"
+			cy="7"
+			r="5.5"
+			stroke={resolvedColor}
+			stroke-width="1.5"
+			class={resolvedVariant === "dashed" ? "sd-dashed" : ""}
+		></circle>
+		{#if dasharray}
+			<circle
+				cx="7"
+				cy="7"
+				r={INNER_R}
+				fill="none"
+				stroke={resolvedColor}
+				stroke-width="4"
+				stroke-dasharray={dasharray}
+				stroke-dashoffset={dashoffset}
+				transform="rotate(-90 7 7)"
+				class={animate ? "sd-fill" : ""}
+			></circle>
+		{/if}
+	</svg>
+{/if}
+
+<style>
+	.sd {
+		flex-shrink: 0;
+	}
+
+	/* The tick and cross read as cut out of the disc. A host sets the mark to its own ground. */
+	.sd-mark {
+		stroke: var(--status-dot-mark, white);
+	}
+
+	/* 12 dashes that close evenly: 2 * PI * 5.5 = 34.56, cut into 12 periods of 2.88. */
+	.sd-dashed {
+		stroke-dasharray: 1.3 1.58;
+	}
+
+	.sd-fill {
+		transform-origin: 7px 7px;
+		animation: sd-fill-in var(--duration-slow, 320ms) var(--ease-smooth-out, ease-out) forwards;
+	}
+
+	@keyframes sd-fill-in {
+		from {
+			transform: rotate(-90deg) scale(0.4);
+			opacity: 0;
+		}
+		to {
+			transform: rotate(-90deg) scale(1);
+			opacity: 1;
+		}
+	}
+
+	.sd-pop {
+		transform-origin: 7px 7px;
+		animation: sd-pop-in var(--duration-medium, 240ms) var(--ease-smooth-out, ease-out) forwards;
+	}
+
+	@keyframes sd-pop-in {
+		from {
+			transform: scale(0.4);
+			opacity: 0;
+		}
+		60% {
+			transform: scale(1.08);
+			opacity: 1;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	.sd-check {
+		stroke-dasharray: 12;
+		stroke-dashoffset: 12;
+		animation: sd-trace var(--duration-medium, 240ms) var(--ease-smooth-out, ease-out)
+			var(--duration-quick, 120ms) forwards;
+	}
+
+	.sd-cross {
+		stroke-dasharray: 6;
+		stroke-dashoffset: 6;
+		animation: sd-trace calc(var(--duration-fast, 160ms) / 2) var(--ease-smooth-out, ease-out)
+			var(--duration-quick, 120ms) forwards;
+	}
+
+	.sd-cross-second {
+		animation-delay: calc(var(--duration-quick, 120ms) + var(--duration-fast, 160ms) / 2);
+	}
+
+	@keyframes sd-trace {
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sd-fill,
+		.sd-pop,
+		.sd-check,
+		.sd-cross {
+			animation: none;
+		}
+		.sd-check,
+		.sd-cross {
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/src/tasks/status-icon.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+	import StatusDot from "./status-dot.svelte";
+	import { cn } from "../lib/utils.js";
+	import { TONE_ICON } from "../lib/tone.js";
+	import type { Statuses } from "./status-types.js";
+
+	interface Props {
+		statuses: Statuses;
+		status: string;
+		size?: number;
+		animate?: boolean;
+		class?: string;
+	};
+
+	let { statuses, status, size = 14, animate = true, class: className }: Props = $props();
+
+	// An icon in the map wins; otherwise the status falls back to its dot.
+	let icon = $derived(
+		statuses.icon(status) as Component<{ size?: number; class?: string }> | undefined,
+	);
+	let tone = $derived(statuses.tone(status));
+</script>
+
+{#if icon}
+	{@const Icon = icon}
+	<Icon {size} class={cn("shrink-0", TONE_ICON[tone], className)} />
+{:else}
+	<StatusDot {statuses} {status} {size} {animate} class={className} />
+{/if}

package/src/tasks/status-types.ts

@@ -0,0 +1,40 @@
+import type { Component } from "svelte";
+import type { Tone } from "../lib/tone.js";
+
+/**
+ * The shape the dot can take. `progress` needs a `progress` value between 0 and 1.
+ * `dashed` is an open ring cut into dashes, for an aggregate such as "All".
+ */
+export type StatusDotVariant = "open" | "dashed" | "progress" | "filled" | "completed" | "lost";
+
+export type StatusDef = {
+	label: string;
+	tone?: Tone;
+	/** Any Svelte component, for example a Phosphor icon. Renders inside StatusIcon. */
+	icon?: Component;
+	variant?: StatusDotVariant;
+	/** 0 to 1. Only used by the `progress` variant. */
+	progress?: number;
+	/** Optional CSS color. Overrides the tone color for the dot and icon. */
+	color?: string;
+	description?: string;
+};
+
+export type StatusMap = Record<string, StatusDef>;
+
+export type StatusId<M extends StatusMap> = keyof M & string;
+
+/** What the components accept. `defineStatuses` returns this plus a typed `ids`. */
+export type Statuses = {
+	/** The raw map. Kept loose so a registry with specific keys is assignable here. */
+	map: StatusMap;
+	ids: string[];
+	has(id: string): boolean;
+	get(id: string): StatusDef | undefined;
+	label(id: string): string;
+	tone(id: string): Tone;
+	icon(id: string): Component | undefined;
+	variant(id: string): StatusDotVariant;
+	progress(id: string): number | undefined;
+	color(id: string): string | undefined;
+};

package/src/tasks/task-gantt.svelte

@@ -0,0 +1,230 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from "svelte";
+	import { cn } from "../lib/utils.js";
+	import { dayNumber, isoFromDay, todayIso } from "./dates.js";
+	import GanttGrid from "./gantt/gantt-grid.svelte";
+	import GanttGroupRow from "./gantt/gantt-group-row.svelte";
+	import GanttHeader from "./gantt/gantt-header.svelte";
+	import GanttTaskRow from "./gantt/gantt-task-row.svelte";
+	import {
+		buildArrows,
+		buildDays,
+		buildMonths,
+		buildRows,
+		dayX,
+		rangeLabel,
+		rangeOf,
+		type Drag,
+		type Layout,
+		type Span,
+	} from "./gantt/logic.js";
+	import type { KanbanColumn as KanbanColumnDef } from "./kanban-types.js";
+	import type { GanttChange, GanttLabelContext } from "./task-types.js";
+
+	interface Props<T> {
+		items: T[];
+		getId: (item: T) => string;
+		getTitle: (item: T) => string;
+		/**
+		 * ISO date, inclusive. Null or empty means undated: with an end date alone the task
+		 * starts the same day, and with neither it has no bar of its own.
+		 */
+		getStart: (item: T) => string | null | undefined;
+		/** ISO date, inclusive. See `getStart`. */
+		getEnd: (item: T) => string | null | undefined;
+		/**
+		 * The id of the task this one sits under. Children nest under their parent, indented
+		 * and foldable. A parent with no dates of its own draws the span of what is below it.
+		 */
+		getParent?: (item: T) => string | null | undefined;
+		/** Draws a flag at the end date instead of a bar. Milestones are not draggable. */
+		isMilestone?: (item: T) => boolean;
+		/** Parent ids that start folded. */
+		collapsed?: string[];
+		/** Shown in place of a bar for an undated task. */
+		noDatesLabel?: string;
+		/** Any CSS color for the bar. Falls back to the group hue, then the primary color. */
+		getHue?: (item: T) => string | undefined;
+		/** 0 to 1. Fills the bar from the left. */
+		getProgress?: (item: T) => number | undefined;
+		/** Ids this task waits on. Draws an arrow from each one's end to this one's start. */
+		getDependsOn?: (item: T) => string[] | undefined;
+		/** Group rows under a header, in the order given. Same shape as board columns. */
+		groups?: KanbanColumnDef[];
+		getGroup?: (item: T) => string;
+		/** Called after a bar is dragged, resized or nudged. Leave it out for a read-only chart. */
+		onChange?: (id: string, change: GanttChange) => void | Promise<void>;
+		/** Called on a click or Enter that did not move the bar. */
+		onSelect?: (id: string) => void;
+		/** The left column for a row. Defaults to the title. */
+		renderLabel?: Snippet<[T, GanttLabelContext]>;
+		/** First and last day shown. Default: the tasks' span, padded, starting on a Monday. */
+		from?: string;
+		to?: string;
+		/** The day the today line marks. Defaults to the viewer's today. */
+		today?: string;
+		dayWidth?: number;
+		rowHeight?: number;
+		/** Width of the task column in px. It never takes more than 40% of a narrow screen. */
+		labelWidth?: number;
+		labelHeading?: string;
+		locale?: string;
+		/** Drops the card chrome (border, radius, fill) so the chart sits flat on the page. */
+		flat?: boolean;
+		class?: string;
+	}
+
+	let {
+		items,
+		getId,
+		getTitle,
+		getStart,
+		getEnd,
+		getParent,
+		isMilestone,
+		collapsed = [],
+		noDatesLabel = "No dates",
+		getHue,
+		getProgress,
+		getDependsOn,
+		groups,
+		getGroup,
+		onChange,
+		onSelect,
+		renderLabel,
+		from,
+		to,
+		today = todayIso(),
+		dayWidth = 32,
+		rowHeight = 40,
+		labelWidth = 240,
+		labelHeading = "Task",
+		locale = "en-US",
+		flat = false,
+		class: className,
+	}: Props<T> = $props();
+
+	// Bars past this row enter together, so a long chart never waits on its stagger.
+	const STAGGER_CAP = 10;
+	// A bar narrower than this shows its title outside, to the right.
+	const INLINE_TITLE_MIN = 72;
+	const INDENT = 14;
+
+	let scroller = $state<HTMLDivElement>();
+	let corner = $state<HTMLDivElement>();
+	let drag = $state<Drag | null>(null);
+	let hoveredId = $state<string | null>(null);
+	let scrolledToToday = false;
+	// svelte-ignore state_referenced_locally
+	let folded = $state(new Set(collapsed));
+
+	let todayDay = $derived(dayNumber(today));
+	let range = $derived(rangeOf(items, { getStart, getEnd }, todayDay, from, to));
+	let dayCount = $derived(range.last - range.first + 1);
+	let layout = $derived<Layout>({
+		first: range.first,
+		last: range.last,
+		dayWidth,
+		rowHeight,
+		// Under 18px a day is too narrow for a gap either side of a bar.
+		inset: dayWidth >= 18 ? 3 : 0,
+		timelineWidth: dayCount * dayWidth,
+		todayDay,
+	});
+
+	let days = $derived(buildDays(range.first, dayCount));
+	let monthFormat = $derived(new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }));
+	let dayFormat = $derived(new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }));
+	let months = $derived(buildMonths(days, monthFormat));
+	let rows = $derived(buildRows(items, { getId, getStart, getEnd, getParent, groups, getGroup, folded, drag }));
+	let arrows = $derived(getDependsOn ? buildArrows(rows, layout, getDependsOn) : []);
+	let groupHue = $derived(new Map((groups ?? []).map((g) => [g.id, g.hue])));
+
+	function toggle(id: string): void {
+		const next = new Set(folded);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		folded = next;
+	}
+
+	function hueOf(item: T): string {
+		return getHue?.(item) ?? (getGroup ? groupHue.get(getGroup(item)) : undefined) ?? "var(--color-primary)";
+	}
+
+	function hover(id: string, on: boolean): void {
+		if (on) hoveredId = id;
+		else if (hoveredId === id) hoveredId = null;
+	}
+
+	function describe(span: Span): string {
+		return rangeLabel(span, dayFormat);
+	}
+
+	// Open on today, a third of the way in, so past work and what's next both show.
+	$effect(() => {
+		if (!scroller || scrolledToToday) return;
+		scrolledToToday = true;
+		const label = corner?.offsetWidth ?? 0;
+		scroller.scrollLeft = Math.max(0, dayX(layout, todayDay) - (scroller.clientWidth - label) / 3);
+	});
+
+	/** Scroll the today line into view. */
+	export function scrollToToday(): void {
+		if (!scroller) return;
+		const label = corner?.offsetWidth ?? 0;
+		scroller.scrollTo({ left: Math.max(0, dayX(layout, todayDay) - (scroller.clientWidth - label) / 3), behavior: "smooth" });
+	}
+</script>
+
+<div
+	bind:this={scroller}
+	class={cn(
+		"task-gantt relative min-h-0 flex-1 overflow-auto overscroll-x-contain",
+		flat ? "bg-background" : "rounded-xl border border-border bg-card text-card-foreground",
+		drag && "select-none",
+		className,
+	)}
+	style:--g-label="min({labelWidth}px, 40vw)"
+	style:--g-day="{dayWidth}px"
+	style:--g-row="{rowHeight}px"
+>
+	<div class="relative" style:width="calc(var(--g-label) + {layout.timelineWidth}px)">
+		<GanttHeader {layout} {days} {months} {labelHeading} {locale} bind:corner />
+
+		<div class="relative">
+			<GanttGrid {layout} {days} {arrows} rowCount={rows.length} {hoveredId} draggingId={drag?.id ?? null} />
+
+			<div role="list" aria-label="Timeline">
+				{#each rows as row, index (row.kind === "group" ? `g:${row.group.id}` : row.id)}
+					{#if row.kind === "group"}
+						<GanttGroupRow {row} {index} {layout} staggerCap={STAGGER_CAP} />
+					{:else}
+						<GanttTaskRow
+							{row}
+							{layout}
+							title={getTitle(row.item)}
+							hue={hueOf(row.item)}
+							progress={Math.max(0, Math.min(1, getProgress?.(row.item) ?? 0))}
+							milestone={isMilestone?.(row.item) ?? false}
+							nested={!!getParent}
+							indent={INDENT}
+							staggerCap={STAGGER_CAP}
+							inlineTitleMin={INLINE_TITLE_MIN}
+							{noDatesLabel}
+							hovered={hoveredId === row.id}
+							tipBelow={row.order === 0 && !groups}
+							{drag}
+							setDrag={(next) => (drag = next)}
+							onhover={hover}
+							onToggle={toggle}
+							{onChange}
+							{onSelect}
+							{renderLabel}
+							{describe}
+						/>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>