create-obsidian-arrow 0.2.1 → 0.3.0

package/template/src/viewer/token-utils.ts

@@ -0,0 +1,84 @@
+/**
+ * Pure token parsing/grouping for the reference index. The browser side feeds
+ * this CSSOM rule text (rule.cssText); keeping the parser string-in/data-out
+ * makes it node:test-able without a DOM.
+ */
+
+export interface TokenDecl {
+	name: string;
+	value: string;
+}
+
+export function parseCustomProps(cssText: string): TokenDecl[] {
+	const out: TokenDecl[] = [];
+	const re = /(--[A-Za-z0-9_-]+)\s*:\s*([^;}]+)/g;
+	let match = re.exec(cssText);
+	while (match !== null) {
+		out.push({ name: match[1], value: match[2].trim() });
+		match = re.exec(cssText);
+	}
+	return out;
+}
+
+const GROUP_PREFIXES: [string, string][] = [
+	["--size-", "Size & spacing"],
+	["--radius-", "Radius"],
+	["--color-", "Colors"],
+	["--background-", "Backgrounds"],
+	["--text-", "Text"],
+	["--font-", "Fonts & type"],
+	["--shadow-", "Shadows"],
+	["--interactive-", "Interactive"],
+	["--icon-", "Icons"],
+];
+const OTHER_LABEL = "Other";
+
+export interface TokenGroup {
+	label: string;
+	tokens: TokenDecl[];
+}
+
+export function groupTokens(decls: TokenDecl[]): TokenGroup[] {
+	const latest = new Map<string, string>();
+	for (const decl of decls) {
+		latest.set(decl.name, decl.value);
+	}
+	const buckets = new Map<string, TokenDecl[]>();
+	for (const [name, value] of latest) {
+		const label = GROUP_PREFIXES.find(([prefix]) => name.startsWith(prefix))?.[1] ?? OTHER_LABEL;
+		const bucket = buckets.get(label) ?? [];
+		bucket.push({ name, value });
+		buckets.set(label, bucket);
+	}
+	const order = [...GROUP_PREFIXES.map(([, label]) => label), OTHER_LABEL];
+	return order
+		.filter((label) => buckets.has(label))
+		.map((label) => ({
+			label,
+			tokens: (buckets.get(label) ?? []).sort((a, b) => a.name.localeCompare(b.name)),
+		}));
+}
+
+export type ValueKind = "color" | "length" | "other";
+
+export function classifyValue(resolved: string): ValueKind {
+	const value = resolved.trim();
+	if (
+		/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value) ||
+		/^(rgb|rgba|hsl|hsla)\(/i.test(value)
+	) {
+		return "color";
+	}
+	if (value === "0" || /^-?\d+(\.\d+)?(px|em|rem|%|ch|vw|vh|vmin|vmax|pt)$/.test(value)) {
+		return "length";
+	}
+	return "other";
+}
+
+export function filterTokens(decls: TokenDecl[], query: string): TokenDecl[] {
+	const q = query.trim().toLowerCase();
+	if (q === "") {
+		return decls;
+	}
+	return decls.filter((decl) => decl.name.toLowerCase().includes(q));
+}

package/template/src/viewer/tokens.ts

@@ -0,0 +1,30 @@
+import type { TokenDecl } from "./token-utils";
+import { parseCustomProps } from "./token-utils";
+
+/** Walk every same-origin stylesheet (recursing into @media etc.) and parse
+ * custom-property declarations out of each style rule's cssText. */
+export function collectTokenDecls(): TokenDecl[] {
+	const out: TokenDecl[] = [];
+	const walk = (rules: CSSRuleList): void => {
+		for (const rule of Array.from(rules)) {
+			if (rule instanceof CSSStyleRule) {
+				out.push(...parseCustomProps(rule.cssText));
+			} else if (rule instanceof CSSGroupingRule) {
+				walk(rule.cssRules);
+			}
+		}
+	};
+	for (const sheet of Array.from(document.styleSheets)) {
+		try {
+			walk(sheet.cssRules);
+		} catch {
+			// cross-origin sheet — skip
+		}
+	}
+	return out;
+}
+
+/** Resolved value of a token in the CURRENT theme. */
+export function resolveToken(name: string): string {
+	return getComputedStyle(document.body).getPropertyValue(name).trim();
+}

package/template/test/token-utils.test.mjs

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import {
+	classifyValue,
+	filterTokens,
+	groupTokens,
+	parseCustomProps,
+} from "../src/viewer/token-utils.ts";
+
+test("parseCustomProps extracts custom property declarations from rule text", () => {
+	const css = "body.theme-dark { --text-accent: #a288ff; --size-4-2: 8px; color: red; }";
+	assert.deepEqual(parseCustomProps(css), [
+		{ name: "--text-accent", value: "#a288ff" },
+		{ name: "--size-4-2", value: "8px" },
+	]);
+});
+
+test("parseCustomProps does not false-match var() references in values", () => {
+	const css = ".x { --a: var(--b); background: var(--c); }";
+	assert.deepEqual(parseCustomProps(css), [{ name: "--a", value: "var(--b)" }]);
+});
+
+test("groupTokens groups by prefix in stable order, dedupes last-wins, sorts names", () => {
+	const groups = groupTokens([
+		{ name: "--zeta-thing", value: "1" },
+		{ name: "--size-4-4", value: "16px" },
+		{ name: "--size-4-2", value: "8px" },
+		{ name: "--size-4-2", value: "9px" },
+		{ name: "--color-red", value: "#e11" },
+	]);
+	assert.deepEqual(
+		groups.map((g) => g.label),
+		["Size & spacing", "Colors", "Other"]
+	);
+	const size = groups[0];
+	assert.deepEqual(size.tokens, [
+		{ name: "--size-4-2", value: "9px" },
+		{ name: "--size-4-4", value: "16px" },
+	]);
+});
+
+test("classifyValue detects colors, lengths, other", () => {
+	assert.equal(classifyValue("#fff"), "color");
+	assert.equal(classifyValue("#a288ffcc"), "color");
+	assert.equal(classifyValue("rgba(0, 0, 0, 0.3)"), "color");
+	assert.equal(classifyValue("hsl(254, 80%, 68%)"), "color");
+	assert.equal(classifyValue("16px"), "length");
+	assert.equal(classifyValue("0.875em"), "length");
+	assert.equal(classifyValue("inherit"), "other");
+	assert.equal(classifyValue("var(--x)"), "other");
+	assert.equal(classifyValue("100%"), "length");
+	assert.equal(classifyValue("100vw"), "length");
+	assert.equal(classifyValue("0"), "length");
+	assert.equal(classifyValue("2pt"), "length");
+	assert.equal(classifyValue("#abc12"), "other");
+});
+
+test("filterTokens is a case-insensitive substring match; blank query passes all", () => {
+	const decls = [
+		{ name: "--text-accent", value: "x" },
+		{ name: "--size-4-2", value: "y" },
+	];
+	assert.deepEqual(filterTokens(decls, "ACCENT"), [decls[0]]);
+	assert.deepEqual(filterTokens(decls, "  "), decls);
+});

package/template/test/viewer-derive.test.mjs

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import {
+	buildStoryTree,
+	kebabCase,
+	storyMetaFromGlobKey,
+	titleFromSlug,
+} from "../src/viewer/derive.ts";
+
+test("kebabCase converts PascalCase and spaces/underscores", () => {
+	assert.equal(kebabCase("SettingsPanel"), "settings-panel");
+	assert.equal(kebabCase("Toggle"), "toggle");
+	assert.equal(kebabCase("message_feed thing"), "message-feed-thing");
+});
+
+test("titleFromSlug start-cases", () => {
+	assert.equal(titleFromSlug("settings-panel"), "Settings Panel");
+	assert.equal(titleFromSlug("toggle"), "Toggle");
+});
+
+test("storyMetaFromGlobKey derives slug + repo-relative paths", () => {
+	const meta = storyMetaFromGlobKey("../components/SettingsPanel.stories.ts");
+	assert.equal(meta.slug, "settings-panel");
+	assert.equal(meta.storiesPath, "src/components/SettingsPanel.stories.ts");
+	assert.equal(meta.componentPath, "src/components/SettingsPanel.ts");
+});
+
+test("storyMetaFromGlobKey handles nested directories", () => {
+	const meta = storyMetaFromGlobKey("../components/chat/MessageFeed.stories.ts");
+	assert.equal(meta.slug, "message-feed");
+	assert.equal(meta.storiesPath, "src/components/chat/MessageFeed.stories.ts");
+	assert.equal(meta.componentPath, "src/components/chat/MessageFeed.ts");
+});
+
+test("buildStoryTree nests children under parents", () => {
+	const { roots, unknownChildren } = buildStoryTree([
+		{ slug: "settings-panel", children: ["toggle"] },
+		{ slug: "toggle" },
+	]);
+	assert.equal(unknownChildren.length, 0);
+	assert.equal(roots.length, 1);
+	assert.equal(roots[0].slug, "settings-panel");
+	assert.equal(roots[0].children[0].slug, "toggle");
+});
+
+test("buildStoryTree reports unknown children and keeps them out of the tree", () => {
+	const { roots, unknownChildren } = buildStoryTree([{ slug: "a", children: ["ghost"] }]);
+	assert.deepEqual(unknownChildren, [{ parent: "a", child: "ghost" }]);
+	assert.equal(roots[0].children.length, 0);
+});
+
+test("buildStoryTree guards cycles: mutual refs fall back to flat roots", () => {
+	const { roots } = buildStoryTree([
+		{ slug: "a", children: ["b"] },
+		{ slug: "b", children: ["a"] },
+	]);
+	// both are referenced, so no natural roots — fall back to all items flat
+	assert.deepEqual(
+		roots.map((r) => r.slug),
+		["a", "b"]
+	);
+	// and recursion must not loop forever: nested child stops at the cycle
+	assert.equal(roots[0].children[0].slug, "b");
+	assert.equal(roots[0].children[0].children.length, 0);
+});

package/template/test/viewer-stories.test.mjs

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { defineStories, normalizeVariants, validateStoryDef } from "../src/viewer/stories.ts";
+
+test("defineStories is an identity that preserves the def", () => {
+	const def = { variants: { default: () => "x" } };
+	assert.equal(defineStories(def), def);
+});
+
+test("validateStoryDef accepts a minimal valid def", () => {
+	assert.deepEqual(validateStoryDef({ variants: { default: () => "x" } }), { ok: true });
+});
+
+test("validateStoryDef accepts full metadata incl. componentPath override", () => {
+	const def = {
+		title: "Toggle",
+		description: "d",
+		componentPath: "src/components/SettingsPanel.ts",
+		variants: { on: { render: () => "x", notes: "n" } },
+		children: ["other"],
+	};
+	assert.deepEqual(validateStoryDef(def), { ok: true });
+});
+
+test("validateStoryDef rejects non-objects and missing/empty variants", () => {
+	assert.equal(validateStoryDef(undefined).ok, false);
+	assert.equal(validateStoryDef(null).ok, false);
+	assert.equal(validateStoryDef({}).ok, false);
+	assert.equal(validateStoryDef({ variants: {} }).ok, false);
+});
+
+test("validateStoryDef rejects bad variant values and bad children", () => {
+	assert.equal(validateStoryDef({ variants: { a: 42 } }).ok, false);
+	assert.equal(validateStoryDef({ variants: { a: { notes: "no render" } } }).ok, false);
+	assert.equal(validateStoryDef({ variants: { a: () => "x" }, children: [1] }).ok, false);
+});
+
+test("normalizeVariants wraps bare functions and passes objects through", () => {
+	const fn = () => "x";
+	const out = normalizeVariants({ bare: fn, full: { render: fn, notes: "n" } });
+	assert.deepEqual(out.bare, { render: fn });
+	assert.equal(out.full.render, fn);
+	assert.equal(out.full.notes, "n");
+});

package/template/src/examples/ExamplesIndex.ts

@@ -1,36 +0,0 @@
-import { html } from "@arrow-js/core";
-import type { ArrowTemplate } from "@arrow-js/core";
-import type { Example } from "./registry";
-
-/**
- * Landing page at "/" — an Obsidian-styled list of the available example
- * components, each linking to its own route. Plain anchors (full reloads) keep
- * the router trivial; the sandbox doesn't need SPA navigation.
- */
-export const ExamplesIndex = (items: Example[]): ArrowTemplate => html`
-	<div class="oas-settings">
-		<div class="setting-item setting-item-heading">
-			<div class="setting-item-info">
-				<div class="setting-item-name">Examples</div>
-				<div class="setting-item-description">
-					Component demos rendered with real Obsidian styling.
-				</div>
-			</div>
-		</div>
-		${items.map((example) =>
-			html`
-					<div class="setting-item">
-						<div class="setting-item-info">
-							<div class="setting-item-name">
-								<a href="${example.path}">${example.label}</a>
-							</div>
-							<div class="setting-item-description">${example.description}</div>
-						</div>
-						<div class="setting-item-control">
-							<a class="mod-cta oas-open-link" href="${example.path}">Open</a>
-						</div>
-					</div>
-				`.key(example.path)
-		)}
-	</div>
-`;

package/template/src/examples/registry.ts

@@ -1,26 +0,0 @@
-import type { ArrowExpression } from "@arrow-js/core";
-import { SettingsPanel } from "../components/SettingsPanel";
-
-/**
- * Registry of example components, keyed by route path. Add a new demo here and
- * it shows up on the index page and at its own path automatically.
- */
-export interface Example {
-	path: string;
-	label: string;
-	description: string;
-	view: () => ArrowExpression;
-}
-
-export const examples: Example[] = [
-	{
-		path: "/example",
-		label: "Settings panel",
-		description: "Vertical tabs, toggles, a keyed list, and an async boundary() section.",
-		view: () => SettingsPanel(),
-	},
-];
-
-export function findExample(path: string): Example | undefined {
-	return examples.find((example) => example.path === path);
-}