ui-thing 0.1.55 → 0.2.0

package/src/utils/addShortcutFiles.ts

@@ -1,10 +1,13 @@
 import { join } from "node:path";
 import fse from "fs-extra";
 
-import { DEFINE_SHORTCUT, USE_SHORTCUTS } from "../templates/shortcuts";
+import { DEFINE_SHORTCUT } from "../templates/shortcuts";
 import { UIConfig } from "../types";
 import { getUIConfig } from "./config";
 
+/**
+ * Adds shortcut files to the specified directory.
+ */
 export const addShortcutFiles = async (cwd = process.cwd()) => {
   // get config
   let userConfig: UIConfig = await getUIConfig();
@@ -12,7 +15,5 @@ export const addShortcutFiles = async (cwd = process.cwd()) => {
   // ensure that the composable folder exists
   await fse.ensureDir(composablesLocation);
   // write the defineShortcuts composable
-  await fse.writeFile(join(composablesLocation, "defineShortcuts.ts"), DEFINE_SHORTCUT, "utf-8");
-  // write the useShortcuts composable
-  await fse.writeFile(join(composablesLocation, "useShortcuts.ts"), USE_SHORTCUTS, "utf-8");
+  await fse.writeFile(join(composablesLocation, "shortcuts.ts"), DEFINE_SHORTCUT, "utf-8");
 };

package/src/utils/addTailwindVitePlugin.ts

@@ -0,0 +1,35 @@
+import { join } from "node:path";
+import { builders, loadFile, writeFile } from "magicast";
+import { getDefaultExportOptions } from "magicast/helpers";
+
+/**
+ * Adds the Tailwind CSS Vite plugin to the Nuxt config.
+ */
+export const addTailwindVitePlugin = async () => {
+  // Get the path to nuxt config
+  const CONFIG_PATH = join(process.cwd(), "nuxt.config.ts");
+  // Load the nuxt config file
+  const cfg = await loadFile(CONFIG_PATH);
+  // check if `tailwindcss()` is already present in the code
+
+  if (!cfg.$code.includes("tailwindcss()")) {
+    // get the exported config object
+    const defaultExport = getDefaultExportOptions(cfg);
+    // ensure vite and plugins are defined
+    defaultExport.vite ||= {};
+    defaultExport.vite.plugins ||= [];
+    // push the function to the plugins array
+    defaultExport.vite.plugins.push(builders.functionCall("tailwindcss"));
+  }
+  // check if tailwind plugin is already imported
+  if (!cfg.imports.$items.find((i) => i.local === "tailwindcss")) {
+    // prepend the import for tailwindcss
+    cfg.imports.$prepend({
+      from: "@tailwindcss/vite",
+      local: "tailwindcss",
+      imported: "default",
+    });
+  }
+  // write the changes to the `nuxt.config.ts` file
+  await writeFile(cfg, CONFIG_PATH);
+};

package/src/utils/addVSCodeFiles.ts

@@ -0,0 +1,13 @@
+import fse from "fs-extra";
+
+import { VS_CODE_RECOMMENDATIONS, VS_CODE_SETTINGS } from "../templates/vs-code";
+import { mergeJsonFile } from "./mergeJsonFile";
+
+/**
+ * Adds the necessary VS Code configuration files.
+ */
+export const addVSCodeFiles = (VS_CODE_FOLDER = ".vscode") => {
+  fse.ensureDirSync(VS_CODE_FOLDER);
+  mergeJsonFile(`${VS_CODE_FOLDER}/extensions.json`, VS_CODE_RECOMMENDATIONS);
+  mergeJsonFile(`${VS_CODE_FOLDER}/settings.json`, VS_CODE_SETTINGS);
+};

package/src/utils/compareUIConfig.ts

@@ -12,7 +12,6 @@ export const compareUIConfig = async () => {
     nuxtVersion: 3,
     theme: "string",
     tailwindCSSLocation: "string",
-    tailwindConfigLocation: "string",
     componentsLocation: "string",
     composablesLocation: "string",
     utilsLocation: "string",
@@ -29,7 +28,7 @@ export const compareUIConfig = async () => {
     }
   }
 
-  if (missingProperties.length > 0) {
+  if (missingProperties.length > 1) {
     return false;
   }
   return true;

package/src/utils/config.ts

@@ -1,120 +1,93 @@
-import { join } from "path";
+import { join } from "node:path";
 import { loadConfig } from "c12";
 import fse from "fs-extra";
-import kleur from "kleur";
 import _ from "lodash";
-import { loadFile, ProxifiedModule, writeFile } from "magicast";
-import { addNuxtModule, getDefaultExportOptions } from "magicast/helpers";
+import { loadFile, writeFile } from "magicast";
+import { addNuxtModule } from "magicast/helpers";
 import prompts from "prompts";
 
 import { InitOptions, UIConfig } from "../types";
-import { initPrompts, promptForNuxtVersion } from "./uiConfigPrompt";
+import { DEFAULT_CONFIG, DEFAULT_CONFIG_NUXT4, UI_CONFIG_FILENAME } from "./constants";
+import { detectNuxtVersion } from "./detectNuxtVersion";
+import { initPrompts } from "./uiConfigPrompt";
 
 const currentDir = process.cwd();
-const uiConfigFilename = "ui-thing.config.ts";
-const defaultConfig: UIConfig = {
-  nuxtVersion: 3,
-  theme: "zinc",
-  tailwindCSSLocation: "assets/css/tailwind.css",
-  tailwindConfigLocation: "tailwind.config.js",
-  componentsLocation: "components/Ui",
-  composablesLocation: "composables",
-  pluginsLocation: "plugins",
-  utilsLocation: "utils",
-  force: true,
-  useDefaultFilename: true,
-  packageManager: "npm",
-};
-const defaultNuxt4Config: UIConfig = {
-  nuxtVersion: 4,
-  theme: "zinc",
-  tailwindCSSLocation: "app/assets/css/tailwind.css",
-  tailwindConfigLocation: "tailwind.config.js",
-  componentsLocation: "app/components/Ui",
-  composablesLocation: "app/composables",
-  pluginsLocation: "app/plugins",
-  utilsLocation: "app/utils",
-  force: true,
-  useDefaultFilename: true,
-  packageManager: "npm",
-};
-
-export const getNuxtConfig = async () => {
-  if (!fse.existsSync("nuxt.config.ts")) {
-    console.log(kleur.red(`No ${kleur.bgWhite(`nuxt.config.ts`)} file found. Exiting...`));
-    return process.exit(0);
-  }
-  const nuxtConfig = await loadFile(join(currentDir, "nuxt.config.ts"));
-  const defaultExport = getDefaultExportOptions(nuxtConfig);
-  return { nuxtConfig, defaultExport };
-};
 
-export const getUIConfig = async (options?: InitOptions) => {
-  const configFileExists = fse.existsSync(uiConfigFilename);
+/**
+ * Creates or retrieves the UI Thing config.
+ */
+export const getUIConfig = async (options?: InitOptions): Promise<UIConfig> => {
+  const configExists = fse.existsSync(UI_CONFIG_FILENAME);
   let uiConfig: UIConfig = {} as UIConfig;
-  let nuxtVersion = Number(options?.nuxtVersion);
+  const nuxtVersion = Number(options?.nuxtVersion) || detectNuxtVersion();
 
-  if (!configFileExists || options?.force) {
-    if (!nuxtVersion) {
-      nuxtVersion = await promptForNuxtVersion();
-    }
-    // if option yes is passed, use default values
-    if (options?.yes) {
-      uiConfig = Number(nuxtVersion) === 4 ? defaultNuxt4Config : defaultConfig;
-    } else {
-      uiConfig = await initPrompts();
-    }
-    await fse.writeFile(uiConfigFilename, `export default ${JSON.stringify(uiConfig, null, 2)}`);
-    // Check if user chose pnpm as package manager
+  // Force creation or first-time setup
+  if (!configExists || options?.force) {
+    uiConfig = options?.yes
+      ? nuxtVersion === 4
+        ? DEFAULT_CONFIG_NUXT4
+        : DEFAULT_CONFIG
+      : await initPrompts(nuxtVersion);
+
+    await fse.writeFile(UI_CONFIG_FILENAME, `export default ${JSON.stringify(uiConfig, null, 2)}`);
+
+    // Handle pnpm special case
     if (uiConfig.packageManager === "pnpm") {
-      // check if a .npmrc file exists
       const npmrcExists = fse.existsSync(".npmrc");
-      // as the user if they want to create a .npmrc file
+      let shouldWrite = true;
+
       if (npmrcExists) {
         const { confirmCreateNpmrc } = await prompts({
           type: "confirm",
           name: "confirmCreateNpmrc",
-          message: "A .npmrc file already exists. Do you want to overwrite it?",
+          message: "A .npmrc file already exists. Overwrite it?",
           initial: false,
         });
-        if (confirmCreateNpmrc) {
-          await fse.writeFile(".npmrc", "shamefully-hoist=true\nstrict-peer-dependencies=false\n");
-        }
-      } else {
+        shouldWrite = confirmCreateNpmrc;
+      }
+
+      if (shouldWrite) {
         await fse.writeFile(".npmrc", "shamefully-hoist=true\nstrict-peer-dependencies=false\n");
       }
     }
   } else {
-    const data = await loadConfig({
-      configFile: uiConfigFilename.replace(".ts", ""),
+    const data = await loadConfig<UIConfig>({
+      configFile: UI_CONFIG_FILENAME.replace(".ts", ""),
     });
     uiConfig = data.config as UIConfig;
   }
-  if (_.isEmpty(uiConfig)) {
-    await getUIConfig({ force: true });
-  }
+
+  // Ensure valid config
+  if (_.isEmpty(uiConfig)) return getUIConfig({ force: true });
+
   createConfigPaths(uiConfig);
   return uiConfig;
 };
 
-export const createConfigPaths = (uiConfig: UIConfig) => {
-  // Esnure files exists
-  if (uiConfig.tailwindCSSLocation) fse.ensureFileSync(uiConfig.tailwindConfigLocation);
-  if (uiConfig.pluginsLocation) fse.ensureDirSync(uiConfig.pluginsLocation);
-  if (uiConfig.tailwindConfigLocation) fse.ensureFileSync(uiConfig.tailwindCSSLocation);
-  if (uiConfig.componentsLocation) fse.ensureDirSync(uiConfig.componentsLocation);
-  if (uiConfig.composablesLocation) fse.ensureDirSync(uiConfig.composablesLocation);
-  if (uiConfig.utilsLocation) fse.ensureDirSync(uiConfig.utilsLocation);
-};
+/**
+ * Ensures all required paths exist for UI Thing.
+ */
+const createConfigPaths = (uiConfig: UIConfig) => {
+  const ensureFileOrDir = (pathValue?: string, isDir = false) => {
+    if (!pathValue) return;
+    isDir ? fse.ensureDirSync(pathValue) : fse.ensureFileSync(pathValue);
+  };
 
-export const addModuleToConfig = (cfg: ProxifiedModule, modules: string[] | string) => {
-  if (typeof modules === "string") {
-    modules = [modules];
-  }
-  modules.forEach((m) => addNuxtModule(cfg, m));
-  return cfg;
+  ensureFileOrDir(uiConfig.tailwindCSSLocation);
+  ensureFileOrDir(uiConfig.pluginsLocation, true);
+  ensureFileOrDir(uiConfig.componentsLocation, true);
+  ensureFileOrDir(uiConfig.composablesLocation, true);
+  ensureFileOrDir(uiConfig.utilsLocation, true);
 };
 
-export const updateConfig = async (cfg: ProxifiedModule, fileName = "nuxt.config.ts") => {
-  await writeFile(cfg.$ast, fileName);
+/**
+ * Adds one or multiple Nuxt modules to nuxt.config.ts safely.
+ */
+export const addModuleToConfig = async (modules: string[] | string) => {
+  if (!modules) return;
+  const modulesArray = typeof modules === "string" ? [modules] : modules;
+
+  const proxy = await loadFile(join(currentDir, "nuxt.config.ts"));
+  modulesArray.forEach((m) => addNuxtModule(proxy, m));
+  await writeFile(proxy, join(currentDir, "nuxt.config.ts"));
 };

package/src/utils/constants.ts

@@ -1,41 +1,95 @@
+import { UIConfig } from "../types";
+
+/**
+ * The filename of the UI Thing configuration file.
+ */
+export const UI_CONFIG_FILENAME = "ui-thing.config.ts";
+/**
+ * The default UI Thing configuration.
+ *
+ * Used when Nuxt 3 is detected
+ */
+export const DEFAULT_CONFIG: UIConfig = {
+  theme: "zinc",
+  tailwindCSSLocation: "assets/css/tailwind.css",
+  componentsLocation: "components/Ui",
+  composablesLocation: "composables",
+  pluginsLocation: "plugins",
+  utilsLocation: "utils",
+  force: true,
+  useDefaultFilename: true,
+  packageManager: "npm",
+};
+
+/**
+ * The default UI Thing configuration.
+ *
+ * Used when Nuxt 4 is detected
+ */
+export const DEFAULT_CONFIG_NUXT4: UIConfig = {
+  theme: "zinc",
+  tailwindCSSLocation: "app/assets/css/tailwind.css",
+  componentsLocation: "app/components/Ui",
+  composablesLocation: "app/composables",
+  pluginsLocation: "app/plugins",
+  utilsLocation: "app/utils",
+  force: true,
+  useDefaultFilename: true,
+  packageManager: "npm",
+};
+
+/**
+ * The initial core dependencies
+ */
 export const INIT_DEPS = [
-  "radix-vue",
+  "tailwindcss",
+  "motion-v",
+  "@tailwindcss/vite",
+  "reka-ui",
   "tailwind-variants",
+  "tailwind-merge",
   "@nuxt/fonts",
-  "@nuxtjs/tailwindcss",
   "@nuxtjs/color-mode",
   "@nuxt/icon",
   "@vueuse/nuxt",
   "@tailwindcss/forms",
-  "tailwindcss-animate",
 ];
+
+/**
+ * The initial development dependencies
+ */
 export const INIT_DEV_DEPS = [
   "typescript",
   "prettier-plugin-tailwindcss",
   "prettier",
   "@ianvs/prettier-plugin-sort-imports",
+  "tw-animate-css",
 ];
 
+/**
+ * Initial modules that are needed
+ */
 export const INIT_MODULES = [
-  "@nuxtjs/tailwindcss",
   "@nuxtjs/color-mode",
+  "motion-v/nuxt",
   "@vueuse/nuxt",
   "@nuxt/icon",
   "@nuxt/fonts",
 ];
 
-export const NUXT_VERSIONS = [
-  { title: "Nuxt 3", value: 3 },
-  { title: "Nuxt 4", value: 4 },
-];
-
+/**
+ * List of available package managers to chose from
+ */
 export const PACKAGE_MANAGER_CHOICES = [
-  { title: "NPM", value: "npm" },
-  { title: "YARN", value: "yarn" },
-  { title: "PNPM", value: "pnpm" },
-  { title: "BUN", value: "bun" },
+  { title: "Npm", value: "npm" },
+  { title: "Yarn", value: "yarn" },
+  { title: "Pnpm", value: "pnpm" },
+  { title: "Bun", value: "bun" },
 ];
 
+/**
+ * List of available CSS themes to choose from
+ */
 export const CSS_THEME_OPTIONS = [
   { title: "Zinc", value: "zinc" },
   { title: "Slate", value: "slate" },

package/src/utils/detectNuxtVersion.ts

@@ -0,0 +1,20 @@
+import fs from "fs";
+
+/**
+ * Detect the Nuxt.js version from package.json.
+ */
+export function detectNuxtVersion() {
+  try {
+    const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
+    const nuxtVer = pkg.dependencies?.nuxt || pkg.devDependencies?.nuxt;
+    if (nuxtVer) {
+      // check if version is 4.x
+      // check for all possible formats with a regex
+      if (/^[~^>=<\s]*4/.test(nuxtVer)) return 4;
+      return 3;
+    }
+  } catch {
+    return 4;
+  }
+  return 4;
+}

package/src/utils/fetchComponents.ts

@@ -1,8 +1,21 @@
 import axios from "axios";
+import dotenv from "dotenv";
+import ora from "ora";
 
 import { Component } from "../types";
 
+dotenv.config();
+
+/**
+ * Function used to fetch components from the API.
+ */
 export const fetchComponents = async () => {
-  const { data } = await axios.get<Component[]>("https://ui-thing.behonbaker.com/api/components");
+  const spinner = ora("Fetching components...").start();
+
+  const { data } = await axios.get<Component[]>(
+    process.env.COMPONENTS_API || "https://uithing.com/api/components"
+  );
+  spinner.succeed("Components fetched.");
+
   return data;
 };

package/src/utils/installPackages.ts

@@ -1,28 +1,7 @@
-import * as fs from "fs";
-import * as path from "path";
 import { execa } from "execa";
 import _ from "lodash";
 import ora from "ora";
 
-function checkPackageJson() {
-  const packageJsonPath = path.join(process.cwd(), "package.json");
-  let scriptExists = false;
-
-  // Check if package.json file exists
-  if (fs.existsSync(packageJsonPath)) {
-    // Read the package.json file
-    const packageJsonContent = fs.readFileSync(packageJsonPath, "utf-8");
-    const packageJson = JSON.parse(packageJsonContent);
-
-    // Check if "postinstall" script is defined
-    const postinstallScript = packageJson.scripts?.postinstall;
-    if (postinstallScript) {
-      scriptExists = true;
-    }
-  }
-  return scriptExists;
-}
-
 export const installPackages = async (
   packageManager: string,
   deps?: string[] | string,
@@ -44,12 +23,9 @@ export const installPackages = async (
     await execa(packageManager, [packageManager === "yarn" ? "add" : "install", "-D", ...devDeps]);
   }
 
-  // Check if package.json file exists
-  if (checkPackageJson()) {
-    // we should check to see if there is a postinstall script and run it
-    depsSpinner.text = "Running postinstall script...";
-    await execa(packageManager, ["run", "postinstall"]);
-  }
+  // we should check to see if there is a postinstall script and run it
+  depsSpinner.text = "Running nuxt prepare...";
+  await execa`npx -y nuxt prepare`;
 
   depsSpinner.succeed("Installed dependencies!");
 };

package/src/utils/mergeJsonFile.ts

@@ -0,0 +1,28 @@
+import { merge } from "es-toolkit";
+import fse from "fs-extra";
+
+/**
+ * Merges JSON data into a file without overwriting existing keys.
+ * Creates the file if it does not exist.
+ *
+ * @param filePath - Path to the JSON file to update.
+ * @param newData - The new JSON data to merge in.
+ */
+export function mergeJsonFile(filePath: string, newData: Record<string, any>) {
+  let currentData: Record<string, any> = {};
+
+  // Read current JSON if it exists
+  if (fse.existsSync(filePath)) {
+    try {
+      currentData = fse.readJsonSync(filePath);
+    } catch {
+      console.warn(`⚠️ Could not parse ${filePath}, starting fresh.`);
+    }
+  }
+
+  // Merge existing and new data
+  const merged = merge(currentData, newData);
+
+  // Write merged JSON with pretty formatting
+  fse.writeJsonSync(filePath, merged, { spaces: 2 });
+}

package/src/utils/printFancyBoxMessage.ts

@@ -1,19 +1,65 @@
-import boxen from "boxen";
+import boxen, { Options as BoxOptions } from "boxen";
 import figlet from "figlet";
-import type { Options } from "boxen";
 
-export const printFancyBoxMessage = (title: string, boxOptions?: Options, description?: string) => {
-  console.log("\n");
-  console.log(
-    boxen(figlet.textSync(title), {
-      borderColor: "greenBright",
-      padding: 1,
-      borderStyle: "round",
-      titleAlignment: "center",
-      ...boxOptions,
-    })
-  );
-  if (description) {
-    console.log(`\n${description}`);
-  }
+/**
+ * Extra configuration options for the fancy box.
+ */
+interface FancyBoxOptions {
+  box?: BoxOptions; // Overrides for boxen (border style, color, etc.)
+  figletFont?: figlet.Fonts; // Optional font name for ASCII art
+}
+
+/**
+ * Creates the ASCII-art box as a string (pure function — does not log).
+ * Useful for testing because it avoids side effects like console output.
+ *
+ * @param title - The main text to display in big ASCII font
+ * @param description - Optional subtitle or extra info below the box
+ * @param options - Styling and font configuration
+ * @returns A fully formatted string with ASCII title inside a box
+ */
+const createFancyBoxMessage = (
+  title: string,
+  description?: string,
+  options: FancyBoxOptions = {}
+): string => {
+  const { box, figletFont } = options;
+
+  // Generate the ASCII art title using figlet
+  const asciiTitle = figlet.textSync(title, {
+    font: figletFont || "Standard", // Default font if none provided
+  });
+
+  // Default box styling so all boxes look consistent
+  const defaultBoxOptions: BoxOptions = {
+    borderColor: "greenBright",
+    padding: 1,
+    borderStyle: "round",
+    titleAlignment: "center",
+  };
+
+  // Wrap ASCII art in a decorative box
+  const boxMessage = boxen(asciiTitle, {
+    ...defaultBoxOptions, // Base styles
+    ...box, // User overrides
+  });
+
+  // Append description if provided
+  return description ? `${boxMessage}\n${description}` : boxMessage;
+};
+
+/**
+ * CLI-friendly helper that prints the fancy box directly to the terminal.
+ * This simply calls `createFancyBoxMessage` and logs the result.
+ *
+ * @param title - The main title to display
+ * @param description - Optional extra info under the box
+ * @param options - Font and box customization
+ */
+export const printFancyBoxMessage = (
+  title: string,
+  description?: string,
+  options?: FancyBoxOptions
+) => {
+  console.log("\n" + createFancyBoxMessage(title, description, options));
 };

package/src/utils/promptForComponents.ts

@@ -1,9 +1,15 @@
 import prompts from "prompts";
 
-import allComponents from "../comps";
 import { Component } from "../types";
+import { fetchComponents } from "./fetchComponents";
 
-export const promptUserForComponents = async (all?: boolean): Promise<string[]> => {
+/**
+ * Prompts the user to select components to add.
+ */
+export const promptUserForComponents = async (
+  all?: boolean,
+  allComponents: Component[] = []
+): Promise<string[]> => {
   // If all is true, return all components
   if (all) return allComponents.map((c: Component) => c.value);
   const { components } = await prompts({
@@ -11,10 +17,6 @@ export const promptUserForComponents = async (all?: boolean): Promise<string[]>
     name: "components",
     message: "Select the components you want to add",
     choices: allComponents.map((c: Component) => ({ title: c.name, value: c.value })),
-    onRender(kleur) {
-      // @ts-ignore
-      this.msg = kleur.bgCyan(" Choose components ") + "  Select the components you want to add";
-    },
   });
   return components;
 };