@joewinke/jatui 0.1.0 → 0.1.2

package/src/lib/components/pipeline/Pipeline.svelte

@@ -0,0 +1,391 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type {
+		PipelineStage,
+		PipelineItem,
+		PipelineMetric,
+		PipelineConfig,
+		PipelineStageChangeEvent,
+		PipelineItemClickEvent,
+		PipelineViewMode,
+		StageColors,
+		PipelineTableColumn
+	} from '$lib/types/pipeline';
+	import { DEFAULT_PIPELINE_CONFIG } from '$lib/types/pipeline';
+	import PipelineColumn from './PipelineColumn.svelte';
+
+	interface Props {
+		stages: PipelineStage[];
+		items: PipelineItem[];
+		metrics?: PipelineMetric[];
+		config?: Partial<PipelineConfig>;
+
+		viewMode?: PipelineViewMode;
+		collapsedStages?: Set<string>;
+
+		onStageChange?: (event: PipelineStageChangeEvent) => Promise<void>;
+		onItemClick?: (event: PipelineItemClickEvent) => void;
+
+		card?: Snippet<[{ item: PipelineItem; stage: PipelineStage }]>;
+		columnHeader?: Snippet<[{ stage: PipelineStage; count: number; totalValue: number }]>;
+		emptyState?: Snippet<[{ stage: PipelineStage }]>;
+
+		class?: string;
+	}
+
+	let {
+		stages,
+		items,
+		metrics,
+		config: configOverride,
+		viewMode = $bindable('kanban'),
+		collapsedStages = $bindable(new Set()),
+		onStageChange,
+		onItemClick,
+		card,
+		columnHeader,
+		emptyState,
+		class: className = ''
+	}: Props = $props();
+
+	// ─── Config ───
+
+	const cfg = $derived({
+		...DEFAULT_PIPELINE_CONFIG,
+		...configOverride,
+		drag: { ...DEFAULT_PIPELINE_CONFIG.drag!, ...(configOverride?.drag ?? {}) }
+	});
+
+	const hasMultipleViews = $derived((cfg.views?.length ?? 0) > 1);
+
+	// ─── Color Resolution ───
+
+	const SEMANTIC_VAR: Record<string, string> = {
+		primary: 'p',
+		secondary: 's',
+		accent: 'a',
+		neutral: 'n',
+		info: 'in',
+		success: 'su',
+		warning: 'wa',
+		error: 'er'
+	};
+
+	function resolveColors(stage: PipelineStage): StageColors {
+		if (stage.color) {
+			return {
+				bg: `color-mix(in oklch, ${stage.color} 10%, transparent)`,
+				text: stage.color,
+				border: `color-mix(in oklch, ${stage.color} 40%, transparent)`,
+				accent: stage.color
+			};
+		}
+		const v = SEMANTIC_VAR[stage.semantic || 'primary'] || 'p';
+		return {
+			bg: `oklch(var(--${v}) / 0.1)`,
+			text: `oklch(var(--${v}))`,
+			border: `oklch(var(--${v}) / 0.4)`,
+			accent: `oklch(var(--${v}))`
+		};
+	}
+
+	const colorsMap = $derived(new Map(stages.map((s) => [s.id, resolveColors(s)])));
+
+	// ─── Sorted Stages ───
+
+	const sortedStages = $derived([...stages].sort((a, b) => a.order - b.order));
+	const stageMap = $derived(new Map(stages.map((s) => [s.id, s])));
+
+	// ─── Item Grouping (internal mutable state for drag-drop) ───
+
+	let itemsByStage = $state<Record<string, PipelineItem[]>>({});
+
+	$effect(() => {
+		const grouped: Record<string, PipelineItem[]> = {};
+		for (const stage of stages) grouped[stage.id] = [];
+		for (const item of items) {
+			if (grouped[item.stageId]) grouped[item.stageId].push(item);
+			else if (stages.length > 0) grouped[stages[0].id].push(item);
+		}
+		itemsByStage = grouped;
+	});
+
+	// ─── Drag-Drop ───
+
+	let dragSnapshot: Record<string, PipelineItem[]> | null = null;
+
+	function handleConsider(stageId: string, e: CustomEvent) {
+		if (!dragSnapshot) {
+			dragSnapshot = Object.fromEntries(
+				Object.entries(itemsByStage).map(([k, v]) => [k, [...v]])
+			);
+		}
+		itemsByStage[stageId] = e.detail.items;
+	}
+
+	async function handleFinalize(stageId: string, e: CustomEvent) {
+		const snapshot = dragSnapshot;
+		dragSnapshot = null;
+
+		itemsByStage[stageId] = e.detail.items;
+
+		if (onStageChange && e.detail.info) {
+			const movedId = e.detail.info.id;
+			let fromStageId = stageId;
+			if (snapshot) {
+				for (const [sid, sitems] of Object.entries(snapshot)) {
+					if (sitems.some((i) => i.id === movedId)) {
+						fromStageId = sid;
+						break;
+					}
+				}
+			}
+			const newIndex = e.detail.items.findIndex((i: PipelineItem) => i.id === movedId);
+
+			try {
+				await onStageChange({ itemId: movedId, fromStageId, toStageId: stageId, newIndex });
+			} catch {
+				if (snapshot) itemsByStage = snapshot;
+			}
+		}
+	}
+
+	function handleItemClick(item: PipelineItem) {
+		onItemClick?.({ item, stageId: item.stageId });
+	}
+
+	function toggleCollapse(stageId: string) {
+		const next = new Set(collapsedStages);
+		if (next.has(stageId)) next.delete(stageId);
+		else next.add(stageId);
+		collapsedStages = next;
+	}
+
+	// ─── Metrics ───
+
+	function formatMetricValue(m: PipelineMetric): string {
+		if (typeof m.value === 'string') return m.value;
+		if (m.format === 'currency') {
+			return new Intl.NumberFormat('en-US', {
+				style: 'currency',
+				currency: cfg.currency,
+				maximumFractionDigits: 0
+			}).format(m.value);
+		}
+		if (m.format === 'percent') return `${m.value}%`;
+		return m.value.toLocaleString();
+	}
+
+	// ─── Table View ───
+
+	const defaultTableColumns: PipelineTableColumn[] = [
+		{ key: 'title', label: 'Name', width: 'flex', sortable: true },
+		{ key: 'stageId', label: 'Stage', width: 'md', sortable: true },
+		{ key: 'value', label: 'Value', width: 'sm', sortable: true },
+		{ key: 'assignee', label: 'Assignee', width: 'md', sortable: true },
+		{ key: 'expectedDate', label: 'Date', width: 'md', sortable: true }
+	];
+
+	const tableColumns = $derived(cfg.tableColumns ?? defaultTableColumns);
+
+	let sortKey = $state('');
+	let sortDir = $state<'asc' | 'desc'>('asc');
+
+	const allItems = $derived(sortedStages.flatMap((s) => itemsByStage[s.id] ?? []));
+
+	const sortedTableItems = $derived.by(() => {
+		if (!sortKey) return allItems;
+		return [...allItems].sort((a, b) => {
+			const av = (a as Record<string, unknown>)[sortKey] ?? '';
+			const bv = (b as Record<string, unknown>)[sortKey] ?? '';
+			const cmp =
+				typeof av === 'number' && typeof bv === 'number'
+					? av - bv
+					: String(av).localeCompare(String(bv));
+			return sortDir === 'asc' ? cmp : -cmp;
+		});
+	});
+
+	function toggleSort(key: string) {
+		if (sortKey === key) {
+			sortDir = sortDir === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortKey = key;
+			sortDir = 'asc';
+		}
+	}
+
+	const WIDTH_CLASS: Record<string, string> = {
+		sm: 'w-20',
+		md: 'w-32',
+		lg: 'w-48',
+		flex: ''
+	};
+
+	function formatCell(item: PipelineItem, key: string): string {
+		if (key === 'value' && item.value != null) {
+			return new Intl.NumberFormat('en-US', {
+				style: 'currency',
+				currency: cfg.currency,
+				maximumFractionDigits: 0
+			}).format(item.value);
+		}
+		if (key === 'expectedDate' && item.expectedDate) {
+			return new Date(item.expectedDate).toLocaleDateString('en-US', {
+				month: 'short',
+				day: 'numeric'
+			});
+		}
+		return String((item as Record<string, unknown>)[key] ?? '');
+	}
+</script>
+
+<div class="flex flex-col gap-4 {className}">
+	<!-- Metrics Bar -->
+	{#if metrics && metrics.length > 0}
+		<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+			{#each metrics as m}
+				<div class="stat bg-base-100 rounded-xl border border-base-300 p-3">
+					<div class="stat-title text-xs">{m.label}</div>
+					<div class="stat-value text-lg" style:color={m.color}>
+						{formatMetricValue(m)}
+					</div>
+					{#if m.change != null}
+						<div
+							class="stat-desc text-xs {m.change >= 0 ? 'text-success' : 'text-error'}"
+						>
+							{m.change >= 0 ? '+' : ''}{m.change}{m.format === 'percent' ? 'pp' : '%'}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- View Toggle -->
+	{#if hasMultipleViews}
+		<div class="flex justify-end">
+			<div class="join">
+				{#each cfg.views ?? [] as view}
+					<button
+						type="button"
+						class="join-item btn btn-sm {viewMode === view ? 'btn-active' : ''}"
+						onclick={() => (viewMode = view)}
+					>
+						{#if view === 'kanban'}
+							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
+								/>
+							</svg>
+							Board
+						{:else}
+							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M4 6h16M4 10h16M4 14h16M4 18h16"
+								/>
+							</svg>
+							Table
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Kanban View -->
+	{#if viewMode === 'kanban'}
+		<div
+			class="grid grid-flow-col auto-cols-[minmax(240px,1fr)] gap-3 overflow-x-auto pb-2"
+		>
+			{#each sortedStages as stage (stage.id)}
+				<PipelineColumn
+					{stage}
+					items={itemsByStage[stage.id] ?? []}
+					colors={colorsMap.get(stage.id) ?? { bg: '', text: '', border: '', accent: '' }}
+					drag={cfg.drag}
+					collapsed={collapsedStages.has(stage.id)}
+					minHeight={cfg.columnMinHeight}
+					onToggleCollapse={() => toggleCollapse(stage.id)}
+					onDndConsider={(e) => handleConsider(stage.id, e)}
+					onDndFinalize={(e) => handleFinalize(stage.id, e)}
+					onItemClick={handleItemClick}
+					header={columnHeader}
+					{card}
+					{emptyState}
+				/>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Table View -->
+	{#if viewMode === 'table'}
+		<div class="overflow-x-auto">
+			<table class="table table-sm">
+				<thead>
+					<tr>
+						{#each tableColumns as col}
+							<th class={WIDTH_CLASS[col.width ?? 'flex']}>
+								{#if col.sortable}
+									<button
+										type="button"
+										class="flex items-center gap-1 hover:text-base-content"
+										onclick={() => toggleSort(col.key)}
+									>
+										{col.label}
+										{#if sortKey === col.key}
+											<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+												{#if sortDir === 'asc'}
+													<path d="M5.293 9.707l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L10 7.414l-3.293 3.707a1 1 0 01-1.414-1.414z" />
+												{:else}
+													<path d="M14.707 10.293l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L10 12.586l3.293-3.707a1 1 0 011.414 1.414z" />
+												{/if}
+											</svg>
+										{/if}
+									</button>
+								{:else}
+									{col.label}
+								{/if}
+							</th>
+						{/each}
+					</tr>
+				</thead>
+				<tbody>
+					{#each sortedTableItems as item (item.id)}
+						{@const itemStage = stageMap.get(item.stageId)}
+						{@const itemColors = colorsMap.get(item.stageId)}
+						<tr
+							class="hover cursor-pointer"
+							onclick={() => handleItemClick(item)}
+						>
+							{#each tableColumns as col}
+								<td class={WIDTH_CLASS[col.width ?? 'flex']}>
+									{#if col.key === 'stageId' && itemStage}
+										<span
+											class="badge badge-sm"
+											style:background-color={itemColors?.border}
+											style:color={itemColors?.text}
+										>
+											{itemStage.label}
+										</span>
+									{:else}
+										{formatCell(item, col.key)}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+			{#if sortedTableItems.length === 0}
+				<div class="text-center text-sm opacity-40 py-8">No items</div>
+			{/if}
+		</div>
+	{/if}
+</div>

package/src/lib/components/pipeline/PipelineCard.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { PipelineItem, PipelineStage, StageColors } from '$lib/types/pipeline';
+
+	interface Props {
+		item: PipelineItem;
+		stage: PipelineStage;
+		colors: StageColors;
+		/** Whether this card is currently being dragged */
+		isDragging?: boolean;
+		onclick?: (item: PipelineItem) => void;
+		class?: string;
+	}
+
+	let {
+		item,
+		stage,
+		colors,
+		isDragging = false,
+		onclick,
+		class: className = ''
+	}: Props = $props();
+
+	function formatValue(value: number | undefined): string {
+		if (value == null) return '';
+		if (value >= 1000) return `$${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}K`;
+		return `$${value}`;
+	}
+
+	function formatStageDuration(stageEnteredAt: string | undefined): string {
+		if (!stageEnteredAt) return '';
+		const days = Math.floor((Date.now() - new Date(stageEnteredAt).getTime()) / 86400000);
+		if (days === 0) return 'today';
+		if (days === 1) return '1 day ago';
+		return `${days} days ago`;
+	}
+</script>
+
+<button
+	type="button"
+	class="card card-compact bg-base-100 shadow-sm border cursor-pointer hover:shadow-md transition-shadow w-full text-left {isDragging ? 'opacity-50 rotate-2' : ''} {className}"
+	style:border-color={colors.border}
+	onclick={() => onclick?.(item)}
+>
+	<div class="card-body gap-1 p-3">
+		<!-- Title + Value -->
+		<div class="flex items-start justify-between gap-2">
+			<span class="font-medium text-sm leading-tight">{item.title}</span>
+			{#if item.value != null}
+				<span class="text-xs font-semibold whitespace-nowrap" style:color={colors.accent}>
+					{formatValue(item.value)}
+				</span>
+			{/if}
+		</div>
+
+		<!-- Subtitle -->
+		{#if item.subtitle}
+			<span class="text-xs opacity-60">{item.subtitle}</span>
+		{/if}
+
+		<!-- Labels + Priority -->
+		{#if item.priority != null || (item.labels && item.labels.length > 0)}
+			<div class="flex flex-wrap gap-1 mt-1">
+				{#if item.priority != null}
+					<span
+						class="badge badge-xs badge-outline"
+						style:border-color={colors.accent}
+						style:color={colors.accent}
+					>
+						P{item.priority}
+					</span>
+				{/if}
+				{#if item.labels}
+					{#each item.labels as label}
+						<span class="badge badge-xs badge-ghost">{label}</span>
+					{/each}
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Assignee + Stage Duration -->
+		{#if item.assignee || item.stageEnteredAt}
+			<div class="flex items-center justify-between mt-1 text-xs opacity-50">
+				{#if item.assignee}
+					<span>@{item.assignee}</span>
+				{:else}
+					<span></span>
+				{/if}
+				{#if item.stageEnteredAt}
+					<span>{formatStageDuration(item.stageEnteredAt)}</span>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</button>

package/src/lib/components/pipeline/PipelineColumn.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type {
+		PipelineStage,
+		PipelineItem,
+		StageColors,
+		PipelineDragConfig
+	} from '$lib/types/pipeline';
+	import { dndzone } from 'svelte-dnd-action';
+	import { flip } from 'svelte/animate';
+	import PipelineCard from './PipelineCard.svelte';
+
+	interface Props {
+		stage: PipelineStage;
+		items: PipelineItem[];
+		colors: StageColors;
+		drag?: PipelineDragConfig;
+		collapsed?: boolean;
+		minHeight?: number;
+		onToggleCollapse?: () => void;
+		onDndConsider?: (e: CustomEvent) => void;
+		onDndFinalize?: (e: CustomEvent) => void;
+		onItemClick?: (item: PipelineItem) => void;
+		header?: Snippet<[{ stage: PipelineStage; count: number; totalValue: number }]>;
+		card?: Snippet<[{ item: PipelineItem; stage: PipelineStage }]>;
+		emptyState?: Snippet<[{ stage: PipelineStage }]>;
+		class?: string;
+	}
+
+	let {
+		stage,
+		items,
+		colors,
+		drag,
+		collapsed = false,
+		minHeight = 200,
+		onToggleCollapse,
+		onDndConsider,
+		onDndFinalize,
+		onItemClick,
+		header,
+		card,
+		emptyState,
+		class: className = ''
+	}: Props = $props();
+
+	const totalValue = $derived(items.reduce((sum, i) => sum + (i.value ?? 0), 0));
+	const count = $derived(items.length);
+
+	function formatTotal(value: number): string {
+		if (value === 0) return '';
+		if (value >= 1000) return `$${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}K`;
+		return `$${value}`;
+	}
+
+	const dragEnabled = $derived(
+		drag?.enabled !== false &&
+			!drag?.disabledStages?.includes(stage.id) &&
+			stage.droppableIn !== false
+	);
+
+	const flipDuration = $derived(drag?.flipDurationMs ?? 200);
+</script>
+
+<div
+	class="flex flex-col rounded-xl border {className}"
+	style:border-color={colors.border}
+	style:background-color={colors.bg}
+>
+	<!-- Header -->
+	<button
+		type="button"
+		class="flex items-center justify-between p-3 w-full text-left select-none"
+		onclick={() => onToggleCollapse?.()}
+	>
+		{#if header}
+			{@render header({ stage, count, totalValue })}
+		{:else}
+			<div class="flex items-center gap-2">
+				<span class="font-semibold text-sm" style:color={colors.text}>{stage.label}</span>
+				<span
+					class="badge badge-sm"
+					style:background-color={colors.border}
+					style:color={colors.text}
+				>
+					{count}
+				</span>
+			</div>
+			<div class="flex items-center gap-2">
+				{#if totalValue > 0}
+					<span class="text-xs opacity-60">{formatTotal(totalValue)}</span>
+				{/if}
+				<svg
+					class="w-4 h-4 transition-transform opacity-40 {collapsed ? '-rotate-90' : ''}"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M19 9l-7 7-7-7"
+					/>
+				</svg>
+			</div>
+		{/if}
+	</button>
+
+	<!-- Body -->
+	{#if !collapsed}
+		<div class="px-2 pb-2 flex flex-col gap-2" style:min-height="{minHeight}px">
+			{#if dragEnabled}
+				<div
+					use:dndzone={{
+						items,
+						flipDurationMs: flipDuration,
+						dropTargetStyle: {},
+						dropTargetClasses: drag?.dropTargetClass ? [drag.dropTargetClass] : []
+					}}
+					onconsider={(e) => onDndConsider?.(e)}
+					onfinalize={(e) => onDndFinalize?.(e)}
+					class="flex flex-col gap-2 min-h-8 flex-1"
+				>
+					{#each items as item (item.id)}
+						<div animate:flip={{ duration: flipDuration }}>
+							{#if card}
+								{@render card({ item, stage })}
+							{:else}
+								<PipelineCard {item} {stage} {colors} onclick={(i) => onItemClick?.(i)} />
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<div class="flex flex-col gap-2 flex-1">
+					{#each items as item (item.id)}
+						{#if card}
+							{@render card({ item, stage })}
+						{:else}
+							<PipelineCard {item} {stage} {colors} onclick={(i) => onItemClick?.(i)} />
+						{/if}
+					{/each}
+				</div>
+			{/if}
+
+			{#if items.length === 0}
+				{#if emptyState}
+					{@render emptyState({ stage })}
+				{:else}
+					<div class="flex-1 flex items-center justify-center text-xs opacity-30 p-4">
+						No items
+					</div>
+				{/if}
+			{/if}
+		</div>
+	{/if}
+</div>