ui-thing 0.1.56 → 0.2.0

package/src/commands/init.ts

@@ -1,76 +1,125 @@
+import path from "node:path";
+import { updateConfig } from "c12/update";
 import { Command } from "commander";
-import { defu } from "defu";
 import fse from "fs-extra";
 import kleur from "kleur";
+import ora from "ora";
 
 import { createCSS } from "../templates/css";
-import { TAILWIND_CONFIG_JS } from "../templates/tailwind";
+import { TW_HELPER } from "../templates/tw-helper";
 import { InitOptions, UIConfig } from "../types";
 import { addPrettierConfig } from "../utils/addPrettierConfig";
-import { addModuleToConfig, getNuxtConfig, getUIConfig, updateConfig } from "../utils/config";
+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 { installPackages } from "../utils/installPackages";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 
+/**
+ * Runs the initialization command.
+ */
+const runInitCommand = async (options: InitOptions) => {
+  // Get or create the initial configuration file
+  let uiConfig: UIConfig = await getUIConfig(options);
+  const spinner = ora("Updating nuxt.config...").start();
+  // Get nuxt config
+  await updateConfig({
+    cwd: process.cwd(),
+    configFile: "nuxt.config",
+    async onUpdate(config: any) {
+      // Create modules array if it does not exist
+      if (!config.modules) config.modules = [];
+      // Create imports object if it does not exist
+      if (!config.imports) config.imports = { imports: [] };
+      for (const mod of INIT_MODULES) {
+        if (!config.modules.includes(mod)) {
+          config.modules.push(mod);
+        }
+      }
+      // Add color mode config to nuxt.config file
+      if (!config.colorMode) {
+        // get the name of the folder(project name)
+        const projectName = path.basename(process.cwd());
+        config.colorMode = { storageKey: `${projectName}-color-mode` };
+      }
+      // Add icon config if not present
+      if (!config.icon) {
+        config.icon = {
+          clientBundle: { scan: true, sizeLimitKb: 0 },
+          mode: "svg",
+          class: "shrink-0",
+          fetchTimeout: 2000,
+          serverBundle: "local",
+        };
+      }
+      // Add `tv` auto-import to the config file if it does not exists
+      if (
+        !config.imports.imports.find((i: any) => i.from === "tailwind-variants" && i.name === "tv")
+      ) {
+        config.imports.imports.push({ from: "tailwind-variants", name: "tv" });
+      }
+      // Add `VariantProps` auto-import to the config file if it does not exists
+      if (
+        !config.imports.imports.find(
+          (i: any) => i.from === "tailwind-variants" && i.name === "VariantProps"
+        )
+      ) {
+        config.imports.imports.push({
+          from: "tailwind-variants",
+          name: "VariantProps",
+          type: true,
+        });
+      }
+      // Add css path to config
+      config.css ||= [];
+      config.css.push(`~/${uiConfig.tailwindCSSLocation?.split("app/")[1]}`);
+    },
+  });
+  await addTailwindVitePlugin();
+  spinner.succeed("Updated nuxt.config!");
+  spinner.start("Adding initial Tailwind CSS file...");
+  fse.writeFileSync(
+    uiConfig.tailwindCSSLocation,
+    createCSS(uiConfig.theme.toUpperCase() as any),
+    "utf-8"
+  );
+  spinner.succeed("Added initial Tailwind CSS file!");
+  spinner.start("Adding Autocomplete helper...");
+  // Add Autocomplete helper
+  fse.writeFileSync(uiConfig.utilsLocation + "/tw-helper.ts", TW_HELPER, "utf-8");
+  spinner.succeed("Added Autocomplete helper!");
+  spinner.start("Merging VS Code settings...");
+  // Add .vscode folder with recommendations & settings
+  addVSCodeFiles();
+  spinner.succeed("Merged VS Code settings!");
+  // Install deps
+  await installPackages(uiConfig.packageManager, INIT_DEPS, INIT_DEV_DEPS);
+  // Add prettier config
+  await addPrettierConfig();
+  printFancyBoxMessage(
+    "Initialized",
+    `Feel free to start adding components with the ${kleur.bgWhite(" add ")} command.`,
+    { box: { title: "Complete" } }
+  );
+};
+
+/**
+ * Command to initialize UI Thing in a Nuxt project.
+ */
 export const init = new Command()
   .command("init")
   .name("init")
+  .summary("Initialize UI Thing in your Nuxt project.")
   .description(
-    "Initialize UI Thing in your Nuxt project. This will: 1. Create a tailwind.config.js file 2. Update your nuxt.config.ts file 3. Add the necessary dependencies 4. Create a ui-thing.config.ts file with the default configuration"
+    `${kleur.bold("Initialize UI Thing in your Nuxt project.")}
+
+  ✅ Add tailwindcss to your project
+  ✅ Update your nuxt.config file
+  ✅ Add the necessary dependencies
+  ✅ Create a ${kleur.bold("ui-thing.config")} file with the default configuration`
   )
   .option("-f --force", "Overwrite config file if it exists.", false)
   .option("-y --yes", "Skip prompts and use default values.", false)
-  .option("-n --nuxtVersion <number>", "Specify the Nuxt version you are using.", "3")
-  .action(async (options: InitOptions) => {
-    // Get nuxt config
-    const cfg = await getNuxtConfig();
-    // Get ui config
-    let uiConfig: UIConfig = await getUIConfig(options);
-    // Add tailwindcss
-    await fse.writeFile(uiConfig.tailwindConfigLocation, TAILWIND_CONFIG_JS, "utf-8");
-    // create css path if it does not exist
-    // add css file
-    fse.writeFileSync(
-      uiConfig.tailwindCSSLocation,
-      createCSS(uiConfig.theme.toUpperCase() as any),
-      "utf-8"
-    );
-    // Add init modules ot nuxt cinfig
-    addModuleToConfig(cfg.nuxtConfig, INIT_MODULES);
-    // Configure modules in nuxt config
-    cfg.defaultExport.tailwindcss = defu(cfg.defaultExport.tailwindcss, {
-      exposeConfig: true,
-      editorSupport: true,
-    });
-    cfg.defaultExport.colorMode = defu(cfg.defaultExport.colorMode, { classSuffix: "" });
-    cfg.defaultExport.imports ||= {};
-    cfg.defaultExport.imports.imports ||= [];
-    const tvExists = cfg.defaultExport.imports.imports.find(
-      (i: any) => i.from === "tailwind-variants" && i.name === "tv"
-    );
-    if (!tvExists) {
-      cfg.defaultExport.imports.imports.push({ from: "tailwind-variants", name: "tv" });
-    }
-    const variantPropsExists = cfg.defaultExport.imports.imports.find(
-      (i: any) => i.from === "tailwind-variants" && i.name === "VariantProps"
-    );
-    if (!variantPropsExists) {
-      cfg.defaultExport.imports.imports.push({
-        from: "tailwind-variants",
-        name: "VariantProps",
-        type: true,
-      });
-    }
-    // Write changes to nuxt config
-    await updateConfig(cfg.nuxtConfig, "nuxt.config.ts");
-    // instal deps
-    await installPackages(uiConfig.packageManager, INIT_DEPS, INIT_DEV_DEPS);
-    // Add prettier config
-    await addPrettierConfig();
-
-    printFancyBoxMessage(
-      "Initialized",
-      { title: "Complete" },
-      `Feel free to start adding components with the ${kleur.bgWhite(" add ")} command.`
-    );
-  });
+  .option("-n --nuxtVersion <number>", "Specify the Nuxt version you are using.")
+  .action(runInitCommand);

package/src/commands/prettier.ts

@@ -9,15 +9,13 @@ import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 export const addPrettier = new Command()
   .command("prettier")
   .name("prettier")
-  .description("Add prettier to your project.")
+  .description("Adds prettier config to your project.")
   .action(async () => {
     const added = await addPrettierConfig(undefined, false);
     if (!added) {
-      printFancyBoxMessage(
-        "Not Added",
-        { title: "Prettier Not Added", borderColor: "red" },
-        `Prettier config was not added.`
-      );
+      printFancyBoxMessage("Not Added", `Prettier config was not added.`, {
+        box: { title: "Prettier Not Added", borderColor: "red" },
+      });
       return;
     }
 
@@ -37,7 +35,7 @@ export const addPrettier = new Command()
     ]);
     printFancyBoxMessage(
       "All Done!",
-      { title: "Prettier Added" },
-      `A .prettierrc file has been added to your project and the code formatted. Enjoy!`
+      `A .prettierrc file has been added to your project and the code formatted. Enjoy!`,
+      { box: { title: "Prettier Added" } }
     );
   });

package/src/commands/shortcuts.ts

@@ -1,25 +1,22 @@
 import { Command } from "commander";
+import { execa } from "execa";
+import ora from "ora";
 import prompts from "prompts";
 
 import { addShortcutFiles } from "../utils/addShortcutFiles";
-import { addModuleToConfig, getNuxtConfig, updateConfig } from "../utils/config";
 import { PACKAGE_MANAGER_CHOICES } from "../utils/constants";
-import { installPackages } from "../utils/installPackages";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 
+/**
+ * Adds the shortcuts composables to the project.
+ */
 export const addShortcuts = new Command()
   .command("shortcuts")
   .name("shortcuts")
-  .description("Add the defineShortcuts & useShortcuts composables to your project.")
+  .description("Add the shortcuts composables to your project.")
   .action(async () => {
     await addShortcutFiles();
 
-    // Get nuxt config
-    const cfg = await getNuxtConfig();
-    addModuleToConfig(cfg.nuxtConfig, ["@vueuse/nuxt"]);
-    // Write changes to nuxt config
-    await updateConfig(cfg.nuxtConfig, "nuxt.config.ts");
-
     const { pkgManager } = await prompts({
       name: "pkgManager",
       type: "select",
@@ -28,11 +25,14 @@ export const addShortcuts = new Command()
     });
     if (!pkgManager) return process.exit(0);
 
-    // install prettier dep
-    await installPackages(pkgManager, undefined, ["@vueuse/math", "@vueuse/nuxt"]);
+    const spinner = ora("Installing vueuse module...").start();
+    // install vueuse for nuxt
+    await execa`npx -y nuxi@latest module add vueuse`;
+    spinner.succeed("VueUse module installed successfully!");
+
     printFancyBoxMessage(
       "All Done!",
-      { title: "Shortcuts Added" },
-      `Check the composables folder for the defineShortcuts & useShortcuts composables.`
+      `Check the composables folder for the shortcuts composables.`,
+      { box: { title: "Composable Added" } }
     );
   });

package/src/commands/theme.ts

@@ -1,6 +1,6 @@
 import { Command } from "commander";
-import { consola } from "consola";
 import fse from "fs-extra";
+import kleur from "kleur";
 import _ from "lodash";
 import prompts from "prompts";
 
@@ -10,6 +10,9 @@ import { getUIConfig } from "../utils/config";
 import { CSS_THEME_OPTIONS } from "../utils/constants";
 import { printFancyBoxMessage } from "../utils/printFancyBoxMessage";
 
+/**
+ * Adds a new theme to the project.
+ */
 export const theme = new Command()
   .command("theme")
   .name("theme")
@@ -22,7 +25,7 @@ export const theme = new Command()
       uiConfig = await getUIConfig({ force: true });
     }
     if (_.isEmpty(uiConfig)) {
-      consola.info("Config file not set. Exiting...");
+      console.log(kleur.red("Config file not set. Exiting..."));
       process.exit(0);
     }
     const { theme } = await prompts([
@@ -34,8 +37,8 @@ export const theme = new Command()
       },
     ]);
     if (!theme) {
-      console.log("No theme selected. Exiting...");
-      return process.exit(0);
+      console.log(kleur.red("No theme selected. Exiting..."));
+      process.exit(0);
     }
     if (fse.existsSync(uiConfig.tailwindCSSLocation)) {
       const { force } = await prompts([
@@ -55,7 +58,7 @@ export const theme = new Command()
 
     printFancyBoxMessage(
       `${_.capitalize(theme)}`,
-      { title: "New Theme Added" },
-      `${_.capitalize(theme)} theme has been added to ${uiConfig.tailwindCSSLocation}`
+      `${_.capitalize(theme)} theme has been added to ${uiConfig.tailwindCSSLocation}`,
+      { box: { title: "New Theme Added" } }
     );
   });

package/src/index.ts

@@ -17,12 +17,12 @@ const program = new Command();
 
 console.clear();
 
-printFancyBoxMessage("UI Thing", { title: "Welcome" });
+printFancyBoxMessage("UI Thing", undefined, { box: { title: "Welcome" } });
 console.log();
 
 program
   .name("ui-thing")
-  .description("CLI for adding ui-thing components to your Nuxt 3 application")
+  .description("CLI for adding ui-thing components to your Nuxt application")
   .version(version)
   .addCommand(init)
   .addCommand(add)