ui-thing 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "CLI used to add Nuxt components to a project",
   "keywords": [
     "cli",
@@ -50,42 +50,43 @@
     ]
   },
   "dependencies": {
-    "axios": "^1.13.1",
+    "axios": "^1.13.2",
     "boxen": "^8.0.1",
-    "c12": "^3.3.1",
+    "c12": "^3.3.3",
     "commander": "^14.0.2",
     "consola": "^3.4.2",
     "dotenv": "^17.2.3",
-    "es-toolkit": "^1.41.0",
-    "execa": "^9.6.0",
-    "figlet": "^1.9.3",
-    "fs-extra": "^11.3.2",
+    "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",
+    "magicast": "^0.5.1",
     "ora": "^9.0.0",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.38.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.9.2",
+    "@types/lodash": "^4.17.21",
+    "@types/node": "^24.10.4",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^4.0.5",
-    "eslint": "^9.38.0",
-    "globals": "^16.4.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.6.1",
-    "knip": "^5.66.4",
-    "lint-staged": "^16.2.6",
-    "prettier": "^3.6.2",
-    "tsup": "^8.5.0",
+    "knip": "^5.78.0",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.7.4",
+    "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2",
-    "vitest": "^4.0.5"
+    "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/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/fetchBlockCategories.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+import dotenv from "dotenv";
+import ora from "ora";
+
+dotenv.config();
+
+/**
+ * Fetch block categories from UI Thing API.
+ */
+export const fetchBlockCategories = async () => {
+  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;
+};

package/src/utils/fetchBlocks.ts

@@ -0,0 +1,21 @@
+import axios from "axios";
+import dotenv from "dotenv";
+import ora from "ora";
+
+import { BlockComponent } from "../types";
+
+dotenv.config();
+
+/**
+ * Fetch block components from UI Thing API.
+ */
+export const fetchBlocks = async () => {
+  const spinner = ora("Fetching blocks...").start();
+
+  const { data } = await axios.get<BlockComponent[]>(
+    process.env.BLOCKS_API || "https://uithing.com/api/blocks"
+  );
+
+  spinner.succeed("Blocks fetched.");
+  return data;
+};

package/src/utils/fetchProseComponents.ts

@@ -0,0 +1,21 @@
+import axios from "axios";
+import dotenv from "dotenv";
+import ora from "ora";
+
+import { ProseComponent } from "../types";
+
+dotenv.config();
+
+/**
+ * Fetch prose components from UI Thing API.
+ */
+export const fetchProseComponents = async () => {
+  const spinner = ora("Fetching prose components...").start();
+
+  const { data } = await axios.get<ProseComponent[]>(
+    process.env.PROSE_COMPONENTS_API || "https://uithing.com/api/prose"
+  );
+
+  spinner.succeed("Prose components fetched.");
+  return data;
+};

package/src/utils/promptForComponents.ts

@@ -1,21 +1,24 @@
 import prompts from "prompts";
 
-import { Component } from "../types";
+import { Component, ProseComponent } from "../types";
 
 /**
  * Prompts the user to select components to add.
  */
 export const promptUserForComponents = async (
   all?: boolean,
-  allComponents: Component[] = []
+  allComponents: Component[] | ProseComponent[] = []
 ): Promise<string[]> => {
   // If all is true, return all components
-  if (all) return allComponents.map((c: Component) => c.value);
+  if (all) return allComponents.map((c: Component | ProseComponent) => c.value);
   const { components } = await prompts({
     type: "autocompleteMultiselect",
     name: "components",
     message: "Select the components you want to add",
-    choices: allComponents.map((c: Component) => ({ title: c.name, value: c.value })),
+    choices: allComponents.map((c: Component | ProseComponent) => ({
+      title: c.name,
+      value: c.value,
+    })),
   });
   return components;
 };