@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

package/src/lib/components/extended/json-viewer/json-viewer-value.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import { cn } from "$lib/components/utils.js";
+	import {
+		detectJsonViewerDate,
+		formatJsonViewerRelativeTime,
+		getJsonViewerDataType,
+		getJsonViewerTypeClass,
+		isJsonViewerColor,
+		isJsonViewerUrl,
+	} from "./json-viewer.utils.js";
+
+	import type { ClassValue } from "clsx";
+
+	type Props = {
+		value: unknown;
+		showComma?: boolean;
+		class?: ClassValue;
+	};
+
+	let { value, showComma = false, class: className }: Props = $props();
+
+	let expanded = $state(false);
+
+	const dataType = $derived(getJsonViewerDataType(value));
+	const dateValue = $derived(detectJsonViewerDate(value));
+	const typeClass = $derived(getJsonViewerTypeClass(dataType));
+	const stringValue = $derived(typeof value === "string" ? value : "");
+	const isColorValue = $derived(typeof value === "string" && isJsonViewerColor(value));
+	const isUrlValue = $derived(typeof value === "string" && isJsonViewerUrl(value));
+	const isLongValue = $derived(typeof value === "string" && value.length > 50);
+	const isVeryLongValue = $derived(typeof value === "string" && value.length > 180);
+
+	/**
+	 * Toggles the expanded state for long scalar values.
+	 */
+	function toggleExpanded(): void {
+		expanded = !expanded;
+	}
+</script>
+
+<span data-slot="json-viewer-value">
+	{#if dataType === "string"}
+		{#if isColorValue}
+			<span class={cn("inline-flex items-center gap-1.5 whitespace-nowrap", className)}>
+				<span class="h-3 w-3 shrink-0 rounded-[2px] border border-white/20" style={`background-color: ${stringValue};`}></span>
+				<span class={typeClass}>'{stringValue}'</span>
+			</span>
+		{:else if isUrlValue}
+			<span class="inline-flex flex-col items-start gap-1">
+				<a
+					href={stringValue}
+					target="_blank"
+					rel="noopener noreferrer"
+					class={cn(
+						typeClass,
+						isLongValue ? "whitespace-pre-wrap break-all" : "whitespace-nowrap",
+						"hover:text-blue-600 dark:hover:text-blue-400 hover:underline",
+						!expanded && isVeryLongValue && "line-clamp-3",
+						className,
+					)}
+					onclick={(event) => {
+						event.stopPropagation();
+					}}
+				>
+					'{stringValue}'
+				</a>
+				{#if isVeryLongValue}
+					<Button
+						size="sm"
+						variant="link"
+						class="text-muted-foreground hover:text-foreground h-auto px-0 text-xs"
+						onclick={(event) => {
+							event.stopPropagation();
+							toggleExpanded();
+						}}
+					>
+						{expanded ? "Show less" : "Show more"}
+					</Button>
+				{/if}
+			</span>
+		{:else if isVeryLongValue}
+			<span class="inline-flex flex-col items-start gap-1">
+				<span
+					class={cn(
+						typeClass,
+						"whitespace-pre-wrap break-all",
+						!expanded && "line-clamp-3",
+						className,
+					)}
+				>
+					'{stringValue}'
+				</span>
+				<Button
+					size="sm"
+					variant="link"
+					class="text-muted-foreground hover:text-foreground h-auto px-0 text-xs"
+					onclick={toggleExpanded}
+				>
+					{expanded ? "Show less" : "Show more"}
+				</Button>
+			</span>
+		{:else}
+			<span
+				class={cn(
+					typeClass,
+					isLongValue ? "whitespace-pre-wrap break-all" : "whitespace-nowrap",
+					className,
+				)}
+			>
+				'{stringValue}'
+			</span>
+		{/if}
+	{:else if dataType === "null"}
+		<span class={cn(typeClass, "whitespace-nowrap", className)}>null</span>
+	{:else}
+		<span class={cn(typeClass, "whitespace-nowrap", className)}>{String(value)}</span>
+	{/if}
+
+	{#if dateValue && dataType !== "object" && dataType !== "array"}
+		<span class="text-muted-foreground/70 ml-2 text-xs italic select-none">
+			// {formatJsonViewerRelativeTime(dateValue)}
+		</span>
+	{/if}
+
+	{#if showComma}
+		<span class="text-muted-foreground">,</span>
+	{/if}
+</span>

package/src/lib/components/extended/json-viewer/json-viewer.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { cn } from "$lib/components/utils.js";
+
+	import JsonViewerPanel from "./json-viewer-panel.svelte";
+	import {
+		getJsonViewerCopyText,
+		normalizeJsonViewerData,
+		resolveJsonViewerTruncation,
+	} from "./json-viewer.utils.js";
+
+	import type { JsonViewerProps } from "./json-viewer.types.js";
+
+	let {
+		data,
+		class: className,
+		truncation = undefined,
+		showLineNumbers = true,
+		showColorIndent = false,
+		collapseOn = "click",
+		defaultExpanded = false,
+		title = null,
+		toolbarClass,
+		toolbarTitleClass,
+		toolbarActionsClass,
+		toolbarButtonClass,
+		toolbarExpandButtonClass,
+		toolbarCollapseButtonClass,
+		toolbarCopyButtonClass,
+		toolbarSeparatorClass,
+		toolbarActions,
+		...restProps
+	}: JsonViewerProps = $props();
+
+	const normalizedData = $derived(normalizeJsonViewerData(data));
+	const resolvedTruncation = $derived(resolveJsonViewerTruncation(truncation));
+	const copyText = $derived(getJsonViewerCopyText(data));
+	const viewerKey = $derived(
+		JSON.stringify([
+			typeof defaultExpanded === "number" ? `depth:${defaultExpanded}` : defaultExpanded,
+			copyText,
+		]),
+	);
+</script>
+
+<div
+	data-slot="json-viewer"
+	class={cn(
+		"bg-secondary/10 dark:bg-muted/50 text-foreground relative flex w-full flex-col rounded-lg border font-mono text-[13px] leading-6",
+		className,
+	)}
+	{...restProps}
+>
+	{#key viewerKey}
+		<JsonViewerPanel
+			data={normalizedData}
+			{copyText}
+			truncation={resolvedTruncation}
+			{showLineNumbers}
+			{showColorIndent}
+			{collapseOn}
+			{defaultExpanded}
+			{title}
+			{toolbarClass}
+			{toolbarTitleClass}
+			{toolbarActionsClass}
+			{toolbarButtonClass}
+			{toolbarExpandButtonClass}
+			{toolbarCollapseButtonClass}
+			{toolbarCopyButtonClass}
+			{toolbarSeparatorClass}
+			{toolbarActions}
+		/>
+	{/key}
+</div>

package/src/lib/components/extended/json-viewer/json-viewer.types.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from "svelte";
+import type { ClassValue } from "clsx";
+import type { HTMLAttributes } from "svelte/elements";
+
+import type { WithoutChildren } from "$lib/components/utils.js";
+
+export type JsonViewerCollapseOn = "click" | "doubleClick";
+
+export type JsonViewerDataType =
+	| "string"
+	| "number"
+	| "boolean"
+	| "null"
+	| "object"
+	| "array"
+	| "unknown";
+
+export type JsonViewerPathState = Record<string, boolean>;
+
+export type JsonViewerTruncationSettings = {
+	enabled: boolean;
+	itemsPerArray: number;
+};
+
+export type JsonViewerTruncation = Partial<JsonViewerTruncationSettings>;
+
+export type JsonViewerToolbarActionsSnippetProps = {
+	copyText: string;
+	onExpandAll: () => void;
+	onCollapseAll: () => void;
+};
+
+export type JsonViewerProps = WithoutChildren<HTMLAttributes<HTMLDivElement>> & {
+	data: unknown;
+	class?: ClassValue;
+	truncation?: JsonViewerTruncation;
+	showLineNumbers?: boolean;
+	showColorIndent?: boolean;
+	collapseOn?: JsonViewerCollapseOn;
+	defaultExpanded?: boolean | number;
+	title?: string | null;
+	toolbarClass?: ClassValue;
+	toolbarTitleClass?: ClassValue;
+	toolbarActionsClass?: ClassValue;
+	toolbarButtonClass?: ClassValue;
+	toolbarExpandButtonClass?: ClassValue;
+	toolbarCollapseButtonClass?: ClassValue;
+	toolbarCopyButtonClass?: ClassValue;
+	toolbarSeparatorClass?: ClassValue;
+	toolbarActions?: Snippet<[JsonViewerToolbarActionsSnippetProps]>;
+};

package/src/lib/components/extended/json-viewer/json-viewer.utils.ts

@@ -0,0 +1,329 @@
+import type {
+	JsonViewerDataType,
+	JsonViewerPathState,
+	JsonViewerTruncation,
+	JsonViewerTruncationSettings,
+} from "./json-viewer.types.js";
+
+export const DEFAULT_JSON_VIEWER_TRUNCATION: JsonViewerTruncationSettings = {
+	enabled: true,
+	itemsPerArray: 5,
+};
+
+export const JSON_VIEWER_INDENT_CLASSES = [
+	"border-red-300/60 dark:border-red-700/60",
+	"border-yellow-300/60 dark:border-yellow-700/60",
+	"border-green-300/60 dark:border-green-700/60",
+	"border-blue-300/60 dark:border-blue-700/60",
+	"border-purple-300/60 dark:border-purple-700/60",
+] as const;
+
+/**
+ * Resolves the public truncation prop into a complete settings object.
+ */
+export function resolveJsonViewerTruncation(
+	truncation?: JsonViewerTruncation,
+): JsonViewerTruncationSettings {
+	return {
+		enabled: truncation?.enabled ?? DEFAULT_JSON_VIEWER_TRUNCATION.enabled,
+		itemsPerArray: truncation?.itemsPerArray ?? DEFAULT_JSON_VIEWER_TRUNCATION.itemsPerArray,
+	};
+}
+
+/**
+ * Normalizes incoming data so JSON strings render as structured values when possible.
+ */
+export function normalizeJsonViewerData(data: unknown): unknown {
+	if (typeof data !== "string") {
+		return data;
+	}
+
+	const trimmed = data.trim();
+	if (!trimmed) {
+		return data;
+	}
+
+	try {
+		return JSON.parse(data) as unknown;
+	} catch {
+		return data;
+	}
+}
+
+/**
+ * Builds the copyable text representation for the viewer toolbar.
+ */
+export function getJsonViewerCopyText(data: unknown): string {
+	const normalized = normalizeJsonViewerData(data);
+
+	if (typeof data === "string" && normalized === data) {
+		return data;
+	}
+
+	return stringifyJsonViewerValue(normalized);
+}
+
+/**
+ * Safely stringifies viewer data for display or clipboard use.
+ */
+export function stringifyJsonViewerValue(value: unknown): string {
+	try {
+		const result = JSON.stringify(value, null, 2);
+		return result ?? String(value);
+	} catch {
+		return String(value);
+	}
+}
+
+/**
+ * Returns the display data type for a JSON value.
+ */
+export function getJsonViewerDataType(value: unknown): JsonViewerDataType {
+	if (value === null) {
+		return "null";
+	}
+
+	if (Array.isArray(value)) {
+		return "array";
+	}
+
+	const type = typeof value;
+	if (type === "string" || type === "number" || type === "boolean" || type === "object") {
+		return type;
+	}
+
+	return "unknown";
+}
+
+/**
+ * Returns whether the supplied value renders as an expandable collection.
+ */
+export function isJsonViewerCollection(value: unknown): boolean {
+	const type = getJsonViewerDataType(value);
+	return type === "object" || type === "array";
+}
+
+/**
+ * Creates the initial expansion map for the requested default depth.
+ */
+export function createJsonViewerExpandedPaths(
+	data: unknown,
+	defaultExpanded: boolean | number,
+): JsonViewerPathState {
+	if (!isJsonViewerCollection(data)) {
+		return {};
+	}
+
+	if (defaultExpanded === true) {
+		return generateJsonViewerExpandedPaths(data);
+	}
+
+	if (typeof defaultExpanded === "number") {
+		return generateJsonViewerExpandedPaths(data, defaultExpanded);
+	}
+
+	return { root: true };
+}
+
+/**
+ * Generates an expansion map for every collection path up to the requested depth.
+ */
+export function generateJsonViewerExpandedPaths(
+	data: unknown,
+	maxDepth: number = Number.POSITIVE_INFINITY,
+	currentDepth: number = 0,
+	currentPath: string = "root",
+): JsonViewerPathState {
+	const paths: JsonViewerPathState = {};
+	if (!isJsonViewerCollection(data) || currentDepth > maxDepth) {
+		return paths;
+	}
+
+	paths[currentPath] = true;
+
+	if (Array.isArray(data)) {
+		data.forEach((value, index) => {
+			Object.assign(
+				paths,
+				generateJsonViewerExpandedPaths(value, maxDepth, currentDepth + 1, `${currentPath}[${index}]`),
+			);
+		});
+
+		return paths;
+	}
+
+	Object.entries(data as Record<string, unknown>).forEach(([key, value]) => {
+		Object.assign(
+			paths,
+			generateJsonViewerExpandedPaths(value, maxDepth, currentDepth + 1, `${currentPath}.${key}`),
+		);
+	});
+
+	return paths;
+}
+
+/**
+ * Counts the currently visible logical lines in the rendered JSON tree.
+ */
+export function calculateJsonViewerVisibleLineCount(
+	data: unknown,
+	expandedPaths: JsonViewerPathState,
+	revealedPaths: JsonViewerPathState,
+	truncation: JsonViewerTruncationSettings,
+	path: string = "root",
+): number {
+	const type = getJsonViewerDataType(data);
+
+	if (type === "object") {
+		if (!expandedPaths[path]) {
+			return 1;
+		}
+
+		const entries = Object.entries(data as Record<string, unknown>);
+		if (entries.length === 0) {
+			return 2;
+		}
+
+		return (
+			2 +
+			entries.reduce((count, [key, value]) => {
+				return (
+					count +
+					calculateJsonViewerVisibleLineCount(
+						value,
+						expandedPaths,
+						revealedPaths,
+						truncation,
+						`${path}.${key}`,
+					)
+				);
+			}, 0)
+		);
+	}
+
+	if (type === "array") {
+		if (!expandedPaths[path]) {
+			return 1;
+		}
+
+		const items = data as unknown[];
+		if (items.length === 0) {
+			return 2;
+		}
+
+		const showAll = Boolean(revealedPaths[path]);
+			const visibleItems: unknown[] =
+				truncation.enabled && !showAll && items.length > truncation.itemsPerArray
+					? items.slice(0, truncation.itemsPerArray)
+					: items;
+		const hiddenLine = visibleItems.length < items.length ? 1 : 0;
+
+		return (
+			2 +
+			hiddenLine +
+				visibleItems.reduce((count: number, value, index) => {
+				return (
+					count +
+					calculateJsonViewerVisibleLineCount(
+						value,
+						expandedPaths,
+						revealedPaths,
+						truncation,
+						`${path}[${index}]`,
+					)
+				);
+			}, 0)
+		);
+	}
+
+	return 1;
+}
+
+/**
+ * Returns the color class used for scalar values.
+ */
+export function getJsonViewerTypeClass(type: JsonViewerDataType): string {
+	switch (type) {
+		case "string":
+			return "text-green-600 dark:text-green-400";
+		case "number":
+			return "text-orange-600 dark:text-orange-400";
+		case "boolean":
+			return "text-blue-600 dark:text-blue-400";
+		case "null":
+			return "text-muted-foreground";
+		default:
+			return "";
+	}
+}
+
+/**
+ * Detects date-like strings and unix timestamps for inline relative hints.
+ */
+export function detectJsonViewerDate(value: unknown): Date | null {
+	if (typeof value === "string") {
+		if (!/^\d{4}-\d{2}-\d{2}/.test(value)) {
+			return null;
+		}
+
+		const date = new Date(value);
+		return Number.isNaN(date.getTime()) ? null : date;
+	}
+
+	if (typeof value === "number") {
+		if (value >= 946684800 && value <= 4102444800) {
+			return new Date(value * 1000);
+		}
+
+		if (value >= 946684800000 && value <= 4102444800000) {
+			return new Date(value);
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Formats a date as a lightweight relative time label.
+ */
+export function formatJsonViewerRelativeTime(date: Date): string {
+	const diffInSeconds = Math.floor((Date.now() - date.getTime()) / 1000);
+	if (Math.abs(diffInSeconds) < 60) {
+		return "just now";
+	}
+
+	const intervals = {
+		year: 31_536_000,
+		month: 2_592_000,
+		week: 604_800,
+		day: 86_400,
+		hour: 3_600,
+		minute: 60,
+	};
+
+	for (const [unit, seconds] of Object.entries(intervals)) {
+		const amount = Math.floor(Math.abs(diffInSeconds) / seconds);
+		if (amount < 1) {
+			continue;
+		}
+
+		const suffix = diffInSeconds > 0 ? "ago" : "from now";
+		return `${amount} ${unit}${amount === 1 ? "" : "s"} ${suffix}`;
+	}
+
+	return "just now";
+}
+
+/**
+ * Returns whether a string should render as an external link.
+ */
+export function isJsonViewerUrl(value: string): boolean {
+	return /^https?:\/\//.test(value);
+}
+
+/**
+ * Returns whether a string should render with a color swatch.
+ */
+export function isJsonViewerColor(value: string): boolean {
+	return /^#([0-9a-f]{3}){1,2}$/i.test(value) || /^rgba?\(/.test(value) || /^hsla?\(/.test(value);
+}

package/src/lib/components/extended/loaders/index.ts

@@ -0,0 +1,3 @@
+import Message from "./loader-message.svelte";
+
+export { Message };

package/src/lib/components/extended/loaders/loader-message.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import * as Item from '$lib/components/ui/item/index.js';
+  import type {
+    ItemSize,
+    ItemVariant,
+  } from '$lib/components/ui/item/item.svelte';
+  import { Spinner } from '$lib/components/ui/spinner/index.js';
+  import { cn, type WithElementRef } from '$lib/components/utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+  } & {
+    title?: string | Snippet<[]>;
+    description?: string | Snippet<[]>;
+    icon?: Snippet<[]>;
+  };
+
+  let {
+    ref = $bindable(null),
+    child,
+    title = 'Loading',
+    description = 'Come back in a few minutes',
+    class: cls,
+    ...rest
+  }: Props = $props();
+
+  const mergedProps = $derived({
+    class: cn('flex w-full flex-col gap-4', cls),
+    'data-slot': 'loader-message',
+    ...rest,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {#if mergedProps.children}
+      {@render mergedProps.children?.()}
+    {:else}
+      <Item.Root variant="muted">
+        <Item.Media>
+          <Spinner />
+        </Item.Media>
+        <Item.Content>
+          <Item.Header>
+            {#if typeof title === 'string'}
+              {title}
+            {:else}
+              {@render title?.()}
+            {/if}
+          </Item.Header>
+          <Item.Description>
+            {#if typeof description === 'string'}
+              {description}
+            {:else}
+              {@render description?.()}
+            {/if}
+          </Item.Description>
+        </Item.Content>
+      </Item.Root>
+    {/if}
+  </div>
+{/if}
+
+<!-- <div
+  class={cn('rounded-xl bg-linear-to-r from-muted/40 via-muted/30 to-muted/10 p-4', cls)}
+  {...rest}
+>
+  <div class="flex items-center gap-3">
+    <div class="flex h-10 w-10 items-center justify-center rounded-sm bg-primary/10">
+      <RefreshCw class="size-5 animate-spin" />
+    </div>
+    <div class="flex flex-col text-sm leading-tight">
+      <span class="font-medium text-foreground">{title}</span>
+      <span class="text-muted-foreground">{description}</span>
+    </div>
+  </div>
+</div> -->

package/src/lib/components/extended/loaders/loader-message.svelte.test.ts

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import LoaderMessage from './loader-message.svelte';
+
+describe('LoaderMessage', () => {
+  it('renders a container with the loader-message data-slot', () => {
+    const { container } = render(LoaderMessage);
+    expect(container.querySelector('[data-slot="loader-message"]')).toBeTruthy();
+  });
+
+  it('shows the default title and description', () => {
+    const { getByText } = render(LoaderMessage);
+    expect(getByText('Loading')).toBeTruthy();
+    expect(getByText('Come back in a few minutes')).toBeTruthy();
+  });
+
+  it('shows a custom title when provided as a string', () => {
+    const { getByText } = render(LoaderMessage, { props: { title: 'Please wait' } });
+    expect(getByText('Please wait')).toBeTruthy();
+  });
+
+  it('shows a custom description when provided as a string', () => {
+    const { getByText } = render(LoaderMessage, {
+      props: { description: 'Processing your request' },
+    });
+    expect(getByText('Processing your request')).toBeTruthy();
+  });
+
+  it('passes extra HTML attributes to the root element', () => {
+    const { container } = render(LoaderMessage, { props: { id: 'my-loader' } });
+    expect(container.querySelector('#my-loader')).toBeTruthy();
+  });
+});