@vx-oss/docs-shadcn 1.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Fuma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { GetManualInstallationOptions, ManualInstallationSnippet } from "./manual-installation.js";
+//#region src/index.d.ts
+interface ShadcnRegistryOptions {
+  /** file path of `registry.json` */
+  registryPath: string;
+}
+declare function createShadcnDocs(options: ShadcnRegistryOptions): {
+  getManualInstallation: (options: GetManualInstallationOptions) => Promise<ManualInstallationSnippet[]>;
+};
+//#endregion
+export { type GetManualInstallationOptions, type ManualInstallationSnippet, ShadcnRegistryOptions, createShadcnDocs };

package/dist/index.js

@@ -0,0 +1,12 @@
+import { getManualInstallation } from "./manual-installation.js";
+import path from "node:path";
+//#region src/index.ts
+function createShadcnDocs(options) {
+	const ctx = {
+		registryJsonPath: options.registryPath,
+		dir: path.dirname(options.registryPath)
+	};
+	return { getManualInstallation: getManualInstallation.bind(ctx) };
+}
+//#endregion
+export { createShadcnDocs };

package/dist/manual-installation.d.ts

@@ -0,0 +1,36 @@
+import "./types.js";
+import { PM } from "./utils.js";
+//#region src/manual-installation.d.ts
+type ManualInstallationSnippet = {
+  lang: string;
+  code: string;
+  path: string;
+  title: string;
+  kind: 'file';
+} | {
+  kind: 'docs';
+  content: string;
+} | {
+  kind: 'cssVars' | 'css' | 'tailwind' | 'envVars';
+  lang: string;
+  code: string;
+} | {
+  kind: 'dependencies' | 'devDependencies' | 'registryDependencies';
+  lang: string;
+  codeTabs: Record<PM, string>;
+  dependencies: string[];
+};
+interface GetManualInstallationOptions {
+  /**
+   * Registry item name to generate snippets for.
+   */
+  name: string;
+  /**
+   * Include snippets from `registryDependencies` that exist in the same registry.
+   *
+   * @defaultValue `true`
+   */
+  includeRegistryDependencies?: boolean;
+}
+//#endregion
+export { GetManualInstallationOptions, ManualInstallationSnippet };

package/dist/manual-installation.js

@@ -0,0 +1,187 @@
+import { formatAddCommand, formatInstallCommand, getRegistryItemPath, resolveRegistryDependency } from "./utils.js";
+import path from "node:path";
+import fs from "node:fs/promises";
+//#region src/manual-installation.ts
+async function getManualInstallation(options) {
+	const { name, includeRegistryDependencies = true } = options;
+	const items = await collectItems.call(this, name, includeRegistryDependencies);
+	if (items.length === 0) return [];
+	const snippets = [];
+	const dependencies = /* @__PURE__ */ new Set();
+	const devDependencies = /* @__PURE__ */ new Set();
+	const registryDependencies = /* @__PURE__ */ new Set();
+	for (const item of items) {
+		if (item.dependencies) for (const dep of item.dependencies) dependencies.add(dep);
+		if (item.devDependencies) for (const dep of item.devDependencies) devDependencies.add(dep);
+		if (!includeRegistryDependencies && item.registryDependencies) for (const dep of item.registryDependencies) registryDependencies.add(dep);
+		if (item.docs) snippets.push({
+			kind: "docs",
+			content: item.docs
+		});
+		if (item.envVars && Object.keys(item.envVars).length > 0) snippets.push({
+			kind: "envVars",
+			lang: "dotenv",
+			code: formatEnvVars(item.envVars)
+		});
+		if (item.cssVars && hasCssVars(item.cssVars)) snippets.push({
+			kind: "cssVars",
+			lang: "css",
+			code: formatCssVars(item.cssVars)
+		});
+		if (item.css && Object.keys(item.css).length > 0) snippets.push({
+			kind: "css",
+			lang: "css",
+			code: formatCssRules(item.css)
+		});
+		if (item.tailwind?.config && Object.keys(item.tailwind.config).length > 0) snippets.push({
+			kind: "tailwind",
+			lang: "ts",
+			code: `export default ${JSON.stringify(item.tailwind.config, null, 2)}`
+		});
+		for (const file of item.files ?? []) {
+			if (!file.content) continue;
+			const displayPath = getDisplayPath(file);
+			snippets.push({
+				kind: "file",
+				title: path.basename(file.path),
+				lang: getLanguage(file.path),
+				code: file.content,
+				path: displayPath
+			});
+		}
+	}
+	return [...createInstallSnippets({
+		dependencies: Array.from(dependencies),
+		devDependencies: Array.from(devDependencies),
+		registryDependencies: Array.from(registryDependencies)
+	}), ...snippets];
+}
+async function collectItems(name, includeRegistryDependencies) {
+	const all = /* @__PURE__ */ new Map();
+	const queue = [getRegistryItemPath.call(this, name)];
+	for (const item of queue) {
+		const content = await fs.readFile(item, "utf-8").catch(() => null);
+		if (!content) {
+			all.set(item, null);
+			continue;
+		}
+		const parsed = JSON.parse(content);
+		all.set(item, parsed);
+		if (!includeRegistryDependencies || !parsed.registryDependencies) continue;
+		for (const dep of parsed.registryDependencies) {
+			const { local } = resolveRegistryDependency(dep);
+			if (!local) continue;
+			const depPath = getRegistryItemPath.call(this, dep);
+			if (!all.has(depPath)) queue.push(depPath);
+		}
+	}
+	const out = [];
+	for (const v of all.values()) if (v) out.push(v);
+	return out;
+}
+function createInstallSnippets({ dependencies, devDependencies, registryDependencies }) {
+	const snippets = [];
+	if (dependencies.length > 0) snippets.push({
+		kind: "dependencies",
+		lang: "bash",
+		codeTabs: formatInstallCommand(dependencies),
+		dependencies
+	});
+	if (devDependencies.length > 0) snippets.push({
+		kind: "devDependencies",
+		lang: "bash",
+		codeTabs: formatInstallCommand(devDependencies, true),
+		dependencies: devDependencies
+	});
+	if (registryDependencies.length > 0) snippets.push({
+		kind: "registryDependencies",
+		lang: "bash",
+		codeTabs: formatAddCommand(registryDependencies),
+		dependencies: registryDependencies
+	});
+	return snippets;
+}
+function getDisplayPath(file) {
+	if (file.target) return file.target.startsWith("~/") ? file.target.slice(2) : file.target;
+	switch (file.type) {
+		case "registry:ui": return `components/ui/${path.basename(file.path)}`;
+		case "registry:component": return `components/${path.basename(file.path)}`;
+		case "registry:hook": return `lib/hooks/${path.basename(file.path)}`;
+		case "registry:lib": return `lib/${path.basename(file.path)}`;
+		case "registry:block": return `components/${path.basename(file.path)}`;
+		default: return file.path;
+	}
+}
+/** get Shiki supported language/grammar */
+function getLanguage(filePath) {
+	if (path.basename(filePath).startsWith(".env")) return "dotenv";
+	const ext = path.extname(filePath);
+	switch (ext) {
+		case ".mts":
+		case ".cts": return "ts";
+		case ".mjs":
+		case ".cjs": return "js";
+		default: return ext.slice(1);
+	}
+}
+function hasCssVars(cssVars) {
+	return Boolean(cssVars.theme && Object.keys(cssVars.theme).length > 0 || cssVars.light && Object.keys(cssVars.light).length > 0 || cssVars.dark && Object.keys(cssVars.dark).length > 0);
+}
+function formatCssVars(cssVars) {
+	const lines = ["@layer base {"];
+	const rootVars = {
+		...cssVars.theme,
+		...cssVars.light
+	};
+	if (Object.keys(rootVars).length > 0) {
+		lines.push("  :root {");
+		for (const [key, value] of Object.entries(rootVars)) {
+			lines.push(`    /* [!code ++] */`);
+			lines.push(`    --${key}: ${value};`);
+		}
+		lines.push("  }");
+	}
+	if (cssVars.dark && Object.keys(cssVars.dark).length > 0) {
+		lines.push("  .dark {");
+		for (const [key, value] of Object.entries(cssVars.dark)) {
+			lines.push(`    /* [!code ++] */`);
+			lines.push(`    --${key}: ${value};`);
+		}
+		lines.push("  }");
+	}
+	lines.push("}");
+	return lines.join("\n");
+}
+function formatCssRules(css, indent = 0) {
+	const pad = "  ".repeat(indent);
+	const lines = [];
+	for (const [selector, value] of Object.entries(css)) {
+		if (typeof value === "string") {
+			lines.push(`${pad}/* [!code ++] */`);
+			lines.push(`${pad}${selector}: ${value};`);
+			continue;
+		}
+		if (Array.isArray(value)) {
+			lines.push(`${pad}/* [!code ++] */`);
+			lines.push(`${pad}${selector} ${value.join(" ")};`);
+			continue;
+		}
+		if (value && typeof value === "object") {
+			if (selector.startsWith("@")) {
+				lines.push(`${pad}${selector} {`);
+				lines.push(formatCssRules(value, indent + 1));
+				lines.push(`${pad}}`);
+			} else {
+				lines.push(`${pad}${selector} {`);
+				lines.push(formatCssRules(value, indent + 1));
+				lines.push(`${pad}}`);
+			}
+		}
+	}
+	return lines.join("\n");
+}
+function formatEnvVars(envVars) {
+	return Object.entries(envVars).map(([key, value]) => `${key}=${JSON.stringify(value)}`).join("\n");
+}
+//#endregion
+export { getManualInstallation };

package/dist/rsc.d.ts

@@ -0,0 +1,7 @@
+import { ManualInstallationSnippet } from "./manual-installation.js";
+//#region src/rsc.d.ts
+declare function Snippet({ item }: {
+  item: ManualInstallationSnippet;
+}): Promise<import("react").JSX.Element>;
+//#endregion
+export { Snippet };

package/dist/rsc.js

@@ -0,0 +1,50 @@
+import { ServerCodeBlock } from "@vx-oss/docs-react/components/codeblock.rsc";
+import { transformerIcon } from "@vx-oss/docs-core/mdx-plugins/transformer-icon";
+import { CodeBlockTab, CodeBlockTabs, CodeBlockTabsList, CodeBlockTabsTrigger } from "@vx-oss/docs-react/components/codeblock";
+import { transformerNotationDiff } from "@shikijs/transformers";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/rsc.tsx
+const transformers = [transformerNotationDiff(), transformerIcon()];
+function getTitle(item) {
+	switch (item.kind) {
+		case "file": return item.path;
+		case "cssVars":
+		case "css": return "globals.css";
+		case "envVars": return ".env.local";
+		case "tailwind": return "tailwind.config.js";
+	}
+}
+async function Snippet({ item }) {
+	if (item.kind === "docs") return /* @__PURE__ */ jsx("p", {
+		className: "text-fd-muted-foreground text-sm whitespace-pre-wrap",
+		children: item.content
+	});
+	switch (item.kind) {
+		case "dependencies":
+		case "devDependencies":
+		case "registryDependencies":
+			const tabs = Object.entries(item.codeTabs);
+			return /* @__PURE__ */ jsxs(CodeBlockTabs, {
+				defaultValue: tabs[0][0],
+				children: [/* @__PURE__ */ jsx(CodeBlockTabsList, { children: tabs.map(([t]) => /* @__PURE__ */ jsx(CodeBlockTabsTrigger, {
+					value: t,
+					children: t
+				}, t)) }), tabs.map(([k, v]) => /* @__PURE__ */ jsx(CodeBlockTab, {
+					value: k,
+					children: /* @__PURE__ */ jsx(ServerCodeBlock, {
+						code: v,
+						lang: item.lang
+					})
+				}, k))]
+			});
+	}
+	const title = getTitle(item);
+	return /* @__PURE__ */ jsx(ServerCodeBlock, {
+		code: item.code,
+		lang: item.lang,
+		codeblock: { title },
+		transformers
+	});
+}
+//#endregion
+export { Snippet };

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+import "shadcn/schema";
+import "zod-3";

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+import "./types.js";
+//#region src/utils.d.ts
+type PM = 'npm' | 'pnpm' | 'yarn' | 'bun';
+//#endregion
+export { PM };

package/dist/utils.js

@@ -0,0 +1,28 @@
+import path from "node:path";
+//#region src/utils.ts
+function getRegistryItemPath(name) {
+	return path.join(this.dir, name + ".json");
+}
+function formatAddCommand(components) {
+	const list = components.join(" ");
+	return {
+		npm: `npx shadcn@latest add ${list}`,
+		pnpm: `pnpm dlx shadcn@latest add ${list}`,
+		yarn: `yarn dlx shadcn@latest add ${list}`,
+		bun: `bunx shadcn@latest add ${list}`
+	};
+}
+function formatInstallCommand(packages, dev = false) {
+	const pkgList = packages.join(" ");
+	return {
+		npm: dev ? `npm install -D ${pkgList}` : `npm install ${pkgList}`,
+		pnpm: dev ? `pnpm add -D ${pkgList}` : `pnpm add ${pkgList}`,
+		yarn: dev ? `yarn add -D ${pkgList}` : `yarn add ${pkgList}`,
+		bun: dev ? `bun add -d ${pkgList}` : `bun add ${pkgList}`
+	};
+}
+function resolveRegistryDependency(dep) {
+	return { local: !dep.startsWith("http://") && !dep.startsWith("https://") };
+}
+//#endregion
+export { formatAddCommand, formatInstallCommand, getRegistryItemPath, resolveRegistryDependency };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@vx-oss/docs-shadcn",
+  "version": "1.0.3",
+  "description": "Shadcn UI integration for Fumadocs.",
+  "keywords": [
+    "Fumadocs"
+  ],
+  "license": "MIT",
+  "author": "Fuma Nama",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vezham/fumadocs",
+    "directory": "packages/shadcn"
+  },
+  "files": [
+    "css",
+    "dist"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./rsc": "./dist/rsc.js",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@shikijs/transformers": "^4.4.3",
+    "zod-3": "npm:zod@^3.25.76"
+  },
+  "devDependencies": {
+    "@types/node": "26.3.0",
+    "@types/react": "^19.2.18",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "shadcn": "^4.19.0",
+    "tailwindcss": "^4.3.3",
+    "tsdown": "0.22.14",
+    "@vx-oss/docs-core": "1.0.3",
+    "@vx-oss/docs-react": "1.0.3",
+    "tsconfig": "0.0.1"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "shadcn": "^4",
+    "@vx-oss/docs-core": "^1.0.1",
+    "@vx-oss/docs-react": "^1.0.1"
+  },
+  "peerDependenciesMeta": {
+    "shadcn": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "clean": "rimraf dist",
+    "dev": "tsdown --watch",
+    "lint": "oxlint .",
+    "types:check": "tsc --noEmit"
+  }
+}