@nucel/ui 0.3.0 → 0.10.0

package/src/lib/components/CopyButton.test.ts

@@ -0,0 +1,213 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import CopyButton from './CopyButton.svelte';
+
+/**
+ * Install a mock `navigator.clipboard.writeText`. jsdom does not provide a
+ * working clipboard, so we define it ourselves. Returns the spy.
+ */
+function mockClipboard(impl?: (text: string) => Promise<void>) {
+	const writeText = vi.fn(impl ?? (() => Promise.resolve()));
+	Object.defineProperty(navigator, 'clipboard', {
+		value: { writeText },
+		configurable: true,
+		writable: true,
+	});
+	return writeText;
+}
+
+describe('CopyButton', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+
+	afterEach(() => {
+		vi.runOnlyPendingTimers();
+		vi.useRealTimers();
+		vi.restoreAllMocks();
+	});
+
+	it('writes the value to the clipboard on click', async () => {
+		const writeText = mockClipboard();
+		const { getByRole } = render(CopyButton, { props: { value: 'hello-world' } });
+
+		await getByRole('button').click();
+		await tick();
+
+		expect(writeText).toHaveBeenCalledOnce();
+		expect(writeText).toHaveBeenCalledWith('hello-world');
+	});
+
+	it('shows the copied state after a successful copy and reverts after timeout', async () => {
+		mockClipboard();
+		const { getByRole } = render(CopyButton, {
+			props: { value: 'x', label: 'Copy', copiedLabel: 'Copied', timeout: 2000 },
+		});
+		const btn = getByRole('button');
+
+		expect(btn).toHaveTextContent('Copy');
+		expect(btn).not.toHaveAttribute('data-copied');
+
+		await btn.click();
+		await tick();
+
+		expect(btn).toHaveTextContent('Copied');
+		expect(btn).toHaveAttribute('data-copied');
+
+		// Advance past the timeout — state reverts.
+		vi.advanceTimersByTime(2000);
+		await tick();
+
+		expect(btn).toHaveTextContent('Copy');
+		expect(btn).not.toHaveAttribute('data-copied');
+	});
+
+	it('respects a custom timeout before reverting', async () => {
+		mockClipboard();
+		const { getByRole } = render(CopyButton, {
+			props: { value: 'x', label: 'Copy', copiedLabel: 'Copied', timeout: 5000 },
+		});
+		const btn = getByRole('button');
+
+		await btn.click();
+		await tick();
+		expect(btn).toHaveTextContent('Copied');
+
+		// Not yet elapsed at 2s.
+		vi.advanceTimersByTime(2000);
+		await tick();
+		expect(btn).toHaveTextContent('Copied');
+
+		// Elapsed at 5s total.
+		vi.advanceTimersByTime(3000);
+		await tick();
+		expect(btn).toHaveTextContent('Copy');
+	});
+
+	it('renders a visible label by default', () => {
+		mockClipboard();
+		const { getByRole } = render(CopyButton, { props: { value: 'x' } });
+		expect(getByRole('button')).toHaveTextContent('Copy');
+	});
+
+	it('renders icon-only (no text) when label is false, exposing an aria-label', () => {
+		mockClipboard();
+		const { getByRole } = render(CopyButton, { props: { value: 'x', label: false } });
+		const btn = getByRole('button');
+		// No visible "Copy" text node; accessible name comes from aria-label.
+		expect(btn).toHaveAttribute('aria-label', 'Copy');
+		expect(btn.querySelector('span')).toBeNull();
+	});
+
+	it('updates the icon-only aria-label to the copied label after copying', async () => {
+		mockClipboard();
+		const { getByRole } = render(CopyButton, {
+			props: { value: 'x', label: false, copiedLabel: 'Copied' },
+		});
+		const btn = getByRole('button');
+
+		await btn.click();
+		await tick();
+
+		expect(btn).toHaveAttribute('aria-label', 'Copied');
+	});
+
+	it('fires the onCopy callback with the value after a successful copy', async () => {
+		mockClipboard();
+		const onCopy = vi.fn();
+		const { getByRole } = render(CopyButton, { props: { value: 'token-123', onCopy } });
+
+		await getByRole('button').click();
+		await tick();
+
+		expect(onCopy).toHaveBeenCalledOnce();
+		expect(onCopy).toHaveBeenCalledWith('token-123');
+	});
+
+	it('fires onError and does NOT enter copied state when the write rejects', async () => {
+		const boom = new Error('permission denied');
+		mockClipboard(() => Promise.reject(boom));
+		const onError = vi.fn();
+		const onCopy = vi.fn();
+		const { getByRole } = render(CopyButton, {
+			props: { value: 'x', onError, onCopy },
+		});
+		const btn = getByRole('button');
+
+		await btn.click();
+		await tick();
+
+		expect(onError).toHaveBeenCalledOnce();
+		expect(onError).toHaveBeenCalledWith(boom);
+		expect(onCopy).not.toHaveBeenCalled();
+		expect(btn).not.toHaveAttribute('data-copied');
+		expect(btn).toHaveTextContent('Copy');
+	});
+
+	it('hides the icon when hideIcon is set', () => {
+		mockClipboard();
+		const { getByRole } = render(CopyButton, {
+			props: { value: 'x', hideIcon: true },
+		});
+		const btn = getByRole('button');
+		expect(btn.querySelector('svg')).toBeNull();
+		expect(btn).toHaveTextContent('Copy');
+	});
+
+	it('renders custom label and copiedLabel text', async () => {
+		mockClipboard();
+		const { getByRole } = render(CopyButton, {
+			props: { value: 'x', label: 'Copy URL', copiedLabel: 'Copied URL!' },
+		});
+		const btn = getByRole('button');
+		expect(btn).toHaveTextContent('Copy URL');
+
+		await btn.click();
+		await tick();
+		expect(btn).toHaveTextContent('Copied URL!');
+	});
+
+	it('does not copy or change state when disabled', async () => {
+		const writeText = mockClipboard();
+		const { getByRole } = render(CopyButton, {
+			props: { value: 'x', disabled: true },
+		});
+		const btn = getByRole('button');
+		expect(btn).toBeDisabled();
+
+		await btn.click();
+		await tick();
+
+		expect(writeText).not.toHaveBeenCalled();
+		expect(btn).not.toHaveAttribute('data-copied');
+	});
+
+	it('restarts the timer on a second click (debounced revert)', async () => {
+		mockClipboard();
+		const { getByRole } = render(CopyButton, {
+			props: { value: 'x', label: 'Copy', copiedLabel: 'Copied', timeout: 2000 },
+		});
+		const btn = getByRole('button');
+
+		await btn.click();
+		await tick();
+		expect(btn).toHaveTextContent('Copied');
+
+		// 1.5s in, click again — timer should reset.
+		vi.advanceTimersByTime(1500);
+		await btn.click();
+		await tick();
+		expect(btn).toHaveTextContent('Copied');
+
+		// 1s more (2.5s since first click, 1s since second) — still copied.
+		vi.advanceTimersByTime(1000);
+		await tick();
+		expect(btn).toHaveTextContent('Copied');
+
+		// Reach 2s since the second click — now reverts.
+		vi.advanceTimersByTime(1000);
+		await tick();
+		expect(btn).toHaveTextContent('Copy');
+	});
+});

package/src/lib/components/DataTable.svelte

@@ -0,0 +1,202 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export type ColumnDef<T> = {
+		/** Column key — used for sorting and React-style row[key] access if accessor is omitted */
+		key: string;
+		/** Column header label */
+		header: string;
+		/** Optional cell value accessor — defaults to `row[key]` */
+		accessor?: (row: T) => unknown;
+		/** Optional custom cell renderer snippet receiving the row */
+		cell?: Snippet<[T]>;
+		/** Enable sorting on this column (defaults true) */
+		sortable?: boolean;
+		/** Optional column width (CSS) */
+		width?: string;
+		/** Optional alignment */
+		align?: 'left' | 'center' | 'right';
+		/** Extra class for both header and cells */
+		class?: string;
+	};
+
+	export type SortDirection = 'asc' | 'desc' | null;
+</script>
+
+<script lang="ts" generics="T">
+	import { ArrowUpIcon, ArrowDownIcon, ArrowUpDownIcon } from '@lucide/svelte';
+	import Pagination from './Pagination.svelte';
+	import { cn } from '../utils.js';
+
+	type Props = {
+		data: T[];
+		columns: ColumnDef<T>[];
+		pageSize?: number;
+		/** Initial page (1-indexed) */
+		page?: number;
+		/** Show pagination row (defaults true when data > pageSize) */
+		paginate?: boolean;
+		/** Optional row key fn — used for keyed-each */
+		rowKey?: (row: T, idx: number) => string | number;
+		/** Empty-state message */
+		emptyMessage?: string;
+		class?: string;
+		onRowClick?: (row: T) => void;
+	};
+
+	let {
+		data,
+		columns,
+		pageSize = 10,
+		page = $bindable(1),
+		paginate,
+		rowKey,
+		emptyMessage = 'No results',
+		class: className,
+		onRowClick,
+	}: Props = $props();
+
+	let sortKey = $state<string | null>(null);
+	let sortDir = $state<SortDirection>(null);
+
+	function getValue(row: T, col: ColumnDef<T>): unknown {
+		if (col.accessor) return col.accessor(row);
+		return (row as Record<string, unknown>)[col.key];
+	}
+
+	function compare(a: unknown, b: unknown): number {
+		if (a === b) return 0;
+		if (a === null || a === undefined) return -1;
+		if (b === null || b === undefined) return 1;
+		if (typeof a === 'number' && typeof b === 'number') return a - b;
+		if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+		return String(a).localeCompare(String(b));
+	}
+
+	function toggleSort(col: ColumnDef<T>) {
+		if (col.sortable === false) return;
+		if (sortKey !== col.key) {
+			sortKey = col.key;
+			sortDir = 'asc';
+		} else if (sortDir === 'asc') {
+			sortDir = 'desc';
+		} else if (sortDir === 'desc') {
+			sortKey = null;
+			sortDir = null;
+		} else {
+			sortDir = 'asc';
+		}
+		page = 1;
+	}
+
+	const sortedData = $derived.by(() => {
+		if (!sortKey || !sortDir) return data;
+		const col = columns.find((c) => c.key === sortKey);
+		if (!col) return data;
+		const dir = sortDir === 'asc' ? 1 : -1;
+		return [...data].sort((a, b) => compare(getValue(a, col), getValue(b, col)) * dir);
+	});
+
+	const total = $derived(sortedData.length);
+	const shouldPaginate = $derived(paginate ?? total > pageSize);
+
+	const pagedData = $derived.by(() => {
+		if (!shouldPaginate) return sortedData;
+		const start = (page - 1) * pageSize;
+		return sortedData.slice(start, start + pageSize);
+	});
+
+	function alignClass(a?: 'left' | 'center' | 'right') {
+		switch (a) {
+			case 'center':
+				return 'text-center';
+			case 'right':
+				return 'text-right';
+			default:
+				return 'text-left';
+		}
+	}
+</script>
+
+<div
+	data-slot="data-table"
+	class={cn('border-border bg-card overflow-hidden rounded-lg border', className)}
+>
+	<div class="overflow-x-auto">
+		<table class="w-full caption-bottom text-sm">
+			<thead class="bg-muted/50 border-border border-b">
+				<tr>
+					{#each columns as col (col.key)}
+						<th
+							scope="col"
+							style={col.width ? `width:${col.width}` : undefined}
+							class={cn(
+								'text-muted-foreground h-10 px-3 font-medium select-none',
+								alignClass(col.align),
+								col.class,
+							)}
+						>
+							{#if col.sortable !== false}
+								<button
+									type="button"
+									onclick={() => toggleSort(col)}
+									class="hover:text-foreground inline-flex items-center gap-1 outline-none focus-visible:ring-2 focus-visible:ring-ring/50 rounded"
+									aria-label={`Sort by ${col.header}`}
+								>
+									<span>{col.header}</span>
+									{#if sortKey === col.key && sortDir === 'asc'}
+										<ArrowUpIcon class="size-3" />
+									{:else if sortKey === col.key && sortDir === 'desc'}
+										<ArrowDownIcon class="size-3" />
+									{:else}
+										<ArrowUpDownIcon class="text-muted-foreground/50 size-3" />
+									{/if}
+								</button>
+							{:else}
+								<span>{col.header}</span>
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#if pagedData.length === 0}
+					<tr>
+						<td colspan={columns.length} class="text-muted-foreground py-8 text-center text-sm">
+							{emptyMessage}
+						</td>
+					</tr>
+				{:else}
+					{#each pagedData as row, i (rowKey ? rowKey(row, i) : i)}
+						<tr
+							class={cn(
+								'border-border hover:bg-muted/40 border-b transition-colors last:border-b-0',
+								onRowClick && 'cursor-pointer',
+							)}
+							onclick={onRowClick ? () => onRowClick(row) : undefined}
+						>
+							{#each columns as col (col.key)}
+								<td class={cn('px-3 py-2.5 align-middle', alignClass(col.align), col.class)}>
+									{#if col.cell}
+										{@render col.cell(row)}
+									{:else}
+										{String(getValue(row, col) ?? '')}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				{/if}
+			</tbody>
+		</table>
+	</div>
+	{#if shouldPaginate && total > 0}
+		<div class="border-border bg-muted/30 flex items-center justify-between gap-2 border-t px-3 py-2">
+			<span class="text-muted-foreground text-xs">
+				Showing {Math.min((page - 1) * pageSize + 1, total)}–{Math.min(page * pageSize, total)} of
+				{total}
+			</span>
+			<Pagination {total} bind:page {pageSize} />
+		</div>
+	{/if}
+</div>

package/src/lib/components/DateRangePicker.svelte

@@ -0,0 +1,185 @@
+<script lang="ts" module>
+	import type { DateRange } from 'bits-ui';
+	export type { DateRange };
+
+	export type DateRangePreset = {
+		label: string;
+		/** Returns the [start, end] range (inclusive). end defaults to today. */
+		range: () => { start: Date; end: Date };
+	};
+
+	export const DEFAULT_PRESETS: DateRangePreset[] = [
+		{
+			label: 'Today',
+			range: () => {
+				const d = new Date();
+				return { start: d, end: d };
+			},
+		},
+		{
+			label: '7d',
+			range: () => {
+				const end = new Date();
+				const start = new Date();
+				start.setDate(end.getDate() - 6);
+				return { start, end };
+			},
+		},
+		{
+			label: '30d',
+			range: () => {
+				const end = new Date();
+				const start = new Date();
+				start.setDate(end.getDate() - 29);
+				return { start, end };
+			},
+		},
+	];
+</script>
+
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date';
+	import { ChevronLeftIcon, ChevronRightIcon } from '@lucide/svelte';
+	import { cn } from '../utils.js';
+
+	type Props = {
+		value?: DateRange;
+		numberOfMonths?: number;
+		presets?: DateRangePreset[];
+		showPresets?: boolean;
+		locale?: string;
+		class?: string;
+		onValueChange?: (range: DateRange) => void;
+	};
+
+	let {
+		value = $bindable<DateRange>({ start: undefined, end: undefined }),
+		numberOfMonths = 2,
+		presets = DEFAULT_PRESETS,
+		showPresets = true,
+		locale = 'en-US',
+		class: className,
+		onValueChange,
+	}: Props = $props();
+
+	function toCalendarDate(d: Date): CalendarDate {
+		return new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate());
+	}
+
+	function applyPreset(p: DateRangePreset) {
+		const r = p.range();
+		const next: DateRange = {
+			start: toCalendarDate(r.start),
+			end: toCalendarDate(r.end),
+		};
+		value = next;
+		onValueChange?.(next);
+	}
+
+	function isPresetActive(p: DateRangePreset): boolean {
+		if (!value?.start || !value?.end) return false;
+		const r = p.range();
+		const sCal = toCalendarDate(r.start);
+		const eCal = toCalendarDate(r.end);
+		return value.start.compare(sCal) === 0 && value.end.compare(eCal) === 0;
+	}
+
+	const placeholder = today(getLocalTimeZone());
+
+	const cellBase =
+		'group relative inline-flex size-9 items-center justify-center rounded-md p-0 text-sm font-normal outline-none aria-selected:opacity-100';
+	const dayClass = cn(
+		cellBase,
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground',
+		'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:rounded-l-md',
+		'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:rounded-r-md',
+		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+		'data-[outside-month]:text-muted-foreground/50',
+		'data-[disabled]:text-muted-foreground/40 data-[disabled]:pointer-events-none',
+		'hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50',
+	);
+</script>
+
+<div
+	data-slot="date-range-picker"
+	class={cn(
+		'border-border bg-card text-card-foreground inline-flex flex-col gap-3 rounded-lg border p-3 shadow-sm',
+		className,
+	)}
+>
+	{#if showPresets && presets.length > 0}
+		<div class="flex flex-wrap items-center gap-1.5">
+			{#each presets as p (p.label)}
+				<button
+					type="button"
+					onclick={() => applyPreset(p)}
+					class={cn(
+						'inline-flex h-7 items-center rounded-full border px-2.5 text-xs font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
+						isPresetActive(p)
+							? 'bg-primary text-primary-foreground border-primary'
+							: 'border-border bg-background hover:bg-accent hover:text-accent-foreground',
+					)}
+				>
+					{p.label}
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	<RangeCalendarPrimitive.Root
+		bind:value
+		{numberOfMonths}
+		{locale}
+		{placeholder}
+		{onValueChange}
+		weekdayFormat="short"
+		class="flex flex-col gap-2"
+	>
+		{#snippet children({ months, weekdays })}
+			<RangeCalendarPrimitive.Header class="flex items-center justify-between px-1">
+				<RangeCalendarPrimitive.PrevButton
+					class="hover:bg-accent inline-flex size-8 items-center justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+					aria-label="Previous month"
+				>
+					<ChevronLeftIcon class="size-4" />
+				</RangeCalendarPrimitive.PrevButton>
+				<RangeCalendarPrimitive.Heading class="text-sm font-medium" />
+				<RangeCalendarPrimitive.NextButton
+					class="hover:bg-accent inline-flex size-8 items-center justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+					aria-label="Next month"
+				>
+					<ChevronRightIcon class="size-4" />
+				</RangeCalendarPrimitive.NextButton>
+			</RangeCalendarPrimitive.Header>
+			<div class="flex flex-col gap-4 sm:flex-row">
+				{#each months as month (month.value.toString())}
+					<RangeCalendarPrimitive.Grid class="border-collapse">
+						<RangeCalendarPrimitive.GridHead>
+							<RangeCalendarPrimitive.GridRow class="flex">
+								{#each weekdays as wd (wd)}
+									<RangeCalendarPrimitive.HeadCell
+										class="text-muted-foreground w-9 text-[0.7rem] font-normal"
+									>
+										{wd.slice(0, 2)}
+									</RangeCalendarPrimitive.HeadCell>
+								{/each}
+							</RangeCalendarPrimitive.GridRow>
+						</RangeCalendarPrimitive.GridHead>
+						<RangeCalendarPrimitive.GridBody>
+							{#each month.weeks as week, wi (wi)}
+								<RangeCalendarPrimitive.GridRow class="mt-1 flex w-full">
+									{#each week as date (date.toString())}
+										<RangeCalendarPrimitive.Cell {date} month={month.value} class="p-0">
+											<RangeCalendarPrimitive.Day class={dayClass} />
+										</RangeCalendarPrimitive.Cell>
+									{/each}
+								</RangeCalendarPrimitive.GridRow>
+							{/each}
+						</RangeCalendarPrimitive.GridBody>
+					</RangeCalendarPrimitive.Grid>
+				{/each}
+			</div>
+		{/snippet}
+	</RangeCalendarPrimitive.Root>
+</div>