draft-cli 0.1.0 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @draft-ui/cli
 
+## 0.1.3
+
+### Patch Changes
+
+- 2240f28: fix draft-cli command not found error
+
+## 0.1.1
+
+### Patch Changes
+
+- fc5f354: fix draft-cli not work error
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/index.js

@@ -0,0 +1,240 @@
+// src/bin/index.ts
+import { createRequire as createRequire2 } from "module";
+import { Command } from "commander";
+
+// src/commands/add.ts
+import { createRequire } from "module";
+import path2 from "path";
+import chalk from "chalk";
+import fs2 from "fs-extra";
+import ora from "ora";
+
+// src/utils/config.ts
+import path from "path";
+import fs from "fs-extra";
+import { z } from "zod";
+var configSchema = z.object({
+  style: z.string(),
+  rsc: z.boolean(),
+  tsx: z.boolean(),
+  tailwind: z.object({
+    config: z.string(),
+    css: z.string(),
+    baseColor: z.string(),
+    cssVariables: z.boolean()
+  }),
+  aliases: z.object({
+    components: z.string(),
+    utils: z.string(),
+    ui: z.string().optional(),
+    draft: z.string().optional()
+  })
+});
+async function getConfig(cwd) {
+  const configPath = path.resolve(cwd, "components.json");
+  if (!await fs.pathExists(configPath)) {
+    return null;
+  }
+  try {
+    const config = await fs.readJson(configPath);
+    return configSchema.parse(config);
+  } catch (error) {
+    throw new Error(`Invalid configuration: ${error}`);
+  }
+}
+
+// src/commands/add.ts
+var require2 = createRequire(import.meta.url);
+var pkg = {};
+try {
+  pkg = require2("../../package.json");
+} catch {
+  try {
+    pkg = require2("../package.json");
+  } catch {
+  }
+}
+function transformImports(content, config) {
+  let res = content.replace(/@\/lib\/utils/g, config.aliases.utils);
+  if (config.aliases.ui != null) {
+    res = res.replace(/@\/components\/ui/g, config.aliases.ui);
+  }
+  if (config.aliases.draft != null) {
+    res = res.replace(/@\/components\/draft/g, config.aliases.draft);
+  }
+  return res;
+}
+function getTargetDir(cwd, config, componentName, isRegistry) {
+  const folderName = isRegistry ? componentName.charAt(0).toUpperCase() + componentName.slice(1) : componentName;
+  const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace("@/", "src/");
+  return path2.resolve(cwd, targetBase, folderName);
+}
+async function installDependencies(dependencies, cwd, spinner) {
+  if (!dependencies || dependencies.length === 0)
+    return;
+  spinner.text = `Installing dependencies: ${dependencies.join(", ")}...`;
+  const { execa } = await import("execa");
+  try {
+    await execa("pnpm", ["add", ...dependencies], { cwd });
+    spinner.succeed(chalk.green("Dependencies installed."));
+  } catch (err) {
+    spinner.warn(chalk.yellow(`Failed to install dependencies: ${err.message}`));
+  }
+}
+async function addComponent(componentName, type) {
+  const cwd = process.cwd();
+  const config = await getConfig(cwd);
+  if (!config) {
+    console.log(chalk.red("\nNo components.json found. Please run init first (simulated).\n"));
+    return;
+  }
+  const spinner = ora(`Adding ${componentName}...`).start();
+  try {
+    const monorepoRoot = path2.resolve(import.meta.url.replace("file://", ""), "../../../../");
+    const sourceDir = path2.resolve(
+      monorepoRoot,
+      "packages",
+      type,
+      "src",
+      "components",
+      componentName
+    );
+    if (await fs2.pathExists(sourceDir)) {
+      const targetDir = getTargetDir(cwd, config, componentName, false);
+      await fs2.ensureDir(targetDir);
+      await fs2.copy(sourceDir, targetDir);
+      const processDir = async (dir) => {
+        const entries = await fs2.readdir(dir);
+        for (const entry of entries) {
+          const fullPath = path2.resolve(dir, entry);
+          const stat = await fs2.stat(fullPath);
+          if (stat.isDirectory()) {
+            await processDir(fullPath);
+          } else if (stat.isFile() && /\.(?:ts|tsx|vue|js|jsx)$/.test(entry)) {
+            const content = await fs2.readFile(fullPath, "utf-8");
+            const transformedContent = transformImports(content, config);
+            await fs2.writeFile(fullPath, transformedContent);
+          }
+        }
+      };
+      await processDir(targetDir);
+      const registryPath = path2.resolve(monorepoRoot, "packages", type, "src", "registry.json");
+      if (await fs2.pathExists(registryPath)) {
+        const registry = await fs2.readJson(registryPath);
+        const componentMeta = registry.components?.[componentName];
+        if ((componentMeta?.dependencies?.length ?? 0) > 0) {
+          await installDependencies(componentMeta.dependencies, cwd, spinner);
+        }
+      }
+      spinner.succeed(chalk.green(`Component ${componentName} added successfully to ${targetDir}`));
+      return;
+    }
+    if (typeof pkg.register === "string") {
+      spinner.text = `Checking registry ${pkg.register}...`;
+      try {
+        const registryUrl = `${pkg.register}/packages/${type}/src/registry.json`;
+        const registryRes = await fetch(registryUrl);
+        if (!registryRes.ok)
+          throw new Error(`Failed to fetch registry: ${registryRes.statusText}`);
+        const registry = await registryRes.json();
+        const componentMeta = registry.components[componentName];
+        if (componentMeta == null) {
+          spinner.fail(chalk.red(`Component ${componentName} not found in registry.`));
+          return;
+        }
+        if ((componentMeta.files?.length ?? 0) === 0) {
+          spinner.fail(chalk.red(`Component ${componentName} has no files listed in registry.`));
+          return;
+        }
+        spinner.text = `Fetching ${componentName} files...`;
+        const targetDir = getTargetDir(cwd, config, componentName, true);
+        await fs2.ensureDir(targetDir);
+        for (const file of componentMeta.files) {
+          const fileUrl = `${pkg.register}/packages/${type}/src/components/${componentName}/${file}`;
+          const fileRes = await fetch(fileUrl);
+          if (!fileRes.ok)
+            throw new Error(`Failed to fetch file ${file}: ${fileRes.statusText}`);
+          const content = await fileRes.text();
+          const transformedContent = transformImports(content, config);
+          await fs2.writeFile(path2.resolve(targetDir, file), transformedContent);
+        }
+        if (componentMeta.dependencies?.length) {
+          await installDependencies(componentMeta.dependencies, cwd, spinner);
+        }
+        spinner.succeed(chalk.green(`Component ${componentName} added from registry.`));
+        return;
+      } catch (error) {
+        spinner.fail(chalk.red(`Failed to fetch from registry: ${error.message}`));
+        return;
+      }
+    }
+    spinner.fail(chalk.red(`Component ${componentName} not found for ${type}.`));
+  } catch (error) {
+    spinner.fail(chalk.red(`Failed to add component: ${error}`));
+  }
+}
+
+// src/commands/init.ts
+import path3 from "path";
+import chalk2 from "chalk";
+import fs3 from "fs-extra";
+import ora2 from "ora";
+var DEFAULT_CONFIG = {
+  style: "default",
+  rsc: false,
+  tsx: true,
+  tailwind: {
+    config: "tailwind.config.js",
+    css: "src/index.css",
+    baseColor: "slate",
+    cssVariables: true
+  },
+  aliases: {
+    components: "@/components",
+    utils: "@/lib/utils",
+    ui: "@/components/ui",
+    draft: "@/components/draft"
+  }
+};
+async function initProject() {
+  const cwd = process.cwd();
+  const configPath = path3.resolve(cwd, "components.json");
+  if (await fs3.pathExists(configPath)) {
+    console.log(chalk2.yellow("\ncomponents.json already exists.\n"));
+    return;
+  }
+  const spinner = ora2("Initializing project...").start();
+  try {
+    await fs3.writeJson(configPath, DEFAULT_CONFIG, { spaces: 2 });
+    spinner.succeed(chalk2.green("Initialized components.json successfully!"));
+  } catch (error) {
+    spinner.fail(chalk2.red(`Failed to initialize project: ${error}`));
+  }
+}
+
+// src/bin/index.ts
+var require3 = createRequire2(import.meta.url);
+var pkg2 = { version: "0.0.1" };
+try {
+  pkg2 = require3("../../package.json");
+} catch {
+  try {
+    pkg2 = require3("../package.json");
+  } catch {
+    pkg2 = { version: "0.0.1" };
+  }
+}
+var program = new Command();
+program.name("draft-cli").description("CLI for adding components to your projects").version(pkg2.version);
+program.command("init").description("initialize your project and create a components.json file").action(async () => {
+  await initProject();
+});
+var vue = program.command("vue").description("Vue components commands");
+vue.command("add").description("add a Vue component to your project").argument("<component>", "the component to add").action(async (component) => {
+  await addComponent(component, "vue");
+});
+var react = program.command("react").description("React components commands");
+react.command("add").description("add a React component to your project").argument("<component>", "the component to add").action(async (component) => {
+  await addComponent(component, "react");
+});
+program.parse();

package/package.json

@@ -1,16 +1,9 @@
 {
   "name": "draft-cli",
-  "version": "0.1.0",
+  "type": "module",
+  "version": "0.1.3",
   "private": false,
   "description": "A command-line tool for adding components to your Vue and React projects. Inspired by shadcn/ui.",
-  "type": "module",
-  "keywords": [
-    "ui-kit",
-    "vue",
-    "react",
-    "cli",
-    "shadcn"
-  ],
   "license": "MIT",
   "homepage": "https://preflower.github.io/draft-ui/",
   "repository": {
@@ -18,8 +11,15 @@
     "url": "git+https://github.com/preflower/draft-ui.git",
     "directory": "packages/cli"
   },
+  "keywords": [
+    "ui-kit",
+    "vue",
+    "react",
+    "cli",
+    "shadcn"
+  ],
   "bin": {
-    "draft-cli": "./dist/index.js"
+    "draft-cli": "./dist/index.mjs"
   },
   "publishConfig": {
     "access": "public",

package/src/bin/index.ts

@@ -1,4 +1,4 @@
-import { createRequire } from 'module'
+import { createRequire } from 'node:module'
 
 import { Command } from 'commander'
 
@@ -15,10 +15,12 @@ let pkg: PackageJson = { version: '0.0.1' }
 
 try {
   pkg = require('../../package.json')
-} catch {
+}
+catch {
   try {
     pkg = require('../package.json')
-  } catch {
+  }
+  catch {
     pkg = { version: '0.0.1' }
   }
 }

package/src/commands/add.ts

@@ -1,10 +1,12 @@
-import { createRequire } from 'module'
-import path from 'path'
+import type { Ora } from 'ora'
+import type { Config } from '../utils/config.js'
 
+import { createRequire } from 'node:module'
+import path from 'node:path'
 import chalk from 'chalk'
 import fs from 'fs-extra'
-import ora from 'ora'
 
+import ora from 'ora'
 import { getConfig } from '../utils/config.js'
 
 const require = createRequire(import.meta.url)
@@ -27,30 +29,65 @@ let pkg: PackageJson = {}
 
 try {
   pkg = require('../../package.json') as PackageJson
-} catch {
+}
+catch {
   try {
     pkg = require('../package.json') as PackageJson
-  } catch {
+  }
+  catch {
     // pkg is already {}
   }
 }
 
-export async function addComponent (componentName: string, type: 'vue' | 'react') {
+function transformImports(content: string, config: Config) {
+  let res = content.replace(/@\/lib\/utils/g, config.aliases.utils)
+  if (config.aliases.ui != null) {
+    res = res.replace(/@\/components\/ui/g, config.aliases.ui)
+  }
+  if (config.aliases.draft != null) {
+    res = res.replace(/@\/components\/draft/g, config.aliases.draft)
+  }
+  return res
+}
+
+function getTargetDir(cwd: string, config: Config, componentName: string, isRegistry: boolean) {
+  // Use TitleCase for registry components to match original logic, or componentName for local
+  // Note: preserving original behavior where registry used TitleCase
+  const folderName = isRegistry
+    ? componentName.charAt(0).toUpperCase() + componentName.slice(1)
+    : componentName
+
+  const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace('@/', 'src/')
+  return path.resolve(cwd, targetBase, folderName)
+}
+
+async function installDependencies(dependencies: string[] | undefined, cwd: string, spinner: Ora) {
+  if (!dependencies || dependencies.length === 0)
+    return
+
+  spinner.text = `Installing dependencies: ${dependencies.join(', ')}...`
+  const { execa } = await import('execa')
+  try {
+    await execa('pnpm', ['add', ...dependencies], { cwd })
+    spinner.succeed(chalk.green('Dependencies installed.'))
+  }
+  catch (err) {
+    spinner.warn(chalk.yellow(`Failed to install dependencies: ${(err as Error).message}`))
+  }
+}
+
+export async function addComponent(componentName: string, type: 'vue' | 'react') {
   const cwd = process.cwd()
   const config = await getConfig(cwd)
 
   if (!config) {
     console.log(chalk.red('\nNo components.json found. Please run init first (simulated).\n'))
-    // For now, we'll just use defaults if no config is found to demonstrate
     return
   }
 
   const spinner = ora(`Adding ${componentName}...`).start()
 
   try {
-    // Determine source path within monorepo
-    // In a real scenario, this would fetch from a registry or use a relative path in dev
-    // For this demo, we'll assume the CLI is run from the monorepo root or we know where the packages are
     const monorepoRoot = path.resolve(import.meta.url.replace('file://', ''), '../../../../')
     const sourceDir = path.resolve(
       monorepoRoot,
@@ -58,107 +95,100 @@ export async function addComponent (componentName: string, type: 'vue' | 'react'
       type,
       'src',
       'components',
-      componentName
+      componentName,
     )
 
-    if (!(await fs.pathExists(sourceDir))) {
-      if (typeof pkg.register === 'string') {
-        spinner.text = `Checking registry ${pkg.register}...`
-        try {
-          const registryUrl = `${pkg.register}/packages/${type}/src/registry.json`
-          const registryRes = await fetch(registryUrl)
-          if (!registryRes.ok) {
-            throw new Error(`Failed to fetch registry from ${registryUrl}: ${registryRes.statusText}`)
+    // Check if local source exists
+    if (await fs.pathExists(sourceDir)) {
+      const targetDir = getTargetDir(cwd, config, componentName, false)
+      await fs.ensureDir(targetDir)
+      await fs.copy(sourceDir, targetDir)
+
+      const processDir = async (dir: string) => {
+        const entries = await fs.readdir(dir)
+        for (const entry of entries) {
+          const fullPath = path.resolve(dir, entry)
+          const stat = await fs.stat(fullPath)
+          if (stat.isDirectory()) {
+            await processDir(fullPath)
           }
-          const registry = (await registryRes.json()) as Registry
-          const componentMeta = registry.components[componentName]
-
-          if (componentMeta == null) {
-            spinner.fail(chalk.red(`Component ${componentName} not found in registry.`))
-            return
+          else if (stat.isFile() && /\.(?:ts|tsx|vue|js|jsx)$/.test(entry)) {
+            const content = await fs.readFile(fullPath, 'utf-8')
+            const transformedContent = transformImports(content, config)
+            await fs.writeFile(fullPath, transformedContent)
           }
+        }
+      }
+      await processDir(targetDir)
+
+      // Handle dependencies from registry.json
+      const registryPath = path.resolve(monorepoRoot, 'packages', type, 'src', 'registry.json')
+      if (await fs.pathExists(registryPath)) {
+        const registry = (await fs.readJson(registryPath)) as Registry
+        const componentMeta = registry.components?.[componentName]
+        if ((componentMeta?.dependencies?.length ?? 0) > 0) {
+          await installDependencies(componentMeta!.dependencies, cwd, spinner)
+        }
+      }
 
-          if (!componentMeta.files || !Array.isArray(componentMeta.files)) {
-            spinner.fail(chalk.red(`Component ${componentName} has no files listed in registry.`))
-            return
-          }
-
-          spinner.text = `Fetching ${componentName} files...`
-
-          const titleCaseComponentName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-
-          // Determine target path using config aliases
-          // Use the ui alias if available, otherwise fallback to components
-          const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace('@/', 'src/')
-          const targetDir = path.resolve(cwd, targetBase, titleCaseComponentName) // Use TitleCase for directory
-
-          await fs.ensureDir(targetDir)
+      spinner.succeed(chalk.green(`Component ${componentName} added successfully to ${targetDir}`))
+      return
+    }
 
-          for (const file of componentMeta.files) {
-            const fileUrl = `${pkg.register}/packages/${type}/src/components/${componentName}/${file}`
-            const fileRes = await fetch(fileUrl)
-            if (!fileRes.ok) {
-              throw new Error(`Failed to fetch file ${file}: ${fileRes.statusText}`)
-            }
-            const content = await fileRes.text()
-            await fs.writeFile(path.resolve(targetDir, file), content)
-          }
+    // Check registry
+    if (typeof pkg.register === 'string') {
+      spinner.text = `Checking registry ${pkg.register}...`
+      try {
+        const registryUrl = `${pkg.register}/packages/${type}/src/registry.json`
+        const registryRes = await fetch(registryUrl)
+        if (!registryRes.ok)
+          throw new Error(`Failed to fetch registry: ${registryRes.statusText}`)
 
-          // Handle dependencies
-          if (componentMeta.dependencies != null && componentMeta.dependencies.length > 0) {
-            spinner.text = `Installing dependencies for ${componentName}: ${componentMeta.dependencies.join(', ')}...`
-            const { execa } = await import('execa')
-            try {
-              await execa('pnpm', ['add', ...componentMeta.dependencies], { cwd })
-            } catch (err) {
-              spinner.warn(chalk.yellow(`Component added, but failed to install dependencies: ${(err as Error).message}`))
-            }
-          }
+        const registry = (await registryRes.json()) as Registry
+        const componentMeta = registry.components[componentName]
 
-          spinner.succeed(chalk.green(`Component ${componentName} added from registry.`))
-          return
-        } catch (error) {
-          spinner.fail(chalk.red(`Failed to fetch from registry: ${(error as Error).message}`))
+        if (componentMeta == null) {
+          spinner.fail(chalk.red(`Component ${componentName} not found in registry.`))
           return
         }
-      }
 
-      spinner.fail(chalk.red(`Component ${componentName} not found for ${type}.`))
-      return
-    }
+        if ((componentMeta.files?.length ?? 0) === 0) {
+          spinner.fail(chalk.red(`Component ${componentName} has no files listed in registry.`))
+          return
+        }
 
-    // Determine target path using config aliases
-    // Use the ui alias if available, otherwise fallback to components
-    const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace('@/', 'src/')
-    const targetDir = path.resolve(cwd, targetBase, componentName)
+        spinner.text = `Fetching ${componentName} files...`
 
-    await fs.ensureDir(targetDir)
-    await fs.copy(sourceDir, targetDir)
+        const targetDir = getTargetDir(cwd, config, componentName, true)
+        await fs.ensureDir(targetDir)
 
-    // Handle dependencies from registry.json
-    const registryPath = path.resolve(monorepoRoot, 'packages', type, 'src', 'registry.json')
-    if (await fs.pathExists(registryPath)) {
-      const registry = await fs.readJson(registryPath)
-      const componentMeta = registry.components[componentName]
+        for (const file of componentMeta.files!) {
+          const fileUrl = `${pkg.register}/packages/${type}/src/components/${componentName}/${file}`
+          const fileRes = await fetch(fileUrl)
+          if (!fileRes.ok)
+            throw new Error(`Failed to fetch file ${file}: ${fileRes.statusText}`)
 
-      if (componentMeta?.dependencies?.length > 0) {
-        spinner.text = `Installing dependencies for ${componentName}: ${componentMeta.dependencies.join(', ')}...`
+          const content = await fileRes.text()
+          const transformedContent = transformImports(content, config)
+          await fs.writeFile(path.resolve(targetDir, file), transformedContent)
+        }
 
-        // Detect package manager (assuming pnpm for now as per project requirements)
-        const { execa } = await import('execa')
-        try {
-          await execa('pnpm', ['add', ...componentMeta.dependencies], { cwd })
-          spinner.succeed(chalk.green(`Component ${componentName} and its dependencies added successfully.`))
-          return
-        } catch (err) {
-          spinner.warn(chalk.yellow(`Component copied, but failed to install dependencies: ${(err as Error).message}`))
-          return
+        if (componentMeta.dependencies?.length) {
+          await installDependencies(componentMeta.dependencies, cwd, spinner)
         }
+
+        spinner.succeed(chalk.green(`Component ${componentName} added from registry.`))
+        return
+      }
+      catch (error) {
+        spinner.fail(chalk.red(`Failed to fetch from registry: ${(error as Error).message}`))
+        return
       }
     }
 
-    spinner.succeed(chalk.green(`Component ${componentName} added successfully to ${targetDir}`))
-  } catch (error) {
+    spinner.fail(chalk.red(`Component ${componentName} not found for ${type}.`))
+  }
+  catch (error) {
     spinner.fail(chalk.red(`Failed to add component: ${error}`))
   }
 }

package/src/commands/init.ts

@@ -1,4 +1,4 @@
-import path from 'path'
+import path from 'node:path'
 
 import chalk from 'chalk'
 import fs from 'fs-extra'
@@ -12,17 +12,17 @@ const DEFAULT_CONFIG = {
     config: 'tailwind.config.js',
     css: 'src/index.css',
     baseColor: 'slate',
-    cssVariables: true
+    cssVariables: true,
   },
   aliases: {
     components: '@/components',
     utils: '@/lib/utils',
     ui: '@/components/ui',
-    draft: '@/components/draft'
-  }
+    draft: '@/components/draft',
+  },
 }
 
-export async function initProject () {
+export async function initProject() {
   const cwd = process.cwd()
   const configPath = path.resolve(cwd, 'components.json')
 
@@ -36,7 +36,8 @@ export async function initProject () {
   try {
     await fs.writeJson(configPath, DEFAULT_CONFIG, { spaces: 2 })
     spinner.succeed(chalk.green('Initialized components.json successfully!'))
-  } catch (error) {
+  }
+  catch (error) {
     spinner.fail(chalk.red(`Failed to initialize project: ${error}`))
   }
 }

package/src/utils/config.ts

@@ -1,4 +1,4 @@
-import path from 'path'
+import path from 'node:path'
 
 import fs from 'fs-extra'
 import { z } from 'zod'
@@ -11,19 +11,19 @@ export const configSchema = z.object({
     config: z.string(),
     css: z.string(),
     baseColor: z.string(),
-    cssVariables: z.boolean()
+    cssVariables: z.boolean(),
   }),
   aliases: z.object({
     components: z.string(),
     utils: z.string(),
     ui: z.string().optional(),
-    draft: z.string().optional()
-  })
+    draft: z.string().optional(),
+  }),
 })
 
-export type Config = z.infer<typeof configSchema>;
+export type Config = z.infer<typeof configSchema>
 
-export async function getConfig (cwd: string) {
+export async function getConfig(cwd: string) {
   const configPath = path.resolve(cwd, 'components.json')
   if (!(await fs.pathExists(configPath))) {
     return null
@@ -32,7 +32,8 @@ export async function getConfig (cwd: string) {
   try {
     const config = await fs.readJson(configPath)
     return configSchema.parse(config)
-  } catch (error) {
+  }
+  catch (error) {
     throw new Error(`Invalid configuration: ${error}`)
   }
 }