ui-thing 0.2.4 → 0.2.6

package/eslint.config.ts

@@ -0,0 +1,19 @@
+import js from "@eslint/js";
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default defineConfig([
+  {
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts}"],
+    plugins: { js },
+    extends: ["js/recommended"],
+    languageOptions: { globals: globals.node },
+  },
+  tseslint.configs.recommended,
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-thing",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "CLI used to add Nuxt components to a project",
   "keywords": [
     "cli",
@@ -13,6 +13,7 @@
     "shadcn-ui"
   ],
   "repository": {
+    "type": "git",
     "url": "git+https://github.com/BayBreezy/ui-thing-cli.git"
   },
   "license": "MIT",
@@ -35,7 +36,9 @@
     "format": "npx prettier --write .",
     "knip": "knip",
     "knip:fix": "knip --fix",
+    "lint": "eslint src",
     "lint-staged": "lint-staged",
+    "lint:fix": "eslint src --fix",
     "prepare": "husky",
     "release": "npm run build && npx changelogen@latest --release && npm publish && git push --follow-tags",
     "start": "node dist/index.js",
@@ -47,37 +50,42 @@
     ]
   },
   "dependencies": {
-    "axios": "^1.11.0",
+    "axios": "^1.13.1",
     "boxen": "^8.0.1",
-    "c12": "^3.2.0",
-    "commander": "^14.0.0",
+    "c12": "^3.3.1",
+    "commander": "^14.0.2",
     "consola": "^3.4.2",
-    "dotenv": "^17.2.1",
-    "es-toolkit": "^1.39.9",
+    "dotenv": "^17.2.3",
+    "es-toolkit": "^1.41.0",
     "execa": "^9.6.0",
-    "figlet": "^1.8.2",
-    "fs-extra": "^11.3.1",
+    "figlet": "^1.9.3",
+    "fs-extra": "^11.3.2",
     "kleur": "^4.1.5",
     "lodash": "^4.17.21",
     "magicast": "^0.3.5",
-    "ora": "^8.2.0",
+    "ora": "^9.0.0",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.6.2",
+    "@eslint/js": "^9.38.0",
+    "@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.2.1",
+    "@types/node": "^24.9.2",
     "@types/prompts": "^2.4.9",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.0.5",
+    "eslint": "^9.38.0",
+    "globals": "^16.4.0",
     "husky": "^9.1.7",
-    "knip": "^5.62.0",
-    "lint-staged": "^16.1.5",
+    "jiti": "^2.6.1",
+    "knip": "^5.66.4",
+    "lint-staged": "^16.2.6",
     "prettier": "^3.6.2",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.2",
-    "vitest": "^3.2.4"
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2",
+    "vitest": "^4.0.5"
   },
   "publishConfig": {
     "access": "public"

package/src/commands/add.ts

@@ -109,7 +109,7 @@ const runAddCommand = async (components: string[], options: AddCommand) => {
   }
 
   // Step 5 — Collect found components and their dependencies
-  let found: Component[] = componentNames
+  const found: Component[] = componentNames
     .map((name) => findComponent(name))
     .filter(Boolean) as Component[];
 

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";
 
@@ -21,7 +21,7 @@ import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
  */
 const runInitCommand = async (options: InitOptions) => {
   // Get or create the initial configuration file
-  let uiConfig: UIConfig = await getUIConfig(options);
+  const uiConfig: UIConfig = await getUIConfig(options);
   const spinner = ora("Updating nuxt.config...").start();
   // Get nuxt config
   await updateConfig({
@@ -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/theme.ts

@@ -10,6 +10,13 @@ import { getUIConfig } from "../utils/config";
 import { CSS_THEME_OPTIONS } from "../utils/constants";
 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.
  */
@@ -17,10 +24,11 @@ export const theme = new Command()
   .command("theme")
   .name("theme")
   .description("Add a new theme to your project.")
-  .action(async () => {
+  .argument("[themeName]", "The name of the theme you would like to add")
+  .action(async (themeName?: string) => {
     // Get ui config
     let uiConfig = await getUIConfig();
-    let uiConfigIsCorrect = await compareUIConfig();
+    const uiConfigIsCorrect = await compareUIConfig();
     if (!uiConfigIsCorrect) {
       uiConfig = await getUIConfig({ force: true });
     }
@@ -28,25 +36,35 @@ export const theme = new Command()
       console.log(kleur.red("Config file not set. Exiting..."));
       process.exit(0);
     }
-    const { theme } = await prompts([
-      {
-        name: "theme",
-        type: "autocomplete",
-        message: "Which theme do you want to add?",
-        choices: CSS_THEME_OPTIONS,
-      },
-    ]);
-    if (!theme) {
-      console.log(kleur.red("No theme selected. Exiting..."));
-      process.exit(0);
+
+    let selectedTheme =
+      themeName && validateThemeName(themeName) ? themeName.toLowerCase() : undefined;
+
+    if (!selectedTheme) {
+      // Prompt for theme if not provided or invalid
+      const { theme } = await prompts([
+        {
+          name: "theme",
+          type: "autocomplete",
+          message: "Which theme do you want to add?",
+          choices: CSS_THEME_OPTIONS,
+        },
+      ]);
+      if (!theme) {
+        console.log(kleur.red("No theme selected. Exiting..."));
+        process.exit(0);
+      }
+      selectedTheme = theme;
     }
+
+    // Check if the file exists
     if (fse.existsSync(uiConfig.tailwindCSSLocation)) {
       const { force } = await prompts([
         {
           name: "force",
           type: "confirm",
-          message: "Do you want to overwrite your current css file?",
-          initial: true,
+          message: "The Tailwind CSS file already exists. Overwrite?",
+          initial: false,
         },
       ]);
       if (!force) {
@@ -54,11 +72,16 @@ export const theme = new Command()
         return process.exit(0);
       }
     }
-    fse.writeFileSync(uiConfig.tailwindCSSLocation, createCSS(theme.toUpperCase() as any), "utf-8");
+
+    fse.writeFileSync(
+      uiConfig.tailwindCSSLocation,
+      createCSS(selectedTheme!.toUpperCase() as any),
+      "utf-8"
+    );
 
     printFancyBoxMessage(
-      `${_.capitalize(theme)}`,
-      `${_.capitalize(theme)} theme has been added to ${uiConfig.tailwindCSSLocation}`,
+      `${_.capitalize(selectedTheme!)}`,
+      `${_.capitalize(selectedTheme!)} theme has been added to ${uiConfig.tailwindCSSLocation}`,
       { box: { title: "New Theme Added" } }
     );
   });

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/addShortcutFiles.ts

@@ -10,7 +10,7 @@ import { getUIConfig } from "./config";
  */
 export const addShortcutFiles = async (cwd = process.cwd()) => {
   // get config
-  let userConfig: UIConfig = await getUIConfig();
+  const userConfig: UIConfig = await getUIConfig();
   const composablesLocation = join(cwd, userConfig.composablesLocation);
   // ensure that the composable folder exists
   await fse.ensureDir(composablesLocation);

package/src/utils/compareUIConfig.ts

@@ -7,7 +7,7 @@ import { getUIConfig } from "./config";
  */
 export const compareUIConfig = async () => {
   // Get ui config
-  let userConfig: UIConfig = await getUIConfig();
+  const userConfig: UIConfig = await getUIConfig();
   const tempConfig: UIConfig = {
     nuxtVersion: 3,
     theme: "string",

package/src/utils/config.ts

@@ -70,7 +70,11 @@ export const getUIConfig = async (options?: InitOptions): Promise<UIConfig> => {
 const createConfigPaths = (uiConfig: UIConfig) => {
   const ensureFileOrDir = (pathValue?: string, isDir = false) => {
     if (!pathValue) return;
-    isDir ? fse.ensureDirSync(pathValue) : fse.ensureFileSync(pathValue);
+    if (isDir) {
+      fse.ensureDirSync(pathValue);
+    } else {
+      fse.ensureFileSync(pathValue);
+    }
   };
 
   ensureFileOrDir(uiConfig.tailwindCSSLocation);

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",
 ];
 
 /**

package/src/utils/fileExists.ts

@@ -4,6 +4,7 @@ export const fileExists = async (path: string) => {
   try {
     await fs.promises.access(path, fs.constants.F_OK || fs.constants.W_OK);
     return true;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
   } catch (error) {
     return false;
   }

package/src/utils/promptForComponents.ts

@@ -1,7 +1,6 @@
 import prompts from "prompts";
 
 import { Component } from "../types";
-import { fetchComponents } from "./fetchComponents";
 
 /**
  * Prompts the user to select components to add.

package/src/utils/uiConfigPrompt.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import kleur from "kleur";
 import prompts from "prompts";