create-obsidian-arrow 0.5.0 → 0.5.2

package/template/scripts/create-component.mjs

@@ -1,101 +0,0 @@
-#!/usr/bin/env node
-/**
- * Usage:
- *   pnpm create:component Composer                  → src/components/Composer/ (with CSS)
- *   pnpm create:component icons                     → src/components/icons.ts (flat, no args)
- *   pnpm create:component ChatView/ChatComposer      → src/views/ChatView/ChatComposer.ts (flat)
- *   pnpm create:component ChatView/Widget --css      → src/views/ChatView/Widget/ (with CSS)
- */
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-const args = process.argv.slice(2).filter((a) => !a.startsWith("--"));
-const flags = process.argv.slice(2).filter((a) => a.startsWith("--"));
-const withCss = flags.includes("--css");
-
-if (!args[0]) {
-	console.error("Usage: pnpm create:component <[ViewName/]ComponentName> [--css]");
-	process.exit(1);
-}
-
-const parts = args[0].split("/");
-const componentName = parts.pop();
-const parentView = parts[0]; // e.g. "ChatView" or undefined
-
-let srcDir;
-let storyPath;
-let isFolder;
-
-if (parentView) {
-	// View-specific: flat by default, folder with --css
-	const viewDir = path.join(root, "src", "views", parentView);
-	isFolder = withCss;
-	srcDir = isFolder ? path.join(viewDir, componentName) : viewDir;
-	storyPath = path.join(root, "stories", "views", parentView, `${componentName}.stories.ts`);
-} else {
-	// Primitive: folder with CSS by default
-	isFolder = true;
-	srcDir = path.join(root, "src", "components", componentName);
-	storyPath = path.join(root, "stories", "components", `${componentName}.stories.ts`);
-}
-
-const tsFile = path.join(srcDir, `${componentName}.ts`);
-const cssFile = isFolder ? path.join(srcDir, `${componentName}.css`) : null;
-
-// Component .ts stub
-const cssImport = cssFile ? `import "./${componentName}.css";\n` : "";
-const tsContent = `${cssImport}import { html } from "@arrow-js/core";
-import type { ArrowExpression } from "@arrow-js/core";
-
-export function ${componentName}(): ArrowExpression {
-	return html\`<div class="${componentName
-		.replace(/([A-Z])/g, (m, l, i) => (i ? "-" : "") + l.toLowerCase())
-		.replace(/^-/, "")}">TODO</div>\`;
-}
-`;
-
-// Story stub
-const importPath = "../../tools/viewer/stories";
-const componentImport = parentView
-	? `../../src/views/${parentView}/${componentName}`
-	: `../../src/components/${isFolder ? `${componentName}/` : ""}${componentName}`;
-const kindLine = parentView ? `\tkind: "component",\n` : "";
-
-const storyContent = `import { defineStories } from "${importPath}";
-import { ${componentName} } from "${componentImport}";
-
-export default defineStories({
-${kindLine}\tdescription: "TODO: describe ${componentName}.",
-\tstatus: "draft",
-\tvariants: {
-\t\tdefault: () => ${componentName}(),
-\t},
-});
-`;
-
-// Write files
-if (isFolder) fs.mkdirSync(srcDir, { recursive: true });
-else fs.mkdirSync(path.dirname(tsFile), { recursive: true });
-
-if (fs.existsSync(tsFile)) {
-	console.error(`Already exists: ${tsFile}`);
-	process.exit(1);
-}
-
-fs.writeFileSync(tsFile, tsContent);
-console.log(`Created: ${path.relative(root, tsFile)}`);
-
-if (cssFile) {
-	fs.writeFileSync(cssFile, `/* ${componentName} styles */\n`);
-	console.log(`Created: ${path.relative(root, cssFile)}`);
-}
-
-fs.mkdirSync(path.dirname(storyPath), { recursive: true });
-if (!fs.existsSync(storyPath)) {
-	fs.writeFileSync(storyPath, storyContent);
-	console.log(`Created: ${path.relative(root, storyPath)}`);
-} else {
-	console.log(`Story already exists, skipped: ${path.relative(root, storyPath)}`);
-}

package/template/scripts/create-view.mjs

@@ -1,75 +0,0 @@
-#!/usr/bin/env node
-/**
- * Usage:
- *   pnpm create:view ChatView   → src/views/ChatView/ + stories/views/ChatView.stories.ts
- */
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-const viewName = process.argv[2];
-
-if (!viewName) {
-	console.error("Usage: pnpm create:view <ViewName>");
-	process.exit(1);
-}
-
-const viewDir = path.join(root, "src", "views", viewName);
-const storyDir = path.join(root, "stories", "views");
-
-if (fs.existsSync(viewDir)) {
-	console.error(`Already exists: src/views/${viewName}/`);
-	process.exit(1);
-}
-
-fs.mkdirSync(viewDir, { recursive: true });
-fs.mkdirSync(storyDir, { recursive: true });
-
-const tsContent = `import "./${viewName}.css";
-import { component, html } from "@arrow-js/core";
-import type { ArrowTemplate } from "@arrow-js/core";
-
-export const ${viewName} = component((): ArrowTemplate => {
-	return html\`
-		<div class="oas-settings">
-			<div class="setting-item setting-item-heading">
-				<div class="setting-item-info">
-					<div class="setting-item-name">${viewName}</div>
-				</div>
-			</div>
-		</div>
-	\`;
-});
-`;
-
-const cssContent = `/* ${viewName} layout and chrome */\n`;
-
-const stateContent = `import { reactive } from "@arrow-js/core";
-
-export const state = reactive({
-	// TODO: add view state
-});
-`;
-
-const storyContent = `import { defineStories } from "../../tools/viewer/stories";
-import { ${viewName} } from "../../src/views/${viewName}/${viewName}";
-
-export default defineStories({
-	kind: "view",
-	description: "TODO: describe ${viewName}.",
-	status: "draft",
-	variants: {
-		default: () => ${viewName}(),
-	},
-});
-`;
-
-fs.writeFileSync(path.join(viewDir, `${viewName}.ts`), tsContent);
-fs.writeFileSync(path.join(viewDir, `${viewName}.css`), cssContent);
-fs.writeFileSync(path.join(viewDir, "state.ts"), stateContent);
-fs.writeFileSync(path.join(storyDir, `${viewName}.stories.ts`), storyContent);
-
-console.log(`Created src/views/${viewName}/`);
-console.log(`  ${viewName}.ts, ${viewName}.css, state.ts`);
-console.log(`Created stories/views/${viewName}.stories.ts`);

package/template/src/components/DiffViewer.ts

@@ -1,42 +0,0 @@
-import type { ArrowExpression } from "@arrow-js/core";
-import { markdown } from "@codemirror/lang-markdown";
-import { MergeView } from "@codemirror/merge";
-import { EditorState } from "@codemirror/state";
-
-export interface DiffViewerOptions {
-	original: string;
-	modified: string;
-	/** Which side shows original (a) and which shows modified (b). Default: a-b */
-	orientation?: "a-b" | "b-a";
-}
-
-/**
- * CodeMirror 6 MergeView — side-by-side diff using the same CM6 engine as
- * Obsidian's editor. Obsidian's app.css styles .cm-* classes automatically,
- * so this looks native without additional theming.
- *
- * Arrow's ArrowExpression type doesn't include Node but accepts it at runtime.
- * The cast is intentional — CM6 manages its own DOM and Arrow inserts it as-is.
- */
-export function DiffViewer(options: DiffViewerOptions): ArrowExpression {
-	const el = document.createElement("div");
-	el.className = "oas-diff-viewer";
-
-	new MergeView({
-		a: {
-			doc: options.original,
-			extensions: [markdown(), EditorState.readOnly.of(true)],
-		},
-		b: {
-			doc: options.modified,
-			extensions: [markdown(), EditorState.readOnly.of(true)],
-		},
-		parent: el,
-		orientation: options.orientation ?? "a-b",
-		highlightChanges: true,
-		collapseUnchanged: { margin: 3, minSize: 4 },
-	});
-
-	// biome-ignore lint/suspicious/noExplicitAny: Arrow accepts Node at runtime; type doesn't include it
-	return el as unknown as ArrowExpression;
-}

package/template/stories/DiffViewer.stories.ts

@@ -1,75 +0,0 @@
-import { DiffViewer } from "../src/components/DiffViewer";
-import { defineStories } from "../tools/viewer/stories";
-
-const ORIGINAL = `---
-title: Meeting Notes
-status: draft
----
-
-# Team Standup
-
-Quick notes from today's standup.
-
-## Done
-
-- Reviewed the PR for the search panel
-- Fixed the token filter in the reference viewer
-
-## In Progress
-
-- Arrow component for the diff viewer
-- Documentation updates
-
-## Notes
-
-See the project board for full task breakdown.
-`;
-
-const MODIFIED = `---
-title: Meeting Notes
-status: complete
-tags: [standup, team]
----
-
-# Team Standup — 2026-07-02
-
-Notes from today's standup.
-
-## Done
-
-- Reviewed and merged the PR for the search panel
-- Fixed the token filter in the reference viewer
-- Added DiffViewer component to the sandbox
-
-## In Progress
-
-- Documentation updates
-- Editor pane integration
-
-## Notes
-
-See the project board for full task breakdown.
-Next standup: Thursday.
-`;
-
-const SHORT_ORIGINAL = `function greet(name: string): string {
-	return "Hello, " + name;
-}
-`;
-
-const SHORT_MODIFIED = `function greet(name: string, greeting = "Hello"): string {
-	return \`\${greeting}, \${name}!\`;
-}
-`;
-
-export default defineStories({
-	description:
-		"CodeMirror 6 MergeView — side-by-side diff using the same engine as Obsidian's editor. Changed lines highlight inline; unchanged sections collapse.",
-	status: "draft",
-	variants: {
-		"markdown document": () => DiffViewer({ original: ORIGINAL, modified: MODIFIED }),
-		"code snippet": () => DiffViewer({ original: SHORT_ORIGINAL, modified: SHORT_MODIFIED }),
-		"reversed (b-a)": () =>
-			DiffViewer({ original: ORIGINAL, modified: MODIFIED, orientation: "b-a" }),
-	},
-});

package/template/stories/SettingsPanel.stories.ts

@@ -1,11 +0,0 @@
-import { SettingsPanel } from "../src/components/SettingsPanel";
-import { defineStories } from "../tools/viewer/stories";
-
-export default defineStories({
-	description: "Vertical tabs, toggles, a keyed list, and an async boundary() section.",
-	status: "live",
-	variants: {
-		default: () => SettingsPanel(),
-	},
-	children: ["toggle"],
-});

package/template/stories/Toggle.stories.ts

@@ -1,28 +0,0 @@
-import { reactive } from "@arrow-js/core";
-import { Toggle } from "../src/components/SettingsPanel";
-import { defineStories } from "../tools/viewer/stories";
-
-export default defineStories({
-	description: "Obsidian checkbox-container toggle used by SettingsPanel.",
-	componentPath: "src/components/SettingsPanel.ts",
-	status: "live",
-	variants: {
-		interactive: () => {
-			const state = reactive({ on: true });
-			return Toggle(
-				() => state.on,
-				() => {
-					state.on = !state.on;
-				}
-			);
-		},
-		off: {
-			render: () =>
-				Toggle(
-					() => false,
-					() => {}
-				),
-			notes: "Static off state (click does nothing).",
-		},
-	},
-});