draft-cli 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @draft-ui/cli
+
+## 0.0.2
+
+### Patch Changes
+
+- bce4721: chore: initial

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ted
+
+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/README.md

@@ -0,0 +1,86 @@
+# Draft UI CLI
+
+[![Documentation](https://img.shields.io/badge/docs-online-6366f1?style=flat-square)](https://preflower.github.io/draft-ui/)
+
+A command-line tool for adding components to your Vue and React projects. Inspired by [shadcn/ui](https://ui.shadcn.com/).
+
+## Documentation
+
+For full documentation, visit [preflower.github.io/draft-ui](https://preflower.github.io/draft-ui/).
+
+## Installation
+
+You can install the CLI globally or use it with your favorite package manager:
+
+```bash
+# Global installation
+npm install -g draft-ui
+# or
+pnpm add -g draft-ui
+
+# Or use it directly without installation
+pnpm dlx draft-ui init
+npx draft-ui init
+```
+
+## Usage
+
+The CLI provides two main entry points depending on your framework: `draft-vue` and `draft-react`.
+
+### Initialize
+
+Initialize your project and create a `components.json` file:
+
+```bash
+# For Vue projects
+pnpm draft-vue init
+
+# For React projects
+pnpm draft-react init
+```
+
+### Add Components
+
+Add a component to your project:
+
+```bash
+# For Vue
+pnpm draft-vue add button
+
+# For React
+pnpm draft-react add button
+```
+
+## Configuration
+
+The CLI uses a `components.json` file in your project root to manage paths and settings.
+
+### Schema
+
+```json
+{
+  "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"
+  }
+}
+```
+
+## Credits
+
+This project is heavily inspired by [shadcn/ui](https://ui.shadcn.com/).
+
+## License
+
+MIT

package/dist/chunk-TY6E2FMX.js

@@ -0,0 +1,191 @@
+// 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 {
+  }
+}
+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)) {
+      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}`);
+          }
+          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 || !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);
+          const targetBase2 = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace("@/", "src/");
+          const targetDir2 = path2.resolve(cwd, targetBase2, titleCaseComponentName);
+          await fs2.ensureDir(targetDir2);
+          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 fs2.writeFile(path2.resolve(targetDir2, file), content);
+          }
+          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.message}`));
+            }
+          }
+          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}.`));
+      return;
+    }
+    const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace("@/", "src/");
+    const targetDir = path2.resolve(cwd, targetBase, componentName);
+    await fs2.ensureDir(targetDir);
+    await fs2.copy(sourceDir, 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) {
+        spinner.text = `Installing dependencies for ${componentName}: ${componentMeta.dependencies.join(", ")}...`;
+        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.message}`));
+          return;
+        }
+      }
+    }
+    spinner.succeed(chalk.green(`Component ${componentName} added successfully to ${targetDir}`));
+  } 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}`));
+  }
+}
+
+export {
+  addComponent,
+  initProject
+};

package/dist/react.d.ts

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

package/dist/react.js

@@ -0,0 +1,16 @@
+import {
+  addComponent,
+  initProject
+} from "./chunk-TY6E2FMX.js";
+
+// src/bin/react.ts
+import { Command } from "commander";
+var program = new Command();
+program.name("draft-react").description("CLI for adding React components").version("0.0.1");
+program.command("add").description("add a component to your project").argument("<component>", "the component to add").action(async (component) => {
+  await addComponent(component, "react");
+});
+program.command("init").description("initialize your project and create a components.json file").action(async () => {
+  await initProject();
+});
+program.parse();

package/dist/vue.d.ts

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

package/dist/vue.js

@@ -0,0 +1,16 @@
+import {
+  addComponent,
+  initProject
+} from "./chunk-TY6E2FMX.js";
+
+// src/bin/vue.ts
+import { Command } from "commander";
+var program = new Command();
+program.name("draft-vue").description("CLI for adding Vue components").version("0.0.1");
+program.command("add").description("add a component to your project").argument("<component>", "the component to add").action(async (component) => {
+  await addComponent(component, "vue");
+});
+program.command("init").description("initialize your project and create a components.json file").action(async () => {
+  await initProject();
+});
+program.parse();

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "draft-cli",
+  "version": "0.0.2",
+  "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": {
+    "type": "git",
+    "url": "git+https://github.com/preflower/draft-ui.git",
+    "directory": "packages/cli"
+  },
+  "bin": {
+    "draft-vue": "./dist/vue.js",
+    "draft-react": "./dist/react.js"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "execa": "^8.0.1",
+    "fs-extra": "^11.2.0",
+    "ora": "^7.0.1",
+    "prompts": "^2.4.2",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.10.5",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "register": "https://raw.githubusercontent.com/preflower/draft-ui/main",
+  "scripts": {
+    "build": "tsup src/bin/vue.ts src/bin/react.ts --format esm --clean --dts",
+    "dev": "tsup src/bin/vue.ts src/bin/react.ts --format esm --watch --clean"
+  }
+}

package/src/bin/react.ts

@@ -0,0 +1,28 @@
+import { Command } from 'commander'
+
+import { addComponent } from '../commands/add.js'
+import { initProject } from '../commands/init.js'
+
+const program = new Command()
+
+program
+  .name('draft-react')
+  .description('CLI for adding React components')
+  .version('0.0.1')
+
+program
+  .command('add')
+  .description('add a component to your project')
+  .argument('<component>', 'the component to add')
+  .action(async (component) => {
+    await addComponent(component, 'react')
+  })
+
+program
+  .command('init')
+  .description('initialize your project and create a components.json file')
+  .action(async () => {
+    await initProject()
+  })
+
+program.parse()

package/src/bin/vue.ts

@@ -0,0 +1,28 @@
+import { Command } from 'commander'
+
+import { addComponent } from '../commands/add.js'
+import { initProject } from '../commands/init.js'
+
+const program = new Command()
+
+program
+  .name('draft-vue')
+  .description('CLI for adding Vue components')
+  .version('0.0.1')
+
+program
+  .command('add')
+  .description('add a component to your project')
+  .argument('<component>', 'the component to add')
+  .action(async (component) => {
+    await addComponent(component, 'vue')
+  })
+
+program
+  .command('init')
+  .description('initialize your project and create a components.json file')
+  .action(async () => {
+    await initProject()
+  })
+
+program.parse()

package/src/commands/add.ts

@@ -0,0 +1,164 @@
+import { createRequire } from 'module'
+import path from 'path'
+
+import chalk from 'chalk'
+import fs from 'fs-extra'
+import ora from 'ora'
+
+import { getConfig } from '../utils/config.js'
+
+const require = createRequire(import.meta.url)
+
+interface RegistryComponent {
+  dependencies: string[]
+  files?: string[]
+}
+
+interface Registry {
+  components: Record<string, RegistryComponent>
+}
+
+interface PackageJson {
+  register?: string
+  [key: string]: unknown
+}
+
+let pkg: PackageJson = {}
+
+try {
+  pkg = require('../../package.json') as PackageJson
+} catch {
+  try {
+    pkg = require('../package.json') as PackageJson
+  } catch {
+    // pkg is already {}
+  }
+}
+
+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,
+      'packages',
+      type,
+      'src',
+      'components',
+      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}`)
+          }
+          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
+          }
+
+          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)
+
+          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)
+          }
+
+          // 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}`))
+            }
+          }
+
+          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.fail(chalk.red(`Component ${componentName} not found for ${type}.`))
+      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)
+
+    await fs.ensureDir(targetDir)
+    await fs.copy(sourceDir, 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]
+
+      if (componentMeta?.dependencies?.length > 0) {
+        spinner.text = `Installing dependencies for ${componentName}: ${componentMeta.dependencies.join(', ')}...`
+
+        // 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
+        }
+      }
+    }
+
+    spinner.succeed(chalk.green(`Component ${componentName} added successfully to ${targetDir}`))
+  } catch (error) {
+    spinner.fail(chalk.red(`Failed to add component: ${error}`))
+  }
+}

package/src/commands/init.ts

@@ -0,0 +1,42 @@
+import path from 'path'
+
+import chalk from 'chalk'
+import fs from 'fs-extra'
+import ora from 'ora'
+
+const 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'
+  }
+}
+
+export async function initProject () {
+  const cwd = process.cwd()
+  const configPath = path.resolve(cwd, 'components.json')
+
+  if (await fs.pathExists(configPath)) {
+    console.log(chalk.yellow('\ncomponents.json already exists.\n'))
+    return
+  }
+
+  const spinner = ora('Initializing project...').start()
+
+  try {
+    await fs.writeJson(configPath, DEFAULT_CONFIG, { spaces: 2 })
+    spinner.succeed(chalk.green('Initialized components.json successfully!'))
+  } catch (error) {
+    spinner.fail(chalk.red(`Failed to initialize project: ${error}`))
+  }
+}

package/src/utils/config.ts

@@ -0,0 +1,38 @@
+import path from 'path'
+
+import fs from 'fs-extra'
+import { z } from 'zod'
+
+export const 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()
+  })
+})
+
+export type Config = z.infer<typeof configSchema>;
+
+export async function getConfig (cwd: string) {
+  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}`)
+  }
+}