@joewinke/jatui 0.1.22 → 0.1.24

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

@@ -1,391 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type {
-		PipelineStage,
-		PipelineItem,
-		PipelineMetric,
-		PipelineConfig,
-		PipelineStageChangeEvent,
-		PipelineItemClickEvent,
-		PipelineViewMode,
-		StageColors,
-		PipelineTableColumn
-	} from '../../types/pipeline';
-	import { DEFAULT_PIPELINE_CONFIG } from '../../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 unknown as Record<string, unknown>)[sortKey] ?? '';
-			const bv = (b as unknown 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 unknown 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-md 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

@@ -1,94 +0,0 @@
-<script lang="ts">
-	import type { PipelineItem, PipelineStage, StageColors } from '../../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-200 border cursor-pointer hover:bg-base-300/80 transition-colors 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

@@ -1,163 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type {
-		PipelineStage,
-		PipelineItem,
-		StageColors,
-		PipelineDragConfig
-	} from '../../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-md 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 p-4 my-1">
-						<div class="w-full rounded-lg border border-dashed border-base-content/15 py-6 flex flex-col items-center gap-1.5">
-							<svg class="w-5 h-5 text-base-content/20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-							</svg>
-							<span class="text-xs text-base-content/25">Empty</span>
-						</div>
-					</div>
-				{/if}
-			{/if}
-		</div>
-	{/if}
-</div>