@roboticela/devkit 3.0.0 → 4.0.0

package/README.md

@@ -180,6 +180,12 @@ devkit init
 Install one or more components into the current project.
 
 ```bash
+# Interactive — browse the registry for your template, multi-select, then pick variants when needed
+devkit add
+
+# Same as above but only print what would be installed
+devkit add --dry-run
+
 # Single component
 devkit add auth
 
@@ -196,6 +202,8 @@ devkit add auth@2.0.0
 devkit add auth --dry-run
 ```
 
+**Interactive mode** (no component names): DevKit loads components from the registry filtered by your template in `devkit.config.json`, excludes anything already in `devkit.lock.json`, and opens a terminal multiselect (space to toggle, enter to confirm). For each selected package that has variants, you get a follow-up prompt unless you passed `--variant=<id>` and that id exists for that component.
+
 **What happens under the hood:**
 
 1. Resolves the component version (latest unless pinned)
@@ -365,6 +373,10 @@ devkit install
 Stop DevKit from tracking a component without deleting its files. After ejecting, the files become entirely yours — no more updates via `devkit update`.
 
 ```bash
+# Interactive — multiselect from installed components (from devkit.lock.json)
+devkit eject
+
+# Eject one component by name
 devkit eject auth
 ```
 

package/dist/commands/add.js

@@ -1,27 +1,126 @@
 import ora from "ora";
 import chalk from "chalk";
+import { intro, outro, multiselect, select, isCancel } from "@clack/prompts";
 import { readConfig, isComponentInstalled } from "../lib/config.js";
 import { installComponent } from "../lib/installer.js";
+import { listComponents } from "../lib/registry.js";
 import { log } from "../lib/logger.js";
+/** `undefined` = no variant; string = chosen id; `"cancel"` = user aborted */
+async function pickVariantForComponent(meta, optsVariant) {
+    if (!meta.hasVariants || !meta.variants?.length)
+        return undefined;
+    if (meta.variants.length === 1)
+        return meta.variants[0].id;
+    if (optsVariant) {
+        const match = meta.variants.find((v) => v.id === optsVariant);
+        if (match)
+            return match.id;
+    }
+    const v = await select({
+        message: `Variant for ${meta.name}`,
+        options: meta.variants.map((x) => ({
+            value: x.id,
+            label: x.label,
+            hint: x.description,
+        })),
+    });
+    if (isCancel(v))
+        return "cancel";
+    return v;
+}
+async function interactiveAddSelections(config, opts, cwd) {
+    let all;
+    try {
+        all = await listComponents(config.template);
+    }
+    catch (e) {
+        log.error(`Could not reach registry: ${e.message}`);
+        log.info("Check DEVKIT_REGISTRY or start the registry locally (see repo README).");
+        return null;
+    }
+    const installable = all.filter((c) => !isComponentInstalled(c.name, cwd));
+    if (installable.length === 0) {
+        log.info("Every component from the registry for your template is already installed.");
+        return [];
+    }
+    console.log();
+    intro(chalk.cyan("Add components"));
+    const pickedRaw = await multiselect({
+        message: "Select components to install (space to toggle, enter to confirm)",
+        options: installable.map((c) => ({
+            value: c.name,
+            label: c.name,
+            hint: c.description.length > 64 ? `${c.description.slice(0, 61)}…` : c.description,
+        })),
+        required: false,
+    });
+    if (isCancel(pickedRaw)) {
+        outro("Cancelled.");
+        return [];
+    }
+    const picked = pickedRaw;
+    if (picked.length === 0) {
+        outro("No components selected.");
+        return [];
+    }
+    const results = [];
+    for (const compName of picked) {
+        const meta = installable.find((x) => x.name === compName);
+        const variant = await pickVariantForComponent(meta, opts.variant);
+        if (variant === "cancel") {
+            outro("Cancelled.");
+            return [];
+        }
+        results.push({ name: compName, version: "latest", variant });
+    }
+    return results;
+}
 export async function addCommand(names, opts, cwd = process.cwd()) {
     const config = readConfig(cwd);
-    for (const nameAtVersion of names) {
-        const [name, version = "latest"] = nameAtVersion.split("@");
+    const usedInteractive = names.length === 0;
+    let todo;
+    if (usedInteractive) {
+        const picked = await interactiveAddSelections(config, opts, cwd);
+        if (picked === null)
+            return;
+        if (picked.length === 0)
+            return;
+        todo = picked;
+    }
+    else {
+        todo = names.map((nameAtVersion) => {
+            const [name, version = "latest"] = nameAtVersion.split("@");
+            return { name, version, variant: opts.variant };
+        });
+    }
+    let anyOk = false;
+    for (const { name, version, variant } of todo) {
         if (isComponentInstalled(name, cwd)) {
             log.warn(`${name} is already installed. Run 'devkit update ${name}' to update.`);
             continue;
         }
         if (opts.dryRun) {
-            log.info(`[dry-run] Would install: ${chalk.cyan(name)}@${version} (${config.template})`);
+            log.info(`[dry-run] Would install: ${chalk.cyan(name)}@${version} (${config.template})` +
+                (variant ? chalk.dim(` variant=${variant}`) : ""));
+            anyOk = true;
             continue;
         }
         const spinner = ora({ text: `Installing ${chalk.cyan(name)}…`, color: "cyan" }).start();
         try {
-            await installComponent(name, config.template, version, opts.variant, cwd);
+            await installComponent(name, config.template, version, variant, cwd);
             spinner.succeed(chalk.green(`${name}@${version} installed`));
+            anyOk = true;
         }
         catch (e) {
             spinner.fail(chalk.red(`Failed to install ${name}: ${e.message}`));
         }
     }
+    if (usedInteractive) {
+        if (anyOk) {
+            outro(opts.dryRun ? chalk.dim("Dry run complete.") : chalk.green("Done."));
+        }
+        else if (!opts.dryRun) {
+            outro(chalk.yellow("Nothing was installed."));
+        }
+    }
 }

package/dist/commands/eject.d.ts

@@ -0,0 +1 @@
+export declare function ejectCommand(name: string | undefined, cwd?: string): Promise<void>;

package/dist/commands/eject.js

@@ -0,0 +1,60 @@
+import { intro, outro, multiselect, isCancel } from "@clack/prompts";
+import chalk from "chalk";
+import { unlinkSync, existsSync } from "fs";
+import { join } from "path";
+import { readLock, writeLock } from "../lib/config.js";
+import { log } from "../lib/logger.js";
+export async function ejectCommand(name, cwd = process.cwd()) {
+    const lock = readLock(cwd);
+    const installed = Object.keys(lock.components);
+    if (installed.length === 0) {
+        log.info("No installed components to eject.");
+        return;
+    }
+    let toEject;
+    if (name) {
+        if (!(name in lock.components)) {
+            log.warn(`'${name}' is not an installed DevKit component.`);
+            return;
+        }
+        toEject = [name];
+    }
+    else {
+        console.log();
+        intro(chalk.cyan("Eject components"));
+        const picked = await multiselect({
+            message: "Select components to eject (DevKit stops tracking them; files stay on disk — space to toggle, enter to confirm)",
+            options: installed.map((n) => ({
+                value: n,
+                label: n,
+                hint: `v${lock.components[n].version}`,
+            })),
+            required: false,
+        });
+        if (isCancel(picked)) {
+            outro("Cancelled.");
+            return;
+        }
+        const list = picked;
+        if (list.length === 0) {
+            outro("No components selected.");
+            return;
+        }
+        toEject = list;
+    }
+    for (const n of toEject) {
+        if (!(n in lock.components)) {
+            log.warn(`Skipping '${n}' — not in lock file.`);
+            continue;
+        }
+        const manifestPath = join(cwd, ".devkit", `${n}.manifest.json`);
+        if (existsSync(manifestPath))
+            unlinkSync(manifestPath);
+        delete lock.components[n];
+        log.success(`${n} ejected. Files are yours — DevKit will no longer manage them.`);
+    }
+    writeLock(lock, cwd);
+    if (!name) {
+        outro(chalk.green("Done."));
+    }
+}

package/dist/index.js

@@ -9,6 +9,7 @@ import { listCommand } from "./commands/list.js";
 import { infoCommand } from "./commands/info.js";
 import { updateCommand, upgradeAllCommand } from "./commands/update.js";
 import { doctorCommand } from "./commands/doctor.js";
+import { ejectCommand } from "./commands/eject.js";
 import { themeApplyCommand, themePreviewCommand, themePresetCommand, themeSetCommand, themeListCommand, themeAuditCommand, } from "./commands/theme.js";
 const program = new Command();
 program
@@ -36,11 +37,11 @@ program
     .action(() => initCommand());
 // ── devkit add ────────────────────────────────────────────────────────────────
 program
-    .command("add <components...>")
-    .description("Install one or more components (e.g. devkit add auth hero-section)")
-    .option("--variant <id>", "Variant to install for components that have variants")
+    .command("add [components...]")
+    .description("Install components — run with no args for an interactive picker")
+    .option("--variant <id>", "Variant for components with variants (non-interactive or as default when prompting)")
     .option("--dry-run", "Preview what would be installed without writing files")
-    .action((names, opts) => addCommand(names, opts));
+    .action((names, opts) => addCommand(names ?? [], opts));
 // ── devkit remove ─────────────────────────────────────────────────────────────
 program
     .command("remove <name>")
@@ -124,28 +125,18 @@ program
 });
 // ── devkit eject ──────────────────────────────────────────────────────────────
 program
-    .command("eject <name>")
-    .description("Stop DevKit from tracking a component (files are kept, no more updates via DevKit)")
-    .action(async (name) => {
-    const { readLock, writeLock } = await import("./lib/config.js");
-    const { unlinkSync, existsSync } = await import("fs");
-    const { join } = await import("path");
-    const { log } = await import("./lib/logger.js");
-    const manifestPath = join(process.cwd(), ".devkit", `${name}.manifest.json`);
-    if (existsSync(manifestPath))
-        unlinkSync(manifestPath);
-    const lock = readLock();
-    delete lock.components[name];
-    writeLock(lock);
-    log.success(`${name} ejected. Files are yours — DevKit will no longer manage them.`);
-});
+    .command("eject [name]")
+    .description("Stop DevKit from tracking component(s) — run with no args to pick interactively")
+    .action((name) => ejectCommand(name));
 // ── Help footer ───────────────────────────────────────────────────────────────
 program.addHelpText("after", `
 ${chalk.bold("Examples:")}
   ${chalk.cyan("devkit create my-app")}                       Interactive project creation
   ${chalk.cyan("devkit create my-app --template=nextjs-compact --yes")}   Non-interactive
+  ${chalk.cyan("devkit add")}                                 Interactive component picker
   ${chalk.cyan("devkit add auth")}                            Install auth component
   ${chalk.cyan("devkit add hero-section --variant=split-image")}
+  ${chalk.cyan("devkit eject")}                               Pick component(s) to eject
   ${chalk.cyan("devkit theme set colors.primary #e11d48")}   Change primary color
   ${chalk.cyan("devkit doctor")}                              Check configuration
   ${chalk.cyan("devkit list")}                                Browse all components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roboticela/devkit",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Roboticela DevKit CLI — scaffold, extend, and theme full-stack projects with one command",
   "type": "module",
   "bin": {