ui-thing 0.2.8 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "CLI used to add Nuxt components to a project",
   "keywords": [
     "cli",
@@ -30,65 +30,67 @@
   },
   "scripts": {
     "build": "tsup",
-    "clean": "rm -rf dist coverage node_modules package-lock.json && npm install",
+    "clean": "rm -rf dist coverage node_modules bun.lock package-lock.json && bun install",
     "coverage": "vitest run --coverage",
     "dev": "tsup --watch",
     "format": "npx prettier --write .",
     "knip": "knip",
     "knip:fix": "knip --fix",
     "lint": "eslint src",
-    "lint-staged": "lint-staged",
     "lint:fix": "eslint src --fix",
+    "lint-staged": "lint-staged",
     "prepare": "husky",
-    "release": "npm run build && npx changelogen@latest --release && npm publish && git push --follow-tags",
+    "release": "bun run build && npx changelogen@latest --release && npm publish && git push --follow-tags",
     "start": "node dist/index.js",
     "test": "vitest"
   },
   "lint-staged": {
-    "*": [
+    "**/*.{ts,js}": [
       "prettier --write",
       "eslint --fix"
     ]
   },
   "dependencies": {
-    "axios": "^1.13.6",
+    "axios": "^1.18.1",
     "boxen": "^8.0.1",
-    "c12": "^3.3.3",
-    "commander": "^14.0.3",
+    "c12": "^3.3.4",
+    "commander": "^15.0.0",
     "consola": "^3.4.2",
-    "dotenv": "^17.3.1",
-    "es-toolkit": "^1.45.1",
+    "dotenv": "^17.4.2",
+    "es-toolkit": "^1.48.1",
     "execa": "^9.6.1",
     "figlet": "^1.11.0",
-    "fs-extra": "^11.3.4",
+    "fs-extra": "^11.3.5",
     "kleur": "^4.1.5",
-    "lodash": "^4.17.23",
-    "magicast": "^0.5.2",
-    "ora": "^9.3.0",
+    "lodash": "^4.18.1",
+    "magicast": "^0.5.3",
+    "ora": "^9.4.1",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
+    "@eslint/js": "^10.0.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.24",
-    "@types/node": "^25.5.0",
+    "@types/node": "^26.0.0",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^4.1.0",
-    "@vitest/ui": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/ui": "^4.1.9",
     "axios-mock-adapter": "^2.1.0",
-    "eslint": "^9.39.4",
-    "globals": "^17.4.0",
+    "eslint": "^10.5.0",
+    "globals": "^17.7.0",
     "husky": "^9.1.7",
-    "jiti": "^2.6.1",
-    "knip": "^5.86.0",
-    "lint-staged": "^16.4.0",
-    "prettier": "^3.8.1",
+    "jiti": "^2.7.0",
+    "knip": "^6.18.0",
+    "lint-staged": "^17.0.8",
+    "prettier": "^3.8.4",
+    "prettier-plugin-packagejson": "^3.0.2",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.0",
-    "vitest": "^4.1.0"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.62.0",
+    "vitest": "^4.1.9"
   },
+  "packageManager": "bun@1.3.14",
   "publishConfig": {
     "access": "public"
   }

package/src/commands/add.ts

@@ -13,6 +13,7 @@ import { fetchComponents } from "../utils/fetchComponents";
 import { fileExists } from "../utils/fileExists";
 import { installPackages } from "../utils/installPackages";
 import { installValidator } from "../utils/installValidator";
+import { logger } from "../utils/logger";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 import { promptUserForComponents } from "../utils/promptForComponents";
 import { writeFile } from "../utils/writeFile";
@@ -84,8 +85,8 @@ const runAddCommand = async (components: string[], options: AddCommand) => {
     uiConfig = await getUIConfig({ force: true });
   }
   if (_.isEmpty(uiConfig)) {
-    consola.info("Config file not set. Exiting...");
-    process.exit(0);
+    consola.error("Config file not set. Exiting...");
+    process.exit(1);
   }
 
   // Step 2 — Fetch all available components
@@ -206,11 +207,14 @@ const runAddCommand = async (components: string[], options: AddCommand) => {
     { box: { title: "Components Added" } }
   );
 
+  found
+    .filter((c) => c.docsPath)
+    .forEach((c) => consola.info(`Docs: https://uithing.com${c.docsPath}`));
+
   const instructions = _.compact(found.flatMap((c) => c.instructions));
   if (instructions.length > 0) {
-    console.log("");
-    console.log(kleur.bgCyan(" Instructions "));
-    instructions.forEach((i) => console.log(`${kleur.cyan("-")} ${i}`));
+    logger.info("Instructions:");
+    instructions.forEach((i) => logger.info(`- ${i}`));
   }
 };
 

package/src/commands/block.ts

@@ -59,8 +59,8 @@ const runBlockCommand = async (components: string[], options: BlockOptions) => {
     uiConfig = await getUIConfig({ force: true });
   }
   if (_.isEmpty(uiConfig)) {
-    consola.info("Config file not set. Exiting...");
-    process.exit(0);
+    consola.error("Config file not set. Exiting...");
+    process.exit(1);
   }
 
   // Step 1: Fetch categories
@@ -145,7 +145,9 @@ const runBlockCommand = async (components: string[], options: BlockOptions) => {
       stdio: "inherit",
     });
     if (result.error) {
-      consola.error("Failed to add components:", result.error.message);
+      consola.error("Failed to spawn component installer:", result.error.message);
+    } else if (result.status !== 0) {
+      consola.error(`Component installer exited with code ${result.status}`);
     }
   }
 

package/src/commands/list.ts

@@ -0,0 +1,48 @@
+import path from "node:path";
+import { Command } from "commander";
+
+import { Component } from "../types";
+import { getUIConfig } from "../utils/config";
+import { fetchComponents } from "../utils/fetchComponents";
+import { fileExists } from "../utils/fileExists";
+import { logger } from "../utils/logger";
+
+type ListOptions = { installed: boolean };
+
+export const runListCommand = async (options: ListOptions) => {
+  const uiConfig = await getUIConfig();
+  const components = await fetchComponents();
+  const currentDirectory = process.cwd();
+
+  let display: Component[] = components;
+
+  if (options.installed) {
+    const results = await Promise.all(
+      components.map(async (c) => {
+        if (!c.files || c.files.length === 0) return false;
+        const targetPath = path.join(
+          currentDirectory,
+          uiConfig.componentsLocation,
+          c.files[0].fileName
+        );
+        return fileExists(targetPath);
+      })
+    );
+    display = components.filter((_, i) => results[i]);
+  }
+
+  if (display.length === 0) {
+    logger.info(options.installed ? "No components installed." : "No components available.");
+    return;
+  }
+
+  display.forEach((c) => logger.log(`${c.name} (${c.value})`));
+  logger.success(`${display.length} component(s) found.`);
+};
+
+export const list = new Command()
+  .command("list")
+  .name("list")
+  .description("List available or installed components.")
+  .option("-i --installed", "Only show installed components.", false)
+  .action(runListCommand);

package/src/commands/prose.ts

@@ -71,8 +71,8 @@ const runProseCommand = async (components: string[], options: AddCommand) => {
     uiConfig = await getUIConfig({ force: true });
   }
   if (_.isEmpty(uiConfig)) {
-    consola.info("Config file not set. Exiting...");
-    process.exit(0);
+    consola.error("Config file not set. Exiting...");
+    process.exit(1);
   }
 
   allProse = await fetchProseComponents();
@@ -180,7 +180,9 @@ const runProseCommand = async (components: string[], options: AddCommand) => {
       stdio: "inherit",
     });
     if (result.error) {
-      consola.error("Failed to add components:", result.error.message);
+      consola.error("Failed to spawn component installer:", result.error.message);
+    } else if (result.status !== 0) {
+      consola.error(`Component installer exited with code ${result.status}`);
     }
   }
 
@@ -189,6 +191,8 @@ const runProseCommand = async (components: string[], options: AddCommand) => {
     `Run the ${kleur.cyan("ui-thing@latest --help")} command to learn more.\n`,
     { box: { title: "Prose Components Added" } }
   );
+
+  found.filter((c) => c.docsUrl).forEach((c) => consola.info(`Docs: ${c.docsUrl}`));
 };
 
 export const prose = new Command()

package/src/commands/remove.ts

@@ -0,0 +1,109 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { Command } from "commander";
+import prompts from "prompts";
+
+import { Component } from "../types";
+import { getUIConfig } from "../utils/config";
+import { fetchComponents } from "../utils/fetchComponents";
+import { fileExists } from "../utils/fileExists";
+import { logger } from "../utils/logger";
+import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
+
+export const runRemoveCommand = async (componentNames: string[]) => {
+  const uiConfig = await getUIConfig();
+  const allComponents = await fetchComponents();
+  const currentDirectory = process.cwd();
+
+  let toRemove = componentNames;
+
+  if (toRemove.length === 0) {
+    const installed = (
+      await Promise.all(
+        allComponents.map(async (c) => {
+          if (!c.files || c.files.length === 0) return null;
+          const targetPath = path.join(
+            currentDirectory,
+            uiConfig.componentsLocation,
+            c.files[0].fileName
+          );
+          return (await fileExists(targetPath)) ? c : null;
+        })
+      )
+    ).filter(Boolean) as Component[];
+
+    if (installed.length === 0) {
+      logger.info("No installed components found.");
+      return;
+    }
+
+    const { selected } = await prompts({
+      type: "autocompleteMultiselect",
+      name: "selected",
+      message: "Select components to remove",
+      choices: installed.map((c) => ({ title: c.name, value: c.value })),
+    });
+
+    if (!selected || selected.length === 0) {
+      logger.info("No components selected. Exiting...");
+      process.exit(0);
+    }
+    toRemove = selected;
+  }
+
+  const found = toRemove
+    .map((name) => allComponents.find((c) => c.value.toLowerCase() === name.toLowerCase()))
+    .filter(Boolean) as Component[];
+
+  if (found.length === 0) {
+    logger.error("None of the specified components were found in the registry.");
+    process.exit(1);
+  }
+
+  const result = await prompts({
+    type: "confirm",
+    name: "confirmed",
+    message: `Remove ${found.map((c) => c.name).join(", ")}?`,
+    initial: false,
+  });
+
+  if (!result?.confirmed) {
+    logger.info("Cancelled.");
+    return;
+  }
+
+  for (const component of found) {
+    const allFiles = [
+      ...component.files.map((f) =>
+        path.join(currentDirectory, uiConfig.componentsLocation, f.fileName)
+      ),
+      ...component.utils.map((f) =>
+        path.join(currentDirectory, uiConfig.utilsLocation, f.fileName)
+      ),
+      ...(component.composables ?? []).map((f) =>
+        path.join(currentDirectory, uiConfig.composablesLocation, f.fileName)
+      ),
+    ];
+
+    for (const filePath of allFiles) {
+      const exists = await fileExists(filePath);
+      if (!exists) {
+        logger.warn(`Skipped (not found): ${path.basename(filePath)}`);
+        continue;
+      }
+      await fs.unlink(filePath);
+      logger.success(`Removed: ${path.basename(filePath)}`);
+    }
+  }
+
+  printFancyBoxMessage("Removed!", undefined, { box: { title: "Components Removed" } });
+};
+
+export const remove = new Command()
+  .command("remove")
+  .name("remove")
+  .description(
+    "Remove installed components from your project.\nNote: shared utility files used by multiple components are deleted — other components depending on them may break."
+  )
+  .argument("[componentNames...]", "Components to remove.")
+  .action(runRemoveCommand);

package/src/commands/theme.ts

@@ -1,6 +1,5 @@
 import { Command } from "commander";
 import fse from "fs-extra";
-import kleur from "kleur";
 import _ from "lodash";
 import prompts from "prompts";
 
@@ -8,40 +7,33 @@ import { createCSS } from "../templates/css";
 import { compareUIConfig } from "../utils/compareUIConfig";
 import { getUIConfig } from "../utils/config";
 import { CSS_THEME_OPTIONS } from "../utils/constants";
+import { logger } from "../utils/logger";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 
-/**
- * Validates if a theme name exists in the predefined options.
- */
 const validateThemeName = (name: string) => {
   return CSS_THEME_OPTIONS.some((option) => option.value === name?.toLowerCase());
 };
 
-/**
- * Adds a new theme to the project.
- */
 export const theme = new Command()
   .command("theme")
   .name("theme")
   .description("Add a new theme to your project.")
   .argument("[themeName]", "The name of the theme you would like to add")
   .action(async (themeName?: string) => {
-    // Get ui config
     let uiConfig = await getUIConfig();
     const uiConfigIsCorrect = await compareUIConfig();
     if (!uiConfigIsCorrect) {
       uiConfig = await getUIConfig({ force: true });
     }
     if (_.isEmpty(uiConfig)) {
-      console.log(kleur.red("Config file not set. Exiting..."));
-      process.exit(0);
+      logger.error("Config file not set. Exiting...");
+      process.exit(1);
     }
 
     let selectedTheme =
       themeName && validateThemeName(themeName) ? themeName.toLowerCase() : undefined;
 
     if (!selectedTheme) {
-      // Prompt for theme if not provided or invalid
       const { theme } = await prompts([
         {
           name: "theme",
@@ -51,13 +43,12 @@ export const theme = new Command()
         },
       ]);
       if (!theme) {
-        console.log(kleur.red("No theme selected. Exiting..."));
+        logger.warn("No theme selected. Exiting...");
         process.exit(0);
       }
       selectedTheme = theme;
     }
 
-    // Check if the file exists
     if (fse.existsSync(uiConfig.tailwindCSSLocation)) {
       const { force } = await prompts([
         {
@@ -68,7 +59,7 @@ export const theme = new Command()
         },
       ]);
       if (!force) {
-        console.log("Exiting...");
+        logger.info("Exiting...");
         return process.exit(0);
       }
     }

package/src/commands/update.ts

@@ -0,0 +1,81 @@
+import path from "node:path";
+import { Command } from "commander";
+import prompts from "prompts";
+
+import { Component } from "../types";
+import { getUIConfig } from "../utils/config";
+import { fetchComponents } from "../utils/fetchComponents";
+import { fileExists } from "../utils/fileExists";
+import { logger } from "../utils/logger";
+import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
+import { writeFile } from "../utils/writeFile";
+
+export const runUpdateCommand = async (componentNames: string[]) => {
+  const uiConfig = await getUIConfig();
+  const allComponents = await fetchComponents();
+  const currentDirectory = process.cwd();
+
+  let toUpdate = componentNames;
+
+  if (toUpdate.length === 0) {
+    const installed = (
+      await Promise.all(
+        allComponents.map(async (c) => {
+          if (!c.files || c.files.length === 0) return null;
+          const targetPath = path.join(
+            currentDirectory,
+            uiConfig.componentsLocation,
+            c.files[0].fileName
+          );
+          return (await fileExists(targetPath)) ? c : null;
+        })
+      )
+    ).filter(Boolean) as Component[];
+
+    if (installed.length === 0) {
+      logger.info("No installed components found.");
+      return;
+    }
+
+    const { selected } = await prompts({
+      type: "autocompleteMultiselect",
+      name: "selected",
+      message: "Select components to update",
+      choices: installed.map((c) => ({ title: c.name, value: c.value })),
+    });
+
+    if (!selected || selected.length === 0) {
+      logger.info("No components selected. Exiting...");
+      process.exit(0);
+    }
+    toUpdate = selected;
+  }
+
+  const notFound = toUpdate.filter(
+    (name) => !allComponents.find((c) => c.value.toLowerCase() === name.toLowerCase())
+  );
+  if (notFound.length > 0) {
+    logger.warn(`Component(s) not found in registry: ${notFound.join(", ")}`);
+  }
+
+  const found = toUpdate
+    .map((name) => allComponents.find((c) => c.value.toLowerCase() === name.toLowerCase()))
+    .filter(Boolean) as Component[];
+
+  for (const component of found) {
+    for (const file of component.files) {
+      const targetPath = path.join(currentDirectory, uiConfig.componentsLocation, file.fileName);
+      await writeFile(targetPath, file.fileContent);
+      logger.success(`Updated: ${file.fileName}`);
+    }
+  }
+
+  printFancyBoxMessage("Updated!", undefined, { box: { title: "Components Updated" } });
+};
+
+export const update = new Command()
+  .command("update")
+  .name("update")
+  .description("Re-fetch and overwrite installed components with the latest version.")
+  .argument("[componentNames...]", "Components to update.")
+  .action(runUpdateCommand);

package/src/index.ts

@@ -5,10 +5,13 @@ import { version } from "../package.json";
 import { add } from "./commands/add";
 import { block } from "./commands/block";
 import { init } from "./commands/init";
+import { list } from "./commands/list";
 import { addPrettier } from "./commands/prettier";
 import { prose } from "./commands/prose";
+import { remove } from "./commands/remove";
 import { addShortcuts } from "./commands/shortcuts";
 import { theme } from "./commands/theme";
+import { update } from "./commands/update";
 import { printFancyBoxMessage } from "./utils/printFancyBoxMessage";
 
 process.on("SIGINT", () => process.exit(0));
@@ -31,6 +34,9 @@ program
   .addCommand(prose)
   .addCommand(block)
   .addCommand(theme)
+  .addCommand(list)
+  .addCommand(update)
+  .addCommand(remove)
   .addCommand(addShortcuts)
   .addCommand(addPrettier);
 

package/src/templates/css.ts

@@ -162,6 +162,11 @@ const CSS_END = `@layer base {
   html.light {
     color-scheme: light;
   }
+  @media (prefers-color-scheme: dark) {
+    select {
+      background-color: var(--popover);
+    }
+  }
 }
 
 @utility no-scrollbar {

package/src/templates/vs-code.ts

@@ -8,7 +8,6 @@ export const VS_CODE_RECOMMENDATIONS = {
     "antfu.iconify",
     "formulahendry.auto-close-tag",
     "formulahendry.auto-rename-tag",
-    "prettier.prettier-vscode",
   ],
 };
 
@@ -21,13 +20,6 @@ export const VS_CODE_SETTINGS = {
   "files.associations": { "*.css": "tailwindcss" },
   "tailwindCSS.classFunctions": ["tw", "clsx", "tw\\.[a-z-]+"],
   "tailwindCSS.experimental.classRegex": [
-    [
-      "tv\\(([^)(]*(?:\\([^)(]*(?:\\([^)(]*(?:\\([^)(]*\\)[^)(]*)*\\)[^)(]*)*\\)[^)(]*)*)\\)",
-      '"(.*?)"',
-    ],
-    "tw`(.*?)`",
-    "tw\\('(.*?)'\\)",
-    "tw\\(\\s*('(.*?)'|\"(.*?)\")\\s*\\)",
     [
       "\\btv\\(\\s*((?:\"(?:\\\\.|[^\"\\\\])*\"|'(?:\\\\.|[^'\\\\])*'|`(?:\\\\.|[^`\\\\])*`|[^)]*)*)\\)",
       "[\"']([^\"']*)[\"']",

package/src/utils/config.ts

@@ -4,7 +4,6 @@ import fse from "fs-extra";
 import _ from "lodash";
 import { loadFile, writeFile } from "magicast";
 import { addNuxtModule } from "magicast/helpers";
-import prompts from "prompts";
 
 import { InitOptions, UIConfig } from "../types";
 import { DEFAULT_CONFIG, DEFAULT_CONFIG_NUXT4, UI_CONFIG_FILENAME } from "./constants";
@@ -18,7 +17,8 @@ const currentDir = process.cwd();
  */
 export const getUIConfig = async (options?: InitOptions): Promise<UIConfig> => {
   const configExists = fse.existsSync(UI_CONFIG_FILENAME);
-  let uiConfig: UIConfig = {} as UIConfig;
+  // eslint-disable-next-line no-useless-assignment
+  let uiConfig = {} as UIConfig;
   const nuxtVersion = Number(options?.nuxtVersion) || detectNuxtVersion();
 
   // Force creation or first-time setup
@@ -31,23 +31,17 @@ export const getUIConfig = async (options?: InitOptions): Promise<UIConfig> => {
 
     await fse.writeFile(UI_CONFIG_FILENAME, `export default ${JSON.stringify(uiConfig, null, 2)}`);
 
-    // Handle pnpm special case
+    // Handle pnpm special case: append required lines without destroying existing content
     if (uiConfig.packageManager === "pnpm") {
-      const npmrcExists = fse.existsSync(".npmrc");
-      let shouldWrite = true;
-
-      if (npmrcExists) {
-        const { confirmCreateNpmrc } = await prompts({
-          type: "confirm",
-          name: "confirmCreateNpmrc",
-          message: "A .npmrc file already exists. Overwrite it?",
-          initial: false,
-        });
-        shouldWrite = confirmCreateNpmrc;
+      const requiredLines = ["shamefully-hoist=true", "strict-peer-dependencies=false"];
+      let existing = "";
+      if (fse.existsSync(".npmrc")) {
+        existing = await fse.readFile(".npmrc", "utf-8");
       }
-
-      if (shouldWrite) {
-        await fse.writeFile(".npmrc", "shamefully-hoist=true\nstrict-peer-dependencies=false\n");
+      const linesToAdd = requiredLines.filter((line) => !existing.includes(line));
+      if (linesToAdd.length > 0) {
+        const separator = existing && !existing.endsWith("\n") ? "\n" : "";
+        await fse.writeFile(".npmrc", existing + separator + linesToAdd.join("\n") + "\n");
       }
     }
   } else {

package/src/utils/constants.ts

@@ -87,6 +87,7 @@ export const PACKAGE_MANAGER_CHOICES = [
   { title: "Yarn", value: "yarn" },
   { title: "Pnpm", value: "pnpm" },
   { title: "Bun", value: "bun" },
+  { title: "Deno", value: "deno" },
 ];
 
 /**

package/src/utils/fetchBlockCategories.ts

@@ -1,19 +1,21 @@
 import axios from "axios";
+import { consola } from "consola";
 import dotenv from "dotenv";
 import ora from "ora";
 
 dotenv.config();
 
-/**
- * Fetch block categories from UI Thing API.
- */
-export const fetchBlockCategories = async () => {
+export const fetchBlockCategories = async (): Promise<string[]> => {
   const spinner = ora("Fetching block categories...").start();
-
-  const { data } = await axios.get<string[]>(
-    process.env.BLOCK_CATEGORIES_API || "https://uithing.com/api/blocks/categories"
-  );
-
-  spinner.succeed("Block categories fetched.");
-  return data;
+  try {
+    const { data } = await axios.get<string[]>(
+      process.env.BLOCK_CATEGORIES_API || "https://uithing.com/api/blocks/categories"
+    );
+    spinner.succeed("Block categories fetched.");
+    return data;
+  } catch {
+    spinner.fail("Failed to fetch block categories.");
+    consola.error("Could not reach the UI Thing API. Check your network connection.");
+    process.exit(1);
+  }
 };