draft-cli 0.0.2 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @draft-ui/cli
2
2
 
3
+ ## 0.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - fc5f354: fix draft-cli not work error
8
+
9
+ ## 0.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 5cc175a: update command
14
+
3
15
  ## 0.0.2
4
16
 
5
17
  ### Patch Changes
package/README.md CHANGED
@@ -14,29 +14,25 @@ You can install the CLI globally or use it with your favorite package manager:
14
14
 
15
15
  ```bash
16
16
  # Global installation
17
- npm install -g draft-ui
17
+ npm install -g draft-cli
18
18
  # or
19
- pnpm add -g draft-ui
19
+ pnpm add -g draft-cli
20
20
 
21
21
  # Or use it directly without installation
22
- pnpm dlx draft-ui init
23
- npx draft-ui init
22
+ pnpm dlx draft-cli init
23
+ npx draft-cli init
24
24
  ```
25
25
 
26
26
  ## Usage
27
27
 
28
- The CLI provides two main entry points depending on your framework: `draft-vue` and `draft-react`.
28
+ The CLI provides a unified entry point `draft-cli` for all operations.
29
29
 
30
30
  ### Initialize
31
31
 
32
32
  Initialize your project and create a `components.json` file:
33
33
 
34
34
  ```bash
35
- # For Vue projects
36
- pnpm draft-vue init
37
-
38
- # For React projects
39
- pnpm draft-react init
35
+ draft-cli init
40
36
  ```
41
37
 
42
38
  ### Add Components
@@ -45,10 +41,10 @@ Add a component to your project:
45
41
 
46
42
  ```bash
47
43
  # For Vue
48
- pnpm draft-vue add button
44
+ draft-cli vue add button
49
45
 
50
46
  # For React
51
- pnpm draft-react add button
47
+ draft-cli react add button
52
48
  ```
53
49
 
54
50
  ## Configuration
package/dist/index.mjs ADDED
@@ -0,0 +1,240 @@
1
+ // src/bin/index.ts
2
+ import { createRequire as createRequire2 } from "module";
3
+ import { Command } from "commander";
4
+
5
+ // src/commands/add.ts
6
+ import { createRequire } from "module";
7
+ import path2 from "path";
8
+ import chalk from "chalk";
9
+ import fs2 from "fs-extra";
10
+ import ora from "ora";
11
+
12
+ // src/utils/config.ts
13
+ import path from "path";
14
+ import fs from "fs-extra";
15
+ import { z } from "zod";
16
+ var configSchema = z.object({
17
+ style: z.string(),
18
+ rsc: z.boolean(),
19
+ tsx: z.boolean(),
20
+ tailwind: z.object({
21
+ config: z.string(),
22
+ css: z.string(),
23
+ baseColor: z.string(),
24
+ cssVariables: z.boolean()
25
+ }),
26
+ aliases: z.object({
27
+ components: z.string(),
28
+ utils: z.string(),
29
+ ui: z.string().optional(),
30
+ draft: z.string().optional()
31
+ })
32
+ });
33
+ async function getConfig(cwd) {
34
+ const configPath = path.resolve(cwd, "components.json");
35
+ if (!await fs.pathExists(configPath)) {
36
+ return null;
37
+ }
38
+ try {
39
+ const config = await fs.readJson(configPath);
40
+ return configSchema.parse(config);
41
+ } catch (error) {
42
+ throw new Error(`Invalid configuration: ${error}`);
43
+ }
44
+ }
45
+
46
+ // src/commands/add.ts
47
+ var require2 = createRequire(import.meta.url);
48
+ var pkg = {};
49
+ try {
50
+ pkg = require2("../../package.json");
51
+ } catch {
52
+ try {
53
+ pkg = require2("../package.json");
54
+ } catch {
55
+ }
56
+ }
57
+ function transformImports(content, config) {
58
+ let res = content.replace(/@\/lib\/utils/g, config.aliases.utils);
59
+ if (config.aliases.ui != null) {
60
+ res = res.replace(/@\/components\/ui/g, config.aliases.ui);
61
+ }
62
+ if (config.aliases.draft != null) {
63
+ res = res.replace(/@\/components\/draft/g, config.aliases.draft);
64
+ }
65
+ return res;
66
+ }
67
+ function getTargetDir(cwd, config, componentName, isRegistry) {
68
+ const folderName = isRegistry ? componentName.charAt(0).toUpperCase() + componentName.slice(1) : componentName;
69
+ const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace("@/", "src/");
70
+ return path2.resolve(cwd, targetBase, folderName);
71
+ }
72
+ async function installDependencies(dependencies, cwd, spinner) {
73
+ if (!dependencies || dependencies.length === 0)
74
+ return;
75
+ spinner.text = `Installing dependencies: ${dependencies.join(", ")}...`;
76
+ const { execa } = await import("execa");
77
+ try {
78
+ await execa("pnpm", ["add", ...dependencies], { cwd });
79
+ spinner.succeed(chalk.green("Dependencies installed."));
80
+ } catch (err) {
81
+ spinner.warn(chalk.yellow(`Failed to install dependencies: ${err.message}`));
82
+ }
83
+ }
84
+ async function addComponent(componentName, type) {
85
+ const cwd = process.cwd();
86
+ const config = await getConfig(cwd);
87
+ if (!config) {
88
+ console.log(chalk.red("\nNo components.json found. Please run init first (simulated).\n"));
89
+ return;
90
+ }
91
+ const spinner = ora(`Adding ${componentName}...`).start();
92
+ try {
93
+ const monorepoRoot = path2.resolve(import.meta.url.replace("file://", ""), "../../../../");
94
+ const sourceDir = path2.resolve(
95
+ monorepoRoot,
96
+ "packages",
97
+ type,
98
+ "src",
99
+ "components",
100
+ componentName
101
+ );
102
+ if (await fs2.pathExists(sourceDir)) {
103
+ const targetDir = getTargetDir(cwd, config, componentName, false);
104
+ await fs2.ensureDir(targetDir);
105
+ await fs2.copy(sourceDir, targetDir);
106
+ const processDir = async (dir) => {
107
+ const entries = await fs2.readdir(dir);
108
+ for (const entry of entries) {
109
+ const fullPath = path2.resolve(dir, entry);
110
+ const stat = await fs2.stat(fullPath);
111
+ if (stat.isDirectory()) {
112
+ await processDir(fullPath);
113
+ } else if (stat.isFile() && /\.(?:ts|tsx|vue|js|jsx)$/.test(entry)) {
114
+ const content = await fs2.readFile(fullPath, "utf-8");
115
+ const transformedContent = transformImports(content, config);
116
+ await fs2.writeFile(fullPath, transformedContent);
117
+ }
118
+ }
119
+ };
120
+ await processDir(targetDir);
121
+ const registryPath = path2.resolve(monorepoRoot, "packages", type, "src", "registry.json");
122
+ if (await fs2.pathExists(registryPath)) {
123
+ const registry = await fs2.readJson(registryPath);
124
+ const componentMeta = registry.components?.[componentName];
125
+ if ((componentMeta?.dependencies?.length ?? 0) > 0) {
126
+ await installDependencies(componentMeta.dependencies, cwd, spinner);
127
+ }
128
+ }
129
+ spinner.succeed(chalk.green(`Component ${componentName} added successfully to ${targetDir}`));
130
+ return;
131
+ }
132
+ if (typeof pkg.register === "string") {
133
+ spinner.text = `Checking registry ${pkg.register}...`;
134
+ try {
135
+ const registryUrl = `${pkg.register}/packages/${type}/src/registry.json`;
136
+ const registryRes = await fetch(registryUrl);
137
+ if (!registryRes.ok)
138
+ throw new Error(`Failed to fetch registry: ${registryRes.statusText}`);
139
+ const registry = await registryRes.json();
140
+ const componentMeta = registry.components[componentName];
141
+ if (componentMeta == null) {
142
+ spinner.fail(chalk.red(`Component ${componentName} not found in registry.`));
143
+ return;
144
+ }
145
+ if ((componentMeta.files?.length ?? 0) === 0) {
146
+ spinner.fail(chalk.red(`Component ${componentName} has no files listed in registry.`));
147
+ return;
148
+ }
149
+ spinner.text = `Fetching ${componentName} files...`;
150
+ const targetDir = getTargetDir(cwd, config, componentName, true);
151
+ await fs2.ensureDir(targetDir);
152
+ for (const file of componentMeta.files) {
153
+ const fileUrl = `${pkg.register}/packages/${type}/src/components/${componentName}/${file}`;
154
+ const fileRes = await fetch(fileUrl);
155
+ if (!fileRes.ok)
156
+ throw new Error(`Failed to fetch file ${file}: ${fileRes.statusText}`);
157
+ const content = await fileRes.text();
158
+ const transformedContent = transformImports(content, config);
159
+ await fs2.writeFile(path2.resolve(targetDir, file), transformedContent);
160
+ }
161
+ if (componentMeta.dependencies?.length) {
162
+ await installDependencies(componentMeta.dependencies, cwd, spinner);
163
+ }
164
+ spinner.succeed(chalk.green(`Component ${componentName} added from registry.`));
165
+ return;
166
+ } catch (error) {
167
+ spinner.fail(chalk.red(`Failed to fetch from registry: ${error.message}`));
168
+ return;
169
+ }
170
+ }
171
+ spinner.fail(chalk.red(`Component ${componentName} not found for ${type}.`));
172
+ } catch (error) {
173
+ spinner.fail(chalk.red(`Failed to add component: ${error}`));
174
+ }
175
+ }
176
+
177
+ // src/commands/init.ts
178
+ import path3 from "path";
179
+ import chalk2 from "chalk";
180
+ import fs3 from "fs-extra";
181
+ import ora2 from "ora";
182
+ var DEFAULT_CONFIG = {
183
+ style: "default",
184
+ rsc: false,
185
+ tsx: true,
186
+ tailwind: {
187
+ config: "tailwind.config.js",
188
+ css: "src/index.css",
189
+ baseColor: "slate",
190
+ cssVariables: true
191
+ },
192
+ aliases: {
193
+ components: "@/components",
194
+ utils: "@/lib/utils",
195
+ ui: "@/components/ui",
196
+ draft: "@/components/draft"
197
+ }
198
+ };
199
+ async function initProject() {
200
+ const cwd = process.cwd();
201
+ const configPath = path3.resolve(cwd, "components.json");
202
+ if (await fs3.pathExists(configPath)) {
203
+ console.log(chalk2.yellow("\ncomponents.json already exists.\n"));
204
+ return;
205
+ }
206
+ const spinner = ora2("Initializing project...").start();
207
+ try {
208
+ await fs3.writeJson(configPath, DEFAULT_CONFIG, { spaces: 2 });
209
+ spinner.succeed(chalk2.green("Initialized components.json successfully!"));
210
+ } catch (error) {
211
+ spinner.fail(chalk2.red(`Failed to initialize project: ${error}`));
212
+ }
213
+ }
214
+
215
+ // src/bin/index.ts
216
+ var require3 = createRequire2(import.meta.url);
217
+ var pkg2 = { version: "0.0.1" };
218
+ try {
219
+ pkg2 = require3("../../package.json");
220
+ } catch {
221
+ try {
222
+ pkg2 = require3("../package.json");
223
+ } catch {
224
+ pkg2 = { version: "0.0.1" };
225
+ }
226
+ }
227
+ var program = new Command();
228
+ program.name("draft-cli").description("CLI for adding components to your projects").version(pkg2.version);
229
+ program.command("init").description("initialize your project and create a components.json file").action(async () => {
230
+ await initProject();
231
+ });
232
+ var vue = program.command("vue").description("Vue components commands");
233
+ vue.command("add").description("add a Vue component to your project").argument("<component>", "the component to add").action(async (component) => {
234
+ await addComponent(component, "vue");
235
+ });
236
+ var react = program.command("react").description("React components commands");
237
+ react.command("add").description("add a React component to your project").argument("<component>", "the component to add").action(async (component) => {
238
+ await addComponent(component, "react");
239
+ });
240
+ program.parse();
package/package.json CHANGED
@@ -1,16 +1,8 @@
1
1
  {
2
2
  "name": "draft-cli",
3
- "version": "0.0.2",
3
+ "version": "0.1.1",
4
4
  "private": false,
5
5
  "description": "A command-line tool for adding components to your Vue and React projects. Inspired by shadcn/ui.",
6
- "type": "module",
7
- "keywords": [
8
- "ui-kit",
9
- "vue",
10
- "react",
11
- "cli",
12
- "shadcn"
13
- ],
14
6
  "license": "MIT",
15
7
  "homepage": "https://preflower.github.io/draft-ui/",
16
8
  "repository": {
@@ -18,9 +10,15 @@
18
10
  "url": "git+https://github.com/preflower/draft-ui.git",
19
11
  "directory": "packages/cli"
20
12
  },
13
+ "keywords": [
14
+ "ui-kit",
15
+ "vue",
16
+ "react",
17
+ "cli",
18
+ "shadcn"
19
+ ],
21
20
  "bin": {
22
- "draft-vue": "./dist/vue.js",
23
- "draft-react": "./dist/react.js"
21
+ "draft-cli": "./dist/index.js"
24
22
  },
25
23
  "publishConfig": {
26
24
  "access": "public",
@@ -44,7 +42,7 @@
44
42
  },
45
43
  "register": "https://raw.githubusercontent.com/preflower/draft-ui/main",
46
44
  "scripts": {
47
- "build": "tsup src/bin/vue.ts src/bin/react.ts --format esm --clean --dts",
48
- "dev": "tsup src/bin/vue.ts src/bin/react.ts --format esm --watch --clean"
45
+ "build": "tsup src/bin/index.ts --format esm --clean --dts",
46
+ "dev": "tsup src/bin/index.ts --format esm --watch --clean"
49
47
  }
50
48
  }
@@ -0,0 +1,62 @@
1
+ import { createRequire } from 'node:module'
2
+
3
+ import { Command } from 'commander'
4
+
5
+ import { addComponent } from '../commands/add.js'
6
+ import { initProject } from '../commands/init.js'
7
+
8
+ const require = createRequire(import.meta.url)
9
+ interface PackageJson {
10
+ version: string
11
+ [key: string]: unknown
12
+ }
13
+
14
+ let pkg: PackageJson = { version: '0.0.1' }
15
+
16
+ try {
17
+ pkg = require('../../package.json')
18
+ }
19
+ catch {
20
+ try {
21
+ pkg = require('../package.json')
22
+ }
23
+ catch {
24
+ pkg = { version: '0.0.1' }
25
+ }
26
+ }
27
+
28
+ const program = new Command()
29
+
30
+ program
31
+ .name('draft-cli')
32
+ .description('CLI for adding components to your projects')
33
+ .version(pkg.version)
34
+
35
+ program
36
+ .command('init')
37
+ .description('initialize your project and create a components.json file')
38
+ .action(async () => {
39
+ await initProject()
40
+ })
41
+
42
+ const vue = program.command('vue').description('Vue components commands')
43
+
44
+ vue
45
+ .command('add')
46
+ .description('add a Vue component to your project')
47
+ .argument('<component>', 'the component to add')
48
+ .action(async (component) => {
49
+ await addComponent(component, 'vue')
50
+ })
51
+
52
+ const react = program.command('react').description('React components commands')
53
+
54
+ react
55
+ .command('add')
56
+ .description('add a React component to your project')
57
+ .argument('<component>', 'the component to add')
58
+ .action(async (component) => {
59
+ await addComponent(component, 'react')
60
+ })
61
+
62
+ program.parse()
@@ -1,10 +1,12 @@
1
- import { createRequire } from 'module'
2
- import path from 'path'
1
+ import type { Ora } from 'ora'
2
+ import type { Config } from '../utils/config.js'
3
3
 
4
+ import { createRequire } from 'node:module'
5
+ import path from 'node:path'
4
6
  import chalk from 'chalk'
5
7
  import fs from 'fs-extra'
6
- import ora from 'ora'
7
8
 
9
+ import ora from 'ora'
8
10
  import { getConfig } from '../utils/config.js'
9
11
 
10
12
  const require = createRequire(import.meta.url)
@@ -27,30 +29,65 @@ let pkg: PackageJson = {}
27
29
 
28
30
  try {
29
31
  pkg = require('../../package.json') as PackageJson
30
- } catch {
32
+ }
33
+ catch {
31
34
  try {
32
35
  pkg = require('../package.json') as PackageJson
33
- } catch {
36
+ }
37
+ catch {
34
38
  // pkg is already {}
35
39
  }
36
40
  }
37
41
 
38
- export async function addComponent (componentName: string, type: 'vue' | 'react') {
42
+ function transformImports(content: string, config: Config) {
43
+ let res = content.replace(/@\/lib\/utils/g, config.aliases.utils)
44
+ if (config.aliases.ui != null) {
45
+ res = res.replace(/@\/components\/ui/g, config.aliases.ui)
46
+ }
47
+ if (config.aliases.draft != null) {
48
+ res = res.replace(/@\/components\/draft/g, config.aliases.draft)
49
+ }
50
+ return res
51
+ }
52
+
53
+ function getTargetDir(cwd: string, config: Config, componentName: string, isRegistry: boolean) {
54
+ // Use TitleCase for registry components to match original logic, or componentName for local
55
+ // Note: preserving original behavior where registry used TitleCase
56
+ const folderName = isRegistry
57
+ ? componentName.charAt(0).toUpperCase() + componentName.slice(1)
58
+ : componentName
59
+
60
+ const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace('@/', 'src/')
61
+ return path.resolve(cwd, targetBase, folderName)
62
+ }
63
+
64
+ async function installDependencies(dependencies: string[] | undefined, cwd: string, spinner: Ora) {
65
+ if (!dependencies || dependencies.length === 0)
66
+ return
67
+
68
+ spinner.text = `Installing dependencies: ${dependencies.join(', ')}...`
69
+ const { execa } = await import('execa')
70
+ try {
71
+ await execa('pnpm', ['add', ...dependencies], { cwd })
72
+ spinner.succeed(chalk.green('Dependencies installed.'))
73
+ }
74
+ catch (err) {
75
+ spinner.warn(chalk.yellow(`Failed to install dependencies: ${(err as Error).message}`))
76
+ }
77
+ }
78
+
79
+ export async function addComponent(componentName: string, type: 'vue' | 'react') {
39
80
  const cwd = process.cwd()
40
81
  const config = await getConfig(cwd)
41
82
 
42
83
  if (!config) {
43
84
  console.log(chalk.red('\nNo components.json found. Please run init first (simulated).\n'))
44
- // For now, we'll just use defaults if no config is found to demonstrate
45
85
  return
46
86
  }
47
87
 
48
88
  const spinner = ora(`Adding ${componentName}...`).start()
49
89
 
50
90
  try {
51
- // Determine source path within monorepo
52
- // In a real scenario, this would fetch from a registry or use a relative path in dev
53
- // For this demo, we'll assume the CLI is run from the monorepo root or we know where the packages are
54
91
  const monorepoRoot = path.resolve(import.meta.url.replace('file://', ''), '../../../../')
55
92
  const sourceDir = path.resolve(
56
93
  monorepoRoot,
@@ -58,107 +95,100 @@ export async function addComponent (componentName: string, type: 'vue' | 'react'
58
95
  type,
59
96
  'src',
60
97
  'components',
61
- componentName
98
+ componentName,
62
99
  )
63
100
 
64
- if (!(await fs.pathExists(sourceDir))) {
65
- if (typeof pkg.register === 'string') {
66
- spinner.text = `Checking registry ${pkg.register}...`
67
- try {
68
- const registryUrl = `${pkg.register}/packages/${type}/src/registry.json`
69
- const registryRes = await fetch(registryUrl)
70
- if (!registryRes.ok) {
71
- throw new Error(`Failed to fetch registry from ${registryUrl}: ${registryRes.statusText}`)
101
+ // Check if local source exists
102
+ if (await fs.pathExists(sourceDir)) {
103
+ const targetDir = getTargetDir(cwd, config, componentName, false)
104
+ await fs.ensureDir(targetDir)
105
+ await fs.copy(sourceDir, targetDir)
106
+
107
+ const processDir = async (dir: string) => {
108
+ const entries = await fs.readdir(dir)
109
+ for (const entry of entries) {
110
+ const fullPath = path.resolve(dir, entry)
111
+ const stat = await fs.stat(fullPath)
112
+ if (stat.isDirectory()) {
113
+ await processDir(fullPath)
72
114
  }
73
- const registry = (await registryRes.json()) as Registry
74
- const componentMeta = registry.components[componentName]
75
-
76
- if (componentMeta == null) {
77
- spinner.fail(chalk.red(`Component ${componentName} not found in registry.`))
78
- return
115
+ else if (stat.isFile() && /\.(?:ts|tsx|vue|js|jsx)$/.test(entry)) {
116
+ const content = await fs.readFile(fullPath, 'utf-8')
117
+ const transformedContent = transformImports(content, config)
118
+ await fs.writeFile(fullPath, transformedContent)
79
119
  }
120
+ }
121
+ }
122
+ await processDir(targetDir)
123
+
124
+ // Handle dependencies from registry.json
125
+ const registryPath = path.resolve(monorepoRoot, 'packages', type, 'src', 'registry.json')
126
+ if (await fs.pathExists(registryPath)) {
127
+ const registry = (await fs.readJson(registryPath)) as Registry
128
+ const componentMeta = registry.components?.[componentName]
129
+ if ((componentMeta?.dependencies?.length ?? 0) > 0) {
130
+ await installDependencies(componentMeta!.dependencies, cwd, spinner)
131
+ }
132
+ }
80
133
 
81
- if (!componentMeta.files || !Array.isArray(componentMeta.files)) {
82
- spinner.fail(chalk.red(`Component ${componentName} has no files listed in registry.`))
83
- return
84
- }
85
-
86
- spinner.text = `Fetching ${componentName} files...`
87
-
88
- const titleCaseComponentName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
89
-
90
- // Determine target path using config aliases
91
- // Use the ui alias if available, otherwise fallback to components
92
- const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace('@/', 'src/')
93
- const targetDir = path.resolve(cwd, targetBase, titleCaseComponentName) // Use TitleCase for directory
94
-
95
- await fs.ensureDir(targetDir)
134
+ spinner.succeed(chalk.green(`Component ${componentName} added successfully to ${targetDir}`))
135
+ return
136
+ }
96
137
 
97
- for (const file of componentMeta.files) {
98
- const fileUrl = `${pkg.register}/packages/${type}/src/components/${componentName}/${file}`
99
- const fileRes = await fetch(fileUrl)
100
- if (!fileRes.ok) {
101
- throw new Error(`Failed to fetch file ${file}: ${fileRes.statusText}`)
102
- }
103
- const content = await fileRes.text()
104
- await fs.writeFile(path.resolve(targetDir, file), content)
105
- }
138
+ // Check registry
139
+ if (typeof pkg.register === 'string') {
140
+ spinner.text = `Checking registry ${pkg.register}...`
141
+ try {
142
+ const registryUrl = `${pkg.register}/packages/${type}/src/registry.json`
143
+ const registryRes = await fetch(registryUrl)
144
+ if (!registryRes.ok)
145
+ throw new Error(`Failed to fetch registry: ${registryRes.statusText}`)
106
146
 
107
- // Handle dependencies
108
- if (componentMeta.dependencies != null && componentMeta.dependencies.length > 0) {
109
- spinner.text = `Installing dependencies for ${componentName}: ${componentMeta.dependencies.join(', ')}...`
110
- const { execa } = await import('execa')
111
- try {
112
- await execa('pnpm', ['add', ...componentMeta.dependencies], { cwd })
113
- } catch (err) {
114
- spinner.warn(chalk.yellow(`Component added, but failed to install dependencies: ${(err as Error).message}`))
115
- }
116
- }
147
+ const registry = (await registryRes.json()) as Registry
148
+ const componentMeta = registry.components[componentName]
117
149
 
118
- spinner.succeed(chalk.green(`Component ${componentName} added from registry.`))
119
- return
120
- } catch (error) {
121
- spinner.fail(chalk.red(`Failed to fetch from registry: ${(error as Error).message}`))
150
+ if (componentMeta == null) {
151
+ spinner.fail(chalk.red(`Component ${componentName} not found in registry.`))
122
152
  return
123
153
  }
124
- }
125
154
 
126
- spinner.fail(chalk.red(`Component ${componentName} not found for ${type}.`))
127
- return
128
- }
155
+ if ((componentMeta.files?.length ?? 0) === 0) {
156
+ spinner.fail(chalk.red(`Component ${componentName} has no files listed in registry.`))
157
+ return
158
+ }
129
159
 
130
- // Determine target path using config aliases
131
- // Use the ui alias if available, otherwise fallback to components
132
- const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace('@/', 'src/')
133
- const targetDir = path.resolve(cwd, targetBase, componentName)
160
+ spinner.text = `Fetching ${componentName} files...`
134
161
 
135
- await fs.ensureDir(targetDir)
136
- await fs.copy(sourceDir, targetDir)
162
+ const targetDir = getTargetDir(cwd, config, componentName, true)
163
+ await fs.ensureDir(targetDir)
137
164
 
138
- // Handle dependencies from registry.json
139
- const registryPath = path.resolve(monorepoRoot, 'packages', type, 'src', 'registry.json')
140
- if (await fs.pathExists(registryPath)) {
141
- const registry = await fs.readJson(registryPath)
142
- const componentMeta = registry.components[componentName]
165
+ for (const file of componentMeta.files!) {
166
+ const fileUrl = `${pkg.register}/packages/${type}/src/components/${componentName}/${file}`
167
+ const fileRes = await fetch(fileUrl)
168
+ if (!fileRes.ok)
169
+ throw new Error(`Failed to fetch file ${file}: ${fileRes.statusText}`)
143
170
 
144
- if (componentMeta?.dependencies?.length > 0) {
145
- spinner.text = `Installing dependencies for ${componentName}: ${componentMeta.dependencies.join(', ')}...`
171
+ const content = await fileRes.text()
172
+ const transformedContent = transformImports(content, config)
173
+ await fs.writeFile(path.resolve(targetDir, file), transformedContent)
174
+ }
146
175
 
147
- // Detect package manager (assuming pnpm for now as per project requirements)
148
- const { execa } = await import('execa')
149
- try {
150
- await execa('pnpm', ['add', ...componentMeta.dependencies], { cwd })
151
- spinner.succeed(chalk.green(`Component ${componentName} and its dependencies added successfully.`))
152
- return
153
- } catch (err) {
154
- spinner.warn(chalk.yellow(`Component copied, but failed to install dependencies: ${(err as Error).message}`))
155
- return
176
+ if (componentMeta.dependencies?.length) {
177
+ await installDependencies(componentMeta.dependencies, cwd, spinner)
156
178
  }
179
+
180
+ spinner.succeed(chalk.green(`Component ${componentName} added from registry.`))
181
+ return
182
+ }
183
+ catch (error) {
184
+ spinner.fail(chalk.red(`Failed to fetch from registry: ${(error as Error).message}`))
185
+ return
157
186
  }
158
187
  }
159
188
 
160
- spinner.succeed(chalk.green(`Component ${componentName} added successfully to ${targetDir}`))
161
- } catch (error) {
189
+ spinner.fail(chalk.red(`Component ${componentName} not found for ${type}.`))
190
+ }
191
+ catch (error) {
162
192
  spinner.fail(chalk.red(`Failed to add component: ${error}`))
163
193
  }
164
194
  }
@@ -1,4 +1,4 @@
1
- import path from 'path'
1
+ import path from 'node:path'
2
2
 
3
3
  import chalk from 'chalk'
4
4
  import fs from 'fs-extra'
@@ -12,17 +12,17 @@ const DEFAULT_CONFIG = {
12
12
  config: 'tailwind.config.js',
13
13
  css: 'src/index.css',
14
14
  baseColor: 'slate',
15
- cssVariables: true
15
+ cssVariables: true,
16
16
  },
17
17
  aliases: {
18
18
  components: '@/components',
19
19
  utils: '@/lib/utils',
20
20
  ui: '@/components/ui',
21
- draft: '@/components/draft'
22
- }
21
+ draft: '@/components/draft',
22
+ },
23
23
  }
24
24
 
25
- export async function initProject () {
25
+ export async function initProject() {
26
26
  const cwd = process.cwd()
27
27
  const configPath = path.resolve(cwd, 'components.json')
28
28
 
@@ -36,7 +36,8 @@ export async function initProject () {
36
36
  try {
37
37
  await fs.writeJson(configPath, DEFAULT_CONFIG, { spaces: 2 })
38
38
  spinner.succeed(chalk.green('Initialized components.json successfully!'))
39
- } catch (error) {
39
+ }
40
+ catch (error) {
40
41
  spinner.fail(chalk.red(`Failed to initialize project: ${error}`))
41
42
  }
42
43
  }
@@ -1,4 +1,4 @@
1
- import path from 'path'
1
+ import path from 'node:path'
2
2
 
3
3
  import fs from 'fs-extra'
4
4
  import { z } from 'zod'
@@ -11,19 +11,19 @@ export const configSchema = z.object({
11
11
  config: z.string(),
12
12
  css: z.string(),
13
13
  baseColor: z.string(),
14
- cssVariables: z.boolean()
14
+ cssVariables: z.boolean(),
15
15
  }),
16
16
  aliases: z.object({
17
17
  components: z.string(),
18
18
  utils: z.string(),
19
19
  ui: z.string().optional(),
20
- draft: z.string().optional()
21
- })
20
+ draft: z.string().optional(),
21
+ }),
22
22
  })
23
23
 
24
- export type Config = z.infer<typeof configSchema>;
24
+ export type Config = z.infer<typeof configSchema>
25
25
 
26
- export async function getConfig (cwd: string) {
26
+ export async function getConfig(cwd: string) {
27
27
  const configPath = path.resolve(cwd, 'components.json')
28
28
  if (!(await fs.pathExists(configPath))) {
29
29
  return null
@@ -32,7 +32,8 @@ export async function getConfig (cwd: string) {
32
32
  try {
33
33
  const config = await fs.readJson(configPath)
34
34
  return configSchema.parse(config)
35
- } catch (error) {
35
+ }
36
+ catch (error) {
36
37
  throw new Error(`Invalid configuration: ${error}`)
37
38
  }
38
39
  }
@@ -1,191 +0,0 @@
1
- // src/commands/add.ts
2
- import { createRequire } from "module";
3
- import path2 from "path";
4
- import chalk from "chalk";
5
- import fs2 from "fs-extra";
6
- import ora from "ora";
7
-
8
- // src/utils/config.ts
9
- import path from "path";
10
- import fs from "fs-extra";
11
- import { z } from "zod";
12
- var configSchema = z.object({
13
- style: z.string(),
14
- rsc: z.boolean(),
15
- tsx: z.boolean(),
16
- tailwind: z.object({
17
- config: z.string(),
18
- css: z.string(),
19
- baseColor: z.string(),
20
- cssVariables: z.boolean()
21
- }),
22
- aliases: z.object({
23
- components: z.string(),
24
- utils: z.string(),
25
- ui: z.string().optional(),
26
- draft: z.string().optional()
27
- })
28
- });
29
- async function getConfig(cwd) {
30
- const configPath = path.resolve(cwd, "components.json");
31
- if (!await fs.pathExists(configPath)) {
32
- return null;
33
- }
34
- try {
35
- const config = await fs.readJson(configPath);
36
- return configSchema.parse(config);
37
- } catch (error) {
38
- throw new Error(`Invalid configuration: ${error}`);
39
- }
40
- }
41
-
42
- // src/commands/add.ts
43
- var require2 = createRequire(import.meta.url);
44
- var pkg = {};
45
- try {
46
- pkg = require2("../../package.json");
47
- } catch {
48
- try {
49
- pkg = require2("../package.json");
50
- } catch {
51
- }
52
- }
53
- async function addComponent(componentName, type) {
54
- const cwd = process.cwd();
55
- const config = await getConfig(cwd);
56
- if (!config) {
57
- console.log(chalk.red("\nNo components.json found. Please run init first (simulated).\n"));
58
- return;
59
- }
60
- const spinner = ora(`Adding ${componentName}...`).start();
61
- try {
62
- const monorepoRoot = path2.resolve(import.meta.url.replace("file://", ""), "../../../../");
63
- const sourceDir = path2.resolve(
64
- monorepoRoot,
65
- "packages",
66
- type,
67
- "src",
68
- "components",
69
- componentName
70
- );
71
- if (!await fs2.pathExists(sourceDir)) {
72
- if (typeof pkg.register === "string") {
73
- spinner.text = `Checking registry ${pkg.register}...`;
74
- try {
75
- const registryUrl = `${pkg.register}/packages/${type}/src/registry.json`;
76
- const registryRes = await fetch(registryUrl);
77
- if (!registryRes.ok) {
78
- throw new Error(`Failed to fetch registry from ${registryUrl}: ${registryRes.statusText}`);
79
- }
80
- const registry = await registryRes.json();
81
- const componentMeta = registry.components[componentName];
82
- if (componentMeta == null) {
83
- spinner.fail(chalk.red(`Component ${componentName} not found in registry.`));
84
- return;
85
- }
86
- if (!componentMeta.files || !Array.isArray(componentMeta.files)) {
87
- spinner.fail(chalk.red(`Component ${componentName} has no files listed in registry.`));
88
- return;
89
- }
90
- spinner.text = `Fetching ${componentName} files...`;
91
- const titleCaseComponentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
92
- const targetBase2 = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace("@/", "src/");
93
- const targetDir2 = path2.resolve(cwd, targetBase2, titleCaseComponentName);
94
- await fs2.ensureDir(targetDir2);
95
- for (const file of componentMeta.files) {
96
- const fileUrl = `${pkg.register}/packages/${type}/src/components/${componentName}/${file}`;
97
- const fileRes = await fetch(fileUrl);
98
- if (!fileRes.ok) {
99
- throw new Error(`Failed to fetch file ${file}: ${fileRes.statusText}`);
100
- }
101
- const content = await fileRes.text();
102
- await fs2.writeFile(path2.resolve(targetDir2, file), content);
103
- }
104
- if (componentMeta.dependencies != null && componentMeta.dependencies.length > 0) {
105
- spinner.text = `Installing dependencies for ${componentName}: ${componentMeta.dependencies.join(", ")}...`;
106
- const { execa } = await import("execa");
107
- try {
108
- await execa("pnpm", ["add", ...componentMeta.dependencies], { cwd });
109
- } catch (err) {
110
- spinner.warn(chalk.yellow(`Component added, but failed to install dependencies: ${err.message}`));
111
- }
112
- }
113
- spinner.succeed(chalk.green(`Component ${componentName} added from registry.`));
114
- return;
115
- } catch (error) {
116
- spinner.fail(chalk.red(`Failed to fetch from registry: ${error.message}`));
117
- return;
118
- }
119
- }
120
- spinner.fail(chalk.red(`Component ${componentName} not found for ${type}.`));
121
- return;
122
- }
123
- const targetBase = (config.aliases.draft ?? config.aliases.ui ?? config.aliases.components).replace("@/", "src/");
124
- const targetDir = path2.resolve(cwd, targetBase, componentName);
125
- await fs2.ensureDir(targetDir);
126
- await fs2.copy(sourceDir, targetDir);
127
- const registryPath = path2.resolve(monorepoRoot, "packages", type, "src", "registry.json");
128
- if (await fs2.pathExists(registryPath)) {
129
- const registry = await fs2.readJson(registryPath);
130
- const componentMeta = registry.components[componentName];
131
- if (componentMeta?.dependencies?.length > 0) {
132
- spinner.text = `Installing dependencies for ${componentName}: ${componentMeta.dependencies.join(", ")}...`;
133
- const { execa } = await import("execa");
134
- try {
135
- await execa("pnpm", ["add", ...componentMeta.dependencies], { cwd });
136
- spinner.succeed(chalk.green(`Component ${componentName} and its dependencies added successfully.`));
137
- return;
138
- } catch (err) {
139
- spinner.warn(chalk.yellow(`Component copied, but failed to install dependencies: ${err.message}`));
140
- return;
141
- }
142
- }
143
- }
144
- spinner.succeed(chalk.green(`Component ${componentName} added successfully to ${targetDir}`));
145
- } catch (error) {
146
- spinner.fail(chalk.red(`Failed to add component: ${error}`));
147
- }
148
- }
149
-
150
- // src/commands/init.ts
151
- import path3 from "path";
152
- import chalk2 from "chalk";
153
- import fs3 from "fs-extra";
154
- import ora2 from "ora";
155
- var DEFAULT_CONFIG = {
156
- style: "default",
157
- rsc: false,
158
- tsx: true,
159
- tailwind: {
160
- config: "tailwind.config.js",
161
- css: "src/index.css",
162
- baseColor: "slate",
163
- cssVariables: true
164
- },
165
- aliases: {
166
- components: "@/components",
167
- utils: "@/lib/utils",
168
- ui: "@/components/ui",
169
- draft: "@/components/draft"
170
- }
171
- };
172
- async function initProject() {
173
- const cwd = process.cwd();
174
- const configPath = path3.resolve(cwd, "components.json");
175
- if (await fs3.pathExists(configPath)) {
176
- console.log(chalk2.yellow("\ncomponents.json already exists.\n"));
177
- return;
178
- }
179
- const spinner = ora2("Initializing project...").start();
180
- try {
181
- await fs3.writeJson(configPath, DEFAULT_CONFIG, { spaces: 2 });
182
- spinner.succeed(chalk2.green("Initialized components.json successfully!"));
183
- } catch (error) {
184
- spinner.fail(chalk2.red(`Failed to initialize project: ${error}`));
185
- }
186
- }
187
-
188
- export {
189
- addComponent,
190
- initProject
191
- };
package/dist/react.js DELETED
@@ -1,16 +0,0 @@
1
- import {
2
- addComponent,
3
- initProject
4
- } from "./chunk-TY6E2FMX.js";
5
-
6
- // src/bin/react.ts
7
- import { Command } from "commander";
8
- var program = new Command();
9
- program.name("draft-react").description("CLI for adding React components").version("0.0.1");
10
- program.command("add").description("add a component to your project").argument("<component>", "the component to add").action(async (component) => {
11
- await addComponent(component, "react");
12
- });
13
- program.command("init").description("initialize your project and create a components.json file").action(async () => {
14
- await initProject();
15
- });
16
- program.parse();
package/dist/vue.d.ts DELETED
@@ -1,2 +0,0 @@
1
-
2
- export { }
package/dist/vue.js DELETED
@@ -1,16 +0,0 @@
1
- import {
2
- addComponent,
3
- initProject
4
- } from "./chunk-TY6E2FMX.js";
5
-
6
- // src/bin/vue.ts
7
- import { Command } from "commander";
8
- var program = new Command();
9
- program.name("draft-vue").description("CLI for adding Vue components").version("0.0.1");
10
- program.command("add").description("add a component to your project").argument("<component>", "the component to add").action(async (component) => {
11
- await addComponent(component, "vue");
12
- });
13
- program.command("init").description("initialize your project and create a components.json file").action(async () => {
14
- await initProject();
15
- });
16
- program.parse();
package/src/bin/react.ts DELETED
@@ -1,28 +0,0 @@
1
- import { Command } from 'commander'
2
-
3
- import { addComponent } from '../commands/add.js'
4
- import { initProject } from '../commands/init.js'
5
-
6
- const program = new Command()
7
-
8
- program
9
- .name('draft-react')
10
- .description('CLI for adding React components')
11
- .version('0.0.1')
12
-
13
- program
14
- .command('add')
15
- .description('add a component to your project')
16
- .argument('<component>', 'the component to add')
17
- .action(async (component) => {
18
- await addComponent(component, 'react')
19
- })
20
-
21
- program
22
- .command('init')
23
- .description('initialize your project and create a components.json file')
24
- .action(async () => {
25
- await initProject()
26
- })
27
-
28
- program.parse()
package/src/bin/vue.ts DELETED
@@ -1,28 +0,0 @@
1
- import { Command } from 'commander'
2
-
3
- import { addComponent } from '../commands/add.js'
4
- import { initProject } from '../commands/init.js'
5
-
6
- const program = new Command()
7
-
8
- program
9
- .name('draft-vue')
10
- .description('CLI for adding Vue components')
11
- .version('0.0.1')
12
-
13
- program
14
- .command('add')
15
- .description('add a component to your project')
16
- .argument('<component>', 'the component to add')
17
- .action(async (component) => {
18
- await addComponent(component, 'vue')
19
- })
20
-
21
- program
22
- .command('init')
23
- .description('initialize your project and create a components.json file')
24
- .action(async () => {
25
- await initProject()
26
- })
27
-
28
- program.parse()
File without changes