@suryaravikumar/mdx-ui 0.0.1

package/dist/commands/add.d.ts

@@ -0,0 +1,5 @@
+import { Command } from 'commander';
+
+declare const add: Command;
+
+export { add };

package/dist/commands/add.js

@@ -0,0 +1,119 @@
+import { Command } from "commander";
+import prompts from "prompts";
+import chalk from "chalk";
+import ora from "ora";
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+import { getConfig } from "../utils/get-config.js";
+import { fetchComponent } from "../utils/fetch-component.js";
+import { installDependencies } from "../utils/install-deps.js";
+import { writeComponent } from "../utils/write-component.js";
+async function loadRegistry() {
+  try {
+    const __dirname2 = path.dirname(fileURLToPath(import.meta.url));
+    const possiblePaths = [
+      path.join(__dirname2, "../../../../registry/registry.json"),
+      path.join(__dirname2, "../../../registry/registry.json"),
+      path.join(__dirname2, "../../registry/registry.json")
+    ];
+    for (const registryPath of possiblePaths) {
+      if (await fs.pathExists(registryPath)) {
+        return await fs.readJSON(registryPath);
+      }
+    }
+  } catch (error) {
+  }
+  return {
+    components: [
+      { name: "blockquote", type: "mdx", description: "Styled quote blocks", files: [] },
+      { name: "callout", type: "mdx", description: "Alert boxes", files: [] },
+      { name: "code-block", type: "mdx", description: "Code blocks", files: [] },
+      { name: "emphasis", type: "mdx", description: "Bold/italic", files: [] },
+      { name: "headings", type: "mdx", description: "Headings", files: [] },
+      { name: "horizontal-rule", type: "mdx", description: "Dividers", files: [] },
+      { name: "image", type: "mdx", description: "Images", files: [] },
+      { name: "inline-code", type: "mdx", description: "Inline code", files: [] },
+      { name: "list", type: "mdx", description: "Lists", files: [] },
+      { name: "paragraph", type: "mdx", description: "Paragraphs", files: [] },
+      { name: "steps", type: "mdx", description: "Step guides", files: [] },
+      { name: "tabs", type: "mdx", description: "Tabs", files: [] }
+    ]
+  };
+}
+const add = new Command().name("add").description("Add components to your project").argument("[components...]", "components to add").action(async (components) => {
+  console.log();
+  const config = await getConfig();
+  if (!config) {
+    console.log(chalk.red("\u2717 No mdx-ui.json found"));
+    console.log(chalk.yellow("Run 'npx mdx-ui init' first"));
+    process.exit(1);
+  }
+  if (components.length === 0) {
+    const registry = await loadRegistry();
+    const mdxComponents = registry.components.filter((c) => c.type === "mdx");
+    const { selected } = await prompts({
+      type: "multiselect",
+      name: "selected",
+      message: "Which components would you like to add?",
+      choices: mdxComponents.map((c) => ({
+        title: c.name.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" "),
+        value: c.name,
+        description: c.description
+      }))
+    });
+    components = selected;
+  }
+  if (!components || components.length === 0) {
+    console.log(chalk.yellow("No components selected"));
+    process.exit(0);
+  }
+  const spinner = ora("Fetching components...").start();
+  try {
+    const componentsData = [];
+    const processedComponents = /* @__PURE__ */ new Set();
+    async function fetchComponentRecursive(componentName) {
+      if (processedComponents.has(componentName)) {
+        return;
+      }
+      processedComponents.add(componentName);
+      const data = await fetchComponent(componentName);
+      if (data.registryDependencies && data.registryDependencies.length > 0) {
+        for (const depName of data.registryDependencies) {
+          await fetchComponentRecursive(depName);
+        }
+      }
+      componentsData.push(data);
+    }
+    for (const component of components) {
+      await fetchComponentRecursive(component);
+    }
+    spinner.text = "Installing dependencies...";
+    const allDeps = /* @__PURE__ */ new Set();
+    for (const data of componentsData) {
+      data.dependencies?.forEach((dep) => allDeps.add(dep));
+    }
+    if (allDeps.size > 0) {
+      await installDependencies(Array.from(allDeps));
+    }
+    spinner.text = "Writing components...";
+    for (const data of componentsData) {
+      await writeComponent(data, config);
+    }
+    spinner.succeed("Components added successfully!");
+    console.log();
+    for (const component of components) {
+      console.log(chalk.green(`\u2713 ${component}`));
+    }
+    console.log();
+    console.log(chalk.bold("Done! \u{1F389}"));
+    console.log();
+  } catch (error) {
+    spinner.fail("Failed to add components");
+    console.error(chalk.red(error.message));
+    process.exit(1);
+  }
+});
+export {
+  add
+};

package/dist/commands/init.d.ts

@@ -0,0 +1,5 @@
+import { Command } from 'commander';
+
+declare const init: Command;
+
+export { init };

package/dist/commands/init.js

@@ -0,0 +1,83 @@
+import { Command } from "commander";
+import prompts from "prompts";
+import chalk from "chalk";
+import ora from "ora";
+import fs from "fs-extra";
+import path from "path";
+const init = new Command().name("init").description("Initialize your project for mdx-ui").action(async () => {
+  console.log(chalk.bold("\n\u2728 Welcome to mdx-ui!\n"));
+  const cwd = process.cwd();
+  const config = await prompts([
+    {
+      type: "text",
+      name: "componentsDir",
+      message: "Where should we put the components?",
+      initial: "components/mdx"
+    },
+    {
+      type: "confirm",
+      name: "typescript",
+      message: "Are you using TypeScript?",
+      initial: true
+    },
+    {
+      type: "confirm",
+      name: "tailwind",
+      message: "Are you using Tailwind CSS?",
+      initial: true
+    }
+  ]);
+  const spinner = ora("Initializing project...").start();
+  try {
+    const componentsPath = path.join(cwd, config.componentsDir);
+    await fs.ensureDir(componentsPath);
+    const libPath = path.join(cwd, path.dirname(config.componentsDir), "lib");
+    await fs.ensureDir(libPath);
+    const utilsContent = config.typescript ? `import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+` : `import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
+`;
+    await fs.writeFile(
+      path.join(libPath, config.typescript ? "utils.ts" : "utils.js"),
+      utilsContent
+    );
+    const configFile = {
+      $schema: "https://mdx-ui.com/schema.json",
+      componentsDir: config.componentsDir,
+      typescript: config.typescript,
+      tailwind: config.tailwind
+    };
+    await fs.writeJSON(path.join(cwd, "mdx-ui.json"), configFile, {
+      spaces: 2
+    });
+    spinner.succeed("Project initialized!");
+    console.log(chalk.green("\n\u2713 Created mdx-ui.json"));
+    console.log(chalk.green(`\u2713 Created ${config.componentsDir}/`));
+    console.log(
+      chalk.green(
+        `\u2713 Created ${path.dirname(config.componentsDir)}/lib/utils.${config.typescript ? "ts" : "js"}`
+      )
+    );
+    console.log(chalk.bold("\n\u{1F389} You're all set!\n"));
+    console.log("Next steps:");
+    console.log(chalk.cyan("  npx mdx-ui add callout"));
+    console.log(chalk.cyan("  npx mdx-ui list"));
+    console.log();
+  } catch (error) {
+    spinner.fail("Failed to initialize project");
+    console.error(error);
+    process.exit(1);
+  }
+});
+export {
+  init
+};

package/dist/commands/list.d.ts

@@ -0,0 +1,5 @@
+import { Command } from 'commander';
+
+declare const list: Command;
+
+export { list };

package/dist/commands/list.js

@@ -0,0 +1,66 @@
+import { Command } from "commander";
+import chalk from "chalk";
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+async function loadRegistry() {
+  try {
+    const __dirname2 = path.dirname(fileURLToPath(import.meta.url));
+    const possiblePaths = [
+      path.join(__dirname2, "../../../../registry/registry.json"),
+      path.join(__dirname2, "../../../registry/registry.json"),
+      path.join(__dirname2, "../../registry/registry.json")
+    ];
+    for (const registryPath of possiblePaths) {
+      if (await fs.pathExists(registryPath)) {
+        return await fs.readJSON(registryPath);
+      }
+    }
+  } catch (error) {
+  }
+  return {
+    components: [
+      { name: "blockquote", type: "mdx", description: "Styled quote blocks with optional citation", files: [] },
+      { name: "callout", type: "mdx", description: "Alert boxes for important information", files: [] },
+      { name: "code-block", type: "mdx", description: "Syntax highlighted code blocks", files: [] },
+      { name: "emphasis", type: "mdx", description: "Text emphasis (bold/italic)", files: [] },
+      { name: "headings", type: "mdx", description: "Headings with anchor links", files: [] },
+      { name: "horizontal-rule", type: "mdx", description: "Divider lines with multiple styles", files: [] },
+      { name: "image", type: "mdx", description: "Images with optional captions", files: [] },
+      { name: "inline-code", type: "mdx", description: "Inline code snippets", files: [] },
+      { name: "list", type: "mdx", description: "Styled ordered and unordered lists", files: [] },
+      { name: "paragraph", type: "mdx", description: "Text paragraphs", files: [] },
+      { name: "steps", type: "mdx", description: "Numbered step-by-step guides", files: [] },
+      { name: "tabs", type: "mdx", description: "Tabbed content sections", files: [] },
+      { name: "utils", type: "utility", description: "Utility functions (cn)", files: [] }
+    ]
+  };
+}
+const list = new Command().name("list").description("List all available components").action(async () => {
+  console.log();
+  console.log(chalk.bold("Available components:\n"));
+  const registry = await loadRegistry();
+  const mdxComponents = registry.components.filter((c) => c.type === "mdx");
+  const utilityComponents = registry.components.filter((c) => c.type === "utility");
+  if (mdxComponents.length > 0) {
+    console.log(chalk.bold("  MDX Components:"));
+    for (const component of mdxComponents) {
+      const deps = component.registryDependencies?.length ? chalk.dim(` (requires: ${component.registryDependencies.join(", ")})`) : "";
+      console.log(chalk.cyan(`    ${component.name.padEnd(18)}`), component.description + deps);
+    }
+    console.log();
+  }
+  if (utilityComponents.length > 0) {
+    console.log(chalk.bold("  Utilities:"));
+    for (const component of utilityComponents) {
+      console.log(chalk.cyan(`    ${component.name.padEnd(18)}`), component.description);
+    }
+    console.log();
+  }
+  console.log(chalk.dim("Usage:"));
+  console.log(chalk.dim("  npx mdx-ui add <component>"));
+  console.log();
+});
+export {
+  list
+};

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { add } from "./commands/add.js";
+import { init } from "./commands/init.js";
+import { list } from "./commands/list.js";
+const packageJson = {
+  name: "mdx-ui",
+  version: "0.0.1"
+};
+process.on("SIGINT", () => process.exit(0));
+process.on("SIGTERM", () => process.exit(0));
+async function main() {
+  const program = new Command().name("mdx-ui").description("Add beautiful MDX components to your project").version(
+    packageJson.version || "0.0.1",
+    "-v, --version",
+    "display the version number"
+  );
+  program.addCommand(init).addCommand(add).addCommand(list);
+  program.parse();
+}
+main();

package/dist/utils/fetch-component.d.ts

@@ -0,0 +1,12 @@
+interface ComponentData {
+    name: string;
+    files: Array<{
+        path: string;
+        content: string;
+    }>;
+    dependencies?: string[];
+    registryDependencies?: string[];
+}
+declare function fetchComponent(name: string): Promise<ComponentData>;
+
+export { type ComponentData, fetchComponent };

package/dist/utils/fetch-component.js

@@ -0,0 +1,35 @@
+import axios from "axios";
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+const REGISTRY_URL = "https://raw.githubusercontent.com/yourusername/mdx-ui/main/registry/mdx";
+async function fetchComponent(name) {
+  try {
+    const __dirname2 = path.dirname(fileURLToPath(import.meta.url));
+    const possiblePaths = [
+      path.join(__dirname2, "../../../../registry/mdx", `${name}.json`),
+      path.join(__dirname2, "../../../registry/mdx", `${name}.json`),
+      path.join(__dirname2, "../../registry/mdx", `${name}.json`)
+    ];
+    for (const registryPath of possiblePaths) {
+      if (await fs.pathExists(registryPath)) {
+        const data = await fs.readJSON(registryPath);
+        return data;
+      }
+    }
+  } catch (error) {
+  }
+  try {
+    const url = `${REGISTRY_URL}/${name}.json`;
+    const response = await axios.get(url);
+    return response.data;
+  } catch (error) {
+    if (error.response?.status === 404) {
+      throw new Error(`Component "${name}" not found`);
+    }
+    throw new Error(`Failed to fetch component: ${error.message}`);
+  }
+}
+export {
+  fetchComponent
+};

package/dist/utils/get-config.d.ts

@@ -0,0 +1,8 @@
+interface Config {
+    componentsDir: string;
+    typescript: boolean;
+    tailwind: boolean;
+}
+declare function getConfig(): Promise<Config | null>;
+
+export { type Config, getConfig };

package/dist/utils/get-config.js

@@ -0,0 +1,19 @@
+import fs from "fs-extra";
+import path from "path";
+async function getConfig() {
+  const cwd = process.cwd();
+  const configPath = path.join(cwd, "mdx-ui.json");
+  try {
+    const exists = await fs.pathExists(configPath);
+    if (!exists) {
+      return null;
+    }
+    const config = await fs.readJSON(configPath);
+    return config;
+  } catch (error) {
+    return null;
+  }
+}
+export {
+  getConfig
+};

package/dist/utils/install-deps.d.ts

@@ -0,0 +1,3 @@
+declare function installDependencies(deps: string[]): Promise<void>;
+
+export { installDependencies };

package/dist/utils/install-deps.js

@@ -0,0 +1,23 @@
+import { execa } from "execa";
+async function installDependencies(deps) {
+  if (deps.length === 0) return;
+  const packageManager = await detectPackageManager();
+  const args = packageManager === "npm" ? ["install", ...deps] : ["add", ...deps];
+  await execa(packageManager, args, {
+    cwd: process.cwd()
+  });
+}
+async function detectPackageManager() {
+  const { stdout } = await execa("which", ["pnpm"], {
+    reject: false
+  });
+  if (stdout) return "pnpm";
+  const { stdout: yarnStdout } = await execa("which", ["yarn"], {
+    reject: false
+  });
+  if (yarnStdout) return "yarn";
+  return "npm";
+}
+export {
+  installDependencies
+};

package/dist/utils/write-component.d.ts

@@ -0,0 +1,6 @@
+import { Config } from './get-config.js';
+import { ComponentData } from './fetch-component.js';
+
+declare function writeComponent(component: ComponentData, config: Config): Promise<void>;
+
+export { writeComponent };

package/dist/utils/write-component.js

@@ -0,0 +1,13 @@
+import fs from "fs-extra";
+import path from "path";
+async function writeComponent(component, config) {
+  const cwd = process.cwd();
+  for (const file of component.files) {
+    const filePath = path.join(cwd, config.componentsDir, file.path);
+    await fs.ensureDir(path.dirname(filePath));
+    await fs.writeFile(filePath, file.content, "utf-8");
+  }
+}
+export {
+  writeComponent
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@suryaravikumar/mdx-ui",
+  "version": "0.0.1",
+  "description": "Add MDX components to your project",
+  "license": "MIT",
+  "type": "module",
+  "author": {
+    "name": "ida02pingala06",
+    "url": "https://github.com/ida02pingala06"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ida02pingala06/mdx-ui.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://github.com/ida02pingala06/mdx-ui#readme",
+  "bugs": {
+    "url": "https://github.com/ida02pingala06/mdx-ui/issues"
+  },
+  "exports": "./dist/index.js",
+  "bin": {
+    "mdx-ui": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "commander": "^11.1.0",
+    "prompts": "^2.4.2",
+    "chalk": "^5.3.0",
+    "ora": "^8.0.1",
+    "execa": "^8.0.1",
+    "fs-extra": "^11.2.0",
+    "axios": "^1.6.7",
+    "zod": "^3.22.4",
+    "cosmiconfig": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.0.2",
+    "typescript": "^5.5.3"
+  }
+}