ui-thing 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "CLI used to add Nuxt components to a project",
   "keywords": [
     "cli",
@@ -50,42 +50,43 @@
     ]
   },
   "dependencies": {
-    "axios": "^1.11.0",
+    "axios": "^1.13.2",
     "boxen": "^8.0.1",
-    "c12": "^3.2.0",
-    "commander": "^14.0.0",
+    "c12": "^3.3.3",
+    "commander": "^14.0.2",
     "consola": "^3.4.2",
-    "dotenv": "^17.2.2",
-    "es-toolkit": "^1.39.10",
-    "execa": "^9.6.0",
-    "figlet": "^1.8.2",
-    "fs-extra": "^11.3.1",
+    "dotenv": "^17.2.3",
+    "es-toolkit": "^1.43.0",
+    "execa": "^9.6.1",
+    "figlet": "^1.9.4",
+    "fs-extra": "^11.3.3",
     "kleur": "^4.1.5",
     "lodash": "^4.17.21",
-    "magicast": "^0.3.5",
-    "ora": "^8.2.0",
+    "magicast": "^0.5.1",
+    "ora": "^9.0.0",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.35.0",
+    "@eslint/js": "^9.39.2",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@types/figlet": "^1.7.0",
     "@types/fs-extra": "^11.0.4",
-    "@types/lodash": "^4.17.20",
-    "@types/node": "^24.3.1",
+    "@types/lodash": "^4.17.21",
+    "@types/node": "^24.10.4",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.35.0",
-    "globals": "^16.3.0",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vitest/ui": "^4.0.16",
+    "axios-mock-adapter": "^2.1.0",
+    "eslint": "^9.39.2",
+    "globals": "^16.5.0",
     "husky": "^9.1.7",
-    "jiti": "^2.5.1",
-    "knip": "^5.63.1",
-    "lint-staged": "^16.1.6",
-    "prettier": "^3.6.2",
-    "tsup": "^8.5.0",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.42.0",
-    "vitest": "^3.2.4"
+    "jiti": "^2.6.1",
+    "knip": "^5.78.0",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.7.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.51.0",
+    "vitest": "^4.0.16"
   },
   "publishConfig": {
     "access": "public"

package/src/commands/block.ts

@@ -0,0 +1,165 @@
+import { spawnSync } from "node:child_process";
+import path from "node:path";
+import { Command } from "commander";
+import { consola } from "consola";
+import kleur from "kleur";
+import _ from "lodash";
+import prompts from "prompts";
+
+import { AddCommand, BlockComponent } from "../types";
+import { compareUIConfig } from "../utils/compareUIConfig";
+import { getUIConfig } from "../utils/config";
+import { fetchBlockCategories } from "../utils/fetchBlockCategories";
+import { fetchBlocks } from "../utils/fetchBlocks";
+import { fileExists } from "../utils/fileExists";
+import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
+import { writeFile } from "../utils/writeFile";
+
+type BlockOptions = AddCommand & { category?: string };
+
+let allBlocks: BlockComponent[] = [];
+const currentDirectory = process.cwd();
+
+/**
+ * Get the default blocks directory based on Nuxt version from config
+ */
+function getDefaultBlocksDir(uiConfig: any): string {
+  const isNuxt4 = uiConfig.componentsLocation?.startsWith("app/");
+  return isNuxt4 ? "app/components/Blocks" : "components/Blocks";
+}
+
+async function safeWriteFile(
+  targetPath: string,
+  content: string,
+  forceOverwrite: boolean,
+  promptMessage: string
+) {
+  const exists = await fileExists(targetPath);
+
+  if (exists && !forceOverwrite) {
+    const { value: overwrite } = await prompts({
+      type: "confirm",
+      name: "value",
+      message: promptMessage,
+      initial: false,
+    });
+    if (!overwrite) {
+      consola.info(`Skipped: ${kleur.cyan(path.basename(targetPath))}`);
+      return false;
+    }
+  }
+
+  await writeFile(targetPath, content);
+  return true;
+}
+
+const runBlockCommand = async (components: string[], options: BlockOptions) => {
+  let uiConfig = await getUIConfig();
+  if (!(await compareUIConfig())) {
+    uiConfig = await getUIConfig({ force: true });
+  }
+  if (_.isEmpty(uiConfig)) {
+    consola.info("Config file not set. Exiting...");
+    process.exit(0);
+  }
+
+  // Step 1: Fetch categories
+  const categories = await fetchBlockCategories();
+
+  // Step 2: Ask user to select category
+  let selectedCategory = options.category;
+  if (!selectedCategory && categories?.length) {
+    const { category } = await prompts({
+      type: "select",
+      name: "category",
+      message: "Choose a block category",
+      choices: [{ title: "All", value: "all" }, ...categories.map((c) => ({ title: c, value: c }))],
+      initial: 0,
+    });
+    selectedCategory = category;
+  }
+
+  // Step 3: Fetch all blocks
+  allBlocks = await fetchBlocks();
+
+  // Step 4: Filter blocks by category if not "all"
+  let blocksToSelect = allBlocks;
+  if (selectedCategory && selectedCategory !== "all") {
+    blocksToSelect = allBlocks.filter((b) => b.category === selectedCategory);
+    if (blocksToSelect.length === 0) {
+      consola.warn(
+        `No blocks found for category ${kleur.cyan(selectedCategory)}. Falling back to all.`
+      );
+      blocksToSelect = allBlocks;
+    }
+  }
+
+  // Step 5: Let user select blocks via autocomplete multi-select
+  const { selectedBlocks } = await prompts({
+    type: "autocompleteMultiselect",
+    name: "selectedBlocks",
+    message: "Select the blocks you want to add",
+    choices: blocksToSelect.map((b) => ({ title: b.name, value: b })),
+  });
+
+  if (!selectedBlocks || selectedBlocks.length === 0) {
+    consola.info("No blocks selected. Exiting...");
+    process.exit(0);
+  }
+
+  const found: BlockComponent[] = selectedBlocks;
+
+  // Step 6: Ask user where to add blocks (with default based on Nuxt version)
+  const defaultBlocksDir = getDefaultBlocksDir(uiConfig);
+  const { blocksDir } = await prompts({
+    type: "text",
+    name: "blocksDir",
+    message: "Where should we add the blocks?",
+    initial: defaultBlocksDir,
+  });
+
+  const blocksDirPath = blocksDir || defaultBlocksDir;
+
+  // Step 7: Write block files
+  for (const block of found) {
+    // Create full path: blocksDirPath + block.path + block.fileName
+    const fullPath = path.join(blocksDirPath, block.path);
+    const targetPath = path.join(currentDirectory, fullPath);
+
+    const fileWritten = await safeWriteFile(
+      targetPath,
+      block.file,
+      uiConfig.force,
+      `The block file ${kleur.bold(block.fileName)} already exists. Overwrite?`
+    );
+
+    if (!fileWritten) continue;
+  }
+
+  // Step 8: Handle components if present
+  const componentsToAdd = _.uniq(found.flatMap((b) => b.components || []));
+  if (componentsToAdd.length > 0) {
+    consola.info(`Adding ${componentsToAdd.length} component(s) required by blocks...`);
+    const result = spawnSync("npx", ["ui-thing@latest", "add", ...componentsToAdd], {
+      cwd: currentDirectory,
+      stdio: "inherit",
+    });
+    if (result.error) {
+      consola.error("Failed to add components:", result.error.message);
+    }
+  }
+
+  // Step 9: Success message
+  printFancyBoxMessage(
+    "Blocks added!",
+    `Run the ${kleur.cyan("ui-thing@latest --help")} command to learn more.\n`,
+    { box: { title: "Blocks Added" } }
+  );
+};
+
+export const block = new Command()
+  .name("block")
+  .command("block")
+  .description("Add UI Thing blocks to your project.")
+  .option("-c --category <category>", "Filter blocks by category before selection")
+  .action(runBlockCommand);

package/src/commands/init.ts

@@ -8,11 +8,11 @@ import ora from "ora";
 import { createCSS } from "../templates/css";
 import { TW_HELPER } from "../templates/tw-helper";
 import { InitOptions, UIConfig } from "../types";
-import { addPrettierConfig } from "../utils/addPrettierConfig";
+import { addPrettierConfig, askPrettierConfig } from "../utils/addPrettierConfig";
 import { addTailwindVitePlugin } from "../utils/addTailwindVitePlugin";
 import { addVSCodeFiles } from "../utils/addVSCodeFiles";
 import { getUIConfig } from "../utils/config";
-import { INIT_DEPS, INIT_DEV_DEPS, INIT_MODULES } from "../utils/constants";
+import { INIT_DEPS, INIT_DEV_DEPS, INIT_DEV_DEPS_PRETTIER, INIT_MODULES } from "../utils/constants";
 import { installPackages } from "../utils/installPackages";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 
@@ -103,8 +103,12 @@ const runInitCommand = async (options: InitOptions) => {
   spinner.succeed("Merged VS Code settings!");
   // Install deps
   await installPackages(uiConfig.packageManager, INIT_DEPS, INIT_DEV_DEPS);
-  // Add prettier config
-  await addPrettierConfig();
+  // Add prettier config if user agrees
+  const addPrettier = await askPrettierConfig();
+  if (addPrettier) {
+    await installPackages(uiConfig.packageManager, [], INIT_DEV_DEPS_PRETTIER);
+    await addPrettierConfig();
+  }
   printFancyBoxMessage(
     "Initialized",
     `Feel free to start adding components with the ${kleur.bgWhite(" add ")} command.`,

package/src/commands/prettier.ts

@@ -2,7 +2,7 @@ import { Command } from "commander";
 import prompts from "prompts";
 
 import { addPrettierConfig } from "../utils/addPrettierConfig";
-import { PACKAGE_MANAGER_CHOICES } from "../utils/constants";
+import { INIT_DEV_DEPS_PRETTIER, PACKAGE_MANAGER_CHOICES } from "../utils/constants";
 import { installPackages } from "../utils/installPackages";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 
@@ -28,11 +28,7 @@ export const addPrettier = new Command()
     if (!pkgManager) return process.exit(0);
 
     // install prettier dep
-    await installPackages(pkgManager, undefined, [
-      "prettier",
-      "prettier-plugin-tailwindcss",
-      "@ianvs/prettier-plugin-sort-imports",
-    ]);
+    await installPackages(pkgManager, undefined, INIT_DEV_DEPS_PRETTIER);
     printFancyBoxMessage(
       "All Done!",
       `A .prettierrc file has been added to your project and the code formatted. Enjoy!`,

package/src/commands/prose.ts

@@ -0,0 +1,200 @@
+import { spawnSync } from "node:child_process";
+import path from "node:path";
+import { Command } from "commander";
+import { consola } from "consola";
+import kleur from "kleur";
+import _ from "lodash";
+import prompts from "prompts";
+
+import { AddCommand, ProseComponent, TemplateFile } from "../types";
+import { compareUIConfig } from "../utils/compareUIConfig";
+import { addModuleToConfig, getUIConfig } from "../utils/config";
+import { fetchProseComponents } from "../utils/fetchProseComponents";
+import { fileExists } from "../utils/fileExists";
+import { installPackages } from "../utils/installPackages";
+import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
+import { promptUserForComponents } from "../utils/promptForComponents";
+import { writeFile } from "../utils/writeFile";
+
+let allProse: ProseComponent[] = [];
+const currentDirectory = process.cwd();
+
+const findProse = (name: string) =>
+  allProse.find((c) => c.value.toLowerCase() === name.toLowerCase());
+
+async function safeWriteFile(
+  targetPath: string,
+  content: string,
+  forceOverwrite: boolean,
+  promptMessage: string
+) {
+  const exists = await fileExists(targetPath);
+
+  if (exists && !forceOverwrite) {
+    const { value: overwrite } = await prompts({
+      type: "confirm",
+      name: "value",
+      message: promptMessage,
+      initial: false,
+    });
+    if (!overwrite) {
+      consola.info(`Skipped: ${kleur.cyan(path.basename(targetPath))}`);
+      return false;
+    }
+  }
+
+  await writeFile(targetPath, content);
+  return true;
+}
+
+async function writeCategoryFiles(
+  category: string,
+  items: TemplateFile[] | undefined,
+  baseDir: string,
+  forceOverwrite: boolean
+) {
+  if (!items || items.length === 0) return;
+  for (const item of items) {
+    const targetPath = path.join(currentDirectory, baseDir, item.fileName);
+    await safeWriteFile(
+      targetPath,
+      item.fileContent,
+      forceOverwrite,
+      `The ${category} file ${kleur.bold(item.fileName)} already exists. Overwrite?`
+    );
+  }
+}
+
+const runProseCommand = async (components: string[], options: AddCommand) => {
+  let uiConfig = await getUIConfig();
+  if (!(await compareUIConfig())) {
+    uiConfig = await getUIConfig({ force: true });
+  }
+  if (_.isEmpty(uiConfig)) {
+    consola.info("Config file not set. Exiting...");
+    process.exit(0);
+  }
+
+  allProse = await fetchProseComponents();
+
+  let componentNames = components;
+  if (componentNames.length === 0) {
+    const response = await promptUserForComponents(options.all, allProse);
+    if (!response || response.length === 0) {
+      consola.info("No components selected. Exiting...");
+      process.exit(0);
+    }
+    componentNames = response;
+  }
+
+  const notFound = componentNames.filter((name) => !findProse(name));
+  if (notFound.length > 0) {
+    consola.error(`Not found: ${kleur.bgRed(notFound.join(", "))}`);
+  }
+
+  const found: ProseComponent[] = componentNames
+    .map((name) => findProse(name))
+    .filter(Boolean) as ProseComponent[];
+
+  // Handle prose dependencies
+  for (const comp of [...found]) {
+    if (comp.prose && comp.prose.length > 0) {
+      comp.prose.forEach((proseName) => {
+        if (!found.find((c) => c.value === proseName)) {
+          const proseComp = findProse(proseName);
+          if (proseComp) {
+            found.push(proseComp);
+          }
+        }
+      });
+    }
+  }
+
+  for (const component of found) {
+    const componentFile = component.file;
+    let dirPath = uiConfig.componentsLocation;
+    let filePath = path.join(currentDirectory, dirPath, componentFile.fileName);
+
+    if (!uiConfig.useDefaultFilename) {
+      const { value: newDir } = await prompts({
+        type: "text",
+        name: "value",
+        message: `Where should we add the file ${kleur.cyan(componentFile.fileName)}?`,
+        initial: dirPath,
+      });
+      if (newDir) {
+        dirPath = newDir;
+        filePath = path.join(currentDirectory, dirPath, componentFile.fileName);
+      }
+    }
+
+    const fileWritten = await safeWriteFile(
+      filePath,
+      componentFile.fileContent,
+      uiConfig.force,
+      `The file ${kleur.bold(componentFile.fileName)} already exists. Overwrite?`
+    );
+    if (!fileWritten) continue;
+
+    await writeCategoryFiles("utils", component.utils, uiConfig.utilsLocation, uiConfig.force);
+    await writeCategoryFiles(
+      "composables",
+      component.composables,
+      uiConfig.composablesLocation,
+      uiConfig.force
+    );
+    await writeCategoryFiles(
+      "plugins",
+      component.plugins,
+      uiConfig.pluginsLocation ?? "",
+      uiConfig.force
+    );
+  }
+
+  await addModuleToConfig(_.uniq(found.flatMap((c) => c.modules || [])));
+
+  const deps = _.uniq(found.flatMap((c) => c.deps || []));
+  const devDeps = _.uniq(found.flatMap((c) => c.devDeps || []));
+  if (deps.length > 0 || devDeps.length > 0) {
+    if (options.all) {
+      await installPackages(uiConfig.packageManager, deps, devDeps);
+    } else {
+      const { confirmInstall } = await prompts({
+        type: "confirm",
+        name: "confirmInstall",
+        message: `Install packages: ${kleur.cyan([...deps, ...devDeps].join(", "))}?`,
+        initial: true,
+      });
+      if (confirmInstall) {
+        await installPackages(uiConfig.packageManager, deps, devDeps);
+      }
+    }
+  }
+
+  // Collect and add components via the add command
+  const componentsToAdd = _.uniq(found.flatMap((c) => c.components || []));
+  if (componentsToAdd.length > 0) {
+    consola.info(`Adding ${componentsToAdd.length} component(s) required by prose...`);
+    const result = spawnSync("npx", ["ui-thing@latest", "add", ...componentsToAdd], {
+      cwd: currentDirectory,
+      stdio: "inherit",
+    });
+    if (result.error) {
+      consola.error("Failed to add components:", result.error.message);
+    }
+  }
+
+  printFancyBoxMessage(
+    "Prose added!",
+    `Run the ${kleur.cyan("ui-thing@latest --help")} command to learn more.\n`,
+    { box: { title: "Prose Components Added" } }
+  );
+};
+
+export const prose = new Command()
+  .name("prose")
+  .command("prose")
+  .description("Add prose components to your project.")
+  .option("-a --all", "Add all prose components to your project.", false)
+  .argument("[componentNames...]")
+  .action(runProseCommand);

package/src/index.ts

@@ -3,8 +3,10 @@ import { Command } from "commander";
 
 import { version } from "../package.json";
 import { add } from "./commands/add";
+import { block } from "./commands/block";
 import { init } from "./commands/init";
 import { addPrettier } from "./commands/prettier";
+import { prose } from "./commands/prose";
 import { addShortcuts } from "./commands/shortcuts";
 import { theme } from "./commands/theme";
 import { printFancyBoxMessage } from "./utils/printFancyBoxMessage";
@@ -26,6 +28,8 @@ program
   .version(version)
   .addCommand(init)
   .addCommand(add)
+  .addCommand(prose)
+  .addCommand(block)
   .addCommand(theme)
   .addCommand(addShortcuts)
   .addCommand(addPrettier);

package/src/templates/prettier.ts

@@ -9,6 +9,6 @@ export const PRETTIER_CONFIG = {
   trailingComma: "es5",
   useTabs: false,
   vueIndentScriptAndStyle: true,
-  tailwindFunctions: ["tv"],
+  tailwindFunctions: ["tv", "tw"],
   importOrder: ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "<TYPES>", "", "^[.]"],
 };

package/src/templates/shortcuts.ts

@@ -1,10 +1,4 @@
-export const DEFINE_SHORTCUT = `import {
-  createSharedComposable,
-  useActiveElement,
-  useDebounceFn,
-  useEventListener,
-} from "@vueuse/core";
-import type { MaybeRef } from "vue";
+export const DEFINE_SHORTCUT = `import type { MaybeRef } from "vue";
 
 type KbdKeysSpecificMap = {
   meta: string;

package/src/templates/vs-code.ts

@@ -5,10 +5,10 @@ export const VS_CODE_RECOMMENDATIONS = {
   recommendations: [
     "vue.volar",
     "bradlc.vscode-tailwindcss",
-    "esbenp.prettier-vscode",
     "antfu.iconify",
     "formulahendry.auto-close-tag",
     "formulahendry.auto-rename-tag",
+    "prettier.prettier-vscode",
   ],
 };
 
@@ -20,5 +20,13 @@ export const VS_CODE_SETTINGS = {
   "editor.quickSuggestions": { strings: "on" },
   "files.associations": { "*.css": "tailwindcss" },
   "tailwindCSS.classFunctions": ["tw", "clsx", "tw\\.[a-z-]+"],
-  "tailwindCSS.experimental.classRegex": [["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*)[\"'`]"]],
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "tv\\(([^)(]*(?:\\([^)(]*(?:\\([^)(]*(?:\\([^)(]*\\)[^)(]*)*\\)[^)(]*)*\\)[^)(]*)*)\\)",
+      '"(.*?)"',
+    ],
+    "tw`(.*?)`",
+    "tw\\('(.*?)'\\)",
+    "tw\\(\\s*('(.*?)'|\"(.*?)\")\\s*\\)",
+  ],
 };

package/src/types.ts

@@ -85,6 +85,12 @@ export type AddCommand = {
   all?: boolean;
 };
 
+export type TemplateFile = {
+  fileName: string;
+  dirPath: string;
+  fileContent: string;
+};
+
 export type Component = {
   name: string;
   value: string;
@@ -92,17 +98,56 @@ export type Component = {
   devDeps?: string[];
   nuxtModules?: string[];
   instructions?: string[];
-  files: Composable[];
-  utils: Composable[];
-  composables: Composable[];
-  plugins: Composable[];
+  files: TemplateFile[];
+  utils: TemplateFile[];
+  composables: TemplateFile[];
+  plugins: TemplateFile[];
   components?: string[];
   askValidator?: boolean;
   overrides?: Record<string, any>;
+  docsPath?: string;
 };
 
-type Composable = {
+export type ProseComponent = {
+  name: string;
+  value: string;
+  description?: string;
+  filePath: string;
   fileName: string;
-  dirPath: string;
-  fileContent: string;
+  /**
+   * The other prose components that should be added alongside this one.
+   */
+  prose?: string[];
+  docsUrl?: string;
+  file: TemplateFile;
+  /**
+   * The components that this prose component depends on.
+   *
+   * Should be added from the add command
+   */
+  components?: string[];
+  composables?: TemplateFile[];
+  utils?: TemplateFile[];
+  plugins?: TemplateFile[];
+  /** The dependencies to add */
+  deps?: string[];
+  /** The development dependencies to add */
+  devDeps?: string[];
+  /** The nuxt modules to add */
+  modules?: string[];
+};
+
+export type BlockComponent = {
+  /** The display name of the block */
+  name: string;
+  /** The filename of the block */
+  fileName: string;
+  /** The actual file content of the block */
+  file: string;
+  /** The category of the block */
+  category: string;
+  /** The path to the block */
+  path: string;
+  /** The components used by the block */
+  components?: string[];
 };

package/src/utils/addPrettierConfig.ts

@@ -67,3 +67,16 @@ export const addPrettierConfig = async (cwd = process.cwd(), format: boolean = t
 
   return true;
 };
+
+/**
+ * Asks the user if they want to add a Prettier configuration.
+ */
+export const askPrettierConfig = async (): Promise<boolean> => {
+  const { addPrettier } = await prompts({
+    name: "addPrettier",
+    type: "confirm",
+    message: "Would you like to add a Prettier configuration to your project?",
+    initial: true,
+  });
+  return addPrettier;
+};

package/src/utils/constants.ts

@@ -58,12 +58,14 @@ export const INIT_DEPS = [
 /**
  * The initial development dependencies
  */
-export const INIT_DEV_DEPS = [
-  "typescript",
+export const INIT_DEV_DEPS = ["typescript", "tw-animate-css"];
+/**
+ * The initial development dependencies for prettier stuff
+ */
+export const INIT_DEV_DEPS_PRETTIER = [
   "prettier-plugin-tailwindcss",
   "prettier",
   "@ianvs/prettier-plugin-sort-imports",
-  "tw-animate-css",
 ];
 
 /**